Agent skill

Canopy Part Title Block

A HyperFrames video block in which a canopy of leaves sweeps across the frame and parts to reveal two headlines, rendered at 1920×1080 for 12 seconds.

Apache-2.0Auto-check passedMedia & Creative

Install Canopy Part Title Block

skills CLI

$ npx skills add heygen-com/hyperframes --skill canopy-part-title -a claude-code

Project install by default; add -g for ~/.claude/skills/.

GitHub CLI

$ gh skill install heygen-com/hyperframes canopy-part-title --agent claude-code

Project scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).

Manual copy

$ git clone --depth 1 https://github.com/heygen-com/hyperframes.git skills-src && mkdir -p .claude/skills && cp -r skills-src/registry/blocks/canopy-part-title .claude/skills/canopy-part-title && rm -rf skills-src

Use ~/.claude/skills/ instead of .claude/skills for a personal install. The folder must contain SKILL.md.

Claude Code skills documentation · loads skills from .claude/skills/

Paste into Claude Code

Install the "canopy-part-title" agent skill from https://github.com/heygen-com/hyperframes/tree/main/registry/blocks/canopy-part-title into .claude/skills/canopy-part-title/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "canopy-part-title", then confirm the skill loads.

Claude Code copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.

$skill-installer

$skill-installer install https://github.com/heygen-com/hyperframes/tree/main/registry/blocks/canopy-part-title

Type this inside Codex. $skill-installer <name> installs a curated skill from openai/skills. The installer writes to $CODEX_HOME/skills (default ~/.codex/skills). Restart Codex if the skill does not show up.

skills CLI

$ npx skills add heygen-com/hyperframes --skill canopy-part-title -a codex

Project install goes to .agents/skills/; add -g for ~/.codex/skills/.

GitHub CLI

$ gh skill install heygen-com/hyperframes canopy-part-title --agent codex

Project scope by default (.agents/skills/); add --scope user for a personal install.

Manual copy

$ git clone --depth 1 https://github.com/heygen-com/hyperframes.git skills-src && mkdir -p .agents/skills && cp -r skills-src/registry/blocks/canopy-part-title .agents/skills/canopy-part-title && rm -rf skills-src

Use ~/.agents/skills/ instead of .agents/skills for a personal install.

Codex skills documentation · loads skills from .agents/skills/

Paste into Codex

Install the "canopy-part-title" agent skill from https://github.com/heygen-com/hyperframes/tree/main/registry/blocks/canopy-part-title into .agents/skills/canopy-part-title/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "canopy-part-title", then confirm the skill loads.

Codex copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.

skills CLI

$ npx skills add heygen-com/hyperframes --skill canopy-part-title -a cursor

Project install goes to .agents/skills/; add -g for ~/.cursor/skills/.

GitHub CLI

$ gh skill install heygen-com/hyperframes canopy-part-title --agent cursor

Project scope by default (.agents/skills/); add --scope user for a personal install.

Manual copy

$ git clone --depth 1 https://github.com/heygen-com/hyperframes.git skills-src && mkdir -p .cursor/skills && cp -r skills-src/registry/blocks/canopy-part-title .cursor/skills/canopy-part-title && rm -rf skills-src

Use ~/.cursor/skills/ instead of .cursor/skills for a personal install.

Cursor skills documentation · loads skills from .cursor/skills/, .agents/skills/, .claude/skills/, .codex/skills/

Paste into Cursor

Install the "canopy-part-title" agent skill from https://github.com/heygen-com/hyperframes/tree/main/registry/blocks/canopy-part-title into .cursor/skills/canopy-part-title/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "canopy-part-title", then confirm the skill loads.

Cursor copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.

gemini skills install

$ gemini skills install https://github.com/heygen-com/hyperframes.git --path registry/blocks/canopy-part-title

--scope user (default) or --scope workspace; --path is the subfolder of the repo that holds the skill; --consent skips the security confirmation prompt.

skills CLI

$ npx skills add heygen-com/hyperframes --skill canopy-part-title -a gemini-cli

Project install goes to .agents/skills/; add -g for ~/.gemini/skills/.

GitHub CLI

$ gh skill install heygen-com/hyperframes canopy-part-title --agent gemini-cli

Project scope by default (.agents/skills/); add --scope user for a personal install.

Manual copy

$ git clone --depth 1 https://github.com/heygen-com/hyperframes.git skills-src && mkdir -p .gemini/skills && cp -r skills-src/registry/blocks/canopy-part-title .gemini/skills/canopy-part-title && rm -rf skills-src

Use ~/.gemini/skills/ instead of .gemini/skills for a personal install, then run /skills reload.

Gemini CLI skills documentation · loads skills from .gemini/skills/, .agents/skills/

Paste into Gemini CLI

Install the "canopy-part-title" agent skill from https://github.com/heygen-com/hyperframes/tree/main/registry/blocks/canopy-part-title into .gemini/skills/canopy-part-title/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "canopy-part-title", then confirm the skill loads.

Gemini CLI copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.

GitHub CLI

$ gh skill install heygen-com/hyperframes canopy-part-title

Installs for Copilot at project scope by default; add --scope user for a personal install. Preview a skill first with gh skill preview. Needs GitHub CLI 2.90.0 or later (public preview).

skills CLI

$ npx skills add heygen-com/hyperframes --skill canopy-part-title -a github-copilot

Project install goes to .agents/skills/; add -g for ~/.copilot/skills/.

Manual copy

$ git clone --depth 1 https://github.com/heygen-com/hyperframes.git skills-src && mkdir -p .github/skills && cp -r skills-src/registry/blocks/canopy-part-title .github/skills/canopy-part-title && rm -rf skills-src

Use ~/.copilot/skills/ instead of .github/skills for a personal install. Commit .github/skills so cloud agent and code review can use it.

GitHub Copilot skills documentation · loads skills from .github/skills/, .claude/skills/, .agents/skills/

Paste into GitHub Copilot

Install the "canopy-part-title" agent skill from https://github.com/heygen-com/hyperframes/tree/main/registry/blocks/canopy-part-title into .github/skills/canopy-part-title/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "canopy-part-title", then confirm the skill loads.

GitHub Copilot copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.

skills CLI

$ npx skills add heygen-com/hyperframes --skill canopy-part-title -a opencode

OpenCode documents no install command of its own. Project install goes to .agents/skills/; add -g for ~/.config/opencode/skills/.

GitHub CLI

$ gh skill install heygen-com/hyperframes canopy-part-title --agent opencode

Project scope by default (.agents/skills/); add --scope user for a personal install.

Manual copy

$ git clone --depth 1 https://github.com/heygen-com/hyperframes.git skills-src && mkdir -p .opencode/skills && cp -r skills-src/registry/blocks/canopy-part-title .opencode/skills/canopy-part-title && rm -rf skills-src

Use ~/.config/opencode/skills/ instead of .opencode/skills for a personal install.

OpenCode skills documentation · loads skills from .opencode/skills/, .claude/skills/, .agents/skills/

Paste into OpenCode

Install the "canopy-part-title" agent skill from https://github.com/heygen-com/hyperframes/tree/main/registry/blocks/canopy-part-title into .opencode/skills/canopy-part-title/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "canopy-part-title", then confirm the skill loads.

OpenCode copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.

Facts

Skill name: canopy-part-title
GitHub stars: 60k
Used in: 1 other repo
Token cost: ~1k tokens
SKILL.md length: 340 words
Files: 5 (incl. assets)
Skills in repo: 32
Repo updated: Oct 10, 2026
First seen: Oct 7, 2026
Licence: Apache-2.0

At a glance

A HyperFrames video block in which a canopy of leaves sweeps across the frame and parts to reveal two headlines, rendered at 1920×1080 for 12 seconds.

Works in 3 steps: Keep data-composition-variables a… → Do not put in static markup; create it… → Keep every visual state a function of t;…
Adding an animated title reveal to a HyperFrames video project
SKILL.md covers Files, Install, Variables and Runtime contract, plus 1 more section
Calls npx; reaches cdn.jsdelivr.net

What it does

A dense canopy of textured leaves sweeps across the frame with shallow depth of field, then parts to uncover the first headline, and a second batch of leaves lifted in depth carries the second headline past the camera. A few leaves stay on the type and keep a light breeze. The composition id is `canopy-part-title`, it runs 12 seconds at 30 fps in 1920×1080, and the block ships an HTML file plus two WebP leaf textures, one for color and one for surface normals.

Install it with `npx hyperframes add canopy-part-title`, which places the files under `compositions/canopy-part-title/`, then mount it from the host `index.html` with its composition id and source attributes. Rendering with custom values passes a JSON object of variables to the `hyperframes render` command. Variables are read at runtime and include the two headlines, font, weight, size, letter spacing, background color, leaf count, number of leaves left behind and sweep speed.

When your agent uses it

Adding an animated title reveal to a HyperFrames video project
Rendering a nature-themed headline sequence with custom text
Adjusting the leaf count, sweep speed or fonts of a title animation

Example prompts

“Install the canopy-part-title block and render it with the headlines Understory and Move slowly.”
“Make the leaves sweep faster and leave more of them on the text.”
“Mount the canopy title block in my index.html and change the font to Georgia.”

Requirements

Node.js with npx to install and render the block

Workflow steps

3 steps, taken from the first numbered list in SKILL.md.

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

What it can do on your machine

Read from SKILL.md and the folder at commit 6f3f86a. It shows what the files ask for, not the result of running them.

Tool permissions
Pre-approves nothing: there is no allowed-tools line, so your agent's usual permission prompts apply.
From allowed-tools in the SKILL.md frontmatter.
Runs code
Shell commands in SKILL.md call:
- npx
From the folder's file list and the shell code blocks in SKILL.md.
Network
Hosts in commands or code, which the agent is likely to contact:
- cdn.jsdelivr.net
From URLs in SKILL.md, links to its own repository left out.
Credentials
Names no API keys, tokens, secrets or passwords.
From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.

Context cost

Canopy Part Title Block loads about 1k tokens when it runs. Until then it costs about 33 tokens; SKILL.md has 340 words of instructions outside code blocks.

Always · name and description, kept in context so the agent knows when to use it: ~33
When it runs · the whole SKILL.md, loaded when a task matches: ~1k

Estimates: characters ÷ 4, the usual rule of thumb; real counts depend on the model's tokenizer. Scripts and assets cost tokens only if the agent reads them.

Safety

Auto-check passed

The automated check found no risky patterns in SKILL.md.

Automated static check — not a guarantee. Review scripts before installing. It scans the text of SKILL.md for risky patterns (piping downloads into a shell, reading credential files, hidden Unicode, destructive commands); files beside SKILL.md are not scanned.

SKILL.md

The full file from heygen-com/hyperframes at commit 6f3f86a, republished under its Apache-2.0 licence (© heygen-com). 340 words, ~1,001 tokens.

Download SKILL.mdSave it as .claude/skills/canopy-part-title/SKILL.md (or your agent's skills folder). This skill also uses 4 other files; get the full folder from GitHub.

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:

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.

Files

SKILL.md and 4 other files (assets) in registry/blocks/canopy-part-title of heygen-com/hyperframes.

SKILL.md
assets/leaf-surface-color.webp
assets/leaf-surface-normal.webp
canopy-part-title.html
registry-item.json

Open the folder on GitHubat commit 6f3f86a

Used in 1 other repository

We found 1 copy of this SKILL.md (exact, near-identical or edited) in other folders, from 1 other GitHub owner. This page covers the copy in heygen-com/hyperframes, which our catalogue first saw on October 7, 2026.

Unclecheng-li/AI_Animationskills/ui2v-motions/01_动效库/itelmn/canopy-part-title

Compare with similar skills

Canopy Part Title Block next to the 5 skills that share the most tags, products or categories with it. Stars are the repository's; “used in” counts other GitHub owners with a copy.

Canopy Part Title Block compared with similar skills
Skill	Stars	Used in	Tokens	Auto-check	Licence	Repo updated
Canopy Part Title Block this skillheygen-com/hyperframes	60k	1 repos	~1k	Automated safety check: Pass	Apache-2.0	today
Short Form Editnateherkai/hyperframes-student-kit	1.3k	—	~5.3k	Automated safety check: Pass	Custom licence	12 days ago
Plotbeat Data VideosUnclecheng-li/AI_Animation	1.5k	—	~2.6k	Automated safety check: Pass	MIT	5 days ago
Yuv Viral Videohoodini/ai-agents-skills	282	—	~7.5k	Automated safety check: Notes	None	3 mo ago
3D Camera Captions for HyperFramesheygen-com/hyperframes-community-skills	187	—	~2.3k	Automated safety check: Pass	Apache-2.0	11 days ago
HyperFrames Studio Timeline Conventionsedenfunf/reelmimic	1.9k	1 repos	~916	Automated safety check: Pass	MIT	yesterday

Similar skills

Short Form Edit
nateherkai/hyperframes-student-kit
Turn talking-head footage into a finished reel, YouTube Short, or short advertisement with curiosity-led openings, earned payoffs, story-driven cuts, transcript-synced motion graphics, moving…
1.3k GitHub stars~5.3k tokensUpdated 12 days ago
Media & CreativeAuto-check passed
Plotbeat Data Videos
Unclecheng-li/AI_Animation
Turns a local CSV or JSON file, or data fetched from an approved source, into an editable data-visualization video by adapting HyperFrames templates.
1.5k GitHub stars~2.6k tokensUpdated 5 days ago
Media & CreativeAuto-check passed
Yuv Viral Video
hoodini/ai-agents-skills
Edit any selfie or screen-share footage into a viral short-form video in YUV.AI's signature style — Apple-style liquid-glass cards (real CSS backdrop-filter), dark-mode polish, MrBeast-paced cuts…
282 GitHub stars~7.5k tokensUpdated 3 mo ago
Media & CreativeAuto-check: notes
3D Camera Captions for HyperFrames
heygen-com/hyperframes-community-skills
Builds captions that move in 3D space around a talking head: a virtual camera flies past words at different depths, hero words hide behind the speaker, and text steps at 15 fps with motion blur.
187 GitHub stars~2.3k tokensUpdated 11 days ago
Media & CreativeAuto-check passed
HyperFrames Studio Timeline Conventions
edenfunf/reelmimic
Conventions for laying out a HyperFrames project so it opens as a readable Studio timeline: one caption track, one element kind per track, scenes as sub-compositions, and safe zones.
1.9k GitHub starsUsed in 1 repo~916 tokens
Media & CreativeAuto-check passed
Short Form Video
nateherkai/hyperframes-student-kit
Maintain the existing May Shorts teaching compositions using their legacy face-mode, scene-overlay, and karaoke-caption patterns.
1.3k GitHub stars~5k tokensUpdated 12 days ago
Media & CreativeAuto-check passed

Questions about Canopy Part Title Block

What does Canopy Part Title Block do?

A HyperFrames video block in which a canopy of leaves sweeps across the frame and parts to reveal two headlines, rendered at 1920×1080 for 12 seconds. A dense canopy of textured leaves sweeps across the frame with shallow depth of field, then parts to uncover the first headline, and a second batch of leaves lifted in depth carries the second headline past the camera. A few leaves stay on the type and keep a light breeze.

When should I use Canopy Part Title Block?

Canopy Part Title Block fits situations like: adding an animated title reveal to a HyperFrames video project; rendering a nature-themed headline sequence with custom text; adjusting the leaf count, sweep speed or fonts of a title animation.

How do I install Canopy Part Title Block in Claude Code?

Run `npx skills add heygen-com/hyperframes --skill canopy-part-title -a claude-code`. Or copy the skill folder (registry/blocks/canopy-part-title in heygen-com/hyperframes) into .claude/skills/canopy-part-title in your project. Claude Code loads it when a task matches its description.

How do I install Canopy Part Title Block in Codex?

Run `npx skills add heygen-com/hyperframes --skill canopy-part-title -a codex`. Or copy the skill folder (registry/blocks/canopy-part-title in heygen-com/hyperframes) into .agents/skills/canopy-part-title in your project. Codex loads it when a task matches its description.

Can I use Canopy Part Title Block in Cursor, Gemini CLI or GitHub Copilot?

Cursor, Gemini CLI, GitHub Copilot and OpenCode also load SKILL.md folders. With the skills CLI, run `npx skills add heygen-com/hyperframes --skill canopy-part-title -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/canopy-part-title, .gemini/skills/canopy-part-title, .github/skills/canopy-part-title and .opencode/skills/canopy-part-title in your project.

What does Canopy Part Title Block need to run?

Going by SKILL.md and its folder, Canopy Part Title Block needs the command-line tools its instructions call (npx). Our summary lists: Node.js with npx to install and render the block.

Does Canopy Part Title Block access the network?

SKILL.md names 1 domain. In commands or code: cdn.jsdelivr.net; the agent is likely to contact it when it follows the instructions. This is read from the text; nothing was executed.

Is Canopy Part Title Block safe to install?

Our automated static check of SKILL.md found no risky patterns, such as piping downloads into a shell, reading credential files or hidden Unicode. It is not a guarantee. Review the folder before installing.

What licence does Canopy Part Title Block use?

Canopy Part Title Block is published under the Apache-2.0 licence (the repository's licence). It allows redistribution, so the full SKILL.md is shown on this page.

How many tokens does Canopy Part Title Block use?

About 1k tokens (SKILL.md is roughly 4k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full.

What are the alternatives to Canopy Part Title Block?

Skills that share tags, products or a category with Canopy Part Title Block: Short Form Edit (nateherkai/hyperframes-student-kit, 1.3k stars), Plotbeat Data Videos (Unclecheng-li/AI_Animation, 1.5k stars), Yuv Viral Video (hoodini/ai-agents-skills, 282 stars) and 3D Camera Captions for HyperFrames (heygen-com/hyperframes-community-skills, 187 stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.

Who maintains Canopy Part Title Block?

heygen-com (a GitHub organization) maintains it in heygen-com/hyperframes, which has 59,960 GitHub stars. The repository holds 32 skills in this directory. The repository was last updated on October 10, 2026.

Source: heygen-com/hyperframes on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.

Install Canopy Part Title Block

Facts

At a glance

What it does

When your agent uses it

Example prompts

Requirements

Workflow steps

What it can do on your machine

Tool permissions

Runs code

Network

Credentials

Context cost

Safety

SKILL.md

Canopy Part Title

Files

Install

Variables

Runtime contract

Editing rules (from the source project)

Files

Used in 1 other repository

Compare with similar skills

Similar skills

More from heygen-com/hyperframes

Related

Questions about Canopy Part Title Block