Step Into Wonder

Build a React + TypeScript (Vite) single-page hero called Auragate — an immersive, scroll-driven landing experience with a portal zoom-in effect, parallax mouse motion, and an arc-shaped testimonial card carousel. Use inline `style` objects (not CSS modules); Tailwind is only used for a few layout utility classes on one element. No UI libraries. Fonts & `index.html` In `index.html`, set `Step Into Wonder` and load these exact fonts in ``: ```html ``` Two font families are used throughout: - `'Helvetica Now Display', sans-serif` — all UI text, headings, body, buttons. - `'Mr Dafoe Regular', cursive` — decorative script accents ("Discover", "Aura" in the wordmark, the large "A."). Global CSS (`index.css`) Tailwind directives at top. Then: universal `box-sizing: border-box`; `html, body` with `margin/padding: 0`, `background: #0a0608`, `scroll-behavior: auto`, `overflow-x: clip`; `body` font-family `'Helvetica Now Display', 'Inter', sans-serif` with `-webkit-font-smoothing: antialiased`. Add `html { scrollbar-gutter: stable; }` to prevent scrollbar layout shift. Include a `@keyframes bobUp` (0/100% translateY(0), 50% translateY(-6px)). Assets (use these exact URLs) ```js const PORTAL_BG = 'https://api.promptsites.net/s3/promptsites/previews/57b6e98a-e75a-4639-8fde-16421d0509e0/8b6e26e3-5151-4f3f-a027-40ae2b3228c3.webp'; const WORLD_BG = 'https://api.promptsites.net/s3/promptsites/previews/57b6e98a-e75a-4639-8fde-16421d0509e0/e7995cd8-5d97-4ace-b493-512dd89fe170.webp'; ``` `PORTAL_BG` is the foreground "portal" image you zoom into; `WORLD_BG` is the cloud/world background revealed behind it. Layout structure (z-index stack on `#0a0608` root) 1. Fixed world background (`zIndex 0`): `position: fixed; inset: 0; overflow: hidden`. Inner `worldRef` div (`transformOrigin: 50% 50%`, `willChange: transform`) holding `WORLD_BG` `` at `width/height 100%`, `objectFit: cover`. Never scrolls. 2. **Fixed nav** (`zIndex 50`): see below. 3. **Intro track** (`zIndex 5`): `height: 160vh`, contains a `position: sticky; top: 0; height: 100vh; overflow: hidden` stage holding the portal + Scene 1 UI. 4. **Section 2** (`zIndex 10`): scrollable testimonial content + footer, rendered over the fixed world bg. ### Scroll & motion engine - `useIsMobile()` hook: matchMedia `(max-width: 767px)`, initial `window.innerWidth < 768`. - Track scroll progress 0→1 across the pinned intro: `progress = clamp(window.scrollY / (introRef.offsetHeight - innerHeight), 0, 1)`. Store in both state and a ref. Listen on `scroll` (passive) and `resize`. - Helper math: `easeInOut(t) = t<0.5 ? 2t² : -1+(4-2t)t`, `lerp(a,b,t)`, `clamp`. - **Mouse parallax** via `requestAnimationFrame`: read raw mouse as `(clientX/innerWidth - 0.5)2` (same for Y). Smooth toward it with `lerp(..., 0.07)` each frame. Invert (`rx=-mx, ry=-my`). Magnitudes `MAG = { world: 6, portal: 7 }`. - Each frame, with `ep = easeInOut(scrollProgress)`: - World: `scale = lerp(1, 1.18, ep)`, `transform: scale(s) translate(rx6px, ry6px)`. - Portal: `scale = lerp(1, 7.5, ep)`, `transform: scale(s) translate(rx7px, ry*7px)`, `transformOrigin: '52% 38%'`. - **Opacity transitions** driven by scrollProgress: - `portalOpacity` = 1 until 0.66, then fades to 0 over the next 0.22 of scroll. - `scene1Opacity` = `clamp(1 - scrollProgress/0.22, 0, 1)` (Scene 1 UI fades out in the first 22% of scroll). When `< 0.05`, set `pointerEvents: none`. - `uiVisible` state flips true 600ms after mount; Scene 1 UI fades/slides up (`translateY(24px)→0`, `opacity 0→1`, `transition: opacity 1s ease, transform 1s ease`, `transitionDelay: 0.3s`). ### Navigation (fixed, top) Flex row, space-between, padding `26px 40px` desktop / `18px 20px` mobile. - **Left:** `` — inline-flex baseline-aligned: "Aura" in Mr Dafoe (36px / 30px mobile) + "gate" in Helvetica Now Display weight 500 (24px / 20px), `letterSpacing: -0.02em`, white. - **Right:** a pill **"Watch Demo"** button (white bg, `#161616` text, weight 600, `borderRadius: 999px`, padding `11px 22px` / `9px 16px`, hover bg `#e6e6e6`) immediately followed by a round 42px (38px mobile) white hamburger button containing an SVG of two rounded horizontal lines (`stroke #161616`, width 1.6). Both transition bg `0.25s`. ### Scene 1 hero copy (bottom-anchored, fades out on scroll) A bottom-aligned container with Tailwind classes `absolute inset-x-0 bottom-0 flex flex-col md:flex-row md:items-end md:justify-between gap-12 md:gap-20`, padding `0 44px 52px` (`0 22px 40px` mobile). - **Column 1** (`maxWidth 560px`, left aligned): ` ` Helvetica Now Display weight 500, white, `lineHeight 1.04`, `letterSpacing -0.02em`, `fontSize clamp(40px,4vw,58px)` (mobile `clamp(30px,9vw,44px)`). The word **"Discover"** is a leading span in Mr Dafoe, color `#9a9a9a`, `fontSize 1.15em`, `marginRight 0.12em`. Full text: > *Discover* Living \ Digital Worlds \ Vivid, Alive, Endless Below it a ` ` (weight 400, `13–14px`, `lineHeight 1.6`, `color rgba(255,255,255,0.5)`, `maxWidth 340px`, `marginTop 18px`): "Experience immersive worlds with stories that blur the line between imagination, AI and living reality made for you." - **Column 2** (hidden on mobile, flex, `gap 14px`): a large "A." in Mr Dafoe (64px, white, `lineHeight 0.8`) next to a ` ` (weight 400, 11px, `color rgba(255,255,255,0.5)`, `maxWidth 150px`): "A studio is a trusted partner in your journey through wonderland." ### Section 2 — "Real wonders" + arc carousel Centered column, `paddingTop 14vh` (12vh mobile), `paddingBottom 60px`. - Centered ` ` (weight 500, `clamp(34px,4vw,52px)`, white, `letterSpacing -0.02em`, `lineHeight 1.1`, `textShadow 0 2px 20px rgba(0,0,0,0.35)`): "Real wonders.\ Real worlds." - Centered ` ` (weight 500, 17px, `maxWidth 420px`, white, `textShadow 0 2px 16px rgba(0,0,0,0.3)`, `marginTop 16px`): "See how Auragate helps others, and find out what it can do for you." - Below: `` with these 7 testimonial quotes (in order): 1. "It is amazing to see and feel the worlds I am stepping into each day." 2. "I have been feeling much more alive inside these living worlds, even on the long days." 3. "My wonder has been growing so fast that it is hard to believe the difference. Auragate gave me exactly the vision I needed." 4. "The first two scenes felt alive. I tried everything we dreamed up and it worked." 5. "The wonder of it all really moved me, it even brought a tear to my eyes every time." 6. "I finally feel immersed, like the worlds were built just for me." 7. "Stepping into it was effortless and the worlds have been unlike anything I dreamt." ### ArcCardCarousel (the signature component) A fanned arc of cards centered on screen. State `active` starts at `floor(total/2)`. Constants (desktop / mobile): `cardW 300/230`, `cardH 420/320`, `stepX 295/170`, `dropY 52/34`, `tilt 8/7`, `containerH 560/460`. Container `position: relative; width: 100%; height: containerH`. For each card compute signed position `pos` relative to `active` wrapped into `[-half, +half]`; `abs = |pos|`; `isCenter = pos===0`. - **Transform:** `translateX(posstepX) translateY(absdropY + (isCenter ? 30 : 0)) rotate(postilt deg)` — this creates the downward-curving arc with outer cards dropped and rotated. (mobile center bump = 22.) - `opacity`: center `1`, else `max(0, 0.6 - (abs-1)0.2)`. `zIndex: 100 - abs`. `pointerEvents: isCenter ? 'auto' : 'none'`. `transition: transform 0.55s cubic-bezier(0.22,1,0.36,1), opacity 0.55s ease`. - **Card face:** `borderRadius 28px` (22 mobile). - **Center card:** solid `background: rgb(247,251,255)`, `border 1px solid rgba(255,255,255,0.6)`, no backdrop filter, and `boxShadow: '0 8px 24px rgba(0,0,0,0.08), 0 0 50px rgba(255,255,255,0.55), 0 0 90px rgba(255,255,255,0.35)'` (soft dark + layered white glow). Quote text color `#2c2420`. - **Inactive cards:** frosted glass — `background: linear-gradient(135deg, rgba(255,255,255,0.42) 0%, rgba(255,255,255,0.24) 100%)`, `backdropFilter: blur(18px) saturate(140%)` (+ `-webkit-`), `border 1px solid rgba(255,255,255,0.28)`, `boxShadow: 'inset 0 1px 1px rgba(255,255,255,0.45)'` (inset highlight only, no drop shadow). Quote text `rgba(255,255,255,0.85)`. - Quote ` `: Helvetica Now Display weight 500, 17px (15 mobile), `lineHeight 1.5`, `letterSpacing -0.01em`, wrapped in typographic quotes `“…”`, centered, card uses flex center. - **Nav buttons** (absolute, `bottom: -40px`, centered, `gap 10px`): two round 46px (42px mobile) buttons. Prev (`dir -1`): `background rgba(255,255,255,0.2)`, no shadow, white chevron-left SVG with a glowing `drop-shadow` filter (`rgba(255,255,255,0.7) 0 0 6px` + `rgba(255,255,255,0.4) 0 0 14px`). Next (`dir 1`): `background rgba(255,255,255,0.9)`, `boxShadow 0 6px 18px rgba(0,0,0,0.18)`, dark `#2c2420` chevron-right. Clicking advances `active` by `±1` with modulo wrap. ### Footer `position: relative`, padding `160px 44px 52px` (`120px 22px 40px` mobile). CSS grid: desktop `1.4fr 1fr 1fr 1fr`, mobile `1fr 1fr` (`gap 40px` / `32px 20px`), `maxWidth 1280px`, centered. First cell (full-width on mobile) = `` + a `rgba(255,255,255,0.55)` 12px line "© 2026 Auragate". Then three columns: - **Explore:** How it works, Features - **Contact:** X (Twitter), hello@auragate.com - **Legal:** Privacy Policy, Terms of Service Each column: a `rgba(255,255,255,0.55)` weight-500 13px title (`marginBottom 18px`), then a `gap 12px` list of white weight-500 14px links (`textDecoration none`, hover `opacity 0.65`). ### Responsiveness Everything keys off the `isMobile` boolean (767px breakpoint): reduced paddings, font clamps, smaller carousel constants, Column 2 of the hero hidden, footer grid collapses to 2 columns with the brand cell spanning full width. Behavior summary On load, the user sees the portal image full-screen with the hero copy at the bottom. Mouse movement gently parallaxes both layers in opposite directions. Scrolling through the 160vh pinned track zooms the portal in to 7.5× while the world background scales to 1.18×; the hero copy fades out first (by 22%), then the portal fades out (66%→88%), revealing the cloud world and the "Real wonders" testimonial carousel section, ending in the footer.

Gateway Portal