Skills

Skill 11 of 34

Glass Shard Title

Glass shards fly in through fog and tile themselves into the headline.

2 minutes · 504 words · 5 sections

Install

$ npx skills add heygen-com/hyperframes --skill glass-shard-title

$ npx skills add heygen-com/hyperframes

» /plugin marketplace add heygen-com/hyperframes

The first command installs just this skill, by the name in its SKILL.md; the second installs the whole repository.

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.

Files

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

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}'

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
`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

Runtime contract

One paused GSAP timeline registered as window.__timelines["glass-shard-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.181.2 (bundled), GSAP 3.14.2, Canvas 2D, GLSL shaders, HDR environment, Matcap, Seeded PRNG, d3-delaunay, 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/d3-delaunay@6.0.4/dist/d3-delaunay.min.js.
Local fonts: assets/fonts/Geist-Regular.ttf, assets/fonts/Geist-SemiBold.ttf, assets/fonts/Geist-Bold.ttf.
Bundled code is inlined into the composition (assets/glass-main.js); rebuild with esbuild and re-inline after editing the .mjs source.

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.

About this skill

Trigger

Glass shards fly in through fog and tile themselves into the headline. HyperFrames block, 1920×1080, 12.16s, 19 variables.

The verbatim description from this skill’s front matter — the string an agent matches on to decide whether to load it.

Colophon for this issue

Colophon

How this issue was made

Source

github.com/heygen-com/hyperframes, branch main, last pushed 24 September 2026.

Licence

Apache-2.0 — the text of every skill is reproduced unmodified, frontmatter included, under the upstream licence.

Discovery

34 skills found by walking the repository tree for SKILL.md, not by matching a directory convention. 3 distinct layouts observed: .agents/skills/*/SKILL.md, registry/blocks/*/SKILL.md, skills/*/SKILL.md.

Duplicates collapsed

6 mirror copies folded into their canonical skill — republished for Claude. Copies match on content hash and on position once a leading per-agent prefix is stripped, because the same skill is routinely shipped under a dozen agent directories with a dozen different hashes.

Issue colours

Resolved from a design.md in this repository — hue 293°, chroma 0.190. Two accent tones are generated per issue and each is proven against its own ground before it ships: a single accent that passes AA on both light and dark paper is arithmetically impossible.

Heading repairs

1 repair applied to this skill so the document has one h1 and no skipped levels:

Removed “Glass Shard Title”, a leading h1 that duplicated the skill title.

Spec compliance

Every skill satisfies the Agent Skills specification’s frontmatter rules.

Images

Images inside a skill come from the upstream repository. Where the author gave no alternative text we mark the image decorative rather than inventing a description — a plausible caption we made up is worse than none for the reader who depends on it.

Marketplace

A plugin manifest is published at .claude-plugin/marketplace.json by HeyGen, declaring 2 plugins. It is read for editorial metadata only — never as the skill index, which is always the repository tree.

Signal

Install counts come from skills.sh. They measure downloads, not quality, and an unranked repository is not an unread one.

Agent surfaces

The whole issue is available as one markdown document at /heygen-com/hyperframes.md, and each skill at its own .md URL.

Publication

Set by Skills Docs from the source repository. Body text is Literata at the reader’s chosen size and measure; code is Geist Mono. Nothing on this page was written by us except this paragraph.

Files

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

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}'

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
`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

Runtime contract

One paused GSAP timeline registered as window.__timelines["glass-shard-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.181.2 (bundled), GSAP 3.14.2, Canvas 2D, GLSL shaders, HDR environment, Matcap, Seeded PRNG, d3-delaunay, 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/d3-delaunay@6.0.4/dist/d3-delaunay.min.js.

Local fonts: assets/fonts/Geist-Regular.ttf, assets/fonts/Geist-SemiBold.ttf, assets/fonts/Geist-Bold.ttf.

Bundled code is inlined into the composition (assets/glass-main.js); rebuild with esbuild and re-inline after editing the .mjs source.

Glass Shard Title

Files

Install

Variables

Runtime contract

Editing rules (from the source project)

About this skill

Trigger

Colophon

Glass Shard Title

Files

Install

Variables

Runtime contract

Editing rules (from the source project)

Appendix 11.1–11.7

Assets10 files

Also bundled3 files

About this skill

Trigger

Colophon

Appendix 11.1–11.7

Assets10 files

Also bundled3 files