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: . Duration 8 s at 30 fps, 1920×1080.

Install with ; by default the files above land under . Then mount the block from the host :

<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 ; declared on the composition root as (single-quoted attribute, plain JSON).

| id | type | default | label / range | | ------------------- | ------ | ----------------- | ------------------------------------------------- | -------------- | | | string | | Copy · Front headline max 32 chars | | | string | | Copy · Rear headline max 32 chars | | | enum | | Motion · Sweep direction (left-to-right | right-to-left) | | | number | | Motion · Sweep duration 2.6–4.5 step 0.05 | | | number | | Motion · Sweep easing strength 0–3 step 0.05 | | | number | | Motion · Each tile flip 0.65–1.65 step 0.05 | | | number | | Cursor · Influence radius 160–480 step 10 | | | number | | Cursor · Influence falloff 0.4–3.5 step 0.05 | | | number | | Cursor · Depth (+ toward camera) -320–320 step 10 | | | number | | Cursor · Pull / tilt strength 0–55 step 1 | | | number | | Motion · Organic variation 0–2 step 0.05 | | | number | | Motion · Elastic flip bounce 0–0.8 step 0.05 | | | number | | Slices · Square cell size 24–120 step 4 | | | number | | Slices · Local formation scale 0.94–1 step 0.001 | | | number | | Type · Maximum size 160–480 step 5 | | | color | | Surface · Behind-tile background | | | number | | Surface · Cast shadow strength 0–0.65 step 0.01 | | | number | | Surface · Cast shadow softness 0.5–4 step 0.1 |