Text Animation Skill
Overview
Animates text in HTML artifacts with zero runtime dependencies: per-character roll/slot transitions, split-letter reveals, typewriter, and crossfade swaps. Every pattern is vanilla JS + CSS, copied inline into the artifact and adapted to its content.
Iron Rule: Zero npm
No npm packages, no CDN scripts, no build step, no external assets, ever. Every animation ships as inline <style> and <script> in the artifact itself. If a request seems to need a library (GSAP, anime.js, Framer Motion), use the reference patterns instead — they cover the same effect class.
html-artifact Contract Compliance
Output embedded in an artifact must satisfy the html-artifact contract:
- Single self-contained
.html file.
- All CSS inline in
<style>, all JS inline in <script>.
- ≤500KB total file size.
- No CDN links, no external fonts, no remote assets.
- Respect
prefers-reduced-motion: collapse durations to 0 when set.
Workflow
- Classify the request. Roll/slot transition between strings →
references/roll-text.md. Entrance reveal, typewriter, or content swap → references/text-animation-patterns.md. Load only the matching reference.
- Copy the pattern inline. Lift the CSS and JS from the reference into the artifact's
<style>/<script>. Rename hooks to match the artifact's naming.
- Tune the knobs. Duration, stagger, easing, direction — each reference documents its knobs. Match the artifact's motion language (see distinctive-frontend-design when active).
- Verify. Open the file standalone; animation runs offline with no console errors.
Reference Loading Table
| Signal |
Load These Files |
Why |
| roll, slot, slot machine, retargeting label, rolling counter, string-to-string transition |
references/roll-text.md |
Complete roll-text demo plus extraction guide and knobs (duration, stagger, easing, direction) |
| reveal, entrance, typewriter, terminal effect, crossfade, swap text |
references/text-animation-patterns.md |
Split-letter reveal, typewriter, and crossfade swap snippets with usage notes |
Error Handling
Animation does not run when the page opens
Cause: transition start and end states applied in the same style flush; the browser batches them.
Solution: force a reflow (void el.offsetHeight) between setting the start state and the end state, as the reference patterns do.
Characters jump width mid-animation
Cause: variable-width glyphs swapped without animating the cell width.
Solution: use the roll-text pattern's measured-width transition; it animates each cell from old-glyph width to new-glyph width.
Reference Files
references/roll-text.md: roll/slot pattern — standalone runnable demo, extraction guide, knob tablereferences/text-animation-patterns.md: companion patterns — split-letter reveal, typewriter, crossfade swap
1---2name: text-animation3description: Dependency-free kinetic typography: roll/slot text, reveals, typewriter, crossfade.4---5
6# Text Animation Skill
7
8## Overview
9
10Animates text in HTML artifacts with zero runtime dependencies: per-character roll/slot transitions, split-letter reveals, typewriter, and crossfade swaps. Every pattern is vanilla JS + CSS, copied inline into the artifact and adapted to its content.
11
12## Iron Rule: Zero npm
13
14No npm packages, no CDN scripts, no build step, no external assets, ever. Every animation ships as inline `<style>` and `<script>` in the artifact itself. If a request seems to need a library (GSAP, anime.js, Framer Motion), use the reference patterns instead — they cover the same effect class.
15
16## html-artifact Contract Compliance
17
18Output embedded in an artifact must satisfy the html-artifact contract:
19
20- Single self-contained `.html` file.
21- All CSS inline in `<style>`, all JS inline in `<script>`.
22- ≤500KB total file size.
23- No CDN links, no external fonts, no remote assets.
24- Respect `prefers-reduced-motion`: collapse durations to 0 when set.
25
26## Workflow
27
281. **Classify the request.** Roll/slot transition between strings → `references/roll-text.md`. Entrance reveal, typewriter, or content swap → `references/text-animation-patterns.md`. Load only the matching reference.
292. **Copy the pattern inline.** Lift the CSS and JS from the reference into the artifact's `<style>`/`<script>`. Rename hooks to match the artifact's naming.
303. **Tune the knobs.** Duration, stagger, easing, direction — each reference documents its knobs. Match the artifact's motion language (see distinctive-frontend-design when active).
314. **Verify.** Open the file standalone; animation runs offline with no console errors.
32
33## Reference Loading Table
34
35| Signal | Load These Files | Why |
36|---|---|---|
37| roll, slot, slot machine, retargeting label, rolling counter, string-to-string transition | `references/roll-text.md` | Complete roll-text demo plus extraction guide and knobs (duration, stagger, easing, direction) |
38| reveal, entrance, typewriter, terminal effect, crossfade, swap text | `references/text-animation-patterns.md` | Split-letter reveal, typewriter, and crossfade swap snippets with usage notes |
39
40## Error Handling
41
42### Animation does not run when the page opens
43Cause: transition start and end states applied in the same style flush; the browser batches them.
44Solution: force a reflow (`void el.offsetHeight`) between setting the start state and the end state, as the reference patterns do.
45
46### Characters jump width mid-animation
47Cause: variable-width glyphs swapped without animating the cell width.
48Solution: use the roll-text pattern's measured-width transition; it animates each cell from old-glyph width to new-glyph width.
49
50## Reference Files
51
52- `references/roll-text.md`: roll/slot pattern — standalone runnable demo, extraction guide, knob table
53- `references/text-animation-patterns.md`: companion patterns — split-letter reveal, typewriter, crossfade swap
majiayu000