Purpose
Reveal text character-by-character at a steady rate, mimicking a real user typing. Linear pacing — NO easing — because the goal is to feel mechanical / human, not animated.
Params
{
"full_text": "Build a trip planning app that organizes destinations…",
"chars_per_frame": 0.33, // ~10 chars/sec at 30fps
"delay_before_first_char_frames": 12,
"delay_after_last_char_frames": 18,
"cursor": { "show": true, "blink_period_frames": 30, "color": "#1A1A1A", "width_px": 2, "height_em": 1.2 },
"font_family": "Inter", "font_size_px": 22, "color": "#1A1A1A", "line_height": 1.4 }
## Behaviour
1. After `delay_before_first_char_frames`, start revealing characters.
2. Number of characters revealed at frame F: `floor((F - delay) * chars_per_frame)`.
3. After full text revealed, wait `delay_after_last_char_frames` before the next phase.
4. Cursor blinks at `blink_period_frames` cycle, positioned at the end of revealed text.
Implementation: a React component using `useCurrentFrame()` and string slicing.
## Style pack overrides
- **SP-F (product-demo)** — canonical use. Inside a prompt card with the cursor visible.
## Quality Checks
- Linear pacing (no easing, no speedup, no slowdown).
- Cursor blinks at a reasonable cadence (~1Hz).
- Text wraps appropriately within the container width.
- Full text revealed BEFORE scene ends (with buffer for cursor-puppet).
## Failure Modes
- **Typing accelerates or decelerates.** Use integer truncation of frame * rate; don't apply easing.
- **Cursor doesn't blink.** Verify blink period via modulo.
- **Cursor position lags behind text.** Cursor x-position must match the rendered length of revealed text — use `getBoundingClientRect()` or compute via font metrics.
- **Text overflows container.** Constrain by container width and pre-test wrapping.