overdrive

Combine shaders, spring physics, and scroll reveals for WebGL-powered UI transitions at 60fps.

Updated Mar 15, 2026
One-click install
npx skills add https://github.com/lachieh/babytalk --skill overdrive-lachieh
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: overdrive
Source: https://github.com/lachieh/babytalk/tree/main/.claude/skills/overdrive
Command: npx skills add https://github.com/lachieh/babytalk --skill overdrive-lachieh

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Pushes interfaces past conventional limits with technically ambitious implementations — shaders, spring physics, scroll-driven reveals, 60fps animations. Use when the user wants to wow, impress, go all-out, or make something that feels extraordinary.

Core Features & Use Cases

  • Shader-based visuals and physics-driven motion to create high-sense-of-action UI experiences.
  • Scroll-driven reveals and cinematic transitions suitable for marketing pages, dashboards, and product showcases.
  • Real-world use: transform a hero section into a morphing, 60fps detail view from its trigger.

Quick Start

Prototype a cinematic, 60fps transition for a hero section that morphs from the triggering element.

Frequently Asked Questions about overdrive

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

FAQPage Schema
How do I create 60fps UI animations with shader effects and spring physics?

You can create 60fps UI animations by combining GPU-accelerated WebGL shaders with spring physics. This approach pushes interfaces past conventional limits to deliver extraordinary, high-sense-of-action user experiences without dropping frames.

What are scroll-driven reveals and cinematic transitions for web pages?

Scroll-driven reveals and cinematic transitions are physics-based motion effects triggered by user scrolling. They morph marketing pages, product showcases, and dashboards into high-sense-of-action UI experiences running at 60fps.

Does WebGL shader UI animation work on all browsers and devices?

WebGL shader UI animation requires browser GPU-accelerated rendering via WebGL or WebGL2. Implementations require careful performance considerations and graceful fallbacks for environments lacking full GPU acceleration support.

How do I build a morphing hero section transition from a trigger element?

Build a morphing hero section transition by applying physics-based motion and shaders to the triggering element. This creates a cinematic, 60fps detail view that pushes the interface past conventional limits for a dramatic user experience.

When should I avoid using shader effects and physics-based motion in UI?

Avoid shader effects and physics-based motion in UI when targeting devices without GPU-accelerated rendering or when performance budgets cannot sustain 60fps. Graceful fallbacks are required to ensure functionality on unsupported hardware.