Viktor Oddy

🚀 | Founder @ Design Rocket,
🤖 | Grab 200+ AI Prompts & Websites

[Viktor Oddy @viktoroddy]

If you haven't used vibe coding to bring your design concepts to life yet, you’re missing out on pure dopamine.

Want to recreate this design?

Access ALL prompts for stunning animated websites in one click: https://t.co/8ebpHNinZe

[Viktor Oddy @viktoroddy]

3D Digital Agency Website

Opus 4.8 + Claude Design → Build

Want to recreate this design? ↓

[Viktor Oddy @viktoroddy]

Access ALL prompts for stunning animated websites in one click: https://t.co/8ebpHNinZe

[Viktor Oddy @viktoroddy]

One of the best interactions I’ve seen in a while.

And anyone can achieve the same results with Claude Opus 4.8.

Who wants this?↓

[Viktor Oddy @viktoroddy]

How I Built This Landing Page

Step 1 -- Stack Your Layers

Think of it like Photoshop. The hero is just layers on top of each other: a looping video at the back, a warm tint over it, giant text in the middle, and frosted glass cards floating at the bottom. Everything you see is just flat layers with transparency.

Step 2 -- Make the Bird Come Alive

The bird is 4 short video clips with transparent backgrounds: one flies in, two idle loops, one flies out. They swap based on a simple rule -- if you scroll down, the bird leaves. Scroll back up, it returns. That's the entire "magic."

Step 3 -- Add Depth with Scroll

Two things move when you scroll: the stone sculpture slowly drifts upward, and the bottom cards gently sink down. These tiny opposing movements trick your brain into feeling real depth, like a parallax diorama.

Step 4 -- Frost Everything

The nav bar, the menu, the cards -- they all use the same trick: a semi-transparent white background with a blur effect behind it. That "frosted glass" look ties the whole design together and makes it feel premium with almost zero effort.

Bonus tip: Aсcess the entire detailed prompt at https://t.co/N0kni8yzNb

[Viktor Oddy @viktoroddy]

Free Prompt from the video - https://t.co/rUM0hUsxeA

[Viktor Oddy @viktoroddy]

❤️‍🔥 Just Recorded a new 11 min tutorial on how to Build an Award-Winning Website using Google AI studio (0 Coding)

[Viktor Oddy @viktoroddy]

Access ALL prompts for stunning animated websites in one click: https://t.co/N0kni8yzNb

Prompt:

Build a full-screen hero landing page for a creative agency called "Mainframe" using React, TypeScript, Vite, and Tailwind CSS. Here is every detail:

---

FONTS

Load two fonts in `index.html` via these stylesheet links:
- Heading: `https://t.co/BqTGJXcKkZ`
- Body: `https://t.co/rG8QmkjuqR`

In `index.css`, define CSS variables:
```css
:root {
--font-heading: 'HelveticaNowDisplay-Medium', 'Helvetica Neue', Arial, sans-serif;
--font-body: 'HelveticaNowDisplayW01-Rg', 'Helvetica Neue', Arial, sans-serif;
}
body {
font-family: var(--font-body);
}
```

The entire page uses `var(--font-body)` except the logo text which uses `var(--font-heading)`.

---

BACKGROUND VIDEO (mouse-scrub controlled)

- A full-screen `` element is `position: fixed; inset: 0; z-index: 0; object-fit: cover; object-position: 70% center;`.
- Video source URL: `https://t.co/6sFzvkLn8J`
- The video is `muted`, `playsInline`, `preload="auto"`. It does NOT autoplay.
- The video scrubs forward/backward based on horizontal mouse movement. Use a `mousemove` event listener on `window`. Track `prevX`, compute `delta = currentX - prevX`, convert to a time offset: `(delta / window.innerWidth) SENSITIVITY video.duration` where `SENSITIVITY = 0.8`. Clamp `targetTime` between 0 and `video.duration`. Use `video.currentTime` to seek, and an `onSeeked` handler to queue the next seek if `targetTime` has moved, preventing seek-flooding.

---

**NAVBAR (fixed, z-index: 10)**

- Fixed to top, full width. Padding: `px-5 sm:px-8 py-4 sm:py-5`. Flex row, `justify-between`, `items-center`.
- **Logo (left):** Flex row with `gap-3`. Text "Mainframe(R)" (use the registered trademark symbol) at `text-[21px] sm:text-[26px]`, `tracking-tight`, black, using `var(--font-heading)`. Beside it, a decorative asterisk character `✳︎` at `text-[25px] sm:text-[30px]`, black, `select-none`, `letter-spacing: -0.02em`.
- **Desktop nav links (center, hidden below md):** Flex row, `text-[23px]`, black. Links: "Labs", "Studio", "Openings", "Shop" separated by commas rendered as `, `. Each link has `hover:opacity-60 transition-opacity`.
- **Desktop CTA (right, hidden below md):** An anchor "Get in touch" at `text-[23px]`, black, `underline underline-offset-2`, `hover:opacity-60 transition-opacity`.
- **Mobile hamburger (visible below md):** A button with 3 horizontal bars (each `w-6 h-[2px] bg-black`), spaced with `gap-[5px]`. On toggle, the top bar rotates 45deg and translates down 7px, middle bar fades to opacity 0, bottom bar rotates -45deg and translates up 7px. All transitions are `duration-300`.
- **Mobile overlay (z-index: 9):** `fixed inset-0 bg-white/95 backdrop-blur-sm`, flex column, vertically centered, left-aligned with `px-8 gap-8`. Same links at `text-[32px] font-medium`, plus "Get in touch" underlined. Fades in/out with `opacity` and `pointerEvents` toggled. Hidden on md+.

---

**HERO SECTION (z-index: 1)**

- Full `h-screen`, flex column. On mobile: `justify-end pb-12`. On `md:`: `justify-center pb-0`. Horizontal padding: `px-5 sm:px-8 md:px-10`. `overflow-hidden`.
- Content container: `max-w-xl`, `relative z-10`.

**1. Blurred intro label:**
- `pointer-events-none`, `select-none`, `mb-5 sm:mb-6`.
- Font size: `clamp(18px, 4vw, 26px)`, `line-height: 1.3`, `font-weight: 400`, `color: #000`, `filter: blur(4px)`.
- Two lines of text:
- Line 1: "Hey there, meet A.R.I.A,"
- Line 2: "Mainframe's Adaptive Response Interface Agent"
- Separated by a `
`.

**2. Typewriter text:**
- Text: `"Glad you stopped in. Good taste tends to find us. Now, what are we building?"`
- Custom `useTypewriter` hook: takes `text`, `speed` (default 38ms per character), `startDelay` (default 600ms). After the delay, an interval reveals one character at a time. Returns `{ displayed, done }`.
- Rendered in a `

` tag, black, `mb-5 sm:mb-6`, font size `clamp(18px, 4vw, 26px)`, `line-height: 1.35`, `font-weight: 400`, `min-height: 54px`.
- While typing, show a blinking cursor: `inline-block w-[2px] h-[1.1em] bg-black align-middle ml-[2px]` with CSS animation `blink 1s step-end infinite` (`opacity: 1 at 0%/100%, 0 at 50%`). Cursor disappears when `done` is true.

**3. Action pill buttons:**
- Appear with a fade-in + slide-up animation (`opacity 0->1`, `translateY(8px)->0`, `transition: opacity 0.4s ease, transform 0.4s ease`). They become visible 400ms after page load, independent of the typewriter animation (do NOT wait for typing to finish).
- Container: `flex flex-wrap gap-y-1`.
- **4 white pill buttons:** Labels: "Pitch us an idea", "Come work here", "Send a brief hello", "See how we operate". Each is `inline-flex items-center justify-center bg-white text-black border border-black/10 rounded-full text-[13px] sm:text-[15px] px-4 sm:px-5 py-[0.3em] mx-[0.2em] mb-[0.4em] white-space: nowrap`. Hover: `bg-black text-white`, `transition-colors duration-200`.
- **1 outline pill button:** Text "Reach us: [email protected]" (email is underlined with `underline-offset-1`), followed by a small 12x12 copy icon (inline SVG of two overlapping rectangles). Styled: `text-white bg-transparent border border-white rounded-full`, same sizing as above, with `gap-2 sm:gap-3` between text and icon. Hover: `bg-white text-black`. On click, copies "[email protected]" to clipboard via `navigator.clipboard.writeText()`.

---

DEPENDENCIES

Only React, ReactDOM, Tailwind CSS, and Vite. No other UI libraries. Lucide-react is available but not used in this component.

[Viktor Oddy @viktoroddy]

Claude 4.8 + 1 prompt

and now anyone can achieve the same results.

Prompt below 👇

[Viktor Oddy @viktoroddy]

Access ALL prompts for stunning animated websites in one click: https://t.co/N0kni8yzNb

**Recreate an "Arc" cloud hosting landing page -- a dark, minimal, modern SaaS site built with React + Vite + TypeScript + Tailwind CSS. Use the Inter font (400, 500, 600, 700) from Google Fonts. The entire page uses a pure black (#000000) background with white text. Use lucide-react for icons. The page has the following sections in order:**

---

## 1. HEADER (sticky)

A sticky top header with `bg-dark-950/[0.92]` (92% opacity black) and `backdrop-blur-[10px]`. Contains:
- Left: Logo image at `/image copy.png` (a local PNG file -- this is the "Arc" brand logo), width `3.875rem`
- Center-right: Nav links "Services", "Ecosystems", "Careers" as text links with `text-dark-200` and `hover:text-white`, each `px-3 py-1.5 rounded-full`
- Far right: "Get Arc" link (hidden on mobile)
- Mobile: Hamburger menu using lucide `Menu`/`X` icons, opens a vertical nav dropdown
- Max width: `64rem` (custom `max-w-container`)

## 2. HERO SECTION

Centered text hero with generous padding (`pt-16 pb-16` mobile, `pt-[6.75rem] pb-[6.75rem]` desktop):
- **Announcement pill**: A rounded-full link "Arc Secures $72M in Round A" with an animated rotating conic gradient border. The pill has `bg-dark-800`, and behind it an absolutely positioned spinning element with `conic-gradient(rgba(0,0,0,0), rgba(0,0,0,0) 40%, rgba(255,255,255,0.17) 50%, rgba(0,0,0,0) 60%, rgba(0,0,0,0))` that rotates via a CSS animation (`translate(-50%,-50%) rotate(0deg)` to `rotate(360deg)`, 4s linear infinite). Includes a small arrow icon (custom SVG arrow pointing right).
- **H1**: "Fast cloud hosting for all startups" -- sizes `text-5xl` up to `text-[80px]`, `font-medium`, `tracking-tight`, `max-w-[41.875rem]`, `leading-[1.05]`
- **Subtitle**: Two-tone paragraph. "Arc brings the fastest deployment tools" in `text-dark-100` (lighter), rest in `text-dark-300` (dimmer). `text-lg md:text-2xl`, `max-w-[56.5625rem]`
- **CTA button**: "Get started now" -- `bg-dark-100 text-dark-950` (light button, dark text), `rounded-full`, `px-5 py-2.5`, `hover:bg-white`

## 3. VIDEO HERO SECTION

A full-width autoplaying video in a `rounded-2xl` container, `max-w-[69.125rem]`, `aspect-video`. The video:
- URL: `https://t.co/o3XCxFG35g`
- Attributes: `autoPlay`, `loop`, `muted`, `playsInline`
- Styling: `absolute inset-0 w-full h-full object-cover`

## 4. LOGO MARQUEE

An infinitely scrolling horizontal marquee of partner brand names (text-only logos, no images):
- Names: Streambase, Gridway, Vaultly, Meridian, Layrd, Velo, Canopy, Plex, Cloudwav
- Each name is rendered as uppercase, `tracking-wider`, `font-semibold`, `text-sm`, `text-dark-400`, `opacity-50`
- Each has specific widths (Streambase: `w-36`, Gridway: `w-28`, Vaultly: `w-[5.375rem]`, Meridian: `w-[7.75rem]`, Layrd: `w-[5.75rem]`, Velo: `w-28`, Canopy: `w-[7.5rem]`, Plex: `w-28`, Cloudwav: `w-[10rem]`)
- The logo set is duplicated 4 times in a row and animated with `translateX(0)` to `translateX(-25%)` over 30s linear infinite
- Left and right edges have gradient fade masks using CSS `mask-image: linear-gradient(...)` plus `backdrop-blur-[3px]`, transitioning from `dark-950` to transparent
- Container max-width: `64rem`

## 5. STATS SECTION

Left-aligned heading + 3 stat cards in a row:
- Heading: "Proven in speed" (`text-3xl md:text-[48px]`, `font-medium`)
- Subheading: "Arc has processed billions in requests for millions of teams, in hundreds of countries." (`text-dark-300`, `max-w-lg`)
- 3 cards in `flex-row` (stacked on mobile): Each `bg-dark-700 rounded-2xl`, centered text, `min-h-[8.5rem] md:min-h-[8.875rem]`
- Card 1: "$42T+" / "requests handled per year"
- Card 2: ">99.999%" / "uptime grade"
- Card 3: "<5s" / "time to deploy a new stack"
- Values are `text-2xl md:text-[30px] font-medium`, labels are `text-dark-300 text-sm md:text-base`

## 6. PRODUCTS SECTION (3 cards, alternating layout)

Left-aligned heading + 3 large product cards stacked vertically:
- Heading: "Unlock bare-metal nodes" (`text-3xl md:text-[48px]`)
- Subheading: "Leverage the fastest provisioning flows for shipping applications to bare metal." (`text-dark-300`)
- Each card: `bg-dark-800 rounded-2xl`, `grid grid-cols-1 md:grid-cols-2`, `min-h-[25rem]`
- Cards alternate image/text position (`imageFirst` toggles order):
- **Compute** (text left, image right): "Elastic, self-healing node pools that consistently serve higher traffic and deliver reliable uptime for your app."
- Image: `https://t.co/2wqtEGVMBA`
- **Transfer** (image left, text right): "Increase resilience through reliable and instant failovers."
- Image: `https://t.co/DOZRFxY0EX`
- **Orchestration** (text left, image right): "Orchestrate how builds deploy, optimize routing and delivery, and ship code faster while scaling globally."
- Image: `https://t.co/soo5yLsnPX`
- Each card text side has: title (`text-2xl md:text-[30px] font-medium`), description (`text-dark-300`), and a "Learn more" pill button with arrow icon (`bg-white/[0.04] backdrop-blur-[10px] rounded-full hover:bg-white/10`)
- Images are `absolute inset-0 w-full h-full object-cover`

## 7. TESTIMONIALS SECTION (expandable video cards)

Left-aligned heading + 3 side-by-side video cards with accordion-like expand behavior:
- Heading: "Trusted by leaders across the stack"
- Subheading: "Conversations with builders shaping the future of hosting, powered by Arc."
- Container: `max-w-[84rem]`, cards are `h-[25rem] md:h-[30rem]` in a flex row with `gap-3`
- Active card gets `flex-[5]`, inactive cards get `flex-1`. Transition: `duration-500 ease-in-out`
- Each card is a `<button>` with `rounded-2xl overflow-hidden border-2`
- Active: `border-white/10`; Inactive: `border-white/[0.07]`
- Each card has an autoplaying, looping, muted `<video>` filling the card (`absolute inset-0 w-full h-full object-cover`)
- A gradient overlay: `bg-gradient-to-t from-black/60 via-transparent to-transparent`
- Active card shows name + role (bottom-left) and company name (bottom-right, desktop only). No play buttons anywhere.
- Videos:
1. Matthias Richter Thornton-Lin / Co-Founder & CTO, Canopy: `https://t.co/7DfjqCs0sK`
2. Priya Kaur / Co-Founder, Cloudwav: `https://t.co/f0HZvb2T4l`
3. Nikolai Sundstrom / Head of Engineering, Streambase: `https://t.co/ikjA2X4p63`

## 8. INDUSTRIES SECTION (3 vertical cards)

Left-aligned heading + 3 cards in a `grid-cols-3` (stacked on mobile):
- Heading: "Leading startups scale on Arc"
- Subheading: "The fastest moving, most ambitious startups boost their revenue with Arc."
- Each card: `bg-dark-800 rounded-2xl p-6 md:p-12`, `hover:bg-dark-700/80 transition-colors`, is an `<a>` link
- Card structure:
1. **DevOps & Platforms** (icon: `ArrowLeftRight` from lucide): stat "55+" / "active regions", company "CANOPY", description about RWI hosting
2. **Data & Caching** (icon: `Diamond`): stat "85B" / "monthly stored objects", company "VAULTLY", description about storage stack
3. **Media & Streams** (icon: `CircleDot`): stat "5M+" / "daily served pages", company "STREAMBASE", description about streaming backend
- Icons are `w-6 h-6 text-dark-400`
- Stats: `text-4xl md:text-[48px] font-medium`
- Company name: `text-sm font-semibold tracking-wider uppercase text-dark-400`

## 9. GLOBE CTA SECTION

A centered CTA with animated dot grid background:
- Heading: "Elastic hosting for modern platforms" (`text-3xl md:text-[48px]`, `max-w-[35rem]`)
- CTA button: "Get started now" (same style as hero CTA)
- Below: A small status pill `bg-white/[0.07] backdrop-blur-md rounded-full` showing "us-e1.arc.i" (dimmed) and "req. -> 200"
- Background: A `<canvas>` element rendering an animated dot grid. Dots are placed on a 24px spacing grid, each with random phase/speed. They pulse using sine waves, brighter near the center. The canvas uses a radial `mask-image` (ellipse 70% 60%) to fade edges. Dot radius is 1.2px, colors are `rgba(255,255,255, alpha)` with very low alphas (0.01-0.15).

## 10. FOOTER

Two-part footer:
- **Top row**: Logo (left) + 4 link columns (right, in a grid on mobile)
- Services: Compute, Transfer, Orchestration, Pipeline
- Ecosystems: DevOps & Platforms, Data & Caching, Media & Streams
- Careers: About, Careers
- Connect: X (Twitter), LinkedIn, Get Arc
- Column titles: `text-sm font-medium`; Links: `text-sm text-white/45 hover:text-white/70`
- Logo: same `/image copy.png`
- Below logo: "Cloud Platforms" + "(c)2026 The Arc Cloud, Inc." in `text-white/40`
- **Bottom row**: "Terms" / "Privacy" links (`text-white/45`), then a disclaimer paragraph in `text-white/25 text-xs`

---

## TAILWIND CONFIG

Custom color scale `dark`: 950=#000000, 900=#141414, 800=#191919, 700=#222222, 600=#333333, 500=#666666, 400=#868686, 300=#999999, 200=#b3b3b3, 100=#eeeeee. Custom `max-w-container: 64rem`. Two keyframe animations: `marquee` (translateX 0 to -25%, 30s) and `spin` (translate-50%,-50% + rotate 0-360deg, 4s). Font family: Inter, system-ui, -apple-system, sans-serif.

## CUSTOM CSS

In `index.css`: Tailwind base/components/utilities imports. Body gets `bg-dark-950 text-white font-sans`. Antialiased font smoothing. Two utility classes: `.gradient-fade-left` with `mask-image: linear-gradient(to right, red 50%, transparent)` and `.gradient-fade-right` with `mask-image: linear-gradient(to left, red 50%, transparent)`.

## CUSTOM COMPONENTS

- **ArrowIcon**: A custom SVG arrow (right-pointing, with rounded linecaps, no fill, stroke only)
- **FunLogo**: Renders `/image copy.png` with `object-fit: contain`

## GENERAL DESIGN NOTES

- Everything uses `rounded-2xl` for cards, `rounded-full` for buttons/pills
- Consistent section spacing: `py-12 md:py-20`
- Consistent horizontal padding: `px-5 lg:px-10`
- Content max-width: `64rem` for most sections, `69.125rem` for video hero, `84rem` for testimonials
- Card backgrounds: `bg-dark-800` (#191919)
- Muted text: `text-dark-300` (#999999)
- All interactive elements have `transition-colors`
- No purple, indigo, or violet colors anywhere -- strictly black/white/gray palette
- 3 local PNG files in `/public`: `image.png`, `image copy.png` (the logo), `image copy copy.png` (unused)

[Viktor Oddy @viktoroddy]

Claude Opus 4.8 vs GPT 5.5

Prompt 👇

[Viktor Oddy @viktoroddy]

Access ALL prompts for stunning animated websites in one click: https://t.co/N0kni8yzNb

Recreate a high-fidelity, premium interactive landing page named "Reverie" using React, TypeScript, and a combination of Tailwind CSS and inline styles. The project must have a smooth, hardware-accelerated scroll-linked animation system, 3D/parallax mouse-tracking effects, responsive layouts, and elegant micro-animations.

---

1. Typography & Global Styles

- Fonts:
- Load the following Google Fonts:
- Headers: `'Viaoda Libre', serif` (elegant serif font).
- Body, nav links, and captions: `'Imprima', sans-serif` (clean, sleek sans-serif font).
- Global Reset & Base CSS:
- `html, body { margin: 0; padding: 0; background: #0a0608; scroll-behavior: auto; }`
- Body font should default to `'Imprima', sans-serif`.
- Add `scrollbar-gutter: stable;` to the `html` tag to prevent layout shifts.
- Include an animation utility:
```css
@keyframes bobUp {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-6px); }
}
```

---

2. Assets Asset Mapping

Define these exact asset constants at the top of the file:
```typescript
const PORTAL_BG = 'https://t.co/qftKoNra4J';
const CURTAIN_LEFT = 'https://t.co/rB2CfX8M29';
const CURTAIN_RIGHT = 'https://t.co/XC2C4nneoG';
const WORLD_BG = 'https://t.co/sT0gSzeQBr';

// The cards MUST remain in this exact order (Card 3, Card 1, Card 2)
const CARD_IMAGES = [
'https://t.co/Zl7W9ollII',
'https://t.co/2uYjxc9HlZ', // Representing Card 1
'https://t.co/J45tUC3K7l', // Representing Card 2
];
```

---

3. State Management & Mathematical Helpers

- Math Utilities:
- Easing curve: `easeInOut(t) = t < 0.5 ? 2 * t * t : -1 + (4 - 2 * t) * t`
- Linear Interpolation: `lerp(a, b, t) = a + (b - a) * t`
- Constraint: `clamp(val, min, max) = Math.max(min, Math.min(max, val))`
- Parallax Magnitudes:
- `https://t.co/C2xWA9aixz = 6`, `MAG.portal = 7`, `MAG.curtainL = 14`, `MAG.curtainR = 14`
- Hook for Responsiveness:
- Implement a `useIsMobile()` hook responding to media query max-width of `767px` to dynamically update layouts.
- Scroll Tracking:
- The page height must be exactly `480vh`. Inside, a single sticky container spans `100vh`.
- Calculate normalized `scrollProgress` from `0` to `1` by reading window scroll position relative to the scrollable height.
- Smooth Mouse Tracking (Parallax):
- Normalize coordinates `rx`, `ry` between `-1` and `1` relative to the center of the viewport.
- Implement a `requestAnimationFrame` render loop (`tick`) to smoothly interpolate current position towards target cursor position (lerp step speed: `0.07`) to eliminate frame-rate stutters.
- Entrance Animation Delays:
- On mount, transition curtains open after `100ms`, fade UI in after `600ms`. Disable entry CSS transitions after `2200ms` so mouse movement doesn't experience lag or delay.

---

4. Animation Timelines (Scroll & Mouse Parallax)

Apply these precise styling updates in the render loop on every frame:
1. World Layer (`WORLD_BG`):
- Scale: Lerps from `1` (at start) to `1.18` (at maximum scroll).
- Parallax: `transform = scale(${scale}) translate3d(${rx * 6}px, ${ry * 6}px, 0)`
2. Portal Frame (`PORTAL_BG`):
- Scale: Lerps from `1` to `7.5` (creating an immersive zoom-through effect).
- Origin: `52% 38%`
- Opacity: Starts at `1`, fades out after `65%` scroll: `clamp(1 - (scrollProgress - 0.65) / 0.2, 0, 1)`
- Parallax: `transform = scale(${scale}) translate3d(${rx * 7}px, ${ry * 7}px, 0)`
3. Curtain Left (`CURTAIN_LEFT`):
- Initial Opening Offset: `62%` shift left.
- Scroll Offset: Moves further leftward up to `150%` as eased progress goes `0` to `1`.
- Curtain Scroll Scale: Lerps from `1` to `1.3`.
- Parallax & GPU Layer: `transform = translateX(calc(-${totalShift}% + ${rx * 14}px)) translateY(${ry * 14 * 0.3}px) scale(${curtainScrollScale}) translateZ(0)`
4. Curtain Right (`CURTAIN_RIGHT`):
- Symmetrically mirrors Curtain Left.
- Parallax & GPU Layer: `transform = translateX(calc(${totalShift}% + ${rx * 14}px)) translateY(${ry * 14 * 0.3}px) scale(${curtainScrollScale}) translateZ(0)`

---

5. Layout & Components

Navigation Bar
- Position: Absolute at the top, `zIndex: 50`. Responsive padding: `18px 20px` (mobile), `22px 48px` (desktop).
- Desktop (>=768px): Split navigation.
- Left side: Links `Worlds`, `Atelier`, `Immersions`.
- Center: SVG Star Logo (clean star shape in path `M14 2l2.09 6.42H23l-5.45 ...` inside a `28x28` viewport).
- Right side: Links `Craft`, `Codex`, `Connect`.
- Mobile (<768px): Centered star logo with an `Explore` link on the left and a `Connect` link on the right.
- Link Styling: uppercase, `12px`, letter spacing `0.12em`, white color with `0.9` opacity, no text decoration.

Scene 1: Hero Section (Entrance)
- Opacity: Fades out smoothly on scroll: `clamp(1 - scrollProgress / 0.22, 0, 1)`.
- Entrance Transition: Slide upward by `20px` on mount with opacity transition `0.9s ease` delayed by `300ms`.
- Responsive Layout:
- Mobile (<768px): Center-aligned vertical column. Text is dark brown (`#3b1a0a`). Heading: `FALL › INTO REVERIE` (Viaoda Libre). Subheading paragraph (max-width `280px`). Below it, displays a single card with image `CARD_IMAGES[0]`, showing a rounded white play button icon and "View Reel".
- Tablet (768px - 1099px): Center-aligned column. Text is dark brown (`#3b1a0a`). Headline and paragraph (max-width `400px`). Shows all 3 cards in a horizontal row:
- Card 3: Image `CARD_IMAGES[0]`, Play button + "View Reel"
- Card 1: Image `CARD_IMAGES[1]`, "32 World Patrons" in large elegant text
- Card 2: Image `CARD_IMAGES[2]`, Play button + "View Reel"
- Desktop (>=1100px): Split-screen horizontal layout. Text is white.
- Left Container: Aligned to the left (top `46%`, left `60px`). Title: `FALL › INTO REVERIE` (Viaoda Libre). Subheading paragraph. Max-width `440px`.
- Right Container: Aligned to the right (top `50%`, right `40px`). Row of 3 card containers (`158px x 158px`) with rounded corners (`28px`), bottom linear gradient, glassmorphic bottom blur (`backdropFilter: 'blur(6px)'`), play icon buttons or patron metrics overlay.
- Card Interactive Styling:
- Backdrop blur filter on bottom labels: `backdropFilter: 'blur(6px)'`, linear gradient to top `rgba(0,0,0,0.72) 0%, rgba(0,0,0,0.18) 60%, transparent 100%`.
- Slider Dots (Bottom Left):
- Absolutely positioned at bottom left (`60px` desktop, centered mobile).
- Renders 4 horizontal pill indicators: first indicator is wide (`28px`), other three are thin (`14px`), colored in white with opacities.
- Scroll Cue (Descend):
- Absolutely positioned at `bottom: 36px`, centered horizontally. Hidden on mobile.
- Text: uppercase "Descend" in `10px`, letter-spacing `0.22em`, color `rgba(255,255,255,0.6)`.
- Icon: A chevron SVG surrounded by a `34px x 34px` round circular border animated with the `bobUp 1.8s ease-in-out infinite` bounce animation.

Scene 2: Call to Action (Forge Beyond)
- Opacity: Fades in on scroll: `clamp((scrollProgress - 0.68) / 0.16, 0, 1)`.
- Layout: Centered vertical flex container (`zIndex: 46`), active only when opacity is visible.
- Content:
- Centered text wrapper.
- Heading: `FORGE BEYOND THE REAL` (Viaoda Libre, size clamp `38px` to `78px`, color `#ffffff`, letter spacing `0.03em`, line-height `1.05`, elegant text shadow `0 2px 20px rgba(0,0,0,0.4)`).
- Paragraph: `Singular voyages to astonishing destinations, shaped for those who seek beauty beyond the ordinary and the known.` (Imprima, size `20px` desktop / `14px` mobile, max-width `480px` desktop / `260px` mobile, line-height `1.6`, color `rgba(255,255,255,0.82)`).
```

[Viktor Oddy @viktoroddy]

❤️‍🔥GPT image 2 + Antigravity

Prompt below ↓

[Viktor Oddy @viktoroddy]

Every vibe coder deserves to know about a website like this

[MΞRCY DΞ GRΞAT 🦇🔊 @MercyDeGreat]

𝐃𝐚𝐲 𝟏 𝐨𝐟 𝐰𝐞𝐛𝐬𝐢𝐭𝐞 𝐲𝐨𝐮 𝐧𝐞𝐞𝐝 𝐭𝐨 𝐤𝐧𝐨𝐰

Do you know you can create cool motion websites with just one prompt?

I found a site you copy prompts for your motion websites design

Here: https://t.co/j5NFpm38yH

Copy the prompt and paste on lovable or any ai you use to create websites

You are welcome

[Viktor Oddy @viktoroddy]

❤️‍🔥 Unlimited ANIMATED prompts for AI websites from the video in one click: https://t.co/8ebpHNiVOM

[Viktor Oddy @viktoroddy]

Google Antigravity is insane.

❤️‍🔥Just recorded a 19-min tutorial on how to build this animated, award-winning website with Antigravity + GPT Image 2!

[Viktor Oddy @viktoroddy]

Access ALL prompts for stunning animated websites in one click: https://t.co/N0kni8z7CJ

EXACT RECREATION PROMPT

Project Setup

Stack: React 19 + Vite 6 + Tailwind CSS 4 + Motion (Framer Motion) + Lucide React icons + TypeScript

package.json dependencies:
- `react`, `react-dom` ^19.0.1
- `vite` ^6.2.3
- `@tailwindcss/vite` ^4.1.14, `tailwindcss` ^4.1.14
- `motion` ^12.23.24
- `lucide-react` ^0.546.0
- `@vitejs/plugin-react` ^5.0.4
- `typescript` ~5.8.2

Fonts (loaded via Google Fonts in `index.css`):
- Sans: Inter (weights: 300, 400, 500, 600)
- Mono: JetBrains Mono (weights: 400, 500)

```css
/* index.css */
@import url('https://t.co/mPNF07ZbVJ');
@import "tailwindcss";

@theme {
--font-sans: "Inter", ui-sans-serif, system-ui, sans-serif;
--font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, monospace;
}

@layer utilities {
.text-mega {
font-size: 21vw;
line-height: 0.75;
letter-spacing: -0.04em;
}
}
```

Global styling: Background `#fcfcfc`, text `#111`, selection color `bg-black text-white`, `overflow-x-hidden`, `font-sans` (Inter).

---

DATA

```tsx
const chaptersData = [
{ name: "Age of Dinosaurs", image: "https://t.co/qp9w8AzcU1" },
{ name: "Fossils of Ancient Life", image: "https://t.co/9mTYKMKFfi" },
{ name: "Reptiles of the Mesozoic", image: "https://t.co/ipC7P4MsLC" },
{ name: "Marine Fossil Gallery", image: "https://t.co/du6gIkcTnG" },
{ name: "Prehistoric Giants", image: "https://t.co/w71P6BVWgB" }
];
```

---

STATE

```tsx
const [showVideo, setShowVideo] = useState(false);
const [activeChapter, setActiveChapter] = useState(2); // starts at "Reptiles of the Mesozoic"
const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false);
```

- `showVideo` flips to `true` after a 2800ms delay (setTimeout)
- `activeChapter` auto-cycles every 3500ms via setInterval, wrapping `(prev + 1) % 5`

---

ANIMATION VARIANTS

```tsx
const fadeUp = {
initial: { opacity: 0, y: 20 },
animate: { opacity: 1, y: 0 },
};

const letterBlock = {
initial: { y: 120, opacity: 0 },
animate: {
y: 0,
opacity: 1,
transition: { duration: 1.2, ease: [0.16, 1, 0.3, 1] }
}
};
```

---

SECTION 1: HERO (full viewport height)

Container: `relative w-full min-h-screen flex flex-col overflow-hidden`

1A. HEADER (NHM Logo)

- `motion.header` with `staggerChildren: 0.1, delayChildren: 0.1`
- Padding: `pt-6 px-6 md:px-16`, `z-20`
- The "NHM" logo is a custom inline SVG with `viewBox="0 0 840 100"`, `fill-[#111]`, full width
- The SVG is wrapped in `motion.h1` with `variants` that animate from `scale: 1.03` to `scale: 1` with `staggerChildren: 0.06, delayChildren: 0.1`
- Each polygon of each letter uses the `letterBlock` variant (slides up from `y: 120`)
- Letter N (translate 0,0): Three polygons -- left vertical `0,0 14,0 14,100 0,100`, right vertical `200,0 214,0 214,100 200,100`, diagonal `0,0 33,0 214,100 181,100`
- Letter H (translate 280,0): Three polygons -- left vertical `0,0 14,0 14,100 0,100`, right vertical `200,0 214,0 214,100 200,100`, crossbar `14,43 200,43 200,57 14,57`
- Letter M (translate 560,0): Four polygons -- left vertical `0,0 14,0 14,100 0,100`, right vertical `266,0 280,0 280,100 266,100`, left diagonal `0,0 26,0 153,100 127,100`, right diagonal `254,0 280,0 153,100 127,100`

1B. SUB-NAV BAR

- Below the SVG logo, `flex justify-between items-start mt-8`
- Font: `text-[10px] md:text-[11px] font-mono tracking-[0.2em] uppercase`
- Uses `fadeUp` variant with `duration: 0.8, ease: "easeOut"`

Left column (15% width): Three lines -- "Natura" / "History" / "Museum"

Arrow separator (5% width, hidden on mobile): `ArrowRight` from lucide, size 14, strokeWidth 1, `text-gray-400`

Center column (flex-1 on mobile, 30% on desktop): "Exploring the story of life on earth through science, discovery and wonder." -- Split differently on desktop (3 lines) vs mobile (4 lines). `text-gray-800 leading-relaxed font-mono`

Arrow separator (5% width, hidden on mobile): Same as above

Right column (15% width, hidden on mobile): Nav links list -- Visit, Exhibitions, Discover, Learn, About. `text-gray-800`, `hover:text-black hover:underline`

Hamburger button (far right, z-60): Two horizontal lines (`w-8 h-[1.5px] bg-black`), `gap-[6px]`. Hover: first line shrinks to `w-6`, second expands to `w-10`. When open: first rotates 45deg + translateY, second rotates -45deg + translateY (forming an X). Transition: `duration-300`.

1C. MOBILE MENU OVERLAY

- `AnimatePresence` wrapping a `motion.div`
- Appears below the header, slides in from `y: -20`, `opacity: 0` to `y: 0, opacity: 1`
- `bg-[#fcfcfc] border-b border-gray-200 shadow-xl`, only visible on `md:hidden`
- Contains the same nav links as the desktop version, `text-sm font-mono tracking-[0.2em] uppercase`, `space-y-6`

1D. BACKGROUND VIDEO

- Appears after 2800ms delay (controlled by `showVideo` state)
- `absolute top-0 left-0 w-full h-full pointer-events-none z-0`
- Video: `autoPlay loop muted playsInline`, `w-full h-full object-cover`
- Video URL: `https://t.co/F0MmRcIWWi`

1E. LEFT SIDEBAR CONTENT

- `motion.div` with `staggerChildren: 0.15, delayChildren: 0.6`
- Position: `px-10 md:px-16`, `mt-20 sm:mt-28 md:mt-32`, `w-[320px]`, `z-10`

Section indicator: `01` + horizontal line (`w-16 h-[1.5px] bg-black/20`), `text-xs font-mono`

Headline: "TIMELESS WONDERS" -- `text-[3.5rem] md:text-[5rem] font-normal tracking-tight leading-[1]`. Line break between "TIMELESS" and "WONDERS".

Description: "Step into the natural world and / discover the stories written / millions of years ago." -- `text-[13px] md:text-[14px] text-gray-700 w-[240px] leading-[1.6]`

CTA Button ("Explore Now"):
- Container: `bg-[#1a1a1a] px-6 py-3.5 border border-[#1a1a1a] rounded-md shadow-sm`
- Hover: slides up 0.5px, adds `shadow-[3px_3px_0px_rgba(17,17,17,0.5)]`
- Active: resets translate and shadow
- Has a sliding background panel: `bg-[#fcfcfc]` that slides from `-translate-x-[101%]` to `translate-x-0` on hover, `duration-700 ease-[cubic-bezier(0.16,1,0.3,1)]`
- Icon: Custom SVG leaf/plant shape (4 paths forming a stylized leaf), white by default, turns `#111` on hover with `scale-110 -rotate-12 -translate-y-1` transform
- Text: "Explore Now", `text-[15px] font-medium`, white turning to `#111` on hover

1F. RIGHT SIDEBAR (hidden on mobile)

- `motion.div` with `staggerChildren: 0.15, delayChildren: 0.9`
- Position: `w-[200px] mt-12 md:mt-20`, `hidden md:flex`

Specimen info: "Tyrannosaurus Rex" heading (`text-[10px] font-bold font-mono tracking-widest uppercase`), subtext "Late Cretaceous period / 68-66 million years ago" (`text-[12px] text-gray-600 leading-[1.6]`)

Stats: "Length" label + "12.3 m" value, "Height" label + "4.0 m" value. Labels: `text-[10px] font-mono tracking-widest uppercase text-gray-500`. Values: `text-[13px] font-medium`.

View Details button: Circle (`w-10 h-10 rounded-full border border-gray-400`) with `Plus` icon (size 16, strokeWidth 1.5), text "View Details" (`text-[10px] font-mono uppercase tracking-widest font-bold`). Hover: circle gets `border-black bg-[#111]`, icon turns white.

1G. BOTTOM-LEFT "SCROLL TO EXPLORE"

- `absolute bottom-10 left-[2.5rem] md:left-[4rem]`, `hidden md:flex`
- Fade up animation: `delay: 1.2`
- Circle (`w-12 h-12 rounded-full border border-gray-300`) containing two thin vertical lines (`w-[1px] h-[12px] bg-gray-600`, `gap-[4px]`) representing a pause icon
- Text: "Scroll to explore" -- `text-[10px] font-mono tracking-widest uppercase text-gray-500 font-semibold`

---

SECTION 2: "EXPLORE OUR WORLD"

Container: `relative w-full min-h-[75vh] md:min-h-screen bg-[#fcfcfc]`, flex column centered, `pt-24 md:pt-32 pb-0 z-20`

2A. SECTION LABEL

`[ 02 ] Explore Our World` -- `text-[10px] md:text-[11px] font-mono tracking-[0.2em]`, `mb-12`. "02" in `text-gray-500`, "Explore Our World" in `text-gray-900 font-bold uppercase`.

2B. MAIN HEADING

"Unearth the stories of our planet's past through fossils, minerals, and ancient wonders." -- `text-[2.2rem] md:text-[3.5rem] lg:text-[4.2rem] leading-[1.1] font-medium tracking-tight text-[#111]`, max-width 1000px, text-center. Line break on desktop after "past". Animates with `whileInView` from `y: 40, opacity: 0` to `y: 0, opacity: 1`, `once: true`, margin `-100px`.

2C. ACTION PILLS

Five pill buttons in a flex-wrap row, `gap-3 md:gap-4`, `mb-10 md:mb-24`. Staggered reveal animation (`staggerChildren: 0.1, delayChildren: 0.3`). Each pill: `rounded-full border border-gray-300 text-[11px] font-medium uppercase tracking-wider bg-white/50 backdrop-blur-sm text-gray-800`. Hover: `border-black bg-black text-white`. Icons from lucide (size 14, strokeWidth 2):

1. `Bone` + "Dinosaurs"
2. `Dna` + "Ancient Life"
3. `Gem` + "Minerals"
4. `Leaf` + "Fossils"
5. `BookOpen` + "Learn More"

2D. SPACER

`min-h-[220px] md:min-h-[450px]` -- provides room for the pterodactyl image from Section 3 to overlap upward.

2E. BOTTOM TEXT

Absolute positioned at bottom, `px-8 md:px-16 pb-8 md:pb-12`, `pointer-events-none`. Two text elements at `justify-between`:
- Left: "WE DON'T JUST TELL STORIES."
- Right: "PALEONTOLOGY (C) 2026"
- Both: `text-[10px] font-mono tracking-widest uppercase text-gray-500 font-medium`, hidden on mobile.

---

SECTION 3: "ANCIENT COLLECTION" (Dark Section)

Container: `relative w-full bg-[#0a0a0a] text-white flex flex-col z-30`

3A. PTERODACTYL IMAGE (Overlapping)

- Absolute positioned at top, centered horizontally (`left-1/2 -translate-x-1/2`)
- Width: `w-[160vw] md:w-[1100px]`
- Image URL: `https://t.co/GRjKieleDW`
- Animates with `whileInView` from `y: "-65%", opacity: 0` to `y: "-78%", opacity: 1`, `duration: 1.4, ease: "easeOut"`, viewport margin `100px`
- `pointer-events-none z-0`, `mix-blend` not applied here

3B. HEADING AREA

- Padding: `px-8 md:px-16 pt-32 md:pt-48 mb-16`, `z-10`
- Two-column layout on xl (`flex-col xl:flex-row justify-between`)

Left -- Main heading: "Curated from millions of years of wonder [3 circle icons] & discovery." -- `text-[1.8rem] md:text-[3rem] lg:text-[3.8rem] xl:text-[4rem] leading-[1.15] font-medium tracking-tight text-white`. The three circle icons are inline (`inline-flex gap-2 md:gap-3 align-middle mx-2 md:mx-4 translate-y-[-4px]`), each `w-10 h-10 md:w-14 md:h-14 rounded-full border border-gray-600 bg-black text-gray-400`. Hover: `bg-white text-black border-white`. Icons: `Bone`, `Dna`, `Leaf` (size 22).

Right -- Tagline + pills:
- Tagline: "WE DON'T JUST DISPLAY FOSSILS / WE SHARE EARTH'S STORY" -- `text-[9px] md:text-[10px] font-mono tracking-widest text-gray-400 uppercase mb-6 leading-relaxed`
- Three pills: "Educational", "Authentic", "Inspiring" -- `px-5 py-2 rounded-full border border-gray-600 text-[9px] font-mono tracking-widest uppercase text-gray-300`. Hover: `bg-white text-black border-white`.

3C. TWO-COLUMN PANEL

Separated by `h-[1px] bg-gray-800` line. Flex row on desktop, column on mobile.

Left panel (35% width):
- `border-r border-gray-800` on desktop, `border-b` on mobile
- `min-h-[400px] md:min-h-[500px]`
- Top: `***` text (`text-gray-500 text-xl tracking-[0.3em]`)
- Center: Chapter image using `SandTransitionImage` component (SVG filter-based sand/dissolve transition). Image: `absolute inset-0 w-[80%] h-[80%] m-auto object-contain mix-blend-lighten`. Uses `AnimatePresence mode="wait"`.
- Bottom: Chapter counter `01 / 05` style, with animated number (`motion.div` slides vertically). `text-[10px] font-mono tracking-widest text-[#888] uppercase`. Counter numeral color `#888`, divider `text-[#333]`.

Right panel (65% width):
- Top bar: "Explore the past. Understand the present." + animated "Chapter 0X" label. `border-b border-gray-800 p-8 text-[10px] font-mono text-gray-400 tracking-widest`.
- Chapter list: 5 items, each `border-b border-gray-800/80 py-8`. Active: `text-white`, inactive: `text-[#444] hover:text-[#999]`. Chapter name: `text-2xl md:text-[2rem] font-medium tracking-tight`. Active item shows `ArrowUpRight` icon (size 22, strokeWidth 1, `text-gray-400`) that animates in/out.
- Clicking a chapter sets `activeChapter`.

3D. BOTTOM FOOTER

- `h-[1px] bg-gray-800` divider
- Text: "DIGGING INTO OUR PLANET'S PAST" -- `px-8 py-8 text-[10px] font-mono tracking-widest text-gray-500 uppercase bg-[#0a0a0a]`

---

SandTransitionImage COMPONENT

A custom component that creates a sand/particle dissolve effect using SVG filters:

```tsx
function SandTransitionImage({ src, alt, className }) {
// Uses usePresence() from motion/react for AnimatePresence awareness
// Unique filterId per instance via useRef
// requestAnimationFrame loop over 900ms
// Easing: entering = quartic ease-out (1 - Math.pow(1-t, 4)), exiting = cubic (Math.pow(t, 3))
// SVG filter chain:
// 1. feTurbulence: fractalNoise, baseFrequency 1.8, numOctaves 4
// 2. feDisplacementMap: scale up to 150 based on progress
// 3. feOffset: dy up to -80 (enter) or 120 (exit), dx up to -30/+30
// 4. feGaussianBlur: up to 6px
// 5. feColorMatrix: opacity fades (1 - progress * 1.2)
// Image has crossOrigin="anonymous" and referrerPolicy="no-referrer"
}
```

---

ALL EXTERNAL ASSET URLs

Video:
- `https://t.co/F0MmRcIWWi`

Images:
- Chapter 1: `https://t.co/qp9w8AzcU1`
- Chapter 2: `https://t.co/9mTYKMKFfi`
- Chapter 3: `https://t.co/ipC7P4MsLC`
- Chapter 4: `https://t.co/du6gIkcTnG`
- Chapter 5: `https://t.co/w71P6BVWgB`
- Pterodactyl: `https://t.co/GRjKieleDW`

(Note: these are Cloudinary URLs, not CloudFront. The project uses Cloudinary for all hosted media assets.)

---

KEY DESIGN DETAILS

- Color palette: `#fcfcfc` (off-white bg), `#111` / `#1a1a1a` (near-black), `#0a0a0a` (dark section bg). Gray scale via Tailwind: `gray-300` through `gray-800`.
- No purple/indigo anywhere. Strictly monochrome black/white/gray.
- Typography hierarchy: Large display headings (3.5-5rem), mono labels (10-11px), body text (13-14px).
- Spacing: 8px base system throughout.
- Transitions: Most hover transitions 300-700ms. Button slide effect uses `cubic-bezier(0.16, 1, 0.3, 1)`. Letter animations use same cubic bezier.
- The page is entirely a single `App.tsx` component plus the `SandTransitionImage` helper function in the same file.

[Viktor Oddy @viktoroddy]

ChatGPT Image 2.0 created the design.

Claude Opus 4.6 turned that design into a full React Native website

Prompt below ↓

[Viktor Oddy @viktoroddy]

Access ALL prompts for stunning animated websites in one click: https://t.co/N0kni8z7CJ

## Prompt

Build a fullscreen hero section for a site called "Orbis.Nft" using React, TypeScript, Tailwind CSS, and Vite. Recreate every detail below precisely.

---

### Video Background with Mouse-Scrub Effect

Use this video as the fullscreen background:
```
https://t.co/b7TxOua2iH
```

The video does NOT autoplay. Instead, implement a **mouse-scrub interaction**: as the user moves their mouse left/right across the viewport, the video scrubs forward/backward through its timeline. Implementation details:

- The video is paused on load at `currentTime = 0`.
- Track the mouse's horizontal position as a normalized value (0 to 1) across `window.innerWidth`.
- On each `mousemove`, compute the delta from the previous X position. Multiply that delta by a `SENSITIVITY` constant of `0.8` and by the video's `duration` to get a time offset.
- Maintain a `targetTime` that accumulates these offsets, clamped between 0 and `duration`.
- Use the video's `seeked` event to chain seeks: when a seek completes, if `targetTime` has diverged from `currentTime` by more than 0.01s, seek again. This prevents dropped seeks since the browser can only process one seek at a time.
- Use a `useRef` to store mutable state (`targetTime`, `isSeeking` flag, `prevX`) to avoid re-renders.
- The `<video>` element has attributes: `muted`, `playsInline`, `preload="auto"`, and is styled `absolute inset-0 h-full w-full object-cover`.

---

### Google Fonts

Load two Google Fonts in `index.html` via `<link>`:
```
https://t.co/akiDhw9HNK
```
- **Anton** -- used for the hero heading (mapped to Tailwind as `font-grotesk`).
- **Condiment** -- a cursive script used for the accent text (mapped as `font-condiment`).

Include `<link rel="preconnect">` tags for `https://t.co/tFUobTvSHj` and `https://t.co/OT5vqgkuTF` (with `crossorigin`).

---

### Tailwind Config

Extend the default Tailwind theme with:
- **Colors:**
- `background`: `#010828` (deep navy)
- `cream`: `#EFF4FF` (off-white for heading text)
- `neon`: `#6FFF00` (bright green for the cursive accent)
- **Font families:**
- `grotesk`: `['Anton', 'sans-serif']`
- `condiment`: `['Condiment', 'cursive']`

---

### Global CSS (`index.css`)

```css
body {
background-color: #010828;
color: #EFF4FF;
margin: 0;
overflow-x: hidden;
}
```

Also include a `.liquid-glass` utility class (not used in the hero itself, but part of the design system):
- `background: rgba(255, 255, 255, 0.01)` with `background-blend-mode: luminosity`
- `backdrop-filter: blur(4px)` (with `-webkit-` prefix)
- `border: none`
- `box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.1)`
- A `::before` pseudo-element creating a gradient border effect using a `mask-composite: exclude` technique. The gradient goes from `rgba(255,255,255,0.45)` at top/bottom to transparent in the middle, with `padding: 1.4px`.

---

### Navbar

A `<nav>` fixed to the top (`fixed top-0 left-0 right-0 z-50`), using `flex items-center justify-between`, with padding `px-5 sm:px-8 py-4 sm:py-5`.

**Left: Logo (inline SVG)**
A custom geometric SVG logo, 28x28, viewBox `0 0 256 256`, filled `#111111`:
```
M 256 64 L 256 128 L 192.5 128 L 160 95 L 128 64 L 96 95 L 63.5 128 L 64 128 L 128 192 L 128 256 L 64.5 256 L 32 223 L 0 192 L 0 64 L 64 0 L 192 0 Z M 256 192 L 256 256 L 192.5 256 L 160 223 L 128 192 L 128 128 L 192 128 Z
```

**Center: Desktop pill navigation (hidden on mobile, `hidden md:flex`)**
Absolutely centered with `absolute left-1/2 -translate-x-1/2`. Dark pill container: `bg-gray-900 rounded-full px-2 py-1.5`. Contains 5 nav items: `['Device', 'Real Stories', 'Science', 'Plans', 'Reach Us']`. The first item is the active state: `bg-white text-gray-900 text-sm font-medium px-4 py-1.5 rounded-full`. All others: `text-gray-300 text-sm font-medium px-4 py-1.5 rounded-full hover:text-white transition-colors`.

**Right: Desktop CTA button (hidden on mobile, `hidden md:flex`)**
`bg-gray-900 text-white text-sm font-medium px-5 py-2 rounded-full` with `hover:bg-gray-700 transition-colors`. Contains a small green dot (`w-2 h-2 rounded-full bg-green-400`) followed by text "Reserve Yours".

**Mobile: Hamburger toggle (`md:hidden`)**
Uses `Menu` and `X` icons from `lucide-react` at `size={22}`, colored `text-gray-900`. Toggles a dropdown.

**Mobile dropdown menu**
When open: `fixed top-0 left-0 right-0 z-40 bg-white pt-16 pb-6 px-5 shadow-lg flex flex-col gap-1 md:hidden`. Each nav item is a full-width button: `text-gray-800 text-base font-medium py-3 border-b border-gray-100 text-left hover:text-gray-500 transition-colors`. Includes the same "Reserve Yours" CTA at the bottom with `mt-4`, centered, `rounded-full`.

---

### Hero Text (Bottom-Left)

Positioned inside a `relative z-10 flex flex-col h-full` container. The text block is anchored to the bottom: `flex-1 flex items-end pb-16 sm:pb-20 lg:pb-24 px-6 lg:px-12`. Inner wrapper: `relative lg:ml-12 max-w-[780px]`.

**Main heading `<h1>`:**
- Font: `font-grotesk` (Anton)
- Size: `text-[40px] sm:text-[60px] md:text-[75px] lg:text-[90px]`
- `uppercase`, color `text-cream` (#EFF4FF)
- Line height: `leading-[1.05] sm:leading-[1] md:leading-[1] lg:leading-[1]`
- Text content (with line breaks):
```
Beyond earth
and ( its ) familiar
boundaries
```
The parentheses around "its" have spaces inside them: `{'( '}its{' )'}`.

**Cursive accent `<span>`:**
- Absolutely positioned relative to the heading wrapper: `absolute -right-4 sm:right-0 md:right-4 top-0 sm:top-2 md:top-4`
- Font: `font-condiment` (Condiment cursive)
- Size: `text-[24px] sm:text-[32px] md:text-[40px] lg:text-[48px]`
- Color: `text-neon` (#6FFF00)
- Slight rotation: `-rotate-1`
- `opacity-90`
- Inline style: `mixBlendMode: 'exclusion'`
- Text: "Nft collection"

---

### Overall Layout

The root `<section>` is `relative h-screen w-full overflow-hidden bg-background`. The video sits at `absolute inset-0` behind everything. The content layer sits at `relative z-10`. The nav is `fixed z-50`.

The page title in `index.html` is "Orbis.Nft".

---

### Dependencies

- `react`, `react-dom` (v18)
- `lucide-react` (for Menu and X icons)
- Tailwind CSS 3, PostCSS, Autoprefixer
- Vite with `@vitejs/plugin-react`
- TypeScript

No other UI libraries needed.

[Viktor Oddy @viktoroddy]

Claude code + GPT Image 2 = $10k 3D animated websites.

Prompt below 👇