text-animation

# 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 1. **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. 2. **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. 3. **Tune the knobs.** Duration, stagger, easing, direction — each reference documents its knobs. Match the artifact's motion language (see dis...