Spaces:
Running
Running
| i want to hook this up to the lyria model, and also, this isnt a modular synth. Here's a detailed UI prompt for Gemini 2.5 to generate your neumorphic modular synthesizer interface: UI Generation Prompt: Create a modern neumorphic modular synthesizer interface with these exact specifications: Color Palette & Base Design: Background: Light gray gradient (#e8e8e8 to #f5f5f5) Primary surface: #f0f0f0 to #e0e0e0 gradient Monochromatic grayscale only (no colors except dark green #00ff88 for displays) Soft, minimalist aesthetic with clean typography Neumorphic Design Rules: All elements use dual shadow system: Light shadow: -8px -8px 16px rgba(255,255,255,0.8) (top-left highlight) Dark shadow: 8px 8px 16px rgba(0,0,0,0.1) (bottom-right depth) Raised elements (knobs, buttons): outset shadows for protruding effect Recessed elements (displays, sliders): inset shadows for sunken effect Border radius: 16px for modules, 50% for circular controls, 8px for displays Subtle gradients on all surfaces (145deg angle preferred) Interactive hover states increase shadow intensity by 1.5x Active/pressed states use inset shadows to simulate depression Layout Structure: Main container: 1400px max-width, centered, 24px border radius Module grid: CSS Grid, auto-fit columns (280px minimum), 25px gaps 6 modules total: Oscillator, Filter, Envelope, LFO, Effects, Output Patch bay at bottom: 8-column grid of circular connection points Control Elements: Knobs: 50px diameter circles with thin indicator lines (2px width, 15px height) Sliders: 4px wide tracks, 80px tall, with 16px circular handles Buttons: 40px diameter circles with subtle press animations All controls have 8px spacing, centered alignment Labels: 9px uppercase text, #777 color, 0.5px letter spacing Interactive Behaviors: Knobs rotate 270° range (-135° to +135°) with mouse drag Sliders move vertically with percentage positioning Buttons toggle between raised/pressed neumorphic states Hover effects: 2px upward translation + enhanced shadows Smooth cubic-bezier transitions (0.4, 0, 0.2, 1) for all animations Display Elements: Dark LCD-style displays: #1a1a1a background, #00ff88 text color Monospace font family, 14px size, centered text Inset shadows for recessed screen appearance Waveform visualizers with animated green lines Typography: Headers: 11px uppercase, 500 weight, #888 color, 1px letter spacing Main title: 18px, 300 weight, 3px letter spacing Control labels: 9px uppercase, 400 weight, #777 color Font stack: 'SF Pro Display', -apple-system, BlinkMacSystemFont, sans-serif Responsive Design: Mobile breakpoint at 768px Single column layout on mobile Maintain neumorphic shadows at all screen sizes Touch-friendly control sizing (minimum 44px touch targets) Animation Details: Staggered module appearance: 100ms delays, 0.6s duration Knob rotation: 0.3s ease-out transitions Hover states: 0.2s ease transitions Active button pulsing: 2s infinite opacity animation (0.3 to 1.0) Generate clean, semantic HTML with embedded CSS and JavaScript for full interactivity. Ensure pixel-perfect neumorphic shadows and professional modular synthesizer aesthetic. |