REFERENCE
- Gallery page: https://magpui.com/en/i/travel-collage-hero-with-ai-search-8c354b
- First frame (image): https://dnioievkvxejjbxgwvko.supabase.co/storage/v1/object/public/media/travel-collage-hero-with-ai-search-8c354b/shot.jpg
- Clip (mp4): https://dnioievkvxejjbxgwvko.supabase.co/storage/v1/object/public/media/travel-collage-hero-with-ai-search-8c354b/clip.mp4
- Original post: https://dribbble.com/shots/27815185-Booking-Website-Hotel-Reservation-Platform by Ronas IT | UI/UX Team
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.
- Polaroid travel photos: Set of 8 square travel photos for polaroid frames: a castle in alpine forest, green mountain valley at sunrise, misty lake with mountains, coastal cliffs with turquoise sea, night city tower, snowy peaks, cozy wine bar interior, old European street. Natural light, warm film look, no people, no text, 1:1.
- Collage props: Isolated objects for a travel collage, each on a transparent or plain background: a silver vintage film camera, a dusty pink leather passport with a blue boarding pass tucked in, a brass compass, top-down product photo, soft studio light, gentle drop shadow, 1:1.
BUILD
A booking hero where travel objects (rotated polaroid photos with captions, a vintage camera, a passport with a boarding pass, a compass) scatter around the page edges and frame a centered headline. Below it, a natural-language prompt field invites the user to describe the trip. Submitting swaps the hero for a "best matches" view with a row of destination photo cards. Calm, tactile, curated.
DESIGN SYSTEM
- Background #EAEAEA, frame radius 12px; top bar with 4 dropdown filters (location, type, price, guests) as small pills 32px tall, black Search button, menu icon.
- Headline centered: line 1 sans 44px #111, line 2 high-contrast serif italic 48px; body 12px #555 max-width 360px.
- Prompt field: borderless, 22px light text #9CA3AF, blinking 1px caret, round black mic button 28px below.
- Collage items: white polaroid frames 6px padding with 9px caption under the photo, rotation -18deg to 16deg, shadow 0 10px 24px rgba(0,0,0,0.15); they hug the left, top and right edges and overflow them.
- Result cards: 200x260px, photo with 8px white frame, caption 11px (place, price per night), 16px gap, horizontal row that overflows to the right.
MOTION
- Load: collage items fly in from outside the viewport to their spot, translate 120px + rotate 10deg extra, 700ms cubic-bezier(0.22, 1, 0.36, 1), 70ms stagger clockwise.
- Headline types in character by character (35ms per char) after the collage settles, the serif line fades up 12px over 400ms.
- Placeholder types itself at 30ms per char, caret blinks 1s steps(1).
- Submit: collage and headline fade/scale to 0.96 over 300ms; "Your best matches" title fades in; cards enter from translateY 24px, opacity 0, 500ms cubic-bezier(0.22, 1, 0.36, 1), 90ms stagger left to right; the last card is cut by the right edge to hint scroll.
SECTIONS
- Filter bar.
- Collage frame around the hero.
- Headline, body, prompt field, mic button.
- Results view: back arrow, small context chip at top center, title, subtitle, card row, refine field.
IMPLEMENTATION
- Framer Motion with AnimatePresence for the hero -> results swap; collage items absolutely positioned with percentage coords so the frame scales; the row is a horizontal scroll-snap container.
- Typing effect with a small hook; the real input is a textarea with aria-label, the typed placeholder is only visual.
- prefers-reduced-motion: items appear in place, no typing, instant view swap with fade.
- Lazy-load result photos with fixed aspect boxes to avoid layout shift.
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
- The collage never covers the headline or the prompt field at 1280px and 1440px.
- Pressing Enter in the field shows the results view with staggered cards.
- On mobile the collage reduces to 3 items in the top corners and the cards become a swipeable row.
