Create a title animation where glass shards emerge through fog, assemble into a headline, and fly past the camera. Adjust the text, shard count, rotation, timing, and fog in a reusable HyperFrames video block.
한국어 요약은 준비 중입니다. 영어 요약을 표시하고 있습니다.
Glass shards fly in through fog and tile themselves into the headline. HyperFrames block, 1920×1080, 12.16s, 19 variables.
설치하기 전에 에이전트에게 전달되는 지시 내용을 확인할 수 있습니다.
Voronoi-cut glass panes fly in from depth, rotating, and land as a tiled silhouette of the headline, then fly out past the camera. Each shard is a Sutherland–Hodgman clip of a jittered blob against its Voronoi cell, so the pieces always cover the type. Glass and matcap surfaces get per-fragment fog; the z-flight is decoupled from the ease so shards visibly traverse it. Tile count 1 gives a single pane.
Composition id: glass-shard-title. Duration 12.16 s at 30 fps, 1920×1080.
glass-shard-title.html (16 KB)assets/ferndale_studio_01_1k.hdr (1.6 MB)assets/fonts/Geist-Bold.ttf (65 KB)assets/fonts/Geist-Regular.ttf (65 KB)assets/fonts/Geist-SemiBold.ttf (65 KB)assets/fonts/Geist-OFL.txt (4 KB)assets/fonts/cormorant-garamond.woff2 (37 KB)assets/fonts/CormorantGaramond-OFL.txt (4 KB)assets/glass-main.js (549 KB)assets/Three-LICENSE.txt (1 KB)assets/matcap-1.png (fetched from the CDN at install)Install with npx hyperframes add glass-shard-title; by default the files above land under compositions/glass-shard-title/. Then mount the block from the host index.html:
<div
data-composition-id="glass-shard-title"
data-composition-src="compositions/glass-shard-title/glass-shard-title.html"
data-start="0"
data-duration="12.16"
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/glass-shard-title/glass-shard-title.html' --variables '{"headline":"Designed in glass","tileCount":8}'
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 |
|---|---|---|---|
headline | string | "Designed in glass" | Headline max 40 chars |
tileCount | number | 8 | Tiles 1–400 step 1 |
roundness | number | 0.4 | Roundness (0-1) 0–1 step 0.01 |
bevel | number | 0.35 | Bevel (0-1) 0–1 step 0.01 |
meshSmooth | number | 0.6 | Surface smoothness (0-1) 0–1 step 0.01 |
flyInTime | number | 2.3 | Fly-in time (s) 0.2–6 step 0.05 |
flyOutTime | number | 2.4 | Fly-out time (s) 0.2–6 step 0.05 |
stagger | number | 0.27 | Stagger (0-1) 0–1 step 0.01 |
flyInRotation | number | 5 | Fly-in rotation (0-60) 0–60 step 0.1 |
flyOutRotation | number | 6 | Fly-out rotation (0-6) 0–6 step 0.1 |
chaos | number | 0.25 | Outline chaos (0-1) 0–1 step 0.01 |
padding | number | 1 | Edge padding (0-1) 0–1 step 0.01 |
sizeVariance | number | 0.35 | Size variance (0-1) 0–1 step 0.01 |
gap | number | 0.03 | Tile gap 0–0.3 step 0.002 |
easePow | number | 10 | Fly-in position ease (1-10) 1–10 step 0.1 |
sideDist | number | 3 | Side fly distance 0–60 step 0.5 |
zDist | number | -42 | Z fly-from (negative) -400–0 step 2 |
zOut | number | 14 | Z fly-out to (+ = past camera) -400–60 step 2 |
fog | number | 36 | Fog distance (0 = off) 0–400 step 2 |
window.__timelines["glass-shard-title"].hf-seek CustomEvent; every frame is a closed-form function of time (seeded PRNG only, no rAF loops, no Date.now).https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js, https://cdn.jsdelivr.net/npm/d3-delaunay@6.0.4/dist/d3-delaunay.min.js.data-composition-variables a single-quoted attribute with plain " JSON. Never save it through Studio's Design panel.<canvas> in static markup; create it at runtime.아직 리뷰가 없습니다. 사용해 본 소감을 남겨 주세요.
로그인 없이 쓸 수 있습니다. 사용 후기, 질문, 작동하지 않은 환경 등을 편하게 남겨 주세요.
아직 댓글이 없습니다. 첫 댓글을 남겨 보세요.
Create a 12-second title animation in HyperFrames, where sweeping leaves reveal two headlines. Customize typography, leaf counts, sweep speed, background color, and the breeze moving the leaves that remain on the text.
한국어 요약은 준비 중입니다. 영어 요약을 표시하고 있습니다.
Plan subtitles as layers over a video, deciding which spoken phrases to omit, show normally, or emphasize behind the subject. The guidance preserves full-frame composition and limits large embedded words to occasional key moments.
한국어 요약은 준비 중입니다. 영어 요약을 표시하고 있습니다.
Turn a weekly Markdown changelog into a branded video project with animated interface examples, Annie narration, captions, and background music. The workflow selects key updates and builds a 45–60 second square video, with rendering performed on request.
한국어 요약은 준비 중입니다. 영어 요약을 표시하고 있습니다.
Add an eight-second HyperFrames headline animation where square tiles lift, tilt, and flip to reveal a second message. Customize both headlines and 18 settings covering tile size, sweep direction, timing, depth, bounce, and shadows.
한국어 요약은 준비 중입니다. 영어 요약을 표시하고 있습니다.
Add a 3D card carousel to a HyperFrames video. Rounded cuboids enter from the right, rotate in sequence, pause on a featured card, and exit left, with 40 variables for content, geometry, lighting, and camera settings.
한국어 요약은 준비 중입니다. 영어 요약을 표시하고 있습니다.
Design scene transitions and animated text using matched movement direction and speed across cuts. The catalog provides concrete settings for zooms, blur, word-by-word transitions, staggered entrances, and repositioning groups of elements.
한국어 요약은 준비 중입니다. 영어 요약을 표시하고 있습니다.