REFERENCE
- Gallery page: https://magpui.com/en/i/fine-dining-site-in-candlelight-525d26
- First frame (image): https://dnioievkvxejjbxgwvko.supabase.co/storage/v1/object/public/media/fine-dining-site-in-candlelight-525d26/shot.jpg
- Clip (mp4): https://dnioievkvxejjbxgwvko.supabase.co/storage/v1/object/public/media/fine-dining-site-in-candlelight-525d26/clip.mp4
- Original post: https://l-elite-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.
- Plate photos: Dark moody food photography of a single plated dish (charcoal-lacquered lamb rack) on a black ceramic plate, wooden table, one candle in the background, low key lighting, top three-quarter angle, 3:4
BUILD
A complete fine-dining restaurant website on a warm near-black background, built around oversized didone serif typography with gold italic accents. The hero is just the wordmark and 'Fire, refined.'; below, short philosophy statements, a horizontal carousel of dark food photography with prices, a non-alcoholic pairing section and hours plus reservations.
DESIGN SYSTEM
- Background #14110E with a very subtle radial vignette; ivory text #EDE6DA; gold #C9A46A for italics and small labels.
- Display: high-contrast didone serif, 88-200px, italic for the second idea in each line ('touches fire.', 'wasted.').
- Labels: 10-11px uppercase sans, letter-spacing 0.25em, e.g. 'LA PHILOSOPHIE', section counter '01 / 03' on the right.
- Nav: wordmark left, centered uppercase links, outlined 'RESERVE' button (1px #EDE6DA55, no radius).
- Thin 1px dividers #FFFFFF14.
MOTION
- Headlines reveal line by line: each line slides up 40px and fades in, 1000ms, stagger 120ms, cubic-bezier(0.16, 1, 0.3, 1), when 30% in view.
- Hero wordmark fades in with a letter-spacing tighten from 0.08em to 0 over 1400ms.
- Plates: horizontal scroll driven by vertical scroll (pinned section), cards 320x420, the card closest to center at opacity 1, others 0.5.
- Cocktail glass image floats 12px up and down, 6s ease-in-out loop.
SECTIONS
1. Hero: centered wordmark, italic tagline, two small links 'View the menu' and 'Reserve a table', scroll cue.
2. Philosophy: 'Everything here touches fire.'
3. 'Nothing is rushed. Nothing is wasted.'
4. Five plates: pinned horizontal carousel with name, short description and price.
5. Sans alcool pairing with a tall glass image.
6. Hours table, address, reservation CTA, footer with sitemap columns.
IMPLEMENTATION
- GSAP ScrollTrigger for the pinned horizontal plates; CSS + IntersectionObserver for the line reveals (split headlines into lines with a span per line, overflow hidden).
- 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
- Each headline enters line by line with the italic half in gold.
- Vertical scrolling moves the plate carousel sideways, then the page continues normally.
- Text contrast on the dark background passes WCAG AA for body copy.