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.