Skip to main content
affpapa.org
RU EN
skill Claude Code CX Codex Cursor GitHub Copilot

canopy-part-title — Claude Code skill: leaf-sweep title reveal

A HyperFrames block where a canopy of leaves crosses the frame, parts, and uncovers two headlines. Useful when a title card needs motion without building the scene yourself.

Install into Claude Code · Skills CLI (Vercel) All methods and platforms ↓ 
npx skills add heygen-com/hyperframes --skill canopy-part-title -a claude-code
Open on GitHub

What canopy-part-title does

The skill drops a finished HyperFrames composition into your project. Textured leaves travel through the frame with shallow depth of field, split open, and reveal the first headline. A second batch, lifted in depth, carries the second headline past the camera, and a few leaves stay on the type with a light breeze on them. The composition canopy-part-title runs 1920×1080, 12 s at 30 fps.

You get canopy-part-title.html plus two textures under assets/, leaf-surface-color.webp and leaf-surface-normal.webp. Install with npx hyperframes add canopy-part-title; the files land in compositions/canopy-part-title/. Mount the block from your host index.html with a ` carrying data-composition-id and data-composition-src. Headlines, font, weight, size, letter spacing, leaf count, sweep speed and the breeze on retained leaves are exposed as 11 variables, read at runtime through window.__hyperframes.getVariables()`.

three.js 0.170.0 and GSAP 3.14.2 load from jsDelivr, Gelasio from Google Fonts. One live instance is budgeted at roughly 350 MB of memory, so run one at a time. If the card does not need a 3D scene, skip this block.

What it helps with

  • drop a ready title card into a HyperFrames project
  • reveal two headlines with a leaf sweep
  • retarget headlines, font and weight without touching code
  • tune leaf density, sweep speed and the breeze on retained leaves
  • render the composition with custom variable values from the CLI

Example prompts for the agent

  • Install canopy-part-title and wire the block into `index.html`.
  • Set `headline1` to Understory, `headline2` to Move slowly and render with `npx --yes [email protected] render`.
  • Slow the sweep down and keep fewer leaves on the text.

How to install canopy-part-title

1Skills CLI (Vercel)

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

2Manually: put the files in place

~/.claude/skills/canopy-part-title/SKILL.md

Copy the whole skill folder; for one project use .claude/skills/canopy-part-title/

From the same set14

The whole set →
hyperframes heygen-com Instructs coding agents on creating, validating, and rendering HTML-based videos using the HyperFrames framework and CLI. Claude Code CX Codex Cursor +1 1,200,000installs hyperframes-cli heygen-com Controls HyperFrames video workflows from the CLI: audits layouts and contrast, edits timeline clips, captures snapshots, and renders locally or in cloud runtimes. Claude Code CX Codex Cursor +1 1,200,000installs media-use heygen-com Finds or generates media for HyperFrames videos, including voiceovers, music, cutouts, and color grades. Stores files locally in assets. Claude Code CX Codex Cursor +1 1,100,000installs hyperframes-registry heygen-com Finds and installs about 450 ready-made HyperFrames blocks and components as editable source code. Useful when adding video effects and titles without building markup from scratch. Claude Code CX Codex Cursor +1 1,000,000installs remotion-to-hyperframes heygen-com Imports Remotion animations or video footage into HyperFrames and verifies visual matching frame by frame against the original. Claude Code CX Codex Cursor +1 504,900installs slideshow heygen-com Build live HyperFrames decks with slides, fragment reveals, branching hotspots, and presenter notes. Use it when the output should be a presentation rather than a video. Claude Code CX Codex Cursor +1 415,500installs figma heygen-com Imports assets, brand tokens and components from Figma into a HyperFrames project, then turns storyboard frames into motion. Useful when a design has to move, not sit still. Claude Code CX Codex Cursor +1 329,500installs frost-sequence-camera-orbit heygen-com Builds a 22.5-second scene where an orbiting camera follows an ice logo that breaks apart, reforms into two text moments, and fades. Claude Code CX Codex Cursor +1 9,800installs

Similar

taste-design official google-labs-code Generates agent-ready DESIGN.md files for Google Stitch screens. It sets strict rules for typography, palettes, and spring motion to avoid generic UI tropes. Claude Code CX Codex Cursor +1 20,100installs baoyu-compress-image JimLiu Compresses images into WebP or PNG using local tools like sips and cwebp. Handy for optimizing assets directly inside your repository. Claude Code CX Codex Cursor +1 28,200installs tailwind-design-system Seth Hobson Helps build design systems with Tailwind CSS v4, from theme tokens to component variants. Use it when a project needs shared UI patterns. Claude Code CX Codex Cursor 70,180installs kami tw93 A typesetting skill that builds documents from Kami templates: resumes, one-pagers, letters, portfolios, slide decks and landing pages. Useful when you want a clean PDF from a ready layout. Claude Code CX Codex Cursor +1 13,300installs data-visualization official anthropics Selects chart types based on data structure and produces Python visualization code in matplotlib, seaborn, and plotly. Useful for reports and research figures. Claude Code CX Codex Cursor +1 13,700installs nuxt-ui nuxt Guides AI agents in building interfaces with @nuxt/ui v4, covering semantic Tailwind CSS theming, layout patterns, and component selection. Claude Code CX Codex Cursor +1 19,700installs frontend-design official anthropics This skill guides intentional visual design for new interfaces and redesigns. Use it when a generic generated UI is not enough. Claude Code Claude.ai 1,025,790installs grill-me Matt Pocock grill-me interviews you about a plan or design to expose gaps and sharpen decisions. Use it before implementation starts. Claude Code 1,424,476installs

Questions about canopy-part-title

How do I install canopy-part-title in Claude Code?

Run npx skills add heygen-com/hyperframes --skill canopy-part-title -a claude-code. The skill file lands at ~/.claude/skills/canopy-part-title/SKILL.md; the composition files come from npx hyperframes add canopy-part-title.

What does canopy-part-title do?

It builds a 12 s, 1920×1080 composition where a leaf canopy sweeps through, parts to reveal the first headline, and a second batch carries the second headline past the camera.

What does it need to run?

three.js 0.170.0 and GSAP 3.14.2 are pulled from jsDelivr, and Gelasio comes from Google Fonts. Budget roughly 350 MB per live instance, so render one at a time.

Source text

SKILL.md · Apache-2.0 
---
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:

```sh
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-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/[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)

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

© heygen-com · Apache-2.0 · heygen-com/hyperframes

See also

Project sponsors

Companies that keep this analytics open
Gold sponsor
Nutra.Club

Impressions, clicks and code copies — open statistics. We keep the numbers public for the same reason NeBlask itself is public. Become a sponsor