StoreSKILL.mdRead at 2d98d5c
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.
This skill includes scripts your agent can run. See which files
Overview
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)surface.js(8 KB)
Install
Install with npx hyperframes add code-slice-hero; by default the files above land under compositions/code-slice-hero/. Then mount the block from the host index.html:
<div
data-composition-id="code-slice-hero"
data-composition-src="compositions/code-slice-hero/code-slice-hero.html"
data-start="0"
data-duration="8"
data-track-index="1"
data-width="1920"
data-height="1080"
></div>Render with custom values by targeting the composition file directly:
npx --yes [email protected] render 'compositions/code-slice-hero/code-slice-hero.html' --variables '{"headline":"MAKE IT","reverseHeadline":"MATTER."}'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 | "MAKE IT" | Copy · Front headline max 32 chars |
reverseHeadline | string | "MATTER." | Copy · Rear headline max 32 chars |
direction | enum | "left-to-right" | Motion · Sweep direction (left-to-right |
sweepDuration | number | 4.2 | Motion · Sweep duration 2.6–4.5 step 0.05 |
sweepEaseStrength | number | 3 | Motion · Sweep easing strength 0–3 step 0.05 |
flipDuration | number | 0.75 | Motion · Each tile flip 0.65–1.65 step 0.05 |
cursorRadius | number | 210 | Cursor · Influence radius 160–480 step 10 |
cursorFalloff | number | 1.4 | Cursor · Influence falloff 0.4–3.5 step 0.05 |
cursorDepth | number | 80 | Cursor · Depth (+ toward camera) -320–320 step 10 |
tiltStrength | number | 55 | Cursor · Pull / tilt strength 0–55 step 1 |
noiseStrength | number | 2 | Motion · Organic variation 0–2 step 0.05 |
flipBounce | number | 0.15 | Motion · Elastic flip bounce 0–0.8 step 0.05 |
cellSize | number | 112 | Slices · Square cell size 24–120 step 4 |
formationScale | number | 1 | Slices · Local formation scale 0.94–1 step 0.001 |
fontSize | number | 310 | Type · Maximum size 160–480 step 5 |
behindColor | color | "#212121" | Surface · Behind-tile background |
shadowStrength | number | 0.19 | Surface · Cast shadow strength 0–0.65 step 0.01 |
shadowSoftness | number | 4 | Surface · Cast shadow softness 0.5–4 step 0.1 |
Runtime contract
- One paused GSAP timeline registered as
window.__timelines["code-slice-hero"]. - 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: GSAP, Canvas 2D, Seeded PRNG.
- External runtime dependencies: none (served locally).
- Local fonts: assets/Geist-Bold.ttf.
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.
Files 9 files
Install it by hand
Deska runs this for you, for every agent you pick. To run it yourself in a terminal:
npx skills add heygen-com/hyperframes --skill code-slice-heroMore from heygen-com
- hyperframes-cliheygen-comUse the HyperFrames CLI development loop: init, add, catalog, capture, lint, check, snapshot, compare, grade-compare, preview, play, present, beats, keyframes, single or batch render, publish, cloud, cloudrun, feedback, lambda, doctor, browser, info, upgrade, skills, compositions, timeline, history, clean, docs, benchmark, telemetry, transcribe, auth, tts, and remove-background. Also use when diagnosing build or render failures. validate, inspect, and layout are deprecated aliases; use check. Covers local, HeyGen-hosted cloud, AWS Lambda, and Google Cloud Run rendering.831.6K installs on skills.sh1
- hyperframesheygen-comMandatory entry point: read this first for any request to make, create, edit, animate, or render a video, animation, or motion graphic, including a promo, explainer, captioned clip, title card, overlay, slideshow or interactive deck, Remotion port, or any HyperFrames HTML composition. Also use it to inspect, diagnose, validate, preview, publish, or batch-render an existing HyperFrames project. Inputs may be a website URL, GitHub PR, Figma design or URL, text or brief, existing footage, or music. It resumes project state, captures intent when applicable, selects and installs the owning workflow, and routes domain capabilities. HyperFrames is the default output framework unless the user explicitly chooses another framework for the deliverable or asks only to record a browser session.798.7K installs on skills.sh1
- hyperframes-registryheygen-comSearch, install, and wire registry blocks and components into HyperFrames compositions. Use BEFORE hand-building any named visual — whenever a brief, a user, or a storyboard names a look, effect, treatment, or transition such as CRT scanlines, glitch, chromatic aberration, film grain, a shimmer sweep, a chart, a code or terminal window, a map, or a confetti burst — because roughly 400 hosted items already cover many of them and the search ranks all of them with nothing installed, no project, and no account. Also use when running hyperframes add or hyperframes catalog, installing one item or every block matching a tag, wiring an installed item into index.html, or working with hyperframes.json. Covers discovery, install locations, block sub-composition wiring, component snippet merging, and authoring a new block or component to contribute upstream (idea → scaffold → validate → PR).719.6K installs on skills.sh1
- media-useheygen-comAgent Media OS, the single skill for every media need in a HyperFrames project. Resolve BGM, SFX, image, icon, brand logo, voice, color grade, or LUT into a frozen local file or paste-ready block + ledger record (one verb, `resolve`); generate via TTS / music / image models when the catalog misses; produce voiceover, transcription, captions, and background removal through one shared audio engine; operate on media (cut / reframe / transform); and reuse assets across projects. Also use for vague feedback that real footage looks dark, flat, boring, should feel retro/camcorder/print/ASCII, needs privacy, or needs a media reveal.705.6K installs on skills.sh1
- hyperframes-animationheygen-comAll animation knowledge for HyperFrames — atomic motion rules, multi-phase scene blueprints, scene transitions, broader motion-design techniques, AND the seven runtime adapters (GSAP default, plus Lottie, Three.js, Anime.js, CSS keyframes, Web Animations API, TypeGPU). Use for any motion or animation task: pick 2-4 rules and compose, or load a blueprint, or look up runtime-specific API (e.g. GSAP eases / Lottie player / Three.js mixer). Also covers auditing an existing composition's choreography (animation map) and 24 named text-animation effects. HyperFrames-native: single paused timeline, seek-safe, deterministic.686.4K installs on skills.sh0
