Fluid Mobius Copy this Tailwind Component 0to Your Project

Hero Section Animation Design Prompt Mobius Stream Particles (Slow, Intelligent Flow) For: Lovable / Vercel Prepared by: [Your Name] Target: Replicable, production ready animation for homepage hero 🔁 Primary Visual Concept Mobius Strip Particle Stream A true Mobius strip: A single surface, twisted loop. Particles are not floating in space randomly — they move precisely along the surface of the Mobius in a continuous, directional stream. No full rotation of the strip object itself — only the particles should be in motion. Imagine a current of intelligent light flowing on a 3D ribbon. 🌌 Particle Behavior 1. Core Motion Particles flow along the curvature of the Mobius strip in a slow, smooth, continuous path — mimicking fluid dynamics, not chaotic physics. Movement should appear organic, stream like, and infinite. Think: “electromagnetic current running over a magnetic ribbon in space”. 2. Particle Quantity & Density Avoid the high density blob effect seen on some homepages. Use moderate to low density particles (see second reference image you provided: smooth filament style visuals). Space them out just enough to read the motion, without overcrowding. 3. Speed & Fluidity Animate particles at ultra low velocity. Reference video: mimic the barely perceptible particle glide — no twitching, flickering, or looping jitters. Each particle follows the Mobius stream but should have slight randomized offset delays to avoid robotic uniformity. 🖱️ Cursor Interaction (Tactile + Subtle) 1. Scatter on Touch Effect Particles should scatter gently outward only when the cursor is in direct proximity (hover or collision zone). The effect should feel responsive but fluid — think: like running your hand through steam. Use radial easing on repulsion and smooth elastic return back into the Mobius stream once cursor leaves. 2. Rest State Behavior When the cursor is idle or off screen: Particles should slowly drift inward toward the center of the screen or the strip — like a magnetic draw to a gravity point. Important: This movement should remain extremely soft — no hard snap to center. 💡 Styling & Color Palette 1. Background Hex: #0F0F1A (Deep Charcoal Navy) Optional: Very light radial gradient centered behind Mobius to give atmospheric depth. Opacity: 5–8%. 2. Particle Colors (Gradient Stream) Use soft neon to electric gradients: Start: #FFD580 (Soft Orange) Mid: #C653FF (Magenta) → #7B61FF (Purple) End: #00F0FF (Electric Cyan) Each particle thread may follow one of the 3 color bands OR morph as it travels. 3. Particle Rendering Style Thin, light thread or neuron fiber look. Use Bloom Glow / Additive Blending for soft luminance. No hard lines. No stroke outlines. Just radiance with light blur and feathered edges. 🧭 Mobius Geometry & Technical Mobius Strip to be generated with true topology (can use Three.js / GLSL or Blender output). Path following animation should use spline tangents along the Mobius surface. Ensure the Mobius twist is visible — add a very slow rotation (~0.01–0.02 deg/s) on Z axis only if necessary for depth perception. ✨ Additional Motion Elements (Optional Layers) Micro background particles: Drifting stars or fine ambient particles at 2–3% opacity — to give depth. Soft noise shimmer: Slight noise over Mobius surface for texture (very subtle). Fresnel lighting / light falloff on particles at screen edge (vignette effect). 🔧 Export & Delivery Specs Property Spec Format WebM (transparent) / Lottie Frame Rate 30fps Resolution 1920x1080 (min) / Retina ready Performance Optimized for Chrome & Safari Duration Seamless Loop (10–15s cycle) Size Target < 5MB ideally (lightweight vector motion preferred) 🧭 Reference Summary Particle Motion Style: Based on video provided — graceful stream, non chaotic, with spatial intelligence. Visual Inspiration: Second image provided — neuron strand particle system. Density Preference: Mid low — not overloaded like first image. Interaction Feel: Like slow motion magnetic fog responding to gentle touch.