silenceper – Articles

open-slide: A Slide Framework Built for AI Agents

Thu, 07 May 2026 19:47:00 +0800

One-line positioning

open-slide is a React slide framework built for AI agents: you describe what the deck should be, the agent writes React pages, and open-slide handles the canvas, preview, presentation mode, export, and iteration loop.

Basic information

Item	Details
Project	open-slide
Author	1weiho
Positioning	Agent-native slide framework
Stack	TypeScript, React, Vite, pnpm, Turbo
License	MIT
Latest version	`@open-slide/core@1.0.6`
GitHub popularity	2.1k+ stars / 143 forks
Website	https://open-slide.dev
Init command	`npx @open-slide/cli init my-slide`

What problem does it solve?

The traditional slide-making workflow usually happens in Keynote, PowerPoint, Figma, or a browser-based editor. You drag elements around, adjust styles, and manually polish layout details.

But a lot of that work can now be handled by AI agents: structure, copy, visual hierarchy, colors, and even code implementation. The idea behind open-slide is simple: if slides are visual code, let agents write that code directly.

open-slide provides a stable slide runtime:

Each page is a React component.
Every slide is rendered into a fixed 1920 × 1080 canvas.
The framework supports preview, hot reload, presentation mode, and export.
Agents can follow built-in skills and rules to generate and edit decks.

This means you do not need to set up React, Vite, rendering, and export logic from scratch. You describe the deck you want, the agent writes the pages, and open-slide turns those pages into a presentable and iterable deck.

Core features

1. Agent-native authoring

The main selling point of open-slide is that it is designed around agents writing slides.

It can work with coding agents such as Claude Code, Codex, and Cursor. A scaffolded workspace ships with agent-facing skills, including:

/create-slide: drafts a deck end to end, starting from topic, aesthetic, page count, text density, and motion preference.
/slide-authoring: gives the agent technical rules for the 1920 × 1080 canvas, type scale, palette, and layout constraints.

In other words, open-slide is not just a slide component library. It also defines how an agent should author and revise a deck.

2. React-first: every slide is code

open-slide does not introduce a constrained slide DSL. Each slide page is just an arbitrary React component.

That means:

You can write normal TSX.
Layout, styling, animation, and component structure are fully controllable.
Slides can be versioned with Git.
Agents can edit the source directly.
The deck can be reviewed like a regular frontend codebase.

The website summarizes this well: A slide is a file. Just React, nothing else.

3. Fixed 1920 × 1080 canvas

Every slide renders into a fixed 1920 × 1080 canvas.

This matters for agent-generated slides because it gives the agent a clear visual boundary. Font sizes, layout, element positions, and proportions can all be designed around a stable canvas.

Compared with a responsive web page, this fixed canvas is closer to a real presentation deck and is easier to export and present.

4. In-browser inspector

open-slide also provides an interesting iteration flow. In the dev server, you can click an element and leave a comment on it.

For example, you can click a heading and write:

“make this red”
“shrink the headline”
“change the copy to Open Slide Rocks”

Those comments are persisted as @slide-comment markers in the source. Then /apply-comments lets the agent read pending comments, update the code, and clear the markers.

This creates a useful loop: let the agent generate the first version, click to leave human feedback, and let the agent apply the next round of changes.

5. Asset manager and logo search

open-slide includes an assets panel for managing images, videos, and fonts per deck.

It also integrates the svgl logo catalogue, so you can search for and insert brand logos without hunting for SVG files manually. This is especially useful for product decks, pitches, and technical talks.

6. Professional presentation mode

open-slide is not limited to dev preview. It includes a proper present mode with:

fullscreen playback
keyboard navigation
current and next slide preview
speaker notes
timer

The result is not just a browser page. It can be used as an actual presentation deck.

7. Export to static HTML and PDF

open-slide can export a deck as:

self-contained static HTML
print-ready PDF

The static HTML output can be deployed to Vercel, Cloudflare Pages, Netlify, Zeabur, or any static hosting service. It works for both local presenting and online sharing.

8. Slide manager

The project also includes a slide manager for organizing multiple decks with folders, custom emoji, and drag-and-drop reordering.

Once you have more than a few generated decks, that management layer becomes useful.

Who is it for?

open-slide is a good fit for:

People who want to generate decks quickly with Claude Code, Codex, or Cursor.
Developers who prefer “slides as code.”
Teams that need presentable decks for technical plans, product demos, or project updates.
Users who want slide decks to be versioned, reviewable, and automatable.
Anyone tired of manually dragging elements around in traditional slide tools.

It is especially suitable for technical content: architecture explanations, product demos, roadmaps, open-source project introductions, and engineering talks.

Quick start

Initialize a project:

npx @open-slide/cli init my-slide
cd my-slide
pnpm dev

The generated workspace includes the open-slide runtime and agent-related rules. You can ask an agent to generate a deck through /create-slide, or directly edit:

slides/<id>/index.tsx

If you want to work on open-slide itself, the repository is a pnpm + Turbo monorepo:

pnpm install
pnpm dev
pnpm build
pnpm check
pnpm lint

Main directories:

Path	Description
`packages/core`	Core runtime, including home page, slide viewer, present mode, inspector, Vite plugin, and dev/build/preview CLI
`packages/cli`	Scaffolder for `npx @open-slide/cli init`
`apps/demo`	Demo workspace used for local development and examples

Conclusion

open-slide points to a natural new workflow: instead of asking AI to generate a static PowerPoint file, let an agent write a runnable, iterable, and version-controlled slide codebase.

It combines React, a fixed canvas, presentation mode, inspector comments, asset management, and export into a stable runtime for agent-authored decks.

If you already use Claude Code, Codex, or Cursor for content and code generation, open-slide is a good project to try for agent-generated presentations.

OpenLess: An Open-Source AI Voice Input Tool That Turns Speech into Polished Text

Thu, 07 May 2026 11:26:00 +0800

One-line positioning

OpenLess is an open-source desktop voice input tool: hold a hotkey, speak, release it, and AI-polished text appears at your current cursor.

Basic information

Item	Details
Project	OpenLess
GitHub	https://github.com/appergb/openless
Website	https://openless.top
Positioning	Open-source voice input plus AI text polishing
Platforms	macOS 12+, Windows 10+
Stack	Tauri 2, Rust, React, TypeScript
License	MIT
Current version	v1.2.21-tauri
GitHub popularity	900+ stars

What problem does it solve?

Many voice input tools only produce a literal transcript. The result often still needs manual cleanup: removing filler words, fixing punctuation, and restructuring the text.

OpenLess focuses on a more practical goal: turning spoken language directly into usable written text.

The workflow is straightforward. Put your cursor in ChatGPT, Claude, Cursor, Notion, an email draft, WeChat, Slack, or almost any other text field. Press a global hotkey and speak. OpenLess records your voice, transcribes it, polishes the text with AI, and inserts the result at the cursor. If direct insertion is blocked, it falls back to copying the output to the clipboard so your dictation is not lost.

Its most distinctive mode is the AI prompt mode. You can speak loosely, and OpenLess turns your words into a structured prompt with clearer context and constraints, ready to send to ChatGPT, Claude, or Cursor.

For example, you might say:

I want ChatGPT to write a SQL query from the orders table, get last month’s orders, group by customer, sort by amount descending, and return the top ten.

OpenLess can turn that into:

Please write a SQL query that:

- Pulls orders from last month from the `orders` table.
- Groups by customer.
- Sorts by total amount, descending.
- Returns the top 10 rows only.

In this workflow, OpenLess is not just a dictation tool. It turns spoken thoughts into text that is easier to send, ask, or submit.

Core features

1. Global-hotkey voice input

OpenLess lets you trigger recording with a global hotkey. You can place your cursor in any input field and start speaking. The project currently supports both push-to-talk and toggle recording modes, and Esc can cancel the current session.

2. Multiple output modes

OpenLess does not stop at raw transcription. It provides several output modes:

Raw: output the transcript directly.
Light polish: fix filler words, punctuation, and obvious wording issues while preserving meaning.
Structured: turn loose speech into a structured AI prompt.
Formal: rewrite spoken text into a more formal written style.

The structured mode is the key differentiator, especially for people who frequently write AI prompts.

3. Insert text at the current cursor

OpenLess is not trying to become another note-taking app. Its purpose is to reduce input friction. The polished text is inserted directly into the app you are already using, such as a browser, chat app, editor, or document tool.

If an app blocks direct insertion, OpenLess falls back to the clipboard, and you can paste the result manually.

4. Dictionary and hotwords

The project includes a dictionary feature for product names, people names, and technical terms. Enabled entries are used as hotwords during speech recognition and as semantic hints during polishing.

This is useful if you often dictate English product names, technical terms, or internal team vocabulary.

5. History and settings

OpenLess provides a main window for overview, history, dictionary, style, and settings. You can review the original transcript and polished output for previous recordings, and you can adjust language, hotkeys, and model credentials.

6. Local-first and bring-your-own credentials

Many similar tools are closed-source subscription products where your data, dictionary, and model calls stay inside the vendor’s account system.

OpenLess takes a different approach: the app is open source, data is kept primarily on your own machine, and you configure the speech recognition and text polishing services yourself. It currently supports Volcengine ASR, OpenAI Whisper-compatible batch ASR, and Ark / DeepSeek / OpenAI-compatible Chat Completions.

Who is it for?

OpenLess is a good fit for:

People who frequently write prompts for ChatGPT, Claude, Cursor, or Gemini.
Users who write emails, specs, and long messages but do not want to type everything manually.
Developers who want to dictate code comments, commit messages, or PR descriptions.
Users who prefer an open-source option over fully closed subscription voice input tools.
Heavy macOS or Windows desktop users.

If your daily work involves turning thoughts into written text, OpenLess can fit naturally into that workflow.

Quick start

End users can download installers from GitHub Releases:

macOS: OpenLess_<version>_aarch64.dmg
Windows: OpenLess_<version>_x64-setup.exe

On first launch, you need to grant the required permissions.

For macOS:

Grant microphone access.
Grant accessibility access.
Quit and reopen OpenLess.
Fill in ASR and LLM credentials in Settings.

For Windows:

Grant microphone access.
Check that the global hotkey listener is active in Settings.
Fill in ASR and LLM credentials.

Developers can run it from source with:

git submodule update --init --recursive

cd openless-all/app
npm ci
npm run tauri dev

The active app lives in openless-all/app/. The desktop client is built with Tauri 2, a Rust backend, and a React / TypeScript frontend.

Conclusion

OpenLess can be understood as an open-source AI voice input assistant.

It does not answer questions, execute tasks, or try to become another AI client. It focuses on one job: turning what you say into clearer text that is ready to send, ask, or paste into the current input field.

For people who frequently write prompts, long messages, emails, specs, or code-related descriptions, this is a practical direction. Open source, bring-your-own credentials, local-first storage, and AI-prompt-oriented restructuring are the main reasons OpenLess is worth watching.

Petdex: Find an Animated Companion for Codex

Wed, 06 May 2026 23:20:00 +0800

One-line Positioning

Petdex is a public gallery of animated companions for Codex. It lets you browse, preview, collect, and install pixel-style companions so your local Codex experience feels a little more personal and playful.

Basic Info

Item	Info
Website	https://petdex.crafter.run/
GitHub	https://github.com/crafter-station/petdex
Positioning	Codex-compatible animated pets public gallery
Current scale	870+ pets shown on the homepage, with 600+ GitHub stars
Quick install example	`npx petdex install boba`

What Problem Does It Solve?

Command-line tools like Codex are efficient, but they can also feel a bit cold: text, tasks, logs, and results fill the window, while the environment itself has very little personality.

Petdex does something simple and charming. It turns animated Codex companions into a public gallery, so users can browse it like an avatar library or sticker collection and pick a pet for their own Codex setup.

It solves three small but real problems:

Centralized discovery: instead of hunting for pet packs across scattered links, you can browse them in one place.
Preview before installing: each companion has visuals, states, descriptions, tags, and metadata.
Clear installation path: the site gives you a direct install command, making the first try low-friction.

This is not a tool for making the model more capable. It is a small layer of personality and ritual around a developer workflow.

Core Features

1. Browse the Pet Gallery

The homepage presents a large set of companion cards. Each card includes details such as number, name, category, description, tags, author, and install data.

For example, Boba is a tiny otter sipping bubble tea. Duo, Doraemon, Noir Webling, and other companions are presented in pixel-art or chibi-style forms.

That makes Petdex feel more like a living pet index than a plain file directory.

2. Install with One Command

The homepage shows a direct install example:

npx petdex install boba

The interaction is straightforward: find a companion you like, copy the command, and install it.

3. Featured Collections

Petdex also includes collections, with featured sets on the homepage. Examples include:

GRAYCRAFT: an original mech-style character set
Meme Lords: meme-inspired characters such as Pepe, Wojak, and Doodlebob
Anime Heroes: anime-inspired companion designs

Collections make browsing more thematic and give creators a way to present related designs together.

4. Community Submission

Petdex includes a Submit entry point. Its README also mentions browser-based validation and submission for community pet packages.

That means Petdex is not just a read-only catalog. It is designed to grow through community contributions.

5. Open-source Maintenance

The Petdex GitHub repository is public. The README describes it as a Codex-compatible animated pets gallery and lists several core capabilities:

Browse approved pet packs
Preview every animation state
Download individual ZIP packages
Download the full gallery pack
Validate and submit community pet packages in the browser

From the repository structure, pet packages live under public/pets, while downloadable archives are generated under public/packs.

Who Is It For?

Petdex is a good fit for:

people who use Codex often and want a more personal local environment;
developers who like pixel art, chibi characters, and desktop-pet-style details;
users who want their toolchain to feel a little less sterile;
creators who want to design and share Codex companions.

If you only care about model quality, task success rate, or engineering automation, Petdex is not essential. But if you spend a lot of time working with Codex in a terminal, it can make that daily experience feel lighter.

Quick Start

Open the website:

https://petdex.crafter.run/

Pick a companion, such as Boba, and run:

npx petdex install boba

You can also keep exploring more pets, collections, and creators on the site.

To learn more about the project itself, visit the GitHub repository:

https://github.com/crafter-station/petdex

Conclusion

Petdex is not a large or complicated tool. It is more like a playful entry point in the Codex ecosystem: a public index where companions can be browsed, previewed, installed, and submitted.

Its value is not in making Codex smarter. Its value is in making the experience of using Codex more personal, lighter, and more like a workspace that the community can decorate together.

Keep Codex Fast: A Safe Maintenance Skill for Keeping Local Codex State Lightweight

Mon, 04 May 2026 15:49:45 +0800

One-line Positioning

Keep Codex Fast is a local-state maintenance skill for heavy Codex users. It inspects first, creates handoff notes, backs up important state, and then safely archives old sessions, logs, and temporary workspaces that can make the local experience feel heavier over time.

Basic Info

Item	Info
GitHub	https://github.com/vibeforge1111/keep-codex-fast
Author	vibeforge1111
License	MIT
Main language	Python
Default branch	main
Positioning	Codex local-state inspection and safe maintenance skill
Current traction	About 559 stars and 29 forks, checked on 2026-05-04

What Problem Does It Solve?

After using Codex for a long time, many users run into a kind of “heaviness” that is hard to pin down:

Long conversations keep accumulating.
Old threads are frequently resumed.
Multiple repositories are active at the same time.
Local terminals, dev servers, logs, and workspaces keep piling up.
You want to clean things up, but worry about deleting useful context.

Keep Codex Fast is not about making the model answer faster. It is about organizing the local runtime state Codex leaves on your machine. Its core principle is intentionally conservative:

Make handoffs first. Archive, don’t delete. Apply changes only when you are ready.

In other words: write continuity notes first, archive instead of deleting, and only apply changes after you have confirmed that you are ready.

This is practical for people who use Codex for real development work. The part that makes cleanup hard is usually not the files themselves. It is the project decisions, debugging paths, failed commands, and next-step plans hidden inside older chats. Keep Codex Fast turns “cleanup” into a safer workflow: inspect first, preserve recoverable context, then archive.

Core Workflow

flowchart TD
A[Codex local state becomes heavy] --> B[Read-only inspection]
B --> C[Generate maintenance report]
C --> D{Any important old sessions?}
D -- Yes --> E[Create handoff notes]
E --> F[Back up important state]
D -- No --> F
F --> G[Archive old sessions and workspaces]
G --> H[Rotate large logs]
H --> I[Prune stale project references]
I --> J[Inspect again and confirm results]

The most important part of this flow is the first step: read-only inspection by default. Keep Codex Fast does not immediately move files or delete history. It first reports what local state exists and where the weight is coming from.

1. Read-only Report by Default

The project README makes the default mode clear: it only reports. It does not write files, create backups, move directories, or mutate local Codex state. It helps you see which areas are growing, including active sessions, archived sessions, logs, old workspaces, stale project references, and heavy Node or dev processes.

That makes the first run low-risk. You can treat it as a health check rather than a cleanup operation.

2. Handoffs First

Keep Codex Fast puts special emphasis on handoff notes. A handoff is a small continuity document that records:

what you are working on;
what has already changed;
which files matter;
which commands or checks have already been run;
what errors, warnings, or open problems remain;
what should happen next.

With that document in place, you can archive a heavy old chat and continue from a fresh Codex session without relying on a growing historical thread.

3. Back Up First, Archive Instead of Deleting

When it actually performs maintenance, Keep Codex Fast still takes the conservative path: back up important state first, then move old sessions, stale workspaces, and large logs into an archive location. It removes items from the hot path instead of permanently deleting them.

According to the project description, it can handle:

old non-pinned active sessions;
expired worktrees;
large logs_2.sqlite* log files;
stale or temporary project references in config.toml;
extended Windows path inconsistencies such as \\?\C:\...;
reports for heavy Node or dev processes.

4. Manual Application, Not Automatic Cleanup

The project also draws an important boundary: scheduled maintenance is better suited for reminders and reports, not automatic cleanup. The reason is simple. Automation cannot know which old sessions are still important, or whether a handoff is good enough.

A safer workflow is to inspect regularly, confirm manually, and only apply maintenance after Codex is closed or after explicitly waiting for Codex to exit.

Who Is It For?

Keep Codex Fast is most useful for Codex users who:

use Codex for development every day;
work across multiple repositories;
keep long chat histories;
often resume old threads for debugging or implementation;
run multiple local terminals, services, or worktrees;
want to clean local Codex state without losing useful context.

If you only open Codex occasionally for small questions, you may not feel the value yet. But once Codex becomes part of your daily development workflow, this kind of local-state maintenance becomes increasingly important.

Quick Start

Inside Codex, you can ask it to install the skill directly:

Install the keep-codex-fast skill from https://github.com/vibeforge1111/keep-codex-fast

After installation, start with a read-only inspection:

Use $keep-codex-fast to inspect my Codex local state and recommend a safe maintenance plan.

If the report shows old sessions worth archiving, create a handoff for any project that may continue:

Create a comprehensive handoff document for this repo/session before I archive Codex history.

Include:
- repo/path and branch
- current goal
- what we already completed
- files touched or investigated
- commands/tests already run
- known errors, warnings, or failing checks
- open decisions
- constraints, user preferences, and do-not-touch areas
- the next 3-7 concrete steps

Also include a reactivation prompt I can paste into a fresh Codex chat so it can continue from this handoff without relying on the old chat context.

After important sessions have handoff notes, you can consider safe maintenance:

Use $keep-codex-fast to apply safe Codex maintenance.

Before changing anything, confirm that important active repo chats have handoff docs or do not need them.

Then back up first, archive instead of deleting, move stale worktrees, rotate large logs, prune dead config references, and verify the result.

If Codex is currently running, do not mutate local state. Tell me to close Codex first.

If you prefer running the script directly, the project also provides a CLI path:

python scripts/keep_codex_fast.py

Beyond the read-only report, you can use options such as:

python scripts/keep_codex_fast.py --details
python scripts/keep_codex_fast.py --backup-only
python scripts/keep_codex_fast.py --apply --archive-older-than-days 10 --worktree-older-than-days 7
python scripts/keep_codex_fast.py --apply --wait-for-codex-exit

Conclusion

The value of Keep Codex Fast is not aggressive cleanup. Its value is turning Codex local maintenance into a controlled process: report first, hand off first, back up first, then archive.

For heavy Codex users, old sessions and local state are both a burden and an asset. The project’s approach is practical: extract truly valuable context into handoff notes, move state that does not need to stay on the hot path, and let new Codex sessions start light again.

If your local Codex experience already feels heavier, Keep Codex Fast is worth running in read-only mode first. Even if you do not apply cleanup immediately, it can show which local state is growing and how to handle it safely later.

HyperFrames: An Open-source Rendering Framework for Generating Video with HTML

Sat, 02 May 2026 10:39:18 +0800

One-line Positioning

HyperFrames is HeyGen’s open-source HTML video rendering framework. It lets you define video scenes, timelines, and animations the same way you write web pages, then preview them in a browser and render them to MP4.

Basic Info

Item	Info
GitHub	https://github.com/heygen-com/hyperframes
Docs	https://hyperframes.heygen.com/introduction
NPM package	`hyperframes`
Main language	TypeScript
License	Apache-2.0
Current version	0.4.41
Requirements	Node.js >= 22, FFmpeg
Positioning	HTML-native, AI-first, deterministic video rendering

What Problem Does It Solve?

There are usually two common paths for video automation. One is to use traditional editing tools, which are great for manual production but not ideal for batch generation. The other is to use code-based video frameworks, which are automation-friendly but often require developers to enter a specific component system or DSL.

HyperFrames takes a route that feels closer to normal web development: the video itself is HTML.

It puts clips, subtitles, images, audio, timing, and track relationships into HTML elements and data-* attributes. You can organize scenes like a web page, animate them with familiar frontend tools such as CSS, GSAP, Lottie, and Three.js, then render the result to MP4 from the command line.

This approach is also friendly to AI agents. Large language models are already good at generating HTML, CSS, and simple scripts. HyperFrames adds skills, plugins, and CLI workflows for agents, so an agent can go from “describe a video” to “create the project, preview it, inspect it, and render it.”

Core Features

1. Describe Video Structure with HTML

The core input to HyperFrames is an HTML document. Each element uses attributes such as data-start, data-duration, and data-track-index to describe when it appears, how long it lasts, and where it sits in the timeline.

A simple video can be composed from ordinary HTML elements such as video clips, titles, images, and background music:

<div id="stage" data-composition-id="my-video" data-start="0" data-width="1920" data-height="1080">
 <video
 id="clip-1"
 data-start="0"
 data-duration="5"
 data-track-index="0"
 src="intro.mp4"
 muted
 playsinline
 ></video>

 <h1
 class="clip"
 data-start="1"
 data-duration="4"
 data-track-index="1"
 >
 Welcome to HyperFrames
 </h1>

 <audio
 data-start="0"
 data-duration="5"
 data-track-index="2"
 data-volume="0.5"
 src="music.wav"
 ></audio>
</div>

The benefit is a low learning curve. You do not need to learn a new video-editing format first, and you do not have to rewrite everything as React components.

2. Browser Preview, Local MP4 Rendering

HyperFrames provides a CLI for project initialization, preview, and rendering:

npx hyperframes init my-video
cd my-video
npx hyperframes preview
npx hyperframes render

During preview, you inspect the composition in a browser. During rendering, headless Chrome captures frames and passes them to FFmpeg to produce the final video. The official docs emphasize deterministic rendering: the same input should produce the same output, which matters for automation pipelines.

3. AI-agent-oriented Workflow

HyperFrames is not just a CLI. It also provides supporting workflows for AI coding tools. The project README recommends installing skills first:

npx skills add heygen-com/hyperframes

These skills teach agents how to write valid compositions, GSAP timelines, Tailwind v4 browser-runtime styles, and adapters for different animation runtimes.

The project also provides instructions or plugin entry points for tools such as Claude Code, Cursor, Codex, and Gemini CLI. In other words, “AI support” is not just a marketing phrase. Agent-friendly initialization, linting, previewing, and rendering are part of the framework’s design.

4. Support for Multiple Animation and Asset Runtimes

HyperFrames uses a Frame Adapter pattern to integrate animation runtimes. You can build animations with GSAP, Lottie, CSS animation, Three.js, or the Web Animations API, as long as they can seek frame by frame and participate in deterministic rendering.

This matters for video automation. Video is not just screen recording. You need a deterministic frame at a specific timestamp. HyperFrames abstracts the relationship between “how the page plays” and “how the renderer captures frames”, allowing different animation technologies to enter the same video-generation pipeline.

5. Built-in Component Registry and Multiple Packages

The project provides 50+ ready-to-use blocks and components, such as social-media overlays, shader transitions, data visualization, and cinematic effects. They can be added through commands:

npx hyperframes add flash-through-white
npx hyperframes add instagram-follow
npx hyperframes add data-chart

From the repository structure, HyperFrames is a monorepo with several key packages:

Package	Purpose
`hyperframes` / `@hyperframes/cli`	CLI for init, preview, lint, and render
`@hyperframes/core`	Types, parser, generator, linter, runtime, and frame adapters
`@hyperframes/engine`	Puppeteer + FFmpeg based page-to-video rendering engine
`@hyperframes/producer`	Full rendering pipeline, including capture, encoding, and audio mixing
`@hyperframes/studio`	Browser-side composition editor UI
`@hyperframes/player`	Embeddable `<hyperframes-player>` Web Component
`@hyperframes/shader-transitions`	WebGL shader transitions for compositions

Official Video Examples

npx hyperframes init my-video --example warm-grain

Example	Type	Video link
Warm Grain	Brand / lifestyle	https://static.heygen.ai/hyperframes-oss/docs/images/templates/warm-grain.mp4
Play Mode	Social media / product launch	https://static.heygen.ai/hyperframes-oss/docs/images/templates/play-mode.mp4
Swiss Grid	Enterprise / technology / data	https://static.heygen.ai/hyperframes-oss/docs/images/templates/swiss-grid.mp4
Kinetic Type	Title card / promo	https://static.heygen.ai/hyperframes-oss/docs/images/templates/kinetic-type.mp4
Decision Tree	Explainer video / tutorial	https://static.heygen.ai/hyperframes-oss/docs/images/templates/decision-tree.mp4
Product Promo	Product showcase	https://static.heygen.ai/hyperframes-oss/docs/images/templates/product-promo.mp4
NYT Graph	Data story / chart video	https://static.heygen.ai/hyperframes-oss/docs/images/templates/nyt-graph.mp4
Vignelli	Vertical title / announcement	https://static.heygen.ai/hyperframes-oss/docs/images/templates/vignelli.mp4

Who Is It For?

HyperFrames is a good fit for several scenarios:

Frontend developers who want to generate video with code
If you already know HTML, CSS, and JavaScript, the mental model is easy to pick up.
Teams that need batch-generated marketing, tutorial, or data videos
For example, turning CSV files into animated charts, product docs into short videos, or templates into many personalized variants.
People building AI-agent content production workflows
Its CLI, skills, and plugin design all lean toward automation, making it suitable as an execution layer for agent-generated video.
Teams that need reproducible video generation pipelines
Compared with manual editing tools, HyperFrames is easier to run from scripts, CI, Docker, or backend jobs.

Quick Start

If you want an AI agent to participate in video generation, the official recommendation is to install the skills first:

npx skills add heygen-com/hyperframes

Then you can ask the agent to create a video with /hyperframes context, for example:

Using /hyperframes, create a 10-second product intro with a fade-in title, a background video, and background music.

If you want to create a project manually, use the CLI:

npx hyperframes init my-video
cd my-video
npx hyperframes preview
npx hyperframes render --output output.mp4

Prepare these locally:

Node.js >= 22
FFmpeg
an environment that can run Chromium / Puppeteer

Conclusion

The core value of HyperFrames is not “another video editor.” It brings video generation back into the web stack: HTML handles structure, CSS and animation libraries handle presentation, the browser handles rendering, and FFmpeg handles output.

For developers, that means videos can be generated, versioned, and automated like web pages. For AI agents, it provides a target format that is easier to understand and operate.

If you are working on content automation, batch video generation, data videos, or text-to-renderable-video workflows for AI agents, HyperFrames is an open-source project worth watching.