Sillmark

How it was made

The original is a site for design AI software that finds code violations in building models. Home, 2 products, pricing, resources, about, contact and 3 policy pages were carried over as they are.

A 1px line grid divides every cell. The root font size is set to 100vw/172.8 so cell widths match the original at 1440px.

The loader draws an elevation line drawing along with a progress line and splits up and down at 7.1 s. The progress speed follows a curve measured from the original's frames.

The floor-plan section on the home page stays pinned for 6,300px. Scattered walls gather into a plan, then the right panel and violation markers appear in turn.

The accent #fa3600 was changed to #c92b00 for text and #dc3000 for button backgrounds to meet contrast. Type is Schibsted Grotesk and Fragment Mono.

Articles were cut from 16 to 9. Pencil-render drawings became black-and-white photos, and smooth scrolling became native scrolling.

Key features

• Loader elevation drawing · progress line
• Hero violation markers · crosshair drag selection
• 6,300px pinned floor-plan section · looping Why panels
• Scroll-linked feature tabs · monthly/yearly pricing toggle · resource filter

Where and how to use it

Suited to B2B software that works with drawings and models. Product details, pricing table, resources and contact share one line grid.

Points to check

The contact and subscribe forms validate but send nothing. The loader runs about 7 seconds, and the screen cannot be used during it.