blender-motion-state-inspection
AFaffaan-m/ECC278k4,046 new stars in the last 7 days
canopy-part-title
Leaves sweep through the frame and part to reveal the headline. HyperFrames block, 1920×1080, 12s, 11 variables.
- Star
- 1,505
- Category
- Images & video
- License
- MIT
- Last commit
- Oct 5, 2026
skills/ui2v-motions/01_动效库/itelmn/canopy-part-title/SKILL.md
View on GitHubCanopy Part Title
A dense canopy of textured leaves sweeps across the frame with shallow depth of field, then parts to uncover the first headline; a second, depth-lifted batch carries the second headline past the camera. A handful of leaves stay behind on the type and keep a light breeze. Font, weight, size, letter spacing, leaf counts, sweep speed and the retained-leaf breeze are variables.
Composition id: canopy-part-title. Duration 12 s at 30 fps, 1920×1080.
Files
canopy-part-title.html(57 KB)assets/leaf-surface-color.webp(64 KB)assets/leaf-surface-normal.webp(136 KB)
Install
Install with npx hyperframes add canopy-part-title; by default the files above land under compositions/canopy-part-title/. Then mount the block from the host index.html:
<div
data-composition-id="canopy-part-title"
data-composition-src="compositions/canopy-part-title/canopy-part-title.html"
data-start="0"
data-duration="12"
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/canopy-part-title/canopy-part-title.html' --variables '{"headline1":"Understory","headline2":"Move slowly"}'
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 | "Understory" | Headline 1 |
headline2 | string | "Move slowly" | Headline 2 |
font | string | "Helvetica" | Headline font |
fontWeight | number | 900 | Font weight 100–900 step 100 |
fontSize | number | 1 | Font size (1 = auto-fit) 0.3–2 step 0.01 |
letterSpacing | number | 0.01 | Letter spacing (em) -0.2–1 step 0.01 |
background | color | "#020805" | Background |
leafCount | number | 170 | Leaves per sweep 40–320 step 1 |
stayCount | number | 5 | Leaves left behind 0–20 step 1 |
sweepSpeed | number | 1 | Sweep speed 0.3–3 step 0.05 |
retainedBreeze | number | 1 | Retained leaf breeze 0–2 step 0.05 |
Runtime contract
- One paused GSAP timeline registered as
window.__timelines["canopy-part-title"]. - 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: three.js 0.170.0, GSAP 3.14.2, Canvas 2D, Post-processing, Seeded PRNG, Shadow maps. Budget roughly 350 MB per live instance; run one at a time.
- External runtime dependencies:
https://cdn.jsdelivr.net/npm/[email protected]/dist/gsap.min.js,https://cdn.jsdelivr.net/npm/[email protected]/build/three.module.js,https://cdn.jsdelivr.net/npm/[email protected]/examples/jsm/postprocessing/EffectComposer.js,https://cdn.jsdelivr.net/npm/[email protected]/examples/jsm/postprocessing/RenderPass.js,https://cdn.jsdelivr.net/npm/[email protected]/examples/jsm/postprocessing/BokehPass.js. - Web fonts from Google Fonts: Gelasio.
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.
Similar Skills
Official
slack-gif-creator
ANanthropics/skills181k1,119 new stars in the last 7 days
Featured
algorithmic-art
Generate flow fields and particle systems with p5.js, using seeded randomness for original algorithmic art.
ANanthropics/skills181k1,119 new stars in the last 7 days
thinking-out-loud
SHShubhamsaboo/awesome-llm-apps141k808 new stars in the last 7 days
moneyprinterturbo-video
HAharry0703/MoneyPrinterTurbo130k1,722 new stars in the last 7 days
complain
PApaperclipai/paperclip101k2,948 new stars in the last 7 days