text-animation — independently scanned and version-tracked by SaferSkills.
SaferSkills independently audited text-animation (Agent Skill) and scored it 100/100 (green). The audit ran 55 deterministic rules across Security, Supply Chain, Maintenance, Transparency, and Community; it found 0 high-severity and 0 lower-severity findings. The full rule-by-rule trace and per-finding evidence are below. Free, methodology-open.
Findings & checks · 0 flagged
Every scanned point with the score it earned and what moved between them.
First recorded scan — no prior version to compare against.
The primary manifest — the file an agent reads to learn what this artifact does.
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.
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.
Output embedded in an artifact must satisfy the html-artifact contract:
.html file.<style>, all JS inline in <script>.prefers-reduced-motion: collapse durations to 0 when set.references/roll-text.md. Entrance reveal, typewriter, or content swap → references/text-animation-patterns.md. Load only the matching reference.<style>/<script>. Rename hooks to match the artifact's naming.| 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 |
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.
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.
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~30 seconds. Free. No account. Every finding cites a rule and a line of evidence.