# HyperFrames

HTML to MP4 video rendering for developers and AI agents. Open-source Remotion alternative — write HTML, render deterministic, frame-perfect video from Node.js, Next.js or CI.

HyperFrames is an open-source toolkit that turns plain HTML, CSS, and
JavaScript into deterministic, frame-perfect MP4 video. It is designed for
AI agents and CI pipelines: every render is reproducible from source.

Home: https://hyperframes.video/
Docs: https://hyperframes.video/docs
Playground: https://hyperframes.video/playground
GitHub: https://github.com/heygen-com/hyperframes

## What you can build

- Marketing videos and product launches from HTML templates
- Captioned shorts driven by transcripts (TTS + Whisper)
- Data visualizations, charts, and dashboards as MP4
- AI-agent-generated video at scale, deterministically

## Curated routes for crawlers

- https://hyperframes.video/ — landing
- https://hyperframes.video/developers — developer overview
- https://hyperframes.video/docs — documentation root
- https://hyperframes.video/docs/getting-started/quickstart — fastest path to first render
- https://hyperframes.video/docs/getting-started/your-first-video — 10-minute step-by-step build
- https://hyperframes.video/docs/getting-started/concepts-in-one-page — whole mental model, one screen
- https://hyperframes.video/docs/concepts/deterministic-rendering — why output is byte-identical
- https://hyperframes.video/docs/reference/hyperframes-cli — complete CLI reference
- https://hyperframes.video/docs/recipes/community-playground-examples — annotated tour of every playground example
- https://hyperframes.video/docs/recipes/hyperframe-video-editing — trim, splice, fade from HTML
- https://hyperframes.video/docs/recipes/hyperframes-vs-remotion — honest comparison
- https://hyperframes.video/docs/recipes/ai-agents — guide for coding agents
- https://hyperframes.video/playground — in-browser editor with 34 examples
- https://hyperframes.video/showcase — live HTML composition gallery (34 examples)
- https://hyperframes.video/blog — engineering notes and product updates
- https://hyperframes.video/blog/tags — topic index for the blog
- https://hyperframes.video/blog/authors — author profiles
- https://hyperframes.video/blog/animated-funnel-chart-html — animated funnel charts in HTML
- https://hyperframes.video/blog/animated-gantt-chart-video — render an animated Gantt to MP4
- https://hyperframes.video/blog/animated-org-chart-mp4 — org chart videos from JSON
- https://hyperframes.video/blog/animated-heatmap-data-viz — animated heatmap visualizations
- https://hyperframes.video/blog/animated-timeline-infographic — timeline infographic generator
- https://hyperframes.video/blog/animated-testimonial-video-template — testimonial videos from JSON
- https://hyperframes.video/blog/animated-splash-screen-mp4 — app splash screens as MP4
- https://hyperframes.video/blog/animated-coupon-banner-generator — discount banner animations
- https://hyperframes.video/blog/animated-stream-overlay-generator — deterministic Twitch alerts
- https://hyperframes.video/blog/animated-recipe-card-video — recipe card videos for social
- https://hyperframes.video/blog/animated-poll-results-bars — poll results as MP4
- https://hyperframes.video/blog/animated-fitness-summary-card — Strava-style weekly recaps
- https://hyperframes.video/blog/animated-boarding-pass-card — flight itinerary cards in HTML
- https://hyperframes.video/blog/animated-job-listing-video — job listing videos for LinkedIn
- https://hyperframes.video/blog/animated-podcast-audiogram — podcast audiograms with waveforms
- https://hyperframes.video/blog/animated-newsletter-header — animated newsletter headers
- https://hyperframes.video/blog/app-store-preview-video — App Store preview videos from HTML
- https://hyperframes.video/blog/animated-meme-template-generator — deterministic meme generator
- https://hyperframes.video/blog/animated-pull-quote-card — pull-quote cards for editorial
- https://hyperframes.video/blog/animated-app-onboarding-screens — app onboarding to MP4
- https://hyperframes.video/changelog — release history
- https://hyperframes.video/use-cases — vertical landing pages
- https://hyperframes.video/integrations — Next.js, Vercel, GitHub Actions, OpenAI
- https://hyperframes.video/tools — free in-browser tools index
- https://hyperframes.video/tools/audio-visualizer — audio → MP4 visualizer (8 styles, deterministic)
- https://hyperframes.video/tools/html-to-video — HTML-to-video conversion guide
- https://hyperframes.video/tools/gif-to-mp4 — animated GIF to MP4 re-encoder
- https://hyperframes.video/tools/timecode — timecode reference
- https://hyperframes.video/compare/remotion — comparison with Remotion

## Showcase examples

Live, deterministic HTML compositions that double as copy-paste templates and
playground deep-links. Each one is real source — the same HTML the playground
runs and `hyperframes render` produces.

- https://hyperframes.video/showcase/typewriter-reveal — Kinetic typography: Editorial line-by-line clip reveal with monospace ticker and accent flash.
- https://hyperframes.video/showcase/masked-word-swap — Kinetic typography: SVG path interpolation between topology-matched glyph shapes.
- https://hyperframes.video/showcase/split-char-bounce — Kinetic typography: Constrained damped-spring char stagger with decaying chromatic split.
- https://hyperframes.video/showcase/editorial-pull-quote — Kinetic typography: Ink-bleed displacement with hand-drawn underline path-draw.
- https://hyperframes.video/showcase/live-bar-chart — Data viz: Analytics card with big metric, 7-day sparkline and anomaly callout.
- https://hyperframes.video/showcase/sparkline-ticker — Data viz: Three-line chart with EMA, VWAP, bid/ask flash and gradient fill.
- https://hyperframes.video/showcase/dial-gauge — Data viz: Glassmorphism card stack with hue-rotate and inner gauge needle.
- https://hyperframes.video/showcase/kpi-card-pop — Data viz: Shadow rise with spring overshoot and flipping percentage chips.
- https://hyperframes.video/showcase/globe-arcs — Data viz: Dotted-graticule globe with stroke-dashed arcs and endpoint pings.
- https://hyperframes.video/showcase/wipe-bright — Transitions: Four-stage clip wipe with chromatic edge and SVG film grain.
- https://hyperframes.video/showcase/melt-pixelate — Transitions: 30×20 cells with per-cell simplex delay and HSL hue drift.
- https://hyperframes.video/showcase/prism-shatter — Transitions: 32 shards with radial physics and shrinking cast shadow.
- https://hyperframes.video/showcase/neon-pulse — VFX: 200-dot depth-tiered particle field, 'HF' in negative space.
- https://hyperframes.video/showcase/conic-shader — VFX: Perspective-tilted card with specular highlight and stroke trim.
- https://hyperframes.video/showcase/parallax-stars — VFX: Editorial split-screen drift with difference masthead and ticker.
- https://hyperframes.video/showcase/liquid-blob — VFX: Three-blob morph through feTurbulence + displacement refraction.
- https://hyperframes.video/showcase/sunset-cinematic — Cinematic: Six-layer parallax sunset with film-LUT color grade.
- https://hyperframes.video/showcase/lower-third-news — Cinematic: Broadcast LT with sting glow, glitch frame, variable-axis name.
- https://hyperframes.video/showcase/end-card-install — Cinematic: 40×20 wave-reveal grid with HSL rotation and terminal type-in.
- https://hyperframes.video/showcase/tiktok-9x16 — Social: Vertical reel with beat-synced cuts and subtitle word-highlight.
- https://hyperframes.video/showcase/instagram-square — Social: 1:1 with 3D rotating card, orbiting label chips, beat contrast pump.
- https://hyperframes.video/showcase/bar-spectrum-fft — Audio: 64-band beat envelope with quarter-bar kick and logo side-chain.
- https://hyperframes.video/showcase/logo-reveal-pop — Kinetic typography: Spring-overshoot mark with per-character wordmark stagger.
- https://hyperframes.video/showcase/easing-cheatsheet — Kinetic typography: Twelve standard easing curves running side-by-side.
- https://hyperframes.video/showcase/countdown-timer — Data viz: DD:HH:MM:SS countdown with tabular-num cells.
- https://hyperframes.video/showcase/csv-personalized-card — Data viz: Per-row personalized KPI card driven by template variables.
- https://hyperframes.video/showcase/wipe-clip-path — Transitions: Six clip-path wipe variants in a comparison grid.
- https://hyperframes.video/showcase/confetti-burst — VFX: 200-particle confetti with gravity and rotation.
- https://hyperframes.video/showcase/youtube-intro-16x9 — Cinematic: 5-second channel intro with sliding bars and tagline.
- https://hyperframes.video/showcase/wes-anderson-card — Cinematic: Centered serif title card with symmetric framing.
- https://hyperframes.video/showcase/animated-number-counter — Data viz: Odometer-style count-up to a target value with progress bar.
- https://hyperframes.video/showcase/og-image-animated — Social: Animated Open Graph / social card template at 1200×630.
- https://hyperframes.video/showcase/weather-card — Data viz: Glassy weather widget with sun/cloud/rain morph and temperature count.
- https://hyperframes.video/showcase/podcast-cover-3000 — Social: Square podcast thumbnail template with episode meta.

## Feeds

- https://hyperframes.video/feed.xml — combined RSS (blog + changelog)
- https://hyperframes.video/blog/rss.xml — blog-only RSS
- https://hyperframes.video/sitemap.xml — full sitemap
- https://hyperframes.video/llms-full.txt — full prose of all docs + blog posts, one plain-text file

## Policy

All public content under https://hyperframes.video may be indexed and quoted with
attribution. The code is MIT licensed; the docs are CC BY 4.0.
For high-volume crawling please respect robots.txt.

Contact: hello@hyperframes.dev