HyperFrames references

Assets for reusable Studio generation

Catalog blocks, design presets, and frame specs give the agent stable inputs before it writes HTML. Use this page as the starting inventory for what a user can select in a generation flow.

Source of truth

The full catalog stays in HyperFrames. OpenBrief can cache and curate the subset that is reliable for Studio jobs.

Open HyperFrames catalog

Catalog

HyperFrames blocks, components, and examples

Blocks are standalone sub-compositions, components are snippets that merge into a host composition, and examples initialize a full project starter.

code-3d-extrude

Block

A dimensional code treatment for developer product intros and technical launch moments.

npx hyperframes add code-3d-extrude

code

intro

Catalog page

data-chart

Block

A standalone chart composition that can be layered into a larger story timeline.

npx hyperframes add data-chart

data

chart

block

world-map

Block

A geographic block for global coverage, market maps, and distribution stories.

npx hyperframes add world-map

map

global

block

app-showcase

Block

A product UI showcase starter for short demos and feature reveal sequences.

npx hyperframes add app-showcase

product

demo

grain-overlay

Component

A texture component that adds a subtle filmic surface over flat generated scenes.

npx hyperframes add grain-overlay

texture

finish

component

shimmer-sweep

Component

A highlight sweep component for logos, headings, badges, and hero text.

npx hyperframes add shimmer-sweep

highlight

motion

component

caption-highlight

Component

A caption treatment for emphasizing spoken words, product claims, and key phrases.

npx hyperframes add caption-highlight

caption

text

component

product-promo

Example

An example project shape for a fast product narrative before customizing brand details.

npx hyperframes init my-video --example product-promo

example

promo

starter

Templates

design.md presets

A design.md file is the compact design handoff: brand voice, typography, motion rules, and deliverables the agent should preserve while composing.

Open Design

Default

Best for jobs where uploaded Markdown, HTML, PDFs, and brand notes should become a structured video brief.

design.md

Markdown

# Design

## Brand
Name: OpenBrief Studio
Voice: precise, cinematic, useful
Audience: founders, product teams, creators

## Typography
Primary: Pretendard for Korean and English
Fallbacks: Noto Sans CJK KR/JP/SC/TC, Noto Color Emoji, sans-serif
Embedding: copy Pretendard OTF files into output/fonts and use @font-face
Rules: keep Korean and English balanced, avoid cramped line lengths

## Motion
Pacing: crisp, editorial, not frantic
Transitions: motivated by document structure
Finish: clear logo lockup and call to action

Claude Design

Handoff

Best for asking the coding agent to create a complete first-pass composition with design rationale.

design.md

Markdown

# Design

## Goal
Create a HyperFrames composition that can be linted, previewed, and iterated.

## Deliverables
- design.md with visual rules
- index.html with valid HyperFrames timing
- preview notes with known tradeoffs

## Agent Notes
Use /hyperframes production loop:
plan, write, lint, preview, revise.
Prefer editable HTML/CSS over rasterized text.

Claude Design guide Open Design guide

Frame specs

frame.md for a single generated document

A frame.md file can describe timeline shape, selected catalog items, input files, and validation commands before the agent edits the HyperFrames project.

frame.md

Markdown

# Frame

Title: OpenBrief Studio launch
Canvas: 1920x1080
Duration: 15s
Template: open-design

Inputs:
- prompt.md
- design.md
- uploaded reference PDF or Markdown

Scenes:
- 0.0-4.5s: Korean title reveal with product context
- 4.5-10.0s: UI or document transformation sequence
- 10.0-15.0s: English payoff, logo lockup, final CTA

Catalog:
- block: app-showcase
- component: grain-overlay
- component: shimmer-sweep

Validation:
- npx hyperframes lint
- npx hyperframes preview

How Studio should use it

Treat frame.md as job-local planning context. It should travel with the R2 input bundle and be reusable when a follow-up request starts a new Claude session.

Input

Prompt, uploads, selected template, selected catalog items

Output

HyperFrames index.html plus preview-ready assets

Loop

lint, preview, revise; render is optional for now

View design reference