Communitygithub.com

heygen-com/hyperframes

승인된 Blender 카메라 움직임에 따라 단일 기능 카드가 도트 구체 주위를 공전합니다. HyperFrames 블록, 1920×1080, 10초, 4개 변수.

hyperframes란 무엇인가요?

이 스킬은 HyperFrames 에코시스템을 위한 `orbit-card`라는 Blender 기반의 모션 그래픽 구성을 제공합니다. 중앙에 위치한 기능 카드가 도트 구체 주위를 공전하며, 오른쪽에서 진입하여 왼쪽으로 퇴장하는 10초 길이의 애니메이션을 구현합니다. 카드 제목, 설명, 강조 색상, 공전 각도를 변수로 조정할 수 있어 마케팅 랜딩 페이지나 제품 소개 자료에 쉽게 통합할 수 있습니다. 이 스킬은 Cursor, Claude Code, Codex와 같은 AI 코딩 에이전트와 함께 사용하도록 설계되었으며, `npx hyperframes add orbit-card` 명령어로 설치하고 HTML 속성을 통해 웹 페이지에 마운트할 수 있습니다. 모든 프레임이 시간의 닫힌 함수로 계산되어 seek 안전성을 보장하므로, 빠른 모션과 부드러운 전환 효과가 필요한 현대적인 웹 인터페이스에 이상적입니다.

지원 대상~Claude Code~Codex CLI~Cursor
npx skills add https://github.com/heygen-com/hyperframes/tree/main/registry/blocks/orbit-card
원본 보기→모든 스킬 둘러보기

즐겨 사용하는 AI에게 물어보기

이 에이전트 스킬이 미리 로드된 새 채팅을 엽니다.

OpenAIChatGPTClaudeClaudeGeminiGeminiGrokGrokPerplexityPerplexityDeepSeekDeepSeek

문서

Orbit Card

하나의 중앙 기능 카드가 원형 컷아웃으로 도트 구체를 프레이밍합니다. 카드는 오른쪽에서 진입하여(0.25–1.80초) 미세한 바운스와 깊이 드리프트를 유지하며, 구체 중심을 기준으로 한 바퀴 공전한 후(smoothstep, 4.97–5.97초) 왼쪽으로 퇴장합니다(7.35–8.55초). 카메라 경로와 카드 F-커브는 승인된 Blender 리그에서 30fps로 내보내져 보간되며, 구체는 자체 이동과 일정한 회전을 유지합니다. 제목, 설명, 강조 색상 및 공전 각도는 변수로 설정 가능합니다. 180°와 720°도 키를 건드리지 않고 작동합니다.

구성 ID: orbit-card. 길이 10초, 30fps, 1920×1080.

파일

  • orbit-card.html (3 KB)
  • assets/Archivo-LICENSE.txt (4 KB)
  • assets/Three-LICENSE.txt (1 KB)
  • assets/archivo-regular.ttf (108 KB)
  • assets/archivo-semibold.ttf (109 KB)
  • assets/gsap-3.14.2.min.js (128 KB)
  • assets/GSAP-NOTICE.txt (1 KB)
  • assets/orbit-motion.js (59 KB)
  • assets/orbit-scene.js (8 KB)
  • assets/three.core.min.js (554 KB)
  • assets/three.module.min.js (468 KB)

설치

npx hyperframes add orbit-card 명령어로 설치하며, 기본적으로 위 파일들은 compositions/orbit-card/ 디렉터리에 저장됩니다. 그런 다음 호스트 index.html에서 블록을 마운트합니다:

<div
  data-composition-id="orbit-card"
  data-composition-src="compositions/orbit-card/orbit-card.html"
  data-start="0"
  data-duration="10"
  data-track-index="1"
  data-width="1920"
  data-height="1080"
></div>

커스텀 값으로 렌더링하려면 구성 파일을 직접 대상으로 지정합니다:

npx --yes [email protected] render 'compositions/orbit-card/orbit-card.html' --variables '{"feature1Title":"Always in sync","feature1Desc":"Changes reach every screen the moment they happen."}'

변수

런타임 시 window.__hyperframes.getVariables()를 통해 읽습니다. 구성 루트에 data-composition-variables 속성(작은따옴표 속성, 일반 JSON)으로 선언됩니다.

id타입기본값레이블 / 범위
feature1Titlestring"Always in sync"카드 제목 최대 28자
feature1Descstring"Changes reach every screen the moment they happen."카드 설명 최대 110자
feature1Accentcolor"#4cc9ff"카드 강조 색상
cardOrbitDegreesnumber360카드 공전 각도 -36000~36000 단계 1

런타임 계약

  • window.__timelines["orbit-card"]에 등록된 하나의 일시정지된 GSAP 타임라인.
  • hf-seek CustomEvent에 재동기화됨. 모든 프레임은 시간의 닫힌 함수입니다(시드된 PRNG만 사용, rAF 루프 없음, Date.now 없음).
  • 렌더러: GSAP.
  • 외부 런타임 종속성: 없음(로컬에서 제공).
  • 로컬 폰트: assets/archivo-regular.ttf, assets/archivo-semibold.ttf.

편집 규칙 (소스 프로젝트 기준)

  1. data-composition-variables는 작은따옴표 속성으로 유지하고 일반 " JSON을 사용합니다. Studio의 디자인 패널을 통해 저장하지 마십시오.
  2. 정적 마크업에 <canvas>를 두지 마십시오. 런타임에 생성하십시오.
  3. 모든 시각적 상태를 t의 함수로 유지하십시오. seek 안전성은 블록을 렌더링 가능하게 만드는 핵심입니다.

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

Glass shards fly in through fog and tile themselves into the headline. HyperFrames block, 1920×1080, 12.16s, 19 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

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

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.

관련 스킬

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