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.

skills/ui2v-motions/01_动效库/itelmn/code-slice-hero/SKILL.md

Read pinned source

Source commit 3d17ba3eb0b0ea631b593bc646b01b83c8d861e4

What was checked

Matches the observed repository HEAD: Yes
Scanner rules are current: Yes
Repository scan complete: No
Skill scan complete: No
Observed behavior: Local scripts
Last checked: Nov 9, 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): 1,754
Repository last updated: Oct 26, 2026
License: MIT

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

css Repository topic
html5 Repository topic
front-end Repository topic
javascript Repository topic
ppt Repository topic
ai Repository topic
ai-agents Repository topic
dsh-plugin Repository topic
dsh-plugins Repository topic
prompt 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
SOURCE.mddoc · 328 bytes
_meta.jsonasset · 287 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)