dreative 0.5.0 → 0.5.2

package/skill/dreative/skills/cinematic.md

@@ -1,232 +1,56 @@
-# Dreative Specialist Skill — Cinematic WebGL & Experiential Interfaces
-
-Load this file when `plan.skills` includes `cinematic`, or the brief/prompt asks
-for a dark cinematic shader-driven look, "sites like unseen.co", drag-to-explore
-navigation, click-and-hold interactions, fluid/particle distortion effects,
-sound design, or "experimental / experiential" interfaces. This is the genre's
-high-fashion end: fewer elements, extreme polish, the interface itself behaves
-like a graded film.
-
-It STACKS with `immersive.md` (world architecture — read it when routes/scenes
-are involved) and `3d.md` (shader craft). DESIGN.md still governs type and
-accessibility floors. It is universal — apply directly to any codebase; the
-Dreative editor is optional. This is an OPT-IN aesthetic: propose it only when
-the brief supports it; it is never the default answer to "make it nicer".
-
-## 0. The register: cinematic restraint
-
-Where immersive.md builds a place, this genre builds a MOOD. Its rules:
-
-- **Atmosphere is the canvas.** Commit to ONE graded atmosphere and grade
-  everything into it. Dark cinematic (near-black #0a0a0c-ish base, tinted, never
-  pure #000, stage-light falloff on one subject) is the common form — but pale
-  worlds are equally genre-valid: UNSEEN's actual site is a blush-pink flooded
-  dream-room with prismatic dispersion on its arches and soft daylight. What
-  makes it cinematic is not darkness but unity of light: one light temperature,
-  one falloff logic, one grain, everything (DOM included) living inside it.
-- **Radical reduction.** Each view holds ONE visual subject + a few lines of
-  type + numbered chrome. If a section needs three columns of content, it does
-  not belong in this register — move it to a conventional subpage.
-- **Everything is graded.** One post-processing/color pass unifies DOM and
-  canvas: film grain (3-6%), subtle vignette, bloom only on emissive accents,
-  optional chromatic aberration at transition peaks ONLY (constant CA = broken
-  monitor). The grade is one system — define it once, apply globally.
-- **Typography as credits.** Restrained scale (this genre whispers where
-  immersive shouts): refined grotesk or editorial serif, generous tracking on
-  small mono/small-caps labels, and the signature **numbered index** chrome —
-  `01 Index`, `02 Projects`, coordinates, timestamps — laid out like a film
-  slate. Big type appears sparingly and is often distorted by the shader layer
-  as it passes (see §2).
-
-## 1. The living surface (the genre's engine)
-
-The background is not decoration — it's a continuously-running simulation the
-whole interface sits on. One fullscreen canvas, one of these families:
-
-- **Fluid distortion** (the UNSEEN signature): GPGPU fluid sim or cheap
-  velocity-buffer approximation; pointer movement injects velocity; the field
-  distorts whatever sits under it — images, WebGL text copies of the headlines,
-  the scene itself. Intensity tuned so idle = near-still, movement = silky wake.
-- **Particle field**: 10k-100k GPU particles (FBO/GPGPU, see 3d.md §5) forming
-  a subject — a logo, a face, a landscape — that disperses and reforms on
-  interaction or route change. Curl noise for drift; mouse as attractor/repulsor.
-- **Volumetric/raymarched fog + light**: a raymarched or layered-noise volume
-  with one light source tracking the pointer or the active section.
-
-Rules: ONE simulation per site, palette fed from the page tokens, `uTime` slow
-(3d.md §4), sim pauses off-screen and on `document.hidden`, and pointer force is
-damped — the surface reacts like water, not like a cursor-following gimmick.
-Images/media on the page render INTO the canvas layer (texture planes synced to
-DOM rects — measure, don't guess) so the distortion can touch them; keep real
-DOM (invisible or fallback-visible) underneath for a11y/SEO/selection — the
-full media-plane pattern, video textures, and the wired fallback rule live in
-`media.md` §3. When a video-generation tool exists, the pre-rendered-loop
-budget path (§6) becomes first-class: generate the sim-like loop instead of
-building the GPGPU sim (media.md §1).
-
-## 2. Interaction vocabulary
-
-The genre replaces "click around a document" with deliberate, weighty gestures.
-Pick 2-3, execute perfectly:
-
-- **Drag to explore**: the primary surface pans on drag (inertia + rubber-band
-  edges, damped) across a spatial arrangement of works. Cursor label says
-  "Drag"; a minimap/index shows position. Wheel/trackpad maps to the same pan.
-  ALWAYS pair with a conventional index list (the numbered menu) — drag is the
-  scenic route, never the only route.
-- **Click & hold**: press-and-hold to enter a project / reveal a layer — a ring
-  or bar fills during the hold (400-700ms), releasing early cancels with a
-  spring-back. Label it ("Hold"). Keyboard equivalent: Enter activates
-  immediately — the hold is texture for pointer users, not a gate.
-- **Velocity-reactive media**: scroll/drag velocity feeds shader intensity —
-  images stretch, RGB channels split for a beat, grain agitates — settling with
-  damped decay. Read velocity from Lenis/`useScroll`; clamp hard: peak effect at
-  a fast flick should still be legible.
-- **Cursor as instrument**: single dot that morphs into contextual labels
-  ("Drag", "Hold", "Play", index numbers). In this genre the cursor may also
-  cast light — the surface (§1) brightens around it. One cursor identity,
-  fine-pointer devices only.
-- **Idle cinematography**: after ~10s idle the scene performs — slow camera
-  drift, sim breathing, a highlight reel. Any input snaps back (damped, 300ms).
-
-## 3. Sound design (optional layer, genre-native)
-
-The only web genre where audio is expected — still strictly opt-in:
-
-- Entry gate offers the choice up front ("Enter with sound / without") or an
-  always-visible mute toggle in the HUD (animated equalizer bars = the
-  convention). NEVER autoplay audio; browsers block it and users hate it.
-- One ambient loop (-30dB-ish, long crossfaded loop) + micro-SFX on primary
-  interactions only (hover tick, hold-complete, transition whoosh). Web Audio
-  API with a master gain; fade in/out over 400ms on toggle, duck during video.
-- Persist the choice (localStorage), default OFF on return visits unless
-  enabled; respect `prefers-reduced-motion` as a proxy for "calm mode" — start
-  muted there.
-
-## 4. Composition & transitions in this register
-
-- Views compose like film frames: subject off-center (rule-of-thirds), type in
-  the negative space, numbered label anchoring a corner. Symmetric centered
-  compositions only for title-card moments.
-- Route transitions are CUTS and DISSOLVES driven by the surface: the sim
-  swallows the view (fluid floods, particles disperse) → beat at full abstraction
-  (~200ms, the surface alone) → next view condenses out of it. The simulation is
-  the transition medium — no white flashes, no generic slide-wipes on top of it.
-- Section changes within a view: crossfade + parallax nudge, ≤ 500ms; let the
-  surface do the drama, keep DOM motion quiet (this genre's DOM moves LESS than
-  a normal site's — contrast is what reads as expensive).
-- The loader (immersive.md §2 rules apply) is minimal here: percentage numeral +
-  the sim warming up behind it. The sim visibly "becoming ready" IS the loader.
-
-## 5. Performance & accessibility (non-negotiable, hardest here)
-
-All of 3d.md §7 and immersive.md §6, plus:
-
-- GPGPU sims are the most expensive thing on the web: cap sim resolution
-  (fluid ≤ 256², particles per device tier), halve on mobile or replace the sim
-  with a pre-rendered video loop of it — visually near-identical, free to play.
-- Measure, don't assume: if frame time > 20ms for a sustained burst, degrade
-  live (drop sim resolution → drop post-FX → static grade). Build the ladder in.
-- `prefers-reduced-motion`: sim frozen to one still frame (it's the grade's
-  texture now), velocity effects off, hold-to-enter becomes click, idle
-  cinematography off. The site must remain fully usable and still look graded.
-- Contrast discipline: dark register makes AA failures easy — body text ≥ 4.5:1
-  against the DARKEST point of the animated surface behind it (test the worst
-  frame, not the average); put text over a stabilized scrim when the sim is busy.
-- Every drag/hold/spatial interaction has a boring equivalent: real links in the
-  numbered index, tab order through works, Enter to open. Screen readers get the
-  DOM document; the canvas is `role="img"` with a scene description.
-- Battery/data respect: pause everything on `visibilitychange`, honor
-  `prefers-reduced-data` by skipping the sim entirely (grade + posters only).
-
-## 6. Recipes
-
-- **UNSEEN-style studio home** (verified on the live site): letter-cycling
-  loader (the wordmark's letters flip one at a time over the studio's one-line
-  bio) → entry gate ("Enter" pill + quieter "ENTER WITHOUT AUDIO" underneath) →
-  a pastel 3D room half-flooded with reflective water; drag pans the view and
-  reveals chrome/reflective 3D display type STANDING IN the scene (italic serif
-  + grotesk mixed in one headline), mirrored in the water. Scrolling dollies the
-  camera forward through the room into a bright gallery hall — hero and works
-  index are one continuous camera journey, with the route updating mid-flight.
-  Work cards render as sheets of paper floating in the space, subtly warped,
-  with chromatic fringing at their edges; filter pills carry counts (All 20 /
-  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.
-- **Cinematic case study**: dark editorial page, media rendered through the
-  distortion layer, velocity-reactive stretch on scroll, chapter numerals,
-  one raymarched-light hero; DOM otherwise quiet and typographic.
-- **Budget version (no GPGPU)**: pre-rendered fluid/particle video loops as
-  background + `mix-blend-mode` type, CSS grain, velocity-reactive transforms
-  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, READ THE CONSOLE,
-click through it (ux.md §7's audit on the touched surface), keep it working.
-A failed step 4 must not take down steps 1–3 — each layer's fallback is the
-previous layer, and the runtime gate (DESIGN.md §12.18) runs on the final
-stack, not just the last layer added.
-
-## 7. Changing an existing site into this
-
-Same rule as immersive.md §8: this register cannot be CSS'd onto a conventional
-page — it needs the canvas surface, the reduced composition, and usually a
-content edit (views hold less). Use DESIGN.md §11's transformation-depth ladder;
-this genre is almost always rung 3 (Restructure) or 4 (Reimagine). Offer the
-ladder, get the user's pick, then rebuild for real — and offer the budget recipe
-(§6) as the rung-2 alternative for users who want the mood without the rebuild.
+# Dreative Specialist Skill — Cinematic WebGL & Experiential Interfaces
+
+## Contract
+
+Follow `../references/SKILL_CONTRACT.md`. Dependencies: `motion`, `interaction`,
+`media`, `ux`, `mobile`; add `3d` only for real spatial rendering. Deliver a
+coherent living-surface system, gesture/keyboard parity, consent-aware audio,
+budgets, calm fallback, and runtime evidence.
+
+Load for a film-like experiential register—not merely a dark palette.
+
+## 0. Explore before recipes
+
+Record three original concepts based on brand material, subject, assets, and
+visitor role before opening `../recipes/cinematic-recipes.md`. Decide what the
+surface represents and how it develops; never begin with “add particles.”
+
+## 1. Hard gates
+
+- The experience communicates and works without WebGL, sound, fine pointer, or
+  full motion.
+- Audio is user-initiated, visible, controllable, and never required.
+- Gesture interactions have keyboard/touch/conventional equivalents.
+- Content stays readable; effect layers never intercept or occlude controls.
+- Runtime fallbacks, reduced motion, mobile, loading, frame time, and asset
+  budgets are tested with structured proof.
+
+## 2. Cinematic composition
+
+Use a limited visual cast: one living surface/material system, a disciplined type
+system, one graded palette/light direction, and a small gesture vocabulary.
+Transitions belong to that same material logic. Film grain, refraction, velocity,
+or particles are means—not the concept.
+
+At expressive/award use diversity or development. Cinematic coherence often
+chooses development: the living surface becomes atmosphere, media boundary, and
+navigation instrument across different chapters, supported by quieter type and
+input feedback.
+
+## 3. Interaction and sound
+
+Choose only gestures that expose meaning: drag to explore, click/hold to focus,
+cursor as an instrument, velocity response, or chapter scrub. Label unfamiliar
+gestures and provide boring equivalents. Sound supports interaction/state with
+restrained gain and respects mute/visibility/route lifecycle.
+
+## 4. Planning and verification
+
+Plan surface meaning, states, drivers, media identity, transition logic, gestures,
+audio consent, mobile/reduced-motion form, loading/failure fallback, and budgets.
+
+Verify live surface change, media identity/alignment, gesture alternatives,
+sound consent/mute, full journey and reverse, mobile, reduced motion, console,
+frame-time/FPS, asset weight, hidden-tab pause, and context-loss fallback.
+
+Recipe reference: `../recipes/cinematic-recipes.md`, after exploration only.

package/skill/dreative/skills/experimental.md

@@ -0,0 +1,111 @@
+# Dreative Specialist Skill — Experimental / Creative-Mindset Dial
+
+## Contract
+
+Follow `../references/SKILL_CONTRACT.md`. Dependencies: `motion`, `interaction`,
+`media`, `ux`, `mobile`. Explore one named provocation per major section, then
+select only the strongest two or three to ship. Do not load as a synonym for
+visual quality. Done means the selected peaks are visibly implemented while the
+remaining sections prepare, support, contrast, transform, or rest; navigation,
+reading, touch, and reduced motion remain clear.
+
+Load this file when `plan.skills` includes `experimental`, or the brief asks for
+"crazy", "bizarre", "never seen before", "way more creative", "wow factor", or
+stacks award-site ambition with 3d/immersive/cinematic and clearly wants the
+result to go further than a competent, safe execution of those genres.
+
+This file is not a genre on its own — it STACKS with `motion.md`, `3d.md`,
+`immersive.md`, `cinematic.md`, `media.md`. It is a mindset correction for a
+specific, recurring failure: builds that hit every named treatment competently
+but still read as *effects placed on a static page* rather than a page that
+*behaves* differently as you move through it. The gap between those two is
+where the top-tier reference sites (PLAN.md's calibration list) actually live.
+
+## 0. See the whole scroll, not one frame at a time
+
+The most common miss: designing each section as a still composition and then
+bolting particles/parallax onto it, instead of asking what the SAME asset does
+across its entire scroll range.
+
+- Before writing a section, sketch its motion as a **timeline, not a pose**:
+  what does this look like at scroll 0%, 40%, 100%? An image that is static at
+  every one of those points and only has particles drifting in front of it has
+  not been treated — the particles are decoration, not behavior.
+- Prefer techniques where the ASSET ITSELF changes: a photo that dissolves into
+  its constituent color field and reassembles as a different crop; a product
+  render that the camera physically orbits as you scroll, revealing a side you
+  hadn't seen; a shader that reads scroll velocity and warps/refracts the media
+  plane harder the faster you scroll, settling to true crispness only at rest.
+- Treat interaction inputs (scroll, cursor, drag, time-idle) as free stagehands,
+  not one-off triggers: the same input should be able to drive multiple things
+  at once (camera position AND grain intensity AND type kerning) so the page
+  feels like one system reacting, not independent effects that happen to share
+  a page.
+
+## 1. Texture and material, not smooth plain geometry
+
+A 3D object with default lighting and a flat color material reads as a stock
+asset even when it renders and animates cleanly. Before shipping any custom 3D
+element:
+
+- Give it a **material identity**: roughness/metalness maps, a normal map or
+  procedural bump (even a cheap noise-driven `onBeforeCompile`/shader tweak),
+  fresnel/rim light, or a physically-motivated finish (brushed metal, wet
+  ceramic, frosted glass, matte paper) — pick ONE that fits the brand and
+  commit, rather than leaving `MeshStandardMaterial` defaults.
+- Light it like a product shot, not a demo scene: a key light + rim light +
+  soft fill, an environment map (even a cheap generated HDRI/gradient cubemap)
+  for reflections — flat ambient-only lighting is what makes geometry look
+  "plain" even when the model is good.
+- If the model IS meant to look clean/minimal (a deliberate register choice),
+  say so explicitly in the plan — plainness should be a decision, not the
+  default outcome of skipping material work.
+
+## 2. Dimension shifts as a real technique, not just camera dolly
+
+"Zoom when I scroll" and "go different 3D dimensions and views" point at scroll
+or interaction driving genuine viewpoint change, beyond the immersive.md scroll-
+as-travel camera path:
+
+- **Depth dive**: scroll or click zooms PAST the current plane into a nested
+  scene (a product card's texture becomes the next section's background at
+  full zoom — one continuous zoom, not a cut).
+- **Orbit reveal**: dragging or scroll-linked rotation swings the camera around
+  a subject to a genuinely different vantage (front → 3/4 → side), timed to
+  reveal new content at each stop rather than just spinning for spectacle.
+- **World swap**: a full scene transition where the "rules" change (palette
+  inverts, gravity/particle behavior flips, camera projection shifts from
+  perspective to a flattened orthographic beat) — used sparingly, at most once
+  or twice per page, as a structural beat (e.g. between "problem" and
+  "solution" sections), not as constant novelty.
+- Every dimension shift still obeys immersive.md §2's rule: something must
+  persist across the cut (the subject, the camera, a color) or it reads as a
+  jarring reload, not a journey.
+
+## 3. Explore broadly, ship a hierarchy
+
+Competent execution of the named treatments is the floor, not the ceiling.
+When the user has opted into `experimental`:
+
+- For each blueprint row, after picking its treatment(s), ask "what is the
+  ONE non-obvious version of this?" and write it down even if it's risky — a
+  gallery that disperses into a particle field and reforms as the next item
+  instead of a slide/fade; a form where each correct field entry visibly
+  feeds a growing 3D structure; a footer that only fully renders once you've
+  scrolled back UP to summon it. Not every idea survives the fallback
+  requirement (PLAN.md §2), but `experimentalPlan.candidates` should contain at
+  least one per major section, not zero.
+- Select only the strongest two or three candidates to ship. Every unselected
+  section receives an explicit supporting role: prepare a peak, rest after it,
+  contrast it, carry connective tissue, or transform its residue. Experimental
+  means hierarchy and surprise, not every section competing as a technical demo.
+- Reference sites should be read as **systems to extract principles from**,
+  not screenshots to imitate: note what makes their asset behave (a shader
+  uniform driven by scroll velocity, a shared depth-of-field across the whole
+  scene, type that occludes/is-occluded by 3D subjects) and reapply the
+  PRINCIPLE to Northwind/the actual brand — copying their literal palette or
+  layout without the underlying system produces exactly the "images still
+  static, objects still plain" outcome this file exists to prevent.
+- Every ambitious idea still needs 3d.md §5 / motion.md §5 performance
+  budgets and a concrete fallback (PLAN.md §2) — experimental means bolder
+  ideas, not exemption from the runtime verification gate.