# Kinetic Title Reveal — `kinetic-title@1.0.0`

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

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.

- Kind: text; status: published; digest sha256:490f17a4d5cfa5b6c3579d757bef12c0babd8811fb2250a7472bb23bb4ba0a49
- Role: Foreground text layer (Canvas 2D).
- Implementation: canvas2d; entry `src/kinetic-title.js`
- Files: https://aipixelwizard.com/registry/kinetic-title/1.0.0/<path> (`LICENSE`, `asset.json`, `demo.js`, `index.html`, `src/kinetic-title.js`)
- Manifest JSON: https://aipixelwizard.com/api/v1/visuals/kinetic-title/versions/1.0.0
- Runnable demo: https://aipixelwizard.com/registry/kinetic-title/1.0.0/index.html (open over http; it imports sibling packages by relative path)
- Dependencies (exact): `apw-runtime@1.0.0` (demo) — Demo harness. src/kinetic-title.js has no dependencies.

## Exports
- `createKineticTitle({ text?, subtitle?, fontFamily?, weight?, color?, accent?, delay?, stagger?, letterDuration?, overshoot?, style?, exitAt?, maxWidth?, y? }) => { draw(ctx, info, width, height), revealDuration }` — Canvas 2D text layer driven by info.time (seconds).

## Parameters
- `text` (text, default "MAKE IT MOVE") — Title
- `subtitle` (text, default "Made with JavaScript") — Subtitle
- `style` (select one of rise | drop | scale, default "rise") — Entrance
- `stagger` (number 0.01–0.2, default 0.055) — Letter delay: Seconds between letters.
- `bounce` (number 0–3, default 1.6) — Bounce
- `exit` (boolean, default false) — Fade out at the end
- `color` (color, default "#ffffff") — Text colour
- `accent` (color, default "#7c6cff") — Underline colour
- `background` (color, default "#0c0b12") — Background

## Composition
- Inputs: Canvas 2D context, info.time (seconds), width, height.
- Outputs: Draws text on top of the canvas. Does not clear it.
- Coordinates: Centred horizontally; y option is a fraction of height.
- Lighting: None.
- Timing: Pure function of time. revealDuration tells you when it has finished.
- Works with: particle-tunnel, gradient-background, torus-wave, spring-motion
- Title text is treated as private: it is not stored in shared packs unless you choose to include it.
- System fonts differ between computers; pass fontFamily and load the font first for identical renders.

## Output and loop
- 1080×1080, 30 fps, 4 s, procedural
- Seamless loop: no — A reveal that ends on the finished title (or fades out with the exit option).
- Verified 2026-10-02 in Chrome 151.0.7922.137 headless on Linux 7.0.0-31-generic (x64), Node 22.14.0 (Canvas 2D); deterministic: yes

## Use it
New project: Create the title once, then each frame draw your background and call title.draw(ctx, { time: frame / fps }, width, height).

Existing project: Copy src/kinetic-title.js. Call draw on your existing 2D canvas (or an overlay canvas above a WebGL scene) after the rest of the frame.

Reuse ideas:
- 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.

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

## License
MIT. Copyright (c) 2026 AI Pixel Wizard. Released under the MIT License (see LICENSE in this folder).

Provenance: Original code written for AI Pixel Wizard in October 2026. Uses the viewer's system font; no font files are bundled.