Figma File Setup

1. Frames
   • 1920x1080 Desktop + 375x812 Mobile
   • Dark theme (#0F172A background)
2. Components LibraryfigmaCopyComponents/ ├─ Quantum Orb (Auto-layout + Variants: Pulse/Static) ├─ Spiral Nav Item (Vector paths with gradient strokes) ├─ Paradox Slider (Custom Thumb + Animated Track) └─ Consciousness Helix (3D mockup placeholder)
3. Auto-Animate Prototypes
   • DNA Scanner: Drag mood board → helix unwinds → frequency orb pulses
   • Paradox Slider: Sliding triggers generative art previews

---

Handoff Specifications

1. Quantum OrbfigmaCopy#Properties – Size: 120×120 – Fill: Radial Gradient (#8B5CF6 → #EC4899) – Effects: Inner Shadow (Blur 20, #FFF 15%) #Variants – Default: Opacity 100% – Hover: Scale 110% + Opacity 80% – Loading: Rotate 360° (Duration 2s, Ease-in-out)
2. Spiral Navigation
   
   • Path: Bézier curve with stroke-dasharray for “quantum uncertainty” effect
   • Prototype: Hover triggers child menu items to spiral out

---

Collaboration

1. Enable Figma Dev Mode for CSS/Tailwind handoff:cssCopy/* Example: Paradox Slider */ .paradox-slider { background: linear-gradient( 90deg, rgba(59, 130, 246, 0.5), rgba(139, 92, 246, 0.7), rgba(236, 72, 153, 0.9) ); backdrop-filter: blur(8px); }
2. Version Control: Use Figma’s branching for:
   • main (Stable)
   • quantum-experiments (WIP animations)

---

Export Assets

1. Lottie JSONs for micro-interactions:
   • Orb pulse
   • Helix DNA scan
2. SVG Code for spiral paths:svgCopy<path d=”M12 1c-6.627 0-12 5.373-12 12s5.373 12 12 12 12-5.373 12-12-5.373-12-12-12zm0 22c-5.514 0-10-4.486-10-10s4.486-10 10-10 10 4.486 10 10-4.486 10-10 10z” fill=”none” stroke=”url(#spiralGradient)” stroke-width=”2″/>Run HTML