Communitygithub.com

Sequência de Gelo com Órbita de Câmera - Frost

Uma câmera em órbita segue um logotipo de gelo que se despedaça, se reforma em dois momentos de texto e desaparece. Bloco HyperFrames, 1920×1080, 22,5s, 216 variáveis.

O que é Sequência de Gelo com Órbita de Câmera - Frost?

Esta skill fornece um bloco HyperFrames completo para criar uma animação cinematográfica de 22,5 segundos em 1920×1080, onde uma câmera orbita objetos fixos (um logotipo SVG e dois textos personalizáveis) enquanto eles passam por uma transição de gelo: o logotipo se despedaça em partículas e se reforma no primeiro texto, que depois se desfaz e se transforma no segundo texto, que finalmente se desfaz e desaparece. A câmera desacelera durante as passagens frontais para facilitar a leitura dos textos. A skill é voltada para usuários do HyperFrames, um framework de composição animada baseado em Three.js e GSAP. São 216 variáveis de personalização que controlam desde os textos e o logotipo até todos os aspectos do material do gelo: cor base, aspereza, transmissão, dispersão, reflexos, gelo na superfície, cristais, trincas, arranhões, grãos, ondulações, manchas, rachaduras, espalhamento interno, revestimento transparente e muito mais. A instalação é feita via `npx hyperframes add`, e a renderização pode ser personalizada passando variáveis JSON diretamente no comando de renderização. A composição já inclui fontes Geist, texturas de ruído azul e inclusões de gelo, e um atlas de fragmentos pré-gerado.

Funciona com~Claude Code~Codex CLI~Cursor
npx skills add https://github.com/szeproka/hyperframes-registry/tree/HEAD/registry/blocks/frost-sequence-camera-orbit
Ver original→Navegar por todas as habilidades

Perguntar na sua IA favorita

Abre um novo chat com esta habilidade de agente já pré-carregada.

OpenAIChatGPTClaudeClaudeGeminiGeminiGrokGrokPerplexityPerplexityDeepSeekDeepSeek

Documentação

Sequência de Gelo com Órbita de Câmera

Uma sequência de gelo completa de 22,5 segundos: logotipo, primeiro texto, segundo texto, fragmentação e desaparecimento. A câmera orbita os objetos fixos com passagens frontais mais lentas para leitura. O mesmo campo de partículas carrega cada transição. Personalize os dois momentos de texto e o logotipo SVG; a fonte inclui temporização editável da câmera e da montagem.

ID da composição: frost-sequence-rig. Duração 22,5 s a 30 fps, 1920×1080.

Arquivos

  • 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 (baixado do CDN na instalação)
  • assets/test-mark.svg (1 KB)
  • assets/textures/bluenoise64.png (12 KB)
  • assets/textures/ice-inclusions-generated.png (baixado do CDN na instalação)

Instalação

Instale com npx hyperframes add frost-sequence-camera-orbit; por padrão, os arquivos acima são copiados para compositions/frost-sequence-camera-orbit/. Em seguida, monte o bloco a partir do index.html do 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>

Renderize com valores personalizados apontando diretamente para o arquivo de composição:

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

Variáveis

Lidas em tempo de execução via window.__hyperframes.getVariables(); declaradas na raiz da composição como data-composition-variables (atributo entre aspas simples, JSON puro).

idtipopadrãorótulo / faixa
headline1string`"Difícil dequebrar."`
headline2string`"Fácil delembrar."`
logoUrlstring"assets/logo.svg"Caminho do SVG do logotipo (faça upload em Ativos, depois cole o caminho) máx. 200 caracteres
assemblyModeenum"hybrid"Resposta da montagem (física
materialBaseColorcolor"#ffffff"Cor base
baseRoughnessnúmero0.31Aspereza base 0–0,5 passo 0,005
materialTransmissionbooleantrueTransmissão
materialBacklightnúmero0.27Luz de fundo através do gelo 0–2 passo 0,01
iornúmero1.675Índice de refração 1–2 passo 0,005
thicknessScalenúmero2.04Escala de espessura 0,1–3 passo 0,01
materialAbsorptionbooleantrueAbsorção / matiz
attenuationColorcolor"#d5f4ff"Cor de atenuação (branco = sem absorção, vidro claro)
attenuationDistancenúmero6.54Distância de atenuação 0,05–12 passo 0,01
materialDispersionbooleanfalseDispersão
dispersionnúmero0.12Dispersão (0 = desligado; ligar/desligar recarrega) 0–0,3 passo 0,005
materialReflectionsbooleantrueReflexos
envIntensitynúmero2.04Intensidade do ambiente 0–3 passo 0,01
specularIntensitynúmero1.44Intensidade especular 0–2 passo 0,01
materialFrostbooleantrueGelo na superfície
materialInteriorFrostnúmero0Gelo uniforme 0–1 passo 0,01
frostScalenúmero0.7Escala 0,2–6 passo 0,05
frostThresholdnúmero0.62Limiar (1 = sem gelo, vidro claro) 0–1 passo 0,01
frostSoftnessnúmero0.24Suavidade 0,01–1 passo 0,01
frostRoughnessnúmero0.73Aspereza 0–1 passo 0,01
frostDiffusenúmero0.11Difusão (quanta luz as áreas geladas capturam) 0–1 passo 0,01
materialSurfaceBumpsbooleanfalseSaliências na superfície / marcas de trinca
materialCrystalsbooleantrueSaliências de cristal
crystalBumpnúmero0.01Saliência de cristal 0–1 passo 0,01
crystalScalenúmero4Escala do cristal 4–80 passo 1
materialGrainbooleantrueSaliências de grão
materialGrainAmountnúmero0.47Força do grão 0–2 passo 0,01
materialGrainScalenúmero150Escala do grão 1–150 passo 1
materialCutNormalsbooleantrueNormais de fratura
materialMicrobooleantrueMicro-saliências
microBumpnúmero0.445Micro-saliência 0–1 passo 0,005
microScalenúmero10Micro-escala 10–200 passo 1
microCoveragenúmero0.25Cobertura micro 0–1 passo 0,01
bumpMaskScalenúmero1.45Escala da máscara 0,1–6 passo 0,05
materialRipplesbooleantrueOndulações
rippleBumpnúmero0.22Saliência de ondulação 0–1 passo 0,01
rippleScalenúmero23Escala da ondulação 2–30 passo 0,5
materialSmudgesbooleantrueManchas
smudgeAmountnúmero0.78Quantidade 0–1 passo 0,01
smudgeCoveragenúmero0.58Cobertura 0–1 passo 0,01
smudgeMaskScalenúmero1.85Escala da máscara 0,1–6 passo 0,05
smudgeAnisotropynúmero16.5Anisotropia 1–20 passo 0,5
smudgeRoughnessnúmero0.75Aspereza 0–1 passo 0,01
smudgeWhitenessnúmero0.035Brancura 0–0,5 passo 0,005
smudgeScalenúmero1.3Escala 0,5–10 passo 0,1
materialCracksbooleantrueRachaduras
crackLargeScalenúmero2.45Escala grande 0,3–8 passo 0,05
crackWarpnúmero0.22Deformação 0–1,5 passo 0,01
crackCoveragenúmero0.19Cobertura 0–1 passo 0,01
crackRegionScalenúmero1.8Escala da região 0,1–4 passo 0,05
crackRegionCoveragenúmero0.6Cobertura da região 0–1 passo 0,01
veinScalenúmero8Escala da veia 1–20 passo 0,25
veinContrastnúmero0.55Contraste da veia 0–1 passo 0,01
crackWidthnúmero0.0025Largura 0,0005–0,02 passo 0,0005
crackBrightnessnúmero0.65Brilho 0–3 passo 0,01
crackDarknessnúmero0.69Escuridão 0–1 passo 0,01
crackRefractionnúmero0.076Refração 0–0,1 passo 0,001
crackSurfaceStrengthnúmero0.16Força da superfície 0–1 passo 0,01
fineScalenúmero18.4Escala fina 2–20 passo 0,1
fineAmountnúmero0.52Quantidade fina 0–1 passo 0,01
fineCoveragenúmero1Cobertura fina 0–1 passo 0,01
materialScatterbooleantrueEspalhamento interno
materialInclusionScalenúmero0.05Escala de inclusão 0,05–3 passo 0,01
materialInclusionAmountnúmero2Inclusões fotográficas 0–2 passo 0,01
interiorScatternúmero0.09Espalhamento interno 0–1 passo 0,01
materialClearcoatbooleantrueRevestimento transparente
clearcoatnúmero0Revestimento transparente 0–1 passo 0,01

...

Individual skills in this repo

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

szeproka/hyperframes-registry

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

szeproka/hyperframes-registry

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.

szeproka/hyperframes-registry

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

szeproka/hyperframes-registry

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

Habilidades Relacionadas

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