dreative 0.5.2 → 0.5.4

package/skill/dreative/skills/mobile.md

@@ -6,7 +6,8 @@ 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.
+targets, responsive media/effect budgets, a page-level mobile blueprint, and
+390×844 plus 320px 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.
@@ -34,6 +35,10 @@ choreography.
   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.
+- **Task pages are task-first.** The first viewport exposes what the user needs
+  to act, the current state, and the primary action. Supporting explanation
+  follows; promotional or decorative panels never block the task without a
+  page-specific reason recorded in the blueprint.
 - **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.
@@ -61,33 +66,34 @@ choreography.
   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)
+## 2. Motion on mobile (shorter, lighter, still authored)
 
 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
+- **Keep**: the experience's defining transformation in a shorter form when it
+  remains readable, plus line-mask headline reveals, selected in-view moments,
+  and 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
+  measured sticky sections, clip-path/layer handoffs, 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.
+- **Avoid on mobile**: smooth-scroll libraries at full strength (Lenis: disable
+  or `syncTouch` carefully — fighting native momentum feels broken), competing
+  scrubbed sequences, dense simultaneous animation, and any effect that misses
+  the measured frame-time target 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.
+- Choose from a simplified live scene, a pre-rendered loop, layered DOM/SVG, or
+  an intentional poster composition according to concept and measured device
+  cost (3d.md §5, media.md). Do not simply erase the defining moment.
 - 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
@@ -122,7 +128,7 @@ At 390×844 (plus one small check at 320px):
 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
+   timing stays readable and responsive, heavy effects use 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

@@ -35,6 +35,18 @@ the page; independent default animations do not.
 
 ## 2. Motion architecture
 
+Classify motion before selecting a library:
+
+- **Decorative:** reveals, hover response, ambient loops, and slight parallax.
+- **Structural:** motion controls hierarchy, pacing, pinning, section state, or
+  the handoff between compositions.
+- **Transformational:** imagery, type, or objects fragment, combine,
+  reconstruct, change form, or become the next scene.
+
+At expressive/award, actively test key moments for structural or
+transformational value. Do not call opacity/translate/scale choreography
+structural merely because it is scroll-driven.
+
 Choose by job:
 
 - CSS transitions/animations for local states and simple decorative loops.
@@ -49,14 +61,13 @@ 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:
+At expressive/award, satisfy `motion.expressive.architecture` through one plan
+path without mechanism quotas:
 
-- **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.
+- **Diversity:** use the concept-related mechanisms and drivers needed to shape
+  the journey, joined by one motion language.
+- **Development:** evolve one coherent signature mechanism through materially
+  different roles/states, with quieter supporting motion.
 
 Development is not the same reveal with different distances. A line becoming
 navigation, data plot, and scene boundary qualifies; fade-up repeated across
@@ -66,6 +77,10 @@ three sections does not.
 
 - Build a timeline for the whole journey: setup, anticipation, peak, rest,
   transformation, resolution.
+- Concentrate technical and visual complexity in a small number of hero moments;
+  keep reading sections calm so those moments land.
+- Prefer composition handoffs: let a mask, object, layer, grid, or typographic
+  structure from one scene become material for the next.
 - 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
@@ -78,12 +93,34 @@ three sections does not.
 
 ## 5. Planning and verification
 
+Before implementation, complete the section-level motion treatment in the plan:
+static composition, start/end state, changes, pinned elements, handoff, purpose,
+mechanism, mobile translation, and reduced-motion state. Choose the simplest
+mechanism that produces the intended transformation convincingly; CSS is valid,
+and WebGL/3D is never required as a creativity badge.
+
+Run the anti-default review before approval: identify whether imagery only
+fades/scales/slides, sections reveal independently, the page lacks a composition
+handoff, motion merely introduces rather than changes state, the system could fit
+an unrelated brand, or nothing is memorable. Revise expressive/award plans that
+remain generic.
+
+Weak treatment: “hero scales in, heading fades up, cards stagger, sections
+reveal.” Strong treatment: “the isolated subject stays pinned while its depth
+layers separate; the headline compresses into a mask; that mask tiles the scene
+into the next section; mobile uses a short clip-path handoff.” Copy neither
+literally—match that level of state change and continuity to the brief.
+
 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.
+for heavy work. Visually inspect initial, early, mid-transition, final, handoff,
+mobile, and reduced-motion states; add pinned midpoint/exit when relevant. Check
+readability, continuity, collisions, empty frames, timing, concept expression,
+and usability. Expressive/award work requires at least one refinement after this
+inspection. A static screenshot cannot prove choreography.
 
 Recipe reference: `../recipes/motion-recipes.md`, after concept exploration only.