Cube Performance Test Suite
Compare different animation drivers with the actual homepage cube complexity
All tests use: 6 interactive faces, wireframe edges, hover states, glow effects
🤖 Auto Test
Automatically run all tests with simulated scrolling
A: Framer Motion Springs (Production)
Current homepage approach - useSpring + useMotionValue with RAF floating
productionframer-motion
B: RAF Batching + Direct DOM
Scroll events batched with requestAnimationFrame, direct style manipulation
direct-domraf
C: CSS Scroll-Driven Animation
Native CSS animation-timeline: scroll() - zero JS overhead if supported
css-nativeexperimental
D: CSS Custom Properties
Update CSS variable, let browser handle transform interpolation
css-varshybrid
E: RAF + No Floating Animation
Same as B but without the continuous floating - isolates scroll vs float perf
diagnosticno-float
F: WebGL (Three.js)
Bypasses DOM entirely - renders cube directly to canvas via WebGL
webglthree.jsgpu
How to Test:
- Open each test and scroll up/down while watching the FPS counter
- Compare average FPS across tests
- Note which techniques feel smoothest during fast scrolling
- Check Test E to see if floating animation is the bottleneck
What to Look For:
- ● 55+ FPS - Excellent, no jank
- ● 30-55 FPS - Noticeable but usable
- ● Below 30 FPS - Significant jank