OrbitalIsland — Dynamic Island Navbar & Command Palette Mockup

# AI MOTION & UI DIRECTIVE: DYNAMIC ISLAND NAVIGATION CAPSULE WITH EXPANDING QUICK-SHORTCUT TRAY AND COMMAND PALETTE LAUNCHER **Target Stack & Tools**: React 19, Motion v12, Three.js, Tailwind CSS v4 **Aspect Ratio & Format**: {{format}} **Brand Color Palette**: #2563EB, #7C3AED, #0F172A, #FFFFFF **Typography**: Inter **Motion Pacing**: FAST (Pacing profile: Snappy, punchy 250-400ms micro-springs (mass: 0.8, stiffness: 220, damping: 18)) **Creativity & Dynamics**: BALANCED (Harmonious mix of polished micro-interactions with subtle 3D perspective) **Mandatory Inclusions**: - Capsule width and radius morph - staggered shortcut glyph reveal - magnetic hover halos - badge count-up - command palette dropdown with skeleton rows - procedural ribbon background parallax **Negative Directives / Exclusions**: - harsh saturated colors - low-contrast text - cheesy stock vectors - abrupt cuts ## PROMPT EXECUTION BODY Render a clean, text-free modern UI motion showcase of Dynamic Island navigation capsule with expanding quick-shortcut tray and command palette launcher in {{format}} viewport using #2563EB, #7C3AED, #0F172A, #FFFFFF palette and Inter typography. Animate with fast timing curves and balanced layout physics. Feature Capsule width and radius morph, staggered shortcut glyph reveal, magnetic hover halos, badge count-up, command palette dropdown with skeleton rows, procedural ribbon background parallax including a glass capsule that morphs its width and corner radius on hover, staggered shortcut glyph reveal, magnetic icon halos with rising tooltips, a tabular badge count-up, a command palette dropdown with skeleton result rows, and procedural ribbon background parallax behind the blurred surface. Strictly eliminate harsh saturated colors, low-contrast text, cheesy stock vectors, abrupt cuts. ## IMPLEMENTATION RULES FOR AI AGENT (Cursor / Claude / Windsurf) 1. Use semantic React 19 client components with standard Tailwind CSS v4 utility classes. 2. Keep all animations GPU-accelerated via transform / opacity only. 3. Ensure mobile responsiveness and dark mode contrast tokens. 4. Typography: Render with font-family "Inter" across headings and UI text. 5. Color System: Adhere strictly to the requested brand palette (#2563EB, #7C3AED, #0F172A, #FFFFFF) for primary, secondary, and highlight states. 6. Frame & Aspect Ratio: Ensure container presentation honors {{format}} viewport constraints. 7. Motion Physics (Fast): Use snappy springs (stiffness: 260, damping: 20, mass: 0.8; ~250-400ms duration) with crisp stagger children delays (0.04s).