dreative 0.5.2 → 0.5.3

package/skill/dreative/skills/media.md

@@ -47,6 +47,11 @@ zoom treatments is the recurring failure this skill exists to prevent.
 
 - Edit assets before placement: crop to the blueprint, grade to the palette,
   compress, cut clean loops, create posters, and prepare masks/depth/plates.
+  For every key image, record whether it stays flat or needs a transparent
+  subject, foreground/middle/background planes, isolated objects, separate
+  shadow/glow, clean plate, SVG/CSS mask, tile/fragment map, depth/displacement
+  map, alternate crop/pose, generated keyframe, frame sequence, Canvas/WebGL
+  texture, or mobile-specific composition.
 - A treatment claiming to transform an image must consume that image's pixels
   and align to its bounds. A separate shader/noise rectangle floating over a
   static image is decoration, not treatment.
@@ -64,26 +69,26 @@ measurable success criteria, and runtime evidence.
 
 At expressive/award ambition, the proven default is one memorable point where
 the visitor moves from observing media to affecting, entering, transforming, or
-controlling its visual logic. For image-led award concepts with depth-capable
-assets, a depth dive is the default because it repeatedly produced a legible
-immersive peak.
+controlling its visual logic. For image-led concepts with depth-capable assets,
+a depth dive is one strong candidate—not an automatic default.
 
 Valid registered alternatives include decomposition/reassembly, temporal
 scrubbing, physical drag/inertia, refractive exploration, scene-responsive
 media, or a brand-specific transformation of equal perceptual impact. A curtain,
 fade, plain parallax, or rectangle movement alone is not equivalent.
 
-### Pixel coverage (`media.award.pixelCoverage`)
+### Key-asset treatment (`media.keyAssetTreatment`)
 
-The proven award default is pixel-class treatment on at least half of hero/key
-images, minimum three, using distinct mechanisms with quiet-class rests. This
-exists because dogfood builds shipped one strong hero while the remaining page
-stayed static.
+The proven expressive/award default is a deliberate preparation and motion role
+for every key image, with transformation concentrated where it shapes the story
+and quiet-class rests elsewhere. This exists because dogfood builds treated one
+hero while the remaining imagery stayed inert or repeated fade-and-zoom.
 
-A registered substitution is valid when one coherent media system visibly
-develops through at least three materially different roles or states—for
+There is no target percentage, minimum image count, or required effect family.
+One coherent media system may visibly develop through different roles—for
 example archive sheets becoming a draggable surface, then a tunnel, then a
-final mark. Evidence must make each state obvious.
+final mark—or distinct images may receive different concept-led treatments.
+Evidence must make the important state changes obvious.
 
 ### Perceivability
 
@@ -98,6 +103,14 @@ Prefer, in order: supplied/client assets; generated assets suited to the exact
 section; verified sourced media; clearly labeled placeholders. Generation is
 the start of production, not the finished asset.
 
+When video or separated source material is absent, first attempt the strongest
+feasible stylized treatment: depth separation, camera movement through layers,
+related generated keyframes, a bounded frame sequence, masks between crops or
+states, tiles/fragments, Canvas pixels/particles, shader displacement, blending,
+or use as a texture in a larger composition. Do not imply this is real video.
+Ask for missing source material only when the requested result cannot be
+approximated convincingly; never leave a placeholder for future advanced motion.
+
 For isolated props:
 
 - reserve a compositional berth that never covers text or controls;
@@ -119,9 +132,10 @@ are invalid implementations.
 
 ## 6. Planning and verification
 
-The blueprint records asset path/source, purpose, treatment class, driver,
-mobile behavior, fallback, and success criteria. At expressive/award, record the
-page's `creativeStrategy` as diversity or development.
+The blueprint records asset path/source, importance, preparation decision and
+derivatives, purpose, treatment class, driver, mobile behavior, fallback, and
+success criteria. At expressive/award, record the page's `creativeStrategy` and
+contextual `motionComplexityBudget`.
 
 Verification records:
 

package/skill/dreative/skills/mobile.md

@@ -61,33 +61,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 +123,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.