@mthanh/vespercli 2.2.0 → 2.3.0

package/assets/copilot/packs/frontend/skills/design-taste-frontend/references/motion.md

@@ -0,0 +1,980 @@
+# Motion
+
+Read this before adding any animation. The static page must already be finished and passing
+`inspect.mjs`; motion is the last pass, never a way to rescue a weak layout.
+
+## Contents
+
+1. The budget
+2. What strong pages do with motion
+3. Four questions before any animation
+4. Tokens
+5. Scroll behaviours, ranked
+6. Recipes (copy, then adapt)
+7. Signature moves
+8. Reduced motion and performance
+9. What gives generated motion away
+10. Rules for motion
+
+## 1. The budget
+
+A page that does not move reads as a mock-up; the inspector counts what moves while the page loads and
+scrolls, and fails it under eight elements. The motion layer has five parts:
+
+- **Two or three scroll scenes:** the big, scroll-driven moments award sites are remembered for (a
+  camera flying through a field of pictures, a picture that grows from a window to the whole screen,
+  type that crosses a held stage, cards that deal out and stack). The direction sheet deals them from
+  `library/scenes.json` when the library has scenes for the brief; `references/scenes.md` says how to
+  fill and fit them. They are where the page is bold; everything else stays quiet so they land.
+
+- **One signature moment:** the thing a visitor would describe an hour later: the headline that rises
+  out of a mask, the image that opens like a shutter, the wordmark that scales with the scroll. The
+  direction sheet from `draw.mjs` names one. Build that one well; it is the only move allowed to be
+  loud.
+- **Section entrances, choreographed per section:** the parts of each section arrive in reading order
+  (heading, text, picture, details), staggered 60–90ms, rising 16–32px with opacity, once. Vary the
+  manner with the content instead of stamping one preset everywhere: a list arrives row by row, a
+  picture opens from a mask or settles from a slight scale, a figure counts up once, a statement rises
+  line by line.
+- **Feedback under the hand:** buttons that give on press, links that answer the pointer, cards and
+  pictures that respond on hover, a menu that opens from where it was clicked.
+- **One moving picture:** a found clip as a muted loop with a poster frame, a slow drift or scale on
+  a large photograph, or a scroll-linked move on the hero picture.
+
+What is still banned: the same fade-and-slide-up with the same timing on every block, which is the most
+cited motion tell of generated pages; motion that hides content until a script runs, with no fallback;
+bounce and elastic easing; anything that animates layout properties. Uniform motion says nobody decided
+anything; choreographed motion with one protected moment says somebody did.
+
+## 2. What strong pages do with motion
+
+Measured on the latest 99 Awwwards Sites of the Day (July to October 2026), at 1440 and 390, with
+the transitions, tweens and scroll triggers recorded while each page loaded and was scrolled. Where
+the gallery does something the house rules ban, the house version follows.
+
+- **The stack.** Two in three use a smooth-scroll library and three in five ship Three.js; GSAP is
+  named on 56. The quiet layer below (reveals, line rises, the ink fill) needs none of it: CSS scroll
+  timelines and view transitions do that work, though only 3 and 6 of the sites use them. The big
+  scroll scenes are built on GSAP ScrollTrigger, as on the award sites, through the shared stage in
+  `assets/scenes/` (`references/scenes.md`).
+- **Curves.** The curves that really ran are strong ease-outs: expo out (`.16,1,.3,1` and
+  `.19,1,.22,1`) ran on 14 sites, cubic out on 13, quint out on 7, and by number of transitions the
+  quint and expo outs lead every chosen curve. In-out curves are kept for wipes and things that
+  travel (cubic and quart in-out, about 15 sites each). Ease-in appears only for exits, short, before
+  a slow arrival. Colour changes use plain `ease` (46 sites). Overshoot sits in 19 stylesheets and
+  ran on 2.
+- **Durations.** Hover colour 200-300 ms; small interface moves 300-450 ms; reveals and line rises
+  600-1,000 ms; picture openings and wipes 1,100-1,600 ms. The median of everything that ran on a
+  site is 420 ms.
+- **Staggers.** 20-40 ms between characters, 75-120 ms between lines, 50-100 ms between list items.
+- **Scroll-linked motion is locked to the scrollbar.** Of the sites that scrub, 14 of 18 lock it with
+  no smoothing; the other four smooth it by 0.1-3 s. Reveals fire when the element's top is 80-95% of the way
+  down the viewport, once.
+- **How much moves.** A median of 130 elements are moved by script on a page, but they come from a
+  few gestures: one split heading is 20-60 elements. The inspector's floor (8, warning under 16) is a
+  floor, not a target.
+- **Waiting is the most common cost.** 60 of 99 open on a loading screen, 26 of them with a counter.
+  Half the usable pages were still unreadable 2.5 s after the browser said the page had loaded, a
+  third at 4.5 s. The preloaders were not covering slow pages (their documents loaded faster than the
+  rest) and the readers' design marks were the same whatever the wait; only usability fell. House
+  version: no preloader, the message readable on the first frame, the load sequence over by 1.2 s.
+- **Pins cost length.** Two in three scrolling pages hold something sticky or pinned. Those pages
+  are twice as long (a median 16.6 screens against 7.5) for fewer words per screen (27 against 46).
+  House version: at most two held stages, about one screen per step, three screens per stage.
+- **Reduced motion is mostly missing.** 35 of 99 have any `prefers-reduced-motion` rule, 16 have
+  three or more; 5 of 26 scroll-scrubbed scenes have one. Every recipe here keeps the finished state
+  as the reduced state.
+
+## 3. Four questions before any animation
+
+1. **How often will someone see it?** Once per visit (hero load, a section reveal): it can take its
+   time. Many times per visit (hover, menu, accordion): fast and small. Hundreds of times (keyboard
+   actions, typing): no animation.
+2. **What is it for?** Valid answers: it shows where something came from, it confirms an action, it
+   keeps a change from being jarring, it explains how the product works, it is the signature moment.
+   "It looks nice" is only valid for the signature moment.
+3. **Which easing?** Entering or leaving: ease-out, so movement starts the instant the eye arrives.
+   Moving between two places on screen: ease-in-out. Colour and opacity on hover: `ease`. Constant
+   travel (marquee, progress): `linear`. `ease-in` makes interfaces feel slow because the first frames
+   barely move; do not use it. The CSS keyword curves are weak, so use the tokens below.
+4. **How long?** Press feedback 100–160ms. Hover 150–200ms. Menus and popovers 150–250ms. Dialogs and
+   drawers 250–450ms. Section and hero reveals 500–900ms. Leaving is quicker than arriving (about 70%).
+
+## 4. Tokens
+
+```css
+:root {
+  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);        /* entrances, moving hovers, UI under 600ms */
+  --ease-expo: cubic-bezier(0.16, 1, 0.3, 1);        /* new: reveals of 800ms and longer, line rises, openings */
+  --ease-in-out: cubic-bezier(0.76, 0, 0.24, 1);     /* wipes, panels, things that travel while visible */
+  --ease-soft: cubic-bezier(0.33, 1, 0.68, 1);       /* slow scale and drift on photographs */
+  --ease-exit: cubic-bezier(0.55, 0.055, 0.675, 0.19); /* new: something leaving for good, short */
+  --t-press: 140ms;
+  --t-hover: 180ms;
+  --t-ui: 240ms;
+  --t-reveal: 800ms;
+  --t-open: 1200ms;                                  /* new: picture openings and clip wipes */
+  --stagger-line: 90ms;                              /* new */
+  --stagger-item: 70ms;                              /* new */
+}
+```
+
+How the study bears on each:
+
+- `--ease-out` (quint out) is in 28 stylesheets with its near twin and is the single most frequent
+  chosen curve among transitions that ran. Keep it.
+- `--ease-expo` is new. Expo out (`.16,1,.3,1` and `.19,1,.22,1`) is in 28 stylesheets and ran on 14
+  sites, more than any other chosen family, and it is the curve the long reveals use: line rises,
+  picture openings, card entrances of 0.9-1.6 s. Use it for anything at `--t-reveal` or longer; it
+  replaces `--ease-out` in the masked headline and the reveal-on-scroll recipes.
+- `--ease-in-out` (quart in-out) matches its family (14 stylesheets, 7 ran). Keep it for wipes,
+  shutters, menus and page transitions.
+- `--ease-soft` (cubic out) matches the cubic-out family (21 stylesheets, 13 ran), but the study uses it
+  for interface moves of 0.3-0.8 s, where `--ease-out` already serves. Narrow it to slow scale and
+  drift on photographs.
+- `--ease-exit` is new. Ease-in is right for exactly one job: something that leaves for good (an
+  outgoing caption, a replaced slide, a closing panel), short, at about 60-70% of the matching
+  entrance. Never for anything the visitor is waiting to see.
+- Not adopted: `.4,0,.2,1` (38 stylesheets) is a framework default, and overshoot curves (19) stay
+  banned on interface elements.
+- `--t-hover` stays at 180ms. The study's colour hovers run 200-300ms; a little quicker reads as
+  more exact. A hover that moves something (a label roll, an arrow) takes `--t-ui` to 400ms.
+
+## 5. Scroll behaviours, ranked
+
+| Behaviour | Pages of 99 | What it serves | House version |
+| --- | --- | --- | --- |
+| Smooth-scroll library | 67 | A feeling of weight; makes scrubbed scenes easier to build | Optional, through `Stage.smooth()`: Lenis at lerp 0.1-0.14, off for touch and reduced motion |
+| Held (sticky or pinned) stage | 44 | One picture or object carries several claims; chapters | Yes: the scroll scenes (`references/scenes.md`), two or three per page, one to four screens each; other sticky stages three screens at most |
+| Split text | 40 | Lines and words arriving as they are read; hover rolls | Lines for headings and statements; words only for the ink fill; characters only for a heading of one to three words |
+| Colour by chapter | 34 | Tells chapters apart without padding bands | Yes, as hard cuts at section edges; the header ink follows in 300ms |
+| Scroll-scrubbed scene (camera, object, image sequence) | 26 | Explains a product by moving it | Yes, from the scene library, built on the shared stage with a finished composition for reduced motion |
+| Parallax depth | 24 | Depth in collages; pictures drifting inside oversized frames | Travel under 8% of the element, pictures held at 106-110% in their frames |
+| Marquee | 21 | Life on a static band | Existing "Edge-to-edge marquee": one per page, pausable |
+| Masked line or word rise | 18 | Headings that arrive like set type | Yes: "Masked line reveal" on load, "Lines that rise on scroll" below the fold |
+| Wheel drives a scene, no page scroll | 16 | Browsing one object | Not used (see 2.6) |
+| Blur-in | 15 | Soft arrival | At most 8px of blur, 600ms, gone once settled; never on body text |
+| Picture from inset frame to full-bleed | 14 | The hand-over from a type screen to the big picture | Yes: "Opening window", about one screen of scroll |
+| Grey-to-ink text fill | 14 | Paces one statement | Yes, once per page, starting at 45% ink: "Ink fill" |
+| Sheet slides over a held layer | 11 | Page-turn rhythm between chapters | Yes: new move "Sheet over a held picture" |
+| Scramble or decode | 11 | A "code" voice | Not used (see 2.6) |
+| Header ink by chapter | 10 | The fixed header stays legible | Yes, with colour by chapter |
+| Horizontal track pinned to vertical scroll | 8 | Walking through rooms or a collection | Native drag row first; pinned only when the row is under three screens long, with keyboard support: "Sideways gallery" |
+| Curtain footer | 8 | The page ends as a scene | Existing move |
+| Rolling digits | 6 | Figures that arrive | Yes, for pages whose case is a handful of numbers: "Rolling figures" |
+| Index with hover preview | 5 | Navigating work by name | Existing move, upgraded recipe |
+
+Text, split by unit: characters on about 20 pages, lines on about 14, words on about 11. Character
+splits serve short headings and button rolls; on long statements they leave fragments mid-scroll.
+
+## 6. Recipes
+
+All recipes keep the content visible when JavaScript is off, put every hidden state inside
+`prefers-reduced-motion: no-preference`, and use the tokens above. Two notes that apply to several:
+
+- **Scroll timelines need a scroller to watch.** `animation-timeline: view()` takes the nearest scroll
+  container, and `overflow: hidden` makes one. A picture inside an `overflow: hidden` frame therefore
+  never animates. Use `overflow: clip` on frames, or name the timeline on the section
+  (`view-timeline-name: --hero`) and point the children at that name. This also applies to the
+  existing "Scroll-linked progress" recipe.
+- **Scroll-linked means linear.** The scroll is the easing. 14 of the 18 scrubbing sites in the study
+  lock motion to the scrollbar, which is what CSS scroll timelines do.
+
+All recipes keep content visible when JavaScript is off or slow: the hidden state only applies under
+`html.js`, which a one-line inline script sets.
+
+```html
+<script>document.documentElement.classList.add('js')</script>
+```
+
+### Load sequence in 1.2 seconds
+
+Everything is in the HTML and painted on the first frame; the sequence only adds arrival. Nothing
+waits for the load event, and nothing in the navigation animates.
+
+```html
+<header class="hero">
+  <h1 class="display lines">
+    <span class="line"><span data-line style="--i:0">Stools for</span></span>
+    <span class="line"><span data-line style="--i:1">small kitchens</span></span>
+  </h1>
+  <p class="lead" data-load style="--d:420ms">…</p>
+  <a class="button" data-load style="--d:480ms" href="#stools">See the stools</a>
+  <figure class="hero__picture" data-open><img src="stool.jpg" alt="…" fetchpriority="high"></figure>
+</header>
+```
+
+```css
+.hero__picture { overflow: clip; margin: 0; }
+@media (prefers-reduced-motion: no-preference) {
+  .js .hero [data-line] { transform: translateY(105%); animation: load-line 800ms var(--ease-expo) forwards; animation-delay: calc(100ms + var(--i) * var(--stagger-line)); }
+  .js .hero [data-load] { opacity: 0; transform: translateY(12px); animation: load-rise 500ms var(--ease-out) forwards; animation-delay: var(--d); }
+  .js .hero [data-open] { clip-path: inset(0 0 100% 0); animation: load-open 1000ms var(--ease-in-out) 150ms forwards; }
+  .js .hero [data-open] img { transform: scale(1.08); animation: load-settle 1100ms var(--ease-expo) 100ms forwards; }
+}
+@keyframes load-line { to { transform: none; } }
+@keyframes load-rise { to { opacity: 1; transform: none; } }
+@keyframes load-open { to { clip-path: inset(0); } }
+@keyframes load-settle { to { transform: none; } }
+```
+
+The timeline: the headline's lines rise from 100 to 990 ms, the picture opens from 150 to 1,150 ms,
+the sentence and the button arrive from 420 to 980 ms. All settled by 1.2 s, four things at most.
+Preload the display font (`<link rel="preload" as="font" type="font/woff2" crossorigin>`) so the lines
+rise in the real face, and give the picture `fetchpriority="high"` and a ground colour sampled from it,
+so a slow image opens onto its own colour rather than a blank box. Study: 22 of 91 pages were readable
+at the first intro frame and 11 more by 1.2 s; the intros the readers called respectful finished in
+about 1-1.2 s; a third of the pages were still unreadable at 4.5 s.
+
+### Masked line reveal (the classic gallery headline)
+
+Each line slides up from behind its own baseline. Because headlines are capped at two lines, you set
+the line breaks yourself and wrap each line.
+
+```html
+<h1 class="lines">
+  <span class="line"><span data-line style="--i:0">Stools for</span></span>
+  <span class="line"><span data-line style="--i:1">small kitchens</span></span>
+</h1>
+```
+
+```css
+.lines .line { display: block; overflow: hidden; padding-bottom: 0.08em; margin-bottom: -0.08em; }
+.lines [data-line] { display: block; }
+@media (prefers-reduced-motion: no-preference) {
+  .js .lines [data-line] {
+    transform: translateY(105%);
+    animation: line-up 900ms var(--ease-out) forwards;
+    animation-delay: calc(var(--i) * 110ms + 150ms);
+  }
+}
+@keyframes line-up { to { transform: none; } }
+```
+
+The `padding-bottom` / negative margin pair stops descenders (g, y, p) being clipped by the mask.
+On a narrow phone the two authored lines may each wrap; check the mobile screenshot, and if they do,
+author a shorter mobile break with a `<br class="only-wide">` pattern or reduce the size.
+
+### Reveal on scroll (once)
+
+For the two or three sections that deserve it, not for every block.
+
+```css
+@media (prefers-reduced-motion: no-preference) {
+  .js [data-reveal] { opacity: 0; transform: translateY(24px); transition: opacity 700ms var(--ease-out), transform 900ms var(--ease-out); }
+  .js [data-reveal].is-in { opacity: 1; transform: none; }
+}
+```
+
+```js
+const io = new IntersectionObserver((entries) => {
+  for (const e of entries) if (e.isIntersecting) { e.target.classList.add('is-in'); io.unobserve(e.target); }
+}, { rootMargin: '0px 0px -12% 0px', threshold: 0.1 });
+document.querySelectorAll('[data-reveal]').forEach((el) => io.observe(el));
+```
+
+Never attach reveals with a scroll listener, never replay them when the element re-enters, and never
+leave anything at `opacity: 0` if the observer fails to fire (the `html.js` gate handles no-JS; the
+`unobserve` handles replays).
+
+### Image shutter
+
+An image opens from one edge while scaling down slightly inside its frame. Gallery staple; use it for
+the one hero or showcase image.
+
+```css
+.shutter { overflow: hidden; }
+@media (prefers-reduced-motion: no-preference) {
+  .js .shutter { clip-path: inset(0 0 100% 0); transition: clip-path 1100ms var(--ease-in-out); }
+  .js .shutter img { transform: scale(1.12); transition: transform 1500ms var(--ease-soft); }
+  .js .shutter.is-in { clip-path: inset(0); }
+  .js .shutter.is-in img { transform: none; }
+}
+```
+
+### Press and hover
+
+```css
+.button { transition: transform var(--t-press) var(--ease-out), background-color var(--t-hover) ease, color var(--t-hover) ease; }
+.button:active { transform: scale(0.97); }
+.link { text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 0.2em; text-decoration-thickness: 0.07em; transition: text-decoration-color var(--t-hover) ease; }
+@media (hover: hover) and (pointer: fine) {
+  .button:hover { background-color: var(--accent-strong); }
+  .link:hover { text-decoration-color: currentColor; }
+}
+```
+
+Hover styles go behind `(hover: hover)` because touch devices fire hover on tap and leave it stuck.
+Hover should raise contrast, never lower it. Do not change font weight on hover (the text reflows).
+Do not lift or scale every card on hover; one consistent, small response is enough.
+
+### Scroll-linked progress without JavaScript
+
+For a wordmark that scales as the hero leaves, an image that drifts a few percent, or a progress bar.
+Wrap in `@supports` so browsers without scroll timelines get the static state.
+
+```css
+@supports (animation-timeline: view()) {
+  @media (prefers-reduced-motion: no-preference) {
+    .drift { animation: drift linear both; animation-timeline: view(); animation-range: entry 0% exit 100%; }
+    @keyframes drift { from { transform: translateY(-4%); } to { transform: translateY(4%); } }
+  }
+}
+```
+
+Keep the travel small (under 8% of the element). Large parallax makes text hard to read and looks
+dated.
+
+### Pinned story
+
+A section whose heading stays put while items pass. Use `position: sticky`; do not hijack scrolling.
+
+```css
+.story { display: grid; grid-template-columns: 5fr 7fr; gap: var(--gutter); align-items: start; }
+.story__title { position: sticky; top: 18vh; }
+@media (max-width: 800px) { .story { grid-template-columns: 1fr; } .story__title { position: static; } }
+```
+
+### Index with preview, anchored to the row
+
+Rows of names; pointing at a row or tabbing to it opens one frame level with that row. The frame
+follows the row, never the pointer.
+
+```html
+<section class="index">
+  <ul class="index__list">
+    <li><a class="index__row" href="/work/harbour-house" data-preview="/img/harbour-house.jpg">
+      <span class="index__name">Harbour House</span><span class="index__year">2025</span>
+      <img class="index__thumb" src="/img/harbour-house-small.jpg" alt="" loading="lazy" width="640" height="400">
+    </a></li>
+    <!-- … -->
+  </ul>
+  <div class="index__frame" aria-hidden="true"><img alt=""></div>
+</section>
+```
+
+```css
+.index { position: relative; }
+.index__list { list-style: none; margin: 0; padding: 0; }
+.index__row { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 0 var(--gutter); padding-block: 0.3em; font-size: var(--step-head); color: inherit; text-decoration: none; transition: opacity var(--t-hover) ease; }
+.index__thumb { order: -1; flex-basis: 100%; width: 100%; height: auto; margin-bottom: 0.4rem; }
+.index__frame { display: none; }
+@media (hover: hover) and (pointer: fine) {
+  .index__list { max-width: 62%; }
+  .index__thumb { display: none; }
+  .index__list:has(.index__row:hover, .index__row:focus-visible) .index__row:not(:hover, :focus-visible) { opacity: 0.4; }
+  .index__frame { display: block; position: absolute; top: 0; right: var(--margin); width: 30%; aspect-ratio: 4 / 3; z-index: 1; pointer-events: none; clip-path: inset(100% 0 0 0); transition: clip-path 320ms var(--ease-out), transform 360ms var(--ease-out); }
+  .index__frame.is-open { clip-path: inset(0); }
+  .index__frame img { width: 100%; height: 100%; object-fit: cover; }
+}
+@media (prefers-reduced-motion: reduce) { .index__frame { transition: none; } }
+```
+
+```js
+(() => {
+  const root = document.querySelector('.index');
+  if (!root) return;
+  const frame = root.querySelector('.index__frame');
+  const picture = frame.querySelector('img');
+  const fine = matchMedia('(hover: hover) and (pointer: fine)');
+  let warmed = false;
+  const show = (row) => {
+    if (!fine.matches) return;
+    if (!warmed) { warmed = true; root.querySelectorAll('[data-preview]').forEach((a) => { new Image().src = a.dataset.preview; }); }
+    picture.src = row.dataset.preview;
+    const y = row.offsetTop + row.offsetHeight / 2 - frame.offsetHeight / 2;
+    const max = root.offsetHeight - frame.offsetHeight;
+    const opening = !frame.classList.contains('is-open');
+    if (opening) frame.style.transitionProperty = 'clip-path';   // open in place, do not slide in from the top
+    frame.style.transform = `translateY(${Math.min(max, Math.max(0, y))}px)`;
+    if (opening) { frame.getBoundingClientRect(); frame.style.transitionProperty = ''; }
+    frame.classList.add('is-open');
+  };
+  const hide = () => frame.classList.remove('is-open');
+  root.querySelectorAll('.index__row').forEach((row) => {
+    row.addEventListener('pointerenter', () => show(row));
+    row.addEventListener('focus', () => show(row));
+  });
+  root.addEventListener('pointerleave', hide);
+  root.addEventListener('focusout', (e) => { if (!root.contains(e.relatedTarget)) hide(); });
+})();
+```
+
+On touch screens each row shows its own picture above the name. Study: 5 pages navigate work this way;
+frames from about 470x270 to large plates behind the list; the other rows dimmed to about 0.3 (0.4 here, the floor for dimmed text). The
+image trails and cursor-borne previews seen elsewhere in the study are the gimmick version.
+
+### Lines that rise on scroll
+
+For a section heading or a statement whose line breaks you do not control. Splits after the fonts
+load, reveals once, then gives the plain text back so it rewraps normally. Plain text only (no links or
+emphasis inside).
+
+```html
+<h2 class="head" data-lines>Turned by hand in one small workshop</h2>
+```
+
+```css
+[data-lines] .line { display: block; overflow: clip; padding-bottom: 0.12em; margin-bottom: -0.12em; }
+[data-lines] .line > span { display: block; }
+@media (prefers-reduced-motion: no-preference) {
+  .is-split .line > span { transform: translateY(110%); }
+  .is-split.is-in .line > span { transform: none; transition: transform 900ms var(--ease-expo) calc(var(--i) * var(--stagger-line)); }
+}
+```
+
+```js
+(() => {
+  const els = [...document.querySelectorAll('[data-lines]')];
+  if (!els.length || !('IntersectionObserver' in window) || matchMedia('(prefers-reduced-motion: reduce)').matches) return;
+  const restore = (el) => { el.textContent = el.dataset.text; el.classList.remove('is-split', 'is-in'); };
+  const split = (el) => {
+    const text = el.textContent.trim().replace(/\s+/g, ' ');
+    el.dataset.text = text;
+    el.textContent = '';
+    const words = text.split(' ').map((word) => {
+      const s = document.createElement('span');
+      s.style.display = 'inline-block';
+      s.textContent = word;
+      el.append(s, ' ');
+      return s;
+    });
+    const lines = [];                                   // group the words by the line they landed on
+    for (const w of words) {
+      const last = lines.at(-1);
+      if (last && Math.abs(last.top - w.offsetTop) < 4) last.words.push(w.textContent);
+      else lines.push({ top: w.offsetTop, words: [w.textContent] });
+    }
+    el.textContent = '';
+    lines.forEach((line, i) => {
+      const mask = document.createElement('span');
+      const inner = document.createElement('span');
+      mask.className = 'line';
+      inner.style.setProperty('--i', i);
+      inner.textContent = line.words.join(' ');
+      mask.append(inner);
+      el.append(mask, ' ');
+    });
+    el.classList.add('is-split');
+  };
+  const io = new IntersectionObserver((entries) => {
+    for (const e of entries) {
+      if (!e.isIntersecting) continue;
+      io.unobserve(e.target);
+      e.target.classList.add('is-in');
+      e.target.querySelector('.line:last-of-type > span')
+        .addEventListener('transitionend', () => restore(e.target), { once: true });
+    }
+  }, { rootMargin: '0px 0px -12% 0px' });
+  document.fonts.ready.then(() => els.forEach((el) => { split(el); io.observe(el); }));
+  let width = innerWidth;                               // a width change before the reveal: give the text back
+  addEventListener('resize', () => {
+    if (innerWidth === width) return;
+    width = innerWidth;
+    els.filter((el) => el.matches('.is-split:not(.is-in)')).forEach((el) => { io.unobserve(el); restore(el); });
+  });
+})();
+```
+
+Study: masked rises from 100-120% below the line, 0.6-1.2 s, 75-120 ms between lines, triggered when
+the block's top is 80-95% down the viewport. Reduced motion: the script does not run; the text is plain.
+
+### Opening window
+
+The hand-over from a type screen to the one big picture: the picture first shows as a window in the
+middle of a held stage and opens to full-bleed over about one screen of scroll.
+
+```html
+<section class="opening">
+  <div class="opening__stage">
+    <img src="workshop-wide.jpg" alt="The workshop at first light, benches cleared" width="2400" height="1500">
+  </div>
+</section>
+```
+
+```css
+.opening__stage { height: 100svh; overflow: clip; }
+.opening__stage img { display: block; width: 100%; height: 100%; object-fit: cover; }
+@supports (animation-timeline: view()) {
+  @media (prefers-reduced-motion: no-preference) {
+    .opening { height: 200svh; view-timeline-name: --opening; --inset-y: 20%; --inset-x: 28%; }
+    .opening__stage { position: sticky; top: 0; animation: opening-window linear both; animation-timeline: --opening; animation-range: contain 0% contain 75%; }
+    .opening__stage img { animation: opening-settle linear both; animation-timeline: --opening; animation-range: contain 0% contain 75%; }
+  }
+}
+@media (max-width: 700px) { .opening { --inset-y: 18%; --inset-x: 8%; } }
+@keyframes opening-window { from { clip-path: inset(var(--inset-y) var(--inset-x)); } to { clip-path: inset(0); } }
+@keyframes opening-settle { from { transform: scale(1.15); } to { transform: none; } }
+```
+
+The section is two screens tall; the stage is held for one, and the window is fully open after three
+quarters of it, so the full-bleed picture rests for a moment before the page moves on. Study: 14 pages;
+start windows 38-60% of the width; runways 600-1,800 px, and the readers asked for one to two screens.
+Without scroll timelines, and under reduced motion, the picture is a full-bleed screen.
+
+### Held picture, passing captions
+
+The pinned story built for photographs: the picture holds on one side while short captions pass on
+the other; the caption at the middle of the screen is lit and its picture is shown.
+
+```html
+<section class="steps">
+  <figure class="steps__media">
+    <div class="steps__pictures">
+      <img src="seasoning.jpg" alt="Ash boards stacked to season" class="is-on">
+      <img src="turning.jpg" alt="A leg being turned on the lathe">
+      <img src="finish.jpg" alt="Oil rubbed into a finished seat">
+    </div>
+    <figcaption class="steps__count" aria-hidden="true"></figcaption>
+  </figure>
+  <ol class="steps__list">
+    <li class="steps__item"><h3>Seasoned for a year</h3><p>…</p></li>
+    <li class="steps__item"><h3>Turned by hand</h3><p>…</p></li>
+    <li class="steps__item"><h3>Finished with oil</h3><p>…</p></li>
+  </ol>
+</section>
+```
+
+```css
+.steps { display: grid; grid-template-columns: 7fr 5fr; column-gap: var(--gutter); }
+.steps__media { margin: 0; align-self: start; }           /* a stretched grid item cannot stick */
+.steps__pictures img { display: block; width: 100%; height: auto; }
+.steps__list { list-style: none; margin: 0; padding: 0; }
+.steps__item { min-height: 80svh; display: flex; flex-direction: column; justify-content: center; }
+.js .steps__media { position: sticky; top: 0; height: 100svh; display: flex; flex-direction: column; justify-content: center; gap: 0.75rem; }
+.js .steps__pictures { position: relative; aspect-ratio: 4 / 5; max-height: 80svh; }
+.js .steps__pictures img { position: absolute; inset: 0; height: 100%; object-fit: cover; opacity: 0; transition: opacity 500ms ease; }
+.js .steps__pictures img.is-on { opacity: 1; }
+.js .steps__item { opacity: 0.4; transition: opacity var(--t-ui) ease; }
+.js .steps__item.is-active { opacity: 1; }
+@media (max-width: 800px) {
+  .steps { display: block; }                               /* the section, not a grid area, contains the sticky picture */
+  .js .steps__media { height: auto; z-index: 1; background: var(--bg); padding-block: 0.5rem; }
+  .js .steps__pictures { aspect-ratio: 3 / 2; max-height: 42svh; }
+  .steps__item { min-height: 60svh; }
+}
+@media (prefers-reduced-motion: reduce) { .js .steps__pictures img, .js .steps__item { transition: none; } }
+```
+
+```js
+(() => {
+  const root = document.querySelector('.steps');
+  if (!root || !('IntersectionObserver' in window)) return;
+  const items = [...root.querySelectorAll('.steps__item')];
+  const pictures = [...root.querySelectorAll('.steps__pictures img')];
+  const count = root.querySelector('.steps__count');
+  const show = (i) => {
+    items.forEach((el, k) => el.classList.toggle('is-active', k === i));
+    pictures.forEach((el, k) => el.classList.toggle('is-on', k === i));
+    if (count) count.textContent = `${i + 1} of ${items.length}`;
+  };
+  const io = new IntersectionObserver((entries) => {
+    for (const e of entries) if (e.isIntersecting) show(items.indexOf(e.target));
+  }, { rootMargin: '-45% 0px -45% 0px' });                 // a band across the middle of the screen
+  items.forEach((el) => io.observe(el));
+  show(0);
+})();
+```
+
+Without JavaScript the pictures and captions are two plain columns. Study: inactive items at 20-40%
+(dims of 10-15% read as missing text, so the floor here is 40%), crossfades of 400-600 ms, about one
+screen per step; the readers asked for a visible count on any held sequence of more than two steps.
+The count is a plain sentence in the body face, not a zero-padded numeral.
+
+### Sideways gallery
+
+A row of pictures that the vertical scroll moves sideways while the stage is held, for a short
+collection (eight items or fewer). The native drag row is the base; the pinned version is added only
+on wide screens with motion allowed, and only when the row is under three screens long.
+
+```html
+<section class="gallery">
+  <div class="gallery__stage">
+    <h2 class="head">Eight kitchens, one stool</h2>
+    <ul class="gallery__track">
+      <li class="gallery__item"><a href="/kitchens/leith"><img src="leith.jpg" alt="A narrow galley kitchen in Leith" width="1200" height="1500"><span>Leith</span></a></li>
+      <!-- … -->
+    </ul>
+  </div>
+</section>
+```
+
+```css
+.gallery__track { display: flex; gap: var(--gutter); list-style: none; margin: 0; padding: 0 var(--margin); overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--margin); }
+.gallery__item { flex: 0 0 min(72vw, 28rem); scroll-snap-align: start; }
+.gallery__item img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; }
+.gallery.is-pinned .gallery__stage { position: sticky; top: 0; height: 100svh; display: flex; flex-direction: column; justify-content: center; gap: 2rem; overflow: clip; }
+.gallery.is-pinned .gallery__track { overflow: visible; scroll-snap-type: none; }
+.gallery.is-pinned .gallery__item { flex-basis: calc(62svh * 0.8); }
+```
+
+```js
+(() => {
+  const root = document.querySelector('.gallery');
+  if (!root) return;
+  const track = root.querySelector('.gallery__track');
+  const wide = matchMedia('(min-width: 900px) and (prefers-reduced-motion: no-preference)');
+  let dx = 0, queued = false;
+  const place = () => {
+    queued = false;
+    if (!root.classList.contains('is-pinned')) return;
+    const p = Math.min(1, Math.max(0, -root.getBoundingClientRect().top / dx));
+    track.style.transform = `translate3d(${(-p * dx).toFixed(1)}px, 0, 0)`;
+  };
+  const measure = () => {
+    root.classList.add('is-pinned');                     // measure the row as it would be when pinned
+    track.style.transform = '';
+    dx = track.scrollWidth - track.clientWidth;
+    const pin = wide.matches && dx > 0 && dx < innerHeight * 3;
+    root.classList.toggle('is-pinned', pin);
+    root.style.height = pin ? `${innerHeight + dx}px` : ''; // one pixel of scroll moves the row one pixel
+    place();
+  };
+  track.addEventListener('focusin', (e) => {             // keyboard: bring the focused item into view
+    if (!root.classList.contains('is-pinned')) return;
+    const item = e.target.closest('.gallery__item');
+    const x = Math.min(dx, Math.max(0, item.offsetLeft - parseFloat(getComputedStyle(track).paddingLeft)));
+    scrollTo({ top: root.getBoundingClientRect().top + scrollY + x, behavior: 'instant' });
+  });
+  addEventListener('scroll', () => { if (!queued) { queued = true; requestAnimationFrame(place); } }, { passive: true });
+  addEventListener('resize', measure);
+  addEventListener('load', measure);
+  wide.addEventListener('change', measure);
+  measure();
+})();
+```
+
+Study: 8 pages pinned a horizontal track; their pages ran a median 25 screens, and the readers' worst
+cases spent 9 screens on three cards and 10,000-23,000 px of wheel on one track. Here the speed is 1:1
+and the hold ends when the last picture reaches the margin. Phones, narrow windows, reduced motion and
+long rows all get the native row with snapping, which also works with touch, trackpads and the
+keyboard. Never put the only copy of a call to action inside the moving row.
+
+### Receding hero
+
+As the first screen leaves, its picture sinks a little and darkens while the words lift away a little
+faster, so the hero recedes instead of simply scrolling off.
+
+```html
+<header class="hero">
+  <img class="hero__picture" src="kitchen.jpg" alt="…" width="2400" height="1600" fetchpriority="high">
+  <div class="hero__copy"><h1 class="display">…</h1><p class="lead">…</p></div>
+</header>
+```
+
+```css
+.hero { position: relative; min-height: 100svh; overflow: clip; display: grid; align-items: end; view-timeline-name: --hero; }
+.hero__picture { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
+.hero::after { content: ''; position: absolute; inset: 0; background: var(--ink); opacity: 0; pointer-events: none; }
+.hero__copy { position: relative; z-index: 1; padding: var(--margin); }
+@supports (animation-timeline: view()) {
+  @media (prefers-reduced-motion: no-preference) {
+    .hero__picture { animation: hero-sink linear both; animation-timeline: --hero; animation-range: exit 0% exit 100%; }
+    .hero::after { animation: hero-dim linear both; animation-timeline: --hero; animation-range: exit 0% exit 100%; }
+    .hero__copy { animation: hero-lift linear both; animation-timeline: --hero; animation-range: exit 0% exit 70%; }
+  }
+}
+@keyframes hero-sink { to { transform: translateY(8%) scale(1.06); } }
+@keyframes hero-dim { to { opacity: 0.35; } }
+@keyframes hero-lift { to { transform: translateY(-6%); opacity: 0; } }
+```
+
+The `exit` range runs from the moment the hero's top meets the top of the screen until its bottom
+does, which for a first screen is the first screen of scroll. Study: hero pictures that sink and dim as
+they leave, a heading scrubbed from 140 to 60 px, a title card that scales down on the phone; the
+readers called it quiet and the page "one sheet". Travel stays under 8%; the overlay is a flat ink at
+up to 35%, not a gradient. Static where unsupported or reduced.
+
+
+
+
+
+### Page to page
+
+Navigation between pages of the site with the browser's own view transitions: the old page fades
+quickly, the new one rises in, and the picture the visitor clicked travels into place as the new
+page's hero. No library, no full-screen curtain.
+
+```css
+/* on every page */
+@view-transition { navigation: auto; }
+@media (prefers-reduced-motion: reduce) { @view-transition { navigation: none; } }
+::view-transition-old(root) { animation: vt-leave 200ms var(--ease-exit) both; }
+::view-transition-new(root) { animation: vt-arrive 380ms var(--ease-out) 60ms both; }
+::view-transition-group(*) { animation-duration: 480ms; animation-timing-function: var(--ease-in-out); }
+::view-transition-image-pair(*.picture) { overflow: clip; }
+::view-transition-old(*.picture), ::view-transition-new(*.picture) { height: 100%; object-fit: cover; }
+@keyframes vt-leave { to { opacity: 0; } }
+@keyframes vt-arrive { from { opacity: 0; transform: translateY(16px); } }
+```
+
+```html
+<!-- on the index: the card picture of one project -->
+<img src="/img/leith.jpg" alt="…" style="view-transition-name: kitchen-leith; view-transition-class: picture">
+<!-- on that project's page: its hero picture -->
+<img src="/img/leith-wide.jpg" alt="…" style="view-transition-name: kitchen-leith; view-transition-class: picture">
+```
+
+Each name may appear once per page. Browsers without cross-document view transitions simply navigate.
+Study: 16 pages load a page-transition library and run full-screen curtains of 0.7-2.4 s; 6 use view
+transitions. The new page should be readable within half a second.
+
+### Ink fill
+
+One statement that fills from part-ink to full ink as it rises through the screen, line by line. It is
+readable before it fills; the fill only sets the pace.
+
+```html
+<p class="statement head" data-fill>Nine people, one workshop, no catalogue: every stool is made for the kitchen it goes to.</p>
+```
+
+```css
+[data-fill] { --fill: var(--ink); color: var(--fill); }
+@supports (animation-timeline: view()) {
+  @media (prefers-reduced-motion: no-preference) {
+    .is-filling > span { display: inline-block; color: color-mix(in oklab, var(--fill) 45%, transparent); animation: ink-fill linear both; animation-timeline: view(); animation-range: cover 20% cover 45%; }
+  }
+}
+@keyframes ink-fill { to { color: var(--fill); } }
+```
+
+```js
+(() => {
+  if (!CSS.supports('animation-timeline: view()') || matchMedia('(prefers-reduced-motion: reduce)').matches) return;
+  document.querySelectorAll('[data-fill]').forEach((el) => {
+    const words = el.textContent.trim().split(/\s+/);
+    el.textContent = '';
+    words.forEach((word, i) => {
+      const s = document.createElement('span');
+      s.textContent = word;
+      el.append(s, i < words.length - 1 ? ' ' : '');
+    });
+    el.classList.add('is-filling');
+  });
+})();
+```
+
+Each word watches its own position, so the words of a line fill together as the line moves from three
+quarters of the way down the screen to just past half way. Set `--fill` on a dark chapter to its ink.
+Study: 14 pages scrub a statement from grey to ink; unread words started at about 25-30% and settled
+frames still caught statements half pale, which reads as disabled text. Here: one statement per page,
+three to five lines, 32px or larger, starting at 45% (about 3:1 against the ground, enough for large
+text). Full ink without scroll timelines or under reduced motion.
+
+### Rolling figures
+
+For pages whose case is a handful of numbers: each digit rolls up to its value once, the columns a
+beat apart. The real number stays in the text for screen readers and search.
+
+```html
+<p class="figure"><span class="display" data-roll>1987</span> the year the first stool was sold</p>
+```
+
+```css
+.roll__digits { display: inline-flex; font-variant-numeric: tabular-nums; line-height: 1; }
+.roll__col { display: inline-block; height: 1em; overflow: clip; }
+.roll__strip { display: flex; flex-direction: column; transform: translateY(calc(var(--d) * -1em)); }
+.roll__strip > span { height: 1em; }
+@media (prefers-reduced-motion: no-preference) {
+  .roll:not(.is-in) .roll__strip { transform: none; }
+  .roll.is-in .roll__strip { transition: transform 1100ms var(--ease-expo) calc(var(--i) * var(--stagger-item)); }
+}
+```
+
+```js
+(() => {
+  const els = [...document.querySelectorAll('[data-roll]')];
+  if (!els.length) return;
+  els.forEach((el) => {
+    const value = el.textContent.trim();
+    const said = Object.assign(document.createElement('span'), { className: 'sr-only', textContent: value });
+    const shown = Object.assign(document.createElement('span'), { className: 'roll__digits' });
+    shown.setAttribute('aria-hidden', 'true');
+    let i = 0;
+    for (const ch of value) {
+      if (!/\d/.test(ch)) { shown.append(ch); continue; }
+      const col = Object.assign(document.createElement('span'), { className: 'roll__col' });
+      const strip = Object.assign(document.createElement('span'), { className: 'roll__strip' });
+      strip.style.setProperty('--d', ch);
+      strip.style.setProperty('--i', i++);
+      for (let n = 0; n < 10; n++) strip.append(Object.assign(document.createElement('span'), { textContent: n }));
+      col.append(strip);
+      shown.append(col);
+    }
+    el.classList.add('roll');
+    el.replaceChildren(said, shown);
+  });
+  if (!('IntersectionObserver' in window)) { els.forEach((el) => el.classList.add('is-in')); return; }
+  const io = new IntersectionObserver((entries) => {
+    for (const e of entries) if (e.isIntersecting) { e.target.classList.add('is-in'); io.unobserve(e.target); }
+  }, { rootMargin: '0px 0px -15% 0px' });
+  els.forEach((el) => io.observe(el));
+})();
+```
+
+Study: 6 pages roll digit columns (stats, a year, coordinates), about 0.9-1.1 s per column on an
+expo-out, staggered by column. Use it for three or four figures at display size, never in running text
+and never for a value that changes after load. Reduced motion: the figure is set at its value.
+
+### Accordion
+
+```css
+.acc__panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 320ms var(--ease-out); }
+.acc__panel > div { overflow: hidden; }
+.acc[open] .acc__panel, .acc__item.is-open .acc__panel { grid-template-rows: 1fr; }
+```
+
+Animating `grid-template-rows` from `0fr` to `1fr` opens to the content's real height without measuring
+it in JavaScript.
+
+### Menu or dialog
+
+```css
+.menu { transform-origin: top right; transition: opacity var(--t-ui) var(--ease-out), transform var(--t-ui) var(--ease-out); }
+.menu[hidden], .menu.is-closed { opacity: 0; transform: scale(0.97) translateY(-6px); pointer-events: none; }
+```
+
+Things open from where they were triggered (`transform-origin` at the trigger). Nothing enters from
+`scale(0)`; start at 0.95–0.98. A centred dialog is the one case that scales from its centre.
+
+## 7. Signature moves
+
+The direction sheet names one. Each of these was seen repeatedly on the studied gallery sites.
+
+| Move | What happens | Build with |
+| --- | --- | --- |
+| Masked headline | Lines rise from behind their baselines on load | Masked line reveal recipe |
+| Shutter image | Hero or showcase image opens from an edge, settling from 1.12 scale | Image shutter recipe |
+| Scaling wordmark | A giant wordmark shrinks or grows a few percent as the hero scrolls out | Scroll-linked recipe on `scale` |
+| Pinned story | A heading holds while its items scroll past | Sticky recipe |
+| Index with preview | Text rows; the hovered row shows its image | Index with preview, anchored to the row |
+| Curtain footer | The last section is revealed from under the page as you reach the end | `position: sticky; bottom: 0` footer under a main with a background and `z-index` |
+| Slow crossfade | Hero image crossfades through 3–4 photographs, 5–6s each | Stacked images, opacity keyframes, pause when the tab is hidden |
+| Edge-to-edge marquee | One line of very large type travels sideways, slowly | Duplicate the content, `translateX(-50%)` linear loop, pause on hover and under reduced motion |
+| Drag row | A horizontally scrollable row of large images with scroll snapping | `overflow-x: auto; scroll-snap-type: x mandatory`, no library |
+| Colour by chapter | Each chapter is its own full-bleed colour field, so the ground changes at section edges; a fixed header takes the ink of the chapter beneath | Section backgrounds in CSS; `base.js` sets `--header-ink` from `data-ink`. Never recolour the whole page from an observer |
+| Opening window | A type screen hands over to the big picture: a window in the middle of a held stage opens to full-bleed over about one screen | Opening window recipe |
+| Ink-fill statement | One statement fills from 45% to full ink as it rises through the screen | Ink fill recipe |
+| Sheet over a held picture | A full-bleed photograph holds for one screen; the next chapter slides up over it as an opaque sheet | A 100svh `position: sticky; top: 0` figure followed by a section with its own background and a higher `z-index`; no script |
+| Sideways gallery | A short row of pictures moves sideways while the vertical scroll holds the stage | Sideways gallery recipe |
+| Pushed line | One line of very large type is pushed sideways by the scroll, reading whole at the middle of its run | `animation-timeline: view()` on the line, `translateX` from 12% to -12%, linear; static where unsupported |
+| Rolling figures | The few figures that make the case roll up to their values once | Rolling figures recipe |
+| Carried picture | The picture clicked in a list travels into place as the next page's hero | Page to page recipe |
+
+Pick by subject. A portfolio wants the index with preview; a restaurant wants the slow crossfade; a
+product wants the shutter on its hero object. If the move says nothing about the subject, it is
+decoration and the page is better without it.
+
+Pick by subject, as before: the opening window for a product or a place with one great photograph; the
+sheet for chapters that each own a picture; the sideways gallery for a short set of rooms, kitchens or
+pieces; the pushed line for a brand whose claim is a word; rolling figures for a report, a fund or a
+practice that leads with numbers; the carried picture for a portfolio whose index and case pages are
+both built.
+
+## 8. Reduced motion and performance
+
+- `prefers-reduced-motion: reduce` means fewer and gentler, not none: keep opacity and colour changes,
+  drop travel, scale, parallax and autoplay. All recipes above are written inside
+  `no-preference` blocks so the reduced state is simply the finished state.
+- Animate `transform`, `opacity` and `clip-path`. Animating `width`, `height`, `top`, `left`, `margin`
+  or `padding` forces layout on every frame. `grid-template-rows` for accordions is the accepted
+  exception because it is short and rare.
+- Do not drive many children from one changing CSS variable on a parent; set the transform on the
+  element that moves.
+- `will-change` only on an element that is about to animate, removed afterwards.
+- Pause loops when off screen or when the tab is hidden.
+- No scroll hijacking and no custom cursor. They cost usability, which is 30% of an Awwwards score and
+  the line most winners score lowest on. Smoothing only through `Stage.smooth()`, which stays off for
+  touch and reduced motion.
+
+## 9. What gives generated motion away
+
+- The same fade-up on every block.
+- A dozen staggered entrances in the hero.
+- Hover lift or zoom on every card and image.
+- Bounce or elastic easing on interface elements.
+- Infinite loops that mean nothing: pulsing dots, floating shapes, shimmering text, rotating badges.
+- A reveal that never fires and leaves a blank band in the page. Run `inspect.mjs` after the motion
+  pass and look at every screenshot for missing content.
+
+### Seen in the latest Sites of the Day
+
+Seen in the study, with how often, and what the house does instead.
+
+- **Preloaders and counters (60 of 99; 26 with a counter).** Half the usable pages were unreadable
+  2.5 s after load, a third at 4.5 s; the preloaders sat mostly on pages that had already loaded, and
+  25 of the 29 that loaded in under 3 s still showed nothing readable at 4.5 s. Counters stalled,
+  outlasted the load or were tweens with nothing behind them. House: no preloader. If a scene must
+  load, the HTML first screen (headline, picture, action) is there at once and the scene fades in
+  behind it when ready.
+- **Gates (10 of 99): enter, sound, age or gesture before any content.** House: none. Sound is a
+  control on the page, off by default.
+- **Scroll hijacking (16 wheel-driven scenes, 9 of them endless, plus 14 single screens where the wheel
+  does nothing).** The visitor cannot tell where they are, how much is left or how to get out, and the
+  keyboard and screen readers get nothing. Usability 6.01 against 6.50 for pages that scroll. House:
+  native scroll; any scene is driven by scroll position on a sticky stage that ends, with a count.
+- **Smooth-scroll libraries (67 of 99).** They make the scrubbed scenes feel weighted, and they also
+  put a delay between the hand and the page; with a long ease the page keeps sliding after the wheel
+  stops.
+- **Custom cursors (28 of 99).** Followers, image trails, a lens that smears the headline it sits on,
+  labels that only exist on hover; 10 of the 28 have any reduced-motion rule. House: the system cursor;
+  labels are on the page.
+- **Scramble and typewriter text (11 and 5).** The headline unreadable for four seconds, body copy
+  garbled mid-scroll, actions held back until the typing ends. House: not used. Real words arrive whole.
+- **Long held runways.** Pages with pins average twice the length for fewer words per screen; 17 pages
+  are 20 screens or longer, some with whole screens that hold only a slow rotation. House: about one
+  screen per step, three per stage, every held screen carries a line of text.
+- **Content held at zero opacity.** Reveals that keep text invisible until the scroll settles, inactive
+  items dimmed to 10-15%, statements left half pale. House: reveals only below the fold, once, never
+  longer than 900 ms in view; dims no lower than 40%; fills start at 45%.
+- **Motion over words.** Marquees and drifting objects that cross statements, a sliding line that crops
+  its own words, blur left on text mid-move. House: nothing moves across text the visitor is reading;
+  a moving line must read whole at some point of its run.
+- **Overshoot and bounce (19 stylesheets).** House: still banned on interface elements.
+- **Endless loops with no off switch.** Grain, pulsing dots, equalisers, spinning badges, running with no
+  reduced-motion rule on most pages. House: loops pause off screen and stop under reduced motion.
+
+Where the study's work does something the house bans, the house version: hairline progress bars and
+tick rails on held stages become a plain count in the body face ("2 of 4"); zero-padded counters
+("01/08") become a plain count or nothing; crossfading gradient grounds become flat chapter colours with
+hard cuts; monospace HUD labels become small text in the text face.
+
+## 10. Rules for motion
+
+1. **First frame.** The headline, the sentence and the picture are in the HTML and painted on the first
+   frame. The load sequence starts without waiting for the load event and is settled by 1.2 s, with
+   four elements at most.
+2. **No preloader, no counter, no gate, no custom cursor, no wheel capture.** Smoothing only through
+   `Stage.smooth()` (Lenis at lerp 0.1-0.14, off for touch and reduced motion): weight, never a page
+   that keeps sliding after the hand stops.
+3. **Curves.** `--ease-out` for anything under 600ms; `--ease-expo` for reveals of 800ms or more;
+   `--ease-in-out` for wipes and things that travel; `--ease-exit` only for things leaving for good;
+   `linear` for scroll-linked motion and loops; plain `ease` for colour. No overshoot.
+4. **Durations.** Press 140ms; hover colour 180-200ms; hover that moves 300-400ms; menus 240ms; reveals
+   700-900ms; picture openings 1,100-1,300ms; exits 60-70% of the matching entrance.
+5. **Staggers.** Lines 80-110ms; list items 50-90ms; characters 20-40ms and only in a heading of one to
+   three words; four steps at most in any one sequence.
+6. **Reveals.** Fire once, when the element's top is 85-90% of the way down the viewport; rise 12-32px
+   or from a line mask; nothing in view stays hidden for more than 900ms; nothing above the fold waits
+   for scroll.
+7. **Scroll scenes are where the page is bold.** The big moves come from the scene library
+   (`references/scenes.md`): the direction sheet deals two or three per page, each built on
+   `assets/scenes/stage.js`, each held for one to four screens, each with a phone version and a
+   finished composition. Inside a scene the scene's own numbers apply (a picture may grow from a
+   window to the whole screen, type may cross the stage, a camera may fly through a field of
+   pictures); rules 8 and 10 still hold for the text a visitor is reading.
+8. **Outside the scenes, scroll-linked travel stays quiet.** Linear and locked to the scrollbar;
+   parallax under 8% of the element; scale between 0.94 and 1.15; built with scroll timelines inside
+   `@supports`, static without them. Other held stages: sticky, about one screen per step, three
+   screens at most, a line of text on every held screen.
+9. **One of each.** One signature move (a dealt scene can be it); one moving picture; one marquee at
+   most. A quiet section between two scenes, so each one lands.
+10. **Text stays readable.** Fills start at 45% ink; dims no lower than 40%; blur at most 8px and gone
+    once settled; nothing moves across text being read.
+11. **Colour by chapter** as hard cuts at section edges; the fixed header's ink follows in 300ms.
+12. **Horizontal motion.** The native drag row first; the pinned sideways gallery only for rows under
+    three screens long, with keyboard support.
+13. **Page to page.** View transitions, 480ms at most, off under reduced motion.
+14. **Reduced motion.** Every hidden state lives inside `prefers-reduced-motion: no-preference`; the
+    reduced page is the finished page; loops stop. Two in three award pages skip this, which is a
+    reason to do it, not a licence to skip it.