skills.rest
fauzanazz
fauzanazzCOMMUNITY
Explore all skills by this author →
GitHub

overdrive

Implements technically ambitious interface effects using shaders, spring physics, and scroll-driven animations.

Updated Apr 1, 2026
Search Tags:#frontend#animations#webgl#60fps#spring physics#view transitions#scroll-driven
One-click install
npx skills add https://github.com/fauzanazz/katalis --skill overdrive-fauzanazz
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: overdrive
Source: https://github.com/fauzanazz/katalis/tree/main/.agents/skills/overdrive
Command: npx skills add https://github.com/fauzanazz/katalis --skill overdrive-fauzanazz

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Standard web interfaces often feel flat and conventional. This Skill pushes interfaces past conventional limits by applying advanced browser capabilities — WebGL shaders, spring physics, View Transitions, scroll-driven animations, and GPU-accelerated rendering — so that pages, forms, tables, and dashboards feel extraordinary rather than ordinary. ## Core Features & Use Cases - Cinematic transitions: Uses the View Transitions API, @starting-style, and spring physics to morph elements between states, such as a button expanding into a dialog. - Advanced rendering: Applies WebGL/WebGPU shaders, Canvas 2D, OffscreenCanvas, and SVG filter chains for effects CSS alone cannot express. - High-performance data UI: Implements virtual scrolling for 100k-row tables, GPU-accelerated charts, and Web Workers to keep interfaces at 60fps. - Use Case: A designer wants a portfolio hero section with a scroll-driven reveal and a shader background. The Skill proposes 2-3 directions, confirms one with the user, then iterates with browser automation until the effect looks right. ## Quick Start Use the overdrive skill to make the landing page hero section feel extraordinary with a scroll-driven reveal and shader background.

Frequently Asked Questions about overdrive

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I add scroll-driven animations to a web page?▼

Use the CSS scroll-driven animations API with animation-timeline: scroll() for parallax, progress bars, and reveal sequences without JavaScript. It works in Chrome, Edge, and Safari; provide a static fallback for Firefox where support is flag-only.

What is the View Transitions API used for?▼

The View Transitions API enables shared element morphing between UI states, such as a list item expanding into a detail page or a button morphing into a dialog. Same-document transitions work in all browsers; cross-document transitions are unsupported in Firefox.

Should I use WebGL or WebGPU for shader effects?▼

WebGL works in all browsers and suits shader effects, post-processing, and particle systems via libraries like Three.js or OGL. WebGPU is more powerful but only supported in Chrome and Edge, so always provide a WebGL2 fallback.

How do I render a table with 100k rows at 60fps?▼

Use virtual scrolling to render only visible rows instead of the full dataset. Simple cases need no library; complex ones can use TanStack Virtual. For massive chart datasets, use Canvas or WebGL rendering instead of SVG.

How do I handle prefers-reduced-motion with animations?▼

Always respect the prefers-reduced-motion media query by providing a beautiful static alternative to animated effects. This is an accessibility requirement, not an optional enhancement, and applies to every animation shipped.

When should I not use ambitious visual effects?▼

Avoid heavy effects when they cause jank on mid-range devices, when they mask weak design fundamentals, or when multiple competing effects create noise. Match the technique to context — a particle system suits a portfolio but not a settings page.

Related Skills

Explore More Design & Creative Skills→
bfree-trainerbfree-trainer
60

bolder

Amplify safe designs with bolder typography, color, and layout.

Official
Advanced
AndyMarigoldLabsAndyMarigoldLabs

gsap-animations

Create accessible, GPU-accelerated GSAP animations with ScrollTrigger for websites and WordPress themes.

Community
Intermediate
ntdev204ntdev204

frontend-design

Teach frontend design principles for UI components, color, typography, and layout.

Community
Intermediate
Tea-4-LifeTea-4-Life

overdrive

Implement high-performance UI transitions and effects using browser APIs.

Official
Advanced