REFERENCE
- Gallery page: https://magpui.com/en/i/fluid-color-orb-6081fc
- First frame (image): https://dnioievkvxejjbxgwvko.supabase.co/storage/v1/object/public/media/fluid-color-orb-6081fc/shot.jpg
- Clip (mp4): https://dnioievkvxejjbxgwvko.supabase.co/storage/v1/object/public/media/fluid-color-orb-6081fc/clip.mp4
- Original post: https://www.rareui.com/components/fluidorb by Rare UI
Before building, download the first frame and look at it. If ffmpeg is available, download the clip and extract frames (ffmpeg -i clip.mp4 -vf fps=2 frame-%02d.png), then study the motion frame by frame. Match what you see; the text below describes it, the frames are the truth.
BUILD
A round orb on a dark background filled with soft, cloudy liquid that moves slowly like smoke. A small row of color swatches below changes the orb's color: the new color swirls in from the bottom and mixes with the old one.
DESIGN SYSTEM
- Background #111; orb 180px with a white highlight top-left and a subtle inner shadow.
- Swatch bar: dark pill #1D1D1D, 4 swatches 14px (blue #3B82F6, red #EF4444, orange #F97316, green #22C55E), active one with a 2px white ring.
MOTION
- Idle: noise-driven clouds drift inside (2-3 octaves, speed 0.1).
- Color change: a mix value goes 0 to 1 over 900ms cubic-bezier(0.65, 0, 0.35, 1), entering from the bottom with turbulence.
- Swatch hover scale 1.15.
SECTIONS
- Orb, swatch bar.
- States: idle, transitioning, swatch hover/focus.
IMPLEMENTATION
- WebGL fragment shader on a circle (OGL or a raw canvas) with fbm noise; fall back to a CSS radial gradient + blur if WebGL is missing.
- prefers-reduced-motion: swap the motion for a 150ms opacity change.
- Keyboard: every control focusable with a visible focus ring; same actions with Enter/Space and arrow keys where it makes sense.
- Animate only transform, opacity and filter.
ADAPT TO THE PROJECT
Reuse the project's existing design tokens, components and fonts; map colors to the closest existing tokens. Never copy logos, brand names, photos or illustrations from the original: use placeholders.
SUCCESS CHECK
- The orb keeps moving slowly when idle.
- Picking a swatch blends to the new color in under a second.
- Swatches are buttons with names.
