REFERENCE
- Gallery page: https://magpui.com/en/i/home-robot-product-page-7e9be5
- First frame (image): https://dnioievkvxejjbxgwvko.supabase.co/storage/v1/object/public/media/home-robot-product-page-7e9be5/shot.jpg
- Clip (mp4): https://dnioievkvxejjbxgwvko.supabase.co/storage/v1/object/public/media/home-robot-product-page-7e9be5/clip.mp4
- Original post: https://oriel-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.
- Robot in rooms: Photorealistic cream-colored humanoid home robot with a dark visor, folding towels in a warm sunlit bedroom, soft natural light, calm domestic mood, 4:3. Variants: watering plants, loading a dishwasher, tidying toys into a basket
BUILD
A complete product launch page for a home humanoid robot that feels warm and domestic, not sci-fi. A dark hero with a serif headline ('Quietly capable.' with the second word in copper italic), glass spec cards over the photo, a cream stats band, then a 'day in four rooms' sequence where each room is a photo card with time stamp, task headline and a small glass UI panel showing the robot's path.
DESIGN SYSTEM
- Dark #17110D, cream #F4EEE6, copper #C08A5A, text on dark #EDE4D8.
- Headlines: light serif 64-80px, italic copper accents; body 15px sans, muted #B9AE9F.
- Glass cards: background #FFFFFF14, backdrop-filter blur(16px), 1px border #FFFFFF22, radius 14px; small labels 10px uppercase.
- Photo cards radius 18px; a pill tag top-left with time and room ('07:30 Living room').
- Buttons: white pill 'Reserve' with arrow, secondary ghost pill.
MOTION
- Hero: photo scales 1.05 to 1 on load, glass cards fade in and rise 16px, stagger 150ms.
- Stats band: numbers count up (165 cm, 32 kg, 4 h, <45 dB), 1200ms ease-out.
- Rooms: pinned sequence; each step crossfades the photo card (600ms) and slides the text block up 24px; the glass panel draws the robot's path line (stroke-dashoffset); a 4-segment progress bar under the card fills.
- Hover on buttons: background brightens, arrow moves 3px right, 200ms.
SECTIONS
1. Hero with nav (Home life, Engineering, Intelligence, Safety, Specs), headline, copy, two buttons, spec glass cards, a 4-tab feature strip at the bottom (Presence, Motion, Vision, Hands).
2. Cream band 'No rails, no rewiring, no special rooms.' + 4 stats.
3. 'Four rooms, one unhurried day.': pinned room sequence (living room, bedroom, kitchen, kids' room).
4. Engineering, safety, specs table, reserve CTA, footer.
IMPLEMENTATION
- GSAP ScrollTrigger for the pinned room sequence, CSS for the glass cards; keep backdrop-filter to a few elements for performance.
- 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 room sequence steps through four rooms with the matching task text.
- Glass cards stay readable over light and dark parts of the photos.
- Stats count up once, not every time they re-enter.