name: frost-sequence-camera-orbit description: 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.

Frost Sequence Camera Orbit

A complete 22.5-second ice sequence: logo, first text, second text, breakup, and fade. The camera orbits the fixed objects with slower front-facing passes for reading. The same particle field carries each transition. Customize the two text moments and SVG logo; the source includes editable camera and assembly timing.

Composition id: frost-sequence-rig. Duration 22.5 s at 30 fps, 1920×1080.

Files

• 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 (fetched from the CDN at install)
• assets/test-mark.svg (1 KB)
• assets/textures/bluenoise64.png (12 KB)
• assets/textures/ice-inclusions-generated.png (fetched from the CDN at install)

Install

Install with npx hyperframes add frost-sequence-camera-orbit; by default the files above land under compositions/frost-sequence-camera-orbit/. Then mount the block from the host index.html:

<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>

Render with custom values by targeting the composition file directly:

npx --yes hyperframes@0.8.12 render 'compositions/frost-sequence-camera-orbit/frost-sequence-camera-orbit.html' --variables '{"headline1":"Hard to|break.","headline2":"Easy to|remember."}'

Variables

Read at runtime via window.__hyperframes.getVariables(); declared on the composition root as data-composition-variables (single-quoted attribute, plain JSON).

| id | type | default | label / range | | --------------------------- | ------- | ------------------- | --------------------------------------------------------------------------------------------- | ------------- | -------------------------- | ------- | ------- | | headline1 | string | "Hard to | break." | First text ( | = line break) max 60 chars | | headline2 | string | "Easy to | remember." | Second text ( | = line break) max 60 chars | | logoUrl | string | "assets/logo.svg" | Logo SVG asset path (upload in Assets, then paste path) max 200 chars | | assemblyMode | enum | "hybrid" | Assembly response (physical | directed | hybrid) | | materialBaseColor | color | "#ffffff" | Base color | | baseRoughness | number | 0.31 | Base roughness 0–0.5 step 0.005 | | materialTransmission | boolean | true | Transmission | | materialBacklight | number | 0.27 | Backlight through ice 0–2 step 0.01 | | ior | number | 1.675 | Index of refraction 1–2 step 0.005 | | thicknessScale | number | 2.04 | Thickness scale 0.1–3 step 0.01 | | materialAbsorption | boolean | true | Absorption / tint | | attenuationColor | color | "#d5f4ff" | Attenuation colour (white = no absorption, clear glass) | | attenuationDistance | number | 6.54 | Attenuation distance 0.05–12 step 0.01 | | materialDispersion | boolean | false | Dispersion | | dispersion | number | 0.12 | Dispersion (0 = off; on/off reloads) 0–0.3 step 0.005 | | materialReflections | boolean | true | Reflections | | envIntensity | number | 2.04 | Environment intensity 0–3 step 0.01 | | specularIntensity | number | 1.44 | Specular intensity 0–2 step 0.01 | | materialFrost | boolean | true | Frost | | materialInteriorFrost | number | 0 | Uniform frost 0–1 step 0.01 | | frostScale | number | 0.7 | Scale 0.2–6 step 0.05 | | frostThreshold | number | 0.62 | Threshold (1 = no frost, clear glass) 0–1 step 0.01 | | frostSoftness | number | 0.24 | Softness 0.01–1 step 0.01 | | frostRoughness | number | 0.73 | Roughness 0–1 step 0.01 | | frostDiffuse | number | 0.11 | Diffuse (how much light frosted areas catch) 0–1 step 0.01 | | materialSurfaceBumps | boolean | false | Object surface bumps / crack notches | | materialCrystals | boolean | true | Crystal bumps | | crystalBump | number | 0.01 | Crystal bump 0–1 step 0.01 | | crystalScale | number | 4 | Crystal scale 4–80 step 1 | | materialGrain | boolean | true | Grain bumps | | materialGrainAmount | number | 0.47 | Grain strength 0–2 step 0.01 | | materialGrainScale | number | 150 | Grain scale 1–150 step 1 | | materialCutNormals | boolean | true | Fracture normals | | materialMicro | boolean | true | Micro bumps | | microBump | number | 0.445 | Micro bump 0–1 step 0.005 | | microScale | number | 10 | Micro scale 10–200 step 1 | | microCoverage | number | 0.25 | Micro coverage 0–1 step 0.01 | | bumpMaskScale | number | 1.45 | Mask scale 0.1–6 step 0.05 | | materialRipples | boolean | true | Ripples | | rippleBump | number | 0.22 | Ripple bump 0–1 step 0.01 | | rippleScale | number | 23 | Ripple scale 2–30 step 0.5 | | materialSmudges | boolean | true | Smudges | | smudgeAmount | number | 0.78 | Amount 0–1 step 0.01 | | smudgeCoverage | number | 0.58 | Coverage 0–1 step 0.01 | | smudgeMaskScale | number | 1.85 | Mask scale 0.1–6 step 0.05 | | smudgeAnisotropy | number | 16.5 | Anisotropy 1–20 step 0.5 | | smudgeRoughness | number | 0.75 | Roughness 0–1 step 0.01 | | smudgeWhiteness | number | 0.035 | Whiteness 0–0.5 step 0.005 | | smudgeScale | number | 1.3 | Scale 0.5–10 step 0.1 | | materialCracks | boolean | true | Cracks | | crackLargeScale | number | 2.45 | Large scale 0.3–8 step 0.05 | | crackWarp | number | 0.22 | Warp 0–1.5 step 0.01 | | crackCoverage | number | 0.19 | Coverage 0–1 step 0.01 | | crackRegionScale | number | 1.8 | Region scale 0.1–4 step 0.05 | | crackRegionCoverage | number | 0.6 | Region coverage 0–1 step 0.01 | | veinScale | number | 8 | Vein scale 1–20 step 0.25 | | veinContrast | number | 0.55 | Vein contrast 0–1 step 0.01 | | crackWidth