REFERENCE
- Gallery page: https://magpui.com/en/i/flower-with-flowing-color-bands-5f0dfd
- First frame (image): https://dnioievkvxejjbxgwvko.supabase.co/storage/v1/object/public/media/flower-with-flowing-color-bands-5f0dfd/shot.jpg
- Clip (mp4): https://dnioievkvxejjbxgwvko.supabase.co/storage/v1/object/public/media/flower-with-flowing-color-bands-5f0dfd/clip.mp4
- Original post: https://x.com/visualatelier8/status/2113989522723893561 by @visualatelier8
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: Build a looping 3D flower study inside a single responsive canvas. Show one floating flower with a circular ring of plump petals, a recessed center and a long gently curved stem. The expressive feature is the coordinated deformation and color flow, not a surrounding website.
DESIGN SYSTEM: Use a portrait 4:5 stage, pale blue-gray background approximately #D7DFED, no typography or controls over the artwork. Center the head in the upper third; its diameter is about 65% of canvas width. Use roughly 14 rounded radial lobes around a dark center. A narrow stem extends down about half the canvas height. Blend cobalt #414FE8, deep navy #151D62, hot pink #F23C80, pale pink #F3A2BB, lime #7DBD40 and cream #DDE5B8. Soft diffuse lighting should reveal smooth bulbous volumes without outlines.
MOTION: On mount start a continuous loop; suggested rebuild timing is 6000 ms. Sweep broad blue, pink and green bands along the stem and across the petal ring using a periodic shader phase, linear cubic-bezier(0,0,1,1). Gently bend the stem from side to side and tilt the head over the same 6000 ms cycle with sinusoidal displacement. Expand and compress the rounded petal lobes by about 10% with a radial phase offset of 60 ms per petal; use cubic-bezier(0.45,0,0.55,1). Keep the center and stem joined while the head shifts between a shallow bowl and a flatter scalloped disk. Avoid crossfading between separate flower models.
SECTIONS: One canvas containing background, curved stem, rounded petal ring and recessed center. States are animated and paused; no invented navigation or content.
IMPLEMENTATION: Use Three.js with a procedurally generated radial surface for petals and a curve-based tube for the stem. A shared object-space gradient shader coordinates color bands across both meshes. Use morph targets or low-amplitude vertex displacement for the flower head. Keep geometry under 60k vertices, cap device pixel ratio at 1.5, pause rendering offscreen, and dispose resources on unmount. With prefers-reduced-motion render a pleasing static pink-and-green frame. If a pause control is added, place it outside the art, use a native button with visible focus, and support Space and Enter. Give the canvas an accessible text description.
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 and original procedural geometry.
SUCCESS CHECK:
- The petals read as a continuous rounded radial flower, with a visible center and connected curved stem.
- Color waves cross the head and stem coherently and the loop has no visible seam.
- Reduced motion produces a static composition and animation stops when the canvas is offscreen.
