Scroll sections

The evening moment. The section pins for a short run of scroll: the room starts near-black, warm lamp pools bloom one after another at the points you place (lamp blocks, like hotspots), the headline lights in step and a mono readout ticks from 17:40 to 19:10. Optionally it ends with the lamp products.

Tip: Place each lamp with its horizontal and vertical position, and link a product to list it at the end.

Key settings

• Image
• Eyebrow label
• Show bronze dot
• Heading
• Text
• Button label
• Button link
• ReadoutTime of day · Light level (lux) · None
• Start time
• End time
• Show lamp products at the end
• Products label
• Show quick add
• HeightTall · Full screen
• Text positionBottom · Center
• Text backdrop strength
• Animate on scroll
• Scroll lengthShort · Medium · Long
• Intensity

A small framed image in the middle of the page opens to full bleed as you scroll; the caption fades in last.

Key settings

• Eyebrow label
• Heading
• Side note
• Image
• Caption
• Credit
• Animate on scroll
• Intensity

The section pins and vertical scroll carries a row of large plates sideways, with a "03 / 08" counter and a progress hairline. Below 768px it becomes a swipe row.

Key settings

• Eyebrow label
• Heading
• Side note
• Image shapePortrait (4:5) · Square · Landscape (4:3)
• Animate on scroll
• Intensity

Chapter cards pin and stack over one another; each settles back slightly as the next slides over it.

Key settings

• Eyebrow label
• Heading
• Side note
• Animate on scroll
• Intensity

A large manifesto whose words brighten from muted to ink as a reading line passes them.

Tip: Wrap words in *asterisks* to set them in the serif italic.

Key settings

• Eyebrow label
• Show bronze dot
• Text
• Signature
• Link label
• Link
• Text sizeLarge · Medium
• Animate on scroll
• Intensity

A giant word with a photograph or a muted looping video inside its letters. It starts enormous and settles to its natural size; the caption arrives last.

Key settings

• Word
• Image
• Video
• Eyebrow label
• Caption
• Button label
• Button link
• Animate on scroll
• Intensity
• Zoom focus

A hairline route draws itself down the page, meandering from point to point (years, places, chapters). Each point lights when the line reaches it.

Key settings

• Eyebrow label
• Heading
• Side note
• Animate on scroll
• Intensity

Two photographs drifting at slightly different rates with text set between them.

Key settings

• First image
• First caption
• Second image
• Second caption
• Eyebrow label
• Heading
• Text
• Button label
• Button link
• Swap image sides
• Animate on scroll
• Intensity

A photograph comes from a soft blur into focus as it reaches the centre of the screen, with a hairline "focus scale". Good for a product hero moment; it can show a product and its price.

Key settings

• Product
• Show product price
• Image
• Caption
• Eyebrow label
• Heading
• Text
• Button label
• Button link
• LayoutImage and text side by side · Wide image, text below
• Animate on scroll
• Intensity

Slow serif lines that drift on their own and follow the scroll: down and they travel their way, up and they come back.

Key settings

• SeparatorBronze dot · Dash · Slash · None
• Text sizeLarge · Medium
• Show hairlines between lines
• Animate on scroll
• Intensity
• Drift speed

A product photograph stays pinned while feature steps scroll past; the photograph changes per step and the story ends on the product form (variant, price, add to cart).

Key settings

• Product
• Eyebrow label
• Heading
• Label above the product
• Show dynamic checkout buttons
• Animate on scroll
• Intensity

The route from each workshop to one destination: a row of place chips, then one large panel per stop (maker, place, text, spec rows, products, link), ending in a destination panel.

Tip: Each stop can list products or a collection. If you set a link label, also set the link.

Key settings

• Eyebrow label
• Heading
• Route note
• Divider before the destination
• Animate on scroll
• Panel entranceSlide in from the side · Rise from below
• Scroll length per stop
• Intensity

A scene change: the section arrives as a plain curtain (a title card), pins, and the curtain lifts like a blind or parts like a theatre curtain onto a full-bleed photograph.

Key settings

• Image
• Eyebrow label
• Heading
• Text
• Button label
• Button link
• Text positionBottom · Center
• OpeningLifts like a blind · Parts in the middle
• Curtain color scheme
• Curtain label
• Curtain title
• Animate on scroll
• Intensity

Plates that "develop" like photographs in a tray: washed out and warm at first, coming up to full exposure as they reach the middle of the screen. A caption reads "Developing" until the picture is fixed.

Key settings

• Eyebrow label
• Heading
• Side note
• Image shapeMixed (landscape and portrait) · Portrait (4:5) · Square · Landscape (4:3)
• Show "Developing / Fixed" label
• Animate on scroll
• Intensity

A large headline arrives widely spaced and pale, and draws its letters together into tight display tracking as it settles.

Key settings

• Eyebrow label
• Heading
• Meta line
• Text
• Button label
• Button link
• Image
• Type styleSerif capitals · Serif italic · Grotesk
• AlignmentCenter · Left
• Animate on scroll
• Intensity

A split screen: the text column pins while photographs scroll past, each opening from the bottom edge. The step in view is lit in the pinned index.

Key settings

• Eyebrow label
• Heading
• Text
• Button label
• Button link
• Text columnLeft · Right
• Animate on scroll
• Intensity

A giant serif chapter number stays pinned beside the story and rolls over (01, 02, 03) as each chapter reaches the middle of the screen, with a hairline that fills as you read.

Key settings

• Eyebrow label
• Heading
• Animate on scroll
• Intensity