mythic-naturecore

## Offline media Copy the sibling `assets/` directory beside the generated HTML, retaining its relative paths (or embed these assets for a standalone file). Use the bundled images instead of remote media. Large video loops and animated previews are represented by local still images; render them as images or video posters without a video source. This offline-media rule overrides remote/video instructions below. See `assets/NOTICE.md` for attribution. # Mythic Naturecore — "Reverie" Cinematic Parallax Landing Produce a high-fidelity, premium interactive landing page named **"Reverie"**. A complete, rendered reference implementation ships beside this skill at `example.html` — **start from it**. Copy `example.html`, then adjust copy and imagery only; do **not** rewrite the scroll/parallax math or invent a new visual language. The seed already encodes the exact fonts, asset map, scroll timeline, parallax magnitudes, and entrance sequence below. The native spec asks for **React + TypeScript + Tailwind + inline styles**; the bundled seed is **vanilla HTML/CSS/JS** with the framework features mapped down (no `useScroll`/`useTransform`/Framer — a passive `scroll` listener writes `scrollProgress`, a `requestAnimationFrame` loop writes inline `transform`, a `mousemove` handler drives the magnetic parallax). When the user explicitly asks for a React/Vite project, port the seed faithfully: same tokens, same layer structure, same math. This is the authoritative build brief. The named curve constants, magnitudes, scroll heights, and asset URLs are **locked**. ## Stack & fonts - Default output: the single self-contained `example.html` seed. - Fonts via Google Fonts `<link>`: - Headings: `'Viaoda Libre', serif`. - Body, nav links, captions: `'Imprima', sans-serif` (also the body default). ## Global reset ```css html, body { margin: 0; padding: 0; background: #0a0608; scroll-behavior: auto; } html { scrollbar-gutter: stable; } /* prevent layout shift */ body { font-family: 'Imprima', sans-serif; } @keyframes bobUp { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } } ``` ## Asset map — LOCKED (large stable CDN stills, kept REMOTE) Define these exact constants at the top of the script. These are big background stills on a stable CDN (`res.cloudinary.com`); per the inline-vs-remote rule they **stay remote** — do NOT re-host, swap the host, or inline them. ``` PORTAL_BG = ./assets/portal_bg_mu60k9-78f20d.webp CURTAIN_LEFT = ./assets/curtain_left_cdht6q-c85f2f.webp CURTAIN_RIGHT= ./assets/curtain_right_a9bn3i-1ca8f6.webp WORLD_BG = ./assets/world_bg_jzzcn1-dfd909.webp // Cards MUST remain in this exact order (Card 3, Card 1, Card 2): CARD_IMAGES = [ ./assets/card_3_nbwm25-de0132.webp, // Card 3 ./assets/card_2_wr6al6-b3a8c5.webp, // Card 1 ./assets/card_1_jz8otj-096be2.webp // Card 2 ] ``` ## Math helpers — LOCKED ``` easeInOut(t) = t < 0.5 ? 2*t*t : -1 + (4 - 2*t)*t lerp(a,b,t) = a + (b - a) * t clamp(v,min,max) = Math.max(min, Math.min(max, v)) MAG = { world: 6, portal: 7, curtainL: 14, curtainR: 14 } ``` ## Scroll + mouse system - **Page height is exactly `480vh`** (`#scroll-root`); inside it a single **sticky `#stage` spans `100vh`** (`position: sticky; top: 0; overflow: hidden`). - `scrollProgress` ∈ `[0,1]` = `clamp(scrollY / (scrollRootHeight - innerHeight), 0, 1)`, written by a **passive** `scroll` listener. - `useIsMobile()` ⇒ a `matchMedia('(max-width: 767px)')` flag. - Mouse parallax: normalize `rx`, `ry` ∈ `[-1,1]` from cursor vs viewport center. A `requestAnimationFrame` `tick()` lerps current→target with **step `0.07`** every frame (kills frame-rate stutter), then writes inline transforms. ## Animation timeline (applied every frame) - **World** (`WORLD_BG`): `scale` lerp `1 → 1.18`; `transform = scale(s) translate3d(rx*6px, ry*6px, 0)`. - **Portal** (`PORTAL_BG`, `transform-origin: 52% 38%`, above world): `scale` lerp `1 → 7.5` (immersive zoom-through); `opacity = clamp(1 - (p - 0.65)/0.2, 0, 1)`; `transform = scale(s) translate3d(rx*7px, ry*7px, 0)`. - **Curtain Left** (`CURTAIN_LEFT`): opening offset 62% left, scrolls further to 150% via `eased`: `totalShift = 62 + easeInOut(p)*88`. Scroll scale lerp `1 → 1.3`. `transform = translateX(calc(-totalShift% + rx*14px)) translateY(ry*14*0.3px) scale(scrollScale) translateZ(0)`. - **Curtain Right** (`CURTAIN_RIGHT`): symmetric mirror — same but `translateX(calc(+totalShift% + rx*14px))`. ## Entrance sequence Curtains start fully closed (`translateX(0)`); after **100ms** they open to the 62% resting offset; UI fades in after **600ms** (opacity + 20px slide-up, `0.9s ease`, hero delayed ~300ms). After **2200ms** disable the entry CSS transitions so mouse parallax has zero lag. ## Layout & components ### Navigation (`position: absolute; top:0; z-index:50`) - Padding `18px 20px` mobile / `22px 48px` desktop. - Desktop (≥768px): split nav — left links `Worlds · Atelier · Immersions`, center **SVG star logo** (`M14 2l2.09 6.42H23l-5.45 …` in a 28×28 viewport), right links `Craft · Codex · Connect`. - Mobile (<768px): centered star logo, `Explore` on the left, `Connect` on the right. - Links: uppercase, `12px`, letter-spacing `0.12em`, white, opacity `0.9`, no underline. ### Scene 1 — Hero (`z-index: 46`) - Opacity fades out: `clamp(1 - scrollProgress/0.22, 0, 1)`. Entrance: slide up 20px on mount, `0.9s ease` opacity, ~300ms delay. - **Mobile (<768px):** centered column, dark-brown text `#3b1a0a`. Heading `FALL › INTO REVERIE` (Viaoda Libre). Subheading max-width `280px`. One card with `CARD_IMAGES[0]` + white play button + "View Reel". - **Tablet (768–1099px):** centered column, dark-brown text. All 3 cards in a row — Card 3 (`CARD_IMAGES[0]`, Play+"View Reel"), Card 1 (`CARD_IMAGES[1]`, "32 World Patrons" large serif), Card 2 (`CARD_IMAGES[2]`, Play+"View Reel"). - **Desktop (≥1100px):** split-screen, white text. - Left (`top:46%; left:60px`): title `FALL › INTO REVERIE`, subheading, max-width `440px`. - Right (`top:50%; right:40px`): row of 3 cards `158×158`, radius `28px`, bottom gradient label with `backdropFilter: blur(6px)` and gradient `rgba(0,0,0,0.72) 0% → rgba(0,0,0,0.18) 60% → transparent 100%`, play icon or patron metric overlay. ### Slider dots (bottom-left, `60px`; centered on mobile) 4 pill indicators: first wide (`28px`, opacity 1), other three thin (`14px`, lower opacity), white. ### Scroll cue (`bottom: 36px`, centered; hidden on mobile) Uppercase "Descend" `10px`, letter-spacing `0.22em`, `rgba(255,255,255,0.6)`; chevron SVG inside a `34×34` round border animated `bobUp 1.8s ease-in-out infinite`. ### Scene 2 — CTA "Forge Beyond" (`z-index: 46`) - Opacity fades in: `clamp((scrollProgress - 0.68)/0.16, 0, 1)`; centered vertical flex, interactive only when visible. - Heading `FORGE BEYOND THE REAL` (Viaoda Libre, clamp `38px → 78px`, `#fff`, letter-spacing `0.03em`, line-height `1.05`, shadow `0 2px 20px rgba(0,0,0,0.4)`). - Paragraph (Imprima): "Singular voyages to astonishing destinations, shaped for those who seek beauty beyond the ordinary and the known." — `20px` desktop / `14px` mobile, max-width `480px` desktop / `260px` mobile, line-height `1.6`, `rgba(255,255,255,0.82)`. ## Color rules — hard Cinematic naturecore palette: near-black base `#0a0608`, warm dark-brown mobile text `#3b1a0a`, white desktop text, translucent white captions. Keep the serif/sans pairing (Viaoda Libre + Imprima). Do not introduce neon, purple, or flat material accents — the mood is dim, organic, painterly. ## Responsive - `≥1100px` desktop split-screen white-text hero; `768–1099px` tablet centered 3-card row; `<768px` mobile centered single-card dark-brown hero, mobile nav, dots centered, scroll cue hidden.