Overdrive

Push an interface past conventional limits. This isn't just about visual effects — it's about using the full power of the browser to make any part of an interface feel extraordinary.

MANDATORY PREPARATION

Invoke impeccable — it contains design principles, anti-patterns, and the Context Gathering Protocol. Follow the protocol before proceeding.

EXTRA IMPORTANT: Context determines what "extraordinary" means. A particle system on a creative portfolio is impressive. The same particle system on a settings page is embarrassing. But a settings page with instant optimistic saves and animated state transitions? That's extraordinary too.

Propose Before Building

This skill has the highest potential to misfire. Do NOT jump straight into implementation. You MUST:

1. Think through 2-3 different directions with different techniques and aesthetic approaches
2. Present these directions and get the user's pick before writing any code
3. Only proceed with the direction the user confirms

What "Extraordinary" Means

For visual/marketing surfaces: Scroll-driven reveals, shader backgrounds, cinematic page transitions, generative art

For functional UI: Dialog morphing from trigger via View Transitions, data table with 100k rows at 60fps via virtual scrolling, forms with streaming validation, drag-and-drop with spring physics

For performance-critical UI: Search filtering 50k items without flicker, image editor processing in near-real-time

The Toolkit

Make transitions feel cinematic

• View Transitions API — shared element morphing between states
• @starting-style — animate elements from display: none to visible with CSS only
• Spring physics — natural motion with mass, tension, and damping

Tie animation to scroll position

• Scroll-driven animations (animation-timeline: scroll()) — CSS-only, no JS

Render beyond CSS

• WebGL — shader effects, post-processing, particle systems (Three.js, OGL, regl)
• Canvas 2D / OffscreenCanvas — custom rendering, moving heavy work off main thread
• SVG filter chains — displacement maps, turbulence for organic distortion

Make data feel alive

• Virtual scrolling — render only visible rows for massive datasets
• GPU-accelerated charts — Canvas or WebGL for datasets too large for SVG/DOM
• @property — register custom CSS properties, enabling animation of gradients and colors

Push performance boundaries

• Web Workers — move computation off the main thread
• WASM — near-native performance for computation-heavy features

Implement with Discipline

Progressive enhancement is non-negotiable

@supports (animation-timeline: scroll()) {
  .hero { animation-timeline: scroll(); }
}

Performance rules

• Target 60fps. If dropping below 50, simplify.
• Respect prefers-reduced-motion — always
• Pause off-screen rendering
• Test on real mid-range devices

NEVER:

• Ignore prefers-reduced-motion — this is an accessibility requirement
• Ship effects that cause jank on mid-range devices
• Use bleeding-edge APIs without a functional fallback
• Layer multiple competing extraordinary moments — focus creates impact, excess creates noise

Verify the Result

• The wow test: Show it to someone who hasn't seen it. Do they react?
• The removal test: Take it away. Does the experience feel diminished?
• The device test: Run it on a phone, tablet, Chromebook. Still smooth?
• The accessibility test: Enable reduced motion. Still beautiful?

Mirrored from https://github.com/pbakaus/impeccable — original author: pbakaus, license: Apache-2.0. This is an unclaimed mirror. Content and ownership transfer to the author when they claim this account.