HyperFrames

O HTML é a fonte da verdade para vídeos. Uma composição é um arquivo HTML com atributos data-* para tempo, uma linha do tempo GSAP para animação e CSS para aparência. O framework gerencia a visibilidade dos clipes, a reprodução de mídia e a sincronização da linha do tempo.

Integração com OpenDesign (essencial para esta superfície)

Quando esta habilidade é executada dentro do OpenDesign (ou seja, $OD_PROJECT_DIR está definido), o fluxo de saída é fixo: apenas o .mp4 renderizado deve ir para a raiz do projeto. Arquivos de origem da composição (hyperframes.json, meta.json, index.html, assets) pertencem a um diretório de cache oculto para que não poluam o FileViewer do usuário ou os chips de "arquivos produzidos" do chat.

Fluxo de renderização dentro do OD — caminho rápido:

Para a maioria das solicitações do OD ("testar vídeo", "revelação de produto de 5s", "clipe de demonstração"), NÃO escreva o HTML da composição do zero. Use o scaffold determinístico do Open Design e edite apenas o que o prompt realmente muda. O caminho de "autor do zero" custa minutos de saída do modelo e tempo silencioso da ferramenta de chat; o caminho do scaffold custa segundos.

# 1. Pick a hidden cache slot. Dotfile prefix → OD's project file
#    listing skips it, so the source files never clutter the chat.
COMP_REL=".hyperframes-cache/$(date +%s)-$(openssl rand -hex 2)"
COMP="$OD_PROJECT_DIR/$COMP_REL"

# 2. Get an immediately-renderable scaffold (hyperframes.json,
#    meta.json, index.html with GSAP CDN + window.__timelines.main
#    already registered). Open Design writes these files itself; it does
#    not run `hyperframes init`, consult an npx cache, or install global skills.
"$OD_NODE_BIN" "$OD_BIN" media scaffold \
  --project "$OD_PROJECT_ID" \
  --composition-dir "$COMP_REL"

# 3. Edit ONLY $COMP/index.html — change `data-duration` on the root
#    if you need a non-default length, swap the placeholder palette
#    in <style>, add 1–3 clip <div>s for text/imagery, and append the
#    matching GSAP tweens inside the existing
#    `window.__timelines["main"] = gsap.timeline({paused:true})` block.
#    Keep edits minimal; the scaffold is already valid HF.

# 4. Dispatch render through the OD daemon. Do NOT run HyperFrames
#    `render` from this shell — the daemon runs it for you in an
#    unsandboxed process. (Many agent CLIs, Claude Code in particular,
#    wrap Bash in macOS sandbox-exec under which puppeteer's Chrome
#    subprocess hangs partway through frame capture. The daemon process
#    is unsandboxed, so renders complete reliably.)
#
#    The dispatcher returns within ~1s with a {taskId}; drive the
#    render to completion by looping `"$OD_NODE_BIN" "$OD_BIN" media wait <taskId>` calls.
#    Each call long-polls up to 25s (well under your shell tool's
#    default 30s cap) and exits 0/2/5 to signal done/running/failed.
out=$("$OD_NODE_BIN" "$OD_BIN" media generate \
  --project "$OD_PROJECT_ID" \
  --surface video \
  --model hyperframes-html \
  --output "<descriptive-name>.mp4" \
  --composition-dir "$COMP_REL")
ec=$?
task_id=$(printf '%s\n' "$out" | tail -1 | jq -r '.taskId // empty')
since=$(printf '%s\n' "$out" | tail -1 | jq -r '.nextSince // 0')
while [ "$ec" -eq 2 ] && [ -n "$task_id" ]; do
  out=$("$OD_NODE_BIN" "$OD_BIN" media wait "$task_id" --since "$since")
  ec=$?
  since=$(printf '%s\n' "$out" | tail -1 | jq -r '.nextSince // '"$since")
done
[ "$ec" -ne 0 ] && { echo "$out" >&2; exit "$ec"; }

Cada generate e cada chamada wait dura no máximo ~25s, então o limite padrão de ~30s da ferramenta shell do agente nunca é acionado. Linhas de progresso do HF (Capturing frame N/M) são transmitidas para stderr ao vivo durante todo o loop. Quando a renderização termina, a última linha de stdout é {"file": { "name": "<output>", "size": …, "kind": "video", … }} — cite file.name em sua resposta para que o usuário saiba o que foi produzido.

Pule o Portão de Identidade Visual dentro do OD. A seção HARD-GATE abaixo (em "Abordagem") instrui você a ler DESIGN.md / visual-style.md ou parar e fazer 3 perguntas de humor antes de escrever qualquer composição. Esse portão é para projetos HF independentes. Projetos OD já têm sua própria camada de sistema de design — o usuário escolheu sua direção visual no momento da criação do projeto. Para um render de teste do OD, use como padrão: tela escura (#0b0b0f), um acento quente (#ffb76b), um acento frio (#7da4ff), movimento restrito. Só peça entrada estilística se o prompt do usuário for vago demais para sequer escolher um assunto (muito raro).

Quando pular o scaffold e escrever do zero: apenas quando o usuário pedir explicitamente algo que o modelo em branco claramente não pode hospedar

…