canopy-part-title

heygen-com/hyperframes

Animated leaf-sweep reveal for headlines with customizable typography and particle effects.

What is canopy-part-title?

A 12-second HyperFrames composition that sweeps a dense canopy of textured leaves across the frame to reveal two headlines with shallow depth of field. Use it for cinematic title sequences, video intros, or dramatic text reveals in web-based video projects.

Renders a 1920×1080 composition with two headlines revealed by sweeping leaf particles
Customizes headline text, font family, weight, size, and letter spacing
Controls leaf particle count, sweep speed, and retained-leaf breeze effect
Supports runtime variable updates via window.__hyperframes.getVariables()
Integrates with HyperFrames renderer (three.js, GSAP, Canvas 2D post-processing)
Provides seek-safe timeline for frame-accurate playback and scrubbing

How to install canopy-part-title

npx skills add https://github.com/heygen-com/hyperframes --skill canopy-part-title

Prerequisites

Node.js and npx installed
HyperFrames CLI (npx hyperframes)
Modern browser with WebGL support for three.js rendering
External CDN dependencies: GSAP 3.14.2, three.js 0.170.0, three.js post-processing modules

Claude Code

Cursor

Windsurf

Cline

How to use canopy-part-title

1.Install the composition with npx hyperframes add canopy-part-title
2.Mount the block in your HTML using the data-composition-id and data-composition-src attributes
3.Customize variables by setting data-composition-variables with JSON (headline1, headline2, font, fontSize, etc.)
4.Optionally render directly via CLI with npx hyperframes render and custom variable values
5.Access the paused GSAP timeline at window.__timelines['canopy-part-title'] for playback control
6.Listen to hf-seek CustomEvent for frame-accurate seeking and scrubbing

Use cases

Good for

Video intro sequences with dramatic text reveals using leaf particle effects
Marketing or promotional videos requiring cinematic title animations
Web-based video editors needing customizable animated composition blocks
Streaming or broadcast graphics with dynamic headline insertion
Presentation or slideshow transitions with nature-themed visual effects

Who it's for

Video producers and editors using HyperFrames
Web developers building video composition tools
Marketing and creative teams producing digital video content
Broadcast and streaming graphics designers

canopy-part-title FAQ

What are the system requirements for running this composition?

You need Node.js, a modern browser with WebGL support, and the external CDN dependencies (GSAP, three.js, post-processing modules). Budget roughly 350 MB per live instance and run one at a time.

Can I change the headlines and styling after installation?

Yes. Set the data-composition-variables attribute with JSON containing headline1, headline2, font, fontWeight, fontSize, and letterSpacing. All 11 variables are customizable at runtime.

How do I control playback and seeking?

Access the paused GSAP timeline at window.__timelines['canopy-part-title']. The composition re-syncs on the hf-seek CustomEvent; every frame is a closed-form function of time for frame-accurate scrubbing.

What fonts are available?

The composition uses Google Fonts (Gelasio by default) and supports any font specified in the font variable. Ensure the font is loaded before rendering.

Can I render this composition outside the browser?

Yes, use the CLI: npx --yes hyperframes@0.8.12 render 'compositions/canopy-part-title/canopy-part-title.html' --variables '{...}' with your custom variable values.

Full instructions (SKILL.md)

Source of truth, from heygen-com/hyperframes.

name: canopy-part-title description: Leaves sweep through the frame and part to reveal the headline. HyperFrames block, 1920×1080, 12s, 11 variables.

Canopy 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 hyperframes@0.8.12 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-seek CustomEvent; 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/gsap@3.14.2/dist/gsap.min.js, https://cdn.jsdelivr.net/npm/three@0.170.0/build/three.module.js, https://cdn.jsdelivr.net/npm/three@0.170.0/examples/jsm/postprocessing/EffectComposer.js, https://cdn.jsdelivr.net/npm/three@0.170.0/examples/jsm/postprocessing/RenderPass.js, https://cdn.jsdelivr.net/npm/three@0.170.0/examples/jsm/postprocessing/BokehPass.js.
Web fonts from Google Fonts: Gelasio.

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.