mirror of
https://github.com/heygen-com/hyperframes.git
synced 2026-11-04 04:46:59 +00:00
WaterrrForeverandClaude Opus 5.5
688229314f
* refactor(skills): fold six domain skills into hyperframes and media-use guides
hyperframes-core, -animation, -keyframes, -creative and -studio move to
skills/hyperframes/{core,animation,keyframes,creative,studio}/, and
hyperframes-audio moves to skills/media-use/mix/. Each moved SKILL.md becomes
a frontmatter-free GUIDE.md so installers that scan recursively for SKILL.md
no longer see them as skills; the published list goes from 21 to 15.
Relative links, code paths and skill-name mentions are rewritten to the new
locations, the catalog surfaces, marketplace core-skills list, fallback core
set, module-copy targets and skills-manifest.json follow, and
`hyperframes skills update` now removes the retired skills (RETIRED_SKILLS)
when they are still installed.
Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com>
* feat(skills): slim the core entries and give media-use a HeyGen and a free path
The four entries every run opens are rewritten to what an agent cannot infer:
hyperframes 21.8 KB to 7.7 KB, hyperframes-cli 24.8 KB to 6.9 KB,
hyperframes-registry 9.9 KB to 4.3 KB, media-use 9.7 KB to 4.9 KB. Detail moved
whole into references (routing close calls and creator edits, CLI pin upgrades,
catalog search tiers, CLI conventions and feedback reports).
- hyperframes: state table, routing, the render contract, a terminal work loop
(check, snapshot, preview before render), the desktop-app hand-off, and a
table of the folded guides.
- media-use: one table of HeyGen versus free local tools per need; HeyGen
sign-in, credits and the CLI's video-agent, avatar, clone, lipsync, translate
and clipping commands; every free path works with no account.
- scripts/check-core-skills.mjs holds entries and descriptions to budget and
checks every taught `npx hyperframes` command and path; runs in lint.
- Core entries are exempt from the formatter: its table padding cost ~1.5 KB
per entry on every run.
- Content tests follow the text to its new home.
Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com>
* fix(skills): plugin runs skip skills update; media-use explains HeyGen sign-in and TTS setup
The smoke eval showed a presenter request never reaching media-use and the
free voiceover failing on a missing kokoro-onnx; plugin runs also ran the
skills update the plugin rules forbid.
Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com>
* chore(skills): drop a committed Python bytecode file and ignore bytecode
Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com>
* feat(skills): align the entry with the Studio skills and keep the workflows' measured facts
The entry drops routing and the intent interview and carries the contract, the
editable-project rules and the work loop. Studio's format, runtimes, motion,
look and captions references come over for terminal use, frame presets move to
assets/, media-use gains Studio's mixing and local-command references, and
film.md and overlays.md keep what the workflow skills measured.
Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com>
* feat(skills)!: retire the workflow skills and folded guides; publish seven knowledge skills
The skill pack now publishes exactly seven skills - hyperframes,
hyperframes-cli, hyperframes-registry, media-use, figma, slideshow and
remotion-to-hyperframes - carrying knowledge, not process. The eight
workflow skills, the folded domain guides and the routing/interview
references are deleted; their measured facts already live in the
hyperframes references (format, runtimes, motion, look, captions, film,
overlays) and media-use's mixing reference.
- bake-basemap.mjs and locate.mjs move to skills/hyperframes/scripts/
(bake-basemap gains --help); extract-audio-data.py moves to
media-use/audio/scripts/ for the caption motion reference.
- skills update: the eight workflows join RETIRED_SKILLS so existing
installs prune them (by lock attribution only, since their names are
generic); naming a retired skill reports where its knowledge went and
succeeds instead of failing as unknown.
- Capture prompts point at the hyperframes skill's references/film.md;
the live-map warning names the new bake-basemap path.
- Content tests that pinned knowledge are retargeted to the kept
references; tests of deleted workflows, scripts and process go.
- Catalog surfaces, templates and docs describe the seven skills.
Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com>
* fix(skills): resolve the local.md captions link and allow capture's output files in citations
Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com>
* fix(skills): regenerate the skills manifest from tracked files only
The committed media-use hash included an ignored __pycache__ bytecode file present
in the local checkout, so CI's clean checkout hashed differently.
Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com>
* fix(docs): restore generated catalog pages and docs navigation to main
Catalog PRs commit item sources only; CI regenerates the pages from the edited
registry sources. docs/docs.json is catalog navigation, so its Workflows group
rename is left for a non-catalog PR.
Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com>
* build(cli): raise the CLI size budget for the skill references it bundles
The CLI bundles skills/hyperframes, which now carries the folded domain guides and
frame presets (155 KB to 1.08 MB in git). Budgets are the CI-measured size plus 5%:
packed 7526634, unpacked 22593213.
Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com>
* test: keep repo-sweep guards meaningful after the workflow skills left
The last shell ffprobe caller and most root index.html examples lived in retired
skills. The shell detector is now pinned on a literal command line, and the
structure-rule sweep needs more than 5 roots (11 remain) rather than 30.
Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com>
* feat(skills): slim figma, slideshow and remotion to the Studio shape; restore the storyboard board
slideshow 33.5 KB to 4.9, figma 18.2 to 6.2, remotion-to-hyperframes 11.0 to
4.9, each keeping the facts only it holds (the figma motion helpers, verify gate,
storyboard decoding and usage beacons; present and hand-off; the Remotion lint,
SSIM check and API map). The board page format from the storyboard recipe comes
back as hyperframes/references/storyboard.md: the desktop app's Storyboard tab
reads boards/storyboard.html by its frame, title and time classes. The entry and
the init template now say to snapshot the moments an edit changed before
replying, which the terminal eval found skipped in 22 of 38 runs.
Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com>
* fix(skills): manifest without local bytecode; Studio's edit prompt names kept files
Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com>
* fix(skills): render when the person asks for the file or for no stops, not only after approval
Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com>
* fix(skills): keep the voiceover carve in media-use; presets stage their own fonts
Review follow-ups on #5651:
- carve.mjs and its tests move to skills/media-use/audio/scripts; the audio
docs, mixing.md and two Studio comments point there.
- code-editorial's FRAME.md says to copy its bundled WOFF2s and add the
@font-face blocks, instead of promising the retired build-frame.mjs.
- media-use states the host rule before the HeyGen sign-in steps.
- storyboard-format marks transition_in as a note the agent builds itself.
- Two stale citations (creator-editing-recipes.md, sub-compositions.md).
Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com>
* chore(skills): regenerate the manifest without local bytecode
Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com>
* fix(skills): the CLI render step follows step 4's rule, not approval alone
Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com>
* fix(ci): run the core-skills check from lint again after the main merge
Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com>
* feat(skills): films that tell a story start from three storylines; maps use real imagery
Opus 5.5 arm D read motion.md and applied it, but its launch film was a
feature list (pain, three feature cards, proof, logo): film.md left story
to the model. And the map case never opened film.md, so it drew Natural
Earth outlines instead of baking satellite tiles.
- references/story.md: the generic half of Studio's moment-film story and
craft (one thing, three storylines with world and device, the hook,
beats, worlds, copy, brand, tells of a generated film). The person picks
a storyline, or the agent takes its recommendation when asked for the
file or for no stops.
- The entry's work loop names the storyline step for films over ~15 s; the
references table routes stories to story.md and maps to film.md.
- film.md points at story.md and gives maps and real places a section.
Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com>
* fix(skills): story.md follows the entry: no voiceover unless asked
Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com>
* fix(skills): bake-basemap starts from a globe and stops waiting out its idle timeout
The Opus 5.5 map run spent 13 of its 38 minutes on parallel bakes that
stalled and 15 more recording 300 frames, after rewriting the script because
it could only start on a flat map.
- PROJECTION=globe with a seeded starfield and atmosphere, and FROM/PAN to
turn the globe to CENTER before the dive.
- Each frame polls for loaded tiles instead of waiting for an "idle" event
that had often already fired: 30 frames went from 198-219 s to 10-13 s
locally with byte-identical frames.
- Progress prints seconds a frame and minutes left; film.md shows the globe
call and says to run one bake at a time.
Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com>
* fix(skills): render in the foreground; wait on a detached render's log, never pgrep -f
Both Opus 5.5 explainer runs started a detached render, then waited with
`until ! pgrep -f "hyperframes render"`, which matches its own loop: each
render took 88-117 s and the wait sat for the tool's full 10 minutes.
Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com>
* feat(skills): route each kind of film; storylines carry look and sound; add review and sound
The entry routes by request (launch, explainer, music, data, vertical, 3D,
character) to a self-contained file under references/types/, and a film
over ~15 s now gets music and sounds on its visible actions unless the
person asked for silence. Each storyline names its look and its sound, so
picking one picks both; STORYBOARD.md frames carry `reads` and `sound`.
review.md is the whole-film pass: the check warnings, the review sheets,
seven questions to look for, P0/P1/P2 notes and REVIEW.md. motion.md gains
eases by role, six title entrances, a reading-time rule and nine measured
transitions; look.md a design plan before the first scene, with presets
kept for decks and named picks. story.md adds the second default that
generated design falls into, with what to do instead.
The blank template and format.md no longer teach the fade-and-slide-up
entrance on a dark canvas.
Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com>
* feat(cli): check warns on unread lines, dead stretches, small type, empty frame 0 and silence
A coding agent cannot watch its film, so check now measures what a viewer
notices over time. A new `craft` section holds warnings only (exit 0
unless --strict), sampled on the dense 8 fps grid the overlap pass
already seeks, skipped for --range checks:
- line_unread: a reading-size line (>= 30 px tall at 1080) on screen
under 0.4 s for 1-2 words, else under 3/4 of 0.5 s + 0.3 s a word;
the film's last line needs 2 s. Short lines are re-measured between
samples to ~0.01 s before judging. Captions-track and
data-layout-ignore text are exempt.
- dead_stretch: more than 3 s where the keepsMoving liveness signature
does not change, outside the final 3 s and any data-hold element;
quiet when sweep_static fires or a whole-composition keepsMoving
assertion owns the limit.
- text_below_floor: text under 2.6% of the short side (28 px on 1080)
held 0.5 s, one finding per file listing every element.
- first_frame_empty: frame 0 paints only the background.
- film_silent: over 15 s with no unmuted audio or audible video.
Each message names the fix and the skill reference to read. keepsMoving
now also leaves the film's last 3 s (a still end card) out of its
static runs, so the two agree.
Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com>
* feat(cli): snapshot --review captures a beat sheet, seam strips and a phone sheet
snapshot --review picks the frames that show a film over time instead of
evenly spaced ones, in the same single browser session:
- review-beats.jpg: one settled frame per scene at its start + 0.3 s,
plus one per timed data-beat="name" element, labelled time and id.
Scenes are the composition's top-level timed clips and sub-composition
hosts, read like `timeline` reads rows (captions and audio excluded)
and timed by the runtime's start resolver over the live page.
- review-seam-NN.jpg: frames at -0.2, -0.1, 0, +0.1, +0.2 s around
every cut (each scene start, and any scene end no scene starts at).
- review-phone.jpg: the beat frames at 360 px wide.
--composition scopes the review to one sub-composition; with fewer than
two scenes the beats spread evenly and a note says so. snapshot also
gains --json: one envelope with every frame's path and time and, under
--review, the scenes, beats and seams behind the sheets; progress moves
to stderr.
Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com>
* fix(cli): craft warnings stay out of --strict; a hold gets a real next action, not a caret
Craft findings (unread lines, dead stretches, small type, an empty first
frame, silence) are judgment calls a film may break on purpose, so
--strict keeps gating defects only. The check reference no longer
suggests a blinking caret to keep a still frame moving.
Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com>
* fix(cli): review spreads beats when every scene starts together; map credits skip the type floor
A map film whose basemap and overlay both start at 0 s got one beat
frame; the even spread now keys on distinct scene starts. film.md tells
agents to mark the imagery credit data-layout-ignore and back it, since
the new type floor flagged it on the first real run.
Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com>
* fix(cli): review frames each scene at its middle too, not only 0.3 s in
On the first real explainer, 0.3 s into a scene showed a bare colour
field before its title entered. Each scene longer than about a second
and a half now adds a frame at its middle, so the sheet shows what the
scene builds.
Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com>
* feat(skills): a film is built from a numeric SPEC.md, with defaults banned by name and a look test
Studied in full: flxrnc's Motion Lab (vague vs directed prompt), 0xMovez's
course, EianLu's riso skill, agentchengfeng's style samples and the two
Opus 5.5 guides. Their common point: adjectives are where the default look
lives, so the agent now writes SPEC.md before any scene (GOAL, OUTPUT,
TIME, LOOK, MOTION, SHOTS, BANNED, QA), with a number for every adjective.
spec.md bans the defaults by name, unless the brand or reference uses
them (a dark void with small things floating, glow and particles, the
cream-serif-mono-label look, fade-and-slide-up, corner brackets), and
grows that list after the first render. Each storyline gets a 3 s test of
its hero shot before the pick; a look is written as the rules of one
medium. Composition numbers: the hero fills 40% of the frame, one hero
move per shot, the shot's information in within 2.5 s then a held poster.
motion.md adds springs by damping ratio, shorter exits, overlap, stagger
and the beat grid; review.md reviews as a harsh director and grows BANNED;
vertical.md takes the riso skill's measured safe band; explainer.md the
shapes of information.
Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com>
* fix(skills): story before look; every object reads as itself; posters only for info cards
The first spec-driven C02 swapped the dark default for a flat Swiss
poster, and the story went with it: two black bars nobody read as mirrors,
slogans instead of cause and effect, a storyline picked for its picture.
The spec now serves the story: a storyline is picked for the story a
stranger would follow, the look test asks first whether a stranger
understands what they see, and SPEC.md gains an OBJECTS line giving each
thing the material and details that make it read without a label. The
2.5 s held-poster rule is limited to information cards; in a story film
every shot causes the next. Explainers start from a person or situation
the viewer knows. Review names every object as a stranger would and
treats one that needs explaining as a P0.
Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com>
* fix(skills): storylines are three films in words, each with a device and a form
The three storylines are pitched as text and the person picks from them;
nothing is built for a storyline before the pick, so the 3 s hero-shot
look test is gone. Ideas pair a device with a form, five or more first,
keeping the three that differ most, and the one stop states the rest in
an assumption line that names every paid item beside its free option.
Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com>
* ci: list main's new embedded-captions hf-cli test among the retired workflow files
The merge with main removed it with the rest of the retired skill, and the
deletion guard rejects any removal it has not been told about.
Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com>
* fix(core): keep the audio preset comment within core's size budget
The comment's new citation to media-use's mixing reference made the published
package 14 bytes larger than its budget, which sits at main's exact size.
Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com>
* fix(cli): craft keeps its own 8 fps grid; comments back within the checks
Review on #5651 found that the merge moved craft onto the overlap pass's
times, which main caps at 180, so a brief line in a long film fell between
samples and line_unread missed it. Craft now builds its own grid at 8 fps up to
600 samples, as before the merge, and a 60 s film with a line shown for 0.2 s
pins it.
The Comments check passes again: REVIEW.md and STORYLINES.md join the files a
skill writes into a project, the comment lines this branch added come back
under each file's share at the merge-base, and the audio preset comment drops
a word the check reads as history.
Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com>
---------
Co-authored-by: Claude Opus 5.5 (1M context) <noreply@anthropic.com>
16 KiB
16 KiB
Registry discovery
Use the catalog command first
npx hyperframes catalog
npx hyperframes catalog --type block
npx hyperframes catalog --type component
npx hyperframes catalog --type block --tag social
npx hyperframes catalog --json
npx hyperframes catalog --human-friendly
- Default output is a readable table. It does not install anything.
--typeacceptsblockorcomponent;--tagmay narrow either result.--jsonis the deterministic agent and CI surface. Select a name, then runnpx hyperframes add <name>.--human-friendlyopens a picker and installs the selected item immediately.
Read the registry manifest as a fallback
When the CLI is unavailable, the top-level registry.json lists all available items:
curl -s https://raw.githubusercontent.com/heygen-com/hyperframes/main/registry/registry.json
Each entry has name and type (hyperframes:example, hyperframes:block, or hyperframes:component).
Reading an item's manifest
Each item has a registry-item.json with full metadata:
<base>/<type-dir>/<name>/registry-item.json
Where <type-dir> is examples, blocks, or components.
Item manifest fields
| Field | Type | Required | Description |
|---|---|---|---|
name |
string | yes | Kebab-case identifier |
type |
string | yes | hyperframes:block or hyperframes:component |
title |
string | yes | Human-readable title |
description |
string | yes | One-line description |
tags |
string[] | no | Filter tags (e.g., ["data", "chart"]) |
dimensions |
object | blocks | { width, height } — blocks only |
duration |
number | blocks | Duration in seconds — blocks only |
files |
array | yes | Files to install (path, target, type) |
registryDependencies |
string[] | no | Other registry items this depends on |
Available items
Blocks
For an always-current list run npx hyperframes catalog --type block. The search is the source of truth; the tables below are a hand-maintained sample and under-cover by design — they group 97 of the registry's 180 blocks by category, so a block missing from them is not evidence the registry lacks it. Only an empty npx hyperframes catalog --query "<what you want>" --json is that evidence. Do not grow these tables toward the full set; search instead. Block name ≠ shader name: shader-transition blocks (e.g. domain-warp-dissolve) wrap a HyperShader runtime whose internal name omits the -dissolve/-warp suffix — see the showcase HTML installed alongside the block for the canonical name.
Shader transitions (14)
Single-shader blocks; each installs one HyperShader runtime + a showcase composition. Use ≤2 per video.
| Name | Description |
|---|---|
chromatic-radial-split |
Chromatic aberration radial split |
cinematic-zoom |
Dramatic zoom blur |
cross-warp-morph |
Cross-warped morphing |
domain-warp-dissolve |
Fractal noise domain warping |
flash-through-white |
White flash crossfade (rarely a neutral default — see SKILL.md guidance) |
glitch |
Digital glitch artifacts |
gravitational-lens |
Gravitational lensing distortion |
light-leak |
Cinematic light leak overlay |
ridged-burn |
Ridged turbulence burn |
ripple-waves |
Concentric ripple wave distortion |
sdf-iris |
Signed-distance-field iris reveal |
swirl-vortex |
Swirling vortex distortion |
thermal-distortion |
Heat-haze thermal distortion |
whip-pan |
Fast camera whip-pan |
Transition galleries (13)
Showcase compositions grouping multiple CSS / GSAP transition styles by family. Use as reference for picking a CSS scene transition; not meant to embed as-is.
| Name | Description |
|---|---|
transitions-3d |
3D perspective flip and rotate |
transitions-blur |
Blur-based scene transitions |
transitions-cover |
Cover / uncover slide |
transitions-destruction |
Destructive break-apart |
transitions-dissolve |
Dissolve and fade |
transitions-distortion |
Warp and distortion |
transitions-grid |
Grid-based tile |
transitions-light |
Light-based glow and flash |
transitions-mechanical |
Mechanical shutter and iris |
transitions-other |
Misc creative (VHS, gravity, morph) |
transitions-push |
Push and slide |
transitions-radial |
Radial wipe and reveal |
transitions-scale |
Scale and zoom |
Liquid Glass (7)
WebGPU + html-in-canvas frosted-glass surfaces. Require Brave / Chrome canary with WebGPU enabled — set PRODUCER_HEADLESS_SHELL_PATH to point at the browser; engine auto-passes --enable-unsafe-webgpu. See /hyperframes → references/runtimes.md.
| Name | Description |
|---|---|
ios26-liquid-glass |
3D iPhone (GLTF) + iOS 26 home screen, glass app icons, shader wallpaper, notifications |
macos-tahoe-liquid-glass |
3D MacBook (GLTF) + macOS Tahoe-style desktop, glass menu bar, Finder, dock |
liquid-glass-widgets |
Frosted stat cards, showcase panel, pill chips over aurora shader |
liquid-glass-notification |
Frosted notification cards floating over aurora shader |
vfx-liquid-glass |
Bare VFX composition shell for liquid-glass effects |
VFX (6)
HTML-in-canvas + WebGL composition blocks. See /hyperframes → references/runtimes.md for the underlying runtimes.
| Name | Description |
|---|---|
vfx-iphone-device |
GLTF iPhone 15 Pro Max + MacBook Pro with live HTML-in-canvas screens, glass-lens morph, 360° turntable |
vfx-liquid-background |
Organic liquid sim — vertex displacement on subdivided plane, HTML floats above |
vfx-magnetic |
VFX shell (magnetic field-line treatment) |
vfx-portal |
VFX shell (portal reveal) |
vfx-shatter |
VFX shell (shatter into fragments) |
vfx-text-cursor |
Cursor glow + chromatic shadow rays + spectral edges on a black stage |
Showcases (6)
Story-driven showcase compositions — narrated YouTube-style inserts. Most include bundled SFX.
| Name | Description |
|---|---|
app-showcase |
Three floating smartphone screens, fitness app product showcase |
apple-money-count |
Counter $0 → $10,000, green flash, money-icon burst, SFX |
blue-sweater-intro-video |
Warm AI-creator intro resolving into an X follow card |
north-korea-locked-down |
Map zoom with red scribble circle, locked-down pop-up label |
nyc-paris-flight |
Map animation, plane NYC → Paris, marker circle, landing pop, SFX |
vpn-youtube-spot |
App-store scroll, VPN install flow, SFX |
Maps + data viz (8)
D3 + GSAP animated geographies and charts.
| Name | Description |
|---|---|
us-map |
US choropleth, staggered state reveals, value labels, gradient legend |
us-map-bubble |
US bubble map — proportional city markers, callouts, connection lines |
us-map-flow |
US flow map — animated origin-destination arcs |
us-map-hex |
US hex-grid map — each state as equal-weight hex with data fill |
spain-map |
Spain choropleth by autonomous community — D3 conic conformal |
world-map |
World choropleth + rotating globe inset, D3 Natural Earth |
data-chart |
Animated bar + line chart, staggered reveal, NYT-style typography |
flowchart / flowchart-vertical |
Decision tree, SVG connectors, sticky-note nodes, cursor + typing correction (vertical = portrait) |
Social overlays (7)
Platform-recognizable UI overlays. Stamp on top of a beat or use as a beat closer.
| Name | Description |
|---|---|
instagram-follow |
Profile card + follow button |
tiktok-follow |
Profile card + follow button |
yt-lower-third |
YouTube subscribe lower third with avatar |
x-post |
X/Twitter post card with engagement metrics |
reddit-post |
Post card with upvotes and comments |
spotify-card |
Now-playing card with album art and progress bar |
macos-notification |
macOS-style banner with app icon and message |
Branding + 3D UI (2)
| Name | Description |
|---|---|
logo-outro |
Piece-by-piece logo assembly, glow bloom, tagline fade-in, URL pill |
ui-3d-reveal |
Perspective 3D reveal for UI elements |
Code snippets (24)
A code/terminal window that types a code or shell session per-character. Theme = visual chrome only; structure, wiring, and install are identical across all 24 — pick one by name, wire it like any block (data-composition-id + data-start + data-track-index, see wiring-blocks.md). Two chrome families:
Apple Terminal (12) — macOS Terminal.app window typing a shell session. Profile = window colors:
| Name | Look |
|---|---|
code-snippet-apple-terminal-pro |
Black bg, grey text, lime cursor |
Code Animations (9)
The richer, motion-first counterpart to the static code-snippet-* window themes above: each is a self-contained 1920×1080 block (~5–8s) with a paused, deterministic GSAP timeline that animates code — typing, diffing, morphing, spotlighting, or GPU hero reveals — rather than typing a fixed snippet inside editor/terminal chrome. Reuse-first: npx hyperframes add <name>, then customize the baked code/diff content in place; hand-author only when no block covers the motion you need.
DOM / text reveal (6):
| Name | Description |
|---|---|
code-typing |
Token-streamed typing reveal, caret tracks the frontier (no CSS animation) — live-coding on screen |
code-diff |
An edit shown as a colored diff: removed lines collapse red, added expand green — before/after at line level |
code-morph |
One snippet transforms into another, tokens glide between positions (Shiki Magic Move) — a refactor / one state to another |
code-highlight |
A highlight band sweeps a target line while surrounding context dims — spotlight one line |
code-scroll |
Camera scrolls a long file to center + spotlight a target line — walk through a real module |
GPU / WebGL hero reveals (3): heavier, for a title-card / hero code moment.
| Name | Description |
|---|---|
code-3d-extrude |
Syntax-highlighted code on a lit beveled 3D slab that rotates through real space and settles (true WebGL depth) |
code-shader-dissolve |
Code resolves out of seeded noise with a chromatic dissolve front + edge glow, then holds crisp |
code-particle-assemble |
Thousands of GPU points fly to the exact glyph pixels and resolve into readable syntax-highlighted code |
Components
| Name | Description | Tags |
|---|---|---|
grain-overlay |
Animated film grain texture overlay | texture, grain, overlay, film |
shimmer-sweep |
CSS gradient light sweep for AI accents | text, shimmer, highlight, effect |
morph-text |
Gooey text morph cycling an editable word list (SVG threshold + GSAP blur) | text, text-effect, typography, morph, gooey |
grid-pixelate-wipe |
Grid dissolve transition between scenes | transition, wipe, grid, pixelate |
parallax-zoom |
Center card scales up to fill the frame while siblings parallax outward (single --pz-progress 0→1) |
transition, zoom, parallax, grid, hero |
parallax-unzoom |
Reverse of parallax-zoom — focus card shrinks from full frame as siblings parallax in (--pu-progress) |
transition, reveal, unzoom, parallax, grid, hero |