Communitygithub.com

heygen-com/hyperframes

Una cámara en órbita sigue un logotipo de hielo que se rompe, se reforma en dos momentos de texto y se desvanece. Bloque HyperFrames, 1920×1080, 22.5s, 216 variables.

¿Qué es hyperframes?

Esta habilidad, `heygen-com/hyperframes`, proporciona una secuencia completa de hielo de 22.5 segundos para plataformas HyperFrames como Claude Code, Cursor y Codex. La secuencia comienza con un logotipo de hielo que se rompe en pedazos, se reforma en dos textos personalizables y finalmente se desvanece, todo mientras una cámara orbita los objetos fijos con pases frontales más lentos para facilitar la lectura. Está diseñada para ser altamente personalizable, ofreciendo 216 variables que controlan desde los textos y el logotipo SVG hasta propiedades detalladas del material del hielo como la rugosidad, la dispersión, la escarcha, las grietas y la dispersión interna. La habilidad se instala mediante el comando `npx hyperframes add frost-sequence-camera-orbit`, y se integra en un host HTML a través de un atributo `data-composition-id`. Los renders personalizados se pueden generar directamente con `npx hyperframes render`, lo que la hace ideal para creadores de contenido que necesitan animaciones de producto dinámicas y fotorrealistas con control total sobre la apariencia y la sincronización.

Compatible con~Claude Code~Codex CLI~Cursor
npx skills add https://github.com/heygen-com/hyperframes/tree/main/registry/blocks/frost-sequence-camera-orbit
Ver original→Ver todas las habilidades

Preguntar en tu IA favorita

Abre un nuevo chat con esta habilidad de agente ya precargada.

OpenAIChatGPTClaudeClaudeGeminiGeminiGrokGrokPerplexityPerplexityDeepSeekDeepSeek

Documentación

Secuencia de Hielo con Cámara en Órbita

Una secuencia de hielo completa de 22.5 segundos: logotipo, primer texto, segundo texto, ruptura y desvanecimiento. La cámara orbita los objetos fijos con pases frontales más lentos para facilitar la lectura. El mismo campo de partículas transporta cada transición. Personaliza los dos momentos de texto y el logotipo SVG; la fuente incluye tiempos de cámara y ensamblaje editables.

ID de composición: frost-sequence-rig. Duración 22.5 s a 30 fps, 1920×1080.

Archivos

  • frost-sequence-camera-orbit.html (131 KB)
  • assets/example-logo.svg (1 KB)
  • assets/fonts/Geist-Bold.ttf (65 KB)
  • assets/fonts/Geist-OFL.txt (4 KB)
  • assets/fonts/Geist-Regular.ttf (65 KB)
  • assets/fonts/Geist-SemiBold.ttf (65 KB)
  • assets/frost.js (1.5 MB)
  • assets/Three-LICENSE.txt (1 KB)
  • assets/ThreeMeshBVH-LICENSE.txt (1 KB)
  • assets/OpentypeJS-LICENSE.txt (1 KB)
  • assets/Clipper-LICENSE.txt (3 KB)
  • assets/gsap-3.14.2.min.js (128 KB)
  • assets/GSAP-NOTICE.txt (1 KB)
  • assets/logo.svg (1 KB)
  • assets/shards-atlas.png (obtenido de la CDN en la instalación)
  • assets/test-mark.svg (1 KB)
  • assets/textures/bluenoise64.png (12 KB)
  • assets/textures/ice-inclusions-generated.png (obtenido de la CDN en la instalación)

Instalación

Instala con npx hyperframes add frost-sequence-camera-orbit; por defecto, los archivos anteriores se colocan en compositions/frost-sequence-camera-orbit/. Luego, monta el bloque desde el index.html del host:

<div
  data-composition-id="frost-sequence-rig"
  data-composition-src="compositions/frost-sequence-camera-orbit/frost-sequence-camera-orbit.html"
  data-start="0"
  data-duration="22.5"
  data-track-index="1"
  data-width="1920"
  data-height="1080"
></div>

Renderiza con valores personalizados apuntando directamente al archivo de composición:

npx --yes [email protected] render 'compositions/frost-sequence-camera-orbit/frost-sequence-camera-orbit.html' --variables '{"headline1":"Difícil de|romper.","headline2":"Fácil de|recordar."}'

Variables

Se leen en tiempo de ejecución a través de window.__hyperframes.getVariables(); se declaran en la raíz de la composición como data-composition-variables (atributo entre comillas simples, JSON simple).

idtipopredeterminadoetiqueta / rango
headline1cadena`"Difícil deromper."`
headline2cadena`"Fácil derecordar."`
logoUrlcadena"assets/logo.svg"Ruta del activo SVG del logotipo (subir en Activos, luego pegar la ruta) máx. 200 caracteres
assemblyModeenumeración"hybrid"Respuesta de ensamblaje (física
materialBaseColorcolor"#ffffff"Color base
baseRoughnessnúmero0.31Rugosidad base 0–0.5 paso 0.005
materialTransmissionbooleanotrueTransmisión
materialBacklightnúmero0.27Retroiluminación a través del hielo 0–2 paso 0.01
iornúmero1.675Índice de refracción 1–2 paso 0.005
thicknessScalenúmero2.04Escala de grosor 0.1–3 paso 0.01
materialAbsorptionbooleanotrueAbsorción / tinte
attenuationColorcolor"#d5f4ff"Color de atenuación (blanco = sin absorción, vidrio claro)
attenuationDistancenúmero6.54Distancia de atenuación 0.05–12 paso 0.01
materialDispersionbooleanofalseDispersión
dispersionnúmero0.12Dispersión (0 = desactivado; activar/desactivar recarga) 0–0.3 paso 0.005
materialReflectionsbooleanotrueReflexiones
envIntensitynúmero2.04Intensidad del entorno 0–3 paso 0.01
specularIntensitynúmero1.44Intensidad especular 0–2 paso 0.01
materialFrostbooleanotrueEscarcha
materialInteriorFrostnúmero0Escarcha uniforme 0–1 paso 0.01
frostScalenúmero0.7Escala 0.2–6 paso 0.05
frostThresholdnúmero0.62Umbral (1 = sin escarcha, vidrio claro) 0–1 paso 0.01
frostSoftnessnúmero0.24Suavidad 0.01–1 paso 0.01
frostRoughnessnúmero0.73Rugosidad 0–1 paso 0.01
frostDiffusenúmero0.11Difuso (cuánta luz captan las áreas con escarcha) 0–1 paso 0.01
materialSurfaceBumpsbooleanofalseProtuberancias/muescas de grieta en la superficie del objeto
materialCrystalsbooleanotrueProtuberancias de cristal
crystalBumpnúmero0.01Protuberancia de cristal 0–1 paso 0.01
crystalScalenúmero4Escala de cristal 4–80 paso 1
materialGrainbooleanotrueProtuberancias de grano
materialGrainAmountnúmero0.47Fuerza del grano 0–2 paso 0.01
materialGrainScalenúmero150Escala del grano 1–150 paso 1
materialCutNormalsbooleanotrueNormales de fractura
materialMicrobooleanotrueMicro protuberancias
microBumpnúmero0.445Micro protuberancia 0–1 paso 0.005
microScalenúmero10Micro escala 10–200 paso 1
microCoveragenúmero0.25Micro cobertura 0–1 paso 0.01
bumpMaskScalenúmero1.45Escala de máscara 0.1–6 paso 0.05
materialRipplesbooleanotrueOndulaciones
rippleBumpnúmero0.22Protuberancia de ondulación 0–1 paso 0.01
rippleScalenúmero23Escala de ondulación 2–30 paso 0.5
materialSmudgesbooleanotrueManchas
smudgeAmountnúmero0.78Cantidad 0–1 paso 0.01
smudgeCoveragenúmero0.58Cobertura 0–1 paso 0.01
smudgeMaskScalenúmero1.85Escala de máscara 0.1–6 paso 0.05
smudgeAnisotropynúmero16.5Anisotropía 1–20 paso 0.5
smudgeRoughnessnúmero0.75Rugosidad 0–1 paso 0.01
smudgeWhitenessnúmero0.035Blancura 0–0.5 paso 0.005
smudgeScalenúmero1.3Escala 0.5–10 paso 0.1
materialCracksbooleanotrueGrietas
crackLargeScalenúmero2.45Escala grande 0.3–8 paso 0.05
crackWarpnúmero0.22Deformación 0–1.5 paso 0.01
crackCoveragenúmero0.19Cobertura 0–1 paso 0.01
crackRegionScalenúmero1.8Escala de región 0.1–4 paso 0.05
crackRegionCoveragenúmero0.6Cobertura de región 0–1 paso 0.01
veinScalenúmero8Escala de veta 1–20 paso 0.25
veinContrastnúmero0.55Contraste de veta 0–1 paso 0.01
crackWidthnúmero0.0025Ancho 0.0005–0.02 paso 0.0005
crackBrightnessnúmero0.65Brillo 0–3 paso 0.01
crackDarknessnúmero0.69Oscuridad 0–1 paso 0.01
crackRefractionnúmero0.076Refracción 0–0.1 paso 0.001
crackSurfaceStrengthnúmero0.16Fuerza de superficie 0–1 paso 0.01
fineScalenúmero18.4Escala fina 2–20 paso 0.1
fineAmountnúmero0.52Cantidad fina 0–1 paso 0.01
fineCoveragenúmero1Cobertura fina 0–1 paso 0.01
materialScatterbooleanotrueDispersión interna
materialInclusionScalenúmero0.05Escala de inclusión 0.05–3 paso 0.01
materialInclusionAmountnúmero2Inclusiones fotográficas 0–2 paso 0.01
interiorScatternúmero0.09Dispersión interior 0–1 paso 0.01
materialClearcoatbooleanotrueBarniz transparente
clearcoatnúmero0Barniz transparente 0–1 paso 0.01

...

[truncado para la traducción]

Individual skills in this repo

This repo contains 20 individual skills — each has its own dedicated page.

general-video

>

heygen-com/animejs

Anime.js adapter patterns for HyperFrames. Use when writing Anime.js animations or timelines inside HyperFrames compositions, registering animations on window.__hfAnime, making Anime.js seek-driven and deterministic, or translating Anime.js examples into render-safe HyperFrames HTML.

heygen-com/claude-design-hyperframes

Use when running inside Claude Design specifically. Produces a valid, brand-accurate HyperFrames video draft using pre-valid skeletons. For Claude Code / Cursor / Codex, use the `hyperframes` skill instead.

heygen-com/contribute-catalog

Author a new HyperFrames registry block (caption style, VFX block, transition, lower third) or component (text effect, overlay, snippet) and ship it as an upstream PR to the hyperframes repo. Use ONLY when the user wants to CONTRIBUTE to the public catalog — for in-project caption/transition authoring use the `hyperframes` skill, for installing existing registry items use the `hyperframes-registry` skill.

heygen-com/css-animations

CSS animation adapter patterns for HyperFrames. Use when authoring CSS keyframes, animation-delay based timing, animation-fill-mode, animation-play-state, or CSS-only motion that HyperFrames must seek deterministically during preview and rendering.

heygen-com/gsap

GSAP animation reference for HyperFrames. Covers gsap.to(), from(), fromTo(), easing, stagger, defaults, timelines (gsap.timeline(), position parameter, labels, nesting, playback), and performance (transforms, will-change, quickTo). Use when writing GSAP animations in HyperFrames compositions.

heygen-com/hyperframes

Leaves sweep through the frame and part to reveal the headline. HyperFrames block, 1920×1080, 12s, 11 variables.

heygen-com/hyperframes

Render-correctness doctrine for scene-to-scene seams in HyperFrames launch videos — the prerequisites that make transitions composite correctly on the master timeline. Load when assembling the master timeline / index.html, when a white flash appears at a cut or crossfade seam (especially on dark films), when reasoning about why a transition opacity dip shows through, or when verifying the render-side mechanics of how overlapping scene wrappers blend. Covers the opaque stage-ground (#root background) white-flash guard and how the injector overlaps wrappers, holds final frames, ping-pongs tracks, and stamps lint-clean template code onto the master timeline. Does NOT contain the per-transition catalog — see the transition registry for individual transition entries.

heygen-com/hyperframes

The technique catalog: five velocity-matched SEAMS (zoom-through, INVERSE zoom-through, cut-the-curve, waterfall cut, rack-focus blur-cut) plus the two in-scene techniques — waterfall ENTRY (staggered arrival cascades for title cards / segment openers) and the nudge curve (slow-fast-slow three-phase group slides). Covers partial-travel (~12% of frame) velocity matching via mirrored power4 eases, the Z scale-sign rule, size-scaled blur (10px text / 18-20px full-frame), word-by-word staggered cuts, cascade pacing by element weight, and the 10/65/25 slide ratio. Read before authoring any transition, text-beat handoff, kinetic text entry, or group reposition. [depth, zoom, inverse-zoom, scale-sign, mirrored-zoom, rack-focus, pacing, velocity, cut-the-curve, waterfall, stagger, cascade, kinetic-text, title-card, segment-opener, nudge, slide, easing, group-motion, z-depth, motion-graphics, cinematic, transition, blur, directional-continuity]

heygen-com/hyperframes

A single feature card orbits a dot sphere on approved Blender camera motion. HyperFrames block, 1920×1080, 10s, 4 variables.

heygen-com/hyperframes

A wireframe portal bursts open, the title comes through, then its letters swap into a second phrase. HyperFrames block, 1920×1080, 8s, 9 variables.

heygen-com/hyperframes

Glass shards fly in through fog and tile themselves into the headline. HyperFrames block, 1920×1080, 12.16s, 19 variables.

heygen-com/hyperframes

House-style oversized macOS cursor technique for HyperFrames launch videos. Load whenever a scene involves cursors or a pointer-led action, when kicking off a UI scene, when igniting a morph/transition/typing run with a click, or when a scene reads as static, dead, or stale and needs a cheap high-yield source of motion to carry the viewer's eye and segment them out of the stale state. Covers cursor size/look (incl. brand-motif cursors), the off-screen entry law, tip-targeting and the click tap, click-ignites-the-next-beat, and exit / cross-scene handoff.

heygen-com/hyperframes

A chain of bevelled cuboids rides a travelling wave as a content carousel. HyperFrames block, 1920×1080, 6.666666666666667s, 40 variables.

heygen-com/hyperframes

name: embedded-captions

heygen-com/hyperframes

A tiled headline surface flips cell by cell under a sweeping depth field to reveal the rear headline. HyperFrames block, 1920×1080, 8s, 18 variables.

heygen-com/hyperframes

Turn arbitrary text — an article, notes, a topic, a brief — into a faceless explainer video: there is no site or footage to capture, so the visuals are invented per scene (typography, abstract graphics, diagrams, data-viz). Use for topic explainers, concept breakdowns, how-tos, listicles. Not a video built from a website (/product-launch-video — promo or tour). Unclear → /hyperframes.

heygen-com/hyperframes

Import Figma content into a HyperFrames composition — rendered assets, brand tokens, components, storyboard sections → reconstructed motion (frames read as states, not slides) (REST/CLI), connector-assisted motion when available, and shaders from a connector or native export. Use when the user pastes a figma.com link or asks to bring a Figma design, frame, logo, brand, or animation into a video/composition.

heygen-com/hyperframes

GATEWAY — load FIRST before composing any HyperFrames animation or video. The high-level motion law that makes a multi-scene video feel like ONE continuous camera move instead of a stack of independently-animated slides. Covers the vector law (how you exit determines how you enter, incl. the Z scale-sign rule), the film's current, carrier elements, causal motion, the Seam Gate (build-gate enforcement), the ban on idle wobble (motion must PERFORM, not breathe), stillness-before-climax, and the sustained-motion routes. Routes to the low-level technique skills (cut-the-curve — the full catalog incl. waterfall entry + nudge curve, oversized-cursor, seam-craft). These rules SUPERSEDE generic / upstream motion guidance. [continuity, direction, vector, momentum, seam, transition, ease, performance, idle-motion, narrative-motion, film-grammar]

heygen-com/hyperframes

Turn a weekly changelog .md into a finished branded changelog video (square 1080, ~45-60s, Annie VO, animated brand background, mock-UI visualizations, lowkey captions). Use when the user provides a changelog/digest markdown and wants the weekly video, or says "changelog video". Self-contained — fonts, background, lexicon, and scripts ship in this skill.

Skills relacionados

steipete/video-frames

Extract frames or short clips from videos using ffmpeg.

community

steipete/summarize

Summarize or transcribe URLs, YouTube/videos, podcasts, articles, transcripts, PDFs, and local files.

community

openclaw/openclaw

Use when testing, fixing, or extending the OpenClaw Control UI GUI with Vitest + Playwright end-to-end checks, mocked Gateway WebSocket flows, mocked dashboard runs, screenshots/videos, or agent-verifiable browser proof.

community

obra/superpowers

Obra superpowers agent skills.

community

affaan-m/ECC

See, Understand, Act on video and audio. See- ingest from local files, URLs, RTSP/live feeds, or live record desktop; return realtime context and playable stream links. Understand- extract frames, build visual/semantic/temporal indexes, and search moments with timestamps and auto-clips. Act- transcode and normalize (codec, fps, resolution, aspect ratio), perform timeline edits (subtitles, text/image overlays, branding, audio overlays, dubbing, translation), generate media assets (image, audio...

community

affaan-m/everything-claude-code

End-to-end marketing campaign planning and execution. Covers audience research, positioning, campaign angle definition, landing page copy, email sequences, social posts, ad copy, short-form video scripts, and content calendars. Use as the orchestration layer for multi-channel product launches. Use when planning or executing a multi-channel product launch, or producing landing page, email, social, or ad copy.

community