Design Prompts

Make a clean saas landing page with a split-screen layout and bold typography. left side features minimal white space while the right has a vibrant lime-green gradient.

<system> You are a world-class frontend designer and creative director with 15 years of experience crafting award-winning digital experiences for high-profile tech startups (YC-backed, Series A+ companies). You specialize in bold, memorable designs that break away from generic templates. Your work has been featured in Awwwards, CSS Design Awards, and The FWA. </system> <context> You're building a landing page for "<company_name>" - <company_description>. The company targets <target_audience>. They differentiate through <key_differentiators>. The landing page will be the primary conversion funnel for leads. </context> <design_philosophy> Create a design that would win design awards. Avoid the "AI slop" aesthetic at all costs: - NO purple/blue gradients on white backgrounds - NO generic fonts (Inter, Roboto, Arial, system-ui) - NO predictable hero-CTA-features-testimonials templates - NO generic geometric shapes or abstract blobs - NO stock-looking imagery or clichéd visuals </design_philosophy> <aesthetic_direction> Choose ONE distinctive aesthetic approach and commit fully: Option A: <aesthetic_approach_A> Option B: <aesthetic_approach_B> Option C: <aesthetic_approach_C> Option D: <aesthetic_approach_D> Option E: <aesthetic_approach_E> Pick the most unexpected yet appropriate choice and execute it with conviction. </aesthetic_direction> <required_sections> Build these sections with creative interpretation: 1. **Hero Section** - A hook that creates immediate intrigue - Interactive element that demonstrates capability - Clear value proposition in ≤12 words - Primary CTA: "<primary_cta>" - Trust signals (logos, security badges) 2. **Problem/Solution Narrative** - Tell a story, don't list features - Use scroll-triggered reveals for dramatic effect - Include real-world scenario visualization 3. **Product Showcase** - Interactive demo preview or animated mockup - Show the product in action visually - Technical credibility indicators 4. **Social Proof** - Testimonials from target personas - Metrics that matter to <target_audience> - Customer grid with hover states 5. **Technical Differentiators** - Clean comparison or feature grid - Integration/API preview (if applicable) - Security & compliance badges 6. **Conversion Section** - Secondary CTA with urgency - Quick form (Name, Email, Company) - Alternative action: "<secondary_cta>" 7. **Footer** - Minimal, sophisticated - Essential links only - Newsletter capture </required_sections> <technical_requirements> - Single HTML file with embedded CSS and JavaScript - Mobile-responsive (fluid typography, adaptive layouts) - Smooth scroll behavior - Page load animations with staggered reveals (use animation-delay) - Intersection Observer for scroll-triggered effects - Micro-interactions on hover states - CSS custom properties for theming - Semantic HTML5 structure - Performance-optimized (no heavy libraries) - Load Google Fonts for typography </technical_requirements> <motion_design> Implement these animation principles: - **Page Load**: Orchestrated reveal sequence (0ms → 200ms → 400ms stagger) - **Scroll**: Fade-in-up with subtle parallax on key visuals - **Hover**: Scale transforms, color transitions, underline animations - **Interactive**: Cursor-following effects, magnetic buttons - **Background**: Subtle ambient motion (floating particles, gradient shifts) </motion_design> <color_guidance> If you choose a dark theme: - Deep background: #0a0a0f to #12121a range - Text: Pure white (#ffffff) for headlines, muted (#a0a0a0) for body - Accent: ONE bold color used sparingly (electric cyan, hot coral, acid green) If you choose a light theme: - Background: Off-white or cream (not pure white) - Text: Deep charcoal (not pure black) - Accent: Bold, unexpected (terracotta, forest, sapphire) </color_guidance> <typography_direction> Pick a distinctive combination: - Headlines: Display serif (Playfair Display) or Geometric sans (Clash Display, Cabinet Grotesk) - Body: Readable with character (Source Serif Pro, Satoshi) - Mono: JetBrains Mono, IBM Plex Mono for technical elements Avoid at all costs: Inter, Roboto, Arial, SF Pro, Open Sans </typography_direction> <output_format> Deliver a single, complete HTML file that: 1. Opens immediately in any browser with no dependencies 2. Contains all CSS in a <style> tag 3. Contains all JavaScript in a <script> tag 4. Uses realistic placeholder content (not "Lorem ipsum") 5. Is production-ready quality </output_format> <thinking_process> Before coding, briefly outline: 1. Which aesthetic direction you're choosing and why 2. The specific font pairing 3. The color palette (hex values) 4. The hero hook concept 5. One unique interactive element you'll implement Then build the complete page. </thinking_process>

Build a landing page showcase app for [YOUR COMPANY NAME] that lets users browse and preview different landing page design options. The app should function as an internal design directory where team members or stakeholders can view multiple landing page variations side-by-side before deciding which style best represents the brand. The main screen displays a clean, dark-themed list of all available landing pages with the company logo and a title like "Landing Page Options." Each option appears as a clickable card that navigates to the full landing page preview. Each landing page in the directory should be a complete, fully-designed landing page. Start off with 3 landing pages in the directory. Over time, the user is going to be providing their thoughts and making changes on all the landing pages. Based on those changes, all future generations of landing pages should take those into account, and you should improve making landing pages to their liking as time goes on. And when asked to create new landing pages without specific direction, please search the internet for new trending styles for landing pages that work. This can help you come up with concepts, but make sure it aligns with the company style and the preferences of the user. If the user doesn't specify any styling you can ask them follow up questions about the styling of their brand.

# MASTER PROMPT — "KOISEI" Sakura River Scroll Experience Build a single-page, award-level (Awwwards/FWA style) scroll experience called **Koisei** — a cinematic journey down a Japanese river from a sakura morning to a lantern-lit night. Ukiyo-e / woodblock-illustration art direction, WebGL-enhanced imagery, scroll-scrubbed film sequences, and a day-to-night color metamorphosis. Everything below is a hard requirement — follow it exactly. --- ## 1. TECH STACK - **Vanilla HTML/CSS/JS** (single `index.html` allowed) or Vite project. - **three.js** (r160+) for: hero petal particle system, WebGL image planes with ripple/displacement shaders, and the transition dissolve shader. - **GSAP 3 + ScrollTrigger** for all scroll choreography (pinning, scrubbing, timelines). - **Lenis** smooth scroll (`lerp: 0.08`, `wheelMultiplier: 1.0`), synced to ScrollTrigger via `lenis.on('scroll', ScrollTrigger.update)` and `gsap.ticker`. - Scroll-scrubbed `<video>` elements driven by `currentTime` (details §8). - No UI frameworks. No Bootstrap aesthetics. Custom everything. --- ## 2. ASSETS (use these exact URLs) | Key | Asset | |---|---| | `HERO_RIVER` | https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/sakura-river-2026-07-05/sakura-river-hero-plate-875acd7a5205_original.png | | `KOI_RIVER` | https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/sakura-river-2026-07-05/sakura-koi-river-plate-742cc19de6b5_original.png | | `TEMPLE_CANAL` | https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/sakura-river-2026-07-05/kyoto-temple-canal-plate-60699d609a45_original.png | | `KIMONO_LANE` | https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/sakura-river-2026-07-05/rural-kimono-lane-plate-edb1d9bf1d3d_original.png | | `LANTERN_WATER` | https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/sakura-river-2026-07-05/asakusa-lantern-water-plate-73b3e135a98d_original.png | | `NIGHT_LANTERN` | https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/sakura-river-2026-07-05/night-river-lantern-plate-510dc7d4315d_original.png | | `HERO_VIDEO` (optional ambient) | https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/sakura-river-2026-07-05/sakura-river-bloom-video-5da61fc96d01_video.mp4 | | `SCROLL_FILM_1` (12s) | https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/sakura-river-2026-07-05/koi-bridge-temple-scroll-film-12s-ce0df14b7596_video.mp4 | | `SCROLL_FILM_2` (12s) | https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/sakura-river-2026-07-05/kimono-asakusa-night-scroll-film-12s-bd5434347f42_video.mp4 | Preload `HERO_RIVER`, both films' metadata, and fonts behind a loader (§4). --- ## 3. DESIGN SYSTEM ### 3.1 Colors (CSS custom properties — exact values) ```css :root { --washi: #F1E9DE; /* primary paper cream (light sections, footer) */ --washi-warm: #ECE4D9; /* hero sky wash */ --washi-deep: #E4DED5; /* gradient partner for washi-warm */ --sand: #E9D4BD; /* card fill / warm accent surface */ --river-stone: #C1BBB2; /* muted water grey-taupe, borders at 40% */ --ink: #251C16; /* primary dark — text on light, night bg */ --night: #241B15; /* night section background */ --night-deep: #1A130E; /* night vignette edge */ --cream-text: #EDE9DF; /* text over imagery / dark bg */ --sakura: #E8B4C0; /* petal pink */ --sakura-deep: #D98E9F; /* petal shadow pink */ --vermilion: #C4472F; /* torii red — accents, hover, small marks only */ --lantern: #E8A54B; /* lantern glow amber — night accents */ } ``` Rules: light sections use `--washi` bg + `--ink` text. Night uses `--night` bg + `--cream-text`. `--vermilion` appears only in tiny doses: the torii logo mark, link hover underlines, section-number tick marks, one CTA. Borders are always 1px `--ink` at 12–15% opacity on light, `--cream-text` at 15% on dark. ### 3.2 Typography - **Display serif:** `"Cormorant Garamond"` (Google Fonts), weights 400/500 + *italic*. This is the voice of the site. - **UI sans:** `"Space Grotesk"` 400/500 for nav, kickers, captions, buttons. - **Japanese accents:** `"Noto Serif JP"` 400 for vertical kanji strips. Scale (clamp-based, desktop reference): ```css --display-xl: clamp(4rem, 11vw, 11.5rem); /* hero + footer wordmark */ --display-lg: clamp(3rem, 7vw, 7rem); /* section headings */ --display-md: clamp(2rem, 4vw, 3.5rem); /* overlay lines on films */ --body: clamp(1rem, 1.15vw, 1.185rem); --caption: 0.8125rem; --kicker: 0.6875rem; /* letter-spacing: 0.32em; uppercase */ ``` Display type: `line-height: 0.95–1.05`, `letter-spacing: -0.015em`, mixed roman/italic within one headline — italicize the emotional word(s) (e.g., "Where Petals ***Drift*** Downstream"). Body: `line-height 1.7`, max-width `34em`, color `--ink` at 78% opacity on light. Kickers always render as: small vermilion or ink 6px square/tick + 0.32em-tracked uppercase Space Grotesk, e.g. `— THE JOURNEY`. ### 3.3 Texture & grain - A full-viewport fixed film-grain overlay: WebGL fragment shader or animated SVG `feTurbulence`, opacity 0.05, `mix-blend-mode: overlay`, regenerated per frame (subtle animated noise, not static). - Every image sits in a frame with a 1px inset border (`--ink` 15%) offset 10px outside the image edge — like a woodblock print mat. - Soft paper vignette on light sections: radial gradient darkening corners by 3%. --- ## 4. PRELOADER Washi bg. Center: torii mark (simple 2-stroke SVG in `--vermilion`) above the word **KOISEI** in display serif, tracking-in from `letter-spacing: 0.5em` → `0.02em` (1.2s, `power3.out`). Below, a 1px progress line growing 0→100% width tied to real asset loading, with a percentage counter in Space Grotesk. On complete: line flashes to vermilion, whole loader wipes upward with a `clip-path: inset(0 0 100% 0)` over 0.9s `power4.inOut`, revealing the hero already mid-settle. Total minimum display 1.6s. --- ## 5. NAVIGATION (fixed, persistent) - Height 88px, full-width, no background initially; padding-inline 48px. - **Left:** torii SVG mark (22px, vermilion) + wordmark `KOISEI` (Space Grotesk 500, 0.2em tracking, 14px). - **Right:** links `Journey · Stories · Gallery · Visit` (13px, 0.12em tracking) + a Japanese character `旅` in Noto Serif JP + a pill-outline button `Begin` (1px border, 12px, padding 10px 22px; hover: fills `--ink`, text `--washi`). - Link hover: 1px vermilion underline draws left→right (transform: scaleX, 0.35s `power2.out`). - On scroll down > 120px: nav background fades in as `--washi` at 82% + `backdrop-filter: blur(12px)`, height compresses to 68px. When over the night section, swap to `--night` at 82% and cream text (toggle a `.nav--night` class via ScrollTrigger `onToggle`). - Left screen edge, vertically centered, fixed: a vertical progress rail — 1px line, 160px tall, with a fill tracking total scroll progress and tiny dots at each section; below it the current section index `01 / 07` in 10px Space Grotesk, rotated 90°. --- ## 6. SECTION 1 — HERO ("Where Petals Drift Downstream") **Layout.** 100svh, full-bleed `HERO_RIVER` rendered as a **three.js textured plane** (not `<img>`) inside a fixed WebGL canvas, covering the viewport with `cover` UV math. Optionally crossfade to `HERO_VIDEO` (muted, loop, playsinline) after load for ambient motion — video as `VideoTexture` at 0 opacity fading to 1 over 2s. **Type.** Centered, slightly below vertical center: - Kicker: `— A JOURNEY DOWN THE SPRING RIVER` (cream, 0.32em tracking). - H1 in `--display-xl`, `--cream-text`, two lines: `Where Petals` / `*Drift* Downstream` (word "Drift" italic). Text has `text-shadow: 0 2px 40px rgba(37,28,22,0.35)`. - Under it: a thin 1px cream rule 64px wide, then `Koisei — 恋静` caption. - Bottom center: `SCROLL` label + 40px vertical line with a dot that loops downward (1.8s, `power1.inOut`, infinite). - Right screen edge: vertical Japanese strip `桜の川を下る` (Noto Serif JP, writing-mode: vertical-rl, cream 60%). **Entrance (after preloader).** Each headline line wrapped in an overflow-hidden mask; lines rise from `y: 110%` with `rotate: 2deg → 0`, stagger 0.12s, 1.1s `power4.out`. Kicker and rule fade/track-in 0.3s later. WebGL plane starts at `scale 1.12` easing to `1.0` over 2.4s. **WebGL petal system (signature element).** - `THREE.InstancedMesh`, 380 instances desktop / 120 mobile, each a small plane (8–18px) with a hand-drawn 5-petal sakura texture (draw it on an offscreen canvas: rounded-heart petal shape, `--sakura` fill, `--sakura-deep` inner shadow). - Per-instance attributes: size, phase, rotation speed, depth (z: -2 to 2 for parallax). - Motion in vertex shader or per-frame update: downward drift `vy = 0.15–0.4`, horizontal sway `x += sin(time*0.8 + phase) * 0.3`, plus a **curl-noise flow field** (simplex-based) bending trajectories like wind gusts; tumbling rotation on 2 axes. - Mouse interaction: pointer position pushes a radial impulse (radius 180px, force falls off quadratically) — petals scatter away from the cursor and recover. - Petals render OVER the hero image but UNDER the text (canvas z-index between). - Petal opacity ties to scroll: fade to 0 by the time section 3 begins, re-emerge tinted `--lantern` amber (fireflies/embers, slower, upward drift) in the night section. **Ripple shader on hero plane.** Fragment shader: subtle vertical sine displacement on the lower 35% of the image (the water) — `uv.x += sin(uv.y*40.0 + uTime*1.2) * 0.0015 * waterMask`, plus mouse-hover ripple: a decaying radial wave from pointer position (`uMouse`, `uWaveTime`). **Scroll exit (pinned, scrub).** ScrollTrigger pins the hero for `+=120%`. As you scroll: plane scales 1.0 → 1.18 and darkens (shader `uDarken` 0 → 0.25), headline moves up at 1.4× scroll speed and fades, and Section 2 slides over it from below like a paper sheet (Section 2 has higher z-index, `border-radius: 32px 32px 0 0` on its top edge during the overlap, flattening to 0 once fully covering). --- ## 7. SECTION 2 — MANIFESTO ("A River Remembers") Washi bg. Generous padding (16vh top/bottom). - Kicker left: `— 01 · THE PHILOSOPHY`. - A `--display-lg` serif statement spanning ~11 columns of a 12-col grid, `--ink`, mixed italics: `Every spring, the river carries a *million petals* from the mountains to the sea — and every petal remembers the tree it fell from.` - **Inline image tokens:** inside this headline, embed two small rounded-rect images (140×90px, border-radius 60px, the `KOI_RIVER` and `TEMPLE_CANAL` crops) sitting on the text baseline between words — they scale in from 0 width as the line reveals (a la modern editorial sites). - Reveal: split into lines (SplitType or manual), masked line-rise stagger 0.09s triggered at 70% viewport, scrub-free (`toggleActions: "play none none reverse"`). - Right-aligned below, max-width 34em body paragraph + a text link `Read the story of Koisei →` with draw-on underline. - Two large numbers row (`1,200 km` / `4 seasons`) in display serif with small caps labels, counter-animating up when in view. --- ## 8. SECTION 3 — SCROLL FILM I (pinned, video scrubbed by scroll) Full-bleed cinematic chapter using `SCROLL_FILM_1` (12s: koi → bridge → temple). **Mechanics (exact):** - `<video preload="auto" muted playsinline>` covering 100svh, `object-fit: cover`. - Pin the section for `+=400%` scroll. In `onUpdate`: `video.currentTime = self.progress * video.duration`, smoothed through a lerp (`current += (target - current) * 0.1` in a rAF loop) so scrubbing feels buttery, never steppy. Ensure the file is keyframe-dense; if seeking stutters, fall back to a canvas-drawn frame pipeline. - **Three text chapters** fade in/out sequentially over the film at progress 0.05–0.3, 0.38–0.63, 0.7–0.95. Each: centered kicker (`FIRST BEND`, `UNDER THE BRIDGE`, `THE TEMPLE GATE`) + one `--display-md` cream serif line (e.g., `*Koi* swim against the falling sky`). Text enters with masked rise + slight letter-spacing decay, exits fading up 40px. - Right edge: a vertical chapter indicator `Ⅰ · Ⅱ · Ⅲ` with the active numeral in vermilion. - Bottom left: a thin film-style progress bar (1px track, cream fill) showing scrub progress with `00:00 / 00:12` timecode in Space Grotesk tabular numerals. - Edge treatment: 6% `--night-deep` vignette + the global grain makes it feel filmic. --- ## 9. SECTION 4 — HORIZONTAL GALLERY ("Stations of the River") Pinned horizontal scroll on `--washi`. - Header row (static during pin): kicker `— 02 · STATIONS`, heading `Three *stations*, one current` (`--display-lg`), and right-aligned instruction `( scroll )`. - A track of **3 oversized cards** translating X from `0` to `-(trackWidth - viewport)` with `scrub: 1`, pinned `+=250%`. - Card spec: width `min(66vw, 900px)`, height 68vh, gap 6vw. Inside: the image fills the card with `overflow: hidden`; image itself is scaled 1.15 and translates X opposite to track motion (inner parallax, ±7%). 1px offset mat border. Corner radius 4px. - Card 01 — `TEMPLE_CANAL` — `Higashiyama Canal` — caption: `Stone bridges, incense, morning bells.` - Card 02 — `KIMONO_LANE` — `The Kimono Lane` — caption: `Where the road remembers slower centuries.` - Card 03 — `LANTERN_WATER` — `Asakusa Waterside` — caption: `Lanterns lean over the current at dusk.` - Each card's chrome: giant outlined number `01` (display serif, 9rem, `-webkit-text-stroke: 1px var(--ink)`, transparent fill) overlapping the image's top-left corner; title beneath the image in `--display-md`; caption + `Visit station →` link. - Numbers fill with solid ink when their card crosses viewport center. - Bottom: 1px progress line for the horizontal track + `01 — 03` counter that swaps with a small roll animation. - Cursor becomes a custom circular `DRAG`/`→` badge over this section (40px circle, mix-blend-difference). --- ## 10. SECTION 5 — DAY TO NIGHT (the metamorphosis) The emotional pivot. A pinned 100svh section, `+=200%`. - Background color animates `--washi` → `--night` via GSAP scrubbing a CSS variable (`backgroundColor` interpolation). The fixed nav flips to `.nav--night`. The global petal system swaps pink→`--lantern` embers drifting **upward**. - Centered: `LANTERN_WATER` image inside a tall portrait frame (42vw × 78vh) that **scales up to full-bleed** (transform scale + width/height interpolation via GSAP `flip` or clip-path expansion: `clip-path: inset(11vh 29vw)` → `inset(0)`), while a WebGL **dissolve shader** crossfades `LANTERN_WATER` → `NIGHT_LANTERN` using a perlin-noise threshold mask (`smoothstep(uProgress-0.08, uProgress+0.08, noise(uv*4.0))`) so day literally dissolves into night like ink in water. - Overlay copy at progress 0.1: kicker `— 03 · NIGHTFALL`, line `The river doesn't sleep — it *dreams*` in `--display-lg`, ink color transitioning to cream in sync with the bg. - Lantern glow: 6–8 positioned radial-gradient sprites (additive blending in the WebGL scene) pulsing gently (`opacity 0.6→0.9`, 3s sine loops, staggered) at the lantern positions of `NIGHT_LANTERN`. --- ## 11. SECTION 6 — SCROLL FILM II (night) Same mechanics as §8 with `SCROLL_FILM_2` (kimono → Asakusa night), pinned `+=350%`, on `--night`. - Two chapters: `THE LAST LANE` (`She walks where the lanterns *lean*`) and `ASAKUSA AT NIGHT` (`Every light is a wish going downstream`). - Ends with a full-stop moment: film settles on its final frame, darkens 30%, and a centered quote fades in — `"恋静 — quiet love, moving water."` with attribution `— Koisei` — held for the last 15% of the pin. --- ## 12. SECTION 7 — FOOTER On `--washi` (snap back to light with a quick 0.8s bg transition — dawn). - Top row: kicker `— BEGIN YOUR JOURNEY`, then a giant CTA line `Come see the river *bloom*` (`--display-lg`) with a circular vermilion button (120px, `Begin →`, magnetic hover: translates toward cursor within 24px, springs back `elastic.out(1, 0.4)`). - Middle: 3 link columns (Journey / Stories / Visit · Instagram / Vimeo / http://Are.na · Contact / Press) in Space Grotesk 13px, hover underline draw; plus a vertical `ありがとう` strip. - Bottom: the wordmark **KOISEI** at `--display-xl` stretched nearly full-width (`font-size` fitted via JS to viewport width), ink color, sitting on the baseline of the page — it rises from below with a masked reveal as the footer enters, with petals settling on top of the letters (petal system y-velocity → 0 near footer, landing on an invisible floor at the wordmark's cap line). - Very bottom: 1px rule, `© 2026 Koisei — down the spring river` left, `Kyoto → Tokyo` right, 10px. --- ## 13. GLOBAL MOTION LANGUAGE - Easing vocabulary: reveals `power4.out`, pinned scrubs linear (`scrub: 1`–`1.5`), color shifts `none` (scrub), micro-interactions `power2.out`, magnetic/elastic `elastic.out(1,0.4)`. - Every heading reveal = masked line rise (110% → 0, 1–2° rotation settle). Every image reveal = `clip-path: inset(100% 0 0 0)` → `inset(0)` at 1.2s `power4.inOut` with inner image counter-scaling 1.25 → 1. - Parallax: decorative elements move at 0.85×–1.2× via `data-speed` attributes processed by a single ScrollTrigger. - Custom cursor: 8px ink dot + 32px trailing ring (lerp 0.15); ring expands to 56px over links, morphs to `→` over cards, `▶` over films. - `prefers-reduced-motion`: kill pins/scrubs, videos become posters, petals static, reveals become simple fades. ## 14. PERFORMANCE & RESPONSIVE - One shared `WebGLRenderer` (alpha, antialiasing off, `devicePixelRatio` capped at 1.75); planes/particles added-removed per section visibility. Pause rAF work for offscreen scenes via IntersectionObserver. - Videos: `preload="metadata"` until their section is within 150% viewport, then `preload="auto"`. - Mobile (<768px): petals 120, horizontal gallery becomes native swipe track (no pin), film pins shorten to `+=250%`, display-xl clamps down, inline headline images hidden, custom cursor disabled. - Lazy-decode all plates (`decoding="async"`), and serve the WebGL textures through `THREE.TextureLoader` with `SRGBColorSpace`. ## 15. ACCEPTANCE CHECKLIST 1. Loader → hero entrance feels like one continuous shot. 2. Petals react to the mouse and change character (pink/down → amber/up) across day/night. 3. Both films scrub perfectly smoothly with lerped `currentTime`. 4. Day→night dissolve uses a noise-threshold shader, not a plain crossfade. 5. Horizontal gallery has inner-parallax images and outlined numbers that fill on center. 6. Nav adapts light/dark automatically; progress rail tracks 7 sections. 7. Footer wordmark nearly spans the viewport and petals settle on it. 8. Grain, mat borders, and vignettes present on every section. 60fps on an M1 laptop.

Design a vast, hypnotic, ultra-minimal landing page for a Kubrick-inspired space tourism company called ODYSSEY BEYOND. Zero static images — every visual surface is living video. HERO SECTION: Full-screen looping cinematic video recreating the docking sequence from 2001: A Space Odyssey. A sleek white spacecraft rotates slowly in vacuum, sunlight crawling across its hull in a razor-sharp line. A massive rotating space station grows incrementally larger — the camera performs an imperceptibly slow forward dolly toward the docking bay. No sound, only visual rhythm of rotation and approach. Stars hold perfectly still. Color grade references ENR silver-retention — ultra-high contrast, blown-out whites on hull, inky blacks in space, subtle cool blue cast, sterile and clinical. ODYSSEY BEYOND appears in thin wide-tracked sans-serif, fading in with glacial slowness. Below: Commercial Orbital Departures — 2027. CTA: a white outlined circle that fills slowly like an airlock pressurizing on hover. Color palette: Void Black #000000, HAL Red #FF0000, Starlight White #F5F5F5, Orbital Blue #1565C0, Station Grey #B0BEC5. Fonts: Orbitron for headings, Inter for body. Sections: (1) Destinations — full-width video panels: Earth rotating from orbit, Moon surface gliding beneath a window, station corridor with Earth through porthole. Stats count up like instruments. (2) The Vessel — 360-degree orbiting video of spacecraft exterior, interior clips of floating water droplets, observation deck with Earth filling the window. (3) Training Program — centrifuge, zero-G simulation, pressure suit fitting — each framed as Kubrick one-point-perspective shots. (4) Mission Control — dashboard over flickering control room video, countdown timers. Every frame obsessively composed. The silence should feel loud.

Build a full-screen hero section with a fixed background video (position: fixed, object-cover, muted, playsInline, preload="auto"). Tie video playback to scroll using Framer Motion's useScroll hook - map scroll progress (0-1) to video.currentTime via targetTimeRef, then smoothly interpolate with requestAnimationFrame loop using lerp (currentTimeRef += diff * lerpFactor). Add a dark overlay (bg-background/50) on the video. Create multiple text sections that fade in/out based on scroll position using useTransform for opacity, Y translation, and blur. Make the hero container h-[300vh] with a sticky top-0 h-screen inner wrapper so content scrolls over the fixed video. Include a scroll indicator at the bottom that fades out on scroll (useTransform(scrollYProgress, [0, 0.05], [1, 0])).

Build a production-ready, responsive landing page using React, Tailwind CSS v4, and Vite. The design should feature a high-end, dark-mode "glassmorphism" aesthetic with specific purple/pink gradients. 1. Tech Stack & Libraries: Use hls.js for video streaming. Use motion/react (formerly Framer Motion) for animations. Use react-use-measure for sizing logic. Use clsx and tailwind-merge for class management. Use lucide-react for standard icons (if needed), but I will provide custom SVG paths for specific UI elements. 2. Global Styling: Background: Dark/Black (#010101). Primary Gradient: A diagonal gradient used for accents: from-[#FA93FA] via-[#C967E8] to-[#983AD6]. Typography: Modern sans-serif, center-aligned hero text. 3. Hero Section Components: Announcement Pill: A pill-shaped top badge. Background: Semi-transparent dark (bg-[rgba(28,27,36,0.15)]) with a subtle border. Icon: A "Zap" icon inside a gradient-filled box with a glow effect. Text: "Used by founders. Loved by devs." in light grey. Main Headline (H1): Large text (responsive sizing: 48px mobile to 80px desktop). Text: "Your Vision" on line 1, "Our Digital Reality." on line 2. Style: Text should have a gradient fill (White to Purple/Pink). Subheadline: Text: "We turn bold ideas into modern designs that don’t just look amazing, they grow your business fast." Color: text-white/80. CTA Button: "Book a 15-min call" text. Rounded full button with a white background and black text. Includes a circle icon with an arrow inside, styled with the primary purple gradient. Outer border wrapper with a glass effect. 4. Hero Video Integration (Critical Details): Source: HLS Stream URL: https://customer-cbeadsgr09pnsezs.cloudflarestream.com/697945ca6b876878dba3b23fbd2f1561/manifest/video.m3u8 Fallback: If HLS fails, fallback to this MP4: /_videos/v1/f0c78f536d5f21a047fb7792723a36f9d647daa1 Implementation: Do NOT use react-player. Use a native <video> tag with a custom useEffect hook implementation of hls.js. Styling: Blend Mode: Use mix-blend-screen so the video black background blends into the page. Positioning: The video should be at the bottom of the hero. Apply a negative top margin (-mt-[150px]) so it overlaps behind the text. Z-Index: Ensure the text content is z-20 (above) and video is z-10 (below). Layout: The video must be 100% width (w-full), auto height, and stretch edge-to-edge without being cropped (do not use object-contain or fixed heights). Overlay: Add a gradient fade (from-[#010101] via-transparent to-[#010101]) over the video container. 5. Logo Cloud Section (Animated): Place this section immediately below the video. Background: Semi-transparent glass (bg-black/20 backdrop-blur-sm) with a top border (border-white/5). Layout: Desktop: "Powering the best teams" text on the left, separated by a vertical divider. Animated logo slider on the right. Mobile: Stacked vertically. Animation: Create an InfiniteSlider component using motion/react that scrolls logos horizontally forever. Logos: Use these SVG URLs (OpenAI, Nvidia, GitHub, etc.) and apply brightness-0 invert to make them white. https://html.tailus.io/blocks/customers/openai.svg https://html.tailus.io/blocks/customers/nvidia.svg (Include others similarly) Please assemble these into a cohesive Hero.tsx, App.tsx, and components/ui/infinite-slider.tsx structure.

Build a dark, minimal "Automation Machines" landing page in React + Vite + Tailwind CSS v4 + Motion (from "motion/react") + Lucide React icons + Spline 3D. Fonts (Google Fonts): Orbitron (headings), Space Grotesk (body), JetBrains Mono (labels/stats/nav). Tailwind v4 theme colors: brand-orange #F27D26, bg #0a0a0a, text #f5f5f5, muted #888, stroke #1f1f1f. All backgrounds are pure black. Text is white at varying opacities. No purple/indigo anywhere. Layout & Spline 3D: A fixed full-screen Spline scene (z-20) using https://prod.spline.design/PIgTjpRFA03yfLyK/scene.splinecode, lazy-loaded. On scroll, the Spline wrapper smoothly repositions via CSS transform: centered-right for hero (translateX 28%, scale 1.1), slides left for features (translateX -30%, scale 1.05), slides right for process (translateX 30%, scale 1.1). Use lerp between keypoints based on normalized scroll progress. The Spline object also rotates: rotation.y = scrollProgress * PI * 2. Forward wheel/touch events from the Spline canvas to window.scrollBy so scrolling works over the 3D. Content sections use pointer-events-none (with buttons/links set to pointer-events-auto) so the 3D stays interactive beneath. Z-index layers: Hero z-10, Spline z-20, Features/Process z-30, Navbar/ScrollProgress z-50. Scroll Progress Bar: 1px white/40 line fixed at top, driven by motion's useScroll + useSpring (scaleX). Navbar: Fixed, z-50. Logo "Automation" in Orbitron uppercase tracking-widest. Links: Home, Features, Process, Stats -- in JetBrains Mono 11px uppercase white/50. CTA "Get Started" white pill button. Background transitions from transparent to black/70 + backdrop-blur on scroll. Mobile hamburger menu. Hero Section: Centered, min-h-screen. Large Orbitron title "Automation / Machines *" -- extralight uppercase, gradient text from white/20 via white/70 to white. Subtitle in Space Grotesk white/70 about building the web. Row of 3 circular icon buttons (Snowflake, Maximize, Zap). All fade-up animated. Features Section: Right-aligned (flex justify-end, w-55% on desktop). Section header: thin line + "Core Systems" mono label, then Orbitron title "Built for / Performance" (first line gradient, second solid white). 3 cards in a grid with border white/6, rounded-2xl, bg white/2. Each card has an icon, stat value (JetBrains Mono), and title. Cards: (Cpu, "Intelligent Runtime", "<12ms Response"), (Globe, "Edge Distribution", "200+ Nodes"), (Shield, "Zero-Trust Security", "256-bit Encryption"). Staggered fade-up on scroll. Process Section: Left-aligned (w-50% on desktop). Same header pattern: "Workflow" label, "From Idea / To Production" title. Vertical timeline with 2 steps, each with a circle icon connected by an animated vertical line. Steps: (Terminal, "01 Initialize & Develop", tags: "TypeScript + Vite", "HMR < 50ms"), (Rocket, "02 Deploy & Monitor", tags: "Zero-config CI/CD", "Live metrics"). Tags are small mono-text pill borders. Slide-in-from-left animation. useInView hook: IntersectionObserver-based, fires once (never reverses). Used for all section entrance animations. Key design rules: Section headers always follow: horizontal line + mono label above, large Orbitron gradient-to-solid title below Typography: Orbitron for display, Space Grotesk for body, JetBrains Mono for labels/stats All animations are entrance-only, no reverse Dark, technical, minimal aesthetic -- like a developer infrastructure product

Build a Duolingo landing page clone using Vite (vanilla JS, no framework). The page has the following sections in order: FONTS Primary font: Nunito from Google Fonts (weights: 400, 500, 600, 700, 800, 900) Display/heading font: Feather Bold from https://db.onlinewebfonts.com/c/14936bb7a4b6575fd2eee80a3ab52cc2?family=Feather+Bold CSS font stack fallback: 'Nunito', 'DIN Round Pro', -apple-system, BlinkMacSystemFont, sans-serif CSS VARIABLES --green: rgb(88, 204, 2) --dark-blue: rgb(16, 15, 62) --blue: rgb(28, 176, 246) --gray-text: rgb(75, 75, 75) --gray-light: rgb(119, 119, 119) --border-color: rgb(229, 229, 229) --nav-text: rgb(175, 175, 175) --footer-green: #4EC604 --footer-header: rgb(215, 255, 184) --footer-link: rgb(165, 237, 110) VIDEOS (HLS via hls.js) All videos use HLS streaming via hls.js loaded from CDN: https://cdn.jsdelivr.net/npm/hls.js@1.5.7 Videos are lazy-loaded using IntersectionObserver with 200px rootMargin. Each video is initialized only once. When out of viewport, videos pause. When back in viewport, they resume. HLS is configured with capLevelToPlayerSize: false, startLevel: -1, abrEwmaDefaultEstimate: 50000000, maxBufferLength: 60, maxMaxBufferLength: 120. On MANIFEST_PARSED, force the highest quality level. Video sources (all .m3u8 HLS streams from Mux): Hero video (heroVideo): https://stream.mux.com/ze00dOwsh5muXXj01EWSfdilcHjcGqlznBuFR5GEYlZe00.m3u8 Section 2 - "free. fun. effective." (section2Video): https://stream.mux.com/fZLc8HBCvnnsJ1Z021CzK00VDsaM2G01QaApokgnLiil6Q.m3u8 Section 3 - Super Duolingo (section3Video): https://stream.mux.com/JYOLW4tkLJJL4hOKcazRgJqjaV00AfQvh2Nca701vxUao.m3u8 Learn Anywhere background (learnAnywhereVideo): https://stream.mux.com/6xLBelbJrZGw00K2jPsZtGm8pkftvfezQ8rdAmHL9HoM.m3u8 Section 4 - English Test (section4Video): https://stream.mux.com/eEVujEMKUUknKhmJ6vtVeHuRtzS51401CFZM6pFp8yj00.m3u8 CTA bottom video (ctaVideo): https://stream.mux.com/1RSKj01UjpjdbxtOEtuQ01t1O00fqI5QQbn7mTW7UiTBy8.m3u8 All <video> elements have: autoplay muted loop playsinline. SECTION 1: FIXED NAVIGATION BAR Fixed to top, z-index 2, white background, bottom border 1px solid rgb(229,229,229) Inner container: max-width 1440px, centered, height 70px, padding 0 24px, flex space-between Left: Duolingo logo link to https://www.duolingo.com/, logo image: https://d35aaqx5ub95lt.cloudfront.net/images/splash/f92d5f2f7d56636846861c458c0d0b6c.svg (179x42px) Right: "Site language: English" button with dropdown arrow icon https://d35aaqx5ub95lt.cloudfront.net/images/splash/c6eae48dd48246c89e415b89f9e55282.svg (14x14px), text is uppercase, font-weight 700, color rgb(175,175,175), font-size 16px Favicon: https://d35aaqx5ub95lt.cloudfront.net/vendor/avatars/duo_original.svg SECTION 2: HERO Flex row, centered, gap 80px, padding 48px 80px, max-width 1200px, flex:1 to fill remaining header height Header wraps nav + hero + lang-nav, has padding-top 70px (for fixed nav), min-height 100vh Left column: Video (424x424px, aspect-ratio 1, object-fit contain, border-radius 16px, white background) Right column:h1: "The free, fun, and effective way to learn a language!" - color rgb(75,75,75), font-size 32px, max-width 400px, text-align center, line-height 1.3 "Get started" button: green (rgb(88,204,2)), white text, height 50px, border-radius 12px, uppercase, font-weight 700, font-size 16px, full width, box-shadow 0 4px 0 #61B800, links to /register "I ALREADY HAVE AN ACCOUNT" button: transparent bg, blue text (rgb(28,176,246)), 2px border #CFCFCF, height 50px, border-radius 12px, box-shadow 0 4px 0 #CFCFCF Buttons container: max-width 330px, gap 12px, margin-top 40px on desktop (768px+) SECTION 3: LANGUAGE NAVIGATION BAR Full width, bordered top and bottom with 2px solid rgb(229,229,229) Grid: 14px 1fr 14px, gap 30px, height 74px, max-width 1056px Left/right: chevron SVG arrows (14x14px, stroke #afafaf). Right arrow rotated 180deg. Clickable - scrolls the list by 300px Center: horizontal scrolling list (overflow-x auto, hidden scrollbar), gap 24px Each language item: flex row, flag image (36x27.77px) + uppercase text (16px, font-weight 700, color rgb(119,119,119)), gap 6px, padding 4px, border-radius 8px, hover bg rgba(0,0,0,0.05) 38 languages total with their respective CloudFront flag SVG URLs (all from http://d35aaqx5ub95lt.cloudfront.net/vendor/):English: bbe17e16aa4a106032d8e3521eaed13e.svg Spanish: 59a90a2cedd48b751a8fd22014768fd7.svg French: 482fda142ee4abd728ebf4ccce5d3307.svg German: c71db846ffab7e0a74bc6971e34ad82e.svg Italian: 635a09df9323279d39934a991edd4510.svg Portuguese: 27d253ae1272917fc9f4a79459aacd53.svg Math: 395c8a6ee9783610b578b02fda405e85.svg Dutch: de945d789e249dcd74333a6996472ef8.svg Japanese: edea4fa18ff3e7d8c0282de3f102aaed.svg Arabic: 9ab6930a263c981b57f9d578ac97cae7.svg Czech: 828bf0fea457d3beaaab3d6c0bfcc975.svg Welsh: f773f1b240623072e48843ecdf90d756.svg Danish: 6af84a7cb8e99ea8a567c2b9c55b9926.svg Greek: 8db373482261397a3159d3f370eed2f3.svg Esperanto: 6de7e4731b2a82a6458268e1a3d67ce4.svg Finnish: b4d0e4f6451f504e1441eb93efdbea5e.svg Irish: ef0bfb96037b127473bd7bcbfde1a6ed.svg Scottish Gaelic: 09eba3135efe8fe93a4662dba813b921.svg Hebrew: f818f545a703ddaa046ca8786e781742.svg Hindi: 73837fa39dbf1bcc4c95a17a58ed0ffb.svg Haitian Creole: 8cb302b44c183c1a8ec3b90caf90d922.svg Hungarian: 2ed8d0a73eab3c9cba0290e2b459684a.svg High Valyrian: 2880099b038848abbfd11104097953ad.svg Hawaiian: 312e21f793c555787d01a45e20ee8191.svg Indonesian: 339c0413e542f19b234971d7740447e7.svg Korean: ec5835ac9f465ff3dad4b1b8725d4314.svg Latin: f7cee6cc09270371b097129faf792c2a.svg Norwegian (Bokmal): 90b37d97edc66e830dc2286279548f67.svg Navajo: bbc8ad0cfe2596d5193376ebdc3e969c.svg Polish: f095084e6ec400e631d62c3d95fefaa2.svg Romanian: 357e13bb10cf86fc06552d563957e2e6.svg Russian: eadd7804652170c33814a89482f1f353.svg Swedish: f578430c9b7ab617c107893afbb501c0.svg Swahili: 335311988405b4354e1b6ae9037c02db.svg Klingon: 76d654213a8282b0ebc25b4f535ee003.svg Turkish: bc80a9518cd6d5af6ae14e8b22b8a1f4.svg Ukrainian: 7c6e12bc57527843082f7f5bb77c9862.svg Vietnamese: 2b077d42185bc45d4896ed55f15c4fea.svg Yiddish: 55bad151fa6a8d9e2376fc9697c671c8.svg Chinese: 9905aa3a86fcb9e351b0b3bfaf04d8b9.svg Zulu: 112e1531d0ac198a9424bd1b0a7166e6.svg SECTION 4: "free. fun. effective." Flex row, centered, gap 102px, padding 96px 80px, max-width 1200px Left: text content (max-width 480px)h2: "free. fun. effective." in Feather Bold, green (var(--green)), font-size 48px, line-height 1.1, white-space nowrap Paragraph: gray (rgb(119,119,119)), 18px, line-height 1.6. Contains link "research shows that it works" to /efficacy in blue, font-weight 700 Full text: "Learning with Duolingo is fun, and research shows that it works! With quick, bite-sized lessons, you'll earn points and unlock new levels while gaining real-world communication skills." Right: 530x530px video container (white bg, border-radius 16px) SECTION 5: GRADIENT BAR + "LEARN ANYTIME, ANYWHERE" Gradient bar: full width, 150px height, linear-gradient(to bottom, #ffffff, #DBF3FF) Section: relative positioned, background #ddf0fa, flex, align-items flex-start, justify center, min-height 100vh, padding 60px 40px 120px, overflow hidden Background video: absolute positioned, covers full section, object-fit cover, z-index 0, background-color #ddf0fa Content (z-index 1):h2: "learn anytime, anywhere" (with <br> between comma and "anywhere"), color rgb(1,45,82), Feather Bold, 48px, line-height 1.15, text-align center Two store buttons side by side (gap 16px):App Store button: Apple icon image https://images.higgs.ai/?default=1&output=webp&url=https%3A%2F%2Fd8j0ntlcm91z4.cloudfront.net%2Fuser_38xzZboKViGWJOttwIXH07lWA1P%2Fhf_20260405_154356_13de5dda-6dfe-4f54-b3e2-251301254578.png&w=1280&q=85 (28x28px), "Download on the" + "App Store", links to Apple App Store Google Play button: Play icon image https://images.higgs.ai/?default=1&output=webp&url=https%3A%2F%2Fd8j0ntlcm91z4.cloudfront.net%2Fuser_38xzZboKViGWJOttwIXH07lWA1P%2Fhf_20260405_154325_6e98dcdb-51ba-446a-8c52-2d2f2675a575.png&w=1280&q=85 (28x28px), "Get it on" + "Google Play" Both: white bg, 2px border #CFCFCF, border-radius 12px, padding 10px 20px, box-shadow 0 4px 0 #CFCFCF, hover bg #f0f0f0 Store label: 11px, font-weight 600, color rgb(75,75,75) Store name: 16px, font-weight 700, color rgb(75,75,75) SECTION 6: SUPER DUOLINGO (DARK) Background: #121138, flex row centered, gap 40px, padding 186px 80px Left: 530x530px video (bg matches dark section #121138) Right:Super Duolingo logo (uses <picture> with <source> for SVG): https://d35aaqx5ub95lt.cloudfront.net/images/splash/3a733db6d6873e1a915f70cf72554ce3.svg (source) and https://d35aaqx5ub95lt.cloudfront.net/images/splash/dd7453522d3192d4df06d4652508b8bc.svg (img fallback), 605px wide "Try 1 week free" button: white bg, dark text rgb(0,4,55), height 50px, border-radius 12px, uppercase, font-weight 700, min-width 162px, box-shadow 0 4px 0 #88879F, hover bg #c8f040 SECTION 7: DUOLINGO ENGLISH TEST Same layout as Section 4 but with flex-direction: row-reverse (text on left, video on right... visually reversed) h2: "duolingo english test" (with &nbsp; between english and test), green, Feather Bold, 48px Paragraph: "Our convenient, fast, and affordable English test integrates the latest assessment science and AI -- empowering anyone to accurately test their English where and when they're at their best." Link button: "Certify your English" in blue, uppercase, 16px, font-weight 700, height 50px, border-radius 12px, hover bg rgba(28,176,246,0.08), links to https://englishtest.duolingo.com/en SECTION 8: CTA - "LEARN A LANGUAGE WITH DUOLINGO" Flex row with green side panels (var(--green)) on left and right that grow to fill, aligned to bottom Center column:Top area: flex column centered, padding-top 40px, gap 48px h1: "learn a language with duolingo" in Feather Bold, green, 64px, text-align center, max-width 800px, line-height 1.1 "Get started" green button (same style as hero but with width: auto, padding: 0 32px, margin-bottom: 8px) Full-width video (100vw, white bg) below the CTA content SECTION 9: FOOTER Background: #4EC604, font-weight 700 Grid: 5 columns, gap 24px, padding 96px 64px 64px, max-width 1440px Column headers: color rgb(215,255,184), 20px, font-weight 700 Links: color rgb(165,237,110), 16px, hover opacity 0.8 + underline 5 columns: "About us" (12 links), "Products" (8 links), "Apps" (2 links), "Help and support" (4 links), "Privacy and terms" (4 links) + "Social" sub-header with margin-top 32px (6 links) Divider: 1px solid #A5ED6E Site language section: padding 40px 64px 64px, "Site language:" label + flex-wrap list of 28 language links (14px, color rgb(165,237,110)) RESPONSIVE BREAKPOINTS 1200px and below: Hero: padding 48px 40px, gap 40px Content sections: padding 72px 40px, gap 60px Animation wrapper: 400x400px Footer grid: 3 columns, padding 64px 40px 900px and below: Hero: column direction, padding 32px 24px, gap 32px, video 320px Content sections: column direction, padding 48px 24px, gap 40px, text centered Animation wrapper: 320x320px Dark section: column, padding 80px 24px Learn anywhere: padding 80px 24px, buttons stack vertically (max-width 280px) CTA h1: 48px, green sides hidden, section becomes column Footer: 2 columns, padding 48px 24px Lang nav: padding 0 16px, gap 12px 600px and below: Hero h1: 24px, video 280px Text h2: 32px, paragraph 16px Animation wrapper: 280x280px Dark section: padding 60px 16px Learn anywhere: padding 60px 16px, h2 32px CTA h1: 32px, top padding 32px, gap 32px Footer: single column, gap 32px Lang nav: gap 16px, text 14px, flags 28px Nav language button text hidden

**Create a full-screen hero section for a futuristic cyberpunk fashion e-commerce site with a pure black background.** **Typography:** - Display font: "Orbitron" (Google Font), used for headlines and buttons - Body font: "Space Grotesk" (Google Font) - All text is white **Background Video:** - A looping, muted, autoplaying background video covering the entire section - Video source: `https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260303_175853_da9ead9c-0e05-40d9-b9bd-06a9b5a73d27.mp4` - Apply a dark gradient overlay on top: `bg-gradient-to-t from-black/70 via-black/20 to-transparent` **Navigation (absolute positioned at top):** - **Left:** A circular black button (w-12 h-12 on mobile, w-[5.5rem] h-[5.5rem] on desktop) containing the site logo image - **Right (desktop only):** Three elements in a row: 1. Circular black button with a Search icon (w-[5.5rem] h-[5.5rem]) 2. Circular black button with a ShoppingCart icon (w-[5.5rem] h-[5.5rem]) 3. A pill-shaped black container (h-[5.5rem]) with a white circular avatar containing a User icon on the left, and the text "Contact" on the right - **Right (mobile only):** A circular black hamburger menu button (w-12 h-12). When tapped, it opens a black rounded dropdown below the nav with three rows: Search, Cart, Contact — each with icon + label **Product Pins (desktop only, hidden on mobile):** - Three floating product callouts positioned absolutely over the video: 1. **"NEUROVIBE MK-I — $230"** at `left-[8%] top-[18%]`: Text on the left, then a horizontal white line (w-20), then a small hollow white circle (w-2.5 h-2.5, border-2) 2. **"VOIDBLADE — $120"** at `right-[8%] top-[42%]`: Small hollow circle on the left, then a horizontal white line (w-16), then text on the right 3. **"SHADOW CIRCUIT JACKET — $450"** at `right-[8%] top-[58%]`: Same layout as VOIDBLADE — circle, line, text - Text uses `text-sm tracking-[0.15em] font-medium` for the name and `text-sm` for the price - Lines use `bg-primary-foreground/40`, circles use `border-primary-foreground/60` **Hero Headline (bottom-left):** - Positioned at `bottom-[8%] left-[3%]` - Three lines of uppercase text: "Future" / "Fashion," / "Redefined." - Font: Orbitron display, `text-5xl md:text-7xl lg:text-8xl`, `leading-[0.9] tracking-tight`, white **Shop Button (bottom-right corner):** - Positioned at `absolute bottom-0 right-0` - Black background, white text, `rounded-tl-[1.5rem]` (only top-left corner rounded) - Padding: `px-8 py-4` on mobile, `px-12 py-6` on desktop - Text: "Shop" on mobile, "Shop Now" on desktop - Font: Orbitron, `tracking-[0.2em] uppercase` **Color System:** - Background (--background): pure black `0 0% 0%` - Primary (--primary): black `0 0% 0%` - Primary-foreground: white `0 0% 100%` - Use semantic Tailwind tokens throughout — no hardcoded color classes

Build a landing page for an art curation app with an interactive cursor trail effect. The page should have a warm cream/linen textured background (color #FAF8F3) with subtle noise, gradient overlays, and faint linen-line patterns for a gallery feel. Create a cursor trail that spawns framed artwork images as the user moves their mouse - each image appears in a decorative picture frame (dark wood outer frame with gold inner border and cream mat) with slight rotation and drop shadows. The trail should show up to 8 images that fade in/out smoothly using Framer Motion. Include 3 different art collections (10-12 images each) that cycle when the user clicks anywhere on the page, with a matching custom cursor icon for each set. Add a header with the app name and auth buttons, plus a centered hero section with serif typography headline, description text, and CTA button. For the assets: Go to the IMAGES tab in Vibecode and generate 10-12 artwork images per theme (e.g., classical portraits, abstract art, landscapes). Generate them as vertical/portrait orientation. Also generate 3 custom cursor icons (small 50-60px images like a paintbrush, palette, or art-related symbol). Upload all images to the public folder, then reference them in arrays in your Index.tsx - one array per art set, plus an array for cursor icons. The cursor and trail images swap together when the user clicks.

<inputs> Ask me for: the product the landing page is for, the prompt a user types, a hero photo for the page, a background photo behind the prompt box, and my model name for the label. If I skip any, use the defaults: a meme landing page "Monke" for a monkey who takes selfies, the famous public-domain monkey selfie from Wikimedia Commons as the hero, the CC0 "Baby goat jumping" photo from Wikimedia Commons as the background (mirrored so the goat leaps on the right), the model label "Opus 5.5", and Mixkit's free track "Voxscape". </inputs> <direction> A 7.5 second prompt-to-website reveal, 1920x1080 at 30fps (226 frames), one continuous take: a prompt types, the send button is pressed, and the box itself becomes the finished landing page. Look: blue-graded sky #294376→#769cc2 with thin white line graphics (two circles, two horizontal and two vertical lines, two diagonals, 4-point sparkles at the crossings, a blurred violet→yellow→teal rainbow glow top-right, light film grain). The background subject is a crisp, opaque, full-colour cut-out (hand-traced mask, 2–3 px feather) on the right. White prompt box, radius 18, soft shadow; Inter 34.8px/44.4px #121212; black send button with a white arrow; a grey "Opus 5.5 ⌄" label beside it. Freshly typed characters arrive indigo #24249a, pass through blue and maroon, and settle to #121212 over ~13 frames. Page: full-bleed hero with the subject cut out on the right over a steel-blue sky #3b5876→#75a2c4, and a horizontal motion-blur smear of the subject trailing left. White Inter UI: logo top-left, nav Features/Pricing/FAQ/Download, an outline pill top-right, bold 63px headline, 23px paragraph, white pill CTA, three muted feature rows with icons, three muted wordmarks bottom-left. Default page copy: logo "Monke"; pill "Made with Claude Opus 5.5"; headline "Smile Harder. Selfie / Smarter, Week by Week"; paragraph "Monke tracks grins, bananas, selfies and naps—then turns every photo into clear, motivating progress you'll actually feel."; CTA "Get the Banana"; features "Grin zones (Z1–Z5 time & trends)", "Banana scores (coach-ready)", "Auto-sync from any camera you steal"; wordmarks BANANA CO. / JUNGLE / OPUS 5.5. Give the monkey white shield sport sunglasses with a mirrored lens (yellow→orange→red→magenta→orange→yellow, vertical streaks, top highlight, drop shadow) along his eye line (25° tilt). Banned: crossfades between scenes, stock UI kits, glows on the text, anything that looks like a template. </direction> <structure> Default prompt typed: "Build a premium, modern meme-tech landing page for a monkey who takes selfies. Create a full-screen cinematic hero featuring a grinning macaque in sport sunglasses, positioned on the right side with generous negative space on the left. Use a bold white headline about taking better selfies, a short supporting paragraph, and a clean rounded "Get the Banana" CTA. / Add a minimal top navigation with logo." f0–29, type: the box starts at x884 y635 709x112 and eases out to x570 y477 778x130 (90% there by f12) while the whole scene pulls back 7%. Typing starts on f4 with a real keystroke rhythm, reaches 30 characters by f26, then stalls. Four white selection handles hug the box corners. f29–44, charge: a violet solarised wash floods the scene (peak f36). The box tilts back up to 12° (rotateX, peak f36), the handles fly out to the frame corners, and an ASCII field of % @ # ⨸ glyphs appears at the left and right edges. The box grows to a tall card x541–1374, y425→227. On f40–48 the rest of the prompt bursts in (about 50 characters per frame) and fills ~12 lines. f48–63, settle: the tall card lands at x575 y227 766x626. The camera eases back toward the subject. A black cursor appears on f55 at (1455,595), pointing up-left, and grows to 112 px. f64–96, press: hard cut to a 3.19x zoom on the send button (75 px becomes 239 px on screen), a pale pink wash across the top. The cursor swings in from the right (f64–68) and glides to the button (f68–80). Press f80–86: the cursor squashes to 0.9, the button inflates 12% and flashes Claude terracotta #D97757, and the box edge bulges under it. f93–96 the frame blurs 6 px under a lavender veil. f97–120, reveal: wide shot. The page's hero photo zooms slowly behind (1.1% per frame). The box (763x596) drops from y60 to y245 with an ease-out, settled by f110. On f106–110 it turns grey, then goes dark from the bottom while a cyan band sweeps down through it (f111–121), wiping the text away. f121–145, morph: the box grows into the page, from x576 y245 763x596 to full frame on a fast ease-out (half the distance by f127, full by f145). Its fill is glass: a dark veil at the top, a cyan→white band sweeping down and out, white fading away. Every page element slides from inside the box to its final place on one progress curve (50% at f130, 90% at f147, done at f161). The headline types two lines at once from f122 to f158. f161–224, pull back: the page shrinks around its centre onto a flat #dddddd background, from 1920 px wide to 1344 px (1634 by f173, 1404 by f190, 1344 by f214). The hero's motion blur strengthens as it goes. f225 is black. </structure> <build> 1. One HTML file, 1920x1080, rendered from seek(t). Every style is a pure function of the frame: no CSS transitions, no timers, no Math.random. Use seeded hashes. 2. Animate with keyframe tables, kf(frame, [[f, value], ...], ease), interpolating numbers or arrays. Every move above is a table of these keyframes. 3. Cut-outs are SVG masks from hand-traced polygons with a 2–3 px Gaussian feather. The motion-blur smear is a scaleX-stretched copy through an SVG horizontal blur (feGaussianBlur stdDeviation="40 0"). 4. The press, the grey-to-dark box and the glass card are layered linear gradients whose stop positions are driven by the band value. 5. Sound: no voice. - Music: cut Voxscape so its first bass step lands at 1.72 s (source 38.76 s) and its big bass attack at 4.11 s (source 47.36 s, splice at 3.41 s). - Low-pass sweeps: the music dips to 400 Hz from 2.4 to 2.78 s and to 150 Hz from 3.41 to 3.58 s, reopens by 4.08, and fades out 6.6–7.5 s. - Synthesized sound effects: keystroke ticks on the typing (0.13–1.97 s) and on the headline (4.3–5.1 s); whooshes at 1.35, 2.18 and 3.30 s; a click at 2.78 s; a shimmer rising to 4.08 s; a sub boom at 4.09 s; a pop at 5.15 s; a settle at 6.54 s. - Master to -14 LUFS, true peak -1 dBTP. 6. Render with Playwright, one screenshot per frame, then encode h264 at 30 fps and mux the audio. </build> <gotchas> Measure text only after the fonts load, or the words collide. The cut-out subject must be opaque and crisp; blending it into the sky makes it look like a ghost. The zoom shot is a hard cut, not a zoom animation. Keep the page content inside the card while it grows (overflow hidden), except the nav, which sits above the box early on. Frame 225 is black. </gotchas> <start> Ask me for the inputs. Then show me 4 stills (f20 typing, f82 the press, f125 mid-morph, f200 the pull-back) before you render the full film. </start>

Build an Awwwards-level responsive website for “Lumenform”, a fictional creative AI studio. Use generated assets, multiple if needed. Make it cinematic, premium, original, with parallax, scroll-based motion, strong typography, layered depth, polished mobile, and clean interactions.

https://github.com/Leonxlnx/taste-skill/blob/main/skills/imagegen-frontend-web/SKILL.md Based on the skill above, generate images for a website for an AI agency. The design should include eight sections, with one image per section, for a total of eight distinct images. The website is for a creative AI company focused on research in creativity and design. Because of that, I want the visuals to feel highly original, playful, and art-directed, with text integrated thoughtfully into the design. Make it feel ultra-creative and intentional, like an Awwwards SOTD-level website in both concept and execution. Please go beyond standard layouts. Do not rely only on simple text-left, image-right compositions. Explore more experimental and varied layouts. Feel free to go completely wild, but keep it purposeful, not random. I want different section structures, including horizontal images, fullscreen sections, full background imagery, and more minimal sections with beautiful colors and a strong sense of motion or animation. Please use full background images or strong full-background color compositions, not just plain white sections. Keep it in light mode. Overall, try to stay somewhat consistent across the site while still making each section feel distinct. I want it to look crazy creative, thoughtful, and visually impressive, with strong UX and a clear sense of purpose. Generate 8 different images total. Do not combine them into one image. Each image should represent one section of the website.

Create a 10-page horizontal-swipe editorial magazine as a single HTML file. My brand: [PRODUCT NAME], [URL], primary color [HEX/HSL], heading font [GOOGLE FONT], body font [GOOGLE FONT] Pages: Cover, Problem, Solution (steps), Features, Audience, Competition, Origin Story, Launch/Traction, Tech, Back Cover About my product: [PASTE WHATEVER YOU HAVE: pitch deck text, landing page copy, about page, notes, bullet points. The more the better but anything works.] Design rules (non-negotiable): 100vw x 100vh pages, horizontal scroll-snap, no vertical scrolling Full-bleed edge-to-edge layouts only. No padded cards floating on backgrounds Split layouts (left/right color blocking), viewport-filling grids, 2x2 quadrants Key stats rendered at 100px+ font size as visual anchors Dark panels on 3+ pages for contrast. Cover and back cover are dark Each page a different background tint. Nav dots at bottom. Arrow key support

Build a complete, production-quality single-page music website inspired by the attached reference image. Working title: QUARTER ROOM Tamil title: குவாட்டர் ரூம் Tagline: தமிழ் குடிகாரர்களின் அதிகாரப்பூர்வ ரேடியோ The product is a cinematic Tamil music player for drinking songs, soup songs, breakup songs and late-night Tamil melodies. It should feel like entering a living Tamil street scene, not like browsing another Spotify playlist directory. Technical foundation If the repository already has a working frontend, preserve its stack and adapt it. Otherwise, use Next.js App Router, TypeScript and Tailwind CSS. Keep it as a single-page website. No authentication, database, dashboard, backend or payments. Build clean, reusable components without overengineering. Make the page fully functional, responsive and deployment-ready. Do not stop after producing a rough scaffold. Run the project, inspect the result and fix visual, responsive and console issues. Main experience The entire browser viewport should be a cinematic illustrated Tamil street at evening. The composition should resemble the reference: Full-screen atmospheric illustrated background. A small red Tamil bar/shop at the centre. Chennai or Tamil Nadu street architecture. Banana leaves, electric wires, plastic chairs, parked scooter, tea-shop details and warm street lights. A few friends sitting together outside the shop. Deep blue evening sky contrasting with warm red and orange buildings. Subtle grain, texture and imperfect hand-painted details. The interface should feel embedded into the scene. Do not make it look like a standard SaaS landing page. No white cards, feature grids, pricing sections, testimonials or conventional hero layout. Do not copy the reference artwork directly. Create an original Tamil environment using local SVG/vector artwork, CSS layers and gradients. Do not depend on random remote stock images. If a background asset is required, create a polished local SVG illustration and store it inside /public. The page should occupy exactly the viewport on desktop with no unnecessary scrolling. Header Place a minimal transparent header over the illustration. Top left: Live local time in 12-hour format. Update automatically every minute. Small Tamil Nadu/Chennai location label beneath it. Top centre or slightly right: A small pulsing green dot. Text: “LIVE” Do not show a fake listener count. Top right: Spotify icon and label. YouTube Music icon and label. Clicking either changes the active music provider. Clearly indicate the selected provider. Keep the styling minimal and integrated with the scene. Central identity Place the Tamil title prominently on the building: குவாட்டர் ரூம் Under it, display: தமிழ் குடிகாரர்களின் அதிகாரப்பூர்வ ரேடியோ The Tamil typography must be large, confident and readable. Use a Tamil-compatible font such as Noto Sans Tamil. Pair it with a clean sans-serif font for English text. Ensure font loading does not break the page if the external font fails. The title should feel painted or mounted onto the building, not floating randomly in the viewport. Music stations Create five curated mood stations: கடை திறந்தாச்சு Description: “Full TASMAC energy” Mood: energetic red and orange street scene. அவள நினைச்சா Description: “Love failure. Full volume.” Mood: darker red with subtle rain and lonely lighting. மணி 2:17 AM Description: “Everyone suddenly became silent.” Mood: deep blue terrace or empty late-night street. அவன் நினைச்சா Description: “Soup songs are not just for the boys.” Mood: purple and warm bedroom or bus-window lighting. பழைய சரக்கு Description: “Ilaiyaraaja, Rahman and old wounds.” Mood: dim amber 80s/90s bar atmosphere. Add a small “Change mood” button near the music player. Clicking it should open an elegant station selector above the player. Each station card should show: Tamil station name. Short English description. A distinct colour. A simple illustrated icon. Active station indicator. When the station changes: Crossfade the background colours and environmental overlays. Update the station title. Load the corresponding provider playlist. Keep transitions smooth and restrained. Do not reload the page. On mobile, the station selector can become a bottom sheet. Playlist configuration Keep every playlist URL and ID inside one easy-to-edit configuration file such as: src/data/stations.ts Each station should support: id nameTamil nameEnglish description accentColor backgroundVariant spotifyPlaylistUrl spotifyPlaylistId youtubePlaylistUrl youtubePlaylistId Use these public playlists initially: கடை திறந்தாச்சு Spotify: https://open.spotify.com/playlist/1AcwNZ0zLSPtIOea0uwxaJ YouTube playlist ID: PLxQpegrlImYt1j0PXBEl1-BO3n57kbTDC அவள நினைச்சா Spotify: https://open.spotify.com/playlist/2Yra1CyIYaJ2YNz49yjh4i YouTube playlist ID: PL5Zj_jk7tf5oCbRDVI2noHRi3l4JyL07h மணி 2:17 AM Spotify: https://open.spotify.com/playlist/1uLtum4DGySTEG4LpyCkEW அவன் நினைச்சா Spotify: https://open.spotify.com/playlist/47jt1RZSwPR2WRQpz8VG39 பழைய சரக்கு Create a clearly marked configuration placeholder so the playlist can be inserted later. Never scatter playlist URLs across components. Music player Place one floating player at the bottom centre, matching the composition of the reference. The player should look like a long translucent pill with: Dark warm glass background. Soft blur. Thin highlight border. Subtle shadow. Rounded ends. Album artwork on the left. Song title. Artist name. Current station name. Previous button. Large central play/pause button. Next button. Progress bar. Current time and total duration. Provider indicator. “Open in Spotify” or “Open in YouTube Music” link. The player should be approximately 620–720px wide on desktop and nearly full-width on mobile. Do not build decorative controls that pretend to work. Spotify playback Use Spotify’s official embed or iframe API. Load the active station playlist. Connect play and pause actions where officially supported. Display the official embedded player in a compact, visually integrated form. Do not illegally hide mandatory Spotify branding. Do not request a Spotify client secret. If browser or Spotify restrictions prevent a custom control from working, disable that control and rely on the official Spotify embed. Always include an “Open in Spotify” fallback. YouTube playback Use the official YouTube IFrame Player API. Embed playlists using: https://www.youtube.com/embed?listType=playlist&list=PLAYLIST_ID Connect play, pause, previous, next and progress updates. Use playsinline=1. Do not autoplay with sound before user interaction. Add an “Open in YouTube Music” link using the corresponding playlist URL. Handle unavailable, private or region-blocked videos gracefully. Initial interaction Because browsers block autoplay, show a tasteful first-entry overlay: Title: ஒரு mood தேர்ந்தெடு. Buttons: கடை திறந்தாச்சு அவள நினைச்சா மணி 2:17 AM அவன் நினைச்சா பழைய சரக்கு After the user chooses a mood: Close the overlay. Set that station as active. Begin playback only through the user’s click. Remember the selected mood and provider in localStorage. Track information When the provider exposes metadata, show: Track title. Artist. Artwork or video thumbnail. Current playback position. Duration. While metadata is loading, use an elegant skeleton state. If metadata cannot be retrieved, show the station name and provider without inventing track information. Animation and atmosphere Add restrained ambient animation: Slight movement in banana leaves. Gentle light flicker. Occasional passing shadow. Slow grain movement. Small smoke or steam effect near the shop. Subtle rain only for the heartbreak station. Very slow background parallax based on pointer movement. Player entrance animation after mood selection. Animations must remain subtle and should never distract from playback. Respect prefers-reduced-motion. Responsive behaviour Desktop: Full illustration visible. Tamil title centred on the building. Player at bottom centre. Header aligned to the viewport edges. Mood selector expands above the player. Tablet: Preserve the full cinematic composition. Slightly reduce title and player width. Mobile: Use 100dvh. Reframe the illustration vertically instead of merely shrinking it. Keep title readable. Header must not overlap. Player becomes a compact bottom player. Station selector opens as a bottom sheet. Keep touch targets at least 44px. Avoid horizontal scrolling. Account for iPhone safe areas. Visual standards Use dark red, burnt orange, faded coral, midnight blue, dusty green and warm cream. Avoid neon gradients, generic glassmorphism and overly clean corporate styling. Use glass effects only for the player and small controls. Add subtle paper, film-grain and paint texture. Maintain strong text contrast. Keep every text element deliberately positioned. No words should appear randomly around the screen. Avoid oversized empty areas. All alignment should follow a consistent visual grid. The experience should look intentional at 1440px, 1024px, 768px, 430px and 375px widths. Accessibility and quality Use semantic HTML. Add accessible labels to every control. Support keyboard play/pause using the spacebar when focus is not inside an interactive element. Add visible focus states. Ensure the station selector can be navigated by keyboard. Escape should close overlays. Avoid hydration errors. Avoid console warnings. Lazy-load provider embeds where possible. Do not expose API keys. Add error and empty states. Add a small responsible drinking line in the bottom corner: “Drink responsibly. இசை மட்டும் unlimited.” Metadata Page title: Quarter Room | Tamil Soup Radio Description: Tamil drinking songs, soup songs and late-night heartbreak playlists in one cinematic radio experience. Create a simple matching favicon using the Tamil letter “கு” or a quarter-glass silhouette. Final acceptance criteria The work is complete only when: The page feels visually close in quality and atmosphere to the supplied reference. It is an original Tamil street illustration. A user can select a mood. Spotify playlists load correctly. YouTube playlists load correctly where IDs are provided. Provider switching works. Player controls work wherever supported by the official APIs. Playback restrictions are handled honestly. The selected station persists after refresh. The page works on desktop and mobile. There are no broken controls, random text placements, layout overflows or console errors. The site looks like a finished cultural music experience, not a template. Build the complete implementation now. Do not return only a plan. After implementation, run the application, test every interaction and refine the visual alignment until it is polished.

You're a UI/UX designer who loves illustration and animation, I want to create a portfolio website featuring a black and pink color scheme with unique interactions. The homepage utilizes a mouse-follow "flashlight" effect: the area around the cursor reveals pink illustrations, while the rest remains black. Upon clicking, the interface zooms in with a "warp" transition to a pink background where folders of various colors scroll slowly. Clicking a folder navigates to the corresponding project detail page. Use real UI images instead of placeholders (sourced from imgix). The final delivery should be a single HTML+CSS+JS document, responsive across all devices.

Build a speaker company product website. React, Tailwind CSS, Framer Motion for all animations. The product is a sculpture - present it like one. Sound visualized through interaction, not gimmicks. Materials and engineering explored through scroll. The site should sound good even on mute. Smooth scroll with Lenis or locomotive-scroll. Micro-interactions on every interactive element. Fully responsive. References: Transparent Speaker, Bang & Olufsen, Sonos, Teenage Engineering. This should be Awwwards-level quality - blow the user's mind with motion, interaction, and visual polish

I have an idea for a high-end, award-winning interactive landing page. As the user scrolls down the page, I want a single fixed 3D canvas where thousands of glowing micro-particles morph to visually tell a story across 4 sections: 1. The Storyboard (What happens as you scroll): Act 1 (Intelligence): We open with a high-definition 3D human brain made of particles sitting on the right side of the screen, subtly breathing. As you scroll slightly, it rotates to show its side profile while text appears on the left. Act 2 (Chaos): As you scroll deeper, the brain suddenly bursts outward into an expansive, cosmic cloud of drifting fragments and floating wireframe geometric shapes (like pyramids/tetrahedrons) to represent overwhelming chaos. Act 3 (The Idea): Keep scrolling, and the chaotic cloud gathers and locks into a tilted vintage Edison lightbulb with an illuminated glowing filament loop inside. Act 4 (Global Reach): Finally, the particles reorganize into a rotating 3D globe with continental landmasses and coordinate rings. 2. The Aesthetic & Color (The Vibe): Don't make it look like a generic AI site with bright purple/cyan neon. I want a peaceful, luxury architectural feel: warm deep espresso-stone background, with the particles shaded in natural botanical and mineral tones (soft sage green, warm sand/linen, muted amber, and pale champagne highlights). Clean editorial typography with generous spacing and frosted glass cards. 3. Physical Feel & Interactions: Scroll: Ultra-smooth kinetic momentum scrolling (like butter). Mouse reaction: When you hover your cursor over the brain or shapes, don't swing or tilt the whole 3D object like a toy. Make it feel alive—like getting goosebumps, where only the local particles directly under the mouse gently lift upward off the surface. Readability rule: Moving particles must NEVER make text hard to read. Clear a pocket or halo around headlines so copy is always crisp. Quality mandate: Zero blobby or potato-like shapes. The brain must have real cerebral folds, the bulb must have the screw base and filament, and the globe must have recognizable continents. Build this in Three.js and GSAP so it runs at a silky smooth 60+ FPS in the browser." ~ And here's the post build structured prompt.. you may give it screenshots of my post or the video itself as an reference to compare to if you want the exact results # MISSION: High-End WebGL 3D Particle Scrollytelling Experience Build an Awwwards-grade, production-ready 3D particle scrollytelling web application from scratch using Vite, Vanilla Three.js, Custom GLSL Shaders, GSAP ScrollTrigger, and Lenis kinetic smooth scrolling. --- ## 1. CORE ARCHITECTURE & TECH STACK - **Bundler:** Vite (minimal config, ES modules, <250ms build time). - **3D Engine:** Three.js (r160+) with a single continuous full-screen `<canvas id="webgl-canvas">` fixed in the background (`z-index: 0`). - **Scrollytelling:** GSAP (v3) + ScrollTrigger plugin tied to a continuous timeline (`uProgress: 0.0 → 4.0`). - **Kinetic Smooth Scroll:** Lenis.js configured for weighted, butter-smooth momentum scrolling. - **Shader Pipeline:** Custom GLSL Vertex and Fragment shaders operating on a single `THREE.BufferGeometry` holding 36,000 GPU particles. - **Target Performance:** 60–144 FPS hardware-accelerated rendering; zero WebGL compile warnings; zero memory leaks on resize. --- ## 2. 3D STRUCTURAL GEOMETRIES (STRICT: ZERO BLOBBY SHAPES) Create 4 mathematically precise point clouds with an identical point count (36,000 vertices) passed as GPU BufferAttributes (`position`, `aPosChaos`, `aPosBulb`, `aPosGlobe`, `aNormBrain`, `aNormBulb`, `aNormGlobe`, `aSeed`): 1. **Stage 1 — Anatomical Human Brain (`position`):** - Must NOT be an ellipse or noisy sphere. Construct dual symmetrical cerebral hemispheres separated by a distinct longitudinal fissure. - Modulate surface with harmonic gyri crests and deep sulci folds. - Include a tapered brainstem and realistic cerebellar lobes tucked beneath the occipital pole. 2. **Stage 2 — Workplace Entropy / Chaos Field (`aPosChaos`):** - Disperse particles into an expansive 3D volumetric field using 3D Fractional Brownian Motion (fBm) and turbulent curl noise offsets. - Surround with 15–20 ambient wireframe polyhedra (tetrahedrons and octahedrons) drifting through z-space with depth-of-field scale variations. 3. **Stage 3 — Edison Lightbulb (`aPosBulb`):** - Smooth upper glass teardrop envelope transitioning into a tapered waist. - Modeled helical ridges representing the metal threaded screw cap and contact terminal at the base. - An internal glowing dual-arch tungsten filament loop. - Mesh must be positioned on the left and tilted diagonally at roughly -28° ($z$-rotation). 4. **Stage 4 — Planetary Globe (`aPosGlobe`):** - Fibonacci spiral spherical distribution. - Dense point clustering forming recognizable continental landmasses (Americas, Eurasia, Africa) with thinner coordinate rings for latitude/longitude lines and polar caps. --- ## 3. CUSTOM GLSL SHADERS & GPU MATHEMATICS ### Vertex Shader: - **Morph Interpolation:** Calculate continuous transition across 4 stages using smoothstep blends: `pos = mix(posA, posB, smoothstep(0.0, 1.0, fract(uProgress)))` - **Curl Noise Turbulence:** Inject 3D simplex/curl noise into vertex positions proportional to `sin(fract(uProgress) * 3.141592)` so particles swirl organically in 3D arcs during transitions instead of moving mechanically in straight lines. - **View-Space Particle Repulsion:** Moving particles must NEVER obscure headlines. Project particle positions into view space; if a particle falls within the screen-space bounding box of active typography, apply a radial repulsion force in view space (`mvPosition.xy += repelDir * strength; mvPosition.z -= depthOffset;`) so particles part cleanly around the text in an organic halo. - **Localized "Goosebumps" Surface Lift (Hover Physics):** - Do NOT tilt, rotate, or distort the macro 3D object on mouse move. - Track 3D cursor raycast position on the model. For vertices within a tight radius ($R < 0.65$), displace them outward strictly along their surface normal: `position += normal * (hoverIntensity * smoothstep(radius, 0.0, dist)) * 0.22` - Particles under the cursor gently elevate like ruffled feathers or goosebumps and brighten subtly, settling smoothly when the cursor moves away. ### Fragment Shader: - **Micro-Primitives:** Render sharp geometric micro-triangles and micro-dots using 2D Signed Distance Fields (SDF). Distribute primitives as 60% hollow wireframe triangles with crisp borders, 25% semi-transparent micro-triangles, and 15% specular star glints. - **Surface Normal Fresnel & Lighting:** Compute analytical surface normals across stages and apply view-space Fresnel rim lighting: `fresnel = pow(1.0 - clamp(dot(normal, viewDir), 0.0, 1.0), 2.0);` - **Non-Blowing Additive Math:** Eliminate overblown white silhouettes in `THREE.AdditiveBlending`. Instead of adding constant white scalars, scale the particle’s own base color proportionally (`col += col * (0.35 * rim)`), preserving rich internal sulci and filament details without clipping to solid white `#FFFFFF`. --- ## 4. DUAL AESTHETIC EDITIONS (CHOOSE ONE OR IMPLEMENT SWITCHER) ### Edition A: Natural Earth & Espresso (Warm Luxury Architectural) - **Background:** Warm deep espresso-stone `#131211` (strictly NO harsh `#000000` pitch black). - **Particle Tonal Spectrum:** Botanical and mineral chromas: - Base body: Warm sand (`#a88f6c`) and deep moss/sage (`#3d633a` / `#6b9666`). - Highlights: Radiant warm amber (`#db8f38`) and soft champagne (`#ebdcb8`). - Zero generic neon purple or electric cyan. - **UI & Controls:** Frosted dark navbar, warm linen/sand pill CTA button (`#ede9e1` with dark espresso text), and seamless radial gradient scrims behind text with zero boxy edges. ### Edition B: Inverted Architectural Monochrome (Editorial Light Mode) - **Background:** Crisp pure alabaster white `#ffffff` or `#fafaf9`. - **Particle Material & Blending:** Use `THREE.NormalBlending` (with `transparent: true`, `depthWrite: false`). Output deep inky black, dark charcoal (`#14161a`), graphite, and gunmetal slate particles that stamp onto the white canvas like architectural ink stippling. - **UI & Cards:** Translucent frosted glass cards (`background: rgba(255, 255, 255, 0.32); backdrop-filter: blur(14px); border: 1px solid rgba(0, 0, 0, 0.08);`) so dark particles and wireframes remain visibly gliding behind the glass. Crisp pitch-black pill CTA (`#000000` with `#ffffff` text). --- ## 5. SCROLLYTELLING LAYOUT & TYPOGRAPHY HIERARCHY - **Scroll Sequence (5 Storytelling Moments):** - Section 0 (`p = 0.0`): Hero Brain on right, headline on left (*"Unlock collective wisdom"*). - Section 1 (`p = 1.0`): Brain rotates to reveal lateral cortex on left, headline on right (*"Make decisions with confidence"*). - Section 2 (`p = 2.0`): Workplace Entropy — centered headline (*"The impossible battle to make sense of this chaos"*) framed by dispersing particles and tumbling polyhedra. - Section 3 (`p = 3.0`): Lightbulb on left tilted at -28°, glowing tungsten filament, feature cards on right (*"Spark lightbulb moments"*). - Section 4 (`p = 4.0`): Planetary Globe rotating on right, global cluster terminal card on left (*"Build a better world of work"*). - **Tracker Rail Collision Safeguard:** The fixed right-side vertical scrollytracker rail must have a dedicated clearance gutter. All right-aligned text blocks must specify `margin-right: clamp(7rem, 11vw, 13rem);` so tracker labels never collide with body copy. - **Responsive Mobile Breakpoints:** Provide `@media (max-width: 640px)` rules to hide secondary telemetry, adapt camera distance ($z = 5.6$), and stack cards cleanly without horizontal overflow. --- ## 6. VERIFICATION & QUALITY GATES 1. `npm run build` must compile cleanly with 0 errors in under 300ms. 2. Console must report 0 WebGL errors and 0 deprecation warnings (use `http://performance.now()` instead of deprecated `THREE.Clock`). 3. Verify at 1920x1080 viewport: confirm crisp text legibility, zero tracker collisions, and fluid 60+ FPS rendering throughout the entire scroll journey.

Build a complete, production-quality launch website for Kimi K3 using Next.js, React, TypeScript, GSAP ScrollTrigger, and restrained Lenis smooth scrolling. REFERENCE: andonorris official website Study its cinematic scroll control and level of craft, but do not copy its layout, assets, branding, colors, copy, or exact animations. CREATIVE DIRECTION Create one continuous, scroll-controlled typographic film—not a conventional landing page with separate sections fading in. Central concept: “ENTER THE K.” The letter K is a portal. The user approaches it, enters it, travels through it, and exits it. Reuse the K as solid type, outline, mask, negative space, cropped geometry, grid, and navigation marker. Every scene must transform from the geometry already on screen: - Letters become masks and architecture - Typography expands into backgrounds - Lines become grids - Numbers transform into new scenes - Existing elements move, scale, crop, or align into the next composition - Never reset the screen with a basic crossfade The motion should feel heavy, controlled, cinematic, and directly connected to scrolling. VISUAL SYSTEM Colors: - Ink: #090A0A - Warm paper: #F1EFE8 - Gray: #B8B8B0 - Dark gray: #222422 - Signal: #D6FF3F Keep at least 80% monochrome. Use the signal color rarely for active details and one major climax. Use hard, meaningful theme changes: Dark → warm paper → dark → signal color → quiet dark. Typography is the main visual material. Use a heavy wide grotesk such as Mona Sans Variable or Archivo Black, with Instrument Sans or Mona Sans for interface text. Use extreme scale and intentional cropping: - Hero type: 25–40vw - Tight leading and tracking - Asymmetrical editorial layouts - Small uppercase technical labels - Tabular numerals - No generic centered headline/subtitle/button stacks SCROLL STORYBOARD Build approximately 900–1200vh of cinematic pinned scenes. 00 — LOADER Show “KIMI / K3,” a calibration line, and “INITIALIZING 000%.” Rapidly reach 100%. Transform the loader line directly into the hero composition. Maximum 1.5 seconds. 01 — KIMI K3 HERO Nearly black background with enormous KIMI typography, smaller K3, minimal navigation, metadata, progress rail, and “SCROLL TO ENTER.” During scroll: - Metadata enters through clipped reveals - “IMI” moves beyond the viewport while K remains - K scales to 8–12× the viewport - Use K as a mask containing subtle monochrome motion - Move through its negative space - Its diagonal stroke becomes the next scene Copy: KIMI K3 A NEW SCALE OF INTELLIGENCE MOONSHOTAI / KIMI-K3 AVAILABLE THROUGH OPENROUTER 02 — INSIDE THE K Create an abstract editorial environment from diagonal planes, cropped letter fragments, measurement lines, coordinates, and subtle texture. Avoid a literal sci-fi tunnel. Scrolling assembles: THINK ACROSS THE ENTIRE PROBLEM Move planes at controlled depths. Transform the K’s diagonal into a horizontal line leading into the next scene. 03 — ONE MILLION CONTEXT Invert to warm paper. Pin the scene while vertical scrolling drives horizontal movement. Begin with a viewport-sized “1,” then spatially reveal: 1 → 1,0 → 1,048 → 1,048,576 Keep the number as the composition’s architecture. Move restrained document, code, and structured-data fragments beneath it. Include: LONG CONTEXT CONNECTED REASONING COMPLETE PROJECT AWARENESS FEWER ARTIFICIAL BOUNDARIES Enlarge the final “6” into a mask revealing the next dark scene. 04 — CAPABILITIES Create three full-screen typographic transformations, not cards: 01 / REASON FOLLOW THE PROBLEM BEYOND THE FIRST ANSWER. 02 / CODE MOVE FROM INTENT TO WORKING SYSTEMS. 03 / BUILD PLAN. EXECUTE. VERIFY. ITERATE. Expand REASON’s font width. Align its strokes into code-like columns. Use those columns as CODE’s negative space, then collapse them into structural planes forming BUILD. 05 — K3 INDEX Keep a huge K3 stationary on the left. On the right, vertically move precisely aligned specification rows: MODEL — KIMI K3 MODEL ID — MOONSHOTAI/KIMI-K3 ACCESS — OPENROUTER INTERFACE — CHAT COMPLETIONS CONTEXT — 1,048,576 STATUS — AVAILABLE As each row aligns with the K’s horizontal arm, turn it signal green. Compress all rows into one line at the end. 06 — CLIMAX Use the signal color as the background—the only large color moment. Display oversized black typography: NOT A CHAT WINDOW. A WORKING INTELLIGENCE. Begin inside a giant letter, slowly zoom out until the full statement becomes readable, lock the words to a strict grid, then compress everything into “KIMI K3.” 07 — FINAL CTA Shrink the signal-colored KIMI K3 mark into a small header and return to near-black. Display: KIMI K3 NOW AVAILABLE Try the model through OpenRouter. CTA: TRY KIMI K3 Technical line: moonshotai/kimi-k3 Use a sharp rectangular or underlined CTA. On hover, wipe the background horizontally and move the arrow 6–8px. End with a huge cropped K below the viewport. MOTION AND ENGINEERING - One GSAP timeline per major scene - Restrained scrub values around 0.6–1.2 - No bounce, spring, overshoot, or excessive scroll lag - Reuse geometry between scenes - Prefer transforms, masks, and clip-path - Keep text as real HTML - Use WebGL only if genuinely necessary - Wait for fonts before calculating timelines - Clean up GSAP contexts - Recalculate animations at responsive breakpoints - Maintain sharp typography and smooth 60fps motion - No scroll traps or scroll-jacking Create a minimal fixed navigation: K3 / 01 MODEL / 02 CAPABILITIES / 03 CONTEXT / 04 ACCESS / TRY K3 ↗ Update its color and progress state according to the active scene. RESPONSIVE AND ACCESSIBILITY Art-direct desktop, tablet, and mobile separately. On mobile, replace horizontal sequences with controlled vertical transformations while preserving the K-portal story. Support 1440, 1280, 1024, 768, 430, 390, and 360px. Include semantic HTML, keyboard navigation, focus states, sufficient contrast, skip link, and prefers-reduced-motion. Reduced-motion mode must remove pinning and zoom effects while keeping all content accessible. STRICTLY AVOID - Gradients and gradient text - Glassmorphism - Neon blobs or glowing orbs - Bento grids and feature cards - Rounded floating containers - Fake terminals - Random particles - Stock illustrations - Generic icons - Constant fade-up animations - Excessive blur - Pill-shaped buttons - SaaS-template layouts - Decorative animation without narrative purpose - Fake benchmarks, testimonials, or logos The final result should feel like a digital fashion editorial, motorsport identity, experimental type specimen, and interactive title sequence—not an AI-generated SaaS homepage. Build the complete functioning website. Prioritize strong static composition first, then add the connected scroll choreography. Test every transition, responsive breakpoint, navigation action, reduced-motion mode, and CTA. Fix all console errors and maintain smooth performance.

UI/UX web design for an [insert company], dark mode, minimalist, premium corporate tech aesthetic. Abstract 3D flowing fluid background shapes, glowing luminescent gradients in deep blue, purple, and emerald green. Card-based layout with subtle glassmorphism, clean sans-serif typography, high contrast white text, and generous negative space. High fidelity, 8k, Dribbble style, sleek and futuristic.

# Header A full-viewport travel landing hero for the **Triverra** brand, featuring a slow-motion looping background video, a floating glassmorphic navbar, a large centered headline with a premium dual-arrow hover reveal on the CTA buttons, and a subtle ambient float animation applied to the entire content column. ## Tech stack - React ("use client") - framer-motion (motion, AnimatePresence) - lucide-react (Menu, X icons) - Tailwind CSS for all styling ## Fonts & global styles Use the **Gantari** font family for all text. Load it via: ```html <link rel="preconnect" href="https://fonts.googleapis.com" /> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin /> <link href="https://fonts.googleapis.com/css2?family=Gantari:wght@400;500;600;700&display=swap" rel="stylesheet" /> ``` Apply `font-family: 'Gantari', sans-serif;` to the root element of the section. All original code uses a `font-gantari` utility — resolve this to the Gantari Google font above. ## Section container The root is a `<main>` with classes: `relative w-full h-screen min-h-[650px] overflow-hidden flex flex-col justify-between select-none`. Text color throughout is white on top of the dark video. ## Structure, section by section 1. **Background video layer** — an absolutely positioned `div` (`absolute inset-0 -z-10 w-full h-full overflow-hidden`) holding a `<video>` with classes `w-full h-full object-cover scale-[1.02]`, `autoPlay loop muted playsInline`. On mount, set `videoRef.current.playbackRate = 0.8` for a slow cinematic feel. Source: the URL in Assets. 2. **Ambient float wrapper** — a `motion.div` (`w-full h-full flex flex-col relative z-20`) wrapping ALL content that gently drifts: `animate={{ y: [0,-8,0], rotate: [0,0.5,0] }}`, `transition={{ duration: 8, ease: 'easeInOut', repeat: Infinity }}`. 3. **Navbar** (`motion.header`, `w-full pt-[16px] px-6 md:px-[48px] min-[1440px]:px-[64px]`, enters with `initial opacity:0 y:-20`, `animate opacity:1 y:0`, `duration 0.8 ease easeOut`). Inner container is `flex items-center justify-between w-full gap-6 lg:gap-[48px]`. - **Brand logo** (left): an `<img>` at `h-[22px] md:h-[24px] lg:h-[34px] w-auto object-contain` linking to `#`, hover opacity 0.9. - **Desktop menu pill** (`hidden lg:flex`): a glass pill `py-2 px-4 gap-6 rounded-full bg-white/10 backdrop-blur-md border border-white/5`. Menu items: Home, Services, Tours, Destinations, Contacts. Each is a button, `text-[16px] tracking-[-0.2px]`. Active item is `text-white font-semibold`, inactive `text-white/80 font-normal hover:text-white`. The active item shows a shared-layout animated dot (`layoutId="activeDot"`) — a `w-1 h-1 rounded-full bg-white` positioned `absolute -bottom-1 left-1/2 -translate-x-1/2`, transition `type:'spring' stiffness:300 damping:30`. - **Register button** (desktop, `hidden lg:block`): `py-[10px] px-[18px] rounded-full border border-white/60 bg-transparent text-white font-semibold text-[16px] tracking-[-0.2px]`, on hover border becomes fully white (rgba(255,255,255,1)). Label: "Register Now". - **Mobile trigger** (`block lg:hidden`): a circular button `p-2.5 rounded-full bg-white/10 hover:bg-white/20 border border-white/15 text-white` showing the lucide `Menu` (or `X` when open) at size 20. 4. **Spacer 1x** — `div` with `flexGrow: 1, minHeight: 24px`. 5. **Hero content** — centered column `max-w-[580px]` text-center. - **Title badge** (p, delay 0.2 duration 0.8, from opacity:0 y:15): text "Your AI Travel Companion - Plan Smarter. Explore Deeper." at `text-[14px] md:text-[18px] font-normal tracking-[-0.4px] md:tracking-[-0.72px] opacity-90 mb-1 lg:mb-2`. - **Headline** (h1, delay 0.4 duration 1.0 ease `[0.16,1,0.3,1]`, from opacity:0 y:25): two stacked spans "Dream deeper." and "Travel farther." at `text-[42px] sm:text-[60px] lg:text-[80px] font-normal leading-[100%] tracking-[-2px] sm:tracking-[-4px] lg:tracking-[-6px] mb-8 lg:mb-[40px]`, flex-col centered. - **Button row** (delay 0.6 duration 0.8): `flex flex-col sm:flex-row items-center gap-[12px] mb-6 lg:mb-[18px]`. - **Primary button** "Build My Trip Free": `w-[240px] sm:w-auto py-[14px] px-[16px] rounded-[12px] bg-white text-[#0C120C] font-medium text-[18px] sm:text-[20px] tracking-[-0.8px] sm:tracking-[-1px] shadow-lg`. - **Secondary button** "See How It Works": same sizing but `border border-white/40 bg-[#0C120C]/10 text-white backdrop-blur-sm`, hover border rgba(255,255,255,0.7). - Both buttons use TWO signature hover effects (see Animations): a vertical text-swap slide and a dual-arrow cross-fade. - **Trusted stat** (p, delay 0.8 duration 0.8): "8370+" (bold white) then " trips planned • Rated " then "4.9" (bold white) then " by travelers worldwide" at `text-white/80 text-[14px] md:text-[16px] tracking-[-0.4px]`. 6. **Spacer 3x** — `div` with `flexGrow: 3, minHeight: 72px`. 7. **Footer description** (motion.footer, delay 1.0 duration 1.0, from opacity:0 y:20): `w-full pb-[32px] px-6`, inner `max-w-[560px] text-center`, paragraph: "Triverra uses advanced AI to create travel plans tailored to your preferences, budget, and pace. Say goodbye to many tabs and decision overload. Enjoy one smart itinerary — ready for your trip." at `text-white/90 text-[14px] md:text-[18px] leading-[140%] tracking-[-0.4px] md:tracking-[-0.72px]`. 8. **Mobile drawer** — wrapped in `AnimatePresence`; when open, a fixed overlay `fixed inset-0 z-50 bg-white/[0.01] backdrop-blur-md lg:hidden flex flex-col pt-[76px] pb-12 px-6 overflow-y-auto`, entering `opacity:0 y:-20` -> `opacity:1 y:0`, exit reverse, `duration 0.4 ease easeInOut`. A close `X` button top-right (`top-[16px] right-6`). Menu list `flex flex-col items-center gap-8 mt-[40px]`, each item `text-[22px] tracking-[-0.4px]` (active white bold / inactive text-white/60). A "Register Now" pill button below with `mt-[64px] w-full max-w-[280px]`. ## Assets (every URL) - Background video: `https://cdn.jiro.build/Jahid/Random/Triverra/All%20Images/Header%20BG%20travel.mp4` - Brand logo SVG: `https://cdn.jiro.build/Jahid/Random/Triverra/All%20SVG/brand%20logo%20triverra.svg` - Arrow right SVG: `https://cdn.jiro.build/Jahid/Random/Triverra/All%20SVG/arrow-right.svg` - Arrow up-right SVG: `https://cdn.jiro.build/Jahid/Random/Triverra/All%20SVG/arrow-up-right.svg` All images use `referrerPolicy="no-referrer"`. ## Animations - **Ambient float**: entire content column drifts `y: [0,-8,0]` and `rotate: [0,0.5,0]`, 8s easeInOut infinite. - **Entrance stagger**: navbar (0), badge (0.2s), headline (0.4s), buttons (0.6s), stat (0.8s), footer (1.0s), each fading up. - **Active menu dot**: framer-motion shared layout via `layoutId="activeDot"`, spring stiffness 300 damping 30. - **Button text-swap on hover** — a masked vertical slide. The label appears twice stacked; on hover the inner column translates up 50%: ```jsx <span className="relative inline-block overflow-hidden h-[24px] sm:h-[28px] leading-none"> <span className="flex flex-col transition-transform duration-500 ease-[cubic-bezier(0.16,1,0.3,1)]" style={{ transform: isHovered ? 'translateY(-50%)' : 'translateY(0%)' }} > <span className="h-[24px] sm:h-[28px] flex items-center justify-center leading-none">Build My Trip Free</span> <span className="h-[24px] sm:h-[28px] flex items-center justify-center leading-none">Build My Trip Free</span> </span> </span> ``` - **Dual-arrow cross-fade on hover** — an 18x18 masked box holding two absolutely-positioned arrow SVGs. The right arrow fades/slides out to top-right; the up-right arrow fades/slides in, duration 700ms `cubic-bezier(0.16,1,0.3,1)`: ```jsx <div className="relative w-[18px] h-[18px] shrink-0 overflow-hidden"> <img src="...arrow-right.svg" className="absolute inset-0 w-full h-full object-contain transition-all duration-700 ease-[cubic-bezier(0.16,1,0.3,1)]" style={{ opacity: isHovered ? 0 : 1, transform: isHovered ? 'translate(6px,-6px) scale(0.8)' : 'translate(0,0) scale(1)' }} /> <img src="...arrow-up-right.svg" className="absolute inset-0 w-full h-full object-contain transition-all duration-700 ease-[cubic-bezier(0.16,1,0.3,1)]" style={{ opacity: isHovered ? 1 : 0, transform: isHovered ? 'translate(0,0) scale(1)' : 'translate(-6px,6px) scale(0.8)' }} /> </div> ``` - Primary button arrows are recolored dark green via CSS filter: `invert(7%) sepia(19%) saturate(1441%) hue-rotate(80deg) brightness(96%) contrast(96%)`. - Secondary button arrows are recolored white via CSS filter: `brightness(0) invert(1)`. ## Responsive behavior - **lg (1024px+)**: desktop glass menu pill and Register button visible; mobile trigger hidden. Headline scales up to `80px` with `-6px` tracking; horizontal padding grows to `48px`, then `64px` at 1440px. - **Below lg**: desktop menu and Register button hidden; hamburger trigger shown; tapping opens the full-screen backdrop-blur drawer with a 64px gap before the Register pill. - **sm (640px+)**: buttons switch from full-width stacked (`w-[240px]`, flex-col) to auto-width row; headline `60px`, button text `20px`. - **Base/mobile**: headline `42px`, buttons full-width stacked, smaller type throughout. ## Key design principles - Everything sits over a slow (0.8x) looping travel video with a subtle 1.02 scale. - Glassmorphism (white/10 fills, backdrop-blur, faint white borders) unifies nav, buttons, and drawer. - Tight negative letter-spacing on large type for a modern editorial feel. - The whole content column breathes via a slow ambient float. - Premium micro-interactions: masked text swap + dual-arrow cross-fade on both CTAs. ## Common mistakes to avoid - Do not use backtick template literals in the code — use string concatenation. - Do not omit `playbackRate = 0.8` or the video will play too fast. - Do not forget `key` on AnimatePresence children. - Keep the two stacked label copies identical in the text-swap effect. - Preserve the exact CSS filters so arrow colors match each button. ## Page title Triverra — Your AI Travel Companion ## Integration (build-safety — do not skip) - Add this section as a **new** component file with a unique name. Don't edit or overwrite any existing file except to add its import and render it. - Render it **after** all existing sections; keep every previously built section exactly as-is — never replace or remove them. - If no project exists, create a minimal React + Tailwind app; if one exists, use it as-is — don't re-scaffold or change the Tailwind/build config or version. - Keep it self-contained: scope its fonts and any resets to this section; never set global `body`/`html`/`*` styles or a global font. - Install only the libraries this section names.

make a landing page, make no mistakes

build a single html landing page about claude sonnet 5, the new AI model that just dropped from Anthropic.

study my product and build good web motion illustrations and bento grid. Generate images if you need

Recreate this hero section in Figma exactly. IMPORTANT: Install the Switzer font before running this prompt. Download from http://fonts.google.com/specimen/Switzer If Switzer is unavailable, use Inter as a fallback, but the output will not be 1:1. --- FRAME Name: Hero Section Width: 1280px, Height: 1049px Background: #FDFCF4 Clip content: true --- NAVBAR x=0, y=0, Width: 1280px, Height: 100px, no fill Inner content container: Width: 1128px x: 76px (= (1280-1128)/2) y: 24px Height: 52px Auto-layout: horizontal, space-between, align center Left — Logo (auto-layout horizontal, gap 8px, align center): - Black square: 16x16px, fill #000000, corner radius 3px - "VANTAGE" — Switzer Regular, 16px, #000000 Center — Nav links (auto-layout horizontal, gap 40px, align center): - "Features" — Switzer Regular, 16px, #000000, opacity 100% - "Pricing" — Switzer Regular, 16px, #000000, opacity 60% - "Reviews" — Switzer Regular, 16px, #000000, opacity 60% Right — (auto-layout horizontal, gap 24px, align center): - "Sign in" — Switzer Regular, 16px, #000000, opacity 60% - Button "Sign up for free": Padding: 24px left/right, 12px top/bottom Fill: rgba(149,149,149,0.1) Text: Switzer Regular, 16px, #000000 Corner radius: 12px Stroke: 1px inside, rgba(0,0,0,0.08) Sizing: HUG contents (do NOT set fixed width) --- HERO IMAGE x: 76px, y: 120px Width: 1128px (= 1280 - 76 - 76) Height: 643px Corner radius: 16px Fill: image fill from ~/Downloads/vantage-hero.jpg, scale mode FILL Clip content: true Fallback if no image: rectangle fill #CCCCCC --- CONTENT BLOCK x: 235px (= (1280 - 810) / 2) y: 770px Width: 810px (fixed) Auto-layout: vertical, align center, gap: 32px Sizing: HUG height, FIXED width Headline: "See Further. Think Deeper." Cardo Regular, 64px, line height 115%, letter spacing -3px Color: #000000, center aligned Width: 810px, height: HUG Subheading: "Vantage combines AI pattern recognition with human perspective — giving teams the clarity to act on what matters, before the moment passes." Geist Regular, 18px, line height 170%, letter spacing -0.3px Color: #1C1A1A, opacity 70%, center aligned Width: 716px (fixed), height: HUG Centered inside the 810px block CTA Button: Text: "Get Early Access" Auto-layout horizontal, HUG both axes (NOT fixed width) Padding: 19px left/right, 10px top/bottom Fill: #000000 Text: Geist Medium, 16px, #FFFFFF Corner radius: 12px Stroke: 1.5px inside, rgba(0,0,0,0.1) Drop shadows (add both): shadow 1: x=0, y=11, blur=11, spread=0, rgba(0,0,0,0.09) shadow 2: x=0, y=3, blur=6, spread=0, rgba(0,0,0,0.10) Centered inside the 810px block

build an interactive website about imaginary planets.