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 [email protected] 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 | --------------------------- | headline1 | headline2 | logoUrl | assemblyMode | materialBaseColor | baseRoughness | materialTransmission | materialBacklight | ior | thicknessScale | materialAbsorption | attenuationColor | attenuationDistance | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | type | default | label / range | | ------- | ------------------- | --------------------------------------------------------------------------------------------- | ------------- | -------------------------- | ------- | ------- | | string | "Hard to | break." | First text ( | = line break) max 60 chars | | string | "Easy to | remember." | Second text ( | = line break) max 60 chars | | string | "assets/logo.svg" | Logo SVG asset path (upload in Assets, then paste path) max 200 chars | | enum | "hybrid" | Assembly response (physical | directed | hybrid) | | color | "#ffffff" | Base color | | number | 0.31 | Base roughness 0–0.5 step 0.005 | | boolean | true | Transmission | | number | 0.27 | Backlight through ice 0–2 step 0.01 | | number | 1.675 | Index of refraction 1–2 step 0.005 | | number | 2.04 | Thickness scale 0.1–3 step 0.01 | | boolean | true | Absorption / tint | | color | "#d5f4ff" | Attenuation colour (white = no absorption, clear glass) | | number | 6.54 | Attenuation distance 0.05–12 step 0.01 | | boolean | | Dispersion | | number | | Dispersion (0 = off; on/off reloads) 0–0.3 step 0.005 | | boolean | | Reflections | | number | | Environment intensity 0–3 step 0.01 | | number | | Specular intensity 0–2 step 0.01 | | boolean | | Frost | | number | | Uniform frost 0–1 step 0.01 | | number | | Scale 0.2–6 step 0.05 | | number | | Threshold (1 = no frost, clear glass) 0–1 step 0.01 | | number | | Softness 0.01–1 step 0.01 | | number | | Roughness 0–1 step 0.01 | | number | | Diffuse (how much light frosted areas catch) 0–1 step 0.01 | | boolean | | Object surface bumps / crack notches | | boolean | | Crystal bumps | | number | | Crystal bump 0–1 step 0.01 | | number | | Crystal scale 4–80 step 1 | | boolean | | Grain bumps | | number | | Grain strength 0–2 step 0.01 | | number | | Grain scale 1–150 step 1 | | boolean | | Fracture normals | | boolean | | Micro bumps | | number | | Micro bump 0–1 step 0.005 | | number | | Micro scale 10–200 step 1 | | number | | Micro coverage 0–1 step 0.01 | | number | | Mask scale 0.1–6 step 0.05 | | boolean | | Ripples | | number | | Ripple bump 0–1 step 0.01 | | number | | Ripple scale 2–30 step 0.5 | | boolean | | Smudges | | number | | Amount 0–1 step 0.01 | | number | | Coverage 0–1 step 0.01 | | number | | Mask scale 0.1–6 step 0.05 | | number | | Anisotropy 1–20 step 0.5 | | number | | Roughness 0–1 step 0.01 | | number | | Whiteness 0–0.5 step 0.005 | | number | | Scale 0.5–10 step 0.1 | | boolean | | Cracks | | number | | Large scale 0.3–8 step 0.05 | | number | | Warp 0–1.5 step 0.01 | | number | | Coverage 0–1 step 0.01 | | number | | Region scale 0.1–4 step 0.05 | | number | | Region coverage 0–1 step 0.01 | | number | | Vein scale 1–20 step 0.25 | | number | | Vein contrast 0–1 step 0.01 | | number | | Width 0.0005–0.02 step 0.0005 | | number | | Brightness 0–3 step 0.01 | | number | | Darkness 0–1 step 0.01 | | number | | Refraction 0–0.1 step 0.001 | | number | | Surface strength 0–1 step 0.01 | | number | | Fine scale 2–20 step 0.1 | | number | | Fine amount 0–1 step 0.01 | | number | | Fine coverage 0–1 step 0.01 | | boolean | | Internal scattering | | number | | Inclusion scale 0.05–3 step 0.01 | | number | | Photographic inclusions 0–2 step 0.01 | | number | | Interior scatter 0–1 step 0.01 | | boolean | | Clearcoat | | number | | Clearcoat 0–1 step 0.01 | | number | | Clearcoat roughness 0–1 step 0.005 | | boolean | | Shard normals | | number | | Sprite normal strength 0–2.5 step 0.05 | | boolean | | Shard frost | | boolean | | Shard transparency | | number | | See-through (0 = off; on/off reloads) 0–1 step 0.01 | | boolean | | Shard reflections | | number | | Minimum pixel size 0–4 step 0.05 | | number | | Grain size multiplier 0.2–4 step 0.05 | | number | | Sprite size 0.3–4 step 0.05 | | number | | Sprite tilt 0–70 step 1 | | number | | Alpha cut 0.05–0.6 step 0.01 | | enum | | Type · Weight (Geist) (400 | 600 | 700) | | number | | Type · Letter spacing -0.1–0.4 step 0.005 | | number | | Shards · Visible fraction of the broken volume (Powder amount) 0.02–1 step 0.01 | | number | | Shards · Ambient dust motes around the object (the experiment had 40) 0–200 step 1 | | number | | Break · First (diagonal) slice radius 0.05–1.5 step 0.01 | | number | | Break · First slice strength 1–40 step 0.5 | | number | | Break · Last break: eject speed and speed cap multiplier 1–6 step 0.1 | | number | | Break · Follow-up slice radius (sets their spacing too) 0.1–1.5 step 0.01 | | number | | Break · Follow-up slice strength 1–40 step 0.5 | | number | | Tune break · Cut threshold (surface gone above this erosion) 0.3–0.98 step 0.01 | | number | | Tune break · Cut softness 0.005–0.3 step 0.005 | | number | | Tune break · Crumbly edge band width 0.05–0.8 step 0.01 | | number | | Tune break · Edge inset 0–0.3 step 0.005 | | number | | Tune break · Brush softness (edge falloff of a slice) 0.02–1 step 0.01 | | number | | Tune break · Brush noise (ragged boundary) 0–1 step 0.01 | | number | | Tune break · Crumble rate along cracks (high = the whole shape goes at once) 0–6 step 0.05 | | number | | Tune break · Crumble crack bias 0–6 step 0.05 | | number | | Tune break · Crumble duration after a stroke 0–2 step 0.01 | | number | | Flight · Eject speed 0–4 step 0.01 | | number | | Flight · Eject spread along the normal 0–3 step 0.01 | | number | | Flight · Eject turbulence 0–4 step 0.01 | | number | | Flight · Drag (speed decays by this per second) 0–8 step 0.01 | | number | | Flight · Gravity (0 = shards never fall) 0–2 step 0.005 | | number | | Flight · Turbulence strength (curl noise) 0–4 step 0.01 | | number | | Flight · Turbulence scale 0.2–8 step 0.05 | | number | | Flight · Turbulence decay with age (low = keeps swirling) 0.05–4 step 0.01 | | number | | Flight · Clump cohesion (shards orbit a leader; 0 = none) 0–10 step 0.05 | | number | | Flight · Shards follow the object motion for (s; 30 = whole flight) 0–30 step 0.5 | | number | | Flight · Settle time (velocity is killed after this; 12 = never) 0.3–12 step 0.05 | | number | | Flight · Organic drift once settled (curl noise) 0–1 step 0.005 | | number | | Flight · Speed cap 1–40 step 0.1 | | number | | Flight · Push out of the solid shape while it breaks 0–30 step 0.1 | | number | | Flight · Push range outside the surface 0.02–2 step 0.01 | | number | | Flight · Push away from the shape centre (clears pockets and the hole) 0–60 step 0.5 | | number | | Flight · Radial push range (object radii) 1–4 step 0.05 | | number | | Flight · Tumble rate 0–12 step 0.05 | | number | | Assembly · Regional delay (seconds) 0–1.5 step 0.05 | | number | | Assembly · Region / noise size 0.1–3 step 0.05 | | number | | Return · Group timing seed 0–65535 step 1 | | number | | Return · Wave spread (nearest shards leave first, seconds) 0–4 step 0.05 | | number | | Return · Distance over which the wave spreads 0.2–10 step 0.1 | | number | | Return · Per-shard stagger (random delay up to this) 0–3 step 0.05 | | number | | Return · Fill-in rate for voxels no shard returns to 0.05–3 step 0.05 | | number | | Return · Spring stiffness 0.5–40 step 0.1 | | number | | Return · Spring damping 0.2–2 step 0.01 | | number | | Return · Spring ramp-in (seconds until it pulls at full strength) 0–3 step 0.05 | | number | | Return · Speed cap on the way home 1–60 step 0.5 | | number | | Return · Shards turn to lie on the surface (0 = keep tumbling) 0–1 step 0.01 | | number | | Return · Alignment curve over the flight home (1 linear, higher = later) 0.2–4 step 0.05 | | number | | Return · Neighbour heal rate 0.02–3 step 0.01 | | number | | Return · Cell restore rate 0–60 step 0.5 | | number | | Return · Landed shard fade 0–2 step 0.01 | | number | | Return · Refrost time 0.2–12 step 0.1 | | color | | Light · Key colour | | number | | Light · Key intensity 0–12 step 0.05 | | number | | Light · Key elevation 10–89 step 0.5 | | number | | Light · Key azimuth -90–90 step 0.5 | | number | | Light · Key size (softbox) 0.2–3 step 0.01 | | number | | Light · Fill intensity (hemisphere, diffuse only: barely shows on clear ice) 0–1.5 step 0.005 | | color | | Light · Fill sky colour | | color | | Light · Fill ground colour | | number | | Light · Rim spot intensity 0–5 step 0.01 | | color | | Light · Rim colour | | number | | Light · Rim elevation (0 = straight behind) 0–89 step 0.5 | | number | | Light · Key sway amplitude 0–0.15 step 0.001 | | number | | Light · Key sway period 2–40 step 0.5 | | number | | Light · Environment softbox (the main light on glass) 0–3 step 0.01 | | number | | Light · Environment rim strip 0–3 step 0.01 | | number | | Light · Environment front fill 0–1 step 0.005 | | color | | Backdrop · Top colour | | color | | Backdrop · Mid colour | | color | | Backdrop · Bottom colour | | number | | Backdrop · Bloom centre X 0–1 step 0.005 | | number | | Backdrop · Bloom centre Y 0–2 step 0.005 | | number | | Backdrop · Bloom radius 0.1–2 step 0.005 | | number | | Backdrop · Bloom falloff 0.5–6 step 0.01 | | number | | Backdrop · Dither noise 0–3 step 0.05 | | number | | Post · Bloom threshold 0–3 step 0.01 | | number | | Post · Bloom intensity 0–1.5 step 0.005 | | number | | Post · Bloom radius 0–1 step 0.005 | | number | | Post · Monochrome 0–1 step 0.01 | | enum | | Post · Tonemap (agx | aces | neutral | linear) | | number | | Post · Exposure 0.1–4 step 0.01 | | number | | Post · Contrast 0.6–1.6 step 0.005 | | number | | Post · Black lift 0–0.1 step 0.001 | | number | | Post · Vignette strength 0–1 step 0.005 | | number | | Post · Vignette softness 0.1–1.5 step 0.005 | | number | | Post · Vignette radius 0.2–1.6 step 0.005 | | number | | Post · Film grain 0–0.15 step 0.001 | | enum | | Performance · Quality profile (full | lite) | | enum | | Performance · Upscaler (fsr1 | taau | bilinear | native) | | number | | Performance · Scene resolution scale (upscaled to 1080p) 0.35–1 step 0.05 | | enum | | Shape voxel resolution (128 | 256 | 384) | | enum | | Performance · Erosion field resolution (voxels per axis) (64 | 96 | 128 | 192) | | enum | | Performance · Powder particles (100k | 250k | 500k | 1M) | | number | | Shape · Logo mesh detail (1-4; higher = finer surface) 1–4 step 1 | | number | | Geometry · Ice deformation strength (0 = original) 0–0.08 step 0.001 | | number | | Geometry · Noise feature size (larger = broader) 0.001–0.5 step 0.001 | | number | | Geometry · Deformation seed 0–65535 step 1 | | number | | Light · Rim azimuth -180–180 step 1 | | number | | Light · Rim beam angle 10–89 step 1 | | number | | Light · Rim reflection size 0.1–3 step 0.05 | | number | | Light · Fill reflection strength 0–2 step 0.01 | | number | | Studio Cool accent · intensity 0–4 step 0.01 | | number | | Studio Cool accent · reflection 0–3 step 0.01 | | number | | Studio Cool accent · elevation -85–85 step 1 | | number | | Studio Cool accent · azimuth -180–180 step 1 | | number | | Studio Cool accent · size 0.1–3 step 0.05 | | color | | Studio Cool accent · color | | number | | Studio Warm accent · intensity 0–4 step 0.01 | | number | | Studio Warm accent · reflection 0–3 step 0.01 | | number | | Studio Warm accent · elevation -85–85 step 1 | | number | | Studio Warm accent · azimuth -180–180 step 1 | | number | | Studio Warm accent · size 0.1–3 step 0.05 | | color | | Studio Warm accent · color | | enum | | Assembly · Regional pattern (2 | 1 | 0) | | number | | Assembly · Growth duration (seconds) 0–6 step 0.05 | | number | | Assembly · Growth start X -1–1 step 0.01 | | number | | Assembly · Growth start Y -1–1 step 0.01 | | number | | Assembly · Seam direction (degrees) -180–180 step 1 | | number | | Assembly · Outward spread vs seam travel 0–1 step 0.01 | | number | | Assembly · Growth edge irregularity 0–1 step 0.01 | | number | | Assembly · Return speed variation 0–1 step 0.01 | | number | | Assembly · Approach path bend 0–3 step 0.05 | | number | | Assembly · Approach twist 0–3 step 0.05 | | number | | Assembly · Landing transition variation 0–1 step 0.01 | | enum | | Renderer experiment (reload required) (original | lookup | mesh | studio | matcap) | | number | | Type · Headline block width (the mark is 2.6 wide) 1.2–9 step 0.05 | | number | | Type · Line height 0.7–1.4 step 0.01 | | number | | Type · Extrusion depth (fraction of the font size) 0.05–0.8 step 0.01 | | number | | Type · Bevel (fraction of the font size) 0–0.12 step 0.005 | | number | | Type · Corner rounding (fraction of the font size) 0–0.06 step 0.002 | | number | | Type · Text mesh detail (1-4; higher = smoother deformation) 1–4 step 1 |

Runtime contract

One paused GSAP timeline registered as window.__timelines["frost-sequence-rig"].
Re-syncs on the hf-seek CustomEvent; every frame is a closed-form function of time (seeded PRNG only, no rAF loops, no Date.now).
Renderer: WebGPU, GSAP, Matcap.
External runtime dependencies: none (served locally).

Editing rules (from the source project)

Keep data-composition-variables a single-quoted attribute with plain " JSON. Never save it through Studio's Design panel.
Do not put <canvas> in static markup; create it at runtime.
Keep every visual state a function of t; seek-safety is what makes the block renderable.