Individual skill

code-slice-hero

A tiled headline surface flips cell by cell under a sweeping depth field to reveal the rear headline. HyperFrames block, 1920×1080, 8s, 18 variables.

registry/blocks/code-slice-hero/SKILL.md

Read pinned source

Source commit 183614bda3df15812d9f18fd4a71ee77a7da6387

What was checked

Matches the observed repository HEAD: Yes
Scanner rules are current: Yes
Repository scan complete: No
Skill scan complete: No
Observed behavior: Network or broad shell
Last checked: Nov 4, 2026

These are observations at the recorded commit, not a guarantee of safety. Review the source before running it.

Install this skill

Choose an agent in your Stack or copy a command below. Commands fetch the pinned commit and copy only this skill directory. Existing destinations are refused. Copying a command does not install anything.

An install command is unavailable: current rules, complete repository and skill scans, an eligible behavior level and a permitted license are required.

Repository context

Repository stars (not skill ratings): 80,435
Repository last updated: Nov 7, 2026
License: Apache-2.0

Observed agent integration: No specific integration evidence. Standard SKILL.md installation does not imply verified compatibility.

ai Repository topic
animation Repository topic
ffmpeg Repository topic
framework Repository topic
gsap Repository topic
html Repository topic
mcp Repository topic
puppeteer Repository topic
rendering Repository topic
typescript Repository topic
engineering Derived category

Files and excerpt

File metadata and permitted, redacted excerpts come from the recorded scan. Source links are pinned to that commit.

Browse files

SKILL.mdcore · 4,808 bytes
SKILL.mdcore · 4,808 bytes
SKILL.mdcore · 4,808 bytes
assets/GSAP-NOTICE.txtdoc · 145 bytes
assets/Geist-Bold.ttfasset · 66,588 bytes
assets/Geist-OFL.txtdoc · 4,368 bytes
assets/gsap-3.14.2.min.jsruns · 131,276 bytes
code-slice-hero.htmlasset · 24,444 bytes
registry-item.jsonasset · 1,945 bytes
shadows.jsruns · 9,890 bytes
surface.jsruns · 7,773 bytes

Read excerpt


# Code Slice Hero

A full square-tile surface carries one seamless headline. An imaginary cursor crosses the surface; nearby tiles respond to its Gaussian depth field with lift and tilt, and only the cells intersecting either headline silhouette turn over to reveal the rear headline. The whole grid is one instanced WebGL 2 draw with a shared front/rear texture pair, plus a batched projected-shadow pass. Copy, text size and square cell size are independent, so tiles never stretch. Sweep direction, easing strength, cursor radius, falloff, depth, bounce and shadow are all variables.

Composition id: `code-slice-hero`. Duration 8 s at 30 fps, 1920×1080.

## Files

- `code-slice-hero.html` (24 KB)
- `assets/Geist-Bold.ttf` (65 KB)
- `assets/Geist-OFL.txt` (4 KB)
- `assets/gsap-3.14.2.min.js` (128 KB)
- `assets/GSAP-NOTICE.txt` (1 KB)
- `shadows.js` (10 KB)