`** — declares pixel size, fps, total duration. 2. **`[data-background]`** — full-bleed animated backgrounds (canvas). 3. **`[data-clip]`** — any element that appears, moves, or animates. ```html

你好，世界

第一帧

``` The renderer (`render.mjs`) launches headless Chromium, sets `window.__mvmRenderMode = true` to suppress the wall-clock preview loop, then for every frame `i` calls `window.__mvm.seek(i / fps)` and screenshots the page. Frames are encoded to H.264 MP4 via FFmpeg. ## Composition Attributes Reference ### Stage (`#stage`) | Attribute | Purpose | Example | |---|---|---| | `data-width` / `data-height` | Canvas pixel size | `1920` / `1080` | | `data-fps` | Frames per second | `30` (recommended) | | `data-duration` | Total seconds | `30` | | `data-background` | Page-level bg color | `#0a0a0f` | ### Clip (`[data-clip]`) Governs **visibility window** and outer **in/out animation** of any element. | Attribute | Purpose | |---|---| | `data-start` | When the clip first appears (seconds) | | `data-duration` | How long the clip stays visible | | `data-animation` (or `data-animation-in`) | In animation: `fadeIn` `fadeInUp` `fadeInDown` `fadeInLeft` `fadeInRight` `slideUp` `slideDown` `zoomIn` `zoomOut` `pop` `blurIn` `blurOut` `rotateIn` `swing3D` `floatIn` | | `data-animation-out` | Out animation (any of the above ending in `Out` or any name from the list) | | `data-in-duration` / `data-out-duration` | Animation duration (default 0.6s) | | `data-easing` / `data-easing-out` | Standard: `linear` `easeIn` `easeOut` `easeInOut` `easeOutCubic` `easeInOutCubic` `easeOutQuart` `easeInOutQuart` `easeOutQuint` `easeOutExpo` `easeInOutExpo` `easeOutBack` `easeOutElastic` `easeOutBounce`. **Spring physics**: `springGentle` `springSoft` `springSnap` `springSmooth` `springBouncy` `springWobbly` `springStiff` | | `data-hide-mode` | **`visibility` (default — keeps the layout slot so siblings DON'T jump when a later element fades in)** or `display` (legacy — removes from layout). Set `display` only when you actually want surrounding content to collapse into the empty space. | | `data-scrim` | Auto-inject a backdrop layer behind the element so text stays readable on busy shader/particle backgrounds. Values: `card` (translucent dark pill + blur), `blur` (semi-dark + backdrop-filter blur), `radial` (radial darkness fade), `auto` (radial + auto drop-shadow). Tune with `data-scrim-padding`, `data-scrim-opacity`, `data-scrim-radius`, `data-scrim-color`, `data-scrim-blur`. | **Available outer-animation presets** (for `data-animation` / `data-animation-in` / `data-animation-out`): | Group | Names | |---|---| | **Fade / slide** | `fadeIn` `fadeOut` `fadeInUp` `fadeInDown` `fadeInLeft` `fadeInRight` `slideUp` `slideDown` | | **Scale / pop** | `zoomIn` `zoomOut` `pop` `kenBurnsIn` `irisIn` | | **Blur** | `blurIn` `blurOut` `slideBlurIn` | | **Rotate / 3D** | `rotateIn` `swing3D` `flipInX` `flipInY` `cubeIn` `skewIn` | | **Mask reveal** | `unmaskUp` `unmaskDown` `unmaskLeft` `unmaskRight` (clip-path inset – feels cinematic) | | **Physics-ish** | `floatIn` `magneticIn` `dropIn` `glitchIn` | > **Variety tip:** when you have N parallel elements (cards, list items, layers), give each one a *different* preset from a different group — that's exactly what turns a "generic" composition into a polished one. ### Text animations (`[data-text-animation]`) Use **on the element whose text you want to animate**. Combine with `data-clip` so the element has a defined visibility window. The text component reads `data-anim-duration` for its own animation length, falling back to `data-duration`. | `data-text-animation` | Effect | Key attributes | |---|---|---| | `split-text` | Per-char staggered fade+slide | `data-stagger` `data-char-duration` `data-travel` `data-split-mode` (`char`/`word`) | | `blur-text` | Per-char blur → focus | `data-stagger` `data-char-duration` | | `shiny-text` | Metallic sheen sweep | `data-speed` | | `gradient-text` | Animated rainbow sweep | `data-colors` `data-speed` | | `glitch-text` | RGB split + jitter | `data-intensity` | | `decrypted-text` | Hacker-style decode | `data-anim-duration` | | `type-text` | Typewriter + blinking cursor | `data-cps` (chars/second) | | `rotating-text` | Cycle through phrases | `data-phrases` (pipe-separated) `data-each` | | `count-up` | Animated number counter — set `data-odometer="true"` for **mechanical-flip rendering** (each digit is a separate column that gently rotates as it carries) | `data-from` `data-to` `data-anim-duration` `data-decimals` `data-prefix` `data-suffix` `data-separator` `data-odometer` | | `shuffle-text` | Char shuffle reveal | `data-anim-duration` | | `mask-text` | Whole-text clip-path reveal — wipe direction set by `data-mask-from` (`left` / `right` / `top` / `bottom` / `center`). **Note:** does NOT compose well with `.text-raycast` / `.text-aurora` / `.text-fire` gradient classes that use `-webkit-text-fill-color: transparent` (Chromium hides the gradient under a clip-path). Use on solid-color text or pair with `data-scrim`. | `data-mask-from` `data-anim-duration` `data-easing` | | `wave-text` | Per-char vertical sine wave that travels across the text — characters ride the crest into place. | `data-stagger` `data-char-duration` `data-amplitude` `data-wave` `data-easing` | | `scramble-text` | Symbol/digit scramble that resolves left→right (more aggressive than `shuffle-text` — uses `!@#$%&*+={}[]\\|01101001`). Great for technical labels. | `data-anim-duration` | ### Backgrounds (`[data-background]`) Absolute-positioned full-stage backgrounds — both Canvas2D and WebGL. **Canvas backgrounds** (lighter, no GPU): | `data-background` | Effect | Key attributes | |---|---|---| | `aurora` | Lightful gradient orbs | `data-colors` | | `particles` | Drifting particle field | `data-count` `data-color` `data-size` `data-seed` | | `starfield` | Galaxy / parallax stars | `data-count` `data-speed` `data-seed` `data-bg` | | `threads` | Sinusoidal flowing lines | `data-lines` `data-color` `data-bg` | | `waves` | Layered ocean waves | `data-colors` `data-bg` | | `dot-grid` | Pulsing radial dot grid | `data-gap` `data-color` `data-bg` | | `hyperspeed` | Radial speed-line warp | `data-count` `data-colors` `data-seed` | | `letter-glitch` | Matrix-style char cells | `data-cell` `data-colors` `data-bg` | | `noise` | Film-grain overlay | `data-strength` | | `magnet-lines` | Vector-field grid where short line segments align toward animated magnetic poles | `data-colors` `data-poles` `data-gap` `data-length` `data-bg` | | `ribbons` | Multi-layer parametric flowing ribbons with glow | `data-colors` `data-count` `data-bg` | **WebGL fragment-shader backgrounds** (richer, real shaders — require `shaders.js`): | `data-background` | Effect | Common attributes | |---|---|---| | `liquid-ether` | Domain-warped fbm fluid, iridescent rim | `data-colors` (4 stops) `data-intensity` `data-scale` | | `iridescence` | Curved rainbow interference bands | `data-colors` `data-intensity` `data-scale` `data-seed` | | `prismatic-burst` | Center-radiating volumetric light + chromatic split | `data-colors` `data-intensity` | | `lightning` | Procedural lightning bolts with flicker + glow | `data-colors` `data-intensity` `data-seed` | | `plasma` | Classic organic plasma turbulence | `data-colors` `data-intensity` `data-scale` | | `beams` | Crossing rotating light beams + hot spot | `data-colors` `data-intensity` | | `meta-balls` | N orbiting isosurface meta-balls with gradient fill + chromatic edge highlight | `data-colors` `data-intensity` `data-scale` `data-seed` | All shader backgrounds accept `data-colors` as 4 hex stops (e.g. `"#FF6363,#FF8B5E,#FFD400,#0a0a16"`). ### Scene transitions (`[data-transition]`) Place a `

` **anywhere inside `#stage`** — it auto-mounts a fullscreen overlay canvas that paints the transition over everything from `start` to `start+duration`. | `data-transition` | Effect | Extra attributes | |---|---|---| | `wipe-up` / `wipe-down` / `wipe-left` / `wipe-right` | Solid bar sweeps across | `data-color` `data-easing` | | `wipe` (with `data-dir="diag"`) | Diagonal sweep | as above | | `iris` / `circle-reveal` | Circular mask shrinks then expands | `data-color` `data-easing` | | `pixel-dissolve` | Deterministic tile reveal + hide | `data-color` `data-tile` | | `shape` | Twin-shape morph with circle erase | `data-color` `data-easing` | | `flash` | Quick full-screen flash | `data-color` (white default) | | `glitch` | RGB-split + horizontal panel tear | — | The full transition window is `duration`; half-way through (`p=0.5`) the overlay is fully opaque so the underlying scenes can swap invisibly. ### Effects (`[data-fx]`) | `data-fx` | Effect | Key attributes | |---|---|---| | `clock` | Analog clock with hands | `data-speed` (time multiplier) | ### Element-level effects (`[data-effect]`) Decorations that attach to **an existing element** and animate around it. Inspired by react-bits' ElectricBorder / StarBorder / ImageTrail. | `data-effect` | Effect | Key attributes | |---|---|---| | `electric-border` | RGB-split, noise-perturbed electric arcs flowing around the element's rounded perimeter | `data-color` `data-color2` `data-color3` `data-intensity` `data-speed` `data-padding` `data-border-radius` | | `star-border` | N glowing 4-point stars orbit the perimeter with comet trails | `data-color` `data-count` `data-tail` `data-speed` `data-size` `data-padding` | | `image-trail` | While the element is *entering*, draws N ghost copies that lag the in-animation progress, fading out behind it. Reads the element's `data-animation` to reuse its in-style. | `data-trail-count` `data-trail-stride` `data-trail-decay` | ```html

CHOSEN

FLOW

``` ## GSAP integration — every plugin, deterministic, bridged The runtime now bundles **GSAP 3.15** plus every plugin Webflow makes free (see lineage). All of them animate on the same `mvm-seek` clock as the native runtime — two renders are still byte-identical. ### What you get | Capability | Plugin | data-* attribute | Programmatic | |---|---|---|---| | Tween any CSS / transform property with arbitrary ease | core | `data-gsap-from` / `data-gsap-to` | `__mvmGsap.timeline({at}).to(...)` | | Per-line / -word / -char text reveals with masks | SplitText | `data-gsap-split="lines,words,chars"` | `SplitText.create(...)` then tween | | Stroke draw on an SVG path | DrawSVGPlugin | `data-draw-svg="0% 100%"` | `gsap.fromTo(path, {drawSVG:'0 0'}, {drawSVG:'100%'})` | | Morph one SVG path into another | MorphSVGPlugin | `data-morph-to="#otherPath"` | `gsap.to(p, {morphSVG:'#x'})` | | Animate any element along an SVG path | MotionPathPlugin | `data-motion-path="#pathId"` | `gsap.to(el, {motionPath:{path}})` | | Velocity / angle / gravity physics | Physics2DPlugin | `data-physics2d='{"velocity":300,"angle":-80,"gravity":600}'` | `gsap.to(el, {physics2D: {...}})` | | Per-property velocity / acceleration | PhysicsPropsPlugin | (programmatic only) | `gsap.to(el, {physicsProps: {x:{velocity}}})` | | FLIP layout transitions between scenes | Flip | `class="mvm-flip" data-flip-id="x" data-flip-at="3.0"` | `Flip.getState() / Flip.from()` | | Decoder scramble | ScrambleTextPlugin | `data-scramble='{"text":"DONE"}'` | `gsap.to(el, {scrambleText: {...}})` | | Type / replace text content over time | TextPlugin | (programmatic only) | `gsap.to(el, {text: "new"})` | | Custom cubic / SVG easing curves | CustomEase | `data-easing="mvm."` | `__mvmGsap.registerCustomEase(name, def)` | | Wiggle / oscillating ease | CustomWiggle | `data-easing="mywiggle"` | `CustomWiggle.create("mywiggle", {...})` | | Real bounce ease | CustomBounce | `data-easing="mybounce"` | `CustomBounce.create("mybounce", {...})` | | SlowMo / RoughEase / ExpoScaleEase | EasePack | `data-easing="slow(0.7,0.7)"` etc. | string in any tween's `ease` | **Deliberately omitted** (because they need user interaction that doesn't exist in offline render): - `ScrollTrigger` / `ScrollSmoother` — there is no scroll - `Draggable` / `Observer` / `InertiaPlugin` — there is no pointer If you reference these, `scripts/lint.mjs` raises `W006`. Replace them with a timeline that you anchor onto `gsap.globalTimeline` — the bridge will seek into it on every `mvm-seek`. ### How the bridge works (the determinism contract) 1. The bridge calls `gsap.ticker.lagSmoothing(0)` and removes `gsap.updateRoot` from `gsap.ticker` so GSAP's RAF clock never advances anything on its own in render mode. 2. On every `mvm-seek` event the bridge calls `gsap.updateRoot(seekTime)` — the official "drive me from a custom clock" API. Every tween, child timeline, and plugin advances to that exact absolute second. ([gsap.com/docs](https://gsap.com/docs/v3/GSAP/gsap.updateRoot())) 3. The bridge proxies `window.__mvm.easing` so any GSAP ease string (e.g. `"power2.inOut"`, `"back.out(1.7)"`, `"elastic.out(1, 0.3)"`) silently resolves through `gsap.parseEase(...)` and is then available to the *native* `data-animation` system too. So you can write `data-animation="fadeInUp" data-easing="back.out(1.6)"` and the runtime now understands it. 4. Anything you author with `data-gsap-from` / `data-gsap-to` / etc. becomes a `gsap.fromTo(...)` tween anchored at the host element's `data-start + data-gsap-delay`. The clip's lifecycle still owns visibility — GSAP only handles the tween itself. > **Author hard-rules:** > - Don't wrap `gsap.to()` / `gsap.from()` in `setTimeout` / > `setInterval` / `requestAnimationFrame`. Wall-clock timers > bypass `gsap.updateRoot` and produce different output every > render. `lint.mjs W007` flags this. > - Don't call `gsap.utils.random()` — it uses `Math.random` under > the hood. Wrap with `__mvm.random("seed")` or pass a > pre-computed deterministic value. `lint.mjs W008` flags this. > - Build the timeline at parse-time; don't try to construct new > tweens inside an `mvm-seek` handler (that fires every frame > and would create thousands of tweens). ### Declarative recipes — copy these #### 1) Drop-in tween (works on any element with `data-clip`) ```html

Hello GSAP

``` #### 2) Pro SplitText (line / word / char reveal with mask) ```html

动画引擎

``` `data-gsap-mask="lines"` clips each line to its own bounding box — characters that translate up appear "lifted" out of an invisible slot. Combine with a serif font for an editorial feel. #### 3) DrawSVG — animate a stroke ```html ``` The path MUST have a visible `stroke` (CSS or attribute). Multiple paths can share `data-clip data-start` to draw simultaneously, or stagger them by 0.2-0.5s for a "logotype building itself" effect. #### 4) MorphSVG — square → triangle → star Hide the target shapes (so they don't render their own strokes/fill), keep the visible morphing path, and animate it through targets: ```html ``` #### 5) MotionPath — anything along an SVG path ```html