text-motionlisted

Kinetic text-motion + gradient + transition toolkit for HTML/CSS motion-graphics videos — the polished "launch reel" look: keyword glow-highlight sweeps, gradient-filled hero words, scramble-decode headlines, ticker-roll word swaps, living color-arc gradient backgrounds with drifting blobs, concentric ring ripples, blueprint grids, and glass UI accents (pills, cursors, prompt cards). Use when making an animated title/heading feel dynamic and varied, adding a moving gradient background, giving each scene its own heading entrance, or matching a reference reel's text motion. Triggers: "make the headings more dynamic", "text motion", "highlight the keyword", "gradient background through the video", "animate the title like that reel", "scramble/decode text", "words rolling like a ticker", "make it more graphic". Complements kinetic-typography (word cascade / hero-push) and smooth-render (capture).
JagZ999/explainer-video · ★ 1 · Web & Frontend · score 74

Install: claude install-skill JagZ999/explainer-video

# Text Motion Drop-in building blocks (`assets/textmotion.css` + `assets/textmotion.js`) for varied, dynamic text motion and living backgrounds in plain HTML — distilled from launch-reel references and a full documentary build. The point: **stop every heading animating the same way**, and give the frame constant subtle motion (gradient + blobs) so nothing feels like a static slide. All CSS timing scales by `--R` so effects survive slow-clock rendering. Every JS updater takes a **logical time `t`** (your clock, in seconds) — call them from your render/rAF loop, never off wall-clock, or motion speeds up under capture. ```html <link rel="stylesheet" href="assets/textmotion.css"> <script src="assets/textmotion.js"></script> ``` ## Pick a different entrance per heading (variety is the fix) Reference reels never repeat one text move. Assign each scene its own: | Effect | When to use | How | |---|---|---| | **Word-rise** | default, calm lines | `tmSplit(el)` then `tmReveal(el,t0,t1,t)` | | **Scramble-decode** | crypto/tech/reveal beats | `tmScramble(el,'PLAIN',t0,t1,t,'<em>final</em>')` | | **Keyword sweep** | the one word that matters | wrap it `<span class="tm-kw">word</span>`, `tmSweep(kw,at,t)` | | **Gradient-fill hero** | big single-word hero | `<span class="tm-grad">Online</span>` | | **Ticker-roll** | a slot cycling synonyms | `.tm-ticker>.tm-roll>i…`, `tmTicker(roll,t0,t)` | | **Punch** | quick emphasis pop | `<span class="tm-punch">`, `tmPunch(el,at,t)` | ### Keyword