Skip to content
AI Pixel Wizard
Your sequence0 clips
Source

Kinetic Title Reveal

Bold letters spring up into place one by one, an underline draws itself and a subtitle fades in.

Text layer, V4 Titles2D141 lines of codev1.1.0

In Text & data

Next: Rolling Number CounterSurprise me

Kinetic Title Reveal preview
Starting live preview…
00:00:00:00 / 00:00:00:01

Live, running the real source.

Open in the title maker

Your current settings go with it. Combine several clips and hand them over together from your sequence.

Effect controls

Presets

0.055

Seconds between letters.

1.6

The preview runs the same code your AI receives. These settings travel with the hand-off.

View code Sample video (default settings, 213 KB)
Info

What it is

A clean, punchy title animation: each letter rises out of an invisible slot with a little springy overshoot, an accent line sweeps underneath, and an optional subtitle fades up. Type your own words, pick colours and how bouncy it feels. The text size adjusts itself to fit the frame.

Reuse it in your own idea

  • Put it over Hypnotic Particle Tunnel for an intro (see Hypnotic Tunnel Title).
  • Use it as an end card after any 3D scene by drawing it onto a 2D overlay canvas.
  • Set y to 0.82 and a smaller maxWidth for a lower-third caption.

Which part is reusable

src/kinetic-title.js is the ingredient your AI reuses. demo.js is only the example scene around it, and uses the demo harness only for the demo.

See it combined with other ingredients in Hypnotic Tunnel Title.

Good to know

  • Single line, left-to-right scripts. No automatic wrapping or right-to-left shaping.

Technical details

Technical details
Implementation
Canvas 2D — plain browser JavaScript, no libraries · ES module src/kinetic-title.js
Exports
  • createKineticTitle({ text?, subtitle?, fontFamily?, weight?, color?, accent?, delay?, stagger?, letterDuration?, overshoot?, style?, exitAt?, maxWidth?, y?, align?, x?, tracking?, rule? }) => { draw(ctx, info, width, height), revealDuration }
Dependencies (exact)
  • apw-runtime@1.0.0 (demo) — Demo harness. src/kinetic-title.js has no dependencies.
How it fits a scene

Coordinates: Centred horizontally; y option is a fraction of height.

Lighting: None.

Timing: Pure function of time. revealDuration tells you when it has finished.

Output
1080×1080, 30 fps, 4 s · procedural (computed from the frame number) · not a loop — A reveal that ends on the finished title (or fades out with the exit option).
Tested
Rendered 120 frames on 2026-10-03 in Chrome 154.0.8037.97 headless on Linux 7.0.0-38-generic (x64), Node 22.14.0 (Canvas 2D). Same frame twice from fresh pages: identical.
Performance
One measureText per letter per frame; negligible. Best under ~30 characters per line (no automatic line wrapping).
Export a video yourself
Download the source, then in the folder: npm install npm run render -- kinetic-title/1.1.0 --out my-video.mp4Needs Node 18+, ffmpeg and Chrome/Chromium. Add --params my-settings.json (from Copy settings) for your own settings.
Version
1.1.0 · sha256:37841e1dfea7d77a… · other versions: 1.0.0
Files
License
MIT. Copyright (c) 2026 AI Pixel Wizard. Released under the MIT License. See LICENSE in this folder. License details
Provenance
Original code written for AI Pixel Wizard in October 2026. Uses the viewer's system font; no font files are bundled. Demo and typography rebuilt in October 2026 to the catalog quality bar (docs/QUALITY.md).
BinMore like this

More like this

Play these full screen