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.7.1

Published

Install the Hyper Animator skill for Codex and Claude Code.

Vulnerabilities

Powered byPowered by Snyk
  • 0High
  • 0Medium
  • 0Low

Links

Git

Maintainers

pkuasulepkuasule

Keywords

codexcodex-skillhyperframesanimationvideogsap

Readme

hyper-animator-codex

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

The skill guides Codex through a HyperFrames animation workflow: natural-language brief, outline/narration detection, clarification questions, catalog-map intent matching, style and motion selection, HTML animation authoring, validation, user approval, 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 is the preferred generated-background-music provider and the required narration TTS provider. Configure it during install so the copied Codex skill can generate music and voiceover without asking for credentials later:

npx hyper-animator-codex install --force \
  --minimax-api-key "$MINIMAX_API_KEY" \
  --minimax-group-id "$MINIMAX_GROUP_ID" \
  --minimax-model music-2.6-free

Environment fallback is also supported:

MINIMAX_API_KEY=... MINIMAX_GROUP_ID=... 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

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

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 \
  --output-dir hyper-animator-output/voice

Generate timed subtitle JSON and SRT:

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

Contents

  • skills/hyper-animator-codex/SKILL.md: Codex skill instructions.
  • skills/hyper-animator-codex/references/: HyperFrames catalog map, workflow guide, pseudocode, and request examples.
  • 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:

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 test
npm run pack:check