dreative 0.2.0 → 0.3.1

package/dist/shared/design.js

@@ -6,6 +6,7 @@ const SKILL_SIGNATURES = {
     interaction: /\b(micro[- ]?interaction|hover (effect|state)s?|cursor|magnetic|tilt|spotlight|glow|ripple|tactile|interactive|draggable)\b/i,
     immersive: /\b(immersive|award[- ]?(site|winning)|awwwards|spatial( (transition|nav(igation)?))?|scene[- ]?based|world|page[- ]transitions?|camera (move|travel|path)|preloader|scroll (journey|story|as travel)|explorable|experience site|epic\.net)\b/i,
     cinematic: /\b(cinematic|experiential|unseen\.co|fluid (sim(ulation)?|distortion)|gpgpu|drag[- ]to[- ]explore|click ?(&|and) ?hold|film grain|graded|velocity[- ]reactive|sound design|ambient (audio|sound))\b/i,
+    refined: /\b(clean (and )?(modern|professional)|modern clean|business (site|website|use)|corporate|professional look|premium (minimal|clean)|dtc|d2c|e[- ]?commerce|ecommerce|shopify|maswitzerland|lovvelavva|not (too )?(flashy|animated)|calm|understated)\b/i,
 };
 function detectSkills(texts) {
     const hay = texts.filter(Boolean).join(" \n ");

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "dreative",
-  "version": "0.2.0",
+  "version": "0.3.1",
   "description": "Layout-first visual editor skill for coding CLIs: extract your app's UI into editable wireframes, tweak with drag-drop + ref images, then the agent applies the diff back to your code.",
   "type": "module",
   "bin": {

package/skill/dreative/DESIGN.md

@@ -259,6 +259,61 @@ library (Phosphor/Radix/Tabler/HugeIcons; Lucide only on request), one strokeWid
 globally. Logo walls: real SVG marks (`https://cdn.simpleicons.org/<slug>`) or
 generated monograms — logos only, no category captions, below the hero.
 
+### Generated media (probe your environment, then use it)
+
+Before designing, check what media generation your environment actually offers —
+image-gen tools, video-gen tools, or a CLI that can produce them — and treat any
+capability found as a first-class design material, not a nice-to-have:
+
+- **Images**: generate hero photography, product/context shots, and textures at
+  the section's exact aspect ratio, prompted for the brand's physical subject
+  and the page's light temperature so they grade into the palette. Generate the
+  grain tile and any masks/mattes too instead of hand-rolling SVG.
+- **Video**: a generated 5–10s seamless loop is one of the biggest single UI
+  upgrades available — use it as: a hero background (muted, `autoplay loop
+  playsinline`, poster frame, `prefers-reduced-motion` swaps to the poster);
+  the budget "living surface" (a pre-rendered fluid/particle/atmosphere loop
+  instead of a GPGPU sim — cinematic.md's budget recipe); hover-preview loops
+  on work cards; or an image-sequence for scroll-scrubbed narratives (export
+  frames, scrub per motion.md).
+- **Integrate with motion, don't just embed** — a raw `<video>`/`<img>` dropped
+  in a section is not the treatment. Generated media enters the page THROUGH the
+  motion system; pick 1–2 treatments per page from this vocabulary (or invent in
+  its spirit), matched to the register:
+  - **Pixel/dither reveal**: video or image materializes from coarse blocks —
+    a shader that lerps sample resolution from ~24px mosaic to full res (or a
+    stepped `image-rendering: pixelated` downscale swap for the budget path),
+    driven by scroll progress or hover. Reads as digital-craft; dark-tech and
+    editorial registers.
+  - **Floating media**: images hover in depth with slow damped drift (±6-10px,
+    4-8s loops, each at a different phase), subtle parallax by depth layer, and
+    a soft contact shadow — the immersive "paper sheets in space" look without
+    WebGL. Cap at 3-5 floaters per view.
+  - **Mask-shaped video**: the loop plays inside display type (`background-clip:
+    text` / SVG mask on a 10vw+ headline), an arch/circle clip-path, or the
+    brand mark — the video becomes typography/identity rather than a rectangle.
+  - **Scroll-scrubbed sequence**: generated frames scrubbed by scroll for
+    assemble/morph/rotate narratives (motion.md's canvas product story).
+  - **Velocity-touched media**: scroll/drag velocity stretches, RGB-splits, or
+    ripples the media plane for a beat, settling with damped decay
+    (cinematic.md §2) — needs the WebGL media-plane sync.
+  - **Hover-woken loops**: stills that crossfade into their video loop on
+    hover/focus (240ms), pause + rewind-to-poster on leave; works as generated
+    "living thumbnails" on work/product cards.
+  - **Curtain/split reveal**: media enters behind a 2-4 panel wipe or an
+    expanding inset clip (`clip-path: inset(40% 30%) → inset(0)`), timed with
+    the section's line-mask type reveal so image and headline arrive as one
+    choreographed beat.
+  Whatever the treatment, honor the floors: reduced-motion gets the poster
+  frame, hover treatments have focus equivalents, and the effect is justified
+  in one sentence like any other motion (§6).
+- Discipline: same rationing as everything else — one video loop per view,
+  compress hard (H.264/AV1, ≤ 2–4MB per loop, no audio track), lazy-load below
+  the fold, and never let generated media replace REAL product screenshots or
+  the client's actual photography when those exist.
+- If no generation capability exists, say so and fall back down the §7 priority
+  list — never fake a video with a div animation.
+
 ## 8. Content and copy
 
 ≤ 8-word section headlines, ≤ 25-word subtext, one copy register per page, quotes
@@ -323,13 +378,78 @@ recomposition → full replacement only when unsalvageable. Honor existing
 accessibility wins and analytics hooks. Preserve prior element-level edits when
 `previousFile` is set.
 
+### The preservation contract (mandatory for ANY redesign of existing code)
+
+Redesigns fail catastrophically in one specific way: the agent rebuilds the page
+from its mental image of it and silently drops what it forgot — links, ids, form
+fields, whole features. Doctrine prose does not prevent this; only a mechanical
+before/after check does. The contract protects **content and function**, never
+structure — a restructure/reimagine still rebuilds markup, components, and
+routing as drastically as the rung demands.
+
+**Step 1 — Manifest (before editing anything).** Per page/view being redesigned,
+read the ORIGINAL source and write a manifest file (scratch or
+`.dreative/preserve/<page>.json`) enumerating:
+
+- **Links & routes**: every `href` / `to` / `router.push` / `navigate` target.
+- **Interactive elements**: every button/menu/toggle/input with its handler or
+  action (name + one line of what it does), every form with its field names,
+  types, validation, and submit target.
+- **Identity hooks**: every `id`, `data-*` attribute, `aria-*` label, analytics
+  hook, test id, and anchor target. These are external contracts — other code,
+  CSS, tests, and deep links point at them.
+- **Visible text**: every heading, label, button caption, tooltip, empty-state,
+  and legal string (verbatim).
+- **Data views & states**: every list/table/feed and what feeds it (API call,
+  prop, store), every conditional view — tabs, modals, auth states, wizard
+  steps, loading/empty/error branches.
+- **Public API**: the component's exports, props, and context it consumes —
+  callers must not break.
+
+**Step 2 — Redesign at the confirmed rung.** Every manifest entry must land
+somewhere in the new code. Restructuring means an entry may MOVE (a tab becomes
+a section, a sidebar item becomes a command-palette entry, a table becomes
+cards) — moving is encouraged; vanishing is a bug. If the new design has no room
+for something, relocate it (overflow menu, secondary view, settings page) —
+never delete a feature to make a layout work. Rewriting copy is allowed only at
+the reimagine rung or on explicit request, and each rewrite is logged as
+intentional.
+
+**Step 3 — Verify mechanically (not by vibes).** After writing the new code,
+walk the manifest item by item and grep the new source for each link target,
+handler/action, id/data-attribute, field name, visible string, and data view.
+Anything unmatched is either fixed on the spot or listed as an intentional
+change with a reason. Then report a **preservation ledger** to the user:
+"kept 14/14 links, 9/9 actions, 6/6 form fields, all 4 tab views; moved the
+sort dropdown into the toolbar; rewrote 2 headings (reimagine rung)". A
+redesign without a ledger is not done.
+
+**Step 4 — Render check.** Every data view and conditional state that rendered
+before must render after: open (or mentally walk) each tab/modal/state, not
+just the default view. A page that "looks designed" but shows an empty shell
+where a table used to be is a failed redesign regardless of how good the hero
+looks.
+
+### Motion is a deliverable, not a garnish
+
+When the user asked for motion/animation (explicitly, or by picking the motion /
+interaction / immersive / cinematic skills), shipped motion is verified like a
+feature: before declaring done, name the specific animations implemented (which
+element, which trigger, which duration/ease) and confirm they exist in the code
+and appear in the self-critique screenshots. "The design system implies motion"
+does not count; entrance choreography, scroll behavior, and micro-interactions
+must be literally present. If zero animations survive to the final code, the
+request was not fulfilled — go back and add them before reporting done.
+
 ### The transformation-depth ladder (offer it, then execute it)
 
 A redesign request has a depth, and styling is only the shallowest rung. When the
 user asks for meaningful change ("redesign", "make it modern", "make it look like
 <reference site>", "change it entirely") and the depth is ambiguous, present this
 ladder as explicit options (one short question, plain labels) and wait for the
-answer — do NOT silently default to the shallowest rung:
+answer — do NOT silently default to the shallowest rung. Bundle the specialist
+skill picker (SKILL.md) into the same question so the user answers depth and
+treatments in one pass:
 
 1. **Restyle** — tokens only: color, type, spacing, radius, shadows, motion
    polish. Markup and structure untouched. Right for "refresh the look".
@@ -385,3 +505,97 @@ the output is not done.
 14. Every block id from the layout appears as `data-dreative-id` (design-page only).
 15. Dark mode (when in scope): semantic-token swap, surface-lightness depth,
     desaturated accents, tested both modes.
+16. Redesign of existing code: preservation manifest written BEFORE editing;
+    every link, id, handler, form field, visible string, data view, and
+    conditional state verified present (or logged as intentional) in the new
+    code; preservation ledger reported. If motion skills were chosen, the
+    implemented animations are named and present in the code.
+
+## 13. Mobile & touch adaptation (how ambitious effects degrade)
+
+Ambitious designs die on phones first. Every effect gets an explicit mobile
+strategy DECIDED AT DESIGN TIME, not patched after. The rule of thumb: touch
+devices get a *different good design*, never a broken half-version of the
+desktop one.
+
+**Pointer effects** (cursor followers, magnetic pull, spotlight, tilt, hover
+reveals): gate ALL of them behind `@media (hover: hover) and (pointer: fine)`.
+On touch, whatever hover revealed must be visible by default or reachable by
+tap — never lost. Custom cursors simply don't exist on touch; don't ship their
+DOM/listeners there.
+
+**Pinned/scrubbed sections**: pinning is fragile on mobile (URL-bar resize
+fires viewport changes mid-pin; iOS momentum scroll skips scrub frames).
+Strategies in preference order: (1) keep the pin but shorten it (≤ 1.5
+viewports) and drive it with `position: sticky`, never JS pinning; (2) unpin —
+the same content as stacked sections with simple in-view reveals;
+(3) `ScrollTrigger.matchMedia()` / a `matchMedia` branch that swaps the whole
+choreography. Never let a desktop pin length ride on a phone.
+
+**Parallax & depth layers**: halve the differential on small screens (8-15% →
+4-7%) or drop to zero; small viewports make parallax read as jitter. Layered
+depth scenes collapse to 2 layers max.
+
+**Drag-to-explore / spatial navigation**: on touch, drag conflicts with native
+scroll. Either give the pannable surface a dedicated full-screen mode entered
+by tap (with a visible close), or replace it with a swipeable carousel /
+plain scrolling index. The conventional index route (immersive.md's escape
+hatch) becomes the PRIMARY route on mobile, not the fallback.
+
+**WebGL/canvas**: assume the phone GPU is 5-10× weaker and thermally throttled.
+Tier at boot (`devicePixelRatio` capped at 2, sim resolution halved,
+post-processing off) or swap the sim for a pre-rendered video loop / poster.
+`deviceMemory`/first-dropped-frames checks pick the tier; a visible "reduce
+effects" toggle when the brief allows.
+
+**Layout & ergonomics floor** (extends checklist §12.12): tap targets ≥ 44px
+with ≥ 8px gaps; primary actions in thumb reach (bottom half) on app-register
+mobile; `100dvh` not `100vh`; no horizontal body scroll at 320px; type scale
+clamps DOWN gracefully (hero ≥ 2rem, body stays ≥ 16px — iOS zooms inputs
+under 16px); sticky navs shrink rather than stack; test the three widths 320 /
+768 / 1280 mentally before responding.
+
+**Motion budget on mobile**: entrance choreography total ≤ 600ms (vs 900ms
+desktop), at most 1 scroll-driven sequence per page, marquees pause when
+off-screen. Battery is a design constraint: continuous rAF loops must idle
+when nothing animates.
+
+## 14. Typography sourcing (kill the Inter-everywhere default)
+
+The reflex-reject list (§3) says what NOT to reach for; this is where to reach
+instead. All fonts below are free (Google Fonts or Fontshare/ITF). The
+commercial fonts real award sites use — verified: unseen.co sets **Saol
+Display Light/Italic + Neue Montreal**; unseen's Blossom lab sets **SangBleu
+Serif + PP Neue Montreal**; capsul-in-pro sets **Messina Sans** — are the
+targets; the pairings below are their honest free stand-ins, not lookalikes of
+each other.
+
+Per aesthetic register (display / body):
+
+- **Cinematic & experimental** (unseen-like): light editorial serif with a
+  true italic for display — `Boska`, `Sentient`, or `Gelasio Light Italic` —
+  over a neutral grotesk body — `Switzer`, `Hanken Grotesk`. Mixing italic
+  serif words INTO a grotesk headline is the genre move (unseen does exactly
+  this). Mono microtype for HUD labels: `Fragment Mono` or `Martian Mono`.
+- **Minimal / premium product**: one grotesk family carrying everything —
+  `General Sans`, `Switzer`, or `Schibsted Grotesk` in 3-4 weights. The
+  Neue Montreal / Messina Sans stand-in tier. Tight display tracking
+  (−0.02 to −0.04em), no second family.
+- **Editorial / luxury**: `Zodiak` or `Besley` display over `Hanken Grotesk`
+  or `Switzer` body; small-caps eyebrows tracked +0.08em. (Reach here only
+  when §3's serif discipline is satisfied.)
+- **Bold / brutalist / campaign**: `Clash Display` or `Cabinet Grotesk` (black
+  weights) display over `Switzer`/`General Sans` body; `Bricolage Grotesque`
+  when some warmth is wanted.
+- **Playful / consumer** (lovvelavva-like DTC): `Cabinet Grotesk` or `Gambetta`
+  display, rounded moments via weight and spacing — NOT a rounded font —
+  over `Hanken Grotesk` body.
+- **Corporate trust / clean business**: `Switzer` or system stack; Inter is
+  legitimate here (§3). Differentiate through scale contrast and spacing,
+  not font novelty.
+
+Rules: still run §3's selection procedure — this list feeds step 3, it does
+not replace the brand-voice reasoning. Self-host via Fontshare/google-webfonts
+downloads (`font-display: swap`, preload the display weight only). Never ship
+more than 2 families / ~5 weight files. If the brief names a commercial font
+the project already licenses, use the real thing.

package/skill/dreative/SKILL.md

@@ -7,14 +7,25 @@ description: Frontend design skill + optional visual round-trip editor. Use for
 
 You (the coding agent) are the intelligence. Dreative has **two modes**:
 
-- **Mode A — Direct design (default).** The user asks you to design, redesign, restyle, animate, or build UI. Read `DESIGN.md` (and any specialist `skills/<name>.md` the work calls for — motion, 3d, interaction), then design/edit the real code directly. No server, no extraction, no wireframes. When you finish, add one closing note: *"Tip: run `dreative start` / say 'open dreative' if you want to tweak this visually — I'll extract the pages into an editable canvas."* That's the only place the editor should come up; never force the round-trip on a plain design request. **Depth first:** when the request implies more than a fresh coat of paint ("redesign", "change it entirely", "make it like <reference site>"), present DESIGN.md §11's transformation-depth ladder (restyle → re-layout → restructure → reimagine) as explicit options and let the user pick BEFORE designing; a confirmed restructure/reimagine means rebuilding markup, component trees, and routing for real — never just editing stylesheets on the old skeleton.
+- **Mode A — Direct design (default).** The user asks you to design, redesign, restyle, animate, or build UI. Read `DESIGN.md` (and any specialist `skills/<name>.md` the work calls for — motion, 3d, interaction), then design/edit the real code directly. No server, no extraction, no wireframes. When you finish, add one closing note: *"Tip: run `dreative start` / say 'open dreative' if you want to tweak this visually — I'll extract the pages into an editable canvas."* That's the only place the editor should come up; never force the round-trip on a plain design request. **Depth first:** when the request implies more than a fresh coat of paint ("redesign", "change it entirely", "make it like <reference site>"), present DESIGN.md §11's transformation-depth ladder (restyle → re-layout → restructure → reimagine) as explicit options and let the user pick BEFORE designing; a confirmed restructure/reimagine means rebuilding markup, component trees, and routing for real — never just editing stylesheets on the old skeleton. **Preservation contract (non-negotiable when redesigning existing code):** BEFORE editing any existing page, build the preservation manifest per DESIGN.md §11 (every link, id/data-attribute, handler, form field, visible string, data view, and conditional state — tabs, modals, auth branches); AFTER redesigning, mechanically verify each entry survives in the new code and report the preservation ledger. Restructure moves things; it never loses them. **Real motion engineering:** when motion/3d/immersive/cinematic treatments are chosen, deliver them with the proper libraries per the skill files (GSAP + ScrollTrigger, Lenis, `motion/react`, three.js/R3F) — actually add the dependencies to the project (`npm i gsap lenis` etc.), wire providers/render loops, and build the choreography. A static page with a few CSS transitions does not fulfill a motion request; the target is unseen.co-grade coordinated animation, the shipped result must clear the motion-dial inventory in `skills/motion.md` §9, and the self-critique pass must name the specific animations shipped. **Generated media:** probe your environment for image/video generation tools before designing and use them per DESIGN.md §7 — generated hero imagery, textures, and especially seamless video loops (hero backgrounds, pre-rendered living surfaces, hover previews) integrated into the motion system are among the highest-impact upgrades available. **Skill picker:** in the same pre-design question (use the agent's structured question tool, e.g. AskUserQuestion, multi-select), offer the specialist skills with a one-line plain-language description each so the user chooses the treatments they want — recommend the ones the request obviously implies and mark them "(Recommended)":
+  - **motion** — scroll animations, staggered entrances, parallax, kinetic type
+  - **interaction** — micro-interactions: hover states, magnetic buttons, cursor effects, tactile feedback
+  - **3d** — WebGL / three.js scenes, shader backgrounds, 3D product showcases
+  - **immersive** — award-site feel: the page becomes a spatial world, scroll-as-journey, page transitions
+  - **cinematic** — dark, shader-graded experiential look: fluid/particle surfaces, drag-to-explore, sound
+  - **refined** — premium clean business look: whitespace, photography, calm minimal motion (the professional pole)
+  Plus a "none — plain design doctrine only" option. Skip the question only when the user already named the treatments or the request is trivially a restyle; read each chosen `skills/<name>.md` before designing.
 - **Mode B — Visual round-trip (only when asked).** The user explicitly wants the visual editor ("open dreative", "let me edit visually"). Flow: **extract → baseline → serve requests → finish → apply**. Be token-frugal at every step: read only the files you need, never re-read the whole app, and keep JSON compact.
 
 Everything below §0 describes Mode B; the design doctrine paragraphs apply to both modes.
 
 **Design quality is a hard requirement.** `DESIGN.md` (same folder as this file) is the design doctrine. Read it ONCE before servicing the first `propose-skeletons`, `propose-variants`, `design-page`, or `edit-element` request, keep it in mind for all later ones, and run its pre-flight checklist (§12) before every respond. Requests may carry a `brief` object (aesthetic preset + vibe + dials set by the user in the UI); when present it is the user's explicit direction and overrides doctrine defaults. Before writing any `design-page` code, state (to yourself, one line) the register, the design read, and the signature element — if you cannot name all three, you are about to produce the generic default; stop and commit first.
 
-**Specialist skills.** The `skills/` folder next to this file holds expert playbooks for advanced work: `motion.md` (animation & scroll choreography), `3d.md` (WebGL/three.js/shaders), `interaction.md` (micro-interactions & effect craft), `immersive.md` (award-site worlds, spatial page transitions, scroll-as-journey), `cinematic.md` (dark shader-graded experiential interfaces: fluid/particle surfaces, drag-to-explore, click & hold, sound design — opt-in aesthetic). All are universal: they apply directly to any codebase in Mode A; the editor is never required. When a request's `plan.skills` lists names, read each listed `skills/<name>.md` ONCE before writing code (then keep it in mind, like DESIGN.md); when `plan.sections[].skills` tags a section, that section gets that treatment (e.g. "this hero has 3d"). If the brief/prompt clearly calls for one of these but the plan missed it, read it anyway. If a listed file isn't installed, proceed on DESIGN.md alone and note it to the user (`dreative install-skill` installs all).
+**Specialist skills.** The `skills/` folder next to this file holds expert playbooks for advanced work: `motion.md` (animation & scroll choreography), `3d.md` (WebGL/three.js/shaders), `interaction.md` (micro-interactions & effect craft), `immersive.md` (award-site worlds, spatial page transitions, scroll-as-journey), `cinematic.md` (dark shader-graded experiential interfaces: fluid/particle surfaces, drag-to-explore, click & hold, sound design — opt-in aesthetic), `refined.md` (premium clean business/DTC/e-commerce: restraint, photography, whitespace — the calm pole). All are universal: they apply directly to any codebase in Mode A; the editor is never required. When a request's `plan.skills` lists names, read each listed `skills/<name>.md` ONCE before writing code (then keep it in mind, like DESIGN.md); when `plan.sections[].skills` tags a section, that section gets that treatment (e.g. "this hero has 3d"). If the brief/prompt clearly calls for one of these but the plan missed it, read it anyway. If a listed file isn't installed, proceed on DESIGN.md alone and note it to the user (`dreative install-skill` installs all).
+
+**References the user gives you.** If the user attaches screenshots/images, read them with your image tools and treat them as the visual target (extract palette, type feel, layout family, motion cues from any described behavior). If the user names reference URLs, fetch them (browser tools if available, else web fetch of the HTML — look at real script/font/class evidence, not just the text) and distill what specifically to borrow before designing; never guess at a named reference from memory alone when you can look.
+
+**Self-critique pass (Mode A, required before declaring done).** Doctrine at write-time is weaker than judgment at review-time. After implementing a design: run the app and screenshot the result (browser tools / the project's dev server) at desktop AND ~390px mobile width, then grade the screenshots against this rubric — (1) would a stranger name the brand's register and audience from one glance? (2) does it pass DESIGN.md §2's slop tests *as rendered* (not as intended)? (3) is the signature element actually visible and working? (4) any overflow, contrast failure, unloaded font/image, or motion jank? (5) does mobile hold up per DESIGN.md §13? (6) preservation ledger clean — every link, action, form field, text string, and tab/modal/state from the manifest present or logged as intentional? (7) if motion treatments were chosen: are the animation libraries actually installed and imported, and can you name ≥3 specific shipped animations (element + trigger + duration) visible in the running page? Fix what fails and re-check once. If you cannot screenshot (no browser available), say so explicitly and walk the rendered DOM/CSS mentally against the same rubric — never silently skip the pass.
 
 ## 0. Setup
 

package/skill/dreative/skills/cinematic.md

@@ -150,6 +150,15 @@ All of 3d.md §7 and immersive.md §6, plus:
   Branding 5…); butterfly/petal particles drift through; HUD = wordmark
   top-left, Index/Projects/Contact top-right, globe "world" button bottom-center,
   © year bottom-right. Heavy uniform film grain glues all of it together.
+- **Single-flower lab page (verified on unseen.co/labs/blossom)**: the minimal
+  form of the genre — one WebGL subject (a blooming particle flower) on one
+  canvas, Lenis smooth scroll, headlines split into `overflow-hidden` line
+  masks (`splittext--line`) sliding up on arrival, and a two-family type system
+  (light serif with true italics — SangBleu-style — mixed into a neutral
+  grotesk). No drag, no sound, no HUD maximalism: one subject + line-mask type
+  + smooth scroll already reads as the genre. Start here; add §2 gestures only
+  if the brief earns them. (unseen.co's own home additionally runs a
+  `webgl-rain` particle layer over the scene — weather as grade texture.)
 - **Particle identity page**: brand mark as 50k particles that disperse on
   pointer force and reform; sections change the formation target; scroll
   velocity agitates; reduced-motion = the formed mark as a still.
@@ -161,6 +170,51 @@ All of 3d.md §7 and immersive.md §6, plus:
   on real DOM, click-and-hold in JS only. 70% of the mood, runs on anything —
   the right call below motion dial 8 or on content-heavy sites.
 
+## 6.5 The unseen.co replication blueprint (build order)
+
+When the brief is "make it like unseen.co" (or this genre at dial 9–10), build
+in THIS order — each layer works before the next starts. Do not attempt it as
+one monolithic rewrite; do not stop after step 2 and call it done.
+
+**Manifest:** `npm i gsap lenis three @react-three/fiber @react-three/drei
+@react-three/postprocessing` (React) or `gsap lenis three` (vanilla/OGL).
+Wire Lenis + ScrollTrigger per motion.md §8 first.
+
+**Layer stack (bottom → top):** persistent WebGL canvas (fixed, full-viewport)
+→ real DOM content (the accessible document) → HUD chrome (fixed corners) →
+grain overlay → custom cursor. Each is its own component/layer mounted in the
+root layout, outside the router swap point (immersive.md §1).
+
+1. **Smooth scroll + type system.** Lenis running, line-mask reveals on every
+   heading (motion.md §8), the two-family type mix (grotesk + true-italic
+   serif accents in one headline), numbered HUD chrome (`01 Index`…). The page
+   should already feel 60% of the genre with zero WebGL.
+2. **The living surface.** One canvas, one simulation family (§1). Start with
+   the highest effort/impact ratio: a shader plane with fbm + domain-warp fed
+   by palette uniforms and damped `uMouse` velocity (3d.md §4), or the
+   pre-rendered-video budget path (§6). Grain overlay goes in now — it glues
+   DOM and canvas into one graded image.
+3. **Scroll = camera.** Tall scroll container drives a camera dolly / scene
+   progress via damped scrub (immersive.md §4). Section copy floats in at
+   progress stops. This is the "one continuous shot" that separates the genre
+   from a parallax page.
+4. **Media through the surface.** Sync DOM image/work-card rects to texture
+   planes in the canvas (measure with `getBoundingClientRect` on resize +
+   scroll, don't guess) so hover/velocity distortion touches them; keep the
+   real DOM images underneath for a11y/fallback (§1). Velocity-reactive
+   stretch/RGB-split on scroll flicks, hard-clamped (§2).
+5. **Gestures + cursor.** Pick 2–3 from §2 (drag-to-explore, click & hold,
+   cursor-as-instrument), each labeled, each with a keyboard/boring
+   equivalent. Custom cursor: one dot, damped follow, contextual labels.
+6. **Doors and passages.** Preloader (real progress, choreographed reveal into
+   the idling scene — immersive.md §2), entry gate if sound ships (§3), route
+   transitions driven by the simulation (§4).
+7. **The floor.** Reduced-motion still frame, degrade ladder, contrast scrim,
+   mobile strategy (poster or halved sim), pause on hidden (§5).
+
+Ship checkpoint after every layer: run it, screenshot it, keep it working.
+A failed step 4 must not take down steps 1–3.
+
 ## 7. Changing an existing site into this
 
 Same rule as immersive.md §8: this register cannot be CSS'd onto a conventional

package/skill/dreative/skills/immersive.md

@@ -30,7 +30,10 @@ intentional. Decide up front:
   No metaphor = you'll produce disconnected effects. The metaphor decides what
   transitions, camera moves, and layout make sense — everything below serves it.
 - Immersive sites still need an **escape hatch**: visible menu with plain links,
-  working back button, deep-linkable routes. Lost visitors close tabs.
+  working back button, deep-linkable routes. Lost visitors close tabs. On touch
+  devices the escape hatch becomes the PRIMARY route (DESIGN.md §13): drag/
+  spatial navigation conflicts with native scroll, so mobile gets the index-list
+  world view or a swipe carousel, with the full world behind an explicit tap-in.
 
 ## 1. Architecture: one persistent stage
 

package/skill/dreative/skills/interaction.md

@@ -5,6 +5,8 @@ for hover effects, cursor work, tilt, glow, "make it feel alive/tactile/premium"
 It EXTENDS DESIGN.md §6/§9/§10 — every ban there still stands (no hover-scale on
 `<img>`, custom cursors only on explicit request, one marquee max). This skill is
 about the last 5% of feel: small, physical, consistent responses to input.
+DESIGN.md §13 governs the touch story: everything pointer-driven here is
+fine-pointer-only, and whatever hover reveals must be reachable by tap.
 If an effect needs different markup (wrappers, layers, split spans), follow
 DESIGN.md §11's transformation-depth ladder — offer the restructure and, once
 confirmed, change the structure rather than approximating the effect in CSS.

package/skill/dreative/skills/motion.md

@@ -5,6 +5,8 @@ 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 —
@@ -127,6 +129,14 @@ tell. Instead:
   ~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
@@ -135,3 +145,78 @@ tell. Instead:
   ("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
+self-critique pass checks against.

package/skill/dreative/skills/refined.md

@@ -0,0 +1,99 @@
+# Dreative Specialist Skill — Refined Clean Business
+
+Load this file when `plan.skills` includes `refined`, or the brief/prompt asks
+for a "clean modern business site", premium-but-calm marketing, DTC/e-commerce
+polish, "professional, not flashy", or names references like ch.maswitzerland.com
+or lovvelavva.com. This is the OPPOSITE pole from immersive/cinematic: quality
+expressed through restraint — spacing, photography, and type doing all the work,
+with motion barely above zero. Most real client work lands here; treat it as a
+craft discipline, not the absence of one.
+
+It EXTENDS DESIGN.md (everything applies; this file tightens the dials). It does
+NOT stack with `immersive`/`cinematic` — those are different registers. It pairs
+well with a light dose of `interaction` (press states, underline draws) and the
+first tier of `motion` (one hero sequence, 2-3 in-view reveals).
+
+## 0. The register: expensive silence
+
+What separates premium-clean from generic-clean is not any element — it's the
+ratios:
+
+- **Whitespace is the brand.** Section padding 96-160px desktop / 56-80px
+  mobile; content max-width 1200-1320px with WIDE outer gutters; one idea per
+  viewport. If a section feels empty, that's the look working — resist filling.
+- **Photography carries the emotion.** Real product/lifestyle imagery, art-
+  directed to one consistent grade (one light temperature, one background
+  family). Full-bleed image sections alternate with contained text sections —
+  the rhythm image / text / image IS the page structure. Never decorate around
+  weak imagery; demand or generate better imagery instead.
+- **Type does hierarchy, color stays out of the way.** Near-monochrome palette:
+  warm or cool neutral family + ONE accent used almost exclusively on the
+  primary CTA and links. Backgrounds shift between 2-3 tints of the neutral
+  (e.g. white / #f6f5f2 / #111) to separate sections without borders.
+- **Motion whispers.** Motion dial effectively ≤ 4: fade-rise entrances
+  (300-400ms, once), a sticky nav that gains a hairline+blur, underline draws,
+  press states. No parallax beyond 4%, no pinning, no canvas. A single
+  restrained signature (a slow ken-burns on the hero image, or a marquee of
+  press logos) is the ceiling.
+
+## 1. Page anatomy (marketing/DTC form)
+
+The proven skeleton — vary the composition per DESIGN.md §5, not the order
+logic:
+
+1. **Hero**: one full-width image or split layout; headline ≤ 8 words stating
+   the value in plain language; one CTA. No feature bullets in the hero.
+2. **Credibility strip**: press/client logos, real marks, grayscale or
+   single-tint (lovvelavva runs Forbes/Women's Health/Real Simple here —
+   this section converts and belongs high on DTC pages).
+3. **Value sections** (2-4): alternating image/text, each making ONE claim
+   with 1-2 sentences of support. Icons only if custom-drawn; three-generic-
+   icon-cards is the tell this register must avoid most.
+4. **Product/collection grid**: large images, generous gaps (24-32px), minimal
+   card chrome — image, name, price/one-liner; hover = image swap or subtle
+   zoom-crop INSIDE a fixed frame (no card growth).
+5. **Social proof**: 1-3 real testimonials with names/photos, editorial layout
+   (big quote type), never a 3-card testimonial row.
+6. **Closing CTA**: calm full-width section, one sentence, one button.
+7. **Footer**: structured, generous, quiet — the footer's polish is a trust
+   signal in this register; give it real columns, legal, newsletter.
+
+E-commerce specifics: sticky add-to-cart on product pages (mobile bottom bar),
+price always visible, shipping/returns reassurance near the CTA, cart as a
+slide-over drawer not a page.
+
+## 2. The discovery-grid variant (cosmos.so-like)
+
+For content/discovery products (galleries, moodboards, catalogs): near-zero
+chrome around a masonry/justified image grid; dark or paper-white surface;
+images at native aspect ratios (never uniform crops); hover = slight lift +
+metadata fade-in on top of the image; infinite scroll with a sentinel loader;
+the search/filter bar is the only persistent UI. The product IS the grid —
+navigation, branding, and controls stay almost invisible until needed.
+
+## 3. What "modern" means here (2024+, not 2016 flat)
+
+- Hairline borders (1px, 8-12% alpha) instead of shadows for structure; the
+  2-3 stacked tinted shadows (interaction.md §3) reserved for genuinely
+  floating elements (dropdowns, drawers).
+- Larger type than feels safe: body 17-18px on marketing pages, display
+  clamped 2.5-4.5rem, tight leading. Small timid type is the #1 dated tell.
+- Radius system: one value family — either near-square (2-4px, editorial/
+  luxury) or soft (12-16px, DTC/consumer) — never mixed.
+- Buttons: solid accent primary + quiet text-link secondary. Pill shape only
+  in the consumer/DTC variant. No outlined-button armies.
+- Real `<img>`/`<picture>` with proper aspect-ratio boxes; no CSS-drawn
+  product mockups; `object-fit: cover` with art-directed focal points.
+
+## 4. Guardrails
+
+- If you're adding an effect to make a section interesting, the section's
+  content or imagery is the problem — fix that instead.
+- No gradient meshes, no glassmorphism cards, no floating blob backgrounds,
+  no emoji in UI copy: all instantly cheapen this register.
+- Accessibility floor is easy here — don't squander it: AA contrast on the
+  tinted neutrals (test the #767676-gray-on-white trap), visible focus,
+  semantic landmarks.
+- Performance IS the aesthetic: LCP image preloaded, fonts ≤ 2 files,
+  zero animation libraries unless motion is actually used — a clean site
+  that loads instantly reads as more premium than any effect.