npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2026 – Pkg Stats / Ryan Hefner

hyper-animator-codex

v0.8.4

Published

Install the Hyper Animator skill for Codex and Claude Code.

Downloads

151

Readme

hyper-animator-codex

Install the hyper-animator-codex Codex skill from npm.

The skill guides Codex through a contract-first HyperFrames animation workflow: natural-language brief, outline/narration detection, visual-first dual-catalog shot planning (HyperFrames + ShotCraft), HTML animation authoring, MiniMax mainland China audio after visual approval, validation, and render handoff.

Install

Use it directly with npx:

npx hyper-animator-codex install

To replace an existing installed copy:

npx hyper-animator-codex install --force

Or install the CLI globally:

npm install -g hyper-animator-codex

Global install runs a postinstall step that copies the skill to both Codex and Claude Code:

${CODEX_HOME:-$HOME/.codex}/skills/hyper-animator-codex
${CLAUDE_HOME:-$HOME/.claude}/skills/hyper-animator-codex

To skip automatic skill installation during npm install:

HYPER_ANIMATOR_CODEX_SKIP_POSTINSTALL=1 npm install -g hyper-animator-codex

You can also run or re-run installation manually:

hyper-animator-codex install --force

Use one custom skills directory:

npx hyper-animator-codex install --target /path/to/skills

Git Checkpoints

During /hyper-animator runs, the installed skill initializes a normal Git repository in a new output directory and creates rollback-friendly stage commits. It does not create branches or worktrees.

The bundled helper can be run from an installed skill directory or repository checkout:

node skills/hyper-animator-codex/scripts/git_checkpoint.mjs \
  --phase init \
  --message "chore: initialize hyper animator workspace" \
  --allow-empty

Existing Git repositories with uncommitted changes are protected: the helper stops instead of mixing user edits into automatic commits. Large video and audio files above 10 MB are skipped by default and recorded in a manifest under hyper-animator-output/git-checkpoints/.

MiniMax Audio Configuration

MiniMax mainland China (api.minimaxi.com) is the required provider for both generated narration and generated BGM. HeyGen, Kokoro, and MusicGen are not automatic fallbacks. Configure MiniMax during install so the copied skill can generate music and voiceover without asking for credentials later:

npx hyper-animator-codex install --force \
  --minimax-api-key "$MINIMAX_API_KEY" \
  --minimax-model music-3.0-free

Environment fallback is also supported:

MINIMAX_API_KEY=... npx hyper-animator-codex install --force

Or load a JSON config file:

npx hyper-animator-codex install --force --minimax-config ./minimax.json

The installer writes local config to:

${CODEX_HOME:-$HOME/.codex}/skills/hyper-animator-codex/config/minimax.json

Do not commit that installed config file. The npm package does not include local MiniMax credentials.

HTML Preview Controls

Preview HTML can include a bottom page indicator and thin draggable progress bar:

node skills/hyper-animator-codex/scripts/inject_preview_controls.mjs composition.html -o composition.preview.html --force
python3 skills/hyper-animator-codex/scripts/validate_hyperframes_html.py composition.preview.html \
  --preview-controls --shot-plan shot-plan.json

The injected controls support dragging the progress bar and using ArrowLeft or ArrowRight to move between pages.

Use data-preview-pages="0,3,6,9" for explicit page starts, or data-preview-page-count="4" to divide the duration evenly.

When rendering video, hide preview controls with any one of:

?render=1
?preview=0
<html data-render-mode="video">

Narration And Subtitles

The workflow detects narration needs early, but generated narration and subtitles are deferred until the user approves the page, transitions, and animation. Visual drafts use audio.narration.mode: "deferred" in the shot plan.

Detect outline and narration files in a project directory:

node skills/hyper-animator-codex/scripts/detect_project_files.mjs --dir . --pretty

List MiniMax voices, cloned voices first:

node skills/hyper-animator-codex/scripts/generate_minimax_tts.mjs --list-voices --voice-type all

Generate narration audio from narration.json:

node skills/hyper-animator-codex/scripts/generate_minimax_tts.mjs \
  --narration-json narration.json \
  --split-scenes \
  --output-dir hyper-animator-output/voice

--split-scenes writes one audio file per narration scene and narration-manifest.json with exact MiniMax durations. Use it to time the shot plan and subtitles:

Generate timed subtitle JSON and SRT:

node skills/hyper-animator-codex/scripts/generate_subtitles.mjs \
  --narration narration.json \
  --timing-manifest hyper-animator-output/voice/narration-manifest.json \
  --output-dir hyper-animator-output/subtitles \
  --style clean

If a MiniMax call fails, the workflow asks whether to retry, use a local user-provided file, or skip that track. It does not install another speech or music model.

Dual-Catalog Shot Planning

The installed skill bundles a lightweight ShotCraft knowledge layer: 106 shot cards, 164 style records, core production notes, and source-backed TSX references. Video previews, audio, raster assets, dependencies, and a runnable Remotion project are excluded.

Search the ShotCraft references:

node skills/hyper-animator-codex/scripts/query_shotcraft.mjs \
  --query "premium product reveal, beat-synced theme changes" \
  --limit 8 \
  --json

HyperFrames entries remain the renderable catalog; ShotCraft supplies shot grammar and motion references that are translated into motion_contract commitments and then into HyperFrames/GSAP HTML.

For high-impact ShotCraft refs, the validator requires an explicit motion_contract.motion_preset. The bundled references/shotcraft/motion-pack/ directory contains small GSAP helpers to copy before freehanding the animation.

Validate a dual-catalog plan before authoring:

node skills/hyper-animator-codex/scripts/validate_shot_plan.mjs shot-plan.json
python3 skills/hyper-animator-codex/scripts/validate_hyperframes_html.py composition.html --shot-plan shot-plan.json

When model routing is available, the client's high_quality tier is reserved for page generation and animation authoring. Planning, discovery, audio prompting, validation, and packaging use its fast tier; the shot plan records the actual model names.

Contents

  • skills/hyper-animator-codex/SKILL.md: Codex and Claude Code skill instructions.
  • skills/hyper-animator-codex/contracts/: provider/model policy and shot-plan schema.
  • skills/hyper-animator-codex/references/: HyperFrames catalog, ShotCraft knowledge bundle, authoring patterns, workflows, and examples.
  • skills/hyper-animator-codex/scripts/query_shotcraft.mjs: ShotCraft intent/reference search.
  • skills/hyper-animator-codex/scripts/validate_provider_policy.mjs: generated-audio provider/endpoint guard.
  • skills/hyper-animator-codex/scripts/validate_shot_plan.mjs: dual-catalog shot-plan validator.
  • skills/hyper-animator-codex/scripts/detect_project_files.mjs: top-level outline and narration detector for first-run/restart workflows.
  • skills/hyper-animator-codex/scripts/generate_minimax_tts.mjs: MiniMax voice listing and narration TTS helper.
  • skills/hyper-animator-codex/scripts/generate_subtitles.mjs: timed subtitle JSON/SRT generator.
  • skills/hyper-animator-codex/scripts/git_checkpoint.mjs: Git initialization and stage-commit helper for /hyper-animator runs.
  • skills/hyper-animator-codex/scripts/validate_hyperframes_html.py: static pre-render HTML quality gate.

Optional Beat Detection

The skill can analyze background music and guide Codex to align HyperFrames/GSAP transitions to beats, bars, energy peaks, and detected music segments.

Install optional Python dependencies yourself if you want automatic beat analysis. The skill will not install them during a run:

python3 -m pip install librosa pydub numpy click

Analyze WAV/FLAC/OGG without ffmpeg. MP3/M4A/AAC/WMA require system ffmpeg.

Run the bundled analyzer from an installed skill directory or repository checkout:

python3 skills/hyper-animator-codex/scripts/analyze_music_beats.py path/to/music.wav -o beat-map.json --fps 60 --pretty

Generate MiniMax background music from an installed skill directory:

node scripts/generate_minimax_music.mjs \
  --prompt "bright electronic product launch, confident, clean, rising energy" \
  --output-dir hyper-animator-output/music

Then analyze the generated audio with analyze_music_beats.py and align animation timing to the resulting beat map.

Development

npm run preflight
npm test
npm run check
npm run pack:check