REFERENCE
- Gallery page: https://magpui.com/en/i/dark-ai-tool-panels-with-folk-art-backdrops-8a3d9b
- First frame (image): https://dnioievkvxejjbxgwvko.supabase.co/storage/v1/object/public/media/dark-ai-tool-panels-with-folk-art-backdrops-8a3d9b/shot.jpg
- Original post: https://x.com/xchylerdrenth/status/2109315531627184234 by @xchylerdrenth
Before building, download the image and look at it. 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.
- Folk-art backdrops: Bold flat folk art pattern of stylized flowers, leaves and birds in red, mustard and deep green on cream, hand-painted feel, dense composition, seamless, 16:9, no text. Make four variations with different dominant colors.
BUILD
A set of marketing visuals where dark product panels (agent task list, share modal, team space, custom instructions) float over bold folk-art illustration backgrounds.
DESIGN SYSTEM
- Panels #141414, 16px radius, 1px #2A2A2A border, text #F2F2F2 14px, secondary #8C8C8C.
- Backgrounds: flat folk-art patterns (flowers, birds) in red #D7392B, mustard #E3A72F, green #2F7D4F on cream.
- Panel shadow 0 24px 48px rgba(0,0,0,.35).
MOTION
- Panels rise 16px and fade in over 500ms, cubic-bezier(0.16, 1, 0.3, 1), 80ms stagger.
- Background drifts 10px on pointer move for depth.
SECTIONS
- Four compositions, each one panel over one backdrop.
IMPLEMENTATION
- Build panels as real components with sample data; backgrounds as SVG or images.
- 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
- Panel text stays readable over every backdrop.
- Panels look like real product UI, not screenshots.
- Exportable at 2x for social posts.
