code-slice-hero

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 : Show more Installs 1.2K Repository heygen-com/hyperframes GitHub Stars 52.6K First Seen 5 days ago Security Audits Gen Agent Trust Hub Pass Socket Pass Snyk Pass