Motion Reel

A motion-design reel that teaches its own craft, one principle per chapter on a flat graphic sheet: timing, easing, form, type, particles, rhythm and breathing, carried by morphs and point-morphed paths.

A flat paper sheet under one locked lens framed by a precise instrument overlay of corner brackets, a chapter label, a timecode and a progress bar, where a bouncing ball, curves, morphing shapes and kinetic type play out, turning briefly 3D for a particle burst. Seven quick chapters over 16 s, about 2 s each, crisp and rhythmic, landing on a dot as a full stop.

Length: 16 s
Scenes: 7
Style: typographic
Camera: locked off, fast cuts

//
    MOTION REEL — "让设计呼吸 / Motion makes design breathe." ~16 s, 16:9, seven chapters.
    A rebuild of qm1rl2l4QaDpaCmg.mp4: a motion-design reel that teaches its own craft,
    one principle per chapter, carried by morphs and point-morphed paths.
    1 unit = 1 mm. Preview: http://localhost:4444/runtime?project=projects/templates/motion-reel/motion-reel.promo

    THE STAGE — a flat graphic sheet, not a room. One locked lens in every chapter: fov 30 at
    z 2015.3, so the z = 0 plane is exactly 1920 × 1080 mm and 1 mm reads as 1 px. Everything is
    unlit basic colour (renderer tone_mapping=None, film_grain output_transform=2) so every hex
    prints as authored; the grain and a soft vignette give the paper its tooth. The particle
    chapter is the one place the sheet turns 3D (a point sphere, a dotted torus).

    PALETTE — paper #ECE9E2 · ink #121212 · signal orange #FF4A1C · electric blue #1E36F0 ·
    lime #D8F542 · night #0B0B0D.

    HUD — every chapter carries the same instrument frame (corner brackets, chapter label,
    timecode with a blinking rec dot, reel meta, a 7-segment progress bar). The ids repeat
    scene to scene, so each match-move gap crossfades the frame's colour and copy in place.

    CHAPTERS (scene · local seconds; a scene's clock starts when the gap into it starts)
      s1-timing    2.0  01 TIMING    an orange ball bounces along a ruler with squash and stretch,
                                     leaving a dotted arc; it flies to centre and swells to fill.
      s2-easing    1.75 02 EASING    a bézier graph point-morphs linear → ease → overshoot →
                                     settle (keyframed path `d`); four sliders race the easings;
                                     a lime staircase wipes to blue.
      s3-form      2.6  03 FORM      one shape path-morphs (morph=extrude, flat) circle → squircle →
                                     triangle → star → flower → dot inside a spec box; a paper band
                                     opens from the dot.
      s4-type      1.8  04 TYPE      MOTION rises with the dot as its O; rows of MOTION slide, the
                                     sheet turns and whips away; glitch cut.
      s5-particle  2.5  05 PARTICLE  动效 bursts into 6,000 particles that form a sphere, then a
                                     dotted torus, which collapses into the orange glow; iris cut.
      s6-rhythm    1.55 06 RHYTHM    a 24 × 14 vector field of dashes turns toward the wandering
                                     dot, a lime ripple runs through it; the dashes swell into paper.
      s7-breathe   2.6  07 BREATHE   the dot drops in as the full stop of 让设计呼吸, the rule draws,
                                     the kicker types, the lockup breathes.
promo#motion-reel(width=1920 height=1080 fps=30)
  // score: music/score.py (F minor, 120 BPM, ducked under the hits) · SFX stem: music/sfx.py
  audio
    tracks
      track#music(asset="music:motion-reel-score" start=0 duration=16.8 volume=0.85)
      track#sfx_1(asset="media:motion-reel-sfx" start=0 volume=0.9)
  materials
    // flat, unlit, transparent so every element can fade
    basic#m-ink(color=#121212 transparent=true opacity=1)
    basic#m-ink-dim(color=#121212 transparent=true opacity=0.55)
    basic#m-ink-faint(color=#121212 transparent=true opacity=0.18)
    basic#m-grey(color=#8A857C transparent=true opacity=1)
    basic#m-paper(color=#F3EFE7 transparent=true opacity=1)
    basic#m-paper-dim(color=#F3EFE7 transparent=true opacity=0.62)
    basic#m-paper-faint(color=#F3EFE7 transparent=true opacity=0.22)
    basic#m-cream(color=#ECE9E2 transparent=true opacity=1)
    basic#m-pale(color=#D6D2C9 transparent=true opacity=1)
    basic#m-orange(color=#FF4A1C transparent=true opacity=1 toneMapped=false)
    basic#m-lime(color=#D8F542 transparent=true opacity=1 toneMapped=false)
    basic#m-blue(color=#1E36F0 transparent=true opacity=1 toneMapped=false)
    basic#m-white(color=#FFFFFF transparent=