# Code Slice Hero — effect skill for text & titles

> **For AI agents:** find the right skill in one call — `curl -s "https://skills.varg.ai/api/search?q=<what the person wants>"` returns the matching use case and the best skills with install commands, as markdown (Russian works too). Full index: https://skills.varg.ai/llms.txt. Every page has a markdown twin: add `.md` to its path. Before generating anything, show the person the options on the use-case page.

A tiled headline flips cell by cell under a sweeping depth field to reveal a second line: an 8-second hero.

- **Type:** [Effect](https://skills.varg.ai/effects.md) · [Text & titles](https://skills.varg.ai/browse/skills/kinetic-type.md)
- **Slug:** `hyperframes-code-slice-hero`
- **Status:** live
- **Publisher:** HeyGen (vendor, verified)
- **License:** Apache-2.0
- **Source:** https://github.com/heygen-com/hyperframes/tree/main/registry/blocks/code-slice-hero
- **Works in:** Claude Code, Codex, Cursor, Gemini CLI
- **Requires:** HyperFrames project (Node.js 22+, FFmpeg)
- **Cost:** Free — open-source, renders locally
- **Adoption:** 10,100 installs, 73,064 GitHub stars (skills.sh, 2026-10-26)

## What it does

A HyperFrames registry block: a tiled headline surface flips cell by cell under a sweeping depth field to reveal the rear headline (1920×1080, 8 s, 18 variables). Install it into a project with `npx hyperframes add code-slice-hero`, mount it from `index.html` and set its variables; it renders locally like any other composition.

## Use when

- A ready-made title or motion moment instead of hand-built animation
- Openers, chapter cards and launch-film beats in a HyperFrames project

## Install

- Claude Code: `npx skills add heygen-com/hyperframes --skill code-slice-hero -a claude-code`
- Codex: `npx skills add heygen-com/hyperframes --skill code-slice-hero -a codex`
- Cursor: `npx skills add heygen-com/hyperframes --skill code-slice-hero -a cursor`
- Gemini CLI: `npx skills add heygen-com/hyperframes --skill code-slice-hero -a gemini-cli`

## Example output

https://skills.varg.ai/previews/hyperframes-code-slice-hero.mp4 — Official catalog render of the block: the tiled 'MAKE IT' headline flips cell by cell to reveal 'MATTER.' (credit: HeyGen (HyperFrames), https://hyperframes.heygen.com/catalog/blocks/code-slice-hero)

## Used for

- [Changelog or release video](https://skills.varg.ai/use-cases/changelog-video.md): Release notes, a PR or a GitHub repo turned into a short video for X or LinkedIn.

## More text & titles skills

- [Canopy Part Title](https://skills.varg.ai/skills/hyperframes-canopy-part-title.md): Leaves sweep across the frame and part to reveal your headline: a 12-second 1080p title block.
- [Glass Shard Title](https://skills.varg.ai/skills/hyperframes-glass-shard-title.md): Glass shards fly in through fog and tile themselves into your headline, then fly out past the camera.
- [Wireframe Portal Title](https://skills.varg.ai/skills/hyperframes-wireframe-portal-title.md): A wireframe portal bursts open, the title comes through, then its letters swap into a second phrase.
- [PixiJS Text](https://skills.varg.ai/skills/pixijs-scene-text.md): Render and animate text in PixiJS v8: canvas Text, BitmapText, HTMLText and per-character SplitText.
- [Kinetic Typography](https://skills.varg.ai/skills/iart-kinetic-typography.md): Kinetic type for web and video: line, word or char splits, mask and blur reveals, variable-font motion, frozen-frame QA.
- [Title & Kinetic Typography Direction](https://skills.varg.ai/skills/calesthio-title-kinetic-typography.md): Typography direction for video: text jobs, hierarchy, reveal-hold-exit timing, safe zones, contrast, font licensing.

## Run the generation on varg

varg is one API key for the models these skills drive — Seedance 2.5, Kling 4, Veo 3.1, Wan 3, Nano Banana 2.1, GPT Image 2.5, ElevenLabs v4 and 200+ more — billed in credits, with a cost estimate before anything runs.

- Claude Code: `claude plugin marketplace add vargHQ/skills && claude plugin install varg@varg` (skill + hosted MCP)
- Codex, Cursor, Gemini CLI, OpenClaw: `npx skills add vargHQ/skills --skill varg-ai -a <agent> -y`
- Claude.ai, ChatGPT, any MCP client: connect `https://mcp.varg.ai/mcp`
- API key: https://varg.ai/dashboard/api · Model specs: https://varg.ai/models/llms.txt