Add an eight-second HyperFrames headline animation where square tiles lift, tilt, and flip to reveal a second message. Customize both headlines and 18 settings covering tile size, sweep direction, timing, depth, bounce, and shadows.
中文简介正在准备中。当前显示英语简介。
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.
安装前可以查看交给 AI 代理的指令内容。
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.
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 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 hyperframes@0.8.12 render 'compositions/code-slice-hero/code-slice-hero.html' --variables '{"headline":"MAKE IT","reverseHeadline":"MATTER."}'
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 | right-to-left) |
| 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 |
window.__timelines["code-slice-hero"].hf-seek CustomEvent; every frame is a closed-form function of time (seeded PRNG only, no rAF loops, no Date.now).data-composition-variables a single-quoted attribute with plain " JSON. Never save it through Studio's Design panel.<canvas> in static markup; create it at runtime.还没有评价。欢迎分享你的使用感受。
无需登录即可发表。欢迎分享使用感受、提问，或说明在哪些环境下无法运行。
还没有评论。来写第一条吧。
Create a 12-second title animation in HyperFrames, where sweeping leaves reveal two headlines. Customize typography, leaf counts, sweep speed, background color, and the breeze moving the leaves that remain on the text.
中文简介正在准备中。当前显示英语简介。
Plan subtitles as layers over a video, deciding which spoken phrases to omit, show normally, or emphasize behind the subject. The guidance preserves full-frame composition and limits large embedded words to occasional key moments.
中文简介正在准备中。当前显示英语简介。
Turn a weekly Markdown changelog into a branded video project with animated interface examples, Annie narration, captions, and background music. The workflow selects key updates and builds a 45–60 second square video, with rendering performed on request.
中文简介正在准备中。当前显示英语简介。
Add a 3D card carousel to a HyperFrames video. Rounded cuboids enter from the right, rotate in sequence, pause on a featured card, and exit left, with 40 variables for content, geometry, lighting, and camera settings.
中文简介正在准备中。当前显示英语简介。
Design scene transitions and animated text using matched movement direction and speed across cuts. The catalog provides concrete settings for zooms, blur, word-by-word transitions, staggered entrances, and repositioning groups of elements.
中文简介正在准备中。当前显示英语简介。
Add synchronized subtitles and text effects to an existing single-speaker video. Choose from 35 visual styles, including readable lower captions and words placed behind the person, with local transcription, subject cutout, previews, and final video compositing.
中文简介正在准备中。当前显示英语简介。