BOUNDS

How it was made

The original is a one-page site made as one episode of a design education series. It received a Developer Award along with Site of the Day.

Every block sits on 1440-frame coordinates and is measured in a single 100vw/1440 unit. The 1400×215 logo and 8-column grid keep the original values.

Shapes such as portrait cards, landscape cards, discs and wedges turn into the next shape as you scroll. It uses GSAP and Lenis, and scroll linking is calculated directly.

Notes Mode turns on 18 notes, and Daughter's Version turns on crayon doodles and a paper texture. The final playground drops pieces with Matter.js.

All copy was rewritten and the photos were replaced with 25 others. The child's drawings are hand-made crayon SVG.

Faint text #bfbfbf was raised to #767676, and the toggles got a focus ring. At 767px and below and on touch devices, only a clock and a notice appear.

Key features

• One page on 1440-frame coordinates
• Notes mode · child's drawing version toggles
• Disc, dial and poster scroll sequences
• Matter.js playground · live clocks

Where and how to use it

Suited to special pages that show one topic on a single page, such as courses, exhibitions or campaigns. Toggles add an explanation layer and a play layer to the same screen.

Points to check

At 767px and below and on touch devices the content cannot be seen. As a one-page site without menus or forms, it does not suit sites for finding information.