@struq/skill 0.5.1 → 0.5.3

package/skills/struq/blocks/CATALOG.md

@@ -1,6 +1,6 @@
 # Block catalogue
 
-Generated by scripts/release-blocks.mjs from Struq origin/main at a538491. Do not edit: run the release script again.
+Generated by scripts/release-blocks.mjs from Struq origin/main at f98bd198. 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`.
 
@@ -17,15 +17,15 @@ Variants (`variant`, the first is the default):
 - `settle`: The cover lifts while the name shrinks and travels into the header's wordmark, which takes over in the same frame.
 
 Exports: `PreloaderWordmark`. Packages: @gsap/react, gsap.
-Files: `kit/blocks.css`, `kit/gsap.ts`, `preloaders/preloader-slices-uncovered.ts`, `preloaders/preloader-wordmark.tsx`.
+Files: `kit/blocks.css`, `kit/feel.ts`, `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.
+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. Before an opening with no photo (opening="photoless", or no hero) it flips palette panels with the name's first letter instead and lands on the opening's own ground.
 
 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`.
+Files: `kit/blocks.css`, `kit/feel.ts`, `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
@@ -33,7 +33,7 @@ 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.
 
 Exports: `PreloaderSlices`. Packages: @gsap/react, gsap.
-Files: `kit/blocks.css`, `kit/gsap.ts`, `preloaders/preloader-slices-uncovered.ts`, `preloaders/preloader-slices.tsx`.
+Files: `kit/blocks.css`, `kit/feel.ts`, `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
@@ -41,7 +41,7 @@ film: role frame · home curtain · motif aperture · energy 2 · pins 0 · coun
 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`, `preloaders/preloader-slices-uncovered.ts`.
+Files: `kit/blocks.css`, `kit/feel.ts`, `kit/gsap.ts`, `preloaders/preloader-gate.tsx`, `preloaders/preloader-slices-uncovered.ts`.
 
 ## Page transitions
 
@@ -51,7 +51,7 @@ 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).
 
 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`.
+Files: `kit/SmoothScroll.tsx`, `kit/blocks.css`, `kit/feel.ts`, `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
@@ -59,7 +59,7 @@ 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).
 
 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`.
+Files: `kit/SmoothScroll.tsx`, `kit/blocks.css`, `kit/feel.ts`, `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
@@ -67,7 +67,7 @@ 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 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`, `preloaders/preloader-slices-uncovered.ts`.
+Files: `kit/SmoothScroll.tsx`, `kit/blocks.css`, `kit/feel.ts`, `kit/gsap.ts`, `page-transitions/page-transition-gate.tsx`, `preloaders/preloader-slices-uncovered.ts`.
 
 ## Headers
 
@@ -83,7 +83,7 @@ Variants (`variant`, the first is the default):
 - `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`.
+Files: `headers/header-bar.tsx`, `kit/blocks.css`, `kit/feel.ts`, `kit/gsap.ts`, `kit/photo-read.ts`.
 
 ### menu-curtain
 film: role frame · home curtain · motif aperture · energy 1 · pins 0 · clock, hover · clock by prop clock
@@ -96,7 +96,7 @@ Variants (`variant`, the first is the default):
 - `stack`: Three panels grow one after another from the button; a small portrait frame flips through a few prints, then cuts to the hovered link's photo.
 
 Exports: `MenuCurtain`. Packages: @gsap/react, gsap, lenis.
-Files: `headers/menu-curtain.tsx`, `kit/SmoothScroll.tsx`, `kit/blocks.css`, `kit/gsap.ts`, `kit/images.ts`.
+Files: `headers/menu-curtain.tsx`, `kit/SmoothScroll.tsx`, `kit/blocks.css`, `kit/feel.ts`, `kit/gsap.ts`, `kit/images.ts`.
 
 ## Heroes
 
@@ -111,7 +111,7 @@ 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/accent.ts`, `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/feel.ts`, `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
@@ -125,7 +125,7 @@ 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/accent.ts`, `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/feel.ts`, `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
@@ -139,7 +139,7 @@ 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/accent.ts`, `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/feel.ts`, `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
@@ -153,7 +153,7 @@ 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/accent.ts`, `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/feel.ts`, `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
@@ -166,7 +166,7 @@ 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/accent.ts`, `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/feel.ts`, `kit/gsap.ts`, `kit/images.ts`, `kit/photo-read.ts`, `preloaders/preloader-slices-uncovered.ts`.
 
 ## Backgrounds
 
@@ -181,7 +181,7 @@ 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/accent.ts`, `kit/blocks.css`, `kit/gsap.ts`, `preloaders/preloader-slices-uncovered.ts`.
+Files: `backgrounds/background-aurora.tsx`, `kit/accent.ts`, `kit/blocks.css`, `kit/feel.ts`, `kit/gsap.ts`, `preloaders/preloader-slices-uncovered.ts`.
 
 ### background-silk
 film: role opening · home none · motif field · energy 2 · pins 0 · cursor
@@ -194,7 +194,7 @@ 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/accent.ts`, `kit/blocks.css`, `kit/gsap.ts`, `preloaders/preloader-slices-uncovered.ts`.
+Files: `backgrounds/background-silk.tsx`, `kit/accent.ts`, `kit/blocks.css`, `kit/feel.ts`, `kit/gsap.ts`, `preloaders/preloader-slices-uncovered.ts`.
 
 ### background-facets
 film: role opening · home none · motif field · energy 2 · pins 0 · none
@@ -207,17 +207,17 @@ 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/accent.ts`, `kit/blocks.css`, `kit/gsap.ts`, `preloaders/preloader-slices-uncovered.ts`.
+Files: `backgrounds/background-facets.tsx`, `kit/accent.ts`, `kit/blocks.css`, `kit/feel.ts`, `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.
+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. Without a photo it is type on the inverse ground over the builder's own motif (`backdrop`, an SVG or small canvas from the site's world) or a stock field (`scene`: "dots", "contours" or "none"); the dots default is a fallback, not a choice.
 
 Exports: `HeroOpener`. Packages: @gsap/react, @types/three, gsap, three.
-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`.
+Files: `kit/HeroCanvas.tsx`, `kit/MagneticButton.tsx`, `kit/accent.ts`, `kit/blocks.css`, `kit/feel.ts`, `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
@@ -225,7 +225,7 @@ film: role centerpiece · home none · motif frame · energy 3 · pins 2.2 · no
 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.
 
 Exports: `ImageToFullbleed`. Packages: @gsap/react, gsap.
-Files: `kit/blocks.css`, `kit/gsap.ts`, `kit/images.ts`, `showpieces/image-to-fullbleed.tsx`.
+Files: `kit/blocks.css`, `kit/feel.ts`, `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
@@ -233,7 +233,7 @@ film: role centerpiece · home none · motif aperture · energy 3 · pins 1.7 ·
 Panel wipe. Two panels carrying one word each slide apart to reveal a photo, and close again.
 
 Exports: `PanelWipe`. Packages: @gsap/react, gsap.
-Files: `kit/blocks.css`, `kit/gsap.ts`, `kit/images.ts`, `showpieces/panel-wipe.tsx`.
+Files: `kit/blocks.css`, `kit/feel.ts`, `kit/gsap.ts`, `kit/images.ts`, `showpieces/panel-wipe.tsx`.
 
 ### scrub-connector
 film: role centerpiece · home none · motif line · energy 3 · pins 3 · none
@@ -241,7 +241,7 @@ 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.
 
 Exports: `ScrubConnector`. Packages: @gsap/react, gsap.
-Files: `kit/blocks.css`, `kit/gsap.ts`, `showpieces/scrub-connector.tsx`.
+Files: `kit/blocks.css`, `kit/feel.ts`, `kit/gsap.ts`, `showpieces/scrub-connector.tsx`.
 
 ### project-stack
 film: role centerpiece · home none · motif neutral · energy 3 · pins 3.3 · none
@@ -249,7 +249,7 @@ film: role centerpiece · home none · motif neutral · energy 3 · pins 3.3 ·
 Project stack. One project per screen; each slides up full bleed over the last while the one beneath recedes.
 
 Exports: `ProjectStack`. Packages: @gsap/react, gsap.
-Files: `kit/blocks.css`, `kit/gsap.ts`, `kit/images.ts`, `showpieces/project-stack.tsx`.
+Files: `kit/blocks.css`, `kit/feel.ts`, `kit/gsap.ts`, `kit/images.ts`, `showpieces/project-stack.tsx`.
 
 ### manifesto-scrub
 film: role centerpiece · home none · motif word · energy 3 · pins 2 · none
@@ -257,7 +257,7 @@ 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.
 
 Exports: `ManifestoScrub`. Packages: @gsap/react, gsap.
-Files: `kit/blocks.css`, `kit/gsap.ts`, `showpieces/manifesto-scrub.tsx`.
+Files: `kit/blocks.css`, `kit/feel.ts`, `kit/gsap.ts`, `showpieces/manifesto-scrub.tsx`.
 
 ### fill-rows
 film: role pattern · home none · motif neutral · energy 1 · pins 0 · hover
@@ -265,7 +265,7 @@ 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.
 
 Exports: `FillRows`. Packages: @gsap/react, gsap.
-Files: `kit/blocks.css`, `kit/gsap.ts`, `showpieces/fill-rows.tsx`.
+Files: `kit/blocks.css`, `kit/feel.ts`, `kit/gsap.ts`, `showpieces/fill-rows.tsx`.
 
 ### pixel-resolve
 film: role pattern · home none · motif neutral · energy 1 · pins 0 · none
@@ -281,7 +281,7 @@ film: role frame · home none · motif word · energy 1 · pins 0 · clock · cl
 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.
 
 Exports: `WordmarkFinale`. Packages: @gsap/react, gsap.
-Files: `kit/blocks.css`, `kit/gsap.ts`, `showpieces/wordmark-finale.tsx`.
+Files: `kit/blocks.css`, `kit/feel.ts`, `kit/gsap.ts`, `showpieces/wordmark-finale.tsx`.
 
 ## Scene transitions
 
@@ -291,7 +291,7 @@ film: role centerpiece · home none · motif aperture · energy 3 · pins 3 · n
 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.
 
 Exports: `ZoomThrough`. Packages: @gsap/react, gsap.
-Files: `kit/blocks.css`, `kit/gsap.ts`, `kit/images.ts`, `kit/photo-read.ts`, `transitions/zoom-through.tsx`.
+Files: `kit/blocks.css`, `kit/feel.ts`, `kit/gsap.ts`, `kit/images.ts`, `kit/photo-read.ts`, `transitions/zoom-through.tsx`.
 
 ## Sections
 
@@ -307,7 +307,7 @@ Variants (`variant`, the first is the default):
 - `doorkijk`: On a short pin a slit of photograph between the statement's two halves opens into a window and pushes them apart.
 
 Exports: `AboutStudio`. Packages: @gsap/react, gsap.
-Files: `kit/blocks.css`, `kit/gsap.ts`, `kit/images.ts`, `sections/about-studio.tsx`.
+Files: `kit/blocks.css`, `kit/feel.ts`, `kit/gsap.ts`, `kit/images.ts`, `sections/about-studio.tsx`.
 
 ### approach
 film: role pattern · home none · motif line · energy 2 · pins 0 · none
@@ -321,7 +321,7 @@ Variants (`variant`, the first is the default):
 - `schuif`: An index you scrub by dragging the rule, clicking a stage or using the arrow keys, the photographs wiping across in register while the copy swaps beside them.
 
 Exports: `Approach`. Packages: @gsap/react, gsap.
-Files: `kit/blocks.css`, `kit/gsap.ts`, `kit/images.ts`, `sections/approach.tsx`.
+Files: `kit/blocks.css`, `kit/feel.ts`, `kit/gsap.ts`, `kit/images.ts`, `sections/approach.tsx`.
 
 ### manifesto
 film: role pattern · home none · motif line · energy 3 · pins 2 · none
@@ -335,7 +335,7 @@ Variants (`variant`, the first is the default):
 - `split`: A short pin: the first half stands large on the left while the second half arrives on the right one sentence at a time, each rising under the one before, ending on the whole statement in two columns.
 
 Exports: `Manifesto`. Packages: @gsap/react, gsap.
-Files: `kit/blocks.css`, `kit/gsap.ts`, `kit/images.ts`, `kit/photo-read.ts`, `sections/manifesto.tsx`.
+Files: `kit/blocks.css`, `kit/feel.ts`, `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
@@ -362,7 +362,7 @@ Variants (`variant`, the first is the default):
 - `pointer`: Plain ground, the line large and still; hovering the link brings a small project frame that follows the pointer while the link's line draws.
 
 Exports: `CtaClosing`. Packages: @gsap/react, gsap.
-Files: `kit/blocks.css`, `kit/gsap.ts`, `kit/images.ts`, `kit/photo-read.ts`, `sections/cta-closing.tsx`.
+Files: `kit/blocks.css`, `kit/feel.ts`, `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
@@ -375,7 +375,7 @@ Variants (`variant`, the first is the default):
 - `card`: The whole section slides up over the previous one with a hairline shadow on its top edge; the covered section dims and falls behind as the content settles.
 
 Exports: `Reveals`. Packages: @gsap/react, gsap.
-Files: `kit/blocks.css`, `kit/gsap.ts`, `kit/images.ts`, `sections/reveals.tsx`.
+Files: `kit/blocks.css`, `kit/feel.ts`, `kit/gsap.ts`, `kit/images.ts`, `sections/reveals.tsx`.
 
 ### image-trail
 film: role pattern · home none · motif neutral · energy 1 · pins 0 · cursor, hover
@@ -383,7 +383,7 @@ film: role pattern · home none · motif neutral · energy 1 · pins 0 · cursor
 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.
 
 Exports: `ImageTrail`. Packages: @gsap/react, gsap.
-Files: `kit/blocks.css`, `kit/gsap.ts`, `kit/images.ts`, `sections/image-trail.tsx`.
+Files: `kit/blocks.css`, `kit/feel.ts`, `kit/gsap.ts`, `kit/images.ts`, `sections/image-trail.tsx`.
 
 ### panel-accordion
 film: role pattern · home none · motif aperture · energy 1 · pins 0 · hover
@@ -391,7 +391,7 @@ 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.
 
 Exports: `PanelAccordion`. Packages: @gsap/react, gsap.
-Files: `kit/blocks.css`, `kit/gsap.ts`, `kit/images.ts`, `sections/panel-accordion.tsx`.
+Files: `kit/blocks.css`, `kit/feel.ts`, `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
@@ -399,7 +399,7 @@ film: role centerpiece · home none · motif frame · energy 3 · pins 2.5 · no
 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.
 
 Exports: `GridAssembly`. Packages: @gsap/react, gsap.
-Files: `kit/blocks.css`, `kit/gsap.ts`, `kit/images.ts`, `kit/photo-read.ts`, `sections/grid-assembly.tsx`.
+Files: `kit/blocks.css`, `kit/feel.ts`, `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
@@ -407,7 +407,7 @@ 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.
 
 Exports: `VelocityType`. Packages: @gsap/react, gsap.
-Files: `kit/blocks.css`, `kit/gsap.ts`, `kit/images.ts`, `sections/velocity-type.tsx`.
+Files: `kit/blocks.css`, `kit/feel.ts`, `kit/gsap.ts`, `kit/images.ts`, `sections/velocity-type.tsx`.
 
 ### sticky-chapters
 film: role pattern · home none · motif neutral · energy 2 · pins 0 · none
@@ -415,7 +415,7 @@ 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.
 
 Exports: `StickyChapters`. Packages: @gsap/react, gsap.
-Files: `kit/blocks.css`, `kit/gsap.ts`, `kit/images.ts`, `sections/sticky-chapters.tsx`.
+Files: `kit/blocks.css`, `kit/feel.ts`, `kit/gsap.ts`, `kit/images.ts`, `sections/sticky-chapters.tsx`.
 
 ### film-strip
 film: role centerpiece · home none · motif frame · energy 3 · pins 3 · none
@@ -423,7 +423,7 @@ 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.
 
 Exports: `FilmStrip`. Packages: @gsap/react, gsap.
-Files: `kit/blocks.css`, `kit/gsap.ts`, `kit/images.ts`, `sections/film-strip.tsx`.
+Files: `kit/blocks.css`, `kit/feel.ts`, `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
@@ -431,7 +431,7 @@ film: role pattern · home none · motif neutral · energy 1 · pins 0 · cursor
 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.
 
 Exports: `HoverList`. Packages: @gsap/react, gsap.
-Files: `kit/blocks.css`, `kit/gsap.ts`, `kit/images.ts`, `sections/hover-list.tsx`.
+Files: `kit/blocks.css`, `kit/feel.ts`, `kit/gsap.ts`, `kit/images.ts`, `sections/hover-list.tsx`.
 
 ### split-pair
 film: role centerpiece · home none · motif cut · energy 3 · pins 3 · none
@@ -439,7 +439,7 @@ 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.
 
 Exports: `SplitPair`. Packages: @gsap/react, gsap.
-Files: `kit/blocks.css`, `kit/gsap.ts`, `kit/images.ts`, `kit/photo-read.ts`, `sections/split-pair.tsx`.
+Files: `kit/blocks.css`, `kit/feel.ts`, `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
@@ -447,7 +447,7 @@ film: role centerpiece · home none · motif neutral · energy 3 · pins 3 · ho
 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.
 
 Exports: `FannedCards`. Packages: @gsap/react, gsap.
-Files: `kit/blocks.css`, `kit/gsap.ts`, `kit/images.ts`, `sections/fanned-cards.tsx`.
+Files: `kit/blocks.css`, `kit/feel.ts`, `kit/gsap.ts`, `kit/images.ts`, `sections/fanned-cards.tsx`.
 
 ## Footers
 
@@ -462,7 +462,7 @@ Variants (`variant`, the first is the default):
 - `iris`: The footer is uncovered through an opening that grows from a thin slit at the bottom of the screen to full, the name rising inside it.
 
 Exports: `FooterReveal`. Packages: @gsap/react, gsap, lenis.
-Files: `footers/footer-reveal.tsx`, `kit/SmoothScroll.tsx`, `kit/blocks.css`, `kit/gsap.ts`.
+Files: `footers/footer-reveal.tsx`, `kit/SmoothScroll.tsx`, `kit/blocks.css`, `kit/feel.ts`, `kit/gsap.ts`.
 
 ### footer-contact
 film: role frame · home none · motif word · energy 1 · pins 0 · clock, hover · clock by prop clock
@@ -474,5 +474,8 @@ Variants (`variant`, the first is the default):
 - `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.
-Files: `footers/footer-contact.tsx`, `kit/blocks.css`, `kit/gsap.ts`.
+Exports: `FooterContact`. Packages: ,
+  },
+  nl: {
+    days: [, @gsap/react, gsap.
+Files: `footers/footer-contact.tsx`, `kit/blocks.css`, `kit/feel.ts`, `kit/gsap.ts`, `kit/middle/hours.ts`.

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

@@ -456,8 +456,9 @@ export function BackgroundAurora({ variant = "veil", lines, accent, lead, link,
     const leave = { now: 0, target: 0 };
     const ptr = { x: 0.5, y: 0.5, z: 0, tx: 0.5, ty: 0.5, tz: 0 };
 
+    // alpha: a cleared or discarded buffer is transparent, so the hero's own ground shows through, never black.
     const gl = canvas.getContext("webgl2", {
-      alpha: false,
+      alpha: true,
       antialias: false,
       depth: false,
       stencil: false,

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

@@ -1145,7 +1145,8 @@ export function BackgroundFacets({ variant = "shard", lines, accent, lead, link,
     };
 
     const start = () => {
-      const gl = canvas.getContext("webgl2", { antialias: false, alpha: false, premultipliedAlpha: false, powerPreference: "low-power" });
+      // alpha: a cleared or discarded buffer is transparent, so the section's ground shows, never opaque black.
+      const gl = canvas.getContext("webgl2", { antialias: false, alpha: true, premultipliedAlpha: false, powerPreference: "low-power" });
       if (gl) g = buildGL(gl);
       if (!g && !gl) ctx2d = canvas.getContext("2d");
       else if (!g) {
@@ -1192,7 +1193,8 @@ export function BackgroundFacets({ variant = "shard", lines, accent, lead, link,
 
     const ro = new ResizeObserver(() => {
       measure();
-      if (!raf) render();
+      // A resize clears the canvas, and a frame already queued would show it blank first: draw now, in this task.
+      render();
     });
     ro.observe(el);
     if (copy) ro.observe(copy);
@@ -1228,7 +1230,7 @@ export function BackgroundFacets({ variant = "shard", lines, accent, lead, link,
     document.fonts?.ready.then(() => accentFaceReady(el)).then(() => {
       if (gone) return;
       measure();
-      if (!raf) render();
+      render();
     });
 
     start();

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

@@ -357,8 +357,10 @@ function silkField(
   scratch.height = 1;
   const ctx2d = scratch.getContext("2d", { willReadFrequently: true });
 
+  // alpha: a cleared or discarded buffer (a resize, a restored context) is transparent, so the hero's own ground
+  // shows through, never an opaque black slab. Every pixel the shader writes has alpha 1, so a drawn frame is unchanged.
   const attrs: WebGLContextAttributes = {
-    alpha: false,
+    alpha: true,
     antialias: false,
     depth: false,
     stencil: false,
@@ -721,9 +723,11 @@ function silkField(
   const resizeObserver = new ResizeObserver(() => {
     resize();
     remeasure();
+    // A resize clears the canvas: draw at once, in this task, so a paused loop never leaves it blank.
     if (reduce) still();
+    else if (drawn) draw();
   });
-  const io = new IntersectionObserver(
+  const io =new IntersectionObserver(
     (entries) => {
       onScreen = entries.some((en) => en.isIntersecting);
       kick();