Animate Text
Apply a catalog of 20 named text animation presets with portable enter/exit specs, stagger timing, and per-character or per-word targets.
Overview
animate-text is an agent skill for the Build phase that provides twenty named text animation presets with portable enter/exit timing and stagger specifications.
Install
npx skills add https://github.com/pixel-point/animate-text --skill animate-textWhat is this skill?
- Catalog lists 20 visible animation IDs including typewriter, mask-reveal-up, and kinetic-center-build
- Portable specs define enter/exit duration_ms, stagger_ms, easing, opacity, y_px, and blur_px per preset
- Targets include per-word and per-character modes with signature cubic-bezier easing
- blur-out-up preset documents 560ms enter and 480ms exit with staggered word departures
- renderer_overrides hook for kinetic-center-build custom renderer mapping
- 20 visible animation preset IDs in catalog
- blur-out-up enter duration_ms 560 with stagger_ms 28
- blur-out-up exit duration_ms 480 with stagger_ms 24
Adoption & trust: 1.2k installs on skills.sh; 115 GitHub stars; 3/3 security scanners passed (skills.sh audits).
What problem does it solve?
You need polished headline and label animations but lack consistent preset IDs, easing, and stagger values across your UI.
Who is it for?
Solo front-end builders standardizing hero and micro-copy animations in web or hybrid apps using agent-driven implementation.
Skip if: Full-page scroll storytelling, ecommerce SERP research, or teams that only need static typography with no motion system.
When should I use this skill?
You need to pick or implement a named text animation from the animate-text catalog with documented enter, exit, stagger, and target settings.
What do I get? / Deliverables
You select a cataloged animation ID and apply its portable_spec enter/exit blocks so text motion matches a defined timing and target model.
- Selected animation ID with applied portable_spec
- Enter/exit timing and stagger configuration for UI copy
Recommended Skills
Journey fit
Canonical shelf is Build because the skill supplies implementation-ready animation IDs and portable_spec timing for UI text motion. Frontend subphase reflects hero typography, headline transitions, and component-level text motion—not SEO merchant APIs or full-page scroll architecture.
How it compares
Preset text-motion spec catalog—not a scroll-experience architect skill or SEO merchant API reference.
Common Questions / FAQ
Who is animate-text for?
Developers and designers shipping landing or product UI who want agent help applying named text animation presets with documented timing.
When should I use animate-text?
During Build frontend work when implementing heroes, CTAs, or rotating copy that should use catalog IDs like typewriter, mask-reveal-up, or blur-out-up.
Is animate-text safe to install?
It is configuration and spec data for animations; review the Security Audits panel on this Prism page and validate any renderer code your project loads for overrides.
SKILL.md
READMESKILL.md - Animate Text
{ "visible_ids": [ "soft-blur-in", "per-character-rise", "per-word-crossfade", "spring-scale-in", "mask-reveal-up", "line-by-line-slide", "typewriter", "micro-scale-fade", "shimmer-sweep", "fade-through", "shared-axis-y", "shared-axis-z", "blur-out-up", "scale-down-fade", "focus-blur-resolve", "bottom-up-letters", "top-down-letters", "kinetic-center-build", "short-slide-right", "short-slide-down" ], "renderer_overrides": { "kinetic-center-build": "kinetic-center-build" } } { "id": "blur-out-up", "visibility": "visible", "portable_spec": { "id": "blur-out-up", "display_name": "Blur Out Up", "description": "Words arrive clean and depart upward with increasing blur for airy exits.", "inspiration": "Apple-style light typography where exit has more character than entry.", "target": "per-word", "signature_easing": "cubic-bezier(0.22, 1, 0.36, 1)", "enter": { "duration_ms": 560, "stagger_ms": 28, "easing": "cubic-bezier(0.22, 1, 0.36, 1)", "from": { "opacity": 0, "y_px": 10, "blur_px": 6 }, "to": { "opacity": 1, "y_px": 0, "blur_px": 0 } }, "exit": { "duration_ms": 480, "stagger_ms": 24, "easing": "cubic-bezier(0.64, 0, 0.78, 0)", "from": { "opacity": 1, "y_px": 0, "blur_px": 0 }, "to": { "opacity": 0, "y_px": -14, "blur_px": 8 } }, "swap": { "mode": "crossfade", "overlap_ms": 170, "micro_delay_ms": 35 }, "usage_notes": "Works best on short phrases; avoid very long lines to keep swap time tight." }, "showcase": { "content": { "sample": "Clear in, airy out.", "samples": ["Clear in, airy out.", "Lightweight typography.", "Exit with grace."] }, "content_usage": { "default_policy": "When applying an effect to an existing heading or text section, preserve the section text. Do not replace user/application copy with showcase sample text unless the user explicitly asks to reproduce the demo copy.", "showcase_samples": "showcase.content.sample and samples are reference/demo copy used by the generated website examples and useful fallback copy for isolated demos.", "loop_policy": "If the existing section supplies multiple phrases, loop those phrases. If it supplies one phrase, animate that phrase with the same enter/exit playback or use explicitly provided alternate phrases." }, "sample_source": { "asset": "assets/samples.json", "key": "blur-out-up" }, "renderer": { "id": "generic-stagger", "source": "default", "params": {}, "recipe": { "id": "generic-stagger", "summary": "Split text by target, animate each animated unit from enter.from to enter.to, hold, animate current units from exit.from to exit.to, then replace content.", "required_dom": [ "one h3.text-animation-title per phrase", "one span.text-animation-unit per split part", "animate only non-space parts for per-word targets", "span.text-animation-unit.line uses display:block for per-line targets" ], "split_rules": { "whole": "single animated unit containing the full text", "per-character": "Array.from(text), preserving punctuation and spaces as animated visual units", "per-word": "regex /(\\S+|\\s+)/g; create spans for words and whitespace, but animate only non-whitespace spans", "per-line": "split on explicit \"\\n\"; each line is an animated block span" }, "stagger_rank_algorithms": { "normal": "rank equals DOM unit index", "reverse": "rank 0 starts at last animated unit and proceeds backward", "center-out": "sort animated indices by absolute distance from center, ties by lower inde