@struq/skill 0.4.3 → 0.5.0

package/skills/struq/blocks/CATALOG.md

@@ -1,12 +1,13 @@
 # Block catalogue
 
-Generated by scripts/release-blocks.mjs from Struq origin/main at a2b7d56. Do not edit: run the release script again.
+Generated by scripts/release-blocks.mjs from Struq origin/main at 95e54a2. Do not edit: run the release script again.
 44 admitted blocks. Install one with `node <skill-dir>/scripts/blocks.mjs add <slug>`; read its file for the props.
 Every block works light and dark; a variant is a different composition of the same idea, passed as `variant`.
 
 ## Preloaders
 
 ### preloader-wordmark
+film: role frame · home curtain · motif word · energy 2 · pins 0 · none
 
 Preloader: the wordmark. The first paint is the page's ground with the studio's name set huge across the screen in the display face at a light weight, fitted to the width with the loaded face; each letter fills through a rising mask, a faint tone first and the ink rising inside it, driven by real progress between a floor and a cap; then the name opens as a curtain onto the hero (split along its middle, dropped letter by letter, or settled into the header's wordmark) within 2.4 seconds of the first paint, once per session (helper: preloaders/preloader-slices-uncovered.ts).
 
@@ -19,29 +20,33 @@ Exports: `PreloaderWordmark`. Packages: @gsap/react, gsap.
 Files: `kit/blocks.css`, `kit/gsap.ts`, `preloaders/preloader-slices-uncovered.ts`, `preloaders/preloader-wordmark.tsx`.
 
 ### preloader-stack
+film: role frame · home weight · motif frame · energy 2 · pins 0 · counter
 
-Preloader: the stack. The first paint is the page's ground with the client's name, a quiet count and the first print in a small portrait frame; five or six prints cut inside that frame, each held shorter than the last, ending on the hero's own photo, and the frame then grows to the hero image's exact place and crop (the page marks it data-stack-target) so the cover becomes the hero with no seam, within 2.4 seconds of the first paint, once per session (helper: preloaders/preloader-slices-uncovered.ts).
+Preloader: the stack. The first paint is the page's ground with the client's name, a quiet count and the first print in a small portrait frame; five or six prints cut inside that frame, each held shorter than the last, ending on the hero's own photo, and the frame then grows to the hero image's exact place and crop (the page marks it data-stack-target) so the cover becomes the hero with no seam, within 2.4 seconds of the first paint, once per session.
 
 Exports: `PreloaderStack`. Packages: @gsap/react, gsap.
 Files: `kit/blocks.css`, `kit/gsap.ts`, `kit/images.ts`, `preloaders/preloader-slices-uncovered.ts`, `preloaders/preloader-stack.tsx`.
 
 ### preloader-slices
+film: role frame · home cut · motif cut · energy 2 · pins 0 · counter
 
-Preloader: the slices. The first paint is a dark cover cut into four vertical slices (three on phones), already composed: the client's name large, a caption, a hairline and the count at 000; the count runs to 100 in one move, then the slices drop away left to right, each carrying its strip of the name and count down and off behind a 5px accent edge, uncovering the page from the top onto its own entrance, within 2.4 seconds of the first paint, once per session (helper: preloaders/preloader-slices-uncovered.ts).
+Preloader: the slices. The first paint is a dark cover cut into four vertical slices (three on phones), already composed: the client's name large, a caption, a hairline and the count at 000; the count runs to 100 in one move, then the slices drop away left to right, each carrying its strip of the name and count down and off behind a 5px accent edge, uncovering the page from the top onto its own entrance, within 2.4 seconds of the first paint, once per session.
 
 Exports: `PreloaderSlices`. Packages: @gsap/react, gsap.
 Files: `kit/blocks.css`, `kit/gsap.ts`, `preloaders/preloader-slices-uncovered.ts`, `preloaders/preloader-slices.tsx`.
 
 ### preloader-gate
+film: role frame · home curtain · motif aperture · energy 2 · pins 0 · counter
 
-Preloader: the gate. The first paint is a shut gate with a whole film-leader dial and one figure; only the sweep moves, counting 3, 2, 1 on an eased count that waits for the fonts and the hero image, then the line through the middle lights and the two bars open top and bottom onto the hero, by 2.4 seconds from the first paint, once per session.
+Preloader: the gate. The first paint is a shut gate with a hairline ring on its middle line; an accent arc fills the ring on an eased count that waits for the fonts and the hero image (cutting through the client's own marks, one per beat, when given), then the line through the middle lights and the two bars open top and bottom onto the hero, by 2.4 seconds from the first paint, once per session (helper: preloaders/preloader-slices-uncovered.ts).
 
 Exports: `PreloaderGate`. Packages: @gsap/react, gsap.
-Files: `kit/blocks.css`, `kit/gsap.ts`, `preloaders/preloader-gate.tsx`.
+Files: `kit/blocks.css`, `kit/gsap.ts`, `preloaders/preloader-gate.tsx`, `preloaders/preloader-slices-uncovered.ts`.
 
 ## Page transitions
 
 ### page-transition-stack
+film: role frame · home weight · motif frame · energy 2 · pins 0 · none
 
 Page transition: the stack. On every link click and on back and forward, a small portrait print of the destination's own hero photo appears where the pointer is (centred for keys and history) and grows to fill the screen while the route loads under it, then settles into the new page's hero at its exact place and crop, so arriving is the preloader's own landing, under 0.9 seconds door to door; a print not decoded in time becomes the destination's name on the page ground and the cover lifts away instead (helper: preloaders/preloader-slices-uncovered.ts).
 
@@ -49,6 +54,7 @@ Exports: `PageTransitionStack`. Packages: @gsap/react, gsap, lenis.
 Files: `kit/SmoothScroll.tsx`, `kit/blocks.css`, `kit/gsap.ts`, `page-transitions/page-transition-stack.tsx`, `preloaders/preloader-slices-uncovered.ts`.
 
 ### page-transition-slices
+film: role frame · home cut · motif cut · energy 2 · pins 0 · none
 
 Page transition: the slices. On every link click and on back and forward, the slices of preloader-slices come in from above and close over the page with the destination's name and a running hairline, the route loads under them, and they carry on down and off, uncovering the new page from the top onto its entrance, about 0.65 seconds door to door, with focus, hashes and scroll restored (helper: preloaders/preloader-slices-uncovered.ts).
 
@@ -56,29 +62,33 @@ Exports: `PageTransitionSlices`. Packages: @gsap/react, gsap, lenis.
 Files: `kit/SmoothScroll.tsx`, `kit/blocks.css`, `kit/gsap.ts`, `page-transitions/page-transition-slices.tsx`, `preloaders/preloader-slices-uncovered.ts`.
 
 ### page-transition-gate
+film: role frame · home curtain · motif aperture · energy 2 · pins 0 · none
 
-Page transition: the gate. On every navigation, back button included, the preloader's bars close carrying the two halves of a slate (the dial and the destination's name), lock into one frame as the line and the dial light, hold while the route changes, then split the name and open onto the finished page, 0.9 seconds door to door.
+Page transition: the gate. On every navigation, back button included, the preloader's bars close carrying the two halves of a frame (a hairline ring and the destination's name), lock into one as the line and the ring light, hold while the route changes, then split the name and open onto the finished page, 0.9 seconds door to door (helper: preloaders/preloader-slices-uncovered.ts).
 
 Exports: `GateLink`, `GateStage`, `PageTransitionGate`. Packages: @gsap/react, gsap, lenis.
-Files: `kit/SmoothScroll.tsx`, `kit/blocks.css`, `kit/gsap.ts`, `page-transitions/page-transition-gate.tsx`.
+Files: `kit/SmoothScroll.tsx`, `kit/blocks.css`, `kit/gsap.ts`, `page-transitions/page-transition-gate.tsx`, `preloaders/preloader-slices-uncovered.ts`.
 
 ## Headers
 
 ### header-bar
+film: role frame · home none · motif neutral · energy 1 · pins 0 · hover · clock by prop clock
+film variants: settle energy 2
 
-Header: the bar. A fixed bar with the wordmark Noord, four links and one quiet text action, its ink changing per pixel at the edges of the sections under it, taking the ground once the page scrolls and keeping the hero's type clear; it hides and returns with the scroll and rolls each label, lands a large hero wordmark in the bar, or carries centred links, Rotterdam's live time and a progress rule; on phones it collapses to the wordmark and one Menu link.
+Header: the bar. A fixed bar with the wordmark Noord, four links and one quiet text action, its ink changing per pixel at the edges of the sections under it, taking the ground once the page scrolls and keeping the hero's type clear; it hides and returns with the scroll and rolls each label, lands a large hero wordmark in the bar, or carries centred links, the studio's place (its live time only with clock) and a progress rule; on phones it collapses to the wordmark and one Menu link.
 
 Variants (`variant`, the first is the default):
 - `quiet`: Wordmark left, links right, each label rolling letter by letter on hover; the bar hides as the page scrolls down and returns on scroll up, a hairline under it once scrolled.
 - `settle`: The wordmark is set large across the hero and shrinks into its place in the bar as the page scrolls, the links fading in as it lands.
-- `split`: Wordmark left, links centred with a line gliding under the hovered one, Rotterdam's live time and the action right, and a thin rule filling with the page's progress.
+- `split`: Wordmark left, links centred with a line gliding under the hovered one, the studio's place (its live time only with clock) and the action right, and a thin rule filling with the page's progress.
 
 Exports: `HeaderBar`. Packages: @gsap/react, gsap.
 Files: `headers/header-bar.tsx`, `kit/blocks.css`, `kit/gsap.ts`.
 
 ### menu-curtain
+film: role frame · home curtain · motif aperture · energy 1 · pins 0 · clock, hover · clock by prop clock
 
-Menu: the curtain. A minimal bar (wordmark Noord, one button that rolls Menu to Sluiten) whose ink changes exactly at the edge of the section under it, opening a full-screen menu as a curtain in the gate, slices or stack language: five large links rise through masks, the hovered or focused link shows its decoded photo on the calm side, and a foot line carries the contact address and Rotterdam local time; it closes the same way reversed, a close overtaken by an open turns round, and the page under it is held still and inert while it is open.
+Menu: the curtain. A minimal bar (wordmark Noord, one button that rolls Menu to Sluiten) whose ink changes exactly at the edge of the section under it, opening a full-screen menu as a curtain in the gate, slices or stack language: five large links rise through masks, the hovered or focused link shows its decoded photo on the calm side, and a foot line carries the contact address and the place of the studio (its live local time only with clock); it closes the same way reversed, a close overtaken by an open turns round, and the page under it is held still and inert while it is open.
 
 Variants (`variant`, the first is the default):
 - `gate`: An accent line draws from the middle of the screen and the menu opens from it as two edges part; the photo opens from its own middle line on hover.
@@ -91,6 +101,7 @@ Files: `headers/menu-curtain.tsx`, `kit/SmoothScroll.tsx`, `kit/blocks.css`, `ki
 ## Heroes
 
 ### hero-framed
+film: role opening · home none · motif frame · energy 3 · pins 1.5 · none
 
 Hero: the frame. One photograph hung on the page ground like a framed print, with four registration marks, a museum label and a caption, in three hangs: a small print at the centre you walk up to on the first scroll, the name set large on the wall with a tall print at the edge that opens over it, or a print that nearly fills the screen in a thin mat and steps back to a small portrait with the line beside it; pin 150%, the line on the photo's measured calm side or on the wall.
 
@@ -100,9 +111,11 @@ Variants (`variant`, the first is the default):
 - `passe`: A print that nearly fills the screen inside a thin mat; the first scroll steps back to a small portrait at the left with the line on the wall beside it.
 
 Exports: `HeroFramed`. Packages: @gsap/react, gsap.
-Files: `heroes/hero-framed.tsx`, `kit/blocks.css`, `kit/gsap.ts`, `kit/images.ts`, `kit/photo-read.ts`, `preloaders/preloader-slices-uncovered.ts`.
+Files: `heroes/hero-framed.tsx`, `kit/accent.ts`, `kit/blocks.css`, `kit/gsap.ts`, `kit/images.ts`, `kit/photo-read.ts`, `preloaders/preloader-slices-uncovered.ts`.
 
 ### hero-split
+film: role opening · home none · motif cut · energy 1 · pins 0 · none
+film variants: opening energy 2 pins 0.9
 
 Hero: split. One headline set twice across a seam, in the ground's ink and the photo's ink, with a cycling discipline and its photograph: the seam stands upright, lies flat with the word rising through it, or opens with the first scroll from a strip at the edge to the split.
 
@@ -112,9 +125,11 @@ Variants (`variant`, the first is the default):
 - `opening`: At rest the ground fills the screen and the photo is a strip at the edge; the first scroll opens it to the split while the headline turns to the photo ink as the edge passes.
 
 Exports: `HeroSplit`. Packages: @gsap/react, gsap.
-Files: `heroes/hero-split.tsx`, `kit/blocks.css`, `kit/gsap.ts`, `kit/images.ts`, `kit/photo-read.ts`, `preloaders/preloader-slices-uncovered.ts`.
+Files: `heroes/hero-split.tsx`, `kit/accent.ts`, `kit/blocks.css`, `kit/gsap.ts`, `kit/images.ts`, `kit/photo-read.ts`, `preloaders/preloader-slices-uncovered.ts`.
 
 ### hero-index
+film: role opening · home none · motif neutral · energy 1 · pins 0 · hover
+film variants: doorlopen energy 3 pins 2.4
 
 Hero: the index. The studio's list of work as the first screen, each name calling up its project's photograph: full screen behind the list on hover, in a window beside the list on the ground, or walked one by one by the first scroll while the hero holds.
 
@@ -124,11 +139,13 @@ Variants (`variant`, the first is the default):
 - `doorlopen`: The list centred over the photograph while the hero holds; each stretch of the first scroll raises the next project and steps its name forward.
 
 Exports: `HeroIndex`. Packages: @gsap/react, gsap.
-Files: `heroes/hero-index.tsx`, `kit/blocks.css`, `kit/gsap.ts`, `kit/images.ts`, `kit/photo-read.ts`, `preloaders/preloader-slices-uncovered.ts`.
+Files: `heroes/hero-index.tsx`, `kit/accent.ts`, `kit/blocks.css`, `kit/gsap.ts`, `kit/images.ts`, `kit/photo-read.ts`, `preloaders/preloader-slices-uncovered.ts`.
 
 ### hero-still
+film: role opening · home none · motif neutral · energy 1 · pins 0 · clock · clock by prop clock
+film variants: frame energy 2 pins 1
 
-Hero: full-bleed still. One photograph with a title in three compositions: full bleed with a slow push-in and the headline on its measured calm side, held in a frame of page ground opening to full bleed by registration on the first scroll, or the headline split across the photo's horizon; the caption strip with place, live time and one link under all three, and preloaders land on its photo box.
+Hero: full-bleed still. One photograph with a title in three compositions: full bleed with a slow push-in and the headline on its measured calm side, held in a frame of page ground opening to full bleed by registration on the first scroll, or the headline split across the photo's horizon; a caption strip with the place, one fact in the client's words (or, with clock, the live time) and one link under all three, and preloaders land on its photo box.
 
 Variants (`variant`, the first is the default):
 - `still`: Full bleed with a slow push-in and the headline on the photo's measured calm side.
@@ -136,9 +153,10 @@ Variants (`variant`, the first is the default):
 - `horizon`: The headline split at the photo's horizon, each half in the ink its side measures for, the halves closing on the horizon.
 
 Exports: `HeroStill`. Packages: @gsap/react, gsap.
-Files: `heroes/hero-still.tsx`, `kit/blocks.css`, `kit/gsap.ts`, `kit/images.ts`, `kit/photo-read.ts`, `preloaders/preloader-slices-uncovered.ts`.
+Files: `heroes/hero-still.tsx`, `kit/accent.ts`, `kit/blocks.css`, `kit/gsap.ts`, `kit/images.ts`, `kit/photo-read.ts`, `preloaders/preloader-slices-uncovered.ts`.
 
 ### hero-poster
+film: role opening · home none · motif aperture · energy 3 · pins 1.5 · none
 
 Hero: poster type. The first screen as a poster in three compositions: two fitted lines with a letterbox window between them, a narrow slit cutting through the type in the photo's measured ink, or one word per row with a window of a different crop between each pair; on the first scroll (pin 150%) the type parts while the windows open by registration into the full-bleed photo; phones keep the composition with the entrance only.
 
@@ -148,11 +166,12 @@ Variants (`variant`, the first is the default):
 - `stack`: One word per row with a window of a different crop between each pair; on scroll the rows part and the crops slide into one photograph.
 
 Exports: `HeroPoster`. Packages: @gsap/react, gsap.
-Files: `heroes/hero-poster.tsx`, `heroes/hero-still.tsx`, `kit/blocks.css`, `kit/gsap.ts`, `kit/images.ts`, `kit/photo-read.ts`, `preloaders/preloader-slices-uncovered.ts`.
+Files: `heroes/hero-poster.tsx`, `heroes/hero-still.tsx`, `kit/accent.ts`, `kit/blocks.css`, `kit/gsap.ts`, `kit/images.ts`, `kit/photo-read.ts`, `preloaders/preloader-slices-uncovered.ts`.
 
 ## Backgrounds
 
 ### background-aurora
+film: role opening · home none · motif field · energy 2 · pins 0 · none
 
 Background: Noorderlicht. A full-screen hero on a live field of northern light: slow curtains hang from folding hems with long drifting rays, in the palette's accent over its ground, so it is soft ink on paper in light palettes and real light in dark ones.
 
@@ -162,9 +181,10 @@ Variants (`variant`, the first is the default):
 - `drift`: Curtains across the upper half, drifting slowly sideways and bending away from the pointer.
 
 Exports: `BackgroundAurora`. Packages: @gsap/react, gsap.
-Files: `backgrounds/background-aurora.tsx`, `kit/blocks.css`, `kit/gsap.ts`.
+Files: `backgrounds/background-aurora.tsx`, `kit/accent.ts`, `kit/blocks.css`, `kit/gsap.ts`, `preloaders/preloader-slices-uncovered.ts`.
 
 ### background-silk
+film: role opening · home none · motif field · energy 2 · pins 0 · cursor
 
 Background: Zijde. A sheet of silk in raking light behind the headline: long soft folds, the cloth one step off the page ground, and a sheen in the accent that travels slowly over the crests.
 
@@ -174,9 +194,10 @@ Variants (`variant`, the first is the default):
 - `drape`: The cloth hangs from the top edge in rounded pleats down to a wavy hem; scrolling the hero away draws the hem down and stretches the pleats.
 
 Exports: `BackgroundSilk`. Packages: @gsap/react, gsap.
-Files: `backgrounds/background-silk.tsx`, `kit/blocks.css`, `kit/gsap.ts`.
+Files: `backgrounds/background-silk.tsx`, `kit/accent.ts`, `kit/blocks.css`, `kit/gsap.ts`, `preloaders/preloader-slices-uncovered.ts`.
 
 ### background-facets
+film: role opening · home none · motif field · energy 2 · pins 0 · none
 
 Background: Facetten. A full-screen surface of cut planes on a triangle lattice, every crease a crisp hairline where two planes really fold, each plane catching a slow travelling light in the palette's accent, with the type on the flat ground of the calm side.
 
@@ -186,18 +207,20 @@ Variants (`variant`, the first is the default):
 - `turn`: Diagonal pleats in the upper left cut into planes; the light turns across them as the hero scrolls away and leans toward the pointer.
 
 Exports: `BackgroundFacets`. Packages: @gsap/react, gsap.
-Files: `backgrounds/background-facets.tsx`, `kit/blocks.css`, `kit/gsap.ts`, `preloaders/preloader-slices-uncovered.ts`.
+Files: `backgrounds/background-facets.tsx`, `kit/accent.ts`, `kit/blocks.css`, `kit/gsap.ts`, `preloaders/preloader-slices-uncovered.ts`.
 
 ## Showpieces
 
 ### hero-opener
+film: role opening · home none · motif word · energy 2 · pins 1 · magnetic
 
 Hero opener. A full-bleed photo (or the WebGL scene over it) with the display line at 14 to 20vw across it; on scroll it pins, scales down and darkens while the next section slides over.
 
 Exports: `HeroOpener`. Packages: @gsap/react, @types/three, gsap, three.
-Files: `kit/HeroCanvas.tsx`, `kit/MagneticButton.tsx`, `kit/SplitHeadline.tsx`, `kit/blocks.css`, `kit/gsap.ts`, `kit/images.ts`, `kit/scenes/contours.ts`, `kit/scenes/dots.ts`, `kit/scenes/ripple.ts`, `kit/scenes/types.ts`, `showpieces/hero-opener.tsx`.
+Files: `kit/HeroCanvas.tsx`, `kit/MagneticButton.tsx`, `kit/accent.ts`, `kit/blocks.css`, `kit/gsap.ts`, `kit/images.ts`, `kit/scenes/contours.ts`, `kit/scenes/dots.ts`, `kit/scenes/ripple.ts`, `kit/scenes/types.ts`, `preloaders/preloader-slices-uncovered.ts`, `showpieces/hero-opener.tsx`.
 
 ### image-to-fullbleed
+film: role centerpiece · home none · motif frame · energy 3 · pins 2.2 · none
 
 Image to full bleed. A small image between the two halves of a name unclips to the full screen as the words travel off the edges.
 
@@ -205,6 +228,7 @@ Exports: `ImageToFullbleed`. Packages: @gsap/react, gsap.
 Files: `kit/blocks.css`, `kit/gsap.ts`, `kit/images.ts`, `showpieces/image-to-fullbleed.tsx`.
 
 ### panel-wipe
+film: role centerpiece · home none · motif aperture · energy 3 · pins 1.7 · none
 
 Panel wipe. Two panels carrying one word each slide apart to reveal a photo, and close again.
 
@@ -212,6 +236,7 @@ Exports: `PanelWipe`. Packages: @gsap/react, gsap.
 Files: `kit/blocks.css`, `kit/gsap.ts`, `kit/images.ts`, `showpieces/panel-wipe.tsx`.
 
 ### scrub-connector
+film: role centerpiece · home none · motif line · energy 3 · pins 3 · none
 
 Scrub connector. Two words far apart with a tall slab of ink between them; the slab swings into one thick slash through both words (their letters knocked out where it crosses), then carries the words in on its two ends, turning to the accent as it travels, and seats long and rising between them; the joined pair holds and scrolls away whole.
 
@@ -219,6 +244,7 @@ Exports: `ScrubConnector`. Packages: @gsap/react, gsap.
 Files: `kit/blocks.css`, `kit/gsap.ts`, `showpieces/scrub-connector.tsx`.
 
 ### project-stack
+film: role centerpiece · home none · motif neutral · energy 3 · pins 3.3 · none
 
 Project stack. One project per screen; each slides up full bleed over the last while the one beneath recedes.
 
@@ -226,6 +252,7 @@ Exports: `ProjectStack`. Packages: @gsap/react, gsap.
 Files: `kit/blocks.css`, `kit/gsap.ts`, `kit/images.ts`, `showpieces/project-stack.tsx`.
 
 ### manifesto-scrub
+film: role centerpiece · home none · motif word · energy 3 · pins 2 · none
 
 Manifesto scrub. One large statement that fills word by word, from a faint ink to full ink, as it scrolls through the screen.
 
@@ -233,6 +260,7 @@ Exports: `ManifestoScrub`. Packages: @gsap/react, gsap.
 Files: `kit/blocks.css`, `kit/gsap.ts`, `showpieces/manifesto-scrub.tsx`.
 
 ### fill-rows
+film: role pattern · home none · motif neutral · energy 1 · pins 0 · hover
 
 Fill rows. Large hairline rows; on hover or focus a row floods with the accent from below and its detail slides in.
 
@@ -240,6 +268,7 @@ Exports: `FillRows`. Packages: @gsap/react, gsap.
 Files: `kit/blocks.css`, `kit/gsap.ts`, `showpieces/fill-rows.tsx`.
 
 ### pixel-resolve
+film: role pattern · home none · motif neutral · energy 1 · pins 0 · none
 
 Pixel resolve. A photo that arrives as coarse pixels and resolves to full sharpness.
 
@@ -247,6 +276,7 @@ Exports: `PixelResolve`. Packages: @gsap/react, gsap.
 Files: `kit/blocks.css`, `kit/images.ts`, `showpieces/pixel-resolve.tsx`.
 
 ### wordmark-finale
+film: role frame · home none · motif word · energy 1 · pins 0 · clock · clock by prop timeZone
 
 Wordmark finale. The footer as a finale: the name fitted edge to edge, rising out of a mask, with a closing line and a live local clock.
 
@@ -256,6 +286,7 @@ Files: `kit/blocks.css`, `kit/gsap.ts`, `showpieces/wordmark-finale.tsx`.
 ## Scene transitions
 
 ### zoom-through
+film: role centerpiece · home none · motif aperture · energy 3 · pins 3 · none
 
 Zoom-through. A pinned composed frame (the display line and a lead on the ground, the photo in an upright window with its caption and corner marks) holds; then the camera pushes into the window: the type, nearer the lens, scales away past the edges, the window opens until all four edges leave the screen together, and the photo, deeper than the window, settles out of its push-in to full bleed with its subject held in place; a strip of the ground rises from the bottom edge with the line and caption, and the next section's heading, at the display size of the frame it left, rises out of masks in the photo where its pixels allow a light or dark ink at 4.5:1 (the calm side first, then the window's side), or on bands of ground stepped up from the strip where they do not (or cannot be read), holds, and the pin lets go with the photo drifting slower than the page.
 
@@ -265,6 +296,8 @@ Files: `kit/blocks.css`, `kit/gsap.ts`, `kit/images.ts`, `kit/photo-read.ts`, `t
 ## Sections
 
 ### about-studio
+film: role pattern · home none · motif frame · energy 2 · pins 0 · none
+film variants: doorkijk energy 3 pins 1.3
 
 About the studio. Who the studio is (a statement, a paragraph, honest facts and the place given real space), as a plate that opens out of the margins, a walk past two columns of photographs beside sticky type, or a slit of photograph that opens and pushes the statement's halves apart.
 
@@ -277,6 +310,8 @@ Exports: `AboutStudio`. Packages: @gsap/react, gsap.
 Files: `kit/blocks.css`, `kit/gsap.ts`, `kit/images.ts`, `sections/about-studio.tsx`.
 
 ### approach
+film: role pattern · home none · motif line · energy 2 · pins 0 · none
+film variants: zin energy 3 pins 2.4; schuif energy 1
 
 Approach. How the studio works from first conversation to handover, told without numbers: a line that draws down the page with the stages hanging off it, one pinned sentence whose clauses come to ink in turn, or an index you scrub by drag, click or arrow keys while the photographs wipe across in register.
 
@@ -289,6 +324,8 @@ Exports: `Approach`. Packages: @gsap/react, gsap.
 Files: `kit/blocks.css`, `kit/gsap.ts`, `kit/images.ts`, `sections/approach.tsx`.
 
 ### manifesto
+film: role pattern · home none · motif line · energy 3 · pins 2 · none
+film variants: quote energy 2 pins 0; split pins 1.5
 
 Manifesto. The studio's statement as the page's moment of conviction: written in line by line behind a caret, set as a pull quote over a drifting photograph on its measured calm side, or split across a short pin where the second half arrives sentence by sentence until the whole statement stands.
 
@@ -301,6 +338,7 @@ Exports: `Manifesto`. Packages: @gsap/react, gsap.
 Files: `kit/blocks.css`, `kit/gsap.ts`, `kit/images.ts`, `kit/photo-read.ts`, `sections/manifesto.tsx`.
 
 ### contact-form
+film: role pattern · home none · motif line · energy 1 · pins 0 · none
 
 Contact form. The one place the site asks for input: name, e-mail, a short subject and an optional choice, as fields that are only a drawing rule with lifting labels, as a sentence the reader completes inline at display size, or one question at a time, with every state designed from invalid to a travelling-arrow send, a thank-you in the form's own place and a kept-text retry.
 
@@ -313,6 +351,8 @@ Exports: `ContactForm`. Packages: none.
 Files: `kit/blocks.css`, `sections/contact-form.tsx`.
 
 ### cta-closing
+film: role pattern · home none · motif aperture · energy 2 · pins 0 · none
+film variants: pointer energy 1
 
 Closing call to action. The page's last screen before the footer, one light display line and one large text link with an arrow and a drawing line, arriving on a short scroll-scrubbed stretch that runs backwards on the way back: a photograph opening by registration behind the line on its measured calm side, the line as a slow scroll-nudged band behind a still link, or a still line whose link brings a project frame that follows the pointer.
 
@@ -325,6 +365,7 @@ Exports: `CtaClosing`. Packages: @gsap/react, gsap.
 Files: `kit/blocks.css`, `kit/gsap.ts`, `kit/images.ts`, `kit/photo-read.ts`, `sections/cta-closing.tsx`.
 
 ### reveals
+film: role pattern · home none · motif neutral · energy 1 · pins 0 · none
 
 Reveals. A plain editorial section (statement, paragraph, one photo, one text link) that enters on a short scroll-scrubbed stretch in one of three ways: lines rising through masks with the photo opening from its bottom edge, the photo opening from a thin slit with the type rising beside it, or the whole section laid over the previous one like a card, which dims and falls behind; scrolling back runs every entrance backwards.
 
@@ -337,6 +378,7 @@ Exports: `Reveals`. Packages: @gsap/react, gsap.
 Files: `kit/blocks.css`, `kit/gsap.ts`, `kit/images.ts`, `sections/reveals.tsx`.
 
 ### image-trail
+film: role pattern · home none · motif neutral · energy 1 · pins 0 · cursor, hover
 
 Image trail. A list of work at display size; moving the pointer over a row deals that project's photograph at the pointer each time it has travelled a set distance, turned a little with the hand and settling as it lands, while older prints hold, shrink and fade behind it, six at most; a fast hand leaves a longer, wider trail and a still one leaves nothing new; keyboard focus and reduced motion show one print beside the row, and touch and phones show each photograph inline.
 
@@ -344,6 +386,7 @@ Exports: `ImageTrail`. Packages: @gsap/react, gsap.
 Files: `kit/blocks.css`, `kit/gsap.ts`, `kit/images.ts`, `sections/image-trail.tsx`.
 
 ### panel-accordion
+film: role pattern · home none · motif aperture · energy 1 · pins 0 · hover
 
 Panel accordion. A full-height row of five tall photo panels like gallery shutters: hover or focus opens one wide while the others narrow, the photograph already full size behind a widening window, its name rising in through a mask; on scroll into view the panels rise from their bottom edge one after another and the first opens on its own; phones stack them as rows that open on tap.
 
@@ -351,6 +394,7 @@ Exports: `PanelAccordion`. Packages: @gsap/react, gsap.
 Files: `kit/blocks.css`, `kit/gsap.ts`, `kit/images.ts`, `sections/panel-accordion.tsx`.
 
 ### grid-assembly
+film: role centerpiece · home none · motif frame · energy 3 · pins 2.5 · none
 
 Grid assembly. A pinned section (250%) opens on nine photos lying at angles in a composed pile, a few past the screen edges, that travel one after another into an editorial grid with exact gaps as the section's line rises in its type cell; the grid holds, then the hero print, a window onto its photo at full size, opens to the full screen while the others are pushed out, the photo never changing scale, and the next line rises on the photo's calmer side, holds, and the photo drifts slower than the page as the pin lets go. Phones open the grid tile by tile; reduced motion and pages without scripts show the grid, then the full-bleed photo with its line.
 
@@ -358,6 +402,7 @@ Exports: `GridAssembly`. Packages: @gsap/react, gsap.
 Files: `kit/blocks.css`, `kit/gsap.ts`, `kit/images.ts`, `kit/photo-read.ts`, `sections/grid-assembly.tsx`.
 
 ### velocity-type
+film: role pattern · home none · motif word · energy 2 · pins 0 · marquee
 
 Velocity type. Two lines of display type at 15vw run sideways in opposite directions as you scroll, run ahead with its speed, lean back and stretch slightly as if dragged, and settle upright within about 0.4 seconds of stopping, with small photographs sitting between the phrases as their own frames; the belt loops without a seam, and reduced motion and pages without scripts leave the lines at rest.
 
@@ -365,6 +410,7 @@ Exports: `VelocityType`. Packages: @gsap/react, gsap.
 Files: `kit/blocks.css`, `kit/gsap.ts`, `kit/images.ts`, `sections/velocity-type.tsx`.
 
 ### sticky-chapters
+film: role pattern · home none · motif neutral · energy 2 · pins 0 · none
 
 Sticky chapters. A process or story in chapters: one large photograph holds still on the left (plain position sticky) while the chapters scroll past on the right; as each reaches the middle its photograph rises over the last from the bottom edge (from the top when scrolling back) out of a push-in, that chapter comes forward while the others step back, and a hairline beside the frame fills as you read; phones and pages without scripts show each photograph inline, reduced motion keeps the frame with hard cuts.
 
@@ -372,6 +418,7 @@ Exports: `StickyChapters`. Packages: @gsap/react, gsap.
 Files: `kit/blocks.css`, `kit/gsap.ts`, `kit/images.ts`, `sections/sticky-chapters.tsx`.
 
 ### film-strip
+film: role centerpiece · home none · motif frame · energy 3 · pins 3 · none
 
 Film strip. A pinned reel between two rows of sprocket holes opens on the section's display line beside the first project in the gate; the scroll advances it one frame at a time, portrait frames high and landscape low, each seating at the gate as its photo settles out of a push-in while the title swaps through its mask and a hairline progress line fills; the last stop is the closing frame with the call to action, and on release the strip runs on to the left. Phones swipe a snap row between sprocket rows with titles under the frames; reduced motion and pages without scripts get the same still row.
 
@@ -379,6 +426,7 @@ Exports: `FilmStrip`. Packages: @gsap/react, gsap.
 Files: `kit/blocks.css`, `kit/gsap.ts`, `kit/images.ts`, `sections/film-strip.tsx`.
 
 ### hover-list
+film: role pattern · home none · motif neutral · energy 1 · pins 0 · cursor, hover
 
 Hover reveal list. A list of work at display size, each name with a quiet line of place and year; hovering a row shows its photograph in an upright frame that follows the pointer closely and leans with its speed while the other rows step back, row to row the photograph wipes in the way the pointer travels, and leaving the list folds the frame shut; keyboard focus and reduced motion stand the frame beside the row, and touch and phones show each photograph inline.
 
@@ -386,6 +434,7 @@ Exports: `HoverList`. Packages: @gsap/react, gsap.
 Files: `kit/blocks.css`, `kit/gsap.ts`, `kit/images.ts`, `sections/hover-list.tsx`.
 
 ### split-pair
+film: role centerpiece · home none · motif cut · energy 3 · pins 3 · none
 
 Split pair. A pinned pair of tall photos that meet at a hard seam: the word stands whole in ink on the ground with the seam through it; the first photo rises in on the left, turning its half of the letters to the photo's own ink, and holds half and half; the second comes down on the right against it and the pair holds whole, the two photos running against each other at different speeds the whole time, and on release the halves leave at their own speeds so the word shears along the seam.
 
@@ -393,6 +442,7 @@ Exports: `SplitPair`. Packages: @gsap/react, gsap.
 Files: `kit/blocks.css`, `kit/gsap.ts`, `kit/images.ts`, `kit/photo-read.ts`, `sections/split-pair.tsx`.
 
 ### fanned-cards
+film: role centerpiece · home none · motif neutral · energy 3 · pins 3 · hover
 
 Fanned cards. Services or cases as a hand of photographs played onto the table: a poster heading set on the diagonal, the hand rising into the frame and fanning open large in 3D between its two lines; it holds, then the hand is played from the back, each card flying along an arc toward the lens and turning as it goes, and laid down at its own scale into a spread (the lead card large in front, each card behind it smaller and partly under the one before, all crossing the first line), each title rising from its mask as its card lands; the spread holds, and on release the cards are picked up off the table at their own speeds. Phones get the hand as a still fan; reduced motion gets the spread. Cards lift slightly on hover.
 
@@ -402,6 +452,7 @@ Files: `kit/blocks.css`, `kit/gsap.ts`, `kit/images.ts`, `sections/fanned-cards.
 ## Footers
 
 ### footer-reveal
+film: role frame · home none · motif neutral · energy 2 · pins 0 · none
 
 Footer: revealed from under the page. The page's last section lifts away like a sheet and uncovers the footer already waiting beneath it (the name large at a light weight, a closing line, the contact address, a few plain links), scrubbed to the scroll and laid down again on the way back.
 
@@ -414,12 +465,13 @@ Exports: `FooterReveal`. Packages: @gsap/react, gsap, lenis.
 Files: `footers/footer-reveal.tsx`, `kit/SmoothScroll.tsx`, `kit/blocks.css`, `kit/gsap.ts`.
 
 ### footer-contact
+film: role frame · home none · motif word · energy 1 · pins 0 · clock, hover · clock by prop clock
 
-Footer: contact. The page ends on the way to reach the studio: the mail address as a real link at display size (or a live clock, or a quiet three-column grid), the city's local time with an honest open marker computed from it, a phone line, the address and a few plain links, entering scrubbed to the scroll.
+Footer: contact. The page ends on the way to reach the studio: the mail address as a real link at display size (or the city at display size, or a quiet three-column grid), the city and its opening hours, a phone line, the address and a few plain links, entering scrubbed to the scroll; with clock the city keeps its live local time with an honest open marker computed from it.
 
 Variants (`variant`, the first is the default):
 - `address`: The mail address heads the footer as a fitted headline whose characters roll up into their slots from blank as you scroll in, then roll again from the pointer's side on hover; the details close it under a ruled line.
-- `clock`: A live Rotterdam clock at display size is the centre, its colon breathing once a second; mail, phone, address and hours stand around it like a timetable.
+- `clock`: The city at display size is the centre (with clock, a live clock whose colon breathes once a second); mail, phone, address and hours stand around it like a timetable.
 - `columns`: A closing line at display size, then three columns (Contact, Studio, Volg ons) with links whose underline draws from the pointer's side.
 
 Exports: `FooterContact`. Packages: @gsap/react, gsap.

package/skills/struq/blocks/backgrounds/background-aurora.tsx

@@ -7,7 +7,11 @@
 // shade of the accent at its thin edges. The headline (light display weight), one lead sentence and one text link
 // stand on the calm side, clear of the curtains.
 //
-// <BackgroundAurora variant="veil" lines={["Ruimte voor", "het licht."]} lead="..." link={{ href: "/werk", label: "Bekijk het werk" }} />
+// <BackgroundAurora variant="veil" lines={["Ruimte voor", "het licht."]} accent="licht" lead="..." link={{ href: "/werk", label: "Bekijk het werk" }} />
+//
+// `accent` (optional) is the site's one accent word: where it first stands in the headline it is set in the pairing's
+// italic accent face, inside its line's mask, and the contrast ceiling is measured once that face is in. The Statement
+// and the Close carry the same word. Left out, or not in the headline, the hero is exactly as it was.
 //
 // Three variants, three compositions of the same field:
 //   veil     one tall curtain standing in the right third, two pleats crossing as it sways; the type on the calm left.
@@ -27,13 +31,16 @@
 // the same colour math the shader uses. The compositions keep the curtains clear of the type, so the ceiling only
 // catches a stray ray, and it meets the field softly: faint light runs on behind the text, no veil and no cutout.
 //
-// Entrance: the canvas stays hidden until its first frame is drawn, then fades in while the light dawns; the type
-// rises through masks once its face is in (capped). Reduced motion: one rendered still frame, held, type in place. No
+// Entrance: the canvas stays hidden until its first frame is drawn, then fades in; the light dawns and the type rises
+// through masks once its face is in (capped) and nothing covers the page (whenUncovered: a preloader or page
+// transition has started to leave, or there is none). Reduced motion: one rendered still frame, held, type in place. No
 // WebGL: the same field drawn once, small, on a 2D canvas. No scripts: the composed hero on the plain ground; with
 // scripts the type waits below its masks and is released by the CSS after 3 seconds if the script never runs
 // (blocks.css, "--- background-aurora ---").
 import { useEffect, useRef } from "react";
+import { accentFaceReady, accentLines } from "../kit/accent";
 import { ScrollTrigger, gsap, useGSAP } from "../kit/gsap";
+import { whenUncovered } from "../preloaders/preloader-slices-uncovered";
 
 export type AuroraVariant = "veil" | "horizon" | "drift";
 
@@ -48,6 +55,9 @@ type Props = {
   variant?: AuroraVariant;
   /** The headline, one entry per line. Two short lines read best. */
   lines: string[];
+  /** The site's one accent word: where it first stands in the headline it is set in the pairing's italic accent face
+   * (--face-accent), as the Statement and the Close set it. A word the headline does not hold changes nothing. */
+  accent?: string;
   /** One lead sentence. */
   lead: string;
   /** One text link. */
@@ -419,7 +429,7 @@ function build(gl: WebGL2RenderingContext): Gl | null {
 
 // ---------------------------------------------------------------------------------------------------------------
 
-export function BackgroundAurora({ variant = "veil", lines, lead, link, className = "" }: Props) {
+export function BackgroundAurora({ variant = "veil", lines, accent, lead, link, className = "" }: Props) {
   const root = useRef<HTMLElement>(null);
   const canvasRef = useRef<HTMLCanvasElement>(null);
 
@@ -442,6 +452,7 @@ export function BackgroundAurora({ variant = "veil", lines, lead, link, classNam
     let last = 0;
     let clock = 0;
     let introClock = 0;
+    let dawning = false;
     const leave = { now: 0, target: 0 };
     const ptr = { x: 0.5, y: 0.5, z: 0, tx: 0.5, ty: 0.5, tz: 0 };
 
@@ -570,7 +581,8 @@ export function BackgroundAurora({ variant = "veil", lines, lead, link, classNam
       const dt = last ? Math.min(0.1, (now - last) / 1000) : 0;
       last = now;
       clock += dt;
-      introClock += dt;
+      // The dawn holds at its start while a cover is over the page.
+      if (dawning) introClock += dt;
       // The pointer eases in over about 0.18 s; the scroll settles like a camera, about 0.4 s.
       const kp = 1 - Math.exp(-dt / 0.06);
       ptr.x += (ptr.tx - ptr.x) * kp;
@@ -615,7 +627,8 @@ export function BackgroundAurora({ variant = "veil", lines, lead, link, classNam
     let fontsId = 0;
     const refit = () => {
       const id = ++fontsId;
-      document.fonts?.ready.then(() => {
+      // The accent face too, when a word is marked: the text boxes are measured as they will stand.
+      document.fonts?.ready.then(() => accentFaceReady(el)).then(() => {
         if (gone || id !== fontsId) return;
         measure();
         if (gl && prog) draw();
@@ -698,9 +711,13 @@ export function BackgroundAurora({ variant = "veil", lines, lead, link, classNam
     }
 
     wake();
+    const stopDawn = whenUncovered(() => {
+      dawning = true;
+    });
 
     return () => {
       gone = true;
+      stopDawn();
       if (raf) cancelAnimationFrame(raf);
       sized.disconnect();
       themed.disconnect();
@@ -752,17 +769,22 @@ export function BackgroundAurora({ variant = "veil", lines, lead, link, classNam
         if (gone) return;
         gsap.to(rise, { yPercent: 0, duration: 1.2, ease: "expo.out", stagger: 0.09, delay: 0.15 });
       });
+      // Once the face is in, and once nothing covers the page (a preloader or page transition starting to leave).
+      let stop = () => {};
       const fonts = document.fonts?.ready ?? Promise.resolve();
-      Promise.race([fonts, new Promise((r) => setTimeout(r, 1200))]).then(play);
+      Promise.race([fonts, new Promise((r) => setTimeout(r, 1200))]).then(() => {
+        if (!gone) stop = whenUncovered(play);
+      });
       return () => {
         gone = true;
+        stop();
       };
     },
     { scope: root, dependencies: [variant] },
   );
 
   const mask = (child: React.ReactNode, key?: number) => (
-    <span key={key} className="struq-line-mask block overflow-hidden">
+    <span key={key} className="struq-line-mask block">
       <span data-rise="" className="block">
         {child}
       </span>
@@ -786,24 +808,24 @@ export function BackgroundAurora({ variant = "veil", lines, lead, link, classNam
       className={`relative isolate flex h-svh min-h-[34rem] overflow-hidden bg-surface-0 text-ink ${className}`}
     >
       <canvas ref={canvasRef} data-field="" aria-hidden="true" className="absolute inset-0 block h-full w-full" />
-      <div className={`relative z-10 flex w-full px-6 md:px-[4vw] ${place}`}>
+      <div className={`relative z-10 flex w-full px-sheet-margin ${place}`}>
         <div className={variant === "veil" ? "md:max-w-[52%]" : "max-w-[min(100%,52rem)]"}>
           <h1
             data-quiet="display"
             className="w-fit font-display text-[clamp(2.9rem,12.5vw,4.5rem)] leading-[0.95] tracking-[-0.03em] md:text-[clamp(3.5rem,7vw,8rem)]"
           >
-            {lines.map((line, i) => mask(line, i))}
+            {accentLines(lines, accent).map((line, i) => mask(line, i))}
           </h1>
           {/* The spacing sits on plain wrappers: the line mask's own negative margins would cancel it. */}
           <div className="mt-7 md:mt-10">
-            <div data-quiet="small" className="struq-line-mask max-w-[34ch] overflow-hidden text-ink-muted">
+            <div data-quiet="small" className="struq-line-mask max-w-[34ch] text-ink-muted">
               <p data-rise="" className="text-lead m-0">
                 {lead}
               </p>
             </div>
           </div>
           <div className="mt-5 md:mt-6">
-            <div data-quiet="small" className="struq-line-mask w-fit overflow-hidden">
+            <div data-quiet="small" className="struq-line-mask w-fit">
               <span data-rise="" className="block">
                 <a href={link.href} className="text-body underline decoration-1 underline-offset-[0.3em]">
                   {link.label}