glass-shard-title Skill for Claude: What It Does and How to Install It

A ready-made HyperFrames title scene: glass shards fly in through fog and tile themselves into a headline.

Installs: 10.9K; on skills.sh
Stars: 77.1K; on GitHub
Files: 13; besides SKILL.md
Updated: Nov 2026; last repo commit

glass-shard-title is a HyperFrames block, a ready-made scene you add to a video project. Voronoi-cut glass panes fly in from depth, rotating, and land as a tiled silhouette of the headline. They then fly out past the camera. A tile count of 1 gives a single pane.

It renders at 1920x1080 and 30 fps for 12.16 seconds. Nineteen variables set the headline (up to 40 characters), tile count from 1 to 400, roundness, bevel, fly-in and fly-out timing, fog and more. One image, matcap-1.png, is downloaded when you add the block.

Good for

Developers and designers making videos with HyperFrames
Designers who want a glass-effect title card
Developers who want a configurable Three.js title scene

Install glass-shard-title

Any client

1
Run this in a terminal.
shell
```
npx hyperframes add glass-shard-title
```

Requires Node.js 22 or later, A HyperFrames project.

Run the add command from your HyperFrames video project. The files land under compositions/glass-shard-title/. The README documents creating a project with npx hyperframes init and lists Node.js 22+ and FFmpeg as requirements. This block is a ready-made scene and not an agent workflow, so there is no Claude app upload route.

From the project README. Source.

What's in the skill

When it loads

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

Sections in SKILL.md

Files
Install
Variables
Runtime contract
Editing rules (from the source project)

Key facts

Author: heygen-com (repo owner)
License: Apache-2.0
Installs on skills.sh: 10,941 (Nov 2, 2026)
GitHub stars: 77,112 for the whole heygen-com/hyperframes repo (Nov 2, 2026)
Last repo commit: Nov 2, 2026
What it includes: 14 files including SKILL.md: the composition HTML, a bundled glass-main.js and glass-main.mjs, build-bundle.mjs, an HDR environment image, Geist and Cormorant Garamond fonts with licenses, a three.js license and registry-item.json
License note: The repo is Apache-2.0 per the README. The block ships license texts for three.js and the Geist and Cormorant Garamond fonts
Output: 12.16 s at 30 fps, 1920x1080 (composition id glass-shard-title)
Needs: A HyperFrames project. The README lists Node.js 22+ and FFmpeg as requirements. Per SKILL.md the block budgets roughly 350 MB per live instance
Works in: Any HyperFrames project through the add command. The README separately documents agent skills and a Claude Code plugin for HyperFrames itself

What it includes

One block, id glass-shard-title, 12.16 s
Glass panes fly in from depth and land as a tiled silhouette of the headline, then fly out past the camera, with per-fragment fog on the glass and matcap surfaces.
Read · Composition
19 settings you can override at render time
headline, tileCount, roundness, bevel, meshSmooth, flyInTime, flyOutTime, stagger, flyInRotation, flyOutRotation, chaos, padding, sizeVariance, gap, easePow, sideDist, zDist, zOut and fog.
Read · Variables (19)
Copies the files into compositions/glass-shard-title/
Runs the HyperFrames CLI add command, which writes the block's files into your project.
Runs code · Add command
Renders the composition file with --variables
Runs hyperframes render on the composition file with your values as JSON.
Runs code · Render command
Paused GSAP timeline, seek-safe frames
One paused GSAP timeline is registered as window.__timelines["glass-shard-title"] and every frame is a function of time.
Read · Runtime contract
Three rules from the source project
Keep data-composition-variables a single-quoted attribute with plain JSON and never save it through Studio's Design panel. Do not put a canvas in static markup. Keep every visual state a function of time.
Read · Editing rules

From the official docs

Permissions

Low risk

What it can do

Read your data
Create and change things
Delete things
Read-only mode

Watch out for

Render uses npx with --yes
The render command in SKILL.md is npx --yes hyperframes@0.8.12, which installs that package without asking. Run it in a project you trust. github.com
The add command writes files into your project
hyperframes add copies the block's files into compositions/glass-shard-title/ (see registry-item.json). Check the folder before committing. github.com
The composition loads files from CDNs
SKILL.md lists remote runtime dependencies. Rendering offline needs those files served locally. github.com
Adding the block downloads remote files
registry-item.json lists remote assets on static.heygen.ai that are fetched when you run the add command. Check the downloaded files in the block's assets folder. github.com

Security advisories

No published security advisories as of Nov 2, 2026.

Technical details

Turning on read-only	No read-only mode. The add and render commands write files.
Talks to	cdn.jsdelivr.net (GSAP and d3-delaunay). static.heygen.ai (registry-item.json lists a remote asset, matcap-1.png, fetched at install)
Scopes	hyperframes add writes the block into compositions/glass-shard-title/ in your project The render command encodes video on your machine with the HyperFrames CLI SKILL.md lists remote runtime dependencies on cdn.jsdelivr.net for GSAP and d3-delaunay SKILL.md budgets roughly 350 MB per live instance and says to run one at a time

Questions

What does glass-shard-title do?

A ready-made HyperFrames title scene: glass shards fly in through fog and tile themselves into a headline. It is a block from the HyperFrames catalog, so it adds a finished scene to a video project and does not change how Claude works.

How do I install glass-shard-title?

Use the install box at the top of this page. It adds the block to a HyperFrames project, shows how to mount it in index.html and gives the render command.

Do I need the HyperFrames agent skills?

Not to add or render this block, because SKILL.md gives the commands. If you want an agent to build more compositions, the HyperFrames README documents its agent skills and a Claude Code plugin.

What can I change?

19 variables. headline, tileCount, roundness, bevel, meshSmooth, flyInTime, flyOutTime, stagger, flyInRotation, flyOutRotation, chaos, padding, sizeVariance, gap, easePow, sideDist, zDist, zOut and fog.

What does it need?

A HyperFrames project with Node.js 22 or later and FFmpeg, per the README. SKILL.md also budgets roughly 350 MB per live instance and says to run one at a time.

Can I use it in the Claude app?

No. The block is added and rendered with commands on your machine, and the README does not document a Claude app route.

Is it safe?

Installing it copies files into your project, and rendering runs npx and the HyperFrames CLI on your machine. The composition also loads scripts or fonts from CDNs listed in SKILL.md. The add command also downloads remote image files listed in registry-item.json. Read the files before you render, and keep the project in version control.

Information

updated Nov 2, 2026

Repository: heygen-com/hyperframes
Folder: registry/blocks/glass-shard-title

heygen-com/hyperframes skills.sh

Sources

Docs, issue trackers and discussions this page is built from.

Show all 3

glass-shard-title SKILL.md · github.com
heygen-com/hyperframes README · github.com
glass-shard-title registry-item.json · github.com