HTML Animation for Codex and Claude Code

html-animation is a reusable skill and Codex plugin for building polished local HTML/CSS/JavaScript animations. It treats HTML as the editable source of truth and uses video only when a rendered clip is actually needed.

It is useful for product explainers, motion studies, animated storyboards, UI demos, and composited 16:9 scenes. The skill guides an agent through implementation, browser review, visual quality checks, and (when requested) recording and review assets.

What is included

• A Codex plugin manifest in .codex-plugin/plugin.json.
• The html-animation skill, with automatic trigger guidance and an optional explicit invocation.
• Eleven self-contained HTML templates for camera movement, timing, reveals, transforms, flows, interaction, and multi-layer composition.
• Reference guides for authoring models, production workflow, visual quality, recording, and common failure modes.
• make_review_assets.py, which produces a contact sheet, sampled frames, and metadata for a rendered clip.

The package is deliberately product- and brand-neutral. Its templates are starting points rather than a visual identity.

Capabilities

Area	Included patterns
Stage composition	Fixed 16:9 stages; synchronized foreground and background layers
Spatial motion	World zoom/reveal; focus and depth shifts
Time and reveal	Timed phases, loop/final freeze, progressive type panels
Object transforms	Cluster burst/distribution, grid recomposition, radial orbit selector
Flow and interaction	SVG path drawing, tokens and pulses, cursor-guided actions
Production review	Screenshot loop, tail/replay checks, contact sheets, recording guidance

Repository layout

.
├── .codex-plugin/plugin.json          # Codex plugin metadata
└── skills/html-animation/
    ├── SKILL.md                       # Main workflow and trigger description
    ├── agents/openai.yaml             # Codex-facing skill metadata
    ├── assets/templates/primitives/   # Reusable single-file HTML templates
    ├── references/                    # Load-on-demand implementation guidance
    └── scripts/make_review_assets.py  # Rendered-video review helper

Keep the skills/html-animation directory intact when installing it. SKILL.md refers to the sibling assets/, references/, and scripts/ directories by relative path.

Quick use

Once installed, ask for work in ordinary language. The skill should automatically activate for relevant requests. In Codex, it can also be named explicitly:

Use $html-animation to create a 12-second 16:9 animation: reveal three cards,
zoom into the middle card, and leave the final composition frozen.

Typical requests include:

• “Build an HTML animation for this scene and give me a local preview.”
• “Turn this static dashboard mockup into a cursor-guided demo.”
• “Use the radial selector template, then export a 60 fps MP4.”
• “Review this animation’s final second for loop restart, missing content, or recorded controls.”

Install in Codex

Codex can use this package in two ways. Choose the direct-skill option for an individual workflow; choose the plugin option when you want it discoverable and manageable through the Codex Plugins UI/CLI.

Option A: install the skill directly

This is the shortest route when only the skill is needed.

git clone https://github.com/NeuroAIHub/html_animation_skill.git /tmp/html_animation_skill
mkdir -p ~/.codex/skills
cp -R /tmp/html_animation_skill/skills/html-animation ~/.codex/skills/html-animation

Start a new Codex task after copying the skill. A new task ensures Codex loads the new SKILL.md and its metadata.

To update a direct installation:

git -C /tmp/html_animation_skill pull --ff-only
rm -rf ~/.codex/skills/html-animation
cp -R /tmp/html_animation_skill/skills/html-animation ~/.codex/skills/html-animation

Option B: install the full Codex plugin from a local marketplace

This option exposes the package as the html-animation plugin. It uses a personal marketplace that points at a local clone; it does not require publishing the plugin to a public marketplace.

1. Clone the repository at the location used by the personal marketplace:

   mkdir -p ~/.agents/plugins/plugins
   git clone https://github.com/NeuroAIHub/html_animation_skill.git \
     ~/.agents/plugins/plugins/html-animation

2. Create ~/.agents/plugins/marketplace.json with the following content. If the file already exists, add the object in plugins instead of replacing its existing entries.

   {
     "name": "html-animation-local",
     "interface": {
       "displayName": "Local plugins"
     },
     "plugins": [
       {
         "name": "html-animation",
         "source": {
           "source": "local",
           "path": "./plugins/html-animation"
         },
         "policy": {
           "installation": "AVAILABLE",
           "authentication": "ON_INSTALL"
         },
         "category": "Productivity"
       }
     ]
   }

3. Install it from the marketplace:

   codex plugin add html-animation@html-animation-local

4. Start a new Codex task and use $html-animation, or let Codex select it automatically from the request.

In the ChatGPT desktop app, restart the app after creating or changing the local marketplace. Then select Plugins, choose Local plugins, and install HTML Animation.

Update a plugin installation

Pull the repository, refresh/reinstall the plugin, then begin a new task:

git -C ~/.agents/plugins/plugins/html-animation pull --ff-only
codex plugin add html-animation@html-animation-local

For a development release that changes the plugin source, update the cache-buster in .codex-plugin/plugin.json before reinstalling. This lets Codex recognize the new bundle version:

python3 /path/to/plugin-creator/scripts/update_plugin_cachebuster.py \
  ~/.agents/plugins/plugins/html-animation

The plugin-creator script ships with Codex installations that include the Plugin Creator skill. If it is unavailable, update the existing version suffix after +codex. to a new unique value, validate the plugin, and reinstall.

Remove from Codex

List installed plugins to find the configured marketplace and use the normal Codex plugin removal command for that installation. Removing the plugin does not delete the repository clone or its generated animation files.

codex plugin list
codex plugin remove html-animation

Install in Claude Code

Claude Code consumes the skill itself; it does not use the Codex plugin manifest. Copy the complete skills/html-animation directory to a Claude Code skills location.

Personal installation (all your projects)

git clone https://github.com/NeuroAIHub/html_animation_skill.git /tmp/html_animation_skill
mkdir -p ~/.claude/skills
cp -R /tmp/html_animation_skill/skills/html-animation ~/.claude/skills/html-animation

Claude Code watches its skills directories, so the new skill is available in the current session. Ask naturally for an HTML animation, or invoke it explicitly:

/html-animation Create a 1920×1080 HTML animation with a path-draw handoff and a 2-second final hold.

Project installation (share with a repository)

From the root of the target project:

mkdir -p .claude/skills
git clone https://github.com/NeuroAIHub/html_animation_skill.git /tmp/html_animation_skill
cp -R /tmp/html_animation_skill/skills/html-animation .claude/skills/html-animation

Commit .claude/skills/html-animation/ if the project team should share the same animation workflow. Do not copy only SKILL.md; the templates and references are part of the skill.

To update either Claude Code installation, pull the clone and replace the installed html-animation directory. Claude Code detects the directory change; start a new session only when you also want a clean task context.

Working workflow

The skill is designed around the following sequence:

1. Decide whether the desired deliverable is HTML, video, or both.
2. Build or adapt a single HTML animation; prefer a matching primitive template rather than one-off motion code.
3. Serve and preview the page locally. Inspect the first, key, and final states.
4. Fix layout, overflow, incorrect assets/background, stale caches, and visible controls before fine visual review.
5. Collect user feedback and iterate on the HTML source.
6. Only when a clip is requested, record with the project’s browser/CDP screencast workflow, then check sampled frames and the tail.

For most browser animation work, animate transform and opacity instead of layout or expensive filter properties. Keep a fixed stage, make controls hideable, and include an intentional final hold to prevent replay artifacts in recorded output.

Templates and references

The main skill routes an agent to a focused reference before it adapts a template:

Need	Read / start with
Camera, zoom, depth	references/primitives/spatial.md
Phase timing and final freeze	references/primitives/temporal.md
Staggers, type, masking	references/primitives/reveal.md
Clusters, grids, radial layouts	references/primitives/transform.md
SVG traces, pulses, handoffs	references/primitives/flow.md
Cursor, click, drag	references/primitives/interaction.md
Layered 16:9 stage	references/primitives/composition.md
Multi-primitive shots	references/primitive-composition.md
Recording and final QA	references/recording-and-review.md

Template paths are listed in skills/html-animation/SKILL.md. Each is a generic single-file page designed to be copied or adapted into the target project.

Validate a checkout

Run these checks before publishing modifications to the skill or plugin:

python3 /path/to/skill-creator/scripts/quick_validate.py \
  skills/html-animation

python3 /path/to/plugin-creator/scripts/validate_plugin.py .

In a standard Codex installation, the helper scripts are available under the Plugin Creator and Skill Creator skill directories. The validation commands verify the skill’s frontmatter/naming and the plugin manifest/layout respectively.

Contributing

Keep additions reusable and generic. Put detailed, conditional guidance in references/; keep SKILL.md concise and procedural. Add a new template only when it represents a recurring animation pattern, and preserve the template’s fixed stage, hideable controls, duration metadata, and phase comments.

Before opening a pull request:

1. Validate the skill and plugin.
2. Preview a representative template in a browser.
3. Confirm that no debug, replay, transport, or review UI leaks into the intended stage.
4. If recording is involved, inspect the last seconds for loop restart and missing final content.

License

No license has been declared yet. Add one before distributing the repository as an open-source package.

Documentation

• Codex plugin marketplaces and local plugins
• Claude Code skills