REFERENCE
- Gallery page: https://magpui.com/en/i/playful-hero-with-swapping-floating-cards-952d3c
- First frame (image): https://dnioievkvxejjbxgwvko.supabase.co/storage/v1/object/public/media/playful-hero-with-swapping-floating-cards-952d3c/shot.jpg
- Clip (mp4): https://dnioievkvxejjbxgwvko.supabase.co/storage/v1/object/public/media/playful-hero-with-swapping-floating-cards-952d3c/clip.mp4
- Original post: https://dribbble.com/shots/27833392-Flowdesk by Deividas Bielskis
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 SaaS landing hero where, instead of a product screenshot, a loose cluster of small product UI cards floats to the right of the copy: a mini calendar, a "task done" toast, a time-off progress card, a payment reminder, a monthly income stat. Every few seconds some cards pop out and others pop in, so the cluster keeps telling small stories. Decorative squiggles, dots and confetti shapes wiggle around them. Friendly and light.
DESIGN SYSTEM
- Background #FFFFFF, max-width 1200px, copy in the left 45%.
- Headline sans 40px/1.15 #111, three short lines; body 14px #555; two outlined buttons 36px tall, radius 999px, 1px #111 border; small announcement pill above the headline with a mint #BFF0D4 "New" tag.
- Cards: white, 1.5px #1A1A1A border, radius 10px, hard offset shadow 3px 3px 0 #1A1A1A; accents lavender #C9B8FF, mint #9EE6C1, pink #FFB3D9, yellow #FFE08A.
- Decorations: lavender dotted circle, pink blurred disc, purple squiggle 4px stroke, mint swoosh, small 4-point stars, coin icons.
MOTION
- Intro: logo scales 0.9 -> 1 and fades out (600ms), then the page fades in.
- Card pop-in: scale 0.6 -> 1, opacity 0 -> 1, rotate -6deg -> 0, 450ms cubic-bezier(0.34, 1.56, 0.64, 1); pop-out: scale 1 -> 0.8, opacity 0, 250ms ease-in.
- Every 3000ms swap 1-2 cards in the cluster, 150ms stagger between them.
- Idle float on each card: translateY ±4px, 2800-3600ms ease-in-out, random phase.
- Decorations: squiggles wiggle (rotate ±8deg, 1800ms ease-in-out alternate), stars twinkle (scale 0.8 -> 1.1, 1400ms).
- The calendar card highlights a new day with a lavender circle that scales in 250ms.
SECTIONS
- Nav: logo + Beta tag, 3 links with dropdown chevron, two pill buttons.
- Copy: announcement pill, headline, body, two buttons, small note under them.
- Card cluster with decorations on the right.
- Peek of the next section at the bottom (browser-window card).
IMPLEMENTATION
- Framer Motion with AnimatePresence for the swapping cards; a fixed array of slots (absolute positions) and a timer that rotates which card sits in each slot.
- Decorations are inline SVG animated with CSS keyframes.
- prefers-reduced-motion: show one static arrangement, no swaps, no float.
- Pause the timer when the tab is hidden or the hero is off screen; cards are aria-hidden decorations, the real content is the copy.
ADAPT TO THE PROJECT
- Reuse the project's existing design tokens, components and fonts; map the colors to the closest existing tokens.
- Never copy logos, brand names, photos or illustrations from the reference. Use neutral placeholders.
SUCCESS CHECK
- Cards swap every ~3s without overlapping each other or the copy.
- The hard shadow and outline stay crisp at 1x and 2x.
- On mobile the cluster moves below the copy and shows at most 3 cards.
