# Hanbit Korea

## 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://media.scrollhaus.ai/previews/hanbit-korea.stream-eb5095fd.mp4
- Poster (still fallback only): https://scrollhaus.ai/thumbs/hanbit-korea.webp
- Scene source · video: https://video.gumlet.io/6a7e9e0f2621db881577453e/6aa838db07a6f8ff298d2f4f/main.mp4
- Scene source · video: https://video.gumlet.io/6a7e9e0f2621db881577453e/6aa838db400e7c181696f346/main.mp4
- Scene source · video: https://video.gumlet.io/6a7e9e0f2621db881577453e/6aa838dbae2b40af2a01e26d/main.mp4
- Scene source · video: https://video.gumlet.io/6a7e9e0f2621db881577453e/6aa838dc400e7c181696f34c/main.mp4
- Scene source · video: https://video.gumlet.io/6a7e9e0f2621db881577453e/6aa838dc400e7c181696f34f/main.mp4

Additional source assets. For each grouped list, prepend its base URL to each filename or path exactly as written.
- Base URL https://media.scrollhaus.ai/sites/hanbit-korea/ → img1/hanbok-figure-web.webp?w=760&format=auto · img1/5c5a6067-5ac0-42c2-ad31-ae2208ba6386.webp · img1/b687b95b-be0e-4051-bafd-4044a508560b.webp · img1/b52d08e9-e489-4ed4-9bcb-34558d8ce6d4.webp · img1/9c1d1fd3-6bdf-4606-b019-bb2fa3b6c039.webp · img1/5c21b13c-14e4-4d55-a66a-93ab89219b24.webp · img1/00e150bc-46f6-4289-b82c-9b8d9357faf7.webp · img1/67d224be-16f4-4d08-a042-2e3a745ec129.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 a responsive React + TypeScript + Vite + Tailwind CSS website. Use small components for navigation, hero, interactive stage, content sections and footer. Put media URLs in src/lib/assets.ts and animations in cleaned-up hooks. Do not output a giant HTML file, an iframe, or a screenshot pretending to be the website.

## Design direction
A cinematic, scroll-driven landing page for a fictional ten-day curated Korea tour (Seoul → Jeonju & Gyeongju → Busan), built as a single self-contained index.html with zero build step. Every heavy asset — hero plates, hanbok figure cutout, five polaroid video clips, timeline photography, closing cherry-blossom plate — streams through Gumlet (video CDN + image optimisation proxy) from the site's own hosted media, no local asset folder required.

Palette and type: --ink: #0A0B0C; --ink-soft: #111314; --paper: #FAF7F1; --ease: cubic-bezier(.16,1,.3,1).
Font families: Inter,system-ui,sans-serif / Inter / Instrument Serif,serif / Oswald.
Font stylesheet: https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Oswald:wght@200..600&family=Inter:wght@300;400;500&family=Cormorant+Garamond:ital,wght@0,300;0,400;1,300&display=swap

## Layout and copy
“KOREA” → “About the journey” → “Seoul” → “Jeonju & Gyeongju” → “Busan” → “What's included” → “Come with us” → “Want to come, but still have questions?”
Preserve that section order (for a one-screen concept, preserve that one-screen composition), real text and distinctive composition. Use the asset map below for additional labels, body copy, colors and asset roles. Do not add unrelated dashboard sections or generic filler.

## Motion and interaction
The hero's signature move: the outlined "KOREA" wordmark sits genuinely behind the mountain ridge line, not just under a straight CSS gradient mask. A real alpha silhouette is keyed out of the ridge photograph (sky plate behind the type, ridge silhouette in front of it, hanbok figure on top), so the letterforms read as standing behind the landscape rather than stamped over it. Below the wordmark, a five-card polaroid strip (Gyeongbokgung, an Euljiro alley, Gamcheon's painted terraces, Korean BBQ, a neon Busan street) drifts left at 0.4x scroll speed, each card's muted video playing at full rate on hover.
Use React refs for canvas/video/3D and effects with cleanup for listeners and animation frames. Keep scroll progress reversible and independent of React rerenders. Match the demonstrated interaction, not just its opening still.

## Exact media
Asset and content map (JSON, not HTML): https://scrollhaus.ai/build-assets/hanbit-korea.json
Visual demo: https://media.scrollhaus.ai/previews/hanbit-korea.stream-eb5095fd.mp4
Thumbnail / loading poster: https://scrollhaus.ai/thumbs/hanbit-korea.webp
- video: https://video.gumlet.io/6a7e9e0f2621db881577453e/6aa838db07a6f8ff298d2f4f/main.mp4
- video: https://video.gumlet.io/6a7e9e0f2621db881577453e/6aa838db400e7c181696f346/main.mp4
- video: https://video.gumlet.io/6a7e9e0f2621db881577453e/6aa838dbae2b40af2a01e26d/main.mp4
- Dawn sky over the Korean peninsula: https://media.scrollhaus.ai/sites/hanbit-korea/img1/5647a229-1ef7-4181-b55f-b4bf32bbb0d4.webp
- Granite ridges of Seoraksan above a sea of cloud at dawn: https://media.scrollhaus.ai/sites/hanbit-korea/img1/3cacaf45-6d22-4b58-8a21-dda490f766e0.webp
- image: https://media.scrollhaus.ai/sites/hanbit-korea/img1/ridge-silhouette-web.webp?w=2200&format=auto

Read the JSON map before implementing; its referenceNotes contain the full design and motion details. Follow this React/TypeScript instruction when historical notes mention a different stack or standalone HTML. Keep source media at neutral saturation and contrast; do not add colour boosts. Use its exact URLs, including query strings. Resolve every asset independently; do not turn the thumbnail into the full-screen hero. Do not replace missing media with stock pictures. Report a failed URL and keep a useful loading/error state.

## Responsive behavior and finish
At 1440×900 keep the reference's text/image balance. At 390×844 stack content deliberately, use touch equivalents for hover/drag, keep faces/products uncropped, and avoid horizontal overflow. Videos that loop must be muted and playsInline; do not hide real scroll motion behind an autoplay loop. Honor reduced motion, keep keyboard access, and pause offscreen/hidden-tab rendering.

Run the production build. Check desktop and phone layouts, every supplied image/video/model, the main interaction in both directions, navigation and CTAs. Keep demo-only forms/cart UI local unless a backend is explicitly requested. Compare against the reference; report any unverified differences rather than claiming a guaranteed match.