skills.rest
l0lxl0lw
l0lxl0lwCOMMUNITY
Explore all skills by this author →
GitHub

overdrive

Implements technically ambitious interface effects using WebGL, View Transitions, and scroll-driven animations.

Updated Dec 18, 2025
Search Tags:#performance#frontend#animations#webgl#ui effects#view transitions#scroll-driven
One-click install
npx skills add https://github.com/l0lxl0lw/dotfiles --skill overdrive-l0lxl0lw
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: overdrive
Source: https://github.com/l0lxl0lw/dotfiles/tree/main/ai/shared/skills/impeccable/overdrive
Command: npx skills add https://github.com/l0lxl0lw/dotfiles --skill overdrive-l0lxl0lw

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Standard web interfaces often feel generic and flat, and developers struggle to push beyond conventional CSS transitions without causing jank, breaking accessibility, or building effects that don't fit the product's context. ## Core Features & Use Cases - Context-Aware Ambition: Assesses what "extraordinary" means for the specific interface — sensory effects for marketing pages, fluid interactions for functional UI, invisible performance wins for data-heavy tools. - Technique Toolkit: Covers View Transitions, scroll-driven animations, WebGL/WebGPU, virtual scrolling, spring physics, Web Workers, OffscreenCanvas, and WASM, organized by the experience goal rather than technology name. - Disciplined Implementation: Enforces progressive enhancement with @supports and feature detection, 60fps performance targets, and mandatory prefers-reduced-motion support. - Use Case: A developer wants a data table that renders 100k rows at 60fps with a dialog that morphs from its trigger button — the skill proposes 2-3 directions, gets user confirmation, then iterates with browser automation until the result feels polished. ## Quick Start Ask the AI to use the overdrive skill to push a specific feature, such as the dashboard's data table or the hero section, past conventional limits with a technically ambitious implementation.

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 `animation-timeline: scroll()` property to tie animations directly to scroll position without JavaScript. It works in Chrome, Edge, and Safari; Firefox requires a flag, so always provide a static fallback wrapped in an `@supports` query.

How do I animate a dialog morphing from its trigger button?▼

Use the View Transitions API for shared element morphing between states, which is the closest thing to native FLIP animations on the web. Same-document transitions work in all browsers; cross-document transitions are not supported in Firefox.

WebGL vs WebGPU for browser shader effects — which should I use?▼

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 fall back to WebGL2 when WebGPU is unavailable.

How do I render a table with 100k rows without lag?▼

Use virtual scrolling to render only visible rows, which keeps large tables at 60fps. Simple cases need no library; complex ones can use TanStack Virtual, and heavy computation can move to Web Workers to keep the main thread free.

Why should web animations respect prefers-reduced-motion?▼

Respecting `prefers-reduced-motion` is an accessibility requirement, not a suggestion, because motion effects can cause discomfort for users with vestibular disorders. Always provide a beautiful static alternative when the user has enabled reduced motion.

When should I not add advanced visual effects to an interface?▼

Avoid ambitious effects when they mask weak design fundamentals, when they cause jank on mid-range devices, or when multiple competing effects create noise instead of focus. Context matters — a particle system suits a creative portfolio but embarrasses a settings page.

Related Skills

Explore More Design & Creative Skills→
Moliboy5000Moliboy5000

delight

Add micro-interactions, animations, and copy to enhance user interfaces.

Community
Intermediate
alex-jordan547alex-jordan547

animate

Build, review, and audit web animations using CSS transitions, springs, and gesture patterns.

Community
Intermediate
tuyenhttuyenht

frontend-design

Guide frontend UI/UX design using psychological principles and systematic decision-making.

Community
Advanced
dancycodesdancycodes

tailwindcss-development

Apply Tailwind CSS v4 utilities to style responsive web interfaces.

Community
Intermediate