Content To Video
architectds/modeldock
Turn arbitrary source content (README, article, story, slides, deck, data/report, product description, tutorial text, audio/transcript, or a bare topic) into a finished, high-quality MP4 video.
HyperFrames block that builds a headline of up to 40 characters from Voronoi-cut glass shards flying in through fog, then sends them past the camera.
Install Glass Shard Title
$ npx skills add heygen-com/hyperframes --skill glass-shard-title -a claude-codeProject install by default; add -g for ~/.claude/skills/.
$ gh skill install heygen-com/hyperframes glass-shard-title --agent claude-codeProject scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).
$ git clone --depth 1 https://github.com/heygen-com/hyperframes.git skills-src && mkdir -p .claude/skills && cp -r skills-src/registry/blocks/glass-shard-title .claude/skills/glass-shard-title && rm -rf skills-srcUse ~/.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/
Install the "glass-shard-title" agent skill from https://github.com/heygen-com/hyperframes/tree/main/registry/blocks/glass-shard-title into .claude/skills/glass-shard-title/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "glass-shard-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 install https://github.com/heygen-com/hyperframes/tree/main/registry/blocks/glass-shard-titleType 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.
$ npx skills add heygen-com/hyperframes --skill glass-shard-title -a codexProject install goes to .agents/skills/; add -g for ~/.codex/skills/.
$ gh skill install heygen-com/hyperframes glass-shard-title --agent codexProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/heygen-com/hyperframes.git skills-src && mkdir -p .agents/skills && cp -r skills-src/registry/blocks/glass-shard-title .agents/skills/glass-shard-title && rm -rf skills-srcUse ~/.agents/skills/ instead of .agents/skills for a personal install.
Codex skills documentation · loads skills from .agents/skills/
Install the "glass-shard-title" agent skill from https://github.com/heygen-com/hyperframes/tree/main/registry/blocks/glass-shard-title into .agents/skills/glass-shard-title/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "glass-shard-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.
$ npx skills add heygen-com/hyperframes --skill glass-shard-title -a cursorProject install goes to .agents/skills/; add -g for ~/.cursor/skills/.
$ gh skill install heygen-com/hyperframes glass-shard-title --agent cursorProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/heygen-com/hyperframes.git skills-src && mkdir -p .cursor/skills && cp -r skills-src/registry/blocks/glass-shard-title .cursor/skills/glass-shard-title && rm -rf skills-srcUse ~/.cursor/skills/ instead of .cursor/skills for a personal install.
Cursor skills documentation · loads skills from .cursor/skills/, .agents/skills/, .claude/skills/, .codex/skills/
Install the "glass-shard-title" agent skill from https://github.com/heygen-com/hyperframes/tree/main/registry/blocks/glass-shard-title into .cursor/skills/glass-shard-title/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "glass-shard-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 https://github.com/heygen-com/hyperframes.git --path registry/blocks/glass-shard-title--scope user (default) or --scope workspace; --path is the subfolder of the repo that holds the skill; --consent skips the security confirmation prompt.
$ npx skills add heygen-com/hyperframes --skill glass-shard-title -a gemini-cliProject install goes to .agents/skills/; add -g for ~/.gemini/skills/.
$ gh skill install heygen-com/hyperframes glass-shard-title --agent gemini-cliProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/heygen-com/hyperframes.git skills-src && mkdir -p .gemini/skills && cp -r skills-src/registry/blocks/glass-shard-title .gemini/skills/glass-shard-title && rm -rf skills-srcUse ~/.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/
Install the "glass-shard-title" agent skill from https://github.com/heygen-com/hyperframes/tree/main/registry/blocks/glass-shard-title into .gemini/skills/glass-shard-title/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "glass-shard-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.
$ gh skill install heygen-com/hyperframes glass-shard-titleInstalls 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).
$ npx skills add heygen-com/hyperframes --skill glass-shard-title -a github-copilotProject install goes to .agents/skills/; add -g for ~/.copilot/skills/.
$ git clone --depth 1 https://github.com/heygen-com/hyperframes.git skills-src && mkdir -p .github/skills && cp -r skills-src/registry/blocks/glass-shard-title .github/skills/glass-shard-title && rm -rf skills-srcUse ~/.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/
Install the "glass-shard-title" agent skill from https://github.com/heygen-com/hyperframes/tree/main/registry/blocks/glass-shard-title into .github/skills/glass-shard-title/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "glass-shard-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.
$ npx skills add heygen-com/hyperframes --skill glass-shard-title -a opencodeOpenCode documents no install command of its own. Project install goes to .agents/skills/; add -g for ~/.config/opencode/skills/.
$ gh skill install heygen-com/hyperframes glass-shard-title --agent opencodeProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/heygen-com/hyperframes.git skills-src && mkdir -p .opencode/skills && cp -r skills-src/registry/blocks/glass-shard-title .opencode/skills/glass-shard-title && rm -rf skills-srcUse ~/.config/opencode/skills/ instead of .opencode/skills for a personal install.
OpenCode skills documentation · loads skills from .opencode/skills/, .claude/skills/, .agents/skills/
Install the "glass-shard-title" agent skill from https://github.com/heygen-com/hyperframes/tree/main/registry/blocks/glass-shard-title into .opencode/skills/glass-shard-title/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "glass-shard-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
glass-shard-title- GitHub stars
- 60k
- Used in
- 1 other repo
- Token cost
- ~1.3k tokens
- SKILL.md length
- 483 words
- Files
- 14 (incl. assets)
- Skills in repo
- 32
- Repo updated
- First seen
- Licence
- Apache-2.0
At a glance
HyperFrames block that builds a headline of up to 40 characters from Voronoi-cut glass shards flying in through fog, then sends them past the camera.
- 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;…
- Opening a video with a headline that forms out of drifting glass pieces
- SKILL.md covers Files, Install, Variables and Runtime contract, plus 1 more section
- Runs JavaScript scripts from its folder; calls npx; reaches cdn.jsdelivr.net
What it does
A 1920×1080 title animation at 30 fps. Glass panes shaped by Voronoi cells arrive from depth while spinning, settle into a tiled silhouette of the headline, and then fly out past the camera. Each pane is cut from a jittered blob by clipping it against its cell, which keeps the lettering fully covered.
19 variables set the headline text, the tile count (1 to 400), roundness, bevel and surface smoothness, among other options. Glass and matcap surfaces get per-fragment fog, and the depth travel is separated from the easing so the shards visibly cross the distance. A tile count of 1 gives a single pane.
Geist and Cormorant Garamond fonts, a studio HDR environment and a bundled glass script ship with the block, and one matcap image is fetched from a CDN when you install it. Add it with `npx hyperframes add glass-shard-title` and mount it from the host index.html.
When your agent uses it
- Opening a video with a headline that forms out of drifting glass pieces
- Creating a dramatic title card with a short headline for a product teaser
- Trying different tile counts, bevel and roundness on the same title
Example prompts
- “Add the glass-shard-title block and set the headline to Built for makers.”
- “Render the glass shard title with a higher bevel and rounder shards.”
- “Use a single pane instead of tiles for the glass title so the headline stays whole.”
Requirements
- Node.js with npx
- Network access at install time for the matcap image
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 8bca7c4. 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
Ships script files (JavaScript), which the agent can run.
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
Glass Shard Title loads about 1.3k tokens when it runs. Until then it costs about 35 tokens; SKILL.md has 483 words of instructions outside code blocks.
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 8bca7c4, republished under its Apache-2.0 licence (© heygen-com). 483 words, ~1,336 tokens.
Download SKILL.mdSave it as
.claude/skills/glass-shard-title/SKILL.md (or your agent's skills folder). This skill also uses 13 other files; get the full folder from GitHub.- 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 |
Show full SKILL.md (138 more words)Show less
Runtime contract
- One paused GSAP timeline registered as
window.__timelines["glass-shard-title"]. - Re-syncs on the
hf-seekCustomEvent; 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-variablesa 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.
© heygen-com, Apache-2.0. Rendered from Markdown: HTML in the file is shown as text, images as links, and headings moved down two levels. Raw file
Files
SKILL.md and 13 other files (assets) in registry/blocks/glass-shard-title of heygen-com/hyperframes.
- SKILL.md
- assets/Three-LICENSE.txt
- assets/ferndale_studio_01_1k.hdr
- assets/fonts/CormorantGaramond-OFL.txt
- assets/fonts/Geist-Bold.ttf
- assets/fonts/Geist-OFL.txt
- assets/fonts/Geist-Regular.ttf
- assets/fonts/Geist-SemiBold.ttf
- assets/fonts/cormorant-garamond.woff2
- assets/glass-main.js
- assets/glass-main.mjs
- build-bundle.mjs
- glass-shard-title.html
- registry-item.json
Open the folder on GitHubat commit 8bca7c4
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.
Compare with similar skills
Glass Shard Title 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.
| Skill | Stars | Used in | Tokens | Auto-check | Licence | Repo updated |
|---|---|---|---|---|---|---|
| Glass Shard Title this skillheygen-com/hyperframes | 60k | 1 repos | ~1.3k | Automated safety check: Pass | Apache-2.0 | |
| Content To Videoarchitectds/modeldock | 117 | — | ~2.4k | Automated safety check: Pass | Apache-2.0 | |
| Guizang Product Video Skillop7418/guizang-product-video-skill | 753 | — | ~1.1k | Automated safety check: Pass | AGPL-3.0 | |
| Short Form Editnateherkai/hyperframes-student-kit | 1.3k | — | ~5.3k | Automated safety check: Pass | Custom licence | |
| Plotbeat Data VideosUnclecheng-li/AI_Animation | 1.5k | — | ~2.6k | Automated safety check: Pass | MIT | |
| Yuv Viral Videohoodini/ai-agents-skills | 282 | — | ~7.5k | Automated safety check: Notes | None |
Similar skills
Guizang Product Video Skill
op7418/guizang-product-video-skill
制作代码驱动的软件产品宣传片和版本更新片（product promo、release notes video、changelog promo）。从真实功能和产品设计出发定方向，用真实组件、GSAP/Three.js 动效、原创配乐和动作音效完成影片，每支片子的视觉手法都从产品本身推导，不套模板。
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…
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.
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…
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.
More from heygen-com/hyperframes
All 32 skills in this repoHyperFrames Animation
heygen-com/hyperframes
Collects motion rules, scene blueprints, transitions and runtime adapters for HyperFrames video compositions, with GSAP as the default animation runtime.
Embedded Video Captions
heygen-com/hyperframes
Adds captions to a single-subject talking-head video without editing the footage, from plain subtitles to cinematic text placed behind the speaker.
Weekly Changelog Video
heygen-com/hyperframes
Turns a weekly changelog markdown file into a branded HyperFrames video with voiceover, animated mock-UI scenes and captions, using fonts, background and scripts bundled in the skill.
Faceless Explainer Video
heygen-com/hyperframes
Turns an article, notes or a topic brief into an explainer video whose visuals are invented per scene, built frame by frame in HyperFrames with no footage.
Figma to HyperFrames
heygen-com/hyperframes
Imports Figma assets, brand tokens, components and motion into a HyperFrames video composition, using the Figma REST API with a connector or native export for shaders.
HyperFrames Media Use
heygen-com/hyperframes
Finds, generates and edits media for HyperFrames video projects: music, sound effects, images, icons, logos, voiceovers, captions and color grades.
Related
Works with
Categories
Questions about Glass Shard Title
What does Glass Shard Title do?
HyperFrames block that builds a headline of up to 40 characters from Voronoi-cut glass shards flying in through fog, then sends them past the camera. A 1920×1080 title animation at 30 fps. Glass panes shaped by Voronoi cells arrive from depth while spinning, settle into a tiled silhouette of the headline, and then fly out past the camera.
When should I use Glass Shard Title?
Glass Shard Title fits situations like: opening a video with a headline that forms out of drifting glass pieces; creating a dramatic title card with a short headline for a product teaser; trying different tile counts, bevel and roundness on the same title.
How do I install Glass Shard Title in Claude Code?
Run `npx skills add heygen-com/hyperframes --skill glass-shard-title -a claude-code`. Or copy the skill folder (registry/blocks/glass-shard-title in heygen-com/hyperframes) into .claude/skills/glass-shard-title in your project. Claude Code loads it when a task matches its description.
How do I install Glass Shard Title in Codex?
Run `npx skills add heygen-com/hyperframes --skill glass-shard-title -a codex`. Or copy the skill folder (registry/blocks/glass-shard-title in heygen-com/hyperframes) into .agents/skills/glass-shard-title in your project. Codex loads it when a task matches its description.
Can I use Glass Shard Title 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 glass-shard-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/glass-shard-title, .gemini/skills/glass-shard-title, .github/skills/glass-shard-title and .opencode/skills/glass-shard-title in your project.
What does Glass Shard Title need to run?
Going by SKILL.md and its folder, Glass Shard Title needs JavaScript for the scripts in its folder and the command-line tools its instructions call (npx). Our summary lists: Node.js with npx; Network access at install time for the matcap image.
Does Glass Shard Title 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 Glass Shard Title 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 Glass Shard Title use?
Glass Shard Title 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 Glass Shard Title use?
About 1.3k tokens (SKILL.md is roughly 5.3k 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 Glass Shard Title?
Skills that share tags, products or a category with Glass Shard Title: Content To Video (architectds/modeldock, 117 stars), Guizang Product Video Skill (op7418/guizang-product-video-skill, 753 stars), Short Form Edit (nateherkai/hyperframes-student-kit, 1.3k stars) and Plotbeat Data Videos (Unclecheng-li/AI_Animation, 1.5k stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.
Who maintains Glass Shard Title?
heygen-com (a GitHub organization) maintains it in heygen-com/hyperframes, which has 60,472 GitHub stars. The repository holds 32 skills in this directory. The repository was last updated on October 11, 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.