Skill

Pass

Audit score 90

glass-shard-title

heygen-com/hyperframes

Glass shards fly in through fog and tile into animated headlines with Voronoi geometry.

What is glass-shard-title?

A 12.16-second HyperFrames composition that animates glass panes flying in from depth, rotating, and tiling themselves into a headline silhouette before flying out. Use it for high-impact title sequences in video projects or web animations.

Renders Voronoi-cut glass panes that fly in from depth with rotation and land as a tiled headline silhouette
Applies per-fragment fog and matcap surface rendering for photorealistic glass appearance
Decouples z-flight from easing so shards visibly traverse depth
Supports 1–400 tiles with configurable roundness, bevel, and surface smoothness
Provides 19 runtime variables to customize headline text, timing, rotation, chaos, and visual effects
Fully seekable timeline via GSAP; every frame is a closed-form function of time for reliable scrubbing

How to install glass-shard-title

npx skills add https://github.com/heygen-com/hyperframes --skill glass-shard-title

Prerequisites

Node.js and npx installed
HyperFrames CLI (npx hyperframes)
Host HTML file to mount the composition block
Modern browser with WebGL support

Claude Code

Cursor

Windsurf

Cline

How to use glass-shard-title

1.Install the skill with `npx hyperframes add glass-shard-title`
2.Mount the composition block in your host `index.html` using the provided data attributes
3.Customize variables (headline, tileCount, timing, rotation, fog) by passing them to the composition
4.Render to video with `npx hyperframes render` and custom variable JSON
5.Sync playback with `hf-seek` CustomEvent for timeline scrubbing in editors

Use cases

Good for

Opening title sequence for video productions or promotional content
Interactive headline animation on marketing websites or landing pages
Animated text reveal in presentations or video editing projects
Custom branding moment with variable headline text and tile configuration
Real-time rendering with seek control for video editing timelines

Who it's for

Video producers and motion designers
Web developers building high-impact animations
Marketing and creative agencies
Video editors using HyperFrames composition system

glass-shard-title FAQ

What is the output resolution and duration?

1920×1080 at 30 fps, 12.16 seconds total duration.

Can I change the headline text?

Yes, set the `headline` variable (max 40 characters) at runtime or during render.

How many tiles can I use?

1 to 400 tiles; tile count 1 renders a single glass pane.

What are the memory and performance requirements?

Roughly 350 MB per live instance; run one composition at a time. Requires WebGL and modern browser.

Can I seek or scrub the timeline?

Yes, the timeline is fully seekable via the `hf-seek` CustomEvent; every frame is deterministic.

Full instructions (SKILL.md)

Source of truth, from heygen-com/hyperframes.

name: glass-shard-title description: Glass shards fly in through fog and tile themselves into the headline. HyperFrames block, 1920×1080, 12.16s, 19 variables.

Glass Shard Title

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.

Related skills

More from heygen-com/hyperframes and the wider catalog.

graphic-overlays

heygen-com/hyperframes

Layer timed graphic cards (titles, lower-thirds, callouts) onto existing video, synced to transcript.

30k installsAudited

gsap

heygen-com/hyperframes

GSAP animation reference for HyperFrames compositions with timelines, easing, and performance optimization.

96k installs

hyperframes

heygen-com/hyperframes

HTML-based video composition framework for rendering animations, promos, and interactive decks from code.

705k installs

hyperframes-animation

heygen-com/hyperframes

Atomic motion rules, blueprints, and seven runtime adapters for HyperFrames animation composition.

590k installsAudited

hyperframes-audio

heygen-com/hyperframes

Mix and process audio in HyperFrames compositions with fades, effects, automation, and voiceover ducking.

313k installsAudited

hyperframes-cli

heygen-com/hyperframes

CLI for authoring, previewing, and rendering video compositions with HyperFrames.

738k installs