dreative 0.5.0 → 0.5.2

package/skill/dreative/skills/mobile.md

@@ -1,117 +1,128 @@
-# Dreative Specialist Skill — Mobile Excellence
-
-Load this file when `plan.skills` includes `mobile`, when the brief says
-mobile-first / most users are on phones / "make the mobile version great", or
-when an app-register product is primarily used on mobile. It EXTENDS DESIGN.md
-§13 (which governs how desktop effects DEGRADE); this file is about designing
-mobile as a first-class surface in its own right — clean, tidy, and still
-genuinely animated and premium, just calibrated to a 390px viewport, a thumb,
-and a battery. It STACKS with whatever treatments were chosen: motion/3d/
-immersive briefs get their mobile-native expression here, never a cropped
-desktop.
-
-## 0. The register: calm confidence, not shrunken desktop
-
-Mobile premium reads differently from desktop premium: less simultaneous
-motion, more focus per viewport, perfect ergonomics. The dial translation:
-desktop ambition N ≈ mobile ambition N−2. A desktop dial-8 site ships a
-dial-6 phone experience that feels JUST as crafted — one hero moment, silky
-scroll reveals, tactile presses — rather than a stuttering copy of the desktop
-choreography.
-
-- **One idea per viewport.** The phone viewport is a frame; compose each
-  screenful like one (hero = one headline + one visual + one CTA, nothing
-  else). If a desktop section held three things, the mobile version stacks
-  them as three clean beats or cuts to the strongest one.
-- **Tidy is the aesthetic.** Consistent gutters (20-24px), one column
-  discipline, generous vertical rhythm (56-80px between sections), no element
-  closer than 8px to another. Clutter reads twice as loud at 390px.
-- **Type recalibrated, not just clamped**: hero 2-3rem (2 lines max with the
-  REAL copy), body stays ≥16px, line-length falls out of the gutters — check
-  headlines don't orphan single words (`text-wrap: balance`).
-
-## 1. Layout patterns that are mobile-native
-
-- Asymmetric desktop grids collapse to intentional single-column ORDER
-  (decide what comes first — usually visual → headline → support → CTA), not
-  DOM-order accidents. Check the collapsed order reads as a story.
-- Horizontal scroll is mobile's extra axis: card shelves, galleries, and
-  chip rows as swipeable strips (`overflow-x-auto` + `scroll-snap-type: x
-  mandatory` on short strips, edge inset, visible peek of the next card —
-  the peek IS the affordance; no scrollbars, no arrows).
-- Sticky bottom bar for the primary action on conversion/product pages
-  (add-to-cart, main CTA): thumb-reach beats footer CTA; respect
-  `env(safe-area-inset-bottom)`.
-- Accordions/tabs for secondary density (specs, FAQs) instead of long walls;
-  tables become stacked cards or a scrollable container with sticky first
-  column — never squeezed 6-column tables.
-- Nav: the fullscreen menu is mobile's one theatrical moment — staggered
-  link entrance (line-mask, 60ms stagger), big touch-sized links (≥ 48px
-  rows), contact/socials in the footer of the overlay. Wired per ux.md §1
-  (focus trap, scroll lock, Esc/back closes).
-
-## 2. Motion on mobile (still premium, never crazy)
-
-The motion inventory scaled to touch (extends motion.md §9):
-
-- **Keep**: one composed hero entrance (≤ 600ms total), line-mask headline
-  reveals, in-view section reveals (2-3, `once: true`), press states on
-  EVERYTHING tappable (`active:scale-[0.98]` — on mobile this is the main
-  interaction feedback, since hover doesn't exist), marquees (pause
-  off-screen), counters, accordion springs.
-- **Translate**: parallax halves or dies (§13); pinned sequences → short
-  sticky sections (≤ 1.5 viewports) or plain stacked beats; hover-woken media
-  → in-view-woken (loop plays while ≥ 60% visible, pauses off-screen) or
-  tap-to-play; magnetic/cursor effects → gone entirely, replaced by press
-  feedback; drag-to-explore → swipe carousel or index list as PRIMARY
-  (DESIGN.md §13).
-- **Ban on mobile**: smooth-scroll libraries at full strength (Lenis: disable
-  or `syncTouch` carefully — fighting native momentum feels broken), more than
-  one scrubbed sequence, simultaneous animation of > 4 elements, any effect
-  that drops the scroll below 60fps on a mid-range phone.
-- Scroll reveals trigger earlier (`margin: "-10% 0px"` not -20%) — mobile
-  viewports are short and users scroll fast; late reveals = users see blank.
-
-## 3. 3D and heavy media on mobile
-
-- Default: replace live 3D with the poster or a pre-rendered loop (3d.md §7,
-  media.md). A generated video loop IS the mobile 3D strategy in most cases —
-  visually near-identical, thermally free.
-- If live 3D ships: dpr capped at 2, sim/particle counts halved, post-FX off,
-  `frameloop="demand"` where possible, pause on scroll-out and
-  `document.hidden`. Test the thermal story: 30s of idling must not heat the
-  phone (no full-rate rAF on static scenes).
-- Video: one playing loop per viewport, ≤ 2MB mobile variants
-  (`<source media>` or renditions), `playsinline` mandatory, poster always.
-- Images: serve mobile-sized renditions (`srcset/sizes`) — a 2400px hero on a
-  390px screen is a failed budget even when it looks fine.
-
-## 4. Ergonomics (the thumb is the cursor)
-
-- Tap targets ≥ 44px (48px preferred) with ≥ 8px gaps; small text links get
-  padded hit areas. Primary actions in the bottom half on app-register
-  screens; destructive actions OUT of easy thumb reach.
-- Respect the gesture map: horizontal edge swipes (back), bottom edge (home)
-  — don't hang custom gestures on them; carousels stop 16px short of edges.
-- Inputs: correct `type/inputmode/autocomplete` (ux.md §2), font-size ≥ 16px
-  (iOS zoom), the focused field scrolls above the keyboard, forms in one
-  column, no fixed elements covering inputs while the keyboard is up.
-- Safe areas: `viewport-fit=cover` + `env(safe-area-inset-*)` padding on
-  fixed bars/corners; nothing under the notch or home indicator.
-- No hover-dependent anything: whatever desktop hover revealed is visible by
-  default, in-view-triggered, or behind an explicit tap (DESIGN.md §13).
-
-## 5. Mobile verification (part of the runtime pass)
-
-At 390×844 (plus one small check at 320px):
-
-1. Walk every section: no horizontal body scroll, no clipped text/controls,
-   no element under fixed bars (DESIGN.md §15 at mobile widths).
-2. Run ux.md §7's audit at this width (menu, forms, taps, console).
-3. Scroll the full page fast: reveals keep up, nothing janks, sticky elements
-   behave through the URL-bar resize.
-4. Confirm the motion translation shipped (§2): press states everywhere, hero
-   ≤ 600ms, heavy effects swapped for their mobile strategy — name what runs
-   on mobile vs desktop in the final report.
-5. If media/3D shipped: posters load, loops play inline (not fullscreen),
-   pause off-screen.
+# Dreative Specialist Skill — Mobile Excellence
+
+## Contract
+
+Universal foundation: ux and baseline mobile apply to every web page.
+
+Follow `../references/SKILL_CONTRACT.md`. Dependency: `ux`. This skill is
+universal for web work. Deliver a section-by-section mobile translation, touch
+targets, responsive media/effect budgets, and approximately 390px verification.
+It is never satisfied by shrinking desktop. Done means navigation, content,
+forms, orientation/viewport behavior, performance, and reduced motion pass on a
+coarse pointer.
+
+Load this file when `plan.skills` includes `mobile`, when the brief says
+mobile-first / most users are on phones / "make the mobile version great", or
+when an app-register product is primarily used on mobile. It EXTENDS DESIGN.md
+§13 (which governs how desktop effects DEGRADE); this file is about designing
+mobile as a first-class surface in its own right — clean, tidy, and still
+genuinely animated and premium, just calibrated to a 390px viewport, a thumb,
+and a battery. It STACKS with whatever treatments were chosen: motion/3d/
+immersive briefs get their mobile-native expression here, never a cropped
+desktop.
+
+## 0. The register: calm confidence, not shrunken desktop
+
+Mobile premium reads differently from desktop premium: less simultaneous
+motion, more focus per viewport, perfect ergonomics. The dial translation:
+desktop ambition N ≈ mobile ambition N−2. A desktop dial-8 site ships a
+dial-6 phone experience that feels JUST as crafted — one hero moment, silky
+scroll reveals, tactile presses — rather than a stuttering copy of the desktop
+choreography.
+
+- **One idea per viewport.** The phone viewport is a frame; compose each
+  screenful like one (hero = one headline + one visual + one CTA, nothing
+  else). If a desktop section held three things, the mobile version stacks
+  them as three clean beats or cuts to the strongest one.
+- **Tidy is the aesthetic.** Consistent gutters (20-24px), one column
+  discipline, generous vertical rhythm (56-80px between sections), no element
+  closer than 8px to another. Clutter reads twice as loud at 390px.
+- **Type recalibrated, not just clamped**: hero 2-3rem (2 lines max with the
+  REAL copy), body stays ≥16px, line-length falls out of the gutters — check
+  headlines don't orphan single words (`text-wrap: balance`).
+
+## 1. Layout patterns that are mobile-native
+
+- Asymmetric desktop grids collapse to intentional single-column ORDER
+  (decide what comes first — usually visual → headline → support → CTA), not
+  DOM-order accidents. Check the collapsed order reads as a story.
+- Horizontal scroll is mobile's extra axis: card shelves, galleries, and
+  chip rows as swipeable strips (`overflow-x-auto` + `scroll-snap-type: x
+  mandatory` on short strips, edge inset, visible peek of the next card —
+  the peek IS the affordance; no scrollbars, no arrows).
+- Sticky bottom bar for the primary action on conversion/product pages
+  (add-to-cart, main CTA): thumb-reach beats footer CTA; respect
+  `env(safe-area-inset-bottom)`.
+- Accordions/tabs for secondary density (specs, FAQs) instead of long walls;
+  tables become stacked cards or a scrollable container with sticky first
+  column — never squeezed 6-column tables.
+- Nav: the fullscreen menu is mobile's one theatrical moment — staggered
+  link entrance (line-mask, 60ms stagger), big touch-sized links (≥ 48px
+  rows), contact/socials in the footer of the overlay. Wired per ux.md §1
+  (focus trap, scroll lock, Esc/back closes).
+
+## 2. Motion on mobile (still premium, never crazy)
+
+The motion inventory scaled to touch (extends motion.md §5):
+
+- **Keep**: one composed hero entrance (≤ 600ms total), line-mask headline
+  reveals, in-view section reveals (2-3, `once: true`), press states on
+  EVERYTHING tappable (`active:scale-[0.98]` — on mobile this is the main
+  interaction feedback, since hover doesn't exist), marquees (pause
+  off-screen), counters, accordion springs.
+- **Translate**: parallax halves or dies (§13); pinned sequences → short
+  sticky sections (≤ 1.5 viewports) or plain stacked beats; hover-woken media
+  → in-view-woken (loop plays while ≥ 60% visible, pauses off-screen) or
+  tap-to-play; magnetic/cursor effects → gone entirely, replaced by press
+  feedback; drag-to-explore → swipe carousel or index list as PRIMARY
+  (DESIGN.md §13).
+- **Ban on mobile**: smooth-scroll libraries at full strength (Lenis: disable
+  or `syncTouch` carefully — fighting native momentum feels broken), more than
+  one scrubbed sequence, simultaneous animation of > 4 elements, any effect
+  that drops the scroll below 60fps on a mid-range phone.
+- Scroll reveals trigger earlier (`margin: "-10% 0px"` not -20%) — mobile
+  viewports are short and users scroll fast; late reveals = users see blank.
+
+## 3. 3D and heavy media on mobile
+
+- Default: replace live 3D with the poster or a pre-rendered loop (3d.md §5,
+  media.md). A generated video loop IS the mobile 3D strategy in most cases —
+  visually near-identical, thermally free.
+- If live 3D ships: dpr capped at 2, sim/particle counts halved, post-FX off,
+  `frameloop="demand"` where possible, pause on scroll-out and
+  `document.hidden`. Test the thermal story: 30s of idling must not heat the
+  phone (no full-rate rAF on static scenes).
+- Video: one playing loop per viewport, ≤ 2MB mobile variants
+  (`<source media>` or renditions), `playsinline` mandatory, poster always.
+- Images: serve mobile-sized renditions (`srcset/sizes`) — a 2400px hero on a
+  390px screen is a failed budget even when it looks fine.
+
+## 4. Ergonomics (the thumb is the cursor)
+
+- Tap targets ≥ 44px (48px preferred) with ≥ 8px gaps; small text links get
+  padded hit areas. Primary actions in the bottom half on app-register
+  screens; destructive actions OUT of easy thumb reach.
+- Respect the gesture map: horizontal edge swipes (back), bottom edge (home)
+  — don't hang custom gestures on them; carousels stop 16px short of edges.
+- Inputs: correct `type/inputmode/autocomplete` (ux.md §2), font-size ≥ 16px
+  (iOS zoom), the focused field scrolls above the keyboard, forms in one
+  column, no fixed elements covering inputs while the keyboard is up.
+- Safe areas: `viewport-fit=cover` + `env(safe-area-inset-*)` padding on
+  fixed bars/corners; nothing under the notch or home indicator.
+- No hover-dependent anything: whatever desktop hover revealed is visible by
+  default, in-view-triggered, or behind an explicit tap (DESIGN.md §13).
+
+## 5. Mobile verification (part of the runtime pass)
+
+At 390×844 (plus one small check at 320px):
+
+1. Walk every section: no horizontal body scroll, no clipped text/controls,
+   no element under fixed bars (DESIGN.md §15 at mobile widths).
+2. Run ux.md §7's audit at this width (menu, forms, taps, console).
+3. Scroll the full page fast: reveals keep up, nothing janks, sticky elements
+   behave through the URL-bar resize.
+4. Confirm the motion translation shipped (§2): press states everywhere, hero
+   ≤ 600ms, heavy effects swapped for their mobile strategy — name what runs
+   on mobile vs desktop in the final report.
+5. If media/3D shipped: posters load, loops play inline (not fullscreen),
+   pause off-screen.

package/skill/dreative/skills/motion.md

@@ -1,229 +1,89 @@
-# Dreative Specialist Skill — Motion & Scroll Choreography
-
-Load this file when `plan.skills` includes `motion`, or the brief/prompt asks for
-animation, parallax, scroll storytelling, kinetic type, or "cinematic" feel.
-It EXTENDS DESIGN.md §6 (which still applies: 100/300/500 durations, ease-out
-exponential curves, reduced-motion fallbacks, no scroll listeners, no bounce).
-This file is about doing ambitious motion WELL, not about adding more of it.
-Every effect here needs a mobile strategy per DESIGN.md §13 (shorter pins,
-halved parallax, 600ms mobile entrance budget) — decide it at design time.
-If the requested motion needs structure the current markup can't express (pinned
-sections, split text, persistent stages), use DESIGN.md §11's transformation-depth
-ladder: offer restructure as an option and, once confirmed, rebuild the markup —
-don't fake choreography onto the old skeleton. When the page's imagery or video
-participates in the choreography (reveals, scrubbed sequences, distortion,
-hover-woken loops), read `media.md` — media is motion material there, with the
-DOM-tier and WebGL treatment vocabularies and the generation pipeline.
-On phones the whole inventory recalibrates: `mobile.md` §2 is the translation
-table (what keeps, what halves, what dies) — decide it at design time.
-
-## 0. Pick the tool by the job, not by habit
-
-- **CSS only** — hover/focus/press states, one-shot entrances, marquees, simple
-  scroll reveals via `animation-timeline: view()`. Zero JS cost; always first choice.
-- **Motion (`motion/react`, formerly Framer Motion)** — React apps: presence
-  (`AnimatePresence`), layout animation (`layout` prop = free FLIP), springs,
-  `whileInView`, gesture props. The default for React product+brand pages.
-- **GSAP + ScrollTrigger** — timeline choreography: multiple elements coordinated
-  over one scroll range, scrubbed sequences, pinned sections, kinetic type.
-  Use when a Motion version would need 4+ manually-synced `useScroll` hooks.
-- **Lenis** — smooth scroll wrapper for scroll-driven brand pages. Only on brand
-  register with motion dial ≥7; never in product UI. Sync ScrollTrigger with
-  `lenis.on('scroll', ScrollTrigger.update)`.
-
-One animation system per page. Motion AND GSAP on the same page = two spring
-vocabularies fighting; pick one and commit.
-
-## 1. Springs beat durations for anything interactive
-
-Duration+easing is for one-shot choreography (entrances, exits). Anything that
-tracks input or can be interrupted (drag, hover follow, toggles, layout shifts)
-uses springs — they redirect mid-flight without a visible restart.
-
-- Motion defaults: `{ type: "spring", stiffness: 300, damping: 30 }` = snappy UI;
-  `stiffness: 120, damping: 20` = soft brand movement. Overshoot (`damping < 15`)
-  only on playful briefs, and only on small elements — never on layout.
-- `visualDuration` (Motion ≥11.13) sets spring feel by time: easier to reason about.
-- Never spring opacity or color; springs are for transform. Crossfade those.
-
-## 2. Orchestration: one timeline, one story
-
-The scattered-reveals look (every section fades up independently) is the #1 motion
-tell. Instead:
-
-- **Hero entrance** = ONE composed sequence: parent `staggerChildren: 0.08`,
-  `delayChildren` after nav settles; elements enter in reading order; total ≤ 900ms.
-  Nothing else on the page gets entrance choreography.
-- **Below the fold**: at most 2-3 sections get `whileInView` reveals (`once: true`,
-  `margin: "-20% 0px"`), and they should differ (a clip reveal here, a stagger
-  there) — not the same fade-and-rise stamped on everything.
-- Stagger direction carries meaning: top-down for lists, center-out for grids
-  (`delay: Math.abs(i - mid) * 0.05`), left-right only for horizontal sequences.
-- Exits are faster than entrances (~75%) and simpler (fade + small offset; never
-  reverse the full entrance).
-
-## 3. Scroll choreography (motion dial ≥ 7)
-
-- **Scrub vs trigger**: scrub (`scrub: 0.5–1` or Motion `useScroll`+`useTransform`)
-  for progress-bound narrative (a product rotating, a number counting, a diagram
-  assembling). Triggered one-shots for everything else. Scrubbed text reveals are
-  worn out; scrub things that MOVE, trigger things that APPEAR.
-- **Pinning**: max ONE pinned sequence per page (`ScrollTrigger pin: true`, or
-  `position: sticky` + a tall parent — prefer sticky, it's free and un-janks).
-  Pin length ≤ 2.5 viewport heights; past that users feel trapped.
-- **Parallax**: subtle = 8-15% differential (`useTransform(scrollYProgress, [0,1],
-  ["-8%","8%"])`); apply to media/decoration, never body text. 2-3 layers max.
-- **CSS scroll-driven animations** (`animation-timeline: view(); animation-range:
-  entry 0% cover 40%`) handle simple reveals/parallax with zero JS — use for
-  progressive enhancement, gate with `@supports (animation-timeline: view())`.
-- Progress-linked values snap to keyframes users can feel: use eased ranges
-  (`useTransform` with cubic arrays), not raw linear mapping.
-- Never scroll-jack (hijacking wheel delta into slide-snapping). `scroll-snap` on
-  a horizontal strip is fine; taking over vertical page scroll is not.
-
-## 4. Kinetic type and text reveal
-
-- Split text with `SplitText` (GSAP, now free) or manual word-`<span>` wrapping;
-  animate **words or lines, not characters** for readability (chars only for short
-  display words ≤ 12 chars). Wrap split parents in `overflow-hidden` line masks and
-  slide lines up `y: "110%" → 0` — the line-mask reveal reads as premium; per-char
-  fade reads as 2021 template.
-- `aria-label` the original string on the split container; split spans get
-  `aria-hidden`. Re-splitting on resize: debounce, or use `SplitText`'s autoSplit.
-- Counters: animate with `useSpring`/gsap `snap: 1`, `tabular-nums` mandatory,
-  duration ≤ 1.2s, trigger once in view.
-
-## 5. Layout & presence
-
-- Motion `layout` prop for reflow (filtering grids, expanding cards, reordering) —
-  it's FLIP under the hood, transform-only. `layoutId` for shared-element morphs
-  (card → modal). Wrap conditional trees in `AnimatePresence mode="popLayout"`.
-- Accordion/height: `grid-template-rows: 0fr → 1fr` (CSS, cheap) or Motion
-  `height: "auto"` (it measures for you). Never `max-height: 9999px`.
-- **View Transitions API** for page-level transitions (`document.startViewTransition`,
-  or the framework wrapper e.g. Next `<ViewTransition>`): name persistent elements
-  with `view-transition-name` so they morph across routes. Feature-gate; fall back
-  to instant navigation, not a JS fade.
-
-## 6. Performance and accessibility (non-negotiable)
-
-- Transform/opacity only in hot paths; promote animating layers sparingly
-  (`will-change` set just-in-time, removed after). > 6 simultaneously-animating
-  elements = re-choreograph.
-- All scroll work driven by IntersectionObserver / ScrollTrigger / `useScroll`
-  (rAF-batched) — a raw `scroll` listener is a hard ban (DESIGN.md).
-- Test the tab hidden→visible case: loops must not accumulate; `whileInView` must
-  not re-fire (`once: true`).
-- `prefers-reduced-motion`: scrubbed narratives get a static end-state, entrances
-  become plain fades ≤ 200ms, marquees stop. In Motion use `useReducedMotion()`
-  and branch the variants — don't just shorten durations.
-- Content exists without JS: initial styles are the VISIBLE state; animation
-  libraries then hide/offset from JS before first paint (`gsap.set`, Motion
-  `initial`). An SSR'd page must never flash-then-hide.
-
-## 7. Recipes (copy the shape, restyle the skin)
-
-- **Hero sequence**: nav fades in (150ms) → headline lines mask-slide up, 80ms
-  stagger → subtext + CTA fade-rise together → hero media scales 1.04→1 with 6px
-  blur→0. Total 900ms, expo-out.
-- **Sticky product walkthrough**: `sticky` media column + scrolling step copy;
-  step index from IntersectionObserver on copy blocks; media crossfades/transforms
-  per step (springy, 300ms).
-- **Marquee**: duplicated track, `animation: scroll Xs linear infinite`,
-  `width: max-content`, pause on hover, speed from content width (px/s constant,
-  ~60-90px/s), masked edges with `mask-image: linear-gradient`.
-- **Scrub showcase**: sticky canvas/image sequence, `useScroll` on the wrapper,
-  map progress to frame index / rotation; preload frames; ≤ 2.5 viewports tall.
-- **Canvas product story** (capsul-in-pro.com's form): a single-product launch
-  page as one scroll-scrubbed narrative — the product renders on a full-page
-  canvas (image-sequence or WebGL) and scroll drives its assembly/rotation
-  while short copy beats fade in at fixed progress stops; the site ships as
-  one bundled app with explicit portrait/landscape variants (it gates on
-  orientation rather than half-working in both). Copy the shape: one subject,
-  one scrubbed timeline, copy anchored to progress ranges, per-orientation
-  choreography decided up front.
-- **Text on a path** (verified on epic.net): a manifesto paragraph flows along a
-  curved SVG path (`<textPath>` or per-word transforms sampled from a curve) and
-  relaxes toward straight lines as scroll progress advances — the curve
-  amplitude is the scrubbed value. One per site; body text elsewhere stays flat.
-- **Orbiting cursor label** (epic.net's video CTA): a circular text ring
-  ("PLAY VIDEO ⟲") slowly rotates around the pointer while it's over the media
-  region — SVG `<textPath>` on a circle, damped position follow, constant
-  rotation. Replaces the play button; fine pointers only, real button fallback.
-
-## 8. Setup blueprints — install and WIRE the stack (do not skip)
-
-Doctrine without dependencies ships a static page. When this skill is active,
-actually add the libraries to the project and wire them before designing
-sections. Pick the stack per §0, then:
-
-**GSAP + ScrollTrigger + Lenis (brand pages, the unseen.co-family stack):**
-
-```
-npm i gsap lenis
-```
-
-```js
-// one module, imported once at app root (e.g. src/lib/motion.ts)
-import gsap from "gsap";
-import { ScrollTrigger } from "gsap/ScrollTrigger";
-import Lenis from "lenis";
-
-gsap.registerPlugin(ScrollTrigger);
-export const lenis = new Lenis({ lerp: 0.1, smoothWheel: true });
-lenis.on("scroll", ScrollTrigger.update);
-gsap.ticker.add((t) => lenis.raf(t * 1000));
-gsap.ticker.lagSmoothing(0);
-```
-
-React: run that inside a `useEffect` in a `<SmoothScroll>` provider mounted in
-the root layout (destroy on unmount); Next.js needs `"use client"` on it.
-ONE Lenis instance, ONE gsap ticker — never per-component.
-
-**motion/react (React product+brand):** `npm i motion` — import from
-`"motion/react"`. Shared transition vocabulary in one exported object
-(`export const spring = { type: "spring", stiffness: 300, damping: 30 }`), used
-everywhere; `MotionConfig reducedMotion="user"` at the root.
-
-**Easing tokens (either stack):** commit page-wide —
-`expo.out` / `cubic-bezier(0.16, 1, 0.3, 1)` for entrances/reveals,
-`power2.inOut` for scrubbed/camera moves, springs for interactive. Define once
-(gsap defaults via `gsap.defaults({ ease: "expo.out" })` or CSS custom
-property `--ease-out-expo`), reference everywhere.
-
-**Line-mask headline reveal (the canonical premium move, copy this shape):**
-
-```jsx
-// each line: <div class="overflow-hidden"><div class="line">…</div></div>
-gsap.set(".line", { yPercent: 110 });
-gsap.to(".line", {
-  yPercent: 0, duration: 0.9, ease: "expo.out", stagger: 0.08,
-  scrollTrigger: { trigger: el, start: "top 80%", once: true },
-});
-```
-
-Use GSAP `SplitText` (free) with `type: "lines", mask: "lines"` instead of
-hand-wrapping when available; `aria-label` the original string per §4.
-
-## 9. Definition of done — the shipped-motion inventory
-
-A motion request is fulfilled only if the final code contains, verifiably
-(grep the imports, name the elements):
-
-- **Dial 4–6 (product/calm brand):** composed hero entrance timeline (§2), the
-  three global feel constants (interaction.md §0), 1–2 `whileInView`/triggered
-  section reveals, animated states (loading/success). No smooth scroll.
-- **Dial 7–8 (expressive brand):** all of the above PLUS Lenis smooth scroll,
-  line-mask headline reveals on hero + section headings, one scrubbed scroll
-  sequence (pin, parallax system, or progress-bound narrative), one signature
-  pointer effect (interaction.md §1), and a page/route transition treatment.
-- **Dial 9–10 (award-site):** all of the above PLUS the immersive.md or
-  cinematic.md architecture actually built (persistent stage/canvas, preloader
-  choreography, spatial or sim-driven route transitions, custom cursor).
-
-Before reporting done, list which inventory items shipped and where (element +
-trigger). "The page has hover states" does not clear dial 7+. If a listed item
-was deliberately cut, say so and why. This inventory is what the SKILL.md
-verification pass checks against — and its runtime stage must PROVE the items
-run (transforms changing, triggers firing, console clean), not just find them
-in the source.
+# Dreative Specialist Skill — Motion & Scroll Choreography
+
+## Contract
+
+Follow `../references/SKILL_CONTRACT.md`. Dependencies: `ux`, `mobile`. Deliver a
+named motion system, trigger/timing/easing inventory, cleanup strategy, mobile
+translation, reduced-motion fallback, and sampled runtime evidence.
+
+Load for animation, parallax, scroll stories, kinetic type, spatial transitions,
+or a motion dial that requires more than state feedback.
+
+## 0. Explore before recipes
+
+Understand the content sequence, brand physics, inputs, and still layout first.
+Record three original choreography concepts before reading
+`../recipes/motion-recipes.md`. A recipe supplies wiring—not the story.
+
+Name the motion signature in physical terms such as precise mechanical settle,
+soft editorial drift, elastic play, or heavy cinematic inertia. One system owns
+the page; independent default animations do not.
+
+## 1. Hard gates
+
+- Content is visible before enhancement and never depends on a JS callback to
+  appear (`content.visible`).
+- Reduced motion removes nonessential travel, pinning, auto-looping, and
+  vestibular effects while preserving state and hierarchy
+  (`motion.reducedMotion`).
+- Navigation, forms, keyboard, pointer targets, and focus remain functional
+  (`ux.functional`, `spatial.noOcclusion`).
+- Timelines/listeners/observers/render loops clean up; hidden tabs and route
+  transitions do not multiply work.
+- Heavy choreography has measured runtime and a concrete low-power/mobile/static
+  fallback (`effects.runtimeFallback`).
+
+## 2. Motion architecture
+
+Choose by job:
+
+- CSS transitions/animations for local states and simple decorative loops.
+- `motion/react` for component presence, layout, gestures, and springs.
+- GSAP + ScrollTrigger for coordinated timelines and pinned scroll chapters.
+- Lenis only when the concept needs a shared smooth-scroll clock.
+- R3F/three.js render state for scene motion; synchronize with the page clock.
+
+Use one provider/ticker/scroll owner. Define tokens for duration, spring, easing,
+distance, stagger, and reduced-motion behavior. Interactive motion uses springs
+or velocity-aware settling; narrative motion uses deliberate timelines.
+
+## 3. Evidence-backed creative structure
+
+At expressive/award, satisfy `motion.expressive.diversityOrDevelopment` through
+one plan path:
+
+- **Diversity:** at least four distinct mechanisms across three input drivers.
+  Reusing one mechanism more than twice is a warning that the system is shallow.
+- **Development:** one coherent signature mechanism develops through at least
+  three materially different roles/states, supported by two quieter secondary
+  mechanisms and at least two drivers.
+
+Development is not the same reveal with different distances. A line becoming
+navigation, data plot, and scene boundary qualifies; fade-up repeated across
+three sections does not.
+
+## 4. Choreography principles
+
+- Build a timeline for the whole journey: setup, anticipation, peak, rest,
+  transformation, resolution.
+- Entrances orient; they are not the design. Key media and signatures respond to
+  input or develop state.
+- Scroll links progress to meaning. Clamp/damp velocity and avoid raw scroll
+  listeners or layout work in every frame.
+- Kinetic type remains readable DOM text; splits restore cleanly and preserve
+  accessibility.
+- Presence/exits preserve focus, scroll position, and input continuity.
+- Mobile shortens travel, removes long pins, lowers parallax, and preserves the
+  concept through a calmer translation rather than a cropped desktop effect.
+
+## 5. Planning and verification
+
+For each moment record element, trigger/driver, purpose, state range, duration or
+spring, mobile translation, reduced-motion behavior, fallback, and evidence.
+
+Runtime proof includes changing transforms/uniforms/state at two timestamps,
+trigger positions, tested scroll-back, hidden-tab recovery, cleanup after route
+changes, mobile viewport, reduced motion, console count, and frame-time sampling
+for heavy work. A static screenshot cannot prove choreography.
+
+Recipe reference: `../recipes/motion-recipes.md`, after concept exploration only.