REFERENCE
- Gallery page: https://magpui.com/en/i/golf-course-with-an-interactive-hole-map-56ea3c
- First frame (image): https://dnioievkvxejjbxgwvko.supabase.co/storage/v1/object/public/media/golf-course-with-an-interactive-hole-map-56ea3c/shot.jpg
- Clip (mp4): https://dnioievkvxejjbxgwvko.supabase.co/storage/v1/object/public/media/golf-course-with-an-interactive-hole-map-56ea3c/clip.mp4
- Original post: https://morrow-golf-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.
- Sunset course: Wide photo of a coastal golf course at sunset, clubhouse terrace with tables on the left, a row of golf carts, umbrella pines, mountains and sea in the background, warm golden light, 16:9
- Aerial fairway: Aerial drone photo straight down on a golf green next to a rocky coastline with white surf, dark pines, 16:9
BUILD
A complete golf resort website: a cinematic sunset hero over the course, an aerial photo section with a big serif line, and the centerpiece, a pinned illustrated course map where scrolling walks through the 18 holes one by one, highlighting the path and updating the hole details next to it.
DESIGN SYSTEM
- Paper #EFE9DF, ink #1F2A1E, sage fairway #C9D3B4, forest #2E3B2A, accent #C8643B for the active hole.
- Hero: wide extended uppercase sans 'GOLF, REIMAGINED.' 96px over the photo; italic serif side copy 28px.
- Section headlines: serif 44px with an italic second half ('One unbroken walk.').
- Hole details: big number 72px, uppercase name, 3 stat cells (Par, Yards, Stroke index) with 1px dividers; a 9x2 grid of hole buttons, active one #1F2A1E.
- Small labels: mono 10px uppercase, letter-spacing 0.2em.
MOTION
- Hero photo slow zoom 1.08 to 1 over 8s on load; headline lines rise 30px with 100ms stagger.
- Aerial section: image scales from 0.6 width card to full bleed as it enters (scrub).
- Map: pinned for 18 steps; at each step the path for that hole draws in #C8643B (stroke-dashoffset), the map pans and zooms toward it (transform, 600ms cubic-bezier(0.65, 0, 0.35, 1)), and the detail panel swaps number, name and stats; the hole grid button activates. Clicking a hole button jumps to that step.
SECTIONS
1. Hero with nav, location label, big headline, italic copy, scroll cue, course stats row.
2. Nature stat (60% native habitat) with small image.
3. Aerial full-bleed photo with 'Every fairway follows a line the land had already drawn.'
4. 'Eighteen holes. One unbroken walk.': pinned map + hole details.
5. Signature holes on dark #1F2A1E, clubhouse, membership, footer.
IMPLEMENTATION
- The map is one SVG (fairways, greens, hole markers, path segments with ids) so each hole can be highlighted; GSAP ScrollTrigger to pin and step through holes.
- On mobile, replace the pinned map with a swipeable list of holes.
- 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
- Scrolling the map section activates the holes 1 to 18 in order and draws each path.
- Clicking a hole number moves the map to that hole.
- The hero headline stays readable over the photo (dark gradient at the bottom).