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 05: About Mai — Alexandria style

    A 48-second self-introduction for Mai (TiTi) in the style of Firecrawl's Alexandria film, full-frame 16:9. Her photo decodes from orange duotone pixel blocks to full colour, 'Vietnam' resolves from black redaction blocks on a hot-orange card, colour bands drop in for who she helps, scattered clips snap into a clean timeline, a search pill types her main focus, six teaching-material cards flip orange in turn, and eight services fire in about a second each (razor cut, karaoke captions, noisy-to-clean waveform, colour grade band, zoom push) before a pixel iris lands on her closing line and end card.

  2. 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.

  3. 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.

  4. 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.

  5. 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.