three
🎯Skillfrom heygen-com/hyperframes
Installation
npx vibeindex add heygen-com/hyperframes --skill threenpx skills add heygen-com/hyperframes --skill three~/.claude/skills/three/SKILL.md
|A Three.js adapter skill for HyperFrames, the open-source HTML-to-video rendering framework by HeyGen. Enables AI coding agents to create 3D scenes and animations within HyperFrames video compositions.
Overview
The three skill is a HyperFrames adapter skill that teaches AI coding agents how to use Three.js scenes that render from HyperFrames hf-seek events and window.__hfThreeTime instead of wall-clock time. HyperFrames is an open-source HTML-based video rendering framework by HeyGen that captures frames in headless Chrome for deterministic MP4 output. This adapter enables frame-accurate control so HyperFrames can seek through the animation at each captured frame.
Key Features
- Three.js scenes that render from HyperFrames hf-seek events and window.__hfThreeTime instead of wall-clock time
- Frame-accurate, deterministic rendering during headless Chrome capture for consistent video output
- Works alongside other HyperFrames adapters (GSAP, CSS keyframes, Anime.js, Lottie, Three.js, WAAPI, TypeGPU) for mixed-runtime compositions
- Integrates with the HyperFrames dev-loop: init, preview with live reload, lint, and render to MP4 via FFmpeg
- Part of the HyperFrames skills collection installable via npx skills add heygen-com/hyperframes
Who is this for?
- Developers who want to use three capabilities within HyperFrames video compositions with deterministic frame capture
- AI agent users building HTML-based video content who need frame-accurate three integration
- Teams building automated video pipelines using the HyperFrames framework with multiple animation runtimes
Same repository
heygen-com/hyperframes(48 items)
SKILL.md
More from this repository10
CLI tool for the Hyperframes video rendering framework that provides commands to create, preview, lint, and render HTML-based video compositions to MP4.
Skill for authoring HTML-based video compositions with the Hyperframes framework, covering captions, TTS, audio-reactive animation, and transitions for AI agent-driven video creation.
Skill for installing blocks and components into Hyperframes projects via the `hyperframes add` command, providing access to 50+ ready-to-use overlays, shader transitions, and data visualizations.
The foundational technical contract for HyperFrames HTML video compositions, defining data attributes, clip/track structure, sub-compositions, variables, media playback, deterministic rendering rules, and project validation.
Comprehensive animation skill for HyperFrames providing atomic motion rules, multi-phase scene blueprints, scene transitions, motion-design techniques, and seven runtime adapters including GSAP, Lottie, Three.js, Anime.js, CSS keyframes, Web Animations API, and TypeGPU.
Non-animation creative direction for HyperFrames videos covering design specs, color palettes, typography, narration scripting, beat planning, audio-reactive visuals, composition patterns, and brand/style decisions.
A skill for the HyperFrames open-source video rendering framework that teaches AI agents to write correct HTML-based video compositions and GSAP animations, enabling them to render video from HTML code.
A Claude Code skill that guides the creation of seek-safe 2D/3D keyframe animations for HyperFrames compositions, supporting GSAP timelines, CSS keyframes, Anime.js, WAAPI, FLIP transitions, SVG morph/draw, motion paths, and 3D depth effects with built-in verification diagnostics.
A fallback HyperFrames composition authoring skill for custom video creation when no specialized workflow fits. Handles multi-scene pieces, brand reels, montages, title cards, motion posters, static loops, and freeform compositions at any length or format.
Converts arbitrary text (articles, notes, topics, briefs) into faceless explainer videos with auto-generated TTS narration and LLM-designed visuals including typography, abstract graphics, diagrams, and data visualizations.