Formwork

A design tool reel on a flat design canvas: a hand-drawn wireframe smooths into vector, components snap into auto layout, one shape morphs through the kit, frames wire into a prototype, then the real editor on a laptop.

A flat paper canvas under a locked lens, with rulers and drafting marks, switching between bold flat chapters, plus one dark studio with a plinth and a hard rim light. Six very quick beats in 15.4 s at 125 bpm, each about 2 s, joined by stepped wipes and snappy spring motion, one raking close-up near the end; it plays too fast, with little room to breathe.

Length: 15 s
Scenes: 6
Device: laptop
Style: hyperkinetic
Camera: fast cuts, locked off, ultra closeup

//
    FORMWORK — "From wireframe to pixel." ~15.4 s, 16:9, six chapters. 1 unit = 1 mm.
    Preview: http://localhost:4444/runtime?project=projects/templates/formwork/formwork.promo

    THE IDEA — a design tool's own reel. A hand-drawn wireframe smooths itself into vector, the
    components snap into auto layout, one component morphs through the whole kit, the frames wire
    themselves into a prototype, and the sheet whips away onto the real editor on a laptop, where
    the Pay button gets its radius and the file is handed off.

    THE STAGE — a flat design canvas (F1–F4, F6). One locked lens: fov 30 at z 2015.3, so the
    z = 0 plane is exactly 1920 × 1080 mm and 1 mm reads as 1 px. Unlit basic colour
    (tone_mapping=None, film_grain output_transform=2): every hex prints as authored. F5 is the one
    3D set: a laptop on a black plinth in a dark studio, a violet rim, a mirror floor.

    PALETTE — paper #EEEBE4 · ink #141414 · Formwork violet #5B3DF5 · pale violet #A996FF ·
    mint #3DF5B0 (selection, guides, "shipped") · night #0E0E11.

    HUD — every flat chapter wears the same canvas chrome: a top and a left ruler, the file name, the
    zoom read-out, the chapter label and a 6-dot progress. The ids repeat scene to scene.

    CHAPTERS (scene · local seconds; a scene's clock starts when the gap into it starts)
      f1-sketch     2.4  01 SKETCH   a wobbly phone wireframe draws itself (path `d` keys), then every
                                     stroke point-morphs from rough to vector; the button fills, the
                                     cursor clicks it; a violet staircase wipes.
      f2-snap       2.2  02 SNAP     on violet: three cards fly in tumbling and snap with a spring
                                     into a row, mint guides flash, the gap tag counts 80 → 40 as
                                     auto layout tightens.
      f3-morph      2.2  03 MORPH    on night: one shape walks a timeline of five stations, morphing
                                     button → card → avatar → toggle → app icon; a playhead lights
                                     each keyframe diamond.
      f4-wire       2.2  04 WIRE     four frames; violet prototype noodles draw frame to frame with a
                                     travelling dot; the sheet turns and whips away.
      f5-editor     3.0  05 SHIP     the real editor on a laptop: the cursor reaches Pay, radius 0 → 30,
                                     ultra close on the selection, Hand off, the mint toast.
      f6-lockup     2.2  06          the icon drops in with squash and stretch, Formwork, the rule
                                     draws with a playhead, the kicker types, the mark breathes.
promo#formwork(width=1920 height=1080 fps=30 gap-clock=run)
  audio
    tracks
      track#music(asset="music:formwork-score" start=0 duration=15.4 volume=0.85)
      track#sfx_1(asset="media:formwork-sfx" start=0 volume=0.9)
  materials
    // flat, unlit, transparent so every element can fade
    basic#m-ink(color=#141414 transparent=true opacity=1)
    basic#m-ink-dim(color=#141414 transparent=true opacity=0.55)
    basic#m-ink-faint(color=#141414 transparent=true opacity=0.2)
    basic#m-paper(color=#F3F0E9 transparent=true opacity=1)
    basic#m-paper-dim(color=#F3F0E9 transparent=true opacity=0.62)
    basic#m-paper-faint(color=#F3F0E9 transparent=true opacity=0.22)
    basic#m-card(color=#FBFAF7 transparent=true opacity=1)
    basic#m-pale(color=#E4DFF5 transparent=true opacity=1)
    basic#m-violet(color=#5B3DF5 transparent=true opacity=1 toneMapped=false)
    basic#m-lilac(color=#A996FF transparent=true opacity=1 toneMapped=false)
    basic#m-mint(color=#3DF5B0 transparent=true opacity=1 toneMapped=false)
    // the studio (F5)
    physical#m-plinth(color=#0c0c0e metalness=0.3 roughness=0.22 clearcoat=1 clearcoat-roughness=0.05 envmap-intensity=0.8)

  // =====================================================================================