REFERENCE
- Gallery page: https://magpui.com/en/i/bee-slider-that-grows-a-garden-391546
- First frame (image): https://dnioievkvxejjbxgwvko.supabase.co/storage/v1/object/public/media/bee-slider-that-grows-a-garden-391546/shot.jpg
- Clip (mp4): https://dnioievkvxejjbxgwvko.supabase.co/storage/v1/object/public/media/bee-slider-that-grows-a-garden-391546/clip.mp4
- Original post: https://x.com/aleksksaa/status/2111107877473603928 by @aleksksaa
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 range slider on a dark card where the handle is a small bee. As the value grows, pastel flowers sprout along the filled part of the track, each one popping up with a springy bloom; dragging back makes them wilt and drop petals.
DESIGN SYSTEM
- Card #111 with label left (Garden, 13px grey) and percentage right.
- Track is a 1px #333 line; flowers 10-24px tall, pastel pink #F6B3C8, lavender #C7B6F5, yellow #F7E08A, stems #6FAF6A.
- Bee handle 18px with tiny flapping wings.
MOTION
- Each 4% of value spawns one flower at that x: stem scaleY 0 to 1 (180ms ease-out), then head scale 0 to 1 with spring (stiffness 420, damping 14), random height and color.
- Wings flap with rotate ±25deg every 80ms while dragging, idle bob translateY ±2px over 1.2s.
- Releasing or dragging back: removed flowers shed 3-5 petals that fall with gravity and drift, fading over 900ms.
SECTIONS
- Label row.
- Track with flower layer.
- Bee handle (role slider with aria-valuenow).
IMPLEMENTATION
- Native input range for keyboard and screen readers, visually hidden, with the custom track drawn on top; flowers as absolutely positioned SVGs keyed by step.
- Framer Motion AnimatePresence for bloom and wilt.
- prefers-reduced-motion: skip the animation and show the end state.
ADAPT TO THE PROJECT
- Reuse the project's existing tokens, components and fonts; map colors to the closest existing tokens.
- Do not copy logos, brand names, characters or artwork from the reference. Use neutral placeholders.
SUCCESS CHECK
- Arrow keys change the value and grow flowers too.
- Flowers stay put while the bee moves past them.
- No layout shift when flowers appear.
