frost-sequence-camera-orbit
لوگوی یخی را با حرکت دوربین، فروپاشی ذرات و بازسازی سینمایی به ویدیو تبدیل کنید.
این Skill یک بلوک آماده‌ی HyperFrames برای ساخت ویدیوی ۲۲٫۵ ثانیه‌ای با دوربین مداری است؛ لوگوی SVG از یخ شکل می‌گیرد، می‌شکند، به دو لحظه‌ی متنی تبدیل می‌شود و در پایان محو می‌شود. میدان ذرات در تمام انتقال‌ها حفظ می‌شود و عبورهای آرام دوربین فرصت خواندن متن را فراهم می‌کنند.
می‌توانید لوگو، دو headline، متریال یخ، ترک‌ها، ذرات، سرعت شکست و زمان‌بندی بازسازی را شخصی‌سازی کنید و خروجی 1920×1080 بگیرید. این قالب برای تیزر برند، معرفی محصول و ویدیوهای آغازین چشمگیر، بدون ساخت انیمیشن از صفر، کاربردی است.
چه چیزی می‌گیرید
- بلوک آماده‌ی HyperFrames با Composition ID به نام frost-sequence-rig
- انیمیشن ۲۲٫۵ ثانیه‌ای در ابعاد 1920×1080 و نرخ 30 fps
- جایگزینی آسان لوگوی SVG و دو متن headline با پشتیبانی از شکست خط
- کنترل گسترده روی متریال یخ، ترک‌ها، کریستال‌ها، ذرات و پراکندگی نور
- تنظیم مستقل حرکت دوربین، شکست، پرتاب ذرات و بازسازی با CLI
برای چه کاری خوب است
- استودیوهای طراحی و برندهایی که به یک تیزر لوگوی یخی یا کریستالی نیاز دارند
- توسعه‌دهندگان HyperFrames که می‌خواهند یک بلوک سه‌بعدی آماده را سریع شخصی‌سازی کنند
- ویدیوهای معرفی محصول، افتتاحیه‌ی کمپین و نمایش دو پیام متنی پشت‌سرهم
برای چه کاری نیست
- پروژه‌هایی که به خروجی کوتاه، دوبعدی یا بدون شبیه‌سازی ذرات نیاز دارند
- زمانی که به کنترل فریم‌به‌فریم یک نرم‌افزار تدوین یا انیمیشن سنتی احتیاج دارید
- لوگوهایی که فقط در قالب‌های raster موجودند و امکان تهیه‌ی SVG ندارند
دربارهٔ این اسکیل
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."` |
headline2 | string | `"Easy to | remember."` |
logoUrl | string | "assets/logo.svg" | Logo SVG asset path (upload in Assets, then paste path) max 200 chars |
assemblyMode | enum | "hybrid" | Assembly response (physical |
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 | number | 0.0025 | Width 0.0005–0.02 step 0.0005 |
crackBrightness | number | 0.65 | Brightness 0–3 step 0.01 |
crackDarkness | number | 0.69 | Darkness 0–1 step 0.01 |
crackRefraction | number | 0.076 | Refraction 0–0.1 step 0.001 |
crackSurfaceStrength | number | 0.16 | Surface strength 0–1 step 0.01 |
fineScale | number | 18.4 | Fine scale 2–20 step 0.1 |
fineAmount | number | 0.52 | Fine amount 0–1 step 0.01 |
fineCoverage | number | 1 | Fine coverage 0–1 step 0.01 |
materialScatter | boolean | true | Internal scattering |
materialInclusionScale | number | 0.05 | Inclusion scale 0.05–3 step 0.01 |
materialInclusionAmount | number | 2 | Photographic inclusions 0–2 step 0.01 |
interiorScatter | number | 0.09 | Interior scatter 0–1 step 0.01 |
materialClearcoat | boolean | true | Clearcoat |
clearcoat | number | 0 | Clearcoat 0–1 step 0.01 |
clearcoatRoughness | number | 0 | Clearcoat roughness 0–1 step 0.005 |
materialShardNormals | boolean | true | Shard normals |
spriteNormal | number | 0.15 | Sprite normal strength 0–2.5 step 0.05 |
materialShardFrost | boolean | true | Shard frost |
materialShardTransmission | boolean | true | Shard transparency |
spriteSeeThrough | number | 1 | See-through (0 = off; on/off reloads) 0–1 step 0.01 |
materialShardReflections | boolean | true | Shard reflections |
minPixelSize | number | 0.25 | Minimum pixel size 0–4 step 0.05 |
grainSizeMultiplier | number | 1.05 | Grain size multiplier 0.2–4 step 0.05 |
spriteSize | number | 1.9 | Sprite size 0.3–4 step 0.05 |
spriteTilt | number | 12 | Sprite tilt 0–70 step 1 |
spriteAlphaCut | number | 0.6 | Alpha cut 0.05–0.6 step 0.01 |
fontWeight | enum | "600" | Type · Weight (Geist) (400 |
letterSpacing | number | 0.01 | Type · Letter spacing -0.1–0.4 step 0.005 |
shardAmount | number | 0.44 | Shards · Visible fraction of the broken volume (Powder amount) 0.02–1 step 0.01 |
strayDust | number | 24 | Shards · Ambient dust motes around the object (the experiment had 40) 0–200 step 1 |
sliceRadius | number | 0.6 | Break · First (diagonal) slice radius 0.05–1.5 step 0.01 |
sliceStrength | number | 21.5 | Break · First slice strength 1–40 step 0.5 |
finalEjectBoost | number | 2.5 | Break · Last break: eject speed and speed cap multiplier 1–6 step 0.1 |
shatterRadius | number | 0.45 | Break · Follow-up slice radius (sets their spacing too) 0.1–1.5 step 0.01 |
shatterStrength | number | 32.5 | Break · Follow-up slice strength 1–40 step 0.5 |
cutThreshold | number | 0.3 | Tune break · Cut threshold (surface gone above this erosion) 0.3–0.98 step 0.01 |
cutSoftness | number | 0.19 | Tune break · Cut softness 0.005–0.3 step 0.005 |
edgeWidth | number | 0.19 | Tune break · Crumbly edge band width 0.05–0.8 step 0.01 |
edgeInset | number | 0 | Tune break · Edge inset 0–0.3 step 0.005 |
brushSoftness | number | 0.15 | Tune break · Brush softness (edge falloff of a slice) 0.02–1 step 0.01 |
brushNoise | number | 0.4 | Tune break · Brush noise (ragged boundary) 0–1 step 0.01 |
crumbleRate | number | 4.3 | Tune break · Crumble rate along cracks (high = the whole shape goes at once) 0–6 step 0.05 |
crumbleCrackBias | number | 5.1 | Tune break · Crumble crack bias 0–6 step 0.05 |
crumbleDuration | number | 0.35 | Tune break · Crumble duration after a stroke 0–2 step 0.01 |
ejectSpeed | number | 0.91 | Flight · Eject speed 0–4 step 0.01 |
ejectSpread | number | 0.48 | Flight · Eject spread along the normal 0–3 step 0.01 |
ejectTurbulence | number | 4 | Flight · Eject turbulence 0–4 step 0.01 |
drag | number | 0 | Flight · Drag (speed decays by this per second) 0–8 step 0.01 |
gravity | number | 0 | Flight · Gravity (0 = shards never fall) 0–2 step 0.005 |
turbulence | number | 4 | Flight · Turbulence strength (curl noise) 0–4 step 0.01 |
turbulenceScale | number | 2.65 | Flight · Turbulence scale 0.2–8 step 0.05 |
turbulenceDecay | number | 3.65 | Flight · Turbulence decay with age (low = keeps swirling) 0.05–4 step 0.01 |
clumpCohesion | number | 0.9 | Flight · Clump cohesion (shards orbit a leader; 0 = none) 0–10 step 0.05 |
followObject | number | 30 | Flight · Shards follow the object motion for (s; 30 = whole flight) 0–30 step 0.5 |
settleTime | number | 2.2 | Flight · Settle time (velocity is killed after this; 12 = never) 0.3–12 step 0.05 |
settledDrift | number | 1 | Flight · Organic drift once settled (curl noise) 0–1 step 0.005 |
maxSpeed | number | 26.3 | Flight · Speed cap 1–40 step 0.1 |
repelStrength | number | 30 | Flight · Push out of the solid shape while it breaks 0–30 step 0.1 |
repelRange | number | 0.97 | Flight · Push range outside the surface 0.02–2 step 0.01 |
repelRadial | number | 17.5 | Flight · Push away from the shape centre (clears pockets and the hole) 0–60 step 0.5 |
repelRadialRange | number | 3.3 | Flight · Radial push range (object radii) 1–4 step 0.05 |
tumble | number | 1.05 | Flight · Tumble rate 0–12 step 0.05 |
returnGroupStagger | number | 1.35 | Assembly · Regional delay (seconds) 0–1.5 step 0.05 |
returnGroupScale | number | 2.55 | Assembly · Region / noise size 0.1–3 step 0.05 |
returnGroupSeed | number | 60765 | Return · Group timing seed 0–65535 step 1 |
formSpread | number | 0 | Return · Wave spread (nearest shards leave first, seconds) 0–4 step 0.05 |
waveReach | number | 10 | Return · Distance over which the wave spreads 0.2–10 step 0.1 |
formJitter | number | 2.8 | Return · Per-shard stagger (random delay up to this) 0–3 step 0.05 |
formFill | number | 3 | Return · Fill-in rate for voxels no shard returns to 0.05–3 step 0.05 |
returnSpring | number | 29.9 | Return · Spring stiffness 0.5–40 step 0.1 |
returnDamping | number | 1.34 | Return · Spring damping 0.2–2 step 0.01 |
returnRamp | number | 0.45 | Return · Spring ramp-in (seconds until it pulls at full strength) 0–3 step 0.05 |
returnMaxSpeed | number | 60 | Return · Speed cap on the way home 1–60 step 0.5 |
alignToSurface | number | 1 | Return · Shards turn to lie on the surface (0 = keep tumbling) 0–1 step 0.01 |
alignCurve | number | 3.75 | Return · Alignment curve over the flight home (1 linear, higher = later) 0.2–4 step 0.05 |
healRate | number | 3 | Return · Neighbour heal rate 0.02–3 step 0.01 |
cellRestore | number | 60 | Return · Cell restore rate 0–60 step 0.5 |
landedFade | number | 1.65 | Return · Landed shard fade 0–2 step 0.01 |
refrostTime | number | 10.6 | Return · Refrost time 0.2–12 step 0.1 |
keyColor | color | "#f0f7ff" | Light · Key colour |
keyIntensity | number | 5.05 | Light · Key intensity 0–12 step 0.05 |
keyElevation | number | 42 | Light · Key elevation 10–89 step 0.5 |
keyAzimuth | number | -38 | Light · Key azimuth -90–90 step 0.5 |
keySize | number | 1.25 | Light · Key size (softbox) 0.2–3 step 0.01 |
fill | number | 0.18 | Light · Fill intensity (hemisphere, diffuse only: barely shows on clear ice) 0–1.5 step 0.005 |
fillColor | color | "#cadde9" | Light · Fill sky colour |
fillGroundColor | color | "#172635" | Light · Fill ground colour |
rim | number | 2.5 | Light · Rim spot intensity 0–5 step 0.01 |
rimColor | color | "#d9f1ff" | Light · Rim colour |
rimElevation | number | 20 | Light · Rim elevation (0 = straight behind) 0–89 step 0.5 |
swayAmplitude | number | 0 | Light · Key sway amplitude 0–0.15 step 0.001 |
swayPeriod | number | 35 | Light · Key sway period 2–40 step 0.5 |
envSoftbox | number | 1.1 | Light · Environment softbox (the main light on glass) 0–3 step 0.01 |
envRim | number | 1.4 | Light · Environment rim strip 0–3 step 0.01 |
envFill | number | 0.22 | Light · Environment front fill 0–1 step 0.005 |
backdropTop | color | "#050505" | Backdrop · Top colour |
backdropMid | color | "#050505" | Backdrop · Mid colour |
backdropBottom | color | "#050505" | Backdrop · Bottom colour |
backdropCenterX | number | 0.73 | Backdrop · Bloom centre X 0–1 step 0.005 |
backdropCenterY | number | 0.22 | Backdrop · Bloom centre Y 0–2 step 0.005 |
backdropRadius | number | 0.8 | Backdrop · Bloom radius 0.1–2 step 0.005 |
backdropFalloff | number | 0.85 | Backdrop · Bloom falloff 0.5–6 step 0.01 |
backdropNoise | number | 0 | Backdrop · Dither noise 0–3 step 0.05 |
bloomThreshold | number | 3 | Post · Bloom threshold 0–3 step 0.01 |
bloomIntensity | number | 0.04 | Post · Bloom intensity 0–1.5 step 0.005 |
bloomRadius | number | 1 | Post · Bloom radius 0–1 step 0.005 |
monochrome | number | 0.04 | Post · Monochrome 0–1 step 0.01 |
tonemap | enum | "aces" | Post · Tonemap (agx |
exposure | number | 1 | Post · Exposure 0.1–4 step 0.01 |
contrast | number | 1.03 | Post · Contrast 0.6–1.6 step 0.005 |
blackLift | number | 0 | Post · Black lift 0–0.1 step 0.001 |
vignetteStrength | number | 0.14 | Post · Vignette strength 0–1 step 0.005 |
vignetteSoftness | number | 1.2 | Post · Vignette softness 0.1–1.5 step 0.005 |
vignetteRadius | number | 1.2 | Post · Vignette radius 0.2–1.6 step 0.005 |
grainStrength | number | 0 | Post · Film grain 0–0.15 step 0.001 |
quality | enum | "full" | Performance · Quality profile (full |
upscaler | enum | "fsr1" | Performance · Upscaler (fsr1 |
renderScale | number | 1 | Performance · Scene resolution scale (upscaled to 1080p) 0.35–1 step 0.05 |
shapeResolution | enum | "256" | Shape voxel resolution (128 |
erosionResolution | enum | "96" | Performance · Erosion field resolution (voxels per axis) (64 |
particleCount | enum | "100k" | Performance · Powder particles (100k |
logoMeshDetail | number | 2 | Shape · Logo mesh detail (1-4; higher = finer surface) 1–4 step 1 |
deformStrength | number | 0 | Geometry · Ice deformation strength (0 = original) 0–0.08 step 0.001 |
deformScale | number | 0.41 | Geometry · Noise feature size (larger = broader) 0.001–0.5 step 0.001 |
deformSeed | number | 7 | Geometry · Deformation seed 0–65535 step 1 |
rimAzimuth | number | -146 | Light · Rim azimuth -180–180 step 1 |
rimAngle | number | 26 | Light · Rim beam angle 10–89 step 1 |
rimSize | number | 0.45 | Light · Rim reflection size 0.1–3 step 0.05 |
fillReflectionStrength | number | 0.3 | Light · Fill reflection strength 0–2 step 0.01 |
accentCoolIntensity | number | 3.71 | Studio Cool accent · intensity 0–4 step 0.01 |
accentCoolReflection | number | 2.31 | Studio Cool accent · reflection 0–3 step 0.01 |
accentCoolElevation | number | 63 | Studio Cool accent · elevation -85–85 step 1 |
accentCoolAzimuth | number | 22 | Studio Cool accent · azimuth -180–180 step 1 |
accentCoolSize | number | 2.65 | Studio Cool accent · size 0.1–3 step 0.05 |
accentCoolColor | color | "#ff5900" | Studio Cool accent · color |
accentWarmIntensity | number | 2.99 | Studio Warm accent · intensity 0–4 step 0.01 |
accentWarmReflection | number | 0.34 | Studio Warm accent · reflection 0–3 step 0.01 |
accentWarmElevation | number | 30 | Studio Warm accent · elevation -85–85 step 1 |
accentWarmAzimuth | number | -30 | Studio Warm accent · azimuth -180–180 step 1 |
accentWarmSize | number | 1.2 | Studio Warm accent · size 0.1–3 step 0.05 |
accentWarmColor | color | "#75aaff" | Studio Warm accent · color |
returnNoiseAmount | enum | "2" | Assembly · Regional pattern (2 |
assemblyFrontDuration | number | 3.2 | Assembly · Growth duration (seconds) 0–6 step 0.05 |
assemblyOriginX | number | -0.65 | Assembly · Growth start X -1–1 step 0.01 |
assemblyOriginY | number | 0.55 | Assembly · Growth start Y -1–1 step 0.01 |
assemblyAngle | number | -35 | Assembly · Seam direction (degrees) -180–180 step 1 |
assemblySpread | number | 0.65 | Assembly · Outward spread vs seam travel 0–1 step 0.01 |
assemblyFrontNoise | number | 0.35 | Assembly · Growth edge irregularity 0–1 step 0.01 |
assemblySpeedVariation | number | 0.65 | Assembly · Return speed variation 0–1 step 0.01 |
assemblyBend | number | 1.2 | Assembly · Approach path bend 0–3 step 0.05 |
assemblySwirl | number | 1.1 | Assembly · Approach twist 0–3 step 0.05 |
assemblyLandingVariation | number | 0.8 | Assembly · Landing transition variation 0–1 step 0.01 |
rendererProfile | enum | "studio" | Renderer experiment (reload required) (original |
textWidth | number | 6.5 | Type · Headline block width (the mark is 2.6 wide) 1.2–9 step 0.05 |
textLineHeight | number | 0.95 | Type · Line height 0.7–1.4 step 0.01 |
textDepth | number | 0.16 | Type · Extrusion depth (fraction of the font size) 0.05–0.8 step 0.01 |
textBevel | number | 0.04 | Type · Bevel (fraction of the font size) 0–0.12 step 0.005 |
textCorner | number | 0.008 | Type · Corner rounding (fraction of the font size) 0–0.06 step 0.002 |
textMeshDetail | number | 4 | 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-seekCustomEvent; 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-variablesa 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.