| name | ui-overdrive |
| description | Push past conventional limits with technically extraordinary effects |
UI Overdrive
/ui-overdrive [target] - Push past conventional limits. Shaders, spring physics, scroll-driven reveals, View Transitions, 60fps. Technically extraordinary effects.
IMPORTANT: Overdrive has highest misfire potential. You MUST propose 2-3 directions with trade-offs and get user pick BEFORE writing code.
Flow
- Assess what "extraordinary" means here — context determines technique
- Propose 2-3 directions with description, technique, trade-offs (browser support, perf, complexity)
- Get user confirmation before building
- Iterate with browser automation — ambitious effects rarely work first try. Preview, verify visually, refine. Multiple rounds expected.
"Extraordinary" by Context
- Visual/marketing surfaces: scroll-driven reveals, shader backgrounds, cinematic transitions, generative art
- Functional UI: View Transitions (dialog morphs from trigger), virtual scroll for 100k rows, streaming form validation, spring physics drag-and-drop
- Performance-critical: search filtering 50k items without flicker, form that never blocks main thread, near-real-time image processing
- Data-heavy: GPU-accelerated Canvas/WebGL charts, animated data transitions, force-directed graphs
Toolkit
Cinematic Transitions
- View Transitions API — shared element morphing between states (all browsers same-doc)
@starting-style — animate from display: none to visible, CSS only- Spring physics — natural motion (motion library, GSAP, or custom solver)
Scroll-driven
animation-timeline: scroll() — CSS-only parallax, progress bars, reveals (Chrome/Edge/Safari; Firefox: flag — always provide static fallback)
Render Beyond CSS
- WebGL — shaders, particles, post-processing (Three.js, OGL, regl)
- WebGPU — next-gen GPU compute (Chrome/Edge only; always fallback to WebGL2)
- Canvas 2D / OffscreenCanvas — custom rendering, off-main-thread via Workers
- SVG filter chains — displacement, turbulence, organic distortion
Data at Scale
- Virtual scrolling — render only visible rows (TanStack Virtual for complex cases)
- GPU charts — Canvas/WebGL for large datasets (deck.gl)
- Animated data transitions — D3
transition() or View Transitions for DOM charts
Animate Complex Properties
@property — register typed CSS properties for gradient/color animation- Web Animations API — JS-driven with CSS performance
Push Performance
- Web Workers — computation off main thread
- OffscreenCanvas — render in Worker thread
- WASM — near-native for image processing, physics, codecs
Rules
- Progressive enhancement non-negotiable: every technique must degrade gracefully, experience without enhancement still good
- 60fps target: if dropping below 50, simplify
- Respect
prefers-reduced-motion: always. Beautiful static alternative required.
- Lazy-initialize heavy resources (WebGL, WASM) only when near viewport
- Pause off-screen rendering
- Test on real mid-range devices
NEVER
- Ignore
prefers-reduced-motion
- Ship effects that cause jank on mid-range devices
- Use bleeding-edge APIs without functional fallback
- Add sound without user opt-in
- Use ambition to mask weak design fundamentals (fix those first)
- Layer multiple competing extraordinary moments (focus creates impact, excess creates noise)
