Animation Master

Animation Master is a reusable CSS motion library and preview site for product interface animation. It collects small, practical motion snippets into a format that can be previewed, copied, and installed as a global Codex skill.

The goal is simple: make common interaction motion easier to reuse without rebuilding animation details from scratch every time.

What It Includes

• Element motion: button feedback, floating, click, jump, shake, heartbeat, meteor, digit roll, and more.
• UI motion: resize, digit entrance, badge, dropdown, modal, panel, page slide, icon swap, success check, avatar hover, and error shake.
• Text motion: blur reveal, character rise, word crossfade, spring scale, mask reveal, typewriter, shimmer, fade-through, shared axis, and slide variants.
• A static preview website with live animation controls and one-click CSS copy.
• An installable Codex skill that helps reuse the same .t-* CSS animations across projects.

Repository Structure

.
├── index.html                 # Static preview site
├── css/                       # CSS files used by the preview site
└── animation-master/          # Installable Codex skill package
    ├── SKILL.md
    ├── assets/css/            # CSS assets copied by the skill
    ├── references/catalog.md  # Effect catalog
    └── scripts/               # Helper scripts

Preview Site

The repository root is the static preview site. Open index.html directly or serve the folder with any static server.

python3 -m http.server 5175

Then open:

http://127.0.0.1:5175/index.html

Global One-Click Skill Install

Install the packaged skill globally from this repository:

npx skills add kaneyoung1994/motion-skill --skill animation-master --global

For a non-interactive install, add --yes:

npx skills add kaneyoung1994/motion-skill --skill animation-master --global --yes

After installation, restart Codex so the new skill is discovered.

This is a global Codex skill install. It is installed under $CODEX_HOME/skills or ~/.codex/skills, not inside a project-local .agents/skills folder.

The installable skill source in this repository lives in:

animation-master/

Skill Usage

After installing the skill, ask Codex to use animation-master when you want to add or adapt one of these motion snippets. For example:

Use animation-master to add a reusable button feedback animation to this button.

The skill can help select the right CSS file, copy it into a target project, and wire the required .t-* class or state hook into the markup.

Deploy

This site can be deployed on Vercel as a static project:

• Framework Preset: Other
• Build Command: leave empty
• Output Directory: .

Notes

• The CSS class names use the .t-* convention.
• Each animation file is kept standalone so it can be copied independently.
• Motion files include prefers-reduced-motion handling where appropriate.
• The project is intentionally framework-free at the preview layer, so it can be hosted as plain static HTML/CSS/JS.