REFERENCE
- Gallery page: https://magpui.com/en/i/swaying-poppy-garden-gift-card-8fcc43
- First frame (image): https://dnioievkvxejjbxgwvko.supabase.co/storage/v1/object/public/media/swaying-poppy-garden-gift-card-8fcc43/shot.jpg
- Clip (mp4): https://dnioievkvxejjbxgwvko.supabase.co/storage/v1/object/public/media/swaying-poppy-garden-gift-card-8fcc43/clip.mp4
- Original post: https://x.com/marina_uiux/status/2115447175400276149 by @marina_uiux
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.
ASSETS
This needs real artwork, not shapes drawn in code. Use the files the user gives you (ask where they are). If you have an image generation tool, generate them with these prompts; otherwise leave clearly marked placeholders.
- poppy and stem cut-outs: Set of 8 isolated studio photos of single poppy flowers on long green stems (red, coral, yellow, pink) and 3 dried brown seed stems, sharp detail, soft even daylight, each on a transparent background, tall portrait 1:4 aspect ratio
- butterfly sprites: Two small butterflies, one pink-red and one yellow-orange, realistic photographic style, wings open, top-down view, soft light, transparent background, square 1:1
BUILD
An interactive gift-card page for a flower shop. The first screen is a bright off-white stage with a huge condensed serif headline 'Gift Card' and, in front of it, a line of tall 3D poppies and dried stems of different heights that sway gently and bend away from the cursor, while two small butterflies flutter between them. A tiny theme toggle in the nav flips the stage to black. Clicking the 'Buy' pill shrinks the whole garden scene into a rounded card that tilts in 3D, flips around, and lands as a gift card face ('$300 GIFT', one red poppy, a short message and the recipient's name) floating over a giant two-line serif wordmark of the shop name. Poetic, tactile, editorial.
DESIGN SYSTEM
- Background #F2F1EE (dark mode #0B0B0B); text #111111 (dark mode #F2F1EE).
- Type: tall condensed high-contrast serif for the headline (about 16vw, line-height 0.85, tracking -0.02em) and the wordmark (two lines, about 22vw, behind the card); small neutral sans 11-12px for nav and captions.
- Flowers: poppies in red #D7261E, coral #F0704A, yellow #F6B92B, pink #EE6FA0 with dark centers and green stems #5E8A3A; a few brown dried seed stems for rhythm. Flowers overlap the headline (some in front, some behind).
- Gift card: 340x220px, radius 18px, fill #FAF9F7, shadow 0 30px 60px rgba(0,0,0,.18); '$300' in the serif 44px #111, 'GIFT' below in a muted gold #B8A47A, message 12px sans, recipient name 12px.
- Nav: shop name left, theme toggle icon plus three small text links (contact, buy, edit) right. CTA: small black pill 28px tall bottom-center.
MOTION
- Idle sway: each stem rotates around its base with a sine (amplitude 2-4deg, period 2.6-4s, random phase).
- Cursor push: stems within 180px of the pointer bend away up to 12deg with a spring (stiffness 120, damping 14) and recover when it leaves.
- Butterflies: two sprites following slow curl-noise paths, wings flapping by scaling X 1 to 0.2 every 140ms.
- Theme toggle: background and text colors crossfade 400ms cubic-bezier(.4,0,.2,1).
- Buy: the stage scales to a 340x220 card in 700ms cubic-bezier(.65,0,.35,1) while the wordmark fades in behind (opacity 0 to 1, scale 1.05 to 1); the card then rotates Y 0 to 180deg over 600ms with a slight X tilt of 8deg and lands with a small overshoot (cubic-bezier(.34,1.56,.64,1)); the back face shows the gift details. Card follows the pointer with a ±6deg tilt afterwards.
SECTIONS
- Stage: nav, headline, flower row, butterflies, Buy pill.
- Transition: scene collapses into the card.
- Gift view: wordmark behind, flipped gift card with amount, message and name, Buy button below.
- States: light, dark, hover on flowers, card flipped.
IMPLEMENTATION
- Three.js (or React Three Fiber) with cut-out flower textures on bending planes (vertex shader rotation from the base) is the lightest path; real low-poly 3D flower models work too. Butterflies as small animated sprites. Use CSS 3D transforms for the card flip so the text stays crisp, and GSAP or Motion for the transition timeline.
- prefers-reduced-motion: no sway or butterflies, static flowers; the Buy transition becomes a simple crossfade to the card.
- Keyboard: Buy and theme toggle are real buttons with focus rings; the card can be flipped with Enter.
- Pause rendering when the tab is hidden; cap devicePixelRatio at 2.
ADAPT TO THE PROJECT
Reuse the project's existing tokens, fonts and buttons, mapping colors to the closest tokens. Never copy the original shop name, logo or photos; use a placeholder shop name and generated or placeholder flower artwork.
SUCCESS CHECK
- Flowers sway at rest and bend away from the cursor, then settle back.
- Buy collapses the scene into the card and flips it to the gift face smoothly, with no flicker of the back face.
- Dark mode and reduced motion both work and keep text readable.
