TiTiMotionLab

An editor who lives in DaVinci Resolve, trying motion graphics made of code instead of keyframes. Every piece here is live HTML, CSS and JavaScript running in your browser, not a rendered video. Newest experiment on top.

  1. Experiment 04: Word formation — Alexandria style

    The 30-second word-formation lesson from experiment 03 (same script, same cues), redesigned in the style of Firecrawl's Alexandria launch film: a card that hard-cuts between black, paper and hot orange, huge tight Inter Tight type with bracketed mono captions, the root typed into a search pill and suffixes typed in orange on her '-er' and '-y', solid orange stress blocks, a pixel-iris wipe, band slides, live retyping for noun, verb, adjective and adverb, and an orange ASCII-dither texture.

  2. Experiment 03: Word formation: one root, four forms

    An English-lesson graphic synced to the narrator at normal speed (about 30 seconds). A black ROOT tile, photograph, peels off copies that fly into a word family: red suffix tiles snap on to make photographer (person) and photography (subject), the root alone is the object, and the same word is also the verb. Syllables and stress come in as a second layer, four word-class chips pop on noun, verb, adjective, adverb, and the punchline frame leaps from the 2nd syllable to the 1st: pronunciation ALSO changes. All timing lives in one config, one entry per spoken line.

  3. Experiment 02: Registration: self-portrait in halftone

    A 22-second motion self-portrait where CMY halftone plates, rendered in a WebGL shader, slide into registration to print TiTi's face, a razor wipe reveals the photo, and her name slices in behind her across parallax depth planes.

  4. Experiment 01: First HyperFrames samples (baseline)

    Four broadcast graphics built as HTML + GSAP timelines with HeyGen's HyperFrames: a title card, a lower third, a stat counter and a subscribe bug. The starting point everything else gets measured against.