1. 1

   Create the images

   Code cannot draw these well. Generate them with any image generator (hover the button to see a few), or with your agent's image tool if it has one, and save them in the project.

   Any image generator

   • ChatGPT Images
   • Codex
   • Grok Imagine
   • Nano Banana
   • Midjourney

REFERENCE
- Gallery page: https://magpui.com/en/i/photographer-portfolio-with-flying-prints-efd7d2
- First frame (image): https://dnioievkvxejjbxgwvko.supabase.co/storage/v1/object/public/media/photographer-portfolio-with-flying-prints-efd7d2/shot.jpg
- Clip (mp4): https://dnioievkvxejjbxgwvko.supabase.co/storage/v1/object/public/media/photographer-portfolio-with-flying-prints-efd7d2/clip.mp4
- Original post: https://northlight-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.
- Portrait prints: Editorial portrait photo of a woman with closed eyes and a large pale pink flower in front of her face, blue sky background, soft daylight, 4:5

BUILD
A complete photographer portfolio. The hero stacks large photo prints that fly in and rotate in 3D around a huge bold headline, then the page settles into a clean booking site: testimonial, a two-column gallery of shoots, a dark services grid, a bento of studio photos and an FAQ.

DESIGN SYSTEM
- Hero dark #111; rest of the page #EEECE8 with ink #141414.
- Headlines: heavy grotesk 64-120px, tight tracking -0.03em, line height 0.95.
- Gallery cards: photos radius 6px with caption row (title left, date right, 12px).
- Services on #121212 with cards #1C1C1C, radius 10px, small square thumbnails.
- Bento: mixed tiles radius 12px, one stat tile ('27%'), one chat-bubble tile with green bubbles #4CC764.

MOTION
- Hero: 4-6 photo prints start off-screen with random rotateX/rotateY (up to 35deg) and translateZ, and settle into a loose stack around the headline over 1400ms, stagger 120ms, cubic-bezier(0.16, 1, 0.3, 1); on scroll they drift apart with parallax.
- Big headlines mask-reveal line by line as they enter (clip-path inset from bottom, 800ms).
- Gallery images scale 1.04 on hover, 400ms.
- FAQ accordion: height auto animation 300ms, plus icon rotates 45deg.

SECTIONS
1. Hero: flying photo prints + 'HOLD STILL a moment' style headline, top bar with name and availability.
2. Testimonial with stars and a big quote.
3. 'subtle moments that make life': two-column shoot gallery.
4. Dark 'What I can offer' services grid.
5. Bento of studio, detail shots and chat reviews.
6. FAQ with contact card, footer.

IMPLEMENTATION
- CSS 3D transforms (perspective 1200px) + Motion (Framer Motion) for the print entrance; ScrollTrigger or Motion useScroll for the drift.
- Use native details/summary for the FAQ.
- 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 prints enter in 3D and land without overlapping the headline completely.
- The FAQ works with keyboard (Enter/Space toggles).
- Gallery is a responsive 2 to 1 column grid.