vibe-physics-enginelisted
Install: claude install-skill omid-io/vibe-ui-skills
# ⚡ Vibe Motion & Compositing Engine
## 🎯 Purpose
The `vibe-physics-engine` powers bespoke, high-framerate visual and interactive experiences. It mandates mathematical motion curves, GPU-accelerated layer compositing, refresh-rate-aware interpolation, OKLCH perceptual color science, and strict anti-template aesthetics.
---
## 🎨 1. Perceptual OKLCH Token Systems (Multi-Chemistry)
Avoid hardcoding a single dark theme. Adapt OKLCH tokens to the target visual chemistry:
### A. Luxury Obsidian (Dark Velvet)
- **Canvas Base:** `oklch(0.12 0.012 260)`
- **Glass Surface:** `oklch(0.16 0.015 260 / 0.65)` with `backdrop-filter: blur(24px) saturate(180%)`
- **Fresnel Inset Border:** `inset 0 1px 1px 0 rgba(255, 255, 255, 0.16)`
- **Primary Accent:** `oklch(0.72 0.145 85)` (Champagne Gold)
### B. Minimalist Technical SaaS (Pitch Linear)
- **Canvas Base:** `oklch(0.14 0.005 260)`
- **Surface:** `oklch(0.18 0.008 260)` with crisp 1px borders `oklch(0.24 0.01 260)`
- **Primary Accent:** `oklch(0.92 0.01 260)` (High-contrast pure white) or `oklch(0.65 0.22 265)` (Electric Indigo)
### C. Clean Architectural Light (Stripe / Apple)
- **Canvas Base:** `oklch(0.985 0.002 90)`
- **Surface:** `oklch(1.0 0 0)` with diffuse multi-layer drop shadow
- **Primary Accent:** `oklch(0.55 0.22 260)` (Deep Sapphire)
---
## 🕹️ 2. Smooth Scrolling: Native Zero-Dep & Progressive Lenis
### Option A: 100% Zero-Dependency Native Smooth Scroll (Default)
No external npm dependencies required:
```css
html