# SOLHAVN — A little closer to nowhere

## Motion implementation and acceptance

Implement the interactions specified in the brief. The catalogue recording is a visual reference and the poster is a loading, error or reduced-motion fallback. Implement the moving scene separately from both.
- Catalogue recording (reference only): https://video.gumlet.io/6a7e9e0f2621db881577453e/6ae4649130856088f662e030/main.mp4
- Poster (still fallback only): https://media.scrollhaus.ai/thumbs/solhavn.f61b91f06000.webp

For scroll-scrubbed video, use a muted inline video, wait for loaded metadata, and map section progress in both directions to the video timeline. Seek when the target changes and coalesce seeks while one is pending. For a frame sequence, draw the indexed frame to canvas as scroll progress changes. For scripted, CSS or 3D motion, recreate the triggers and transforms in the brief. Use normal playback for clips described as loops.

Test at two different scroll positions and then scroll back. Confirm the video time and visible frame change, or confirm the specified canvas, CSS or 3D state changes. If a required source fails, report its URL and the missing motion before calling the build complete.

Create an original illustrated Nordic-retreat website using React, TypeScript, Vite and Tailwind CSS. Split the source into App, Planner, data, motion and styles modules; keep index.html tiny. Do not reproduce the HALVØY reference identity or its artwork.

1. Identity and typography. SOLHAVN is a fictional collection of quieter cabin stays. Palette: warm sand #f0e6d2, midnight ink #192f3c, terracotta #a9472c and apricot #edb381. Headings DM Serif Display 400 with italic rust accents; interface DM Sans 400/500/600/700. Editorial, airy and tactile. Full-bleed landscape images, fine rules, small uppercase chapter labels, sharp rectangular CTAs and a simple SOLHAVN sun wordmark. No saturation or contrast boost.

2. Exact artwork. Use the original full-resolution illustrations below. Preserve the entire artwork; use object-fit cover within responsive scenes, never bake copy into images. Desktop image scale 1.075 with subtle 34px scroll parallax and 7px pointer drift. Phone object-position: coast 85%, valley 10%, winter 88%. Images remain HTTPS-hosted outside the project.
Coast: https://media.scrollhaus.ai/sites/solhavn/assets/coast.png
Valley: https://media.scrollhaus.ai/sites/solhavn/assets/valley.png
Winter: https://media.scrollhaus.ai/sites/solhavn/assets/winter.png

3. Five sequential scenes. Each landscape is at least 100svh. Fixed top nav: SOLHAVN, SMALL CABINS. BIG EXHALE., The places, The feeling, Find your quiet ↗. At scroll, a warm translucent bar; over the ink ritual scene, switch nav to warm white. A five-dot right-side rail highlights the active scene.
Scene 01 coast: eyebrow A DIFFERENT KIND OF AWAY; heading “A little closer / to nowhere.” with nowhere italic rust; lede “Small cabins. Open horizons. / And all the time you came here to find.” Dark CTA “Find your kind of quiet ↗” goes to scene 02. Hero copy left around 7.3%/20%; image cabin right. Display rotating line-art sun seal, “LESS, BUT / A LITTLE MORE.” and lower “FOLLOW THE SLOW ROAD” / “01 / THE SALT HOUSE”. Headline clamp 70–150px, 7.8vw, line-height .97.
Scene 02 valley: right-aligned copy at 55%/20%; label THE VALLEY HOUSE; heading “Out of office. / Into yourself.”; lede “Follow the river until the rush falls away. Up here, a smaller house makes room for a much bigger day.” “Meet the Valley House ↗” opens an accessible native dialog with the valley image, cabin description, 2 guests / Trail access / River view and link to planner. Cabin remains visible on left.
Scene 03 rituals: ink background, sand type and apricot italics. Heading “Nothing on the agenda. / Everything to remember.” Three image buttons: “Morning, unhurried.” (coast), “Take the smaller path.” (valley), “Stay for the quiet.” (winter). Each has a plus/minus, label, short specific description. Selection changes aria-pressed, accent underline and a live text response below. Link “Make time for it ↗” goes to planner. All three cards animate gently into view.
Scene 04 winter: left copy; label THE STILL HOUSE; heading “Some places / make you feel / more human.”; lede “Warm timber. Cold cheeks. A light left on. Come for the view. Stay for the feeling.” Button opens the winter cabin dialog, with fireside nook and lake view. Footer labels “WINTER HAS A WARM SIDE.” and “LESS NOISE. MORE WONDER.”
Scene 05 planner: warm sand, two columns. Left heading “Make room / for less.” and “Choose a view. Leave space for everything else.” plus small arched image that follows cabin choice. Right form has cabin select (Salt House €245/night, Valley House €215/night, Still House €265/night), optional arrival date not before today, range 2–10 nights default 3, two guests and computed estimate. “Keep this little plan ↗” opens a summary dialog. “Save plan on this device ↗” writes only to localStorage and confirms via aria-live. Show “A fictional retreat, made for exploration. No booking or payment is taken.” Footer wordmark, tagline, SCROLLHAUS design concept, back-to-top.

4. Motion and controls. Native vertical scroll and hash anchors; no scroll trapping. One requestAnimationFrame loop handles parallax, active rail, bottom reading progress, sun rotation and subtle headline/element reveal opacity with up to28px translate. Escape and explicit close buttons close native dialogs. Pause control disables ambient/parallax motion. Never replace the visitor’s pointer or auto-scroll the normal site. Respect prefers-reduced-motion: no parallax, no smooth scroll, fully visible text. All targets keyboard accessible, visible focus, labelled inputs and descriptive alt text.

5. Catalogue recording only. ?showcase=1 runs a24-second real-page tour: hold hero0–.6s, smooth descend through all five scenes .6–19.5s, planner19.5–21.2s, smooth return21.2–24s. Include an ivory demonstration cursor with a continuous1.5-second up/down scroll gesture, horizontal8-second sinusoid and “Scroll to wander” label. Keep first/last states visually continuous. ?record=1 stops wall time; ArrowRight advances the actual animation clock exactly1/30second, start=N can recover a frame. Wait for images/fonts before capture. Use a sharp1920×1080,30fps capture and validate decoded cadence, frame progression and loop, plus960 and640 derivatives. Preserve edge-to-edge16:9 framing; no black side strips.

6. Responsive and handoff. Below760px, collapse nav into a Menu button with aria-expanded, put hero copy left, crop illustrations around cabins, stack ritual cards and planner, use44px controls, safe padding and no horizontal overflow. Use a stronger warm gradient behind mobile hero copy for readability. Keep all artwork sharp. Validate1440×900 and390×844, cabin dialogs, ritual selection, estimates, local-save confirmation, Escape, reduced motion and keyboard focus. Deliver the editable modular React project and this sequenced written prompt; never substitute HTML copy/download actions. This demo has no booking/payment/email backend or real guest claims.