REFERENCE
- Gallery page: https://magpui.com/en/i/art-shop-with-a-cascade-of-canvases-8ee9d4
- First frame (image): https://dnioievkvxejjbxgwvko.supabase.co/storage/v1/object/public/media/art-shop-with-a-cascade-of-canvases-8ee9d4/shot.jpg
- Clip (mp4): https://dnioievkvxejjbxgwvko.supabase.co/storage/v1/object/public/media/art-shop-with-a-cascade-of-canvases-8ee9d4/clip.mp4
- Original post: https://picasso-ecommerce-template.modulify.website by Modulify
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.
- Paintings: Impressionist oil painting of a sunny Italian garden with cypress trees and a small classical temple, thick brush strokes, turquoise and olive greens, 3:4. Make variants: coastal village, garden path, villa with arches
- Living room: Interior photo of a calm living room with a grey boucle sofa, dark wooden slat wall, small side table with a vase, plenty of empty wall space on the right, soft daylight, 16:9
BUILD
A complete online art print shop. The hero fans out a hand of painted canvases like playing cards under an elegant serif headline; scrolling moves into a styled living room where canvases slide in and stack in a cascade along the wall while collector testimonials fade in on the right; then the collection grid and a footer.
DESIGN SYSTEM
- Background #F3F0EA, ink #1E1B17, accent brown #7A4B2A for the primary button.
- Headline: classic serif 48px with an italic second line ('deserves a gallery.').
- Canvases: radius 10px, soft shadow 0 20px 40px rgba(0,0,0,.18), thin white edge.
- Buttons: pill, primary brown with white text, secondary outline.
- Testimonials: avatar 32px, name in serif 14px, role 10px uppercase, quote 18px serif right-aligned.
MOTION
- Hero fan: 5-7 canvases start stacked in the center and rotate out to -30..30deg around a bottom pivot, 1100ms, stagger 70ms, cubic-bezier(0.22, 1, 0.36, 1); hover lifts a card 16px.
- Room: pinned section; canvases fly in from the right one by one (translateX 60vw to 0, rotate 8deg to 0) and stack diagonally; each new testimonial blurs in (filter blur 8px to 0, 600ms).
- Collection cards fade up 24px on enter.
SECTIONS
1. Hero: logo, cart icon, headline, canvas fan, two buttons, small trust line (rating, pieces sold, free shipping).
2. Pinned living room wall with cascading canvases and testimonials.
3. Collection grid with filters and prices.
4. Commission a piece CTA, footer with explore and contact columns.
IMPLEMENTATION
- GSAP ScrollTrigger for the pinned room cascade; CSS transforms for the fan (transform-origin bottom center).
- The room is one background photo; canvases are separate images layered on top.
- prefers-reduced-motion: show every section in its final state, no scroll-driven movement.
- Visible focus rings on every link and button; all nav reachable by keyboard.
- Lazy-load images below the fold, animate only transform and opacity.
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 or the generated images listed separately.
SUCCESS CHECK
- The hero fan opens on load and each card lifts on hover.
- Scrolling the room adds canvases one by one and shows a testimonial with each.
- Product cards link to a product page and have alt text.