videoHero — position: center-right, height: tall

How to read this page

One rendered example of every block the page builder offers, generated by apps/cms/src/scripts/seed-sink-page.ts. Editing this page by hand is pointless — the next run overwrites it.

Each heading names the block's slug and the settings used to compose it, so you can find the same values in the admin. Where a setting changes the layout enough to matter, the variants appear next to each other: tileGrid three ways, grid two ways, pillList two ways.

This block is richText — a Lexical field with no settings at all. It renders as a centred reading column.

Above: grid — columns: 2, holding two collectionCard children. This is the homepage's pattern, used twice there. The grid owns layout, the children own content; children render 'nested', dropping their own page gutters so they fill the cell instead of re-containing themselves.

Above: grid — columns: 4, theme: dark, holding four collectionCard children. The /pages/brands wall is this exact shape with twenty-six of them. collectionCard is the only block that exists solely to live in a grid — it's absent from the top-level block list, so a grid is the only place you can reach it.

Above: logoMarquee — the press strip from /pages/about-us. Each logo's accessible name is its media alt text, so there's no per-row label field. SVGs render as plain images rather than through the transform pipeline, which does nothing for vector art.

Above: scrollSequence — a pinned frame sequence. `markerStyle: dial` draws a clock whose numerals stay upright while the rim turns, and it only appears when EVERY frame's marker parses as a time; anything else falls back to plain progress segments. Markers are rarely evenly spaced, so the dial emits one keyframe stop per frame rather than tweening end to end — a single tween would read 15:00 while frame two says 18:00. `revealOnEntry` opens the stage from an inset card; the stage keeps a margin and a 24px radius throughout, matching live.

Above: arcCarousel — the same circle mechanic as the dial, WITHOUT the counter-rotation, which is the entire visual difference: the cards look hand-tilted but each just sits on the rim at `index x angleStep`. `sweep` is how far the rim turns across the pinned scroll. Products come from the shared picker (hand-picked SKUs win) or a collection, resolved through the same path as productGrid; hand-authored cards are the fallback so the rim can carry brands or editorial instead.

Above: productTabs — several named sets, shopper's choice. Not a productGrid variant: a productGrid shows one set, so the tab labels here are translated CONTENT rather than a layout option. A tab whose products don't resolve is dropped rather than rendered as a dead label, and a single surviving tab renders as a plain grid with no strip — which is what you are looking at if only one tab appears. `<product-tabs>` only toggles visibility and ARIA state; it never fetches.

Above: videoWall — one markup, two layouts: a grid on desktop and a scroll-snap row on narrow screens, rather than legacy's second carousel component below the breakpoint. `<video-wall>` is the only script and it animates nothing — it plays a video only while it is on screen and allows at most one unmuted at a time. As everywhere else, a phone gets `mobileUrl` or the poster alone, never the desktop encode.

That's every block. If a block is missing from this page, it's missing from seed-sink-page.ts — add it there and re-run.