Skip to content
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion CLAUDE.md
Original file line number Diff line number Diff line change
Expand Up @@ -67,4 +67,4 @@ will not match CI. Use it only for local-only experimentation.

## Skills

Composition authoring (not repo development) is guided by skills installed via `npx skills add heygen-com/hyperframes`. See `skills/` for source. Invoke `/hyperframes`, `/hyperframes-cli`, `/hyperframes-registry`, `/tailwind`, or `/gsap` when authoring compositions. Use `/tailwind` for projects created with `hyperframes init --tailwind` so agents follow the pinned Tailwind v4 browser-runtime contract instead of Studio's Tailwind v3 setup. Use `/animejs`, `/css-animations`, `/lottie`, `/three`, or `/waapi` when a composition uses those first-party runtime adapters. Invoke `/hyperframes-media` for asset preprocessing (TTS narration, audio/video transcription, background removal for transparent overlays) — these commands have their own skill so the CLI skill stays focused on the dev loop. When a user provides a website URL and wants a video, invoke `/website-to-hyperframes` — it runs the full 7-step capture-to-video pipeline.
Composition authoring (not repo development) is guided by skills installed via `npx skills add heygen-com/hyperframes`. See `skills/` for source. Invoke `/hyperframes`, `/hyperframes-cli`, `/hyperframes-registry`, `/tailwind`, or `/gsap` when authoring compositions. Use `/tailwind` for projects created with `hyperframes init --tailwind` so agents follow the pinned Tailwind v4 browser-runtime contract instead of Studio's Tailwind v3 setup. Use `/animejs`, `/css-animations`, `/lottie`, `/three`, or `/waapi` when a composition uses those first-party runtime adapters. Invoke `/hyperframes-media` for asset preprocessing (TTS narration, audio/video transcription, background removal for transparent overlays) — these commands have their own skill so the CLI skill stays focused on the dev loop. When a user provides a website URL and wants a video, invoke `/website-to-hyperframes` — it runs the full 7-step capture-to-video pipeline. Use `/hyperframes-promo-video` when the user wants to generate a rendered promotional video (mp4 + poster) from a PR, feature, or product change — it drives the full 7-phase pipeline from discovery through narrative planning, scaffold, preview iteration, and render.
2 changes: 1 addition & 1 deletion packages/producer/node_modules/.bin/esbuild

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 1 addition & 1 deletion packages/producer/node_modules/@types/node

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 1 addition & 1 deletion packages/producer/node_modules/esbuild

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

81 changes: 81 additions & 0 deletions skills/hyperframes-promo-video/README.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,81 @@
# hyperframes-promo-video

Generate an actual rendered `mp4` + poster image from a PR, feature, or product change — using [HyperFrames](https://hyperframes.dev) (HTML/CSS/GSAP-based video).

Same workflow shape as `remotion-video` and the same storytelling rules, but built on HyperFrames instead of React/Remotion. For people who'd rather author scenes in HTML/CSS than JSX. Iterates with `npx hyperframes preview`, then renders `video.mp4` + `poster.jpg`.

This skill produces a _video file_. If you want a textual script instead, use `video-script`.

## Companion skills (HyperFrames ecosystem)

This skill only carries the promo-video-from-PR logic — input resolution, narrative planning, motif derivation, hook enforcement, scene-plan auditing, render-time gates. The mechanics of the HyperFrames stack live in separate skills (install them for best results):

- **`hyperframes`** — composition authoring rules: DESIGN.md gate, Layout Before Animation, palettes, transitions, typography, motion principles, captions, audio, TTS
- **`hyperframes-cli`** — every `npx hyperframes <command>` (init, lint, preview, render, transcribe, tts, doctor, etc.)
- **`gsap`** — GSAP timeline patterns, easing, stagger, performance, position parameter, labels, nesting
- **`hyperframes-registry`** — registry blocks/components and `hyperframes add`

Without those installed, the skill still works but emits a warning that quality may be reduced.

## Inputs

In resolution order:

1. Path to a marketing brief (`.md` containing "Executive Summary" or "Key Messages")
2. Path to a blog post
3. Path to a changelog
4. GitHub PR URL or `#1234`
5. Git ref range — `v1.0...v2.0`
6. File or directory path
7. Freeform text

## Invoke

```
/hyperframes-promo-video #1234
/hyperframes-promo-video .tmp/marketing-brief.md
```

Or trigger by description:

> "Render a HyperFrames video for #1234."
> "Make a 30-second promo video using HyperFrames."

## Output

- `video.mp4` — the rendered video (default 30s, 16:9)
- `poster.jpg` — first-frame poster
- The HyperFrames project directory (HTML composition) for further hand-editing

Default location: `marketing/<feature-slug>/hyperframes/` or wherever `marketing-pipeline` directs shared output.

## How it works

Seven phases: discovery, configuration (duration, aspect ratio, project location, brand scanning), narrative planning (motif, hook, scene plan), scaffold the composition, first draft + iterate via `npx hyperframes preview` (freeform loop), render with pre-render audits, cleanup. Phases 1, 3, 5, and 7 have explicit approval gates.

### "Use sane defaults" mode

The skill recognizes phrases like _"use sane defaults"_, _"don't ask questions"_, _"non-interactive"_, _"just ship it"_ and skips the configuration prompts (defaults to 30s / 16:9 / `marketing/<slug>/hyperframes/`).

But it does **not** skip:

- Brand color/font/logo scanning — hardcoding from training-data assumptions is forbidden
- The `npx hyperframes preview` step — you must see the studio URL before render
- Phase 6 pre-render audits (storytelling, hook rules, motif presence, pacing variance, value-prop timing, contrast)
- The cleanup question

These exist to prevent shipping a generic video.

## Files

- [`SKILL.md`](./SKILL.md) — the skill itself
- [`brand-detection.md`](./brand-detection.md) — how the skill scans for brand assets
- [`patterns/`](./patterns) — reusable scene patterns
- [`templates/`](./templates) — starter compositions
- [`hooks/`](./hooks) — pre-render audit hooks
- [`references/`](./references) — supporting documentation

## Credits

Originally authored by [Alem Tuzlak (@AlemTuzlak)](https://github.com/AlemTuzlak) as `hyperframes-video`.
Integrated into the HyperFrames skill catalog with permission.
Loading
Loading