Communitygithub.com

heygen-com/hyperframes

Una superficie de titulares en mosaico que voltea celda por celda bajo un campo de profundidad ondulante para revelar el titular trasero. Bloque HyperFrames, 1920×1080, 8s, 18 variables.

¿Qué es hyperframes?

Este bloque HyperFrames, llamado "Code Slice Hero", crea un efecto visual dinámico donde una cuadrícula de mosaicos muestra un titular frontal. Un cursor imaginario se desplaza sobre la superficie; los mosaicos cercanos responden a su campo de profundidad gaussiano levantándose e inclinándose. Solo las celdas que intersectan la silueta de los titulares se voltean para revelar el titular trasero, logrando una transición suave y llamativa. Está diseñado para plataformas web compatibles con HyperFrames (por ejemplo, entornos de renderizado de composiciones interactivas). Todo el grid se dibuja con una sola llamada de WebGL 2 instanciado, compartiendo un par de texturas frontal/trasera, más un pase de sombras proyectadas por lotes. Es útil para presentaciones, animaciones de titulares o cualquier escena que requiera un efecto de cuadrícula con profundidad y revelación, manteniendo independientes la copia, el tamaño de texto y el tamaño de celda para que los mosaicos nunca se estiren. La duración del barrido, la fuerza de la curva de easing, el radio del cursor, la caída, la profundidad, el rebote y la sombra son variables, ofreciendo un control fino sobre la animación.

Compatible con~Claude Code~Codex CLI✓Cursor
npx skills add https://github.com/heygen-com/hyperframes/tree/main/registry/blocks/code-slice-hero
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

Code Slice Hero

Una superficie completa de mosaicos cuadrados lleva un titular sin costuras. Un cursor imaginario cruza la superficie; los mosaicos cercanos responden a su campo de profundidad gaussiano con elevación e inclinación, y solo las celdas que intersectan la silueta de cualquier titular se voltean para revelar el titular trasero. Toda la cuadrícula es un solo dibujo de WebGL 2 instanciado con un par de texturas frontal/trasera compartido, más un pase de sombras proyectadas por lotes. La copia, el tamaño del texto y el tamaño de la celda cuadrada son independientes, por lo que los mosaicos nunca se estiran. La dirección del barrido, la fuerza del easing, el radio del cursor, la caída, la profundidad, el rebote y la sombra son variables.

ID de composición: code-slice-hero. Duración 8 s a 30 fps, 1920×1080.

Archivos

  • code-slice-hero.html (24 KB)
  • assets/Geist-Bold.ttf (65 KB)
  • assets/Geist-OFL.txt (4 KB)
  • assets/gsap-3.14.2.min.js (128 KB)
  • assets/GSAP-NOTICE.txt (1 KB)
  • shadows.js (10 KB)
  • surface.js (8 KB)

Instalación

Instala con npx hyperframes add code-slice-hero; por defecto los archivos anteriores se colocan en compositions/code-slice-hero/. Luego monta el bloque desde el index.html anfitrión:

<div
  data-composition-id="code-slice-hero"
  data-composition-src="compositions/code-slice-hero/code-slice-hero.html"
  data-start="0"
  data-duration="8"
  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/code-slice-hero/code-slice-hero.html' --variables '{"headline":"HAZLO","reverseHeadline":"IMPORTA."'

Variables

Se leen en tiempo de ejecución mediante 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
headlinecadena"HAZLO"Copia · Titular frontal máx. 32 caracteres
reverseHeadlinecadena"IMPORTA."Copia · Titular trasero máx. 32 caracteres
directionenum"izquierda-a-derecha"Movimiento · Dirección del barrido (izquierda-a-derecha
sweepDurationnúmero4.2Movimiento · Duración del barrido 2.6–4.5 paso 0.05
sweepEaseStrengthnúmero3Movimiento · Fuerza del easing del barrido 0–3 paso 0.05
flipDurationnúmero0.75Movimiento · Duración del volteo de cada mosaico 0.65–1.65 paso 0.05
cursorRadiusnúmero210Cursor · Radio de influencia 160–480 paso 10
cursorFalloffnúmero1.4Cursor · Caída de la influencia 0.4–3.5 paso 0.05
cursorDepthnúmero80Cursor · Profundidad (+ hacia la cámara) -320–320 paso 10
tiltStrengthnúmero55Cursor · Fuerza de inclinación 0–55 paso 1
noiseStrengthnúmero2Movimiento · Variación orgánica 0–2 paso 0.05
flipBouncenúmero0.15Movimiento · Rebote elástico del volteo 0–0.8 paso 0.05
cellSizenúmero112Rebanadas · Tamaño de celda cuadrada 24–120 paso 4
formationScalenúmero1Rebanadas · Escala de formación local 0.94–1 paso 0.001
fontSizenúmero310Tipo · Tamaño máximo 160–480 paso 5
behindColorcolor"#212121"Superficie · Fondo detrás del mosaico
shadowStrengthnúmero0.19Superficie · Fuerza de la sombra proyectada 0–0.65 paso 0.01
shadowSoftnessnúmero4Superficie · Suavidad de la sombra proyectada 0.5–4 paso 0.1

Contrato de tiempo de ejecución

  • Una línea de tiempo GSAP pausada registrada como window.__timelines["code-slice-hero"].
  • Se resincroniza con el CustomEvent hf-seek; cada fotograma es una función de forma cerrada del tiempo (solo PRNG con semilla, sin bucles rAF, sin Date.now).
  • Renderizador: GSAP, Canvas 2D, PRNG con semilla.
  • Dependencias externas de tiempo de ejecución: ninguna (servidas localmente).
  • Fuentes locales: assets/Geist-Bold.ttf.

Reglas de edición (del proyecto fuente)

  1. Mantén data-composition-variables como un atributo entre comillas simples con JSON con ". Nunca lo guardes a través del panel de Diseño de Studio.
  2. No coloques <canvas> en el marcado estático; créalo en tiempo de ejecución.
  3. Mantén cada estado visual como una función de t; la seguridad de búsqueda es lo que hace que el bloque sea renderizable.

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

An orbiting camera follows an ice logo as it breaks apart, reforms into two text moments, and fades. HyperFrames block, 1920×1080, 22.5s, 216 variables.

heygen-com/hyperframes

name: embedded-captions

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

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