← ClaudeAtlas

vibe-physics-enginelisted

Physics-based UI motion, anti-template visual architecture, Lenis momentum scrolling, GPU-accelerated glassmorphism, OKLCH perceptual tokens, and custom SVG vector styling without Unicode emojis.
omid-io/vibe-ui-skills · ★ 0 · Web & Frontend · score 73
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