Free · full text
62 free AI website build-prompts
These are 62 complete, art-directed website build-prompts — full text, free, no sign-up. Each one specifies real typefaces, a color system, layout structure, motion and working asset URLs, so an AI builder produces a designed page on the first paste. They come from the Meez library of 641 prompts and 285 motion backgrounds, where everything is free to browse and preview. Prefer GitHub? 15 of these ship as an MIT repo with an installable anti-slop SKILL.md for Claude Code and Cursor: github.com/mah-claude/anti-slop-website-prompts.
How to use them
- Open any prompt below and copy the whole text — the detail is the point; trimming it is how sites end up generic.
- Paste it into your AI builder: Lovable, Bolt, v0, Cursor, Claude, Replit, Windsurf or any tool that builds from text. (Per-tool instructions: Lovable, v0, Bolt, Cursor, Claude.)
- Swap the copy for your own, point the asset URLs at your media, and ship. The site is yours, commercially.
The 62 free prompts — full text
PROMPTLanding Page · free prompt · copy-paste
### Overview
Build a full-screen, scroll-driven fashion/archive landing page for a brand called "prmpt". The page has two main phases:
1. **Hero phase** (first 100vh of scroll): Full-viewport video background with overlaid UI (logo, nav, product info, custom cursor). A black panel slides up from below covering the video.
2. **Gallery phase** (continues scrolling): The black panel contains a scattered grid of product images that scale in/out as they enter/exit the viewport. At the end, a white overlay fades in with a "view" CTA button.
---
### Tech Stack
- **React 19** + **TypeScript**
- **Vite 6** with `@vitejs/plugin-react`
- **Tailwind CSS v4** via `@tailwindcss/vite` plugin
- **GSAP 3.15** + `@gsap/react` (ScrollTrigger)
- **Motion (Framer Motion) 12** (`motion/react`)
- **Font**: "Inter Tight" (Google Fonts, weight 500) -- loaded via `<link>` or import
---
### Asset URLs
**Videos (CloudFront):**
- LEFT video: `https://meez.design/web/media/bg-videos/ms-person.mp4`
- RIGHT video: `https://meez.design/web/media/bg-videos/ms-nature-nice.mp4`
**Gallery Images (10 total, in order):**
1. `https://meez.design/web/bg-previews/279_lbwkwb5v5i.jpg`
2. `https://meez.design/web/bg-previews/280_lf367owp8b.jpg`
3. `https://meez.design/web/bg-previews/281_mag4s8xjit.jpg`
4. `https://meez.design/web/bg-previews/282_mb0vljq6ea.jpg`
5. `https://meez.design/web/bg-previews/283_mpstfz9kkw.jpg`
6. `https://meez.design/web/bg-previews/284_o1br1hvec4.jpg`
7. `https://meez.design/web/bg-previews/285_o3pg4ceknu.jpg`
8. `https://meez.design/web/bg-previews/286_or36kux95o.jpg`
9. `https://meez.design/web/bg-previews/287_p3d3ubxsst.jpg`
10. `https://meez.design/web/bg-previews/288_pac5rafgvq.jpg`
---
### SECTION 1: Hero (Video Background + Overlaid UI)
#### Root Container
- `id="scroll-spacer"`, `position: relative`, `user-select: none`, `background: white`
- Height is dynamically calculated (initially `500vh`, then overridden by GSAP to `vh + maxScroll + 2*vh`)
- Custom cursor hidden on desktop (`cursor: none`), default on touch devices
#### 1A. Custom Cursor (Desktop Only)
- Hidden on mobile/tablet (< 1024px)
- A `fixed`, `pointer-events-none`, `z-index: 50` div that follows `mousemove`
- Positioned via direct DOM manipulation (`style.left/top = clientX/clientY`)
- `transform: translate(-50%, -50%)` to center on pointer
- `mix-blend-mode: exclusion`
- Contains a 48x48 SVG: a circle with stroke (r=22.75, strokeWidth=2.5) containing a custom Japanese/decorative glyph path, all filled white
#### 1B. Logo (Top Left)
- `position: fixed`, `pointer-events-none`, `z-index: 20`
- `mix-blend-mode: exclusion`
- Responsive width: 124px (mobile < 640), 266px (tablet 640-1024), 355px (desktop)
- Position: `top: 16px, left: 16px` (mobile), `top: 32px, left: 32px` (desktop)
- Motion animation: fade in + slide up (`opacity: 0->1, y: 12->0`), duration 0.6s, ease `[0.25, 0.1, 0.25, 1]`, delay 0s
- SVG viewBox `0 0 355 110`, contains the "prmpt" wordmark + circled "R" mark, all paths filled white
#### 1C. Caption (Below Logo, Left Side)
- `position: fixed`, `pointer-events-none`, `z-index: 20`
- `mix-blend-mode: exclusion`
- Position: `left: 32px` (desktop), `left: 16px` (mobile)
- Top: 244px (desktop), 180px (tablet), 118px (mobile)
- Width: 692px (desktop), `calc(50vw - 48px)` (tablet), `calc(100vw - 32px)` (mobile)
- Font: Inter Tight, weight 500, size 12px, line-height 140%, letter-spacing -0.04em, color #FFFFFF
- Motion animation: same as logo but delay 0.3s
- Text content: "When switching between videos near the center, do not reset currentTime to 0 abruptly. Add a small dead zone: if cursor is within +/-50px of center, keep both videos at currentTime = 0 and show whichever was last active."
#### 1D. Header Navigation (Top Right)
- `position: fixed`, `z-index: 20`, `pointer-events-none`
- `mix-blend-mode: exclusion`
- Position: `top: 32px, right: 32px` (desktop), `top: 16px, right: 16px` (mobile)
- Width: 330px (desktop), auto (mobile)
- Height: 30px
- Flex row, justify-content: space-between, align-items: center
- Motion animation: same easing, delay 0.15s
- Contains:
- "ABOUT" text (hidden on mobile): Inter Tight, 500, 15px, uppercase, white
- A flex row with gap 50px (desktop) / 20px (mobile):
- Hamburger SVG icon: viewBox `0 0 40 40`, two horizontal lines (`M0 14H40` and `M0 26H40`), stroke white, strokeWidth 2.5. Size: 30x30 (desktop), 24x24 (mobile)
- "[ CART ]" text: Inter Tight, 500, 15px (desktop) / 13px (mobile), white
#### 1E. Product Info (Bottom Right)
- `id="outro-info"`, `position: fixed`, `pointer-events-none`, `z-index: 20`
- `mix-blend-mode: exclusion`
- **Desktop**: right: 32px, bottom: 80px, width: 330px, flex-column, align center
- **Mobile**: left: 0, right: 0, bottom: 48px, flex-column, align center
- Motion animation: opacity 0->1, delay 0.45s
- `data-outro-offset`: 166 (desktop), 132 (mobile) -- used by scroll animation
- Contains:
- Top block (flex-column, align flex-start, width 100% desktop / 252px mobile, margin-bottom 32px desktop / 12px mobile):
- Circle icon: relative div (30x30 desktop, 20x20 mobile) containing:
- SVG circle (cx=20, cy=20, r=18.75, stroke white, strokeWidth 2.5 desktop / 2 mobile)
- `<span id="circle-symbol">` centered inside, shows "8" initially, changes to random symbol from `['8', '$', '^^', '%', '/']` on scroll (throttled 80ms)
- Font: Inter Tight, 500, 15px (desktop) / 10px (mobile), letter-spacing -0.04em, uppercase, white
- Collection label: Inter Tight, 500, 30px (desktop) / 20px (mobile), line-height 100%, text-align center, letter-spacing -0.04em, uppercase, white. Content: `ARCHIVE COLLECTION` + line break + `"PROMPT"`
- Price: Inter Tight, 500, 80px (desktop) / 60px (mobile), line-height 100%, text-align center, letter-spacing -0.04em, white. Content: `$97,33`
#### 1F. "View" Button (Bottom Right, Initially Hidden)
- `id="outro-buy"`, `position: fixed`, `pointer-events-none`, `z-index: 20`
- `mix-blend-mode: exclusion`
- **Desktop**: right: 32px, bottom: 32px, width: 330px, height: 174px
- **Mobile**: left: 16px, right: 16px, bottom: 60px, height: 100px
- `transform-origin: right bottom`, `transform: scale(0)` (starts hidden, scales to 1 via scroll)
- Background: #fff, border-radius: 1335px (pill shape)
- Flex center
- Text "view": Inter Tight, 500, 110px (desktop) / 72px (mobile), letter-spacing -0.04em, color #fff, `mix-blend-mode: exclusion`
#### 1G. Video Container
- `id="main-canvas"`, `pointer-events-none`
- **Desktop**: `position: fixed, inset: 0, width: 100%, height: 100%, z-index: 0`
- **Mobile**: `position: fixed, left: 0, top: 220px, width: 100vw, height: calc(100vh - 220px), z-index: 0`
- Opacity transition: 0 -> 1 when both videos loaded (`opacity 0.3s ease`)
- `overflow: hidden`
- Contains two `<video>` elements (muted, playsInline, preload="auto"), absolutely positioned to fill container, `object-fit: cover`
- Left video starts `display: none`, right starts `display: block`
**Desktop (non-touch):**
- Videos are NOT auto-played. They are scrubbed based on cursor X position via `requestAnimationFrame`.
- Dead zone: `Math.max(30, width * 0.05)` pixels from center
- If cursor is in dead zone, keep current video at `currentTime = 0`
- If cursor moves left of dead zone: show RIGHT video, scrub it based on distance from center-left-edge to left edge
- If cursor moves right of dead zone: show LEFT video, scrub it based on distance from center+deadzone to right edge
- `activeSideRef` tracks which side was last active, only changes when cursor exceeds dead zone
- Progress calculation: `(distance from dead zone edge) / (available range)` mapped to `0...video.duration`
CRITICAL: Only update currentTime when !video.seeking -- this prevents jittery playback by waiting for the browser to finish rendering the previous seek before requesting a new one.
#### 1H. Video Interaction Logic
**Mobile/Tablet (touch):**
- Videos auto-play alternately: left plays first, on `ended` event switches to right, on right `ended` switches back to left
- Respects `prefers-reduced-motion`
#### 1I. White Overlay
- `id="outro-overlay"`, `position: fixed, inset: 0`, `pointer-events-none`, `z-index: 12`
- Background: #fff, opacity: 0 (controlled by scroll)
#### 1J. Footer
- `id="outro-footer"`, `position: fixed`, `pointer-events-none`
- Left: 16px, bottom: 32px (desktop) / 24px (mobile)
- `mix-blend-mode: exclusion`, opacity: 0 (controlled by scroll)
- Flex row, gap: 80px (desktop) / space-between (mobile)
- Two spans: "PRMPT (R) 2026" and "PRIVACY POLICY"
- Font: Inter Tight, 500, 13px (desktop) / 11px (mobile), letter-spacing -0.02em, uppercase, white
---
### SECTION 2: Black Panel (Gallery)
#### Container
- `position: fixed, inset: 0`, background: black, `z-index: 10`
- Initially translated `translateY(100vh)` (off-screen below)
- Slides up to `translateY(0)` during first 100vh of scroll via GSAP ScrollTrigger (scrub: true, ease: none)
#### Inner Wrapper
- `width: 100%`, `padding-top: min(400px, 40vh)`
#### Grid Layout Algorithm
- Responsive columns: 2 (< 640px), 3 (640-1024px), 4 (>= 1024px)
- Each cell has `aspect-ratio: 2/3`
- Layout function `buildLayout(count, cols)` creates rows:
- For each row `r`, compute primary column: `a = (r * 2 + (r % 2)) % cols`
- Place one image at column `a`
- Every 3rd row (`r % 3 === 0`), place a second image at `b = (a + 2) % cols` (or `(a+1)%cols` if same as a)
- Empty cells get `-1` (rendered as empty spacer divs)
#### Card Behavior
- Each card has class `bp-card`, `will-change: transform`
- `transform: scale(0)` initially
- `transform-origin`: cards in left half of grid get `right bottom`, right half get `left bottom`
- Scale is computed per-frame in RAF based on card's vertical position:
- **Enter**: `Math.min(1, (vh - top) / (vh * 0.6))` -- scales from 0 to 1 as it enters viewport
- **Exit**: `Math.min(1, bottom / (vh * 0.4))` -- scales from 1 to 0 as it exits top
- Final scale: `Math.min(enter, exit)`
- If card is fully off-screen (bottom <= 0 or top >= vh): `scale(0)`
#### Scroll Phases (RAF-based, NOT scroll events)
- **Phase 1** (scrollY 0 to vh): Panel slides up. Cards are computed with panelOffset = `vh - scrollY`
- **Phase 2** (scrollY > vh): Panel is fixed at top. Inner wrapper translates up: `translateY(-(scrollY - vh))`. Cards recomputed with phase2 offset.
- **Outro** (scrollY > vh + maxScroll): White overlay fades in, product info slides up by `outroOffset` px, "view" button scales from 0 to 1, footer fades in. Progress: `(scrollY - vh - maxScroll) / (vh - 100)`
#### Spacer Height Calculation
- Set dynamically: `vh + maxScroll + 2 * vh` where `maxScroll = wrapScrollHeight - vh`
---
### CSS (index.css)
```css
@import "tailwindcss";
.bp-card {
will-change: transform;
}
@media (prefers-reduced-motion: reduce) {
.bp-card {
will-change: auto;
}
}
```
---
### Responsive Breakpoints
- **Mobile**: < 640px
- **Tablet**: 640px - 1024px
- **Desktop**: >= 1024px
---
### Key Design Principles
- All text overlays use `mix-blend-mode: exclusion` to remain visible against both light and dark backgrounds
- No visible scroll bar interaction -- entirely RAF-driven position tracking
- `pointer-events-none` on all overlaid UI elements
- `user-select: none` on root container
- Videos hidden (`visibility: hidden`) once scroll passes first viewport height
- Circle symbol randomizes on scroll (throttled to 80ms)
- Entry animations staggered: logo (0s), nav (0.15s), caption (0.3s), product info (0.45s)
---
## Source Code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>prmpt</title>
<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=Inter+Tight:wght@500&display=swap" rel="stylesheet"/>
<style>
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html, body { overflow-x: hidden; font-family: 'Inter Tight', sans-serif; font-weight: 500; }
body { background: #fff; }
#scroll-spacer {
position: relative;
user-select: none;
-webkit-user-select: none;
background: #fff;
height: 500vh;
}
/* Custom Cursor */
#custom-cursor {
position: fixed;
pointer-events: none;
z-index: 50;
width: 48px;
height: 48px;
transform: translate(-50%, -50%);
mix-blend-mode: exclusion;
left: -100px;
top: -100px;
}
/* Logo */
#logo {
position: fixed;
top: 32px;
left: 32px;
width: 355px;
pointer-events: none;
z-index: 20;
mix-blend-mode: exclusion;
opacity: 0;
transform: translateY(12px);
animation: fadeSlideIn 0.6s cubic-bezier(0.25, 0.1, 0.25, 1) 0s forwards;
}
/* Caption */
#caption {
position: fixed;
pointer-events: none;
z-index: 20;
left: 32px;
top: 244px;
width: 692px;
font-size: 12px;
line-height: 140%;
letter-spacing: -0.04em;
color: #fff;
mix-blend-mode: exclusion;
opacity: 0;
transform: translateY(12px);
animation: fadeSlideIn 0.6s cubic-bezier(0.25, 0.1, 0.25, 1) 0.3s forwards;
}
/* Header Nav */
#header-nav {
position: fixed;
z-index: 20;
pointer-events: none;
top: 32px;
right: 32px;
width: 330px;
height: 30px;
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
mix-blend-mode: exclusion;
opacity: 0;
transform: translateY(12px);
animation: fadeSlideIn 0.6s cubic-bezier(0.25, 0.1, 0.25, 1) 0.15s forwards;
}
#header-nav .nav-text {
font-size: 15px;
line-height: 18px;
text-transform: uppercase;
color: #fff;
}
#header-nav .nav-right {
display: flex;
flex-direction: row;
align-items: center;
gap: 50px;
}
/* Product Info */
#outro-info {
position: fixed;
right: 32px;
bottom: 80px;
width: 330px;
z-index: 20;
display: flex;
flex-direction: column;
align-items: center;
mix-blend-mode: exclusion;
pointer-events: none;
opacity: 0;
animation: fadeIn 0.6s cubic-bezier(0.25, 0.1, 0.25, 1) 0.45s forwards;
}
#outro-info .info-top {
display: flex;
flex-direction: column;
align-items: flex-start;
width: 100%;
margin-bottom: 32px;
}
#outro-info .circle-icon {
position: relative;
width: 30px;
height: 30px;
}
#outro-info .circle-icon svg {
position: absolute;
inset: 0;
}
#outro-info .circle-icon span {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
font-size: 15px;
line-height: 100%;
letter-spacing: -0.04em;
text-transform: uppercase;
color: #fff;
}
#outro-info .collection-label {
width: 100%;
font-size: 30px;
line-height: 100%;
text-align: center;
letter-spacing: -0.04em;
text-transform: uppercase;
color: #fff;
}
#outro-info .price {
width: 100%;
font-size: 80px;
line-height: 100%;
text-align: center;
letter-spacing: -0.04em;
color: #fff;
}
/* Buy Button */
#outro-buy {
position: fixed;
right: 32px;
bottom: 32px;
z-index: 20;
width: 330px;
height: 174px;
transform-origin: right bottom;
transform: scale(0);
background: #fff;
border-radius: 1335px;
display: flex;
justify-content: center;
align-items: center;
mix-blend-mode: exclusion;
pointer-events: none;
}
#outro-buy span {
font-size: 110px;
line-height: 100%;
text-align: center;
letter-spacing: -0.04em;
color: #fff;
mix-blend-mode: exclusion;
}
/* Video Container */
#main-canvas {
position: fixed;
inset: 0;
width: 100%;
height: 100%;
z-index: 0;
opacity: 0;
transition: opacity 0.3s ease;
overflow: hidden;
pointer-events: none;
}
#main-canvas video {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
/* White Overlay */
#outro-overlay {
position: fixed;
inset: 0;
pointer-events: none;
z-index: 12;
background: #fff;
opacity: 0;
}
/* Footer */
#outro-footer {
position: fixed;
left: 16px;
bottom: 32px;
z-index: 15;
display: flex;
align-items: center;
gap: 80px;
mix-blend-mode: exclusion;
pointer-events: none;
opacity: 0;
}
#outro-footer span {
color: #fff;
font-size: 13px;
letter-spacing: -0.02em;
text-transform: uppercase;
}
/* Black Panel */
#black-panel {
position: fixed;
inset: 0;
background: #000;
z-index: 10;
}
#black-panel .wrap {
width: 100%;
padding-top: min(400px, 40vh);
}
#black-panel .grid-row {
display: flex;
width: 100%;
}
#black-panel .grid-cell {
flex: 1;
aspect-ratio: 2/3;
}
#black-panel .bp-card {
position: relative;
height: 100%;
width: 100%;
transform: scale(0);
will-change: transform;
}
#black-panel .bp-card img {
height: 100%;
width: 100%;
object-fit: cover;
-webkit-user-drag: none;
user-drag: none;
}
@keyframes fadeSlideIn {
to { opacity: 1; transform: translateY(0); }
}
@keyframes fadeIn {
to { opacity: 1; }
}
/* Mobile */
@media (max-width: 639px) {
#scroll-spacer { cursor: auto; }
#custom-cursor { display: none; }
#logo { top: 16px; left: 16px; width: 124px; }
#caption { left: 16px; top: 118px; width: calc(100vw - 32px); }
#header-nav { top: 16px; right: 16px; width: auto; }
#header-nav .about-link { display: none; }
#header-nav .nav-right { gap: 20px; }
#header-nav .nav-text { font-size: 13px; }
#outro-info { left: 0; right: 0; bottom: 48px; width: auto; }
#outro-info .info-top { width: 252px; margin-bottom: 12px; align-self: center; }
#outro-info .circle-icon { width: 20px; height: 20px; }
#outro-info .circle-icon span { font-size: 10px; }
#outro-info .collection-label { font-size: 20px; }
#outro-info .price { font-size: 60px; }
#outro-buy { left: 16px; right: 16px; bottom: 60px; width: auto; height: 100px; }
#outro-buy span { font-size: 72px; }
#main-canvas { top: 220px; height: calc(100vh - 220px); inset: unset; left: 0; width: 100vw; }
#outro-footer { right: 16px; bottom: 24px; gap: 0; justify-content: space-between; }
#outro-footer span { font-size: 11px; }
}
/* Tablet */
@media (min-width: 640px) and (max-width: 1023px) {
#scroll-spacer { cursor: auto; }
#custom-cursor { display: none; }
#logo { width: 266px; }
#caption { top: 180px; width: calc(50vw - 48px); }
}
@media (min-width: 640px) {
#scroll-spacer { cursor: none; }
}
@media (prefers-reduced-motion: reduce) {
.bp-card { will-change: auto; }
}
</style>
</head>
<body>
<div id="scroll-spacer">
<!-- Custom Cursor (desktop) -->
<div id="custom-cursor">
<svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M12.3 18.98C12.8733 19.0333 13.44 19.08 14 19.12C14.5733 19.1467 15.16 19.16 15.76 19.16C16.96 19.16 18.16 19.1067 19.36 19C20.56 18.8933 21.6733 18.74 22.7 18.54V20.48C21.6333 20.6533 20.5 20.78 19.3 20.86C18.1133 20.94 16.9267 20.9867 15.74 21C15.1533 21 14.58 20.9867 14.02 20.96C13.4733 20.9333 12.9067 20.9 12.32 20.86L12.3 18.98ZM19.56 15.48C19.5333 15.68 19.5067 15.8867 19.48 16.1C19.4667 16.3133 19.4533 16.52 19.44 16.72C19.4267 16.9467 19.4133 17.2467 19.4 17.62C19.4 17.9933 19.3933 18.4 19.38 18.84C19.38 19.2667 19.38 19.6933 19.38 20.12C19.38 20.96 19.3933 21.7667 19.42 22.54C19.46 23.3133 19.5 24.0467 19.54 24.74C19.58 25.4333 19.6133 26.0867 19.64 26.7C19.6667 27.3 19.68 27.8467 19.68 28.34C19.68 28.7933 19.62 29.2267 19.5 29.64C19.38 30.0533 19.18 30.42 18.9 30.74C18.62 31.06 18.24 31.3067 17.76 31.48C17.2933 31.6667 16.7133 31.76 16.02 31.76C14.66 31.76 13.6067 31.4933 12.86 30.96C12.1133 30.4267 11.74 29.68 11.74 28.72C11.74 28.1067 11.9067 27.56 12.24 27.08C12.5867 26.6 13.0733 26.22 13.7 25.94C14.34 25.66 15.1067 25.52 16 25.52C16.8933 25.52 17.7067 25.62 18.44 25.82C19.1733 26.0067 19.8533 26.2667 20.48 26.6C21.1067 26.92 21.6667 27.2733 22.16 27.66C22.6667 28.0467 23.1267 28.42 23.54 28.78L22.46 30.46C21.74 29.7667 21.02 29.1667 20.3 28.66C19.5933 28.1533 18.8733 27.76 18.14 27.48C17.4067 27.2 16.64 27.06 15.84 27.06C15.16 27.06 14.6067 27.1933 14.18 27.46C13.7667 27.7267 13.56 28.0733 13.56 28.5C13.56 28.9667 13.7667 29.32 14.18 29.56C14.5933 29.7867 15.12 29.9 15.76 29.9C16.2533 29.9 16.64 29.82 16.92 29.66C17.2 29.5 17.4 29.2667 17.52 28.96C17.64 28.6533 17.7 28.2933 17.7 27.88C17.7 27.5333 17.6867 27.0667 17.66 26.48C17.6333 25.88 17.6 25.2267 17.56 24.52C17.52 23.8 17.4867 23.0667 17.46 22.32C17.4333 21.56 17.42 20.8333 17.42 20.14C17.42 19.42 17.42 18.76 17.42 18.16C17.42 17.5467 17.42 17.08 17.42 16.76C17.42 16.5867 17.4067 16.38 17.38 16.14C17.3667 15.8867 17.34 15.6667 17.3 15.48H19.56ZM9.74 15.66C9.7 15.7667 9.65333 15.92 9.6 16.12C9.54667 16.32 9.49333 16.52 9.44 16.72C9.4 16.92 9.36667 17.08 9.34 17.2C9.27333 17.52 9.19333 17.9333 9.1 18.44C9.02 18.9333 8.93333 19.48 8.84 20.08C8.76 20.6667 8.68 21.2667 8.6 21.88C8.53333 22.4933 8.47333 23.08 8.42 23.64C8.38 24.2 8.36 24.6933 8.36 25.12C8.36 25.4667 8.37333 25.82 8.4 26.18C8.42667 26.5267 8.46667 26.8867 8.52 27.26C8.61333 26.98 8.72 26.6933 8.84 26.4C8.96 26.0933 9.08 25.7933 9.2 25.5C9.33333 25.2067 9.45333 24.94 9.56 24.7L10.56 25.48C10.3867 25.9867 10.2 26.5333 10 27.12C9.8 27.6933 9.62 28.24 9.46 28.76C9.31333 29.28 9.2 29.7133 9.12 30.06C9.09333 30.1933 9.06667 30.3533 9.04 30.54C9.02667 30.7133 9.02 30.86 9.02 30.98C9.03333 31.0733 9.04 31.1867 9.04 31.32C9.05333 31.4667 9.06667 31.6 9.08 31.72L7.3 31.86C7.08667 31.1533 6.9 30.26 6.74 29.18C6.59333 28.0867 6.52 26.86 6.52 25.5C6.52 24.7533 6.55333 23.98 6.62 23.18C6.68667 22.3667 6.76667 21.5733 6.86 20.8C6.96667 20.0267 7.06667 19.32 7.16 18.68C7.25333 18.04 7.33333 17.52 7.4 17.12C7.42667 16.8667 7.45333 16.5933 7.48 16.3C7.52 16.0067 7.54667 15.7267 7.56 15.46L9.74 15.66ZM32.32 15.22C32.2267 15.5133 32.1467 15.82 32.08 16.14C32.0267 16.46 31.9667 16.7667 31.9 17.06C31.8467 17.38 31.7733 17.7667 31.68 18.22C31.5867 18.66 31.48 19.14 31.36 19.66C31.2533 20.1667 31.14 20.68 31.02 21.2C30.9 21.72 30.7733 22.22 30.64 22.7C30.5067 23.1667 30.3733 23.5867 30.24 23.96C31.0933 23.4267 31.9533 23.0467 32.82 22.82C33.6867 22.58 34.6067 22.46 35.58 22.46C36.66 22.46 37.58 22.6333 38.34 22.98C39.1133 23.3133 39.7133 23.7867 40.14 24.4C40.5667 25.0133 40.78 25.7333 40.78 26.56C40.78 27.6267 40.52 28.5533 40 29.28C39.4933 30.0267 38.7733 30.6067 37.84 31.02C36.9067 31.4467 35.7933 31.72 34.5 31.84C33.22 31.96 31.7933 31.94 30.22 31.78L29.68 29.76C30.8133 29.92 31.9133 29.9933 32.98 29.98C34.06 29.9667 35.0267 29.8467 35.88 29.62C36.7333 29.38 37.4133 29.0133 37.92 28.52C38.4267 28.0267 38.68 27.3867 38.68 26.6C38.68 25.92 38.3933 25.3467 37.82 24.88C37.26 24.4 36.44 24.16 35.36 24.16C34.1867 24.16 33.0933 24.36 32.08 24.76C31.0667 25.16 30.24 25.7533 29.6 26.54C29.4933 26.6867 29.3933 26.8333 29.3 26.98C29.2067 27.1133 29.1133 27.2667 29.02 27.44L27.14 26.78C27.5267 26.0333 27.88 25.2 28.2 24.28C28.52 23.36 28.8 22.4333 29.04 21.5C29.2933 20.5533 29.5 19.68 29.66 18.88C29.82 18.08 29.9267 17.4267 29.98 16.92C30.0333 16.56 30.0667 16.2467 30.08 15.98C30.1067 15.7 30.1067 15.4133 30.08 15.12L32.32 15.22ZM25.78 17.68C26.3533 17.7733 27 17.8533 27.72 17.92C28.44 17.9867 29.1067 18.02 29.72 18.02C30.36 18.02 31.0667 18 31.84 17.96C32.6267 17.92 33.4467 17.86 34.3 17.78C35.1533 17.7 36.0067 17.6 36.86 17.48C37.7267 17.3467 38.56 17.1933 39.36 17.02L39.4 18.94C38.72 19.0467 37.9667 19.1533 37.14 19.26C36.3133 19.3667 35.4667 19.4667 34.6 19.56C33.7333 19.64 32.88 19.7067 32.04 19.76C31.2 19.8 30.4333 19.82 29.74 19.82C29.02 19.82 28.3267 19.8067 27.66 19.78C26.9933 19.74 26.3667 19.6933 25.78 19.64V17.68Z" fill="white"/>
<circle cx="24" cy="24" r="22.75" stroke="white" stroke-width="2.5"/>
</svg>
</div>
<!-- Logo -->
<div id="logo">
<svg width="100%" height="auto" viewBox="0 0 355 110" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M0 110L14.8228 22.3651H27.0028L25.2792 32.749H26.2559C27.2517 31.4177 28.554 29.8772 30.1626 28.1276C31.8096 26.3779 33.9737 24.8565 36.6548 23.5633C39.3359 22.232 42.6682 21.5664 46.6516 21.5664C51.8223 21.5664 56.2079 22.8596 59.8082 25.4461C63.4086 28.0325 65.9557 31.779 67.4494 36.6857C68.9815 41.5923 69.173 47.5069 68.024 54.4295C66.8749 61.2759 64.73 67.1715 61.5893 72.1162C58.4868 77.0228 54.6949 80.7884 50.2136 83.4129C45.7323 86.0373 40.8871 87.3686 35.6781 87.4066C31.8096 87.3686 28.7455 86.703 26.4857 85.4098C24.2642 84.1165 22.598 82.5951 21.4873 80.8454C20.3765 79.0958 19.5339 77.5553 18.9594 76.2241H18.2699L12.5821 110H0ZM34.7589 76.8517C38.4741 76.8136 41.7298 75.8247 44.5258 73.8849C47.3601 71.907 49.6966 69.2254 51.535 65.8402C53.4118 62.417 54.7141 58.5754 55.4418 54.3154C56.093 50.0934 56.0546 46.3088 55.3269 42.9616C54.6375 39.6145 53.2203 36.971 51.0754 35.0311C48.9305 33.0913 45.9621 32.1214 42.1703 32.1214C38.5316 32.1214 35.2951 33.0533 32.4608 34.917C29.6647 36.7427 27.3475 39.3292 25.509 42.6763C23.7088 45.9855 22.4448 49.8651 21.7171 54.3154C20.9894 58.7656 20.9894 62.6833 21.7171 66.0685C22.4448 69.4537 23.9003 72.0972 26.0835 73.999C28.2667 75.8627 31.1585 76.8136 34.7589 76.8517Z" fill="white"/>
<path d="M63.522 86.1515L74.2082 22.3651H86.2732L84.5496 32.5778H85.2391C86.9626 29.1546 89.4906 26.454 92.8228 24.4761C96.1551 22.4602 99.698 21.4523 103.452 21.4523C104.256 21.4523 105.156 21.4713 106.152 21.5093C107.186 21.5474 108.048 21.6234 108.737 21.7376L106.669 33.6048C106.209 33.4526 105.348 33.3005 104.084 33.1483C102.82 32.9582 101.536 32.8821 100.234 32.9201C97.285 32.8821 94.5464 33.4907 92.0185 34.7459C89.5289 35.963 87.4223 37.6556 85.6987 39.8237C84.0134 41.9917 82.941 44.4831 82.4813 47.2977L76.0466 86.1515H63.522Z" fill="white"/>
<path d="M99.2621 86.1515L109.948 22.3651H121.898L120.175 32.8631H121.037C122.952 29.3257 125.595 26.5681 128.965 24.5902C132.336 22.5743 136.147 21.5664 140.398 21.5664C144.611 21.5664 148.02 22.5743 150.625 24.5902C153.229 26.5681 154.915 29.3257 155.681 32.8631H156.37C158.477 29.4018 161.368 26.6632 165.045 24.6473C168.761 22.5934 172.916 21.5664 177.513 21.5664C183.296 21.5664 187.739 23.3921 190.842 27.0436C193.944 30.695 194.902 36.1532 193.714 43.418L186.475 86.1515H173.951L181.017 44.5591C181.707 40.223 181.017 37.1041 178.949 35.2023C176.919 33.3005 174.257 32.3306 170.963 32.2925C166.903 32.3306 163.532 33.5667 160.851 36.001C158.209 38.4353 156.562 41.5923 155.91 45.472L149.074 86.1515H136.664L143.788 43.7604C144.324 40.2991 143.692 37.5415 141.892 35.4876C140.092 33.3956 137.449 32.3306 133.964 32.2925C131.589 32.2925 129.291 32.9201 127.069 34.1753C124.848 35.4305 122.952 37.1421 121.381 39.3102C119.811 41.4782 118.796 43.9886 118.336 46.8413L111.787 86.1515H99.2621Z" fill="white"/>
<path d="M183.872 110L198.694 22.3651H210.874L209.151 32.749H210.127C211.123 31.4177 212.425 29.8772 214.034 28.1276C215.681 26.3779 217.845 24.8565 220.526 23.5633C223.207 22.232 226.54 21.5664 230.523 21.5664C235.694 21.5664 240.079 22.8596 243.68 25.4461C247.28 28.0325 249.827 31.779 251.321 36.6857C252.853 41.5923 253.045 47.5069 251.895 54.4295C250.746 61.2759 248.602 67.1715 245.461 72.1162C242.358 77.0228 238.566 80.7884 234.085 83.4129C229.604 86.0373 224.759 87.3686 219.55 87.4066C215.681 87.3686 212.617 86.703 210.357 85.4098C208.136 84.1165 206.47 82.5951 205.359 80.8454C204.248 79.0958 203.405 77.5553 202.831 76.2241H202.141L196.454 110H183.872ZM218.63 76.8517C222.346 76.8136 225.601 75.8247 228.397 73.8849C231.232 71.907 233.568 69.2254 235.407 65.8402C237.283 62.417 238.586 58.5754 239.313 54.3154C239.964 50.0934 239.926 46.3088 239.198 42.9616C238.509 39.6145 237.092 36.971 234.947 35.0311C232.802 33.0913 229.834 32.1214 226.042 32.1214C222.403 32.1214 219.167 33.0533 216.332 34.917C213.536 36.7427 211.219 39.3292 209.38 42.6763C207.58 45.9855 206.316 49.8651 205.589 54.3154C204.861 58.7656 204.861 62.6833 205.589 66.0685C206.316 69.4537 207.772 72.0972 209.955 73.999C212.138 75.8627 215.03 76.8136 218.63 76.8517Z" fill="white"/>
<path d="M284.54 22.3651L282.874 32.3496H247.828L249.494 22.3651H284.54ZM261.387 7.1888H273.911L263.742 67.4378C263.359 69.796 263.417 71.6027 263.915 72.8579C264.451 74.075 265.274 74.8928 266.385 75.3112C267.496 75.6916 268.741 75.8817 270.119 75.8817C271.154 75.9198 272.035 75.8817 272.762 75.7676C273.528 75.6155 274.122 75.5014 274.543 75.4253L275.233 85.695C274.39 85.9613 273.26 86.2465 271.843 86.5508C270.426 86.8551 268.721 86.9882 266.73 86.9502C263.436 87.0263 260.467 86.4557 257.825 85.2386C255.182 84.0214 253.209 82.1387 251.907 79.5902C250.605 77.0038 250.279 73.7898 250.93 69.9481L261.387 7.1888Z" fill="white"/>
<path d="M309.727 48.1535V17.5726H325.182C326.676 17.5346 328.189 17.8959 329.721 18.6566C331.253 19.3793 332.536 20.4824 333.57 21.9658C334.604 23.4111 335.121 25.2178 335.121 27.3859C335.121 29.592 334.585 31.4938 333.513 33.0913C332.44 34.6508 331.119 35.8299 329.548 36.6286C327.978 37.3893 326.389 37.7697 324.78 37.7697H313.806V32.5207H322.827C323.822 32.5588 324.818 32.1594 325.814 31.3226C326.81 30.4478 327.308 29.1355 327.308 27.3859C327.308 25.6362 326.791 24.4381 325.757 23.7915C324.761 23.1068 323.822 22.7645 322.941 22.7645H316.966V48.1535H309.727ZM328.802 33.7759L336.27 48.1535H328.342L321.103 33.7759H328.802ZM321.563 66.4108C316.966 66.4108 312.638 65.555 308.578 63.8434C304.557 62.0937 301.014 59.6974 297.95 56.6546C294.885 53.6117 292.492 50.0934 290.768 46.0996C289.044 42.0678 288.183 37.7697 288.183 33.2054C288.183 28.6411 289.044 24.362 290.768 20.3683C292.492 16.3364 294.885 12.7991 297.95 9.75622C301.014 6.71335 304.557 4.3361 308.578 2.62448C312.638 0.874827 316.966 0 321.563 0C326.197 0 330.525 0.874827 334.547 2.62448C338.607 4.3361 342.169 6.71335 345.233 9.75622C348.297 12.7991 350.691 16.3364 352.415 20.3683C354.138 24.362 355 28.6411 355 33.2054C355 37.7697 354.138 42.0678 352.415 46.0996C350.691 50.0934 348.297 53.6117 345.233 56.6546C342.207 59.6974 338.664 62.0937 334.604 63.8434C330.544 65.555 326.197 66.4108 321.563 66.4108ZM321.563 58.138C326.235 58.138 330.468 57.0349 334.26 54.8288C338.09 52.5847 341.135 49.5799 343.395 45.8143C345.654 42.0107 346.765 37.8077 346.727 33.2054C346.765 28.603 345.654 24.4191 343.395 20.6535C341.135 16.8499 338.09 13.8451 334.26 11.639C330.468 9.39488 326.235 8.27282 321.563 8.27282C316.966 8.27282 312.753 9.39488 308.923 11.639C305.131 13.8451 302.105 16.8499 299.845 20.6535C297.586 24.4191 296.456 28.603 296.456 33.2054C296.456 37.8077 297.586 42.0107 299.845 45.8143C302.105 49.5799 305.131 52.5847 308.923 54.8288C312.753 57.0349 316.966 58.138 321.563 58.138Z" fill="white"/>
</svg>
</div>
<!-- Caption -->
<p id="caption">When switching between videos near the center, do not reset currentTime to 0 abruptly. Add a small dead zone: if cursor is within ±50px of center, keep both videos at currentTime = 0 and show whichever was last active.</p>
<!-- Header Nav -->
<div id="header-nav">
<span class="nav-text about-link">ABOUT</span>
<div class="nav-right">
<svg width="30" height="30" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M0 14H40M0 26H40" stroke="white" stroke-width="2.5"/>
</svg>
<span class="nav-text">[ CART ]</span>
</div>
</div>
<!-- Product Info -->
<div id="outro-info" data-outro-offset="166">
<div class="info-top">
<div class="circle-icon">
<svg width="30" height="30" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx="20" cy="20" r="18.75" stroke="white" stroke-width="2.5"/>
</svg>
<span id="circle-symbol">8</span>
</div>
<span class="collection-label">ARCHIVE COLLECTION<br>"PROMPT"</span>
</div>
<span class="price">$97,33</span>
</div>
<!-- Buy Button -->
<div id="outro-buy">
<span>view</span>
</div>
<!-- Videos -->
<div id="main-canvas">
<video id="video-left" src="https://meez.design/web/media/bg-videos/ms-3d.mp4" muted playsinline preload="auto" style="display:none;"></video>
<video id="video-right" src="https://meez.design/web/media/bg-videos/ms-nature.mp4" muted playsinline preload="auto" style="display:block;"></video>
</div>
<!-- White Overlay -->
<div id="outro-overlay"></div>
<!-- Footer -->
<div id="outro-footer">
<span>PRMPT® 2026</span>
<span>PRIVACY POLICY</span>
</div>
<!-- Black Panel -->
<div id="black-panel">
<div class="wrap" id="panel-wrap"></div>
</div>
</div>
<script>
(function() {
const CARDS = [
"https://meez.design/web/bg-previews/289_plamsa01.jpg",
"https://meez.design/web/bg-previews/290_q6hngyn3py.jpg",
"https://meez.design/web/bg-previews/291_qdtgbvr3ub.jpg",
"https://meez.design/web/bg-previews/292_qso92q9g2q.jpg",
"https://meez.design/web/bg-previews/293_r1oz50l9u7.jpg",
"https://meez.design/web/bg-previews/294_rmvdwxm12d.jpg",
"https://meez.design/web/bg-previews/295_rud2yybgvx.jpg",
"https://meez.design/web/bg-previews/296_rxdsigezgx.jpg",
"https://meez.design/web/bg-previews/297_t4ighh6oxw.jpg",
"https://meez.design/web/bg-previews/298_td7tvnvili.jpg",
];
// Responsive helpers
function isMobile() { return window.innerWidth < 640; }
function isTablet() { return window.innerWidth >= 640 && window.innerWidth < 1024; }
function isTouch() { return isMobile() || isTablet(); }
function getCols() {
if (window.innerWidth < 640) return 2;
if (window.innerWidth < 1024) return 3;
return 4;
}
// Build scattered grid layout
function buildLayout(count, cols) {
var rows = [];
var i = 0, r = 0;
while (i < count) {
var row = new Array(cols).fill(-1);
var a = (r * 2 + (r % 2)) % cols;
row[a] = i++;
if (r % 3 === 0 && i < count) {
var b = (a + 2) % cols;
if (b === a) b = (a + 1) % cols;
row[b] = i++;
}
rows.push(row);
r++;
}
return rows;
}
// Render grid
function renderGrid() {
var cols = getCols();
var layout = buildLayout(CARDS.length, cols);
var wrap = document.getElementById('panel-wrap');
wrap.innerHTML = '';
layout.forEach(function(row) {
var rowDiv = document.createElement('div');
rowDiv.className = 'grid-row';
row.forEach(function(idx, ci) {
var cell = document.createElement('div');
cell.className = 'grid-cell';
if (idx !== -1) {
var card = document.createElement('div');
card.className = 'bp-card';
card.dataset.col = ci;
var img = document.createElement('img');
img.src = CARDS[idx];
img.alt = '';
img.draggable = false;
card.appendChild(img);
cell.appendChild(card);
}
rowDiv.appendChild(cell);
});
wrap.appendChild(rowDiv);
});
}
renderGrid();
window.addEventListener('resize', renderGrid);
// Circle symbol randomizer
var symbols = ['8', '$', '^^', '%', '/'];
var lastSymbolTime = 0;
window.addEventListener('scroll', function() {
var now = Date.now();
if (now - lastSymbolTime < 80) return;
lastSymbolTime = now;
var el = document.getElementById('circle-symbol');
if (el) el.textContent = symbols[Math.floor(Math.random() * symbols.length)];
}, { passive: true });
// Video loading
var vl = document.getElementById('video-left');
var vr = document.getElementById('video-right');
var canvas = document.getElementById('main-canvas');
var readyCount = 0;
function checkReady() {
readyCount++;
if (readyCount >= 2) canvas.style.opacity = '1';
}
vl.addEventListener('loadeddata', checkReady, { once: true });
vr.addEventListener('loadeddata', checkReady, { once: true });
if (vl.readyState >= 2) checkReady();
if (vr.readyState >= 2) checkReady();
// Video interaction
var targetX = window.innerWidth / 2;
var activeSide = 'right';
var cursorEl = document.getElementById('custom-cursor');
if (isTouch()) {
// Mobile: auto-play alternating
vl.style.display = 'block';
vr.style.display = 'none';
vl.currentTime = 0;
vl.play();
vl.addEventListener('ended', function() {
vl.style.display = 'none';
vr.style.display = 'block';
vr.currentTime = 0;
vr.play();
});
vr.addEventListener('ended', function() {
vr.style.display = 'none';
vl.style.display = 'block';
vl.currentTime = 0;
vl.play();
});
}
// Desktop: cursor tracking + video scrub
window.addEventListener('mousemove', function(e) {
targetX = e.clientX;
if (cursorEl) {
cursorEl.style.left = e.clientX + 'px';
cursorEl.style.top = e.clientY + 'px';
}
});
window.addEventListener('touchmove', function(e) {
if (e.touches.length > 0) targetX = e.touches[0].clientX;
}, { passive: true });
window.addEventListener('touchstart', function(e) {
if (e.touches.length > 0) targetX = e.touches[0].clientX;
}, { passive: true });
// Scroll-driven animation (RAF)
var panel = document.getElementById('black-panel');
var wrap = document.getElementById('panel-wrap');
var outroOverlay = document.getElementById('outro-overlay');
var outroInfo = document.getElementById('outro-info');
var outroBuy = document.getElementById('outro-buy');
var outroFooter = document.getElementById('outro-footer');
var spacer = document.getElementById('scroll-spacer');
var mainCanvas = document.getElementById('main-canvas');
var vh, maxScroll, naturalTops, naturalHeights, items, cols;
var initialized = false;
function measure() {
vh = window.innerHeight;
cols = getCols();
// Position panel initially
panel.style.transform = 'translateY(' + vh + 'px)';
items = Array.from(panel.querySelectorAll('.bp-card'));
naturalTops = items.map(function(el) {
var top = 0;
var node = el;
while (node && node !== wrap) {
top += node.offsetTop;
node = node.offsetParent;
}
return top;
});
naturalHeights = items.map(function(el) { return el.offsetHeight; });
maxScroll = Math.max(0, wrap.scrollHeight - vh);
spacer.style.height = (vh + maxScroll + 2 * vh) + 'px';
items.forEach(function(el) {
var ci = Number(el.dataset.col || 0);
el.style.transformOrigin = ci < cols / 2 ? 'right bottom' : 'left bottom';
});
initialized = true;
}
// Delay measure to let images start loading and layout settle
setTimeout(measure, 100);
window.addEventListener('resize', function() {
setTimeout(measure, 50);
});
function scaleCards(panelOffset, phase2) {
if (!items) return;
items.forEach(function(el, i) {
var top = naturalTops[i] - phase2 + panelOffset;
var bottom = top + naturalHeights[i];
if (bottom <= 0 || top >= vh) {
el.style.transform = 'scale(0)';
return;
}
var enter = Math.min(1, Math.max(0, (vh - top) / (vh * 0.6)));
var exit = Math.min(1, Math.max(0, bottom / (vh * 0.4)));
el.style.transform = 'scale(' + Math.min(enter, exit) + ')';
});
}
var lastSy = -1;
var inPhase2 = false;
function tick() {
if (!initialized) { requestAnimationFrame(tick); return; }
var sy = window.scrollY;
// Video scrub (desktop only)
if (!isTouch() && vl.duration && vr.duration) {
var width = window.innerWidth || 1000;
var centerX = width / 2;
var currentX = Math.max(0, Math.min(width, targetX));
var deadZonePx = Math.max(30, width * 0.05);
var dist = currentX - centerX;
var absDist = Math.abs(dist);
if (absDist > deadZonePx) {
activeSide = dist < 0 ? 'left' : 'right';
}
if (activeSide === 'left') {
vr.style.display = 'block';
vl.style.display = 'none';
if (!vr.seeking) {
if (absDist <= deadZonePx) {
vr.currentTime = 0;
} else {
var progress = (centerX - deadZonePx - currentX) / Math.max(1, centerX - deadZonePx);
vr.currentTime = Math.max(0, Math.min(vr.duration, progress * vr.duration));
}
}
} else {
vl.style.display = 'block';
vr.style.display = 'none';
if (!vl.seeking) {
if (absDist <= deadZonePx) {
vl.currentTime = 0;
} else {
var progress = (currentX - (centerX + deadZonePx)) / Math.max(1, width - centerX - deadZonePx);
vl.currentTime = Math.max(0, Math.min(vl.duration, progress * vl.duration));
}
}
}
}
if (sy === lastSy) { requestAnimationFrame(tick); return; }
lastSy = sy;
// Hide video canvas after first vh
if (mainCanvas) mainCanvas.style.visibility = sy >= vh ? 'hidden' : 'visible';
// Phase 1: panel slides up
if (sy < vh) {
var panelY = vh - sy;
panel.style.transform = 'translateY(' + panelY + 'px)';
if (inPhase2) {
inPhase2 = false;
wrap.style.transform = 'translateY(0px)';
if (outroOverlay) outroOverlay.style.opacity = '0';
if (outroInfo) outroInfo.style.transform = 'translateY(0px)';
if (outroBuy) outroBuy.style.transform = 'scale(0)';
if (outroFooter) outroFooter.style.opacity = '0';
}
scaleCards(panelY, 0);
requestAnimationFrame(tick);
return;
}
// Phase 2: panel fixed, content scrolls
panel.style.transform = 'translateY(0px)';
inPhase2 = true;
var phase2 = Math.min(sy - vh, maxScroll);
wrap.style.transform = 'translateY(' + (-phase2) + 'px)';
// Outro progress
var outroProgress = Math.min(1, Math.max(0, (sy - vh - maxScroll) / (vh - 100)));
if (outroOverlay) outroOverlay.style.opacity = String(outroProgress);
if (outroInfo) {
var outroOffset = Number(outroInfo.dataset.outroOffset || 166);
outroInfo.style.transform = 'translateY(' + (-outroProgress * outroOffset) + 'px)';
}
if (outroBuy) outroBuy.style.transform = 'scale(' + outroProgress + ')';
if (outroFooter) outroFooter.style.opacity = String(outroProgress);
scaleCards(0, phase2);
requestAnimationFrame(tick);
}
requestAnimationFrame(tick);
})();
</script>
</body>
</html>
Cargo GroupHero Section · free prompt · copy-paste
Create a full-viewport hero section for "CARGOX GROUP" logistics company using React, Tailwind CSS, Framer Motion (`motion` package from npm - import from `motion/react`), and `lucide-react` for the hamburger icon.
## Tech Stack
- React 18 + TypeScript + Vite
- Tailwind CSS 3
- `motion` package (v12+) - import `{ motion, AnimatePresence }` from `motion/react`
- `lucide-react` for Menu/X icons
- Google Font: `Barlow Condensed` weight 800 (imported in CSS via `@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@800&display=swap')`)
## Global CSS
```css
@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@800&display=swap');
@tailwind base;
@tailwind components;
@tailwind utilities;
* { margin: 0; padding: 0; box-sizing: border-box; }
html, body, #root { height: 100%; overflow: hidden; }
body { font-family: Helvetica, Arial, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
```
## Layout Structure
Single full-viewport (`min-height: 100vh`) flex column with `overflow: hidden` and dark fallback `backgroundColor: '#1a1a2e'`. All content is layered above a fullscreen video background.
## Video Background
- Absolute positioned, `inset-0`, `object-cover`, `z-0`
- Attributes: `autoPlay`, `muted`, `loop`, `playsInline`
- URL: `https://meez.design/web/media/bg-videos/269_iz5u1fq9w8.mp4`
- On `onCanPlay`, set a `videoReady` state to `true`
- All content below is wrapped in `<AnimatePresence>` and only renders when `videoReady === true`, fading in with `opacity: 0 -> 1` over 0.3s. The wrapper div uses `className="flex flex-col flex-1 w-full"`.
## Easing
Use a shared constant: `const EXPO_OUT: [number, number, number, number] = [0.16, 1, 0.3, 1];`
## Header (z-50, relative)
- Padding: `clamp(16px, 4vh, 40px) clamp(16px, 3vw, 48px) 0`
- **Logo** (left): Two lines stacked - "CARGOX" in white, "GROUP" in `#ffda00`. Font: `"Barlow Condensed"`, weight 800, size `clamp(22px, min(3.15vh, 2.32vw), 32px)`, line-height 0.9, uppercase, letter-spacing -0.01em. Animates from `opacity:0, y:-20` to visible with EXPO_OUT, duration 0.6.
- **Desktop Nav** (hidden on mobile, flex on md+): Items "Services", "Industries", "Company" each with a chevron-down SVG. Gap: `clamp(20px, 3.8vw, 52px)`. White text, size `clamp(15px, min(1.97vh, 1.45vw), 20px)`, letter-spacing -0.02em. Each item fades in staggered. On hover: color shifts to `#ffda00` with `x: 2`.
- **Mobile Hamburger** (md:hidden): lucide-react `Menu`/`X` icon, white, size 28, toggles a mobile menu overlay.
## Mobile Menu Overlay
- Absolute `inset-0`, z-40, centered flex column, bg `#6682c2`
- Same nav items as buttons, font-size 24px, white, staggered fade-in
## Main Content (z-10, relative)
- `flex-1`, grid: 1 col on mobile, `grid-cols-[2.17fr_1fr]` on lg+
- Padding: `clamp(24px, 8vh, 120px) clamp(16px, 3vw, 48px) 0`
- Gap: `clamp(20px, 4vh, 48px)`
### Left Column - Giant Headline
- Container: `overflow: clip`
- Font: `"Barlow Condensed"`, weight 800, size `clamp(86px, min(14vh, 11vw), 220px)`, line-height 0.78, uppercase, letter-spacing -0.01em
- Three lines with slide-in animations:
1. "BEYOND" - white, slides from `x: -900` with duration 0.85, delay 0
2. "BORDERS" - color `#002a35`, `marginLeft: 0.524em`, slides from `x: 900` with duration 0.85, delay 0.13
3. "AND LIMITS" - white, slides from `x: -900` with duration 0.85, delay 0.26
- All use EXPO_OUT easing
### Right Column
- Flex column, gap: `clamp(16px, 2.66vh, 32px)`
#### Tagline Text
- Font: Helvetica, size `clamp(24px, min(4vh, 3vw), 52px)`, line-height 0.9, letter-spacing -0.02em, color `#002a35`
- Three lines with word-by-word reveal animation (each word slides up from `y:'100%'` with rotateX 45deg):
1. "Logistics" - marginLeft 0, delay 0.3
2. "shaped by scale" - marginLeft 1.5em, delay 0.5
3. "powered by precision" - marginLeft 0, delay 0.7
- Each word has 0.08s stagger, duration 0.6, easing `[0.16, 1, 0.3, 1]`
#### Map Section
- Container: relative, `aspectRatio: '435 / 263'`
- **Map image**: absolute, inset-0, object-contain
- URL: `https://meez.design/web/bg-previews/109_Motion-Background-101331.jpg`
- **Route Lines SVG Overlay**: absolute, pointer-events-none, positioned at `left: 13.8%`, `top: 24.3%`, `width: 68.7%`, aspectRatio `299/143`
- SVG viewBox: `0 0 299.037 142.509`, overflow visible
- 4 animated bezier curve paths in `#FFDA00`, strokeWidth 2.5:
```
M128.161 74.6764C79.9989 130.001 71.9994 46.0005 20.9815 111.737
M216.999 9.99985C260.499 12.4998 222.499 71.9998 291.999 58.9998
M130.102 70.9998C144.499 -32.0002 183.852 70.2739 219.999 3.99985
M14.4999 16.9998C111 20.9998 -53.0003 73.4998 21.4999 107
```
- Each path animates `pathLength: 0->1` with duration 1.1, staggered delay starting at 0.55 + i*0.12
- Animated arrow polygons (triangles `0,-4 8,0 0,4`) move along each path using `<animateMotion>` with `rotate="auto"`, duration `2.5 + i*0.3`s, infinite repeat
- 5 stop dots at coordinates: `[9.519, 15.519]`, `[289.519, 59.518]`, `[220.519, 9.519]`, `[125.518, 78.519]`, `[19.519, 104.519]`. Each is a yellow circle (r=9.519, fill `#FFDA00`) with a smaller dark center circle (r=3.389, fill `#002A35`). Spring animation with stiffness 420, damping 14.
- **Transport Icons**: 3 circular white icons absolutely positioned on the map:
- Ship: `left: 26.0%, top: 28.9%`, delay 2.1, URL: `https://meez.design/web/bg-previews/110_Gradient.jpg`
- Car: `left: 70.8%, top: 15.6%`, delay 2.2, rotate `9.73deg`, URL: `https://meez.design/web/bg-previews/111_Velvet-Wave.jpg`
- Plane: `left: 55.2%, top: 52.1%`, delay 2.3, rotate `180deg scaleY(-1)`, URL: `https://meez.design/web/bg-previews/112_Pastel-Mist.jpg`
- Each icon: `width: 14.9%`, aspect-ratio 1, rounded-full, bg-white, box-shadow `0 4px 12px rgba(0,0,0,0.15)`. On hover: scale 1.12, translateY -4px, enhanced shadow. Spring animation: stiffness 220, damping 16.
- **Map description text**: absolute, hidden on mobile (`hidden sm:block`), positioned `left: 55.6%, top: 89%, width: 44%`. Text: "We ensure full transparency at every stage to build trust and drive results." Size `clamp(12px, min(1.6vh, 1.2vw), 20px)`, color `#002a35`, fades in at delay 2.4.
## Footer (z-10, relative)
- Flex row (column on mobile), space-between, padding: `clamp(12px, 3vh, 32px) clamp(16px, 3vw, 48px) clamp(16px, 5vh, 66px)`
### Left - Stat Block
- Animates from `opacity:0, y:24` with delay 0.45, duration 0.65, EXPO_OUT
- "3M+" in `"Barlow Condensed"` weight 800, size `clamp(52px, min(8vh, 6vw), 98px)`, color `#ffda00`, uppercase
- Description: "tons of cargo / successfully delivered / without delays" - size `clamp(16px, min(1.6vh, 1.2vw), 20px)`, white, line-height 1.25
- Small cargo icon in white circle: `clamp(40px, min(5.5vh, 4vw), 67px)` diameter, URL: `https://meez.design/web/bg-previews/113_Neon-Flux.jpg`
### Right - CTA Button
- Custom SVG pill shape with a circle cutout on the right. Fill `#ffda00`. The full SVG path:
```
M316 0C329.08 0 340.435 7.38674 346.121 18.2162C348.618 22.9736 353.086 26.8535 358.459 26.8535H359.252C364.667 26.8535 369.155 22.9169 371.63 18.1007C377.159 7.34039 388.205 0.00015843 400.931 0C419.195 0 434.001 15.1191 434.001 33.7695L433.99 34.6416C433.537 52.8891 418.909 67.5391 400.931 67.5391C387.96 67.5389 376.734 59.9132 371.317 48.8128C368.923 43.9077 364.427 39.873 358.969 39.873C353.492 39.873 348.986 43.9356 346.589 48.8605C341.074 60.1913 329.449 68 316 68H34.001C15.2233 68 0 52.7777 0 34C0 15.2223 15.2233 0 34.001 0H316ZM400.931 2.44141C384.063 2.44163 370.303 16.419 370.303 33.7695C370.303 51.1201 384.063 65.0974 400.931 65.0977C417.798 65.0977 431.56 51.1202 431.56 33.7695C431.56 16.4189 417.798 2.44141 400.931 2.44141Z
```
- ViewBox: `0 0 434.001 68`, preserveAspectRatio `none`
- Size: full-width on mobile (h-56px), on sm+: `h-[clamp(48px,min(6vh,4.5vw),68px)]` with `aspect-[434/68]`
- **Arrow** in the circle cutout: SVG arrow (`viewBox="0 0 16.89 20.37"`, white stroke, strokeWidth 2.2) that rotates from `-135deg` to `-90deg` on hover with 0.35s transition
- **Label**: "Get in touch", centered in the pill area (excluding circle), color `#002a35`, size `clamp(14px, min(1.6vh, 1.2vw), 20px)`
- Animates in from `opacity:0, x:60` with delay 0.5. whileHover: scale 1.08, y:-2. whileTap: scale 0.97.
## Color Palette
- Primary dark: `#002a35`
- White: `#ffffff`
- Accent yellow: `#ffda00`
- Fallback bg: `#1a1a2e`
- Mobile menu bg: `#6682c2`
## Key Behaviors
1. All animations are gated behind `videoReady` state - nothing animates until the video fires `onCanPlay`
2. The entire content fades in once the video is ready
3. All content (header, main, footer) uses `relative z-10` or `z-50` to layer above the video (z-0)
4. Fully responsive: single column on mobile, 2-column grid on lg+
5. Mobile hamburger menu with overlay on md breakpoint
---
## Source Code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>CARGOX Group - Beyond Borders and Limits</title>
<link href="https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@800&display=swap" rel="stylesheet">
<style>
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html, body { height: 100%; overflow: hidden; }
body { font-family: Helvetica, Arial, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
.hero-wrapper {
width: 100%;
display: flex;
flex-direction: column;
position: relative;
min-height: 100vh;
overflow: hidden;
font-family: Helvetica, Arial, sans-serif;
background-color: #1a1a2e;
}
.video-bg {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
z-index: 0;
}
.content-wrapper {
display: flex;
flex-direction: column;
flex: 1;
width: 100%;
opacity: 0;
transition: opacity 0.3s ease;
}
.content-wrapper.visible { opacity: 1; }
/* Header */
.header {
display: flex;
align-items: center;
justify-content: space-between;
flex-shrink: 0;
position: relative;
z-index: 50;
padding: clamp(16px, 4vh, 40px) clamp(16px, 3vw, 48px) 0;
}
.logo {
font-family: "Barlow Condensed", sans-serif;
font-weight: 800;
font-size: clamp(22px, min(3.15vh, 2.32vw), 32px);
line-height: 0.9;
letter-spacing: -0.01em;
text-transform: uppercase;
opacity: 0;
transform: translateY(-20px);
transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1), transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}
.logo.animate { opacity: 1; transform: translateY(0); }
.logo-white { color: #ffffff; }
.logo-yellow { color: #ffda00; }
.nav {
display: flex;
align-items: center;
gap: clamp(20px, 3.8vw, 52px);
opacity: 0;
transform: translateY(-20px);
transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1) 0.08s, transform 0.6s cubic-bezier(0.16, 1, 0.3, 1) 0.08s;
}
.nav.animate { opacity: 1; transform: translateY(0); }
.nav-item {
display: flex;
align-items: center;
gap: 4px;
background: transparent;
border: none;
cursor: pointer;
color: #ffffff;
font-size: clamp(15px, min(1.97vh, 1.45vw), 20px);
letter-spacing: -0.02em;
font-family: Helvetica, Arial, sans-serif;
opacity: 0;
transition: opacity 0.4s ease, color 0.1s ease, transform 0.1s ease;
}
.nav-item.animate { opacity: 1; }
.nav-item:hover { color: #ffda00; transform: translateX(2px); }
.nav-item svg { width: 0.9em; height: 0.9em; }
.hamburger {
display: none;
align-items: center;
justify-content: center;
background: transparent;
border: none;
cursor: pointer;
color: #ffffff;
width: 40px;
height: 40px;
}
/* Main */
.main-content {
flex: 1;
overflow: hidden;
display: grid;
grid-template-columns: 2.17fr 1fr;
position: relative;
z-index: 10;
padding: clamp(24px, 8vh, 120px) clamp(16px, 3vw, 48px) 0;
gap: clamp(20px, 4vh, 48px);
}
/* Headline */
.headline-container { overflow: clip; }
.headline {
font-family: "Barlow Condensed", sans-serif;
font-weight: 800;
font-size: clamp(86px, min(14vh, 11vw), 220px);
line-height: 0.78;
letter-spacing: -0.01em;
text-transform: uppercase;
}
.headline-line {
opacity: 0;
transition: transform 0.85s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.85s cubic-bezier(0.16, 1, 0.3, 1);
}
.headline-line.line-1 { color: #ffffff; transform: translateX(-900px); }
.headline-line.line-2 { color: #002a35; margin-left: 0.524em; transform: translateX(900px); }
.headline-line.line-3 { color: #ffffff; transform: translateX(-900px); }
.headline-line.animate { opacity: 1; transform: translateX(0); }
/* Right column */
.right-col {
display: flex;
flex-direction: column;
gap: clamp(16px, 2.66vh, 32px);
}
/* Tagline */
.tagline {
font-family: Helvetica, Arial, sans-serif;
font-size: clamp(24px, min(4vh, 3vw), 52px);
line-height: 0.9;
letter-spacing: -0.02em;
color: #002a35;
}
.tagline-line { white-space: nowrap; overflow: visible; }
.tagline-line + .tagline-line { margin-top: 0.3em; }
.tagline-line-2 { margin-left: 1.5em; }
.tagline-word {
display: inline-block;
margin-right: 0.25em;
opacity: 0;
transform: translateY(100%) perspective(600px) rotateX(45deg);
transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}
.tagline-word.animate { opacity: 1; transform: translateY(0) perspective(600px) rotateX(0deg); }
/* Map */
.map-container { position: relative; width: 100%; aspect-ratio: 435 / 263; }
.map-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.routes-overlay {
position: absolute;
pointer-events: none;
left: 13.8%;
top: 24.3%;
width: 68.7%;
aspect-ratio: 299 / 143;
}
.routes-svg { width: 100%; height: 100%; overflow: visible; }
.route-path {
stroke: #FFDA00;
stroke-width: 2.5;
fill: none;
stroke-dasharray: 1000;
stroke-dashoffset: 1000;
opacity: 0;
}
.route-path.animate { opacity: 1; animation: drawPath 1.1s ease-in-out forwards; }
@keyframes drawPath { to { stroke-dashoffset: 0; } }
.transport-icon {
position: absolute;
width: 14.9%;
aspect-ratio: 1;
border-radius: 50%;
background: white;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
cursor: pointer;
box-shadow: 0 4px 12px rgba(0,0,0,0.15);
transform: scale(0);
opacity: 0;
transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.3s ease, box-shadow 0.2s ease;
}
.transport-icon.animate { transform: scale(1); opacity: 1; }
.transport-icon:hover { transform: scale(1.12) translateY(-4px) !important; box-shadow: 0 8px 24px rgba(0,0,0,0.25); }
.transport-icon img { width: 80%; height: 80%; object-fit: cover; }
.stop-dot { transform-box: fill-box; transform-origin: center; transform: scale(0); }
.stop-dot.animate { animation: popIn 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) forwards; }
@keyframes popIn { to { transform: scale(1); } }
.map-desc {
position: absolute;
left: 55.6%;
top: 89%;
width: 44%;
font-family: Helvetica, Arial, sans-serif;
font-size: clamp(12px, min(1.6vh, 1.2vw), 20px);
line-height: 1.25;
letter-spacing: -0.02em;
color: #002a35;
opacity: 0;
transition: opacity 0.6s ease;
}
.map-desc.animate { opacity: 1; }
/* Footer */
.footer {
display: flex;
align-items: center;
justify-content: space-between;
flex-shrink: 0;
position: relative;
z-index: 10;
padding: clamp(12px, 3vh, 32px) clamp(16px, 3vw, 48px) clamp(16px, 5vh, 66px);
}
.stat-block {
display: flex;
align-items: center;
gap: 0.9em;
opacity: 0;
transform: translateY(24px);
transition: opacity 0.65s cubic-bezier(0.16, 1, 0.3, 1), transform 0.65s cubic-bezier(0.16, 1, 0.3, 1);
}
.stat-block.animate { opacity: 1; transform: translateY(0); }
.stat-number {
font-family: "Barlow Condensed", sans-serif;
font-weight: 800;
font-size: clamp(52px, min(8vh, 6vw), 98px);
line-height: 1;
color: #ffda00;
text-transform: uppercase;
letter-spacing: -0.01em;
}
.stat-text {
font-size: clamp(16px, min(1.6vh, 1.2vw), 20px);
line-height: 1.25;
letter-spacing: -0.02em;
color: #ffffff;
}
.stat-icon {
position: relative;
flex-shrink: 0;
border-radius: 50%;
background: white;
overflow: hidden;
width: clamp(40px, min(5.5vh, 4vw), 67px);
aspect-ratio: 1;
}
.stat-icon img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; padding: 10%; }
/* CTA */
.cta-btn {
position: relative;
cursor: pointer;
border: none;
background: transparent;
padding: 0;
height: clamp(48px, min(6vh, 4.5vw), 68px);
aspect-ratio: 434 / 68;
opacity: 0;
transform: translateX(60px);
transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1), transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}
.cta-btn.animate { opacity: 1; transform: translateX(0); }
.cta-btn:hover { transform: scale(1.08) translateY(-2px); }
.cta-btn:active { transform: scale(0.97) translateY(0); }
.cta-btn svg.cta-shape { position: absolute; inset: 0; width: 100%; height: 100%; }
.cta-arrow-wrap {
position: absolute;
right: 0;
top: 3.59%;
width: clamp(42px, 14.43%, 62px);
height: 92.15%;
display: flex;
align-items: center;
justify-content: center;
}
.cta-arrow {
width: 40%;
transform: rotate(-135deg);
transition: transform 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.cta-btn:hover .cta-arrow { transform: rotate(-90deg); }
.cta-label {
position: absolute;
left: 0;
right: 14.43%;
top: 50%;
transform: translateY(-50%);
text-align: center;
font-family: Helvetica, Arial, sans-serif;
font-size: clamp(14px, min(1.6vh, 1.2vw), 20px);
color: #002a35;
letter-spacing: 0.01em;
white-space: nowrap;
pointer-events: none;
}
/* Mobile */
@media (max-width: 767px) {
.nav { display: none !important; }
.hamburger { display: flex; }
.main-content { grid-template-columns: 1fr; }
.footer { flex-direction: column; gap: 16px; }
.cta-btn { width: 100%; height: 56px; aspect-ratio: unset; }
.map-desc { display: none; }
}
@media (min-width: 768px) {
.hamburger { display: none; }
}
/* Mobile overlay */
.mobile-overlay {
display: none;
position: absolute;
inset: 0;
z-index: 40;
flex-direction: column;
align-items: center;
justify-content: center;
background-color: #6682c2;
}
.mobile-overlay.open { display: flex; }
.mobile-overlay button {
background: transparent;
border: none;
cursor: pointer;
padding: 16px;
color: #ffffff;
font-size: 24px;
letter-spacing: -0.02em;
font-family: Helvetica, Arial, sans-serif;
}
</style>
</head>
<body>
<div class="hero-wrapper">
<video class="video-bg" autoplay muted loop playsinline id="bgVideo"
src="https://meez.design/web/media/bg-videos/273_jzl38mcglu.mp4">
</video>
<div class="content-wrapper" id="contentWrapper">
<!-- Header -->
<header class="header">
<div class="logo" id="logo">
<div class="logo-white">CARGOX</div>
<div class="logo-yellow">GROUP</div>
</div>
<nav class="nav" id="nav">
<button class="nav-item" style="transition-delay: 0.1s">
Services
<svg width="24" height="24" viewBox="0 0 24 24" fill="none"><path d="M6 9L12 15L18 9" stroke="currentColor" stroke-width="1.5" stroke-linecap="square" stroke-linejoin="round"/></svg>
</button>
<button class="nav-item" style="transition-delay: 0.16s">
Industries
<svg width="24" height="24" viewBox="0 0 24 24" fill="none"><path d="M6 9L12 15L18 9" stroke="currentColor" stroke-width="1.5" stroke-linecap="square" stroke-linejoin="round"/></svg>
</button>
<button class="nav-item" style="transition-delay: 0.22s">
Company
<svg width="24" height="24" viewBox="0 0 24 24" fill="none"><path d="M6 9L12 15L18 9" stroke="currentColor" stroke-width="1.5" stroke-linecap="square" stroke-linejoin="round"/></svg>
</button>
</nav>
<button class="hamburger" id="hamburgerBtn">
<svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="3" y1="6" x2="21" y2="6"/><line x1="3" y1="12" x2="21" y2="12"/><line x1="3" y1="18" x2="21" y2="18"/></svg>
</button>
</header>
<!-- Mobile overlay -->
<div class="mobile-overlay" id="mobileOverlay">
<button>Services</button>
<button>Industries</button>
<button>Company</button>
</div>
<!-- Main -->
<main class="main-content">
<!-- Left headline -->
<div class="headline-container">
<div class="headline">
<div class="headline-line line-1" id="hl1">BEYOND</div>
<div class="headline-line line-2" id="hl2">BORDERS</div>
<div class="headline-line line-3" id="hl3">AND LIMITS</div>
</div>
</div>
<!-- Right column -->
<div class="right-col">
<!-- Tagline -->
<div class="tagline">
<div class="tagline-line">
<span class="tagline-word" style="transition-delay: 0.3s">Logistics</span>
</div>
<div class="tagline-line tagline-line-2">
<span class="tagline-word" style="transition-delay: 0.5s">shaped</span>
<span class="tagline-word" style="transition-delay: 0.58s">by</span>
<span class="tagline-word" style="transition-delay: 0.66s">scale</span>
</div>
<div class="tagline-line">
<span class="tagline-word" style="transition-delay: 0.7s">powered</span>
<span class="tagline-word" style="transition-delay: 0.78s">by</span>
<span class="tagline-word" style="transition-delay: 0.86s">precision</span>
</div>
</div>
<!-- Map -->
<div class="map-container">
<img class="map-img" src="https://meez.design/web/bg-previews/114_Soft-Horizon.jpg" alt="World map" />
<!-- Route lines -->
<div class="routes-overlay">
<svg class="routes-svg" viewBox="0 0 299.037 142.509" fill="none">
<!-- Path 1 -->
<path class="route-path" id="rp0" d="M128.161 74.6764C79.9989 130.001 71.9994 46.0005 20.9815 111.737"/>
<!-- Path 2 -->
<path class="route-path" id="rp1" d="M216.999 9.99985C260.499 12.4998 222.499 71.9998 291.999 58.9998"/>
<!-- Path 3 -->
<path class="route-path" id="rp2" d="M130.102 70.9998C144.499 -32.0002 183.852 70.2739 219.999 3.99985"/>
<!-- Path 4 -->
<path class="route-path" id="rp3" d="M14.4999 16.9998C111 20.9998 -53.0003 73.4998 21.4999 107"/>
<!-- Animated arrows -->
<g id="arrows" style="opacity: 0">
<polygon points="0,-4 8,0 0,4" fill="#FFDA00">
<animateMotion dur="2.5s" repeatCount="indefinite" rotate="auto" path="M128.161 74.6764C79.9989 130.001 71.9994 46.0005 20.9815 111.737"/>
</polygon>
<polygon points="0,-4 8,0 0,4" fill="#FFDA00">
<animateMotion dur="2.8s" repeatCount="indefinite" rotate="auto" path="M216.999 9.99985C260.499 12.4998 222.499 71.9998 291.999 58.9998"/>
</polygon>
<polygon points="0,-4 8,0 0,4" fill="#FFDA00">
<animateMotion dur="3.1s" repeatCount="indefinite" rotate="auto" path="M130.102 70.9998C144.499 -32.0002 183.852 70.2739 219.999 3.99985"/>
</polygon>
<polygon points="0,-4 8,0 0,4" fill="#FFDA00">
<animateMotion dur="3.4s" repeatCount="indefinite" rotate="auto" path="M14.4999 16.9998C111 20.9998 -53.0003 73.4998 21.4999 107"/>
</polygon>
</g>
<!-- Stop dots -->
<circle class="stop-dot" id="sd0" cx="9.519" cy="15.519" r="9.519" fill="#FFDA00"/>
<circle class="stop-dot" id="sd0i" cx="9.447" cy="15.447" r="3.389" fill="#002A35"/>
<circle class="stop-dot" id="sd1" cx="289.519" cy="59.518" r="9.519" fill="#FFDA00"/>
<circle class="stop-dot" id="sd1i" cx="289.447" cy="59.446" r="3.389" fill="#002A35"/>
<circle class="stop-dot" id="sd2" cx="220.519" cy="9.519" r="9.519" fill="#FFDA00"/>
<circle class="stop-dot" id="sd2i" cx="220.447" cy="9.447" r="3.389" fill="#002A35"/>
<circle class="stop-dot" id="sd3" cx="125.518" cy="78.519" r="9.519" fill="#FFDA00"/>
<circle class="stop-dot" id="sd3i" cx="125.446" cy="78.447" r="3.389" fill="#002A35"/>
<circle class="stop-dot" id="sd4" cx="19.519" cy="104.519" r="9.519" fill="#FFDA00"/>
<circle class="stop-dot" id="sd4i" cx="19.447" cy="104.447" r="3.389" fill="#002A35"/>
</svg>
</div>
<!-- Transport icons -->
<div class="transport-icon" id="ti0" style="left: 26.0%; top: 28.9%;">
<img src="https://meez.design/web/bg-previews/115_Background-064209.jpg" alt="Ship"/>
</div>
<div class="transport-icon" id="ti1" style="left: 70.8%; top: 15.6%;">
<img src="https://meez.design/web/bg-previews/116_Background-064122.jpg" alt="Car" style="transform: rotate(9.73deg)"/>
</div>
<div class="transport-icon" id="ti2" style="left: 55.2%; top: 52.1%;">
<img src="https://meez.design/web/bg-previews/117_Background-01.jpg" alt="Plane" style="transform: rotate(180deg) scaleY(-1)"/>
</div>
<!-- Map description -->
<p class="map-desc" id="mapDesc">We ensure full transparency at every stage to build trust and drive results.</p>
</div>
</div>
</main>
<!-- Footer -->
<footer class="footer">
<div class="stat-block" id="statBlock">
<div class="stat-number">3M+</div>
<div class="stat-text">
<div>tons of cargo</div>
<div>successfully delivered</div>
<div>without delays</div>
</div>
<div class="stat-icon">
<img src="https://meez.design/web/bg-previews/118_Background-02.jpg" alt="Cargo"/>
</div>
</div>
<button class="cta-btn" id="ctaBtn">
<svg class="cta-shape" viewBox="0 0 434.001 68" preserveAspectRatio="none" fill="#ffda00" fill-rule="evenodd">
<path d="M316 0C329.08 0 340.435 7.38674 346.121 18.2162C348.618 22.9736 353.086 26.8535 358.459 26.8535H359.252C364.667 26.8535 369.155 22.9169 371.63 18.1007C377.159 7.34039 388.205 0.00015843 400.931 0C419.195 0 434.001 15.1191 434.001 33.7695L433.99 34.6416C433.537 52.8891 418.909 67.5391 400.931 67.5391C387.96 67.5389 376.734 59.9132 371.317 48.8128C368.923 43.9077 364.427 39.873 358.969 39.873C353.492 39.873 348.986 43.9356 346.589 48.8605C341.074 60.1913 329.449 68 316 68H34.001C15.2233 68 0 52.7777 0 34C0 15.2223 15.2233 0 34.001 0H316ZM400.931 2.44141C384.063 2.44163 370.303 16.419 370.303 33.7695C370.303 51.1201 384.063 65.0974 400.931 65.0977C417.798 65.0977 431.56 51.1202 431.56 33.7695C431.56 16.4189 417.798 2.44141 400.931 2.44141Z"/>
</svg>
<div class="cta-arrow-wrap">
<svg class="cta-arrow" viewBox="0 0 16.89 20.37" fill="none">
<path d="M8.44473 1.0994V18.8164M1.55479 11.9264L8.44473 18.8164L15.3347 11.9264" stroke="white" stroke-linecap="square" stroke-width="2.2"/>
</svg>
</div>
<span class="cta-label">Get in touch</span>
</button>
</footer>
</div>
</div>
<script>
const video = document.getElementById('bgVideo');
const content = document.getElementById('contentWrapper');
function initAnimations() {
content.classList.add('visible');
// Header
setTimeout(() => document.getElementById('logo').classList.add('animate'), 0);
setTimeout(() => document.getElementById('nav').classList.add('animate'), 80);
document.querySelectorAll('.nav-item').forEach((item, i) => {
setTimeout(() => item.classList.add('animate'), 100 + i * 60);
});
// Headlines
setTimeout(() => document.getElementById('hl1').classList.add('animate'), 0);
setTimeout(() => document.getElementById('hl2').classList.add('animate'), 130);
setTimeout(() => document.getElementById('hl3').classList.add('animate'), 260);
// Tagline words
document.querySelectorAll('.tagline-word').forEach(word => {
const delay = parseFloat(word.style.transitionDelay) * 1000;
setTimeout(() => word.classList.add('animate'), delay);
});
// Route paths
const paths = document.querySelectorAll('.route-path');
paths.forEach((path, i) => {
const len = path.getTotalLength();
path.style.strokeDasharray = len;
path.style.strokeDashoffset = len;
setTimeout(() => {
path.classList.add('animate');
path.style.strokeDashoffset = '0';
path.style.transition = `stroke-dashoffset 1.1s ease-in-out, opacity 0.01s`;
}, 550 + i * 120);
});
// Arrows
setTimeout(() => document.getElementById('arrows').style.opacity = '1', 1600);
// Stop dots
for (let i = 0; i < 5; i++) {
setTimeout(() => {
document.getElementById('sd' + i).classList.add('animate');
}, 1650 + i * 90);
setTimeout(() => {
document.getElementById('sd' + i + 'i').classList.add('animate');
}, 1720 + i * 90);
}
// Transport icons
setTimeout(() => document.getElementById('ti0').classList.add('animate'), 2100);
setTimeout(() => document.getElementById('ti1').classList.add('animate'), 2200);
setTimeout(() => document.getElementById('ti2').classList.add('animate'), 2300);
// Map description
setTimeout(() => document.getElementById('mapDesc').classList.add('animate'), 2400);
// Footer
setTimeout(() => document.getElementById('statBlock').classList.add('animate'), 450);
setTimeout(() => document.getElementById('ctaBtn').classList.add('animate'), 500);
}
video.addEventListener('canplay', function handler() {
video.removeEventListener('canplay', handler);
initAnimations();
});
// Fallback if video is already cached
if (video.readyState >= 3) {
initAnimations();
}
// Mobile menu toggle
const hamburgerBtn = document.getElementById('hamburgerBtn');
const mobileOverlay = document.getElementById('mobileOverlay');
hamburgerBtn.addEventListener('click', () => {
mobileOverlay.classList.toggle('open');
});
</script>
</body>
</html>
Vision RevealHero Section · free prompt · copy-paste
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>Creative Studio Showcase</title>
<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=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet"/>
<style>
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
* { font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
html, body {
margin: 0; padding: 0;
background: #E4E4E4;
color: #F4F1E8;
overflow-x: hidden;
scroll-behavior: smooth;
}
/* ===== SPLASH ===== */
.splash {
position: fixed; inset: 0;
width: 100vw; height: 100vh;
z-index: 9999;
pointer-events: none;
overflow: hidden;
animation: splashHide 0.3s ease forwards;
animation-delay: 1.35s;
}
.splash-row { display: flex; width: 100%; height: 50%; }
.splash-box { width: 20%; height: 100%; background: #75C5DE; }
.splash-row-top .splash-box { animation: splashTop 1s cubic-bezier(0.96,-0.02,0.38,1.01) forwards; }
.splash-row-bottom .splash-box { animation: splashBottom 1s cubic-bezier(0.96,-0.02,0.38,1.01) forwards; }
.splash-box:nth-child(1) { animation-delay: 0s; }
.splash-box:nth-child(2) { animation-delay: 0.05s; }
.splash-box:nth-child(3) { animation-delay: 0.1s; }
.splash-box:nth-child(4) { animation-delay: 0.15s; }
.splash-box:nth-child(5) { animation-delay: 0.2s; }
@keyframes splashTop { from { transform: translateY(0%); } to { transform: translateY(-100%); } }
@keyframes splashBottom { from { transform: translateY(0%); } to { transform: translateY(100%); } }
@keyframes splashHide { to { opacity: 0; visibility: hidden; } }
/* ===== HERO IMAGE ENTRANCE ===== */
@keyframes heroImageIn {
from { opacity: 0; transform: scale(1.5) rotate(3deg); }
to { opacity: 1; transform: scale(1) rotate(0deg); }
}
.hero-image-animate {
animation: heroImageIn 1.2s cubic-bezier(0.25,0.46,0.45,0.94) forwards;
animation-delay: 1s;
opacity: 0;
}
/* ===== WORD REVEAL ===== */
@keyframes wordReveal {
from { opacity: 0; transform: translateY(10px); filter: blur(10px); }
to { opacity: 1; transform: translateY(0); filter: blur(0); }
}
.word-reveal {
opacity: 0;
display: inline-block;
margin-right: 0.3em;
animation: wordReveal 0.4s ease forwards;
}
/* ===== CTA ENTRANCE ===== */
@keyframes slideUpScale {
from { opacity: 0; transform: translateY(60px) scale(0.4); }
to { opacity: 1; transform: translateY(0) scale(1); }
}
.cta-animate {
opacity: 0;
animation: slideUpScale 0.8s cubic-bezier(0.25,0.46,0.45,0.94) forwards;
animation-delay: 1s;
}
/* ===== CTA BUTTON ===== */
.cta-btn { position: relative; overflow: hidden; display: flex; align-items: center; border: none; background: none; cursor: pointer; border-radius: 9999px; padding: 8px; gap: 12px; }
.cta-btn-bg {
position: absolute; top: 5px; bottom: 5px; left: 8px;
width: calc(100% - 8px - 8px - 48px - 12px);
border-radius: 9999px; background: white; z-index: 0;
transition: width 0.4s cubic-bezier(0.25,0.46,0.45,0.94);
}
@media (min-width: 768px) { .cta-btn-bg { width: calc(100% - 8px - 8px - 54px - 12px); } }
.cta-btn:hover .cta-btn-bg { width: calc(100% - 16px); }
.cta-btn-text { position: relative; z-index: 1; color: #111111; font-weight: 500; font-size: 16px; padding: 12px 32px; white-space: nowrap; }
@media (min-width: 768px) { .cta-btn-text { font-size: 18px; padding: 16px 40px; } }
.cta-btn-circle {
position: relative; z-index: 1; display: flex; align-items: center; justify-content: center;
width: 48px; height: 48px; border-radius: 50%; background: #75C5DE; flex-shrink: 0;
transition: transform 0.4s cubic-bezier(0.25,0.46,0.45,0.94);
}
@media (min-width: 768px) { .cta-btn-circle { width: 54px; height: 54px; } }
.cta-btn:hover .cta-btn-circle { transform: translateX(-7px); }
/* ===== MENU CTA (smaller) ===== */
.menu-cta-btn { position: relative; overflow: hidden; display: flex; align-items: center; border: none; background: none; cursor: pointer; border-radius: 9999px; padding: 6px; gap: 8px; }
.menu-cta-bg {
position: absolute; top: 5px; bottom: 5px; left: 8px;
width: calc(100% - 8px - 8px - 38px - 8px);
border-radius: 9999px; background: white; z-index: 0;
transition: width 0.4s cubic-bezier(0.25,0.46,0.45,0.94);
}
.menu-cta-btn:hover .menu-cta-bg { width: calc(100% - 12px); }
.menu-cta-text { position: relative; z-index: 1; color: #111111; font-weight: 500; font-size: 14px; padding: 8px 40px; white-space: nowrap; }
.menu-cta-circle {
position: relative; z-index: 1; display: flex; align-items: center; justify-content: center;
width: 38px; height: 38px; border-radius: 50%; background: #75C5DE; flex-shrink: 0;
transition: transform 0.3s ease;
}
.menu-cta-btn:hover .menu-cta-circle { transform: translateX(-4px); }
/* ===== CREATOR TEXT ===== */
@keyframes creatorSlideUp { from { transform: translateY(330px); } to { transform: translateY(0); } }
.creator-text-animate {
transform: translateY(330px);
animation: creatorSlideUp 1s cubic-bezier(0.16,1,0.3,1) forwards;
animation-delay: 1.5s;
}
/* ===== NAVIGATION ===== */
.logo-wrapper {
position: fixed; top: 30px; left: 0; width: 50%; z-index: 10;
display: flex; justify-content: flex-start; align-items: center; mix-blend-mode: difference;
}
@media (min-width: 768px) { .logo-wrapper { top: 40px; } }
.logo-wrapper .inner { padding-left: 20px; }
@media (min-width: 768px) { .logo-wrapper .inner { padding-left: 40px; } }
.logo-wrapper img { width: 32px; height: 32px; }
.burger-wrapper {
position: fixed; top: 16px; right: 0; width: 50%; z-index: 10;
display: flex; justify-content: flex-end; align-items: center;
}
@media (min-width: 768px) { .burger-wrapper { top: 27px; } }
.burger-wrapper .inner { padding-right: 20px; }
@media (min-width: 768px) { .burger-wrapper .inner { padding-right: 40px; } }
.burger-btn {
width: 59px; height: 59px; border-radius: 50%; border: none; cursor: pointer;
display: flex; flex-direction: column; gap: 4px; align-items: center; justify-content: center;
background: #F4F1E8; transition: background 0.4s ease;
}
.burger-btn:hover { background: #0B0B0B; }
.burger-btn .bar {
display: block; width: 24px; height: 2px; background: #111111;
transition: all 0.3s ease;
}
.burger-btn:hover .bar { background: #F4F1E8; }
.burger-btn.open { background: #0B0B0B; }
.burger-btn.open .bar { background: #F4F1E8; }
.burger-btn.open .bar:first-child { transform: rotate(45deg) translate(2px, 2px); }
.burger-btn.open .bar:last-child { transform: rotate(-45deg) translate(2px, -2px); }
/* ===== MENU PANEL ===== */
.menu-panel {
position: fixed; z-index: 9;
left: 8px; right: 8px;
border-radius: 20px;
background: rgba(17,17,17,0.95);
backdrop-filter: blur(26px); -webkit-backdrop-filter: blur(26px);
padding: 90px 32px 32px 32px;
display: flex; flex-direction: column; justify-content: space-between;
transition: top 0.5s cubic-bezier(0.25,0.46,0.45,0.94), opacity 0.4s ease;
top: -600px; opacity: 0; pointer-events: none;
}
@media (min-width: 768px) {
.menu-panel { left: auto; right: 7px; width: 420px; padding: 60px; }
}
.menu-panel.open { top: 0; opacity: 1; pointer-events: auto; }
@media (min-width: 768px) { .menu-panel.open { top: 7px; } }
.menu-panel nav { display: flex; flex-direction: column; gap: 8px; }
.menu-panel nav a {
color: #F4F1E8; font-size: 36px; font-weight: 500; text-decoration: none;
line-height: 130%; transition: opacity 0.3s ease;
}
@media (min-width: 768px) { .menu-panel nav a { font-size: 42px; } }
.menu-panel nav a:hover { opacity: 0.7; }
.menu-contact { display: flex; flex-direction: column; gap: 20px; margin-top: 32px; }
.menu-email { color: #9A9590; font-size: 18px; text-decoration: none; transition: color 0.3s ease; }
@media (min-width: 768px) { .menu-email { font-size: 20px; } }
.menu-email:hover { color: #F4F1E8; }
.menu-socials { display: flex; gap: 24px; }
.menu-socials a {
color: #9A9590; font-size: 14px; text-decoration: underline;
text-underline-offset: 2px; transition: color 0.3s ease;
}
.menu-socials a:hover { color: #F4F1E8; }
/* ===== HERO ===== */
.hero {
position: relative; width: 100%; overflow: hidden;
background: #E4E4E4; min-height: 100vh;
}
@media (min-width: 768px) { .hero { height: 100vh; min-height: 800px; } }
.hero-big-text {
position: absolute; bottom: -30px; left: 0; right: 0; z-index: 2;
pointer-events: none; width: 100%; text-align: center;
}
@media (min-width: 768px) { .hero-big-text { bottom: -40px; } }
.hero-big-text h2 {
font-weight: 500; color: #F4F1E8; line-height: 80%;
letter-spacing: -0.04em; white-space: nowrap;
font-size: clamp(180px, 28vw, 560px);
}
.hero-base-img {
position: absolute; top: 30vh; left: 0; right: 0; bottom: 0;
background-size: cover; background-repeat: no-repeat;
background-position: 60% center; z-index: 5;
}
@media (min-width: 768px) { .hero-base-img { top: 0; background-position: center; } }
.hero-reveal-img {
position: absolute; top: 30vh; left: 0; right: 0; bottom: 0;
background-size: cover; background-repeat: no-repeat;
background-position: 60% center; z-index: 7; pointer-events: none;
}
@media (min-width: 768px) { .hero-reveal-img { top: 0; background-position: center; } }
.hero-content {
position: relative; z-index: 8;
display: flex; flex-direction: column; justify-content: flex-start; align-items: flex-start;
width: 100%; max-width: 1600px; margin: 0 auto;
padding: 110px 16px 24px 16px; pointer-events: none;
}
@media (min-width: 768px) {
.hero-content {
position: absolute; inset: 0;
justify-content: space-between;
padding: 160px 40px 100px 40px;
}
}
.hero-content-inner { display: flex; flex-direction: column; align-items: flex-start; gap: 30px; width: 100%; pointer-events: auto; }
.hero-headline {
font-size: 22px; font-weight: 500; line-height: 120%;
letter-spacing: -0.02em; color: #111111; max-width: 447px;
}
@media (min-width: 768px) { .hero-headline { font-size: 28px; } }
/* ===== CANVAS (hidden) ===== */
#reveal-canvas { display: none; position: absolute; inset: 0; pointer-events: none; }
/* ===== REDUCED MOTION ===== */
@media (prefers-reduced-motion: reduce) {
.splash { animation: splashHide 0.01s linear forwards; }
.splash-box { animation: none !important; }
.hero-image-animate, .word-reveal, .cta-animate, .creator-text-animate {
animation: none !important; opacity: 1 !important;
transform: none !important; filter: none !important; visibility: visible !important;
}
}
</style>
</head>
<body>
<!-- SPLASH -->
<div class="splash" id="splash">
<div class="splash-row splash-row-top">
<div class="splash-box"></div><div class="splash-box"></div><div class="splash-box"></div><div class="splash-box"></div><div class="splash-box"></div>
</div>
<div class="splash-row splash-row-bottom">
<div class="splash-box"></div><div class="splash-box"></div><div class="splash-box"></div><div class="splash-box"></div><div class="splash-box"></div>
</div>
</div>
<!-- LOGO -->
<div class="logo-wrapper">
<div class="inner">
<a href="/" aria-label="Home">
<img src="https://meez.design/web/media/ext/d903b3ffd22625df.svg" alt=""/>
</a>
</div>
</div>
<!-- BURGER -->
<div class="burger-wrapper">
<div class="inner">
<button class="burger-btn" id="burger-btn" aria-label="Open menu">
<span class="bar"></span>
<span class="bar"></span>
</button>
</div>
</div>
<!-- MENU PANEL -->
<div class="menu-panel" id="menu-panel">
<nav>
<a href="#work">Work</a>
<a href="#about">About</a>
<a href="#blog">Blog</a>
</nav>
<div class="menu-contact">
<a href="mailto:studio@norakessler.com" class="menu-email">studio@norakessler.com</a>
<div class="menu-socials">
<a href="#">Pinterest</a>
<a href="#">Behance</a>
<a href="#">Letterboxd</a>
</div>
</div>
<div style="margin-top:32px;">
<button class="menu-cta-btn">
<span class="menu-cta-bg"></span>
<span class="menu-cta-text">Let's talk</span>
<span class="menu-cta-circle">
<svg width="14" height="14" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M5 13L13 5M13 5H6M13 5V12" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
</span>
</button>
</div>
</div>
<!-- HERO -->
<main class="hero">
<!-- Big text behind image -->
<div class="hero-big-text creator-text-animate">
<h2>Visuals</h2>
</div>
<!-- Base image -->
<div class="hero-base-img hero-image-animate"
style="background-image:url('https://meez.design/web/media/ext/3e3e091d9b7dc534.png');">
</div>
<!-- Reveal layer -->
<canvas id="reveal-canvas"></canvas>
<div class="hero-reveal-img" id="reveal-img"
style="background-image:url('https://meez.design/web/media/ext/e948533167791aef.png');">
</div>
<!-- Content -->
<div class="hero-content">
<div class="hero-content-inner">
<h1 class="hero-headline" id="headline"></h1>
<button class="cta-btn cta-animate">
<span class="cta-btn-bg"></span>
<span class="cta-btn-text">Start a project now</span>
<span class="cta-btn-circle">
<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M5 13L13 5M13 5H6M13 5V12" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
</span>
</button>
</div>
</div>
</main>
<script>
(function() {
// Word reveal
const headline = document.getElementById('headline');
const text = "I build compelling visual stories & motion that make ideas shine.";
const words = text.split(' ');
words.forEach(function(word, i) {
const span = document.createElement('span');
span.className = 'word-reveal';
span.textContent = word;
span.style.animationDelay = (1 + i * 0.05) + 's';
headline.appendChild(span);
});
// Burger menu toggle
const burgerBtn = document.getElementById('burger-btn');
const menuPanel = document.getElementById('menu-panel');
let menuOpen = false;
burgerBtn.addEventListener('click', function() {
menuOpen = !menuOpen;
if (menuOpen) {
burgerBtn.classList.add('open');
menuPanel.classList.add('open');
burgerBtn.setAttribute('aria-label', 'Close menu');
} else {
burgerBtn.classList.remove('open');
menuPanel.classList.remove('open');
burgerBtn.setAttribute('aria-label', 'Open menu');
}
});
// Close menu on nav link click
menuPanel.querySelectorAll('nav a').forEach(function(a) {
a.addEventListener('click', function() {
menuOpen = false;
burgerBtn.classList.remove('open');
menuPanel.classList.remove('open');
});
});
// Spotlight reveal
const SPOTLIGHT_R = 260;
const canvas = document.getElementById('reveal-canvas');
const imgLayer = document.getElementById('reveal-img');
const ctx = canvas.getContext('2d');
function resizeCanvas() {
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
}
resizeCanvas();
window.addEventListener('resize', resizeCanvas);
const mouse = { x: -999, y: -999 };
const smooth = { x: -999, y: -999 };
window.addEventListener('mousemove', function(e) {
mouse.x = e.clientX;
mouse.y = e.clientY;
});
function loop() {
smooth.x += (mouse.x - smooth.x) * 0.1;
smooth.y += (mouse.y - smooth.y) * 0.1;
ctx.clearRect(0, 0, canvas.width, canvas.height);
var grad = ctx.createRadialGradient(smooth.x, smooth.y, 0, smooth.x, smooth.y, SPOTLIGHT_R);
grad.addColorStop(0, 'rgba(255,255,255,1)');
grad.addColorStop(0.4, 'rgba(255,255,255,1)');
grad.addColorStop(0.6, 'rgba(255,255,255,0.75)');
grad.addColorStop(0.75, 'rgba(255,255,255,0.4)');
grad.addColorStop(0.88, 'rgba(255,255,255,0.12)');
grad.addColorStop(1, 'rgba(255,255,255,0)');
ctx.beginPath();
ctx.arc(smooth.x, smooth.y, SPOTLIGHT_R, 0, Math.PI * 2);
ctx.fillStyle = grad;
ctx.fill();
var dataUrl = canvas.toDataURL();
imgLayer.style.webkitMaskImage = 'url(' + dataUrl + ')';
imgLayer.style.maskImage = 'url(' + dataUrl + ')';
imgLayer.style.webkitMaskSize = '100% 100%';
imgLayer.style.maskSize = '100% 100%';
requestAnimationFrame(loop);
}
requestAnimationFrame(loop);
})();
</script>
</body>
</html>
Tech-ForwardHero Section · free prompt · copy-paste
Create a full-screen hero section landing page using React, Vite, and Framer Motion (`motion` package). Use plain CSS (no Tailwind). The font is Inter (weights 300, 400, 500, 600) from Google Fonts. The design is minimal black-and-white with a full-viewport background video.
**Stack:** React 19, Vite, `motion` (framer-motion), `lucide-react` (for the Plus icon).
**Layout:**
- Full viewport height (`min-height: 100vh`), white background, flex column with `justify-content: space-between`
- Fixed navbar at top (z-index 50, pointer-events none on the nav itself, auto on children)
- Absolutely positioned full-screen video behind everything (z-index 0)
- Footer content pinned to bottom (z-index 30) with a white gradient fade-up background
**Navbar (fixed, top):**
- Left side contains:
1. Logo: custom SVG icon (two rotated rounded rectangles at -35deg, black fill) + brand text "NeuralKinetics" (hidden on mobile, shown on desktop 768px+)
2. Menu button: black pill with white circle containing a Plus icon (lucide, size 12, strokeWidth 3) + "Menu" text (11px, white)
3. Tags pill: light gray (#F4F4F6) rounded-full container with two text labels "Advanced Bionics" and "Cognitive AI" (hidden on mobile, shown on desktop)
- Right side contains:
- A light gray pill with a black circle button (containing a 4-dot grid SVG icon) + label "Adaptive Systems" (hidden on mobile)
**Background Video:**
- URL: `https://meez.design/web/media/ext/a9e8d581015638ec.mp4`
- autoPlay, muted, playsInline, object-fit: cover
- On mobile: video wrapper is 80% width and 80% height (centered)
- On desktop (768px+): video wrapper is 100% width and 100% height
**Footer content (bottom, over gradient):**
- Background: `linear-gradient(to top, #ffffff 0%, rgba(255,255,255,0.8) 50%, transparent 100%)`
- On mobile: stacks vertically. On desktop: row layout, items aligned to bottom.
- Left block:
1. Subtitle line: small black dot (8px circle) + "Best digital banking card 2026" (13px, 55% opacity black)
2. Heading: "One Card, Zero / Limits. Worldwide." on two lines. Font-weight 300, clamp(2rem, 8vw, 4.5rem) on mobile, clamp(2.5rem, 5.5vw, 4.5rem) on desktop, letter-spacing -0.03em, line-height 1
3. Two buttons: "See Features" (black pill, white text, 13px) and "How It Works" (transparent with dark border rgba(0,0,0,0.35), 13px)
- Right block: Three tag pills "Neuromorphic", "AGI", "Cybernetics" (white bg, light border rgba(0,0,0,0.12), 11px, rounded-full)
**Animations (using `motion` from 'motion/react'):**
- Navbar: slides down from y:-16, opacity 0 to visible. Duration 0.8s, ease [0.16, 1, 0.3, 1]
- Video: fades in from opacity 0 + scale 1.05 to opacity 1 + scale 1. Duration 1.8s
- Footer wrapper: slides up from y:20, delay 0.5s, duration 1s
- Subtitle: slides up from y:16, delay 0.6s, duration 0.8s
- Heading: slides up from y:20, delay 0.8s, duration 0.8s
- Buttons: slides up from y:16, delay 1.0s, duration 0.8s
- All use ease: [0.16, 1, 0.3, 1]
**Responsive (mobile-first, breakpoint at 768px):**
- Mobile: navbar padding 16px, smaller buttons (28px circles), brand text hidden, tags hidden, right label hidden, footer stacks vertically, video at 80% size
- Desktop (768px+): navbar padding 24px 32px, larger buttons (32px circles), all text/tags visible, footer is row layout, video fills 100%
### Source Code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>NeuralKinetics Hero</title>
<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=Inter:wght@300;400;500;600&display=swap" rel="stylesheet" />
<style>
* { margin: 0; padding: 0; box-sizing: border-box; }
body {
background: #fff;
color: #000;
font-family: 'Inter', system-ui, -apple-system, sans-serif;
-webkit-font-smoothing: antialiased;
}
::selection { background: #000; color: #fff; }
.page {
position: relative;
min-height: 100vh;
width: 100%;
display: flex;
flex-direction: column;
justify-content: space-between;
overflow: hidden;
}
/* === NAVBAR === */
.nav-bar {
position: fixed;
top: 0;
left: 0;
width: 100%;
padding: 16px;
display: flex;
align-items: center;
justify-content: space-between;
z-index: 50;
pointer-events: none;
animation: slideDown 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
opacity: 0;
}
@keyframes slideDown {
from { transform: translateY(-16px); opacity: 0; }
to { transform: translateY(0); opacity: 1; }
}
.nav-left {
display: flex;
align-items: center;
gap: 8px;
pointer-events: auto;
}
.nav-logo {
display: flex;
align-items: center;
gap: 4px;
cursor: pointer;
padding: 4px 8px;
border-radius: 8px;
}
.nav-logo-text {
font-weight: 500;
font-size: 15px;
letter-spacing: -0.02em;
color: #000;
display: none;
}
.nav-menu-btn {
display: flex;
align-items: center;
background-color: #000;
color: #fff;
border: 1px solid rgba(0,0,0,0.03);
padding: 4px 16px 4px 4px;
gap: 8px;
border-radius: 9999px;
cursor: pointer;
font-family: inherit;
}
.nav-menu-icon {
width: 28px;
height: 28px;
border-radius: 50%;
background-color: #fff;
color: #000;
display: flex;
align-items: center;
justify-content: center;
}
.nav-menu-label {
font-size: 11px;
font-weight: 500;
padding-right: 2px;
}
.nav-tags {
display: none;
align-items: center;
background-color: #F4F4F6;
border: 1px solid rgba(0,0,0,0.03);
border-radius: 9999px;
padding: 0 24px;
height: 40px;
font-size: 11px;
font-weight: 400;
color: rgba(0,0,0,0.55);
gap: 20px;
user-select: none;
}
.nav-right { pointer-events: auto; }
.nav-right-pill {
display: flex;
align-items: center;
background-color: #F4F4F6;
border-radius: 9999px;
padding: 4px 16px 4px 4px;
gap: 10px;
border: 1px solid rgba(0,0,0,0.03);
}
.nav-right-icon {
width: 28px;
height: 28px;
border-radius: 50%;
background-color: #000;
color: #fff;
display: flex;
align-items: center;
justify-content: center;
border: none;
cursor: pointer;
}
.nav-right-label {
font-size: 11px;
font-weight: 500;
color: rgba(0,0,0,0.65);
user-select: none;
display: none;
}
/* === VIDEO === */
.video-container {
position: absolute;
inset: 0;
z-index: 0;
pointer-events: none;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
}
.video-wrapper {
position: relative;
width: 80%;
height: 80%;
animation: videoFadeIn 1.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
opacity: 0;
}
@keyframes videoFadeIn {
from { opacity: 0; transform: scale(1.05); }
to { opacity: 1; transform: scale(1); }
}
.video-wrapper video {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
pointer-events: none;
}
/* === SPACER === */
.spacer { flex: 1; position: relative; z-index: 10; }
/* === FOOTER === */
.bottom-footer {
width: 100%;
position: relative;
z-index: 30;
padding: 32px 20px 40px;
background: linear-gradient(to top, #ffffff 0%, rgba(255,255,255,0.8) 50%, transparent 100%);
}
.footer-inner {
width: 100%;
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: flex-start;
gap: 24px;
animation: slideUp 1s cubic-bezier(0.16, 1, 0.3, 1) 0.5s forwards;
opacity: 0;
}
@keyframes slideUp {
from { transform: translateY(20px); opacity: 0; }
to { transform: translateY(0); opacity: 1; }
}
.footer-left {
display: flex;
flex-direction: column;
gap: 20px;
max-width: 540px;
}
.footer-subtitle {
display: flex;
align-items: center;
gap: 8px;
animation: slideUpSmall 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.6s forwards;
opacity: 0;
}
@keyframes slideUpSmall {
from { transform: translateY(16px); opacity: 0; }
to { transform: translateY(0); opacity: 1; }
}
.footer-subtitle .dot {
width: 8px;
height: 8px;
border-radius: 50%;
background-color: rgba(0,0,0,0.75);
flex-shrink: 0;
}
.footer-subtitle span {
font-size: 13px;
color: rgba(0,0,0,0.55);
}
.footer-heading {
font-size: clamp(2rem, 8vw, 4.5rem);
font-weight: 300;
line-height: 1;
letter-spacing: -0.03em;
color: #000;
animation: slideUpMedium 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.8s forwards;
opacity: 0;
}
@keyframes slideUpMedium {
from { transform: translateY(20px); opacity: 0; }
to { transform: translateY(0); opacity: 1; }
}
.footer-buttons {
display: flex;
align-items: center;
gap: 12px;
margin-top: 4px;
animation: slideUpSmall 0.8s cubic-bezier(0.16, 1, 0.3, 1) 1.0s forwards;
opacity: 0;
}
.btn-primary {
padding: 12px 22px;
background-color: #000;
color: #fff;
font-size: 13px;
font-weight: 500;
border-radius: 9999px;
border: none;
cursor: pointer;
font-family: inherit;
}
.btn-outline {
display: flex;
align-items: center;
gap: 8px;
padding: 12px 22px;
background-color: transparent;
border: 1px solid rgba(0,0,0,0.35);
color: #000;
font-size: 13px;
font-weight: 500;
border-radius: 9999px;
cursor: pointer;
font-family: inherit;
}
.footer-tags {
display: flex;
flex-wrap: wrap;
gap: 10px;
align-items: flex-end;
}
.tag-button {
padding: 10px 18px;
border: 1px solid rgba(0,0,0,0.12);
color: #000;
font-size: 11px;
font-weight: 400;
border-radius: 9999px;
background-color: #fff;
cursor: pointer;
font-family: inherit;
}
/* === DESKTOP 768px+ === */
@media (min-width: 768px) {
.nav-bar { padding: 24px 32px; }
.nav-left { gap: 12px; }
.nav-logo-text { display: inline; font-size: 17px; }
.nav-menu-btn { padding: 4px 20px 4px 4px; gap: 10px; }
.nav-menu-icon { width: 32px; height: 32px; }
.nav-tags { display: flex; }
.nav-right-pill { padding: 4px 24px 4px 4px; gap: 14px; }
.nav-right-icon { width: 32px; height: 32px; }
.nav-right-label { display: inline; }
.video-wrapper { width: 100%; height: 100%; }
.bottom-footer { padding: 40px 48px 56px; }
.footer-inner { flex-direction: row; align-items: flex-end; gap: 32px; }
.footer-left { gap: 24px; }
.footer-heading { font-size: clamp(2.5rem, 5.5vw, 4.5rem); white-space: nowrap; }
.btn-primary { padding: 13px 26px; }
.btn-outline { padding: 13px 26px; }
.tag-button { padding: 12px 22px; }
}
</style>
</head>
<body>
<div class="page">
<!-- Navbar -->
<nav class="nav-bar">
<div class="nav-left">
<div class="nav-logo">
<svg width="36" height="36" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect x="7" y="19" width="15" height="5.5" rx="2.75" transform="rotate(-35 7 19)" fill="#000"/>
<rect x="17.5" y="24" width="15" height="5.5" rx="2.75" transform="rotate(-35 17.5 24)" fill="#000"/>
</svg>
<span class="nav-logo-text">NeuralKinetics</span>
</div>
<button class="nav-menu-btn">
<div class="nav-menu-icon">
<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round">
<line x1="12" y1="5" x2="12" y2="19"/>
<line x1="5" y1="12" x2="19" y2="12"/>
</svg>
</div>
<span class="nav-menu-label">Menu</span>
</button>
<div class="nav-tags">
<span>Advanced Bionics</span>
<span>Cognitive AI</span>
</div>
</div>
<div class="nav-right">
<div class="nav-right-pill">
<button class="nav-right-icon">
<svg width="13" height="13" viewBox="0 0 24 24" fill="none">
<circle cx="12" cy="5" r="2.2" fill="currentColor"/>
<circle cx="12" cy="19" r="2.2" fill="currentColor"/>
<circle cx="5" cy="12" r="2.2" fill="currentColor"/>
<circle cx="19" cy="12" r="2.2" fill="currentColor"/>
<path d="M12 7.5v9M7.5 12h9" stroke="currentColor" stroke-width="1.5" opacity="0.6"/>
</svg>
</button>
<span class="nav-right-label">Adaptive Systems</span>
</div>
</div>
</nav>
<!-- Background Video -->
<div class="video-container">
<div class="video-wrapper">
<video
src="https://meez.design/web/media/ext/a9e8d581015638ec.mp4"
autoplay
muted
playsinline
></video>
</div>
</div>
<!-- Spacer -->
<main class="spacer"></main>
<!-- Footer Content -->
<footer class="bottom-footer">
<div class="footer-inner">
<div class="footer-left">
<div class="footer-subtitle">
<div class="dot"></div>
<span>Best digital banking card 2026</span>
</div>
<h2 class="footer-heading">
<div>One Card, Zero</div>
<div>Limits. Worldwide.</div>
</h2>
<div class="footer-buttons">
<button class="btn-primary">See Features</button>
<button class="btn-outline">How It Works</button>
</div>
</div>
<div class="footer-tags">
<button class="tag-button">Neuromorphic</button>
<button class="tag-button">AGI</button>
<button class="tag-button">Cybernetics</button>
</div>
</div>
</footer>
</div>
</body>
</html>
Wellness BalanceHero Section · free prompt · copy-paste
Create a single-page hero landing for a wellness/supplements brand called "TerraElix" using React + Tailwind CSS + Lucide React icons. The page is a full-viewport hero with a background image, navbar, headline with word-by-word reveal animations, CTA section, and a 3-panel footer strip. It must be fully responsive (mobile, tablet, desktop).
---
## Fonts
Import from Google Fonts:
- **DM Sans** (weights 400, 500) -- used for brand name, nav links, headline, panel 1 text
- **Inter** (weights 400, 500) -- used for buttons, body text, panel 2/3 text
---
## Background
Full-screen background image covering the entire viewport:
```
url: https://meez.design/web/bg-previews/190_Blue-Purple-Glow.jpg
background-size: cover; background-position: center; background-repeat: no-repeat;
```
---
## Layout Structure
```
<div> (min-h-screen, flex flex-col, relative, overflow-hidden)
<nav> -- navbar
<section> -- hero content (flex-1, flex col, justify-center)
<div> -- mobile/tablet product image (visible below lg)
<div> -- 3-panel grid footer
<img> -- desktop floating product image (absolute, hidden below lg)
</div>
```
---
## Navbar
- **Left:** Brand name "TerraElix" -- white, DM Sans 500, 30px, letter-spacing -0.05em
- **Center (desktop only, hidden on mobile):** Nav links "About", "Products", "Promotions", "Contact" -- DM Sans 500, 18px, text-white/90, gap 10 (lg)
- **Right:** Row of icon buttons + avatar + mobile menu toggle
- Search icon (Lucide `Search`, size 20, strokeWidth 1.5)
- Shopping bag icon (Lucide `ShoppingBag`, size 20, strokeWidth 1.5)
- Return icon (Lucide `CornerUpLeft`, size 20, strokeWidth 1.5)
- Round avatar image (w-8 h-8, lg:w-10 lg:h-10, rounded-full, object-cover):
```
https://meez.design/web/bg-previews/191_Motion-Background-2.jpg
```
- Hamburger menu button (md:hidden, Lucide `Menu` / `X` toggle)
- **Mobile overlay menu:** fixed inset-0 bg-black/90 z-30 with centered nav links (text-2xl, white)
Padding: px-5 sm:px-8 lg:px-10, py-4 lg:py-5
---
## Hero Headline
Font: DM Sans, weight 400, letter-spacing -0.05em
Responsive sizes:
- Base: 48px/50px line-height
- sm: 80px/72px
- md: 110px/95px
- lg: 130px/110px
- xl: 155px/125px
Text layout (3 lines):
```
Line 1: "The" (white) "Power" (white) "of" (white/45 -- dimmed)
Line 2: "Nature" (dimmed) "in" (dimmed) "Every" (white)
Line 3: "Capsule" (white) + inline image
```
Each word is wrapped in a container with overflow-hidden, and the inner span animates with `wordReveal` (translateY 100% + blur to visible). Staggered delays: 0.3s, 0.4s, 0.5s, 0.6s, 0.7s, 0.8s, 0.9s.
**Inline image** after "Capsule" (hidden on mobile, sm:inline-block, align-middle, ml-2 lg:ml-4):
```
https://meez.design/web/bg-previews/194_Motion-Background-10.jpg
height: clamp(60px, 10vw, 160px); width: auto;
```
---
## CTA Section
Below the headline, mt-8 sm:mt-12 lg:mt-[75px]. Flex row on sm+, column on mobile. Gap: 5 (mobile), 8 (sm), 50px (lg).
- **Button:** "Explore Now" + ArrowUpRight icon. bg-black text-white rounded-md. Sizes: w-full sm:w-[240px] md:w-[280px] lg:w-[310px], h-14 sm:h-16 lg:h-[72px]. Font: Inter 500, responsive text (base to 2xl), letter-spacing -0.03em.
- **Paragraph:** "Discover our new plant-based supplements for daily balance and clean energy." -- white, max-w-[310px], Inter 400, text-sm sm:text-base lg:text-lg, line-height 1.45, letter-spacing -0.03em.
---
## Mobile/Tablet Product Image (lg:hidden)
Visible below lg breakpoint. Oversized, bleeding off edges:
```
https://meez.design/web/bg-previews/195_Motion-Background-6.jpg
w-[180%] sm:w-[151%] max-w-[1296px], object-contain, mx-auto, drop-shadow-2xl
margin-bottom: -180px sm:-220px (overlaps panels below)
```
---
## Bottom 3-Panel Grid
`grid grid-cols-1 md:grid-cols-[2fr_1fr_2fr]`, relative z-10.
### Panel 1 (bg-[#ECEDEC])
- Text: "Start your personalized path to natural balance" -- DM Sans 400, text-2xl sm:text-[28px] lg:text-[35px], leading-[1.1], letter-spacing -0.05em, max-w-[350px]
- Link: "Personal Assessment" -- underline, Inter 400, text-base lg:text-lg, letter-spacing -0.03em
- Decorative image (absolute right-0 bottom-0, h-full, mix-blend-multiply):
```
https://meez.design/web/bg-previews/197_Motion-Background-12.jpg
```
### Panel 2 (bg-[#FEFDF9]) -- Auto-rotating card carousel
4 cards cycling every 3500ms with fade/slide transition:
1. FlaskConical icon, bg-black circle: "Experience our newly enhanced natural formula"
2. Leaf icon, bg-emerald-800 circle: "Pure organic ingredients sourced sustainably"
3. Droplets icon, bg-cyan-800 circle: "Advanced bioavailability for maximum absorption"
4. Sun icon, bg-amber-700 circle: "Clinically tested for daily energy & vitality"
Each card: icon in a 40px (sm:48px) round colored circle + text (Inter 400, text-sm sm:text-base lg:text-lg, text-black/80, line-height 1.2, letter-spacing -0.03em).
Active card: opacity-100 translate-y-0. Inactive: opacity-0 translate-y-4 absolute.
Bottom dots: 4 thin bars (h-0.5, flex-1, rounded-full). Active: bg-black. Inactive: bg-black/20.
### Panel 3 (bg-black)
- Left: Product image (w-[120px] h-[82px] sm:w-[160px] h-[110px] lg:w-[208px] h-[142px]):
```
https://meez.design/web/bg-previews/198_Ember-Glow.jpg
```
- Right: "+14K" (white, Inter 400, text-2xl sm:text-3xl lg:text-[35px], letter-spacing -0.05em) + "People have already optimized their wellness" (text-white/60, Inter 400, text-sm sm:text-base lg:text-lg, line-height 1.2)
---
## Desktop Floating Product (lg+ only)
Same image as mobile product, but absolutely positioned for desktop:
```
https://meez.design/web/bg-previews/199_Background-04.jpg
position: absolute; z-0; hidden lg:block;
width: clamp(600px, 80vw, 1412px); height: auto;
bottom: -10%; right: clamp(-400px, -20vw, -100px);
```
---
## Animations (CSS keyframes)
```css
@keyframes fadeUp {
from { opacity: 0; transform: translateY(30px); }
to { opacity: 1; transform: translateY(0); }
}
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
@keyframes slideInLeft {
from { opacity: 0; transform: translateX(-40px); }
to { opacity: 1; transform: translateX(0); }
}
@keyframes slideInRight {
from { opacity: 0; transform: translateX(40px); }
to { opacity: 1; transform: translateX(0); }
}
@keyframes scaleIn {
from { opacity: 0; transform: scale(0.9); }
to { opacity: 1; transform: scale(1); }
}
@keyframes wordReveal {
from { opacity: 0; transform: translateY(100%); filter: blur(4px); }
to { opacity: 1; transform: translateY(0); filter: blur(0px); }
}
```
All use `cubic-bezier(0.16, 1, 0.3, 1)` easing with `both` fill mode.
**Classes and their animations:**
- `.animate-fade-up` -- fadeUp 0.8s
- `.animate-fade-in` -- fadeIn 0.7s
- `.animate-slide-left` -- slideInLeft 0.8s
- `.animate-slide-right` -- slideInRight 0.8s
- `.animate-scale-in` -- scaleIn 1s
- `.animate-word-reveal > span` -- wordReveal 0.7s
**Delay classes:** .delay-200 through .delay-1100 (increments of 0.1s)
**Animation assignments:**
- Navbar container: animate-fade-in
- Brand name: animate-slide-left delay-200
- Nav links: animate-fade-in delay-400
- Right icons: animate-slide-right delay-300
- CTA row: animate-fade-up delay-600
- Desktop product image: animate-scale-in delay-700
- Mobile product image: animate-scale-in delay-800
- Panel 1: animate-fade-up delay-900
- Panel 2: animate-fade-up delay-1000
- Panel 3: animate-fade-up delay-1100
- Inline capsule image: animate-scale-in delay-1000
---
## Source Code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>TerraElix</title>
<script src="https://cdn.tailwindcss.com"></script>
<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=DM+Sans:wght@400;500&family=Inter:wght@400;500&display=swap" rel="stylesheet" />
<style>
@keyframes fadeUp {
from { opacity: 0; transform: translateY(30px); }
to { opacity: 1; transform: translateY(0); }
}
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
@keyframes slideInLeft {
from { opacity: 0; transform: translateX(-40px); }
to { opacity: 1; transform: translateX(0); }
}
@keyframes slideInRight {
from { opacity: 0; transform: translateX(40px); }
to { opacity: 1; transform: translateX(0); }
}
@keyframes scaleIn {
from { opacity: 0; transform: scale(0.9); }
to { opacity: 1; transform: scale(1); }
}
@keyframes wordReveal {
from { opacity: 0; transform: translateY(100%); filter: blur(4px); }
to { opacity: 1; transform: translateY(0); filter: blur(0px); }
}
.animate-fade-up { animation: fadeUp 0.8s cubic-bezier(0.16, 1, 0.3, 1) both; }
.animate-fade-in { animation: fadeIn 0.7s cubic-bezier(0.16, 1, 0.3, 1) both; }
.animate-slide-left { animation: slideInLeft 0.8s cubic-bezier(0.16, 1, 0.3, 1) both; }
.animate-slide-right { animation: slideInRight 0.8s cubic-bezier(0.16, 1, 0.3, 1) both; }
.animate-scale-in { animation: scaleIn 1s cubic-bezier(0.16, 1, 0.3, 1) both; }
.animate-word-reveal { display: inline-block; overflow: hidden; }
.animate-word-reveal > span { display: inline-block; animation: wordReveal 0.7s cubic-bezier(0.16, 1, 0.3, 1) both; }
.delay-200 { animation-delay: 0.2s; }
.delay-300 { animation-delay: 0.3s; }
.delay-400 { animation-delay: 0.4s; }
.delay-600 { animation-delay: 0.6s; }
.delay-700 { animation-delay: 0.7s; }
.delay-800 { animation-delay: 0.8s; }
.delay-900 { animation-delay: 0.9s; }
.delay-1000 { animation-delay: 1.0s; }
.delay-1100 { animation-delay: 1.1s; }
</style>
</head>
<body class="m-0 p-0">
<div
class="min-h-screen font-sans flex flex-col relative overflow-hidden"
style="background-image: url('https://meez.design/web/bg-previews/200_97.jpg'); background-size: cover; background-position: center; background-repeat: no-repeat;"
>
<!-- Navbar -->
<nav class="flex items-center justify-between px-5 sm:px-8 lg:px-10 py-4 lg:py-5 relative z-20 animate-fade-in">
<span class="text-white animate-slide-left delay-200" style="font-family: 'DM Sans', sans-serif; font-size: 30px; line-height: 38px; letter-spacing: -0.05em; font-weight: 500;">TerraElix</span>
<!-- Desktop nav -->
<ul class="hidden md:flex gap-6 lg:gap-10 text-white/90 animate-fade-in delay-400 list-none m-0 p-0" style="font-family: 'DM Sans', sans-serif; font-size: 18px; line-height: 120%; letter-spacing: -0.01em; font-weight: 500;">
<li class="cursor-pointer hover:text-white transition-colors">About</li>
<li class="cursor-pointer hover:text-white transition-colors">Products</li>
<li class="cursor-pointer hover:text-white transition-colors">Promotions</li>
<li class="cursor-pointer hover:text-white transition-colors">Contact</li>
</ul>
<div class="flex items-center gap-3 lg:gap-4 animate-slide-right delay-300">
<button class="text-white/80 hover:text-white transition-colors bg-transparent border-none cursor-pointer">
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="11" cy="11" r="8"/><path d="m21 21-4.3-4.3"/></svg>
</button>
<button class="text-white/80 hover:text-white transition-colors bg-transparent border-none cursor-pointer">
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M6 2 3 6v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6l-3-4Z"/><path d="M3 6h18"/><path d="M16 10a4 4 0 0 1-8 0"/></svg>
</button>
<button class="text-white/80 hover:text-white transition-colors bg-transparent border-none cursor-pointer">
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="9 14 4 9 9 4"/><path d="M20 20v-7a4 4 0 0 0-4-4H4"/></svg>
</button>
<img src="https://meez.design/web/bg-previews/202_79.jpg" class="w-8 h-8 lg:w-10 lg:h-10 rounded-full object-cover" alt="Avatar" />
<!-- Mobile menu button -->
<button id="menuBtn" class="md:hidden text-white/80 hover:text-white transition-colors ml-2 bg-transparent border-none cursor-pointer">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="4" x2="20" y1="12" y2="12"/><line x1="4" x2="20" y1="6" y2="6"/><line x1="4" x2="20" y1="18" y2="18"/></svg>
</button>
</div>
</nav>
<!-- Mobile menu overlay -->
<div id="mobileMenu" class="fixed inset-0 bg-black/90 z-30 flex-col items-center justify-center gap-8 md:hidden" style="display: none;">
<button id="closeMenuBtn" class="absolute top-5 right-5 text-white bg-transparent border-none cursor-pointer">
<svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M18 6 6 18"/><path d="m6 6 12 12"/></svg>
</button>
<ul class="flex flex-col gap-6 text-white text-2xl font-medium text-center list-none m-0 p-0">
<li class="cursor-pointer hover:text-white/70 transition-colors">About</li>
<li class="cursor-pointer hover:text-white/70 transition-colors">Products</li>
<li class="cursor-pointer hover:text-white/70 transition-colors">Promotions</li>
<li class="cursor-pointer hover:text-white/70 transition-colors">Contact</li>
</ul>
</div>
<!-- Hero -->
<section class="px-5 sm:px-8 lg:px-10 flex-1 relative overflow-visible z-10 flex flex-col justify-center">
<h1
class="text-[48px] leading-[50px] sm:text-[80px] sm:leading-[72px] md:text-[110px] md:leading-[95px] lg:text-[130px] lg:leading-[110px] xl:text-[155px] xl:leading-[125px] m-0"
style="font-family: 'DM Sans', sans-serif; font-weight: 400; letter-spacing: -0.05em;"
>
<span class="animate-word-reveal"><span class="text-white" style="animation-delay: 0.3s;">The</span></span>
<span class="animate-word-reveal"><span class="text-white" style="animation-delay: 0.4s;">Power</span></span>
<span class="animate-word-reveal"><span class="text-white/45" style="animation-delay: 0.5s;">of</span></span>
<br />
<span class="animate-word-reveal"><span class="text-white/45" style="animation-delay: 0.6s;">Nature</span></span>
<span class="animate-word-reveal"><span class="text-white/45" style="animation-delay: 0.7s;">in</span></span>
<span class="animate-word-reveal"><span class="text-white" style="animation-delay: 0.8s;">Every</span></span>
<br />
<span class="animate-word-reveal"><span class="text-white" style="animation-delay: 0.9s;">Capsule</span></span>
<img
src="https://meez.design/web/bg-previews/104_Motion-Background-031045.jpg"
alt=""
class="hidden sm:inline-block align-middle ml-2 lg:ml-4 animate-scale-in delay-1000"
style="height: clamp(60px, 10vw, 160px); width: auto;"
/>
</h1>
<div class="flex flex-col sm:flex-row sm:items-center mt-8 sm:mt-12 lg:mt-[75px] gap-5 sm:gap-8 lg:gap-[50px] animate-fade-up delay-600">
<button
class="flex items-center justify-center gap-2 sm:gap-3 bg-black text-white rounded-md hover:bg-neutral-900 transition-colors flex-shrink-0 w-full sm:w-[240px] md:w-[280px] lg:w-[310px] h-14 sm:h-16 lg:h-[72px] text-base sm:text-lg md:text-xl lg:text-2xl border-none cursor-pointer"
style="font-family: 'Inter', sans-serif; font-weight: 500; letter-spacing: -0.03em;"
>
Explore Now
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M7 7h10v10"/><path d="M7 17 17 7"/></svg>
</button>
<p
class="text-white max-w-[310px] text-sm sm:text-base lg:text-lg m-0"
style="font-family: 'Inter', sans-serif; font-weight: 400; line-height: 1.45; letter-spacing: -0.03em;"
>
Discover our new plant-based supplements for daily balance and clean energy.
</p>
</div>
</section>
<!-- Mobile/Tablet product image -->
<div class="relative z-10 flex items-center justify-center pt-0 sm:pt-2 pb-0 sm:block lg:hidden overflow-visible mb-[-180px] sm:mb-[-220px] animate-scale-in delay-800">
<img
src="https://meez.design/web/bg-previews/193_Motion-Background-3.jpg"
alt="Product capsules"
class="w-[180%] sm:w-[151%] max-w-[1296px] h-auto object-contain mx-auto drop-shadow-2xl"
/>
</div>
<!-- Bottom panels -->
<div class="grid grid-cols-1 md:grid-cols-[2fr_1fr_2fr] relative z-10">
<!-- Panel 1 -->
<div class="bg-[#ECEDEC] px-5 sm:px-8 py-6 sm:py-8 flex flex-col justify-between relative overflow-hidden min-h-[180px] sm:min-h-[200px] animate-fade-up delay-900">
<p
class="relative z-10 text-black max-w-[350px] text-2xl sm:text-[28px] lg:text-[35px] leading-[1.1] m-0"
style="font-family: 'DM Sans', sans-serif; font-weight: 400; letter-spacing: -0.05em;"
>
Start your personalized path to natural balance
</p>
<span
class="relative z-10 text-black underline underline-offset-2 cursor-pointer hover:opacity-70 transition-opacity mt-4 text-base lg:text-lg"
style="font-family: 'Inter', sans-serif; font-weight: 400; letter-spacing: -0.03em;"
>
Personal Assessment
</span>
<img
src="https://meez.design/web/bg-previews/136_Motion-Background-17.jpg"
alt=""
class="absolute right-0 bottom-0 h-full w-auto object-contain pointer-events-none z-0"
style="mix-blend-mode: multiply;"
/>
</div>
<!-- Panel 2 - Gallery -->
<div class="bg-[#FEFDF9] px-5 sm:px-8 py-6 sm:py-8 flex flex-col justify-between min-h-[150px] sm:min-h-[180px] animate-fade-up delay-1000 overflow-hidden">
<div class="relative flex-1" id="cardContainer">
<!-- Cards injected by JS -->
</div>
<div class="flex gap-2 mt-6" id="cardDots"></div>
</div>
<!-- Panel 3 -->
<div class="bg-black px-5 sm:px-8 py-6 sm:py-8 flex items-center gap-4 sm:gap-6 min-h-[150px] sm:min-h-[180px] animate-fade-up delay-1100">
<div class="flex-shrink-0">
<img
src="https://meez.design/web/bg-previews/097_Background-5.jpg"
alt=""
class="object-contain w-[120px] h-[82px] sm:w-[160px] sm:h-[110px] lg:w-[208px] lg:h-[142px]"
/>
</div>
<div>
<p
class="text-white text-2xl sm:text-3xl lg:text-[35px] leading-tight m-0"
style="font-family: 'Inter', sans-serif; font-weight: 400; letter-spacing: -0.05em;"
>
+14K
</p>
<p
class="text-white/60 mt-1 text-sm sm:text-base lg:text-lg m-0"
style="font-family: 'Inter', sans-serif; font-weight: 400; line-height: 1.2; letter-spacing: -0.03em;"
>
People have already optimized their wellness
</p>
</div>
</div>
</div>
<!-- Background decorative image - desktop only -->
<img
src="https://meez.design/web/bg-previews/206_Transit-Flow.jpg"
alt=""
class="absolute pointer-events-none z-0 hidden lg:block animate-scale-in delay-700"
style="width: clamp(600px, 80vw, 1412px); height: auto; bottom: -10%; right: clamp(-400px, -20vw, -100px);"
/>
</div>
<script>
// Mobile menu toggle
const menuBtn = document.getElementById('menuBtn');
const mobileMenu = document.getElementById('mobileMenu');
const closeMenuBtn = document.getElementById('closeMenuBtn');
menuBtn.addEventListener('click', () => {
mobileMenu.style.display = 'flex';
});
closeMenuBtn.addEventListener('click', () => {
mobileMenu.style.display = 'none';
});
// Card carousel
const cards = [
{ icon: '<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M10 2v7.527a2 2 0 0 1-.211.896L4.72 20.55a1 1 0 0 0 .9 1.45h12.76a1 1 0 0 0 .9-1.45l-5.069-10.127A2 2 0 0 1 14 9.527V2"/><path d="M8.5 2h7"/><path d="M7 16h10"/></svg>', text: 'Experience our newly enhanced natural formula', color: 'bg-black' },
{ icon: '<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M11 20A7 7 0 0 1 9.8 6.9C15.5 4.9 17 3.5 17 3.5s1.5 0 2.8 1.3c1 .9 1.1 2.2 1.1 2.2s-1.5 1.5-3.5 7.2A7 7 0 0 1 11 20Z"/><path d="M2 21c0-3 1.9-5.6 4.4-6.3"/><path d="M12.3 7.4C14.2 5.5 17 4.5 17 4.5"/></svg>', text: 'Pure organic ingredients sourced sustainably', color: 'bg-emerald-800' },
{ icon: '<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M7 16.3c2.2 0 4-1.83 4-4.05 0-1.16-.57-2.26-1.71-3.19S7.29 6.75 7 5.3c-.29 1.45-1.14 2.84-2.29 3.76S3 11.1 3 12.25c0 2.22 1.8 4.05 4 4.05z"/><path d="M12.56 6.6A10.97 10.97 0 0 0 14 3.02c.5 2.5 2 4.9 4 6.5s3 3.5 3 5.5a6.98 6.98 0 0 1-11.91 4.97"/></svg>', text: 'Advanced bioavailability for maximum absorption', color: 'bg-cyan-800' },
{ icon: '<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="4"/><path d="M12 2v2"/><path d="M12 20v2"/><path d="m4.93 4.93 1.41 1.41"/><path d="m17.66 17.66 1.41 1.41"/><path d="M2 12h2"/><path d="M20 12h2"/><path d="m6.34 17.66-1.41 1.41"/><path d="m19.07 4.93-1.41 1.41"/></svg>', text: 'Clinically tested for daily energy & vitality', color: 'bg-amber-700' },
];
let activeCard = 0;
const container = document.getElementById('cardContainer');
const dotsContainer = document.getElementById('cardDots');
function renderCards() {
container.innerHTML = cards.map((card, i) => `
<div class="flex items-start gap-4 transition-all duration-500 ease-out ${i === activeCard ? 'opacity-100 translate-y-0' : 'opacity-0 translate-y-4 absolute inset-0'}">
<div class="w-10 h-10 sm:w-12 sm:h-12 rounded-full ${card.color} flex items-center justify-center flex-shrink-0 transition-colors duration-500 text-white">
${card.icon}
</div>
<p class="text-black/80 mt-1 text-sm sm:text-base lg:text-lg m-0" style="font-family: 'Inter', sans-serif; font-weight: 400; line-height: 1.2; letter-spacing: -0.03em;">
${card.text}
</p>
</div>
`).join('');
dotsContainer.innerHTML = cards.map((_, i) => `
<button data-index="${i}" class="h-0.5 flex-1 rounded-full transition-all duration-500 border-none cursor-pointer ${i === activeCard ? 'bg-black' : 'bg-black/20 hover:bg-black/40'}"></button>
`).join('');
}
dotsContainer.addEventListener('click', (e) => {
const btn = e.target.closest('button');
if (btn && btn.dataset.index !== undefined) {
activeCard = parseInt(btn.dataset.index);
renderCards();
}
});
renderCards();
setInterval(() => {
activeCard = (activeCard + 1) % cards.length;
renderCards();
}, 3500);
</script>
</body>
</html>
CozyPawsHero Section · free prompt · copy-paste
## Prompt to Recreate CozyPaws Hero Section
**Build a single-page "CozyPaws" pet store hero section using React, Tailwind CSS, and Lucide React icons. The layout is viewport-height (h-screen), no scroll, with three responsive breakpoints (mobile, tablet md, desktop lg+). Use Vite + TypeScript.**
---
### Fonts (Google Fonts)
- **Inter** (weights: 400, 500, 600) — body/UI text
- **DM Serif Display** (weight: 400) — hero heading only
Load via `<link>` in `index.html`:
```
https://fonts.googleapis.com/css2?family=DM+Serif+Display&family=Inter:wght@400;500;600&display=swap
```
Apply with CSS utility class `.font-serif-display { font-family: 'DM Serif Display', serif; }` and `body { font-family: 'Inter', sans-serif; }`
---
### Color Palette
- Background: `#EFFDF0` (light mint green)
- Primary dark green: `#1a3d1a`
- Hover green: `#2a5a2a`
- Orange accent: `#E86A10`
- Orange hover: `#d45e0d`
---
### Asset URLs (all external, do not download)
| Asset | URL |
|-------|-----|
| Logo SVG | `https://meez.design/web/media/ext/ab0d6bb118afd817.svg` |
| Avatar | `https://meez.design/web/media/ext/e1bfa0032b38f8ac.png` |
| Product card (Cat House) | `https://meez.design/web/media/ext/1cd4210c98104a0f.png` |
| Video card (TikTok/YouTube) | `https://meez.design/web/media/ext/4dd3e255a6ec95c0.png` |
| Bottom left image | `https://meez.design/web/media/ext/3d988fce282cf6c2.png` |
| Bottom center image (tallest) | `https://meez.design/web/media/ext/9f19000c199d73da.png` |
| Bottom right image | `https://meez.design/web/media/ext/a1ca55f91181f111.png` |
---
### Header
- Full-width, `px-12` on desktop, `py-4`, relative z-30
- **Left:** Logo image (205x52px desktop, 130x33px mobile)
- **Center nav (hidden below md):** Links "Home" (text-gray-900), "Shop", "Delivery and payment", "Brands", "Blog" (text-gray-600), text-sm font-medium, gap-8
- **Right:** Search button (circle, border, hidden below sm), Favorites button (orange circle, white star icon, badge "4"), Cart button (circle, border, cart icon, badge "1"), Avatar (circle, 40x40)
- Badges: absolute -top-1 -right-1, 20x20, bg-orange, border-2 border-background, white text 10px bold
---
### Desktop Hero Layout (lg+)
**Text layer (z-5):** Centered, `px-12 pt-[5.4rem]`
- Heading: `font-serif-display`, color `#1a3d1a`, `text-[clamp(60px,7.5vw,110px)]`, `leading-[0.95]`, tracking-tight
- Text reads: "Everything" (line 1), "Your Pets Love" (line 2)
- Each word is an `inline-block` with staggered `animate-word-pop` animation
**Left product card:** Absolutely positioned `top-[50px] left-12`
- Width: `clamp(160px,14vw,260px)`
- Image: aspect-ratio 260/257, rounded-2xl, overflow-hidden
- Arrow button bottom-right corner (dark green circle, ArrowUpRight icon)
- Text below: "Cozy Cat House" in gray-700, "$49.99" in dark green bold
- Responsive font sizes via clamp
**Right video card:** Absolutely positioned `top-[50px] right-12`
- Width: `clamp(120px,10vw,177px)`
- Image: aspect-ratio 177/287, rounded-2xl
- Play button (dark green circle) centered near bottom
- Text below play button: "Watch Product Reviews on TikTok and YouTube"
**Bottom 3 images:** Absolutely positioned `bottom-0 left-0 right-0`, z-10, flex items-end, no gaps
- Left image: `flex-1`, max-height `min(70vh, 55vw)`
- Center image: `flex-[1.265]` (wider), max-height `min(85vh, 70vw)`
- Right image: `flex-1`, max-height `min(70vh, 55vw)`
- All images: `w-full h-auto block`
**Overlays on bottom images:**
- Left: "98K+" stat with avatar stack (avatar + green circle with Plus icon)
- Center: "Best Products for Your Pet" white heading + "Explore Products" orange pill button with ArrowRight icon
- Right: "4.6" rating with orange filled Star icon
- All positioned with `bottom: clamp(20px, 4vh, 50px)`
---
### Tablet Layout (md to lg) — Similar to desktop but smaller
- Heading: text-7xl
- Side cards at `top-[80px]`, left-4/right-4, smaller fixed widths (160px/120px)
- Bottom images: same 3-panel flex, maxHeight 60vh/75vh/60vh
---
### Mobile Layout (below md)
- Top section: centered title (36px), subtitle, "Explore Products" button
- Two cards side-by-side (flex, gap-3): product card (aspect-square) + video card (aspect-3/4)
- Stats row: "98K+" with avatars left, divider, "4.6" star right
- Bottom images: same 3-panel flex, no max-height constraint
---
### Animations (CSS keyframes, custom classes)
| Class | Keyframe | Duration | Easing |
|-------|----------|----------|--------|
| `.animate-fade-up` | 0→30px translateY, 0→1 opacity | 0.8s | cubic-bezier(0.16, 1, 0.3, 1) |
| `.animate-fade-in` | 0→1 opacity | 0.6s | ease-out |
| `.animate-slide-up` | 0→60px translateY | 0.9s | cubic-bezier(0.16, 1, 0.3, 1) |
| `.animate-slide-in-left` | -40px→0 translateX | 0.8s | cubic-bezier(0.16, 1, 0.3, 1) |
| `.animate-slide-in-right` | 40px→0 translateX | 0.8s | cubic-bezier(0.16, 1, 0.3, 1) |
| `.animate-text-reveal` | translateY(40px) skewY(3deg) blur(4px) → none | 1s | cubic-bezier(0.16, 1, 0.3, 1) |
| `.animate-word-pop` | translateY(60px) scale(0.7) rotate(-4deg) blur(8px) → bounce overshoot → settle | 0.9s | cubic-bezier(0.34, 1.56, 0.64, 1) |
| `.animate-scale-in` | scale(0.85)→1 | 0.7s | cubic-bezier(0.16, 1, 0.3, 1) |
| `.animate-photo-reveal` | translateY(80px) scale(1.02) → normal | 1.1s | cubic-bezier(0.16, 1, 0.3, 1) |
All use `animation-fill-mode: both`. `.animate-word-pop` starts with `opacity: 0`.
**Delay classes:** `.delay-100` through `.delay-1200` in 100ms increments.
---
### Stagger Order
1. Header fades in (100-300ms)
2. Hero heading words pop in (200-600ms stagger)
3. Side cards slide in (600-700ms)
4. Bottom photos reveal upward (600-900ms stagger, center first)
5. Overlay stats/buttons pop in (1000-1200ms)
---
### Key Technical Details
- Container: `h-screen flex flex-col overflow-hidden` (no scrolling)
- Header: `shrink-0`
- Hero section: `flex-1 flex flex-col overflow-hidden`
- All responsive layouts use show/hide (`hidden lg:flex`, etc.), not CSS-only media queries
- Extensive use of `clamp()` for fluid typography and spacing
- Lucide icons used: Search, ShoppingCart, Star, ArrowUpRight, Play, ArrowRight, Plus
Creative PortfolioHero Section · free prompt · copy-paste
626f6c742d63632d6167656e74Let me read all the relevant files to compile the full recreation prompt.
Here's the full recreation prompt:
---
## Prompt to Recreate This Hero Section
Build a full-screen hero section for a creative portfolio using React, Vite, Tailwind CSS, and the Figtree Google Font. The page has two components: a **Navbar** and a **Hero**. No additional packages beyond `lucide-react` (though it's not used here). The entire page is black background with white text.
---
### Setup
- **Font:** Figtree (400, 500, 600) from Google Fonts, loaded in `index.html`
- **Tailwind custom breakpoints (max-width based):**
- `mobile`: max 809.98px
- `md-tablet`: min 810px, max 1199.98px
- **CSS variable:** `--ease-spring: cubic-bezier(0.16, 1, 0.3, 1)`
---
### Video Background
Three full-screen looping videos (muted, autoPlay, playsInline, loop) stacked absolutely with crossfade switching. All three render simultaneously; only the active one has `opacity-100`, the others have `opacity-0` with `transition-opacity duration-[1200ms] ease-in-out`.
**Video URLs (CloudFront):**
1. `https://meez.design/web/media/bg-videos/ms-dark-flowers.mp4`
2. `https://meez.design/web/media/bg-videos/ms-energy.mp4`
3. `https://meez.design/web/media/bg-videos/ms-person.mp4`
**Preloading:** On mount, fetch all videos as blobs and create object URLs for instant playback. Fall back to original URL on failure.
A `bg-black/10` overlay sits above videos at `z-[1]`.
---
### Navbar (absolute positioned, z-10, on top of hero)
- **Layout:** Centered container, max-width 1340px, `py-9 px-[15px]`
- **Left side:** Navigation items formatted as `01 / Works`, `02 / Services`, `03 / About`, `04 / Contact`
- Index number: `text-[8px] leading-3 tracking-[-0.08px] font-medium uppercase`
- Label: `text-xs leading-4 tracking-[-0.12px] font-medium uppercase`
- Each link has a `.nav-link-underline` effect (underline slides in from right on hover via `scaleX` transform)
- **Right side (aligned right):** Email `Davies@gmail.com` and live clock showing `CUP HH:MM:SS` (24h format, updates every second using `Intl.DateTimeFormat('en-GB')`)
- **Mobile:** Nav items hidden, replaced by a `Menu`/`Close` toggle button. Mobile panel uses CSS Grid `grid-rows-[0fr]`/`grid-rows-[1fr]` transition (420ms, spring ease) for smooth expand/collapse. Mobile nav links are large: `text-[28px] leading-8 tracking-[-0.84px]`
---
### Hero Content (z-[2], relative)
Container: `max-w-[1340px]`, full height, flex column, `justify-end items-end`, `gap-[150px]`, `pt-[190px] px-[15px]`
**Section 1 - Video Switcher + Availability (upper area):**
- Left column (`flex-[4]`): Three buttons labeled `01 / WATER WAVE`, `02 / GRIDWAVE`, `03 / LIGHT TUNNEL`. Active button is full opacity, inactive is `opacity-55` with `hover:opacity-75`. On click, sets `activeIndex` to crossfade videos. Each has a `.role-link` class that translates 4px right on hover.
- Right column (`flex-1`): Pulsing dot + "Available for work" text. Dot is 7px circle with glow shadow and infinite pulse animation (scale 1 to 1.45, opacity 1 to 0.45, 1.6s). On slide 1, dot is `#F598F2` pink with pink glow. On slides 2-3, dot is white with white glow.
**Section 2 - Name + CTA (bottom area, pb-[60px]):**
- Left column (`flex-[2]`): Giant name "Viktor." in `text-[200px] leading-[81%] tracking-[-6px] font-medium uppercase`. The period is accent-colored: pink `#F598F2` on slide 1, white on slides 2-3. Animate in with `revealUp` (translateY 80px to 0, 0.9s spring ease).
- Right column (`flex-1`, `pl-[50px]`): Paragraph text ("I craft bold brands and modern websites with purpose...") at `text-base leading-6 tracking-[-0.16px] font-medium`. Below it, a "start a project" button (lowercase) with white border. Button has a fill-up hover effect: `::before` pseudo-element with `#F598F2` background that translateY from 101% to 0 on hover, text turns black, border turns pink. Both animate in with `revealRight` (translateX 100px to 0, 0.9s spring ease), button delayed by 0.08s.
**Reveal animations** trigger once via IntersectionObserver at 0.35 threshold.
---
### Responsive Tablet (810px-1199px)
- Navbar: `py-[30px] px-[18px]`, nav gaps shrink to `gap-4`
- Hero name: `text-[129.6px] leading-[113.4px] tracking-[-7.7px]`
- Bottom section: gap 28px, pb 52px, left padding 24px
### Responsive Mobile (<810px)
- Navbar: `py-6 px-[18px]`, desktop nav hidden, hamburger menu shown
- Hero content: `justify-end items-start gap-[72px] pt-[140px] px-[18px]`
- Switcher + availability stack vertically with `gap-7`
- Bottom section: column layout, `gap-8 pb-11`
- Name: `text-[clamp(68px,21vw,80px)] leading-[96px] tracking-[-4.8px]`
- Paragraph: `max-w-[420px]`
---
### Custom CSS Animations
```css
@keyframes videoFadeIn { from { opacity: 0 } to { opacity: 1 } }
@keyframes revealUp { from { opacity: 0; transform: translateY(80px) } to { opacity: 1; transform: translateY(0) } }
@keyframes revealRight { from { opacity: 0; transform: translateX(100px) } to { opacity: 1; transform: translateX(0) } }
@keyframes dotPulse { 0%,100% { opacity:1; transform:scale(1) } 50% { opacity:0.45; transform:scale(1.45) } }
```
### Accessibility
- `prefers-reduced-motion: reduce` disables all animations
- Semantic landmarks: `<header>`, `<main>`, `<nav>`, `<section>`
- ARIA labels on navigation regions and status elements
- Videos are `aria-hidden="true"`
---
## Source Code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Viktor Hero</title>
<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=Figtree:wght@400;500;600&display=swap" rel="stylesheet" />
<style>
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
:root {
--ease-spring: cubic-bezier(0.16, 1, 0.3, 1);
--pink: #F598F2;
}
html, body {
min-height: 100%;
background: #000;
font-family: "Figtree", sans-serif;
overflow-x: hidden;
}
/* Animations */
@keyframes revealUp {
from { opacity: 0; transform: translateY(80px); }
to { opacity: 1; transform: translateY(0); }
}
@keyframes revealRight {
from { opacity: 0; transform: translateX(100px); }
to { opacity: 1; transform: translateX(0); }
}
@keyframes dotPulse {
0%, 100% { opacity: 1; transform: scale(1); }
50% { opacity: 0.45; transform: scale(1.45); }
}
.animate-reveal-up { animation: revealUp 0.9s var(--ease-spring) 0.01s forwards; }
.animate-reveal-right { animation: revealRight 0.9s var(--ease-spring) 0.01s forwards; }
.animate-reveal-right-delayed { animation: revealRight 0.9s var(--ease-spring) 0.08s forwards; }
.animate-dot-pulse { animation: dotPulse 1.6s ease-in-out infinite; }
.hidden-before-reveal { opacity: 0; }
.hidden-translate-y { transform: translateY(80px); }
.hidden-translate-x { transform: translateX(100px); }
/* Hero button */
.hero-button {
position: relative;
isolation: isolate;
display: inline-flex;
justify-content: center;
align-items: center;
padding: 14px 18px;
border: 1px solid #fff;
color: #fff;
background: transparent;
overflow: hidden;
font-family: "Figtree", sans-serif;
font-size: 12px;
line-height: 16px;
letter-spacing: -0.12px;
font-weight: 500;
text-transform: lowercase;
text-decoration: none;
transition: color 260ms ease;
cursor: pointer;
}
.hero-button::before {
content: "";
position: absolute;
inset: 0;
background: var(--pink);
transform: translateY(101%);
transition: transform 360ms var(--ease-spring);
z-index: -1;
}
.hero-button:hover { color: #000; border-color: var(--pink); }
.hero-button:hover::before { transform: translateY(0); }
/* Role links */
.role-link {
font-family: "Figtree", sans-serif;
font-size: 12px;
line-height: 16px;
letter-spacing: -0.12px;
font-weight: 500;
text-transform: uppercase;
color: #fff;
background: transparent;
border: 0;
padding: 0;
cursor: pointer;
transition: opacity 220ms ease, transform 220ms ease;
}
.role-link:hover { opacity: 1 !important; transform: translateX(4px); }
.role-link.active { opacity: 1; }
.role-link.inactive { opacity: 0.55; }
.role-link.inactive:hover { opacity: 0.75; }
/* Nav link underline */
.nav-link-underline {
position: relative;
text-decoration: none;
color: #fff;
transition: opacity 220ms var(--ease-spring), transform 220ms var(--ease-spring);
}
.nav-link-underline::after {
content: "";
position: absolute;
left: 0;
bottom: -2px;
width: 100%;
height: 1px;
background: currentColor;
transform: scaleX(0);
transform-origin: right;
transition: transform 320ms var(--ease-spring);
}
.nav-link-underline:hover { opacity: 0.72; }
.nav-link-underline:hover::after { transform: scaleX(1); transform-origin: left; }
/* Videos */
.video-bg {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
z-index: 0;
transition: opacity 1200ms ease-in-out;
}
.video-bg.hidden-video { opacity: 0; }
.video-bg.visible-video { opacity: 1; }
/* Layout */
.hero-main {
position: relative;
width: 100%;
height: 100vh;
overflow: hidden;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
background: #000;
color: #fff;
}
.overlay {
position: absolute;
inset: 0;
background: rgba(0,0,0,0.1);
z-index: 1;
pointer-events: none;
}
.content {
position: relative;
z-index: 2;
width: 100%;
max-width: 1340px;
height: 100vh;
display: flex;
flex-direction: column;
justify-content: flex-end;
align-items: flex-end;
gap: 150px;
padding: 190px 15px 0;
}
/* Middle row */
.middle-row {
width: 100%;
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
padding: 0 6px;
}
.roles-nav {
flex: 4;
display: flex;
flex-direction: column;
justify-content: center;
align-items: flex-start;
gap: 4px;
position: relative;
z-index: 2;
}
.availability {
flex: 1;
display: flex;
justify-content: center;
align-items: center;
gap: 12px;
position: relative;
z-index: 2;
}
.dot {
width: 7px;
height: 7px;
border-radius: 50%;
flex-shrink: 0;
}
.dot.pink {
background: var(--pink);
box-shadow: 0 0 16px rgba(245, 152, 242, 0.85);
}
.dot.white {
background: #fff;
box-shadow: 0 0 16px rgba(255, 255, 255, 0.85);
}
.availability-text {
font-size: 12px;
line-height: 16px;
letter-spacing: -0.12px;
font-weight: 500;
text-transform: uppercase;
color: #fff;
white-space: nowrap;
}
/* Banner row */
.banner-row {
width: 100%;
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: flex-end;
gap: 37px;
padding-bottom: 60px;
position: relative;
z-index: 2;
}
.name-col {
flex: 2;
display: flex;
justify-content: flex-end;
align-items: flex-end;
min-width: 0;
}
.name-col h1 {
width: 100%;
margin: 0;
font-family: "Figtree", sans-serif;
font-size: 200px;
line-height: 81%;
letter-spacing: -6px;
font-weight: 500;
text-transform: uppercase;
color: #fff;
text-align: left;
white-space: nowrap;
}
.name-col h1 .accent { transition: color 400ms ease; }
.name-col h1 .accent.pink { color: var(--pink); }
.name-col h1 .accent.white { color: #fff; }
.info-col {
flex: 1;
min-width: 0;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
gap: 10px;
padding-left: 50px;
}
.info-inner {
flex: 1;
min-width: 0;
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: flex-start;
gap: 40px;
}
.info-inner p {
margin: 0;
width: 100%;
font-family: "Figtree", sans-serif;
font-size: 16px;
line-height: 24px;
letter-spacing: -0.16px;
font-weight: 500;
text-align: left;
color: #fff;
}
/* Navbar */
.navbar {
position: absolute;
top: 0;
left: 0;
width: 100%;
z-index: 10;
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start;
gap: 10px;
padding: 36px 15px;
overflow: hidden;
color: #fff;
}
.navbar-inner {
width: 100%;
max-width: 1340px;
display: flex;
flex-direction: row;
align-items: flex-start;
justify-content: flex-start;
gap: 10px;
overflow: hidden;
}
.nav-left {
flex: 2;
min-width: 0;
display: flex;
flex-direction: row;
align-items: flex-start;
justify-content: flex-start;
gap: 77px;
padding-left: 6px;
overflow: hidden;
}
.nav-links {
flex: 1;
min-width: 0;
display: flex;
flex-direction: row;
align-items: flex-start;
justify-content: flex-start;
gap: 20px;
overflow: hidden;
}
.nav-item {
display: flex;
flex-direction: row;
align-items: flex-start;
justify-content: flex-start;
gap: 4px;
white-space: nowrap;
}
.nav-item .index {
font-family: "Figtree", sans-serif;
font-size: 8px;
line-height: 12px;
letter-spacing: -0.08px;
font-weight: 500;
text-transform: uppercase;
color: #fff;
}
.nav-item a {
font-family: "Figtree", sans-serif;
font-size: 12px;
line-height: 16px;
letter-spacing: -0.12px;
font-weight: 500;
text-transform: uppercase;
white-space: nowrap;
}
.nav-right {
flex: 1;
min-width: 0;
display: flex;
flex-direction: row;
align-items: flex-start;
justify-content: flex-end;
gap: 10px;
padding-right: 6px;
padding-bottom: 8px;
overflow: hidden;
}
.nav-right-inner {
flex: 1;
min-width: 0;
display: flex;
flex-direction: column;
align-items: flex-end;
justify-content: flex-start;
gap: 4px;
overflow: hidden;
}
.nav-right-inner a {
font-family: "Figtree", sans-serif;
font-size: 12px;
line-height: 16px;
letter-spacing: -0.12px;
font-weight: 500;
text-transform: uppercase;
white-space: nowrap;
}
.time-row {
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
gap: 4px;
white-space: nowrap;
}
.time-row span {
font-family: "Figtree", sans-serif;
font-size: 12px;
line-height: 16px;
letter-spacing: -0.12px;
font-weight: 500;
text-transform: uppercase;
color: #fff;
font-variant-numeric: tabular-nums;
}
/* Mobile menu button */
.menu-btn {
display: none;
border: 0;
padding: 0;
background: transparent;
appearance: none;
font-family: "Figtree", sans-serif;
font-size: 12px;
line-height: 16px;
letter-spacing: -0.12px;
font-weight: 500;
text-transform: uppercase;
color: #fff;
white-space: nowrap;
cursor: pointer;
}
/* Mobile panel */
.mobile-panel {
display: none;
width: 100%;
max-width: 1340px;
overflow: hidden;
transition: grid-template-rows 420ms var(--ease-spring);
}
.mobile-panel.open { grid-template-rows: 1fr; }
.mobile-panel.closed { grid-template-rows: 0fr; }
.mobile-panel-inner {
min-height: 0;
overflow: hidden;
}
.mobile-nav {
display: flex;
flex-direction: column;
gap: 12px;
padding-top: 28px;
}
.mobile-nav .nav-item a {
font-size: 28px;
line-height: 32px;
letter-spacing: -0.84px;
}
.mobile-nav .nav-item .index { padding-top: 3px; }
.mobile-info {
display: flex;
flex-direction: column;
gap: 4px;
padding-top: 28px;
}
/* Tablet: 810px - 1199px */
@media (max-width: 1199.98px) and (min-width: 810px) {
.navbar { padding: 30px 18px; }
.nav-left { gap: 48px; }
.nav-links { gap: 16px; }
.content { gap: 120px; padding-top: 170px; padding-left: 24px; padding-right: 24px; }
.banner-row { gap: 28px; padding-bottom: 52px; }
.info-col { padding-left: 24px; }
.name-col h1 { font-size: 129.6px; line-height: 113.4px; letter-spacing: -7.7px; }
.info-inner p { font-size: 15px; line-height: 23px; }
}
/* Mobile: <810px */
@media (max-width: 809.98px) {
.navbar { padding: 24px 18px; overflow: visible; }
.navbar-inner { justify-content: space-between; overflow: visible; }
.nav-left { flex: 1; gap: 0; padding-left: 0; }
.nav-links { display: none; }
.nav-right { flex: initial; width: auto; padding: 0; overflow: visible; }
.nav-right-inner { display: none; }
.menu-btn { display: inline-flex; }
.mobile-panel { display: grid; }
.content {
justify-content: flex-end;
align-items: flex-start;
gap: 72px;
padding: 140px 18px 0;
}
.middle-row {
flex-direction: column;
align-items: flex-start;
justify-content: flex-start;
gap: 28px;
padding: 0;
}
.availability { justify-content: flex-start; }
.banner-row {
flex-direction: column;
align-items: flex-start;
justify-content: flex-end;
gap: 32px;
padding-bottom: 44px;
}
.name-col { width: 100%; flex: initial; }
.name-col h1 {
font-size: clamp(68px, 21vw, 80px);
line-height: 96px;
letter-spacing: -4.8px;
}
.info-col {
width: 100%;
flex: initial;
flex-direction: column;
align-items: flex-start;
justify-content: flex-start;
gap: 22px;
padding-left: 0;
}
.info-inner { width: 100%; flex: initial; gap: 28px; }
.info-inner p { max-width: 420px; }
}
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: 1ms !important;
animation-iteration-count: 1 !important;
scroll-behavior: auto !important;
transition-duration: 1ms !important;
}
}
</style>
</head>
<body>
<!-- Navbar -->
<header class="navbar">
<div class="navbar-inner">
<div class="nav-left">
<nav class="nav-links" aria-label="Primary navigation">
<div class="nav-item">
<span class="index">01 /</span>
<a href="/" class="nav-link-underline">Works</a>
</div>
<div class="nav-item">
<span class="index">02 /</span>
<a href="/" class="nav-link-underline">Services</a>
</div>
<div class="nav-item">
<span class="index">03 /</span>
<a href="/" class="nav-link-underline">About</a>
</div>
<div class="nav-item">
<span class="index">04 /</span>
<a href="/" class="nav-link-underline">Contact</a>
</div>
</nav>
</div>
<div class="nav-right">
<div class="nav-right-inner">
<a href="mailto:Viktor@gmail.com" class="nav-link-underline">Viktor@gmail.com</a>
<div class="time-row" aria-label="Current time">
<span>CUP</span>
<span id="clock">00:00:00</span>
</div>
</div>
<button class="menu-btn nav-link-underline" type="button" id="menuBtn">Menu</button>
</div>
</div>
<div class="mobile-panel closed" id="mobilePanel">
<div class="mobile-panel-inner">
<nav class="mobile-nav" aria-label="Mobile navigation">
<div class="nav-item">
<span class="index">01 /</span>
<a href="/" class="nav-link-underline">Works</a>
</div>
<div class="nav-item">
<span class="index">02 /</span>
<a href="/" class="nav-link-underline">Services</a>
</div>
<div class="nav-item">
<span class="index">03 /</span>
<a href="/" class="nav-link-underline">About</a>
</div>
<div class="nav-item">
<span class="index">04 /</span>
<a href="/" class="nav-link-underline">Contact</a>
</div>
</nav>
<div class="mobile-info">
<a href="mailto:Viktor@gmail.com" class="nav-link-underline" style="font-family:'Figtree',sans-serif;font-size:12px;line-height:16px;letter-spacing:-0.12px;font-weight:500;text-transform:uppercase;white-space:nowrap;">Viktor@gmail.com</a>
<div class="time-row" style="width:fit-content;">
<span>CUP</span>
<span id="clockMobile">00:00:00</span>
</div>
</div>
</div>
</div>
</header>
<!-- Hero -->
<main class="hero-main" id="heroMain" aria-label="Portfolio hero">
<video class="video-bg visible-video" id="video0" src="https://meez.design/web/media/bg-videos/ms-nature-nice.mp4" autoplay muted loop playsinline preload="auto" aria-hidden="true"></video>
<video class="video-bg hidden-video" id="video1" src="https://meez.design/web/media/bg-videos/ms-3d.mp4" autoplay muted loop playsinline preload="auto" aria-hidden="true"></video>
<video class="video-bg hidden-video" id="video2" src="https://meez.design/web/media/bg-videos/ms-nature.mp4" autoplay muted loop playsinline preload="auto" aria-hidden="true"></video>
<div class="overlay" aria-hidden="true"></div>
<section class="content">
<!-- Middle: roles + availability -->
<div class="middle-row">
<nav class="roles-nav" aria-label="Hero variants">
<button class="role-link active" type="button" data-index="0">01 / WATER WAVE</button>
<button class="role-link inactive" type="button" data-index="1">02 / GRIDWAVE</button>
<button class="role-link inactive" type="button" data-index="2">03 / LIGHT TUNNEL</button>
</nav>
<div class="availability" aria-label="Availability status">
<span class="dot pink animate-dot-pulse" id="statusDot" aria-hidden="true"></span>
<span class="availability-text">Available for work</span>
</div>
</div>
<!-- Banner: name + copy -->
<div class="banner-row">
<div class="name-col hidden-before-reveal hidden-translate-y" id="nameCol">
<h1>Viktor<span class="accent pink" id="accentDot">.</span></h1>
</div>
<div class="info-col">
<div class="info-inner">
<p class="hidden-before-reveal hidden-translate-x" id="infoParagraph">I shape digital experiences that feel as good as they look. Every choice is intentional, blending beauty with purpose. Crafted to grow with you.</p>
<a href="/" class="hero-button hidden-before-reveal hidden-translate-x" id="heroBtn">start a project</a>
</div>
</div>
</div>
</section>
</main>
<script>
(function() {
// Clock
function updateClock() {
const now = new Date();
const time = new Intl.DateTimeFormat('en-GB', {
hour: '2-digit', minute: '2-digit', second: '2-digit', hour12: false
}).format(now);
document.getElementById('clock').textContent = time;
const mobile = document.getElementById('clockMobile');
if (mobile) mobile.textContent = time;
}
updateClock();
setInterval(updateClock, 1000);
// Mobile menu
const menuBtn = document.getElementById('menuBtn');
const mobilePanel = document.getElementById('mobilePanel');
let menuOpen = false;
menuBtn.addEventListener('click', function() {
menuOpen = !menuOpen;
menuBtn.textContent = menuOpen ? 'Close' : 'Menu';
mobilePanel.classList.toggle('open', menuOpen);
mobilePanel.classList.toggle('closed', !menuOpen);
});
// Video switching
let activeIndex = 0;
const videos = [
document.getElementById('video0'),
document.getElementById('video1'),
document.getElementById('video2')
];
const roleButtons = document.querySelectorAll('.role-link');
const statusDot = document.getElementById('statusDot');
const accentDot = document.getElementById('accentDot');
function setActive(index) {
if (index === activeIndex) return;
activeIndex = index;
videos.forEach(function(v, i) {
v.classList.toggle('visible-video', i === activeIndex);
v.classList.toggle('hidden-video', i !== activeIndex);
});
roleButtons.forEach(function(btn, i) {
btn.classList.toggle('active', i === activeIndex);
btn.classList.toggle('inactive', i !== activeIndex);
});
if (activeIndex === 0) {
statusDot.classList.add('pink');
statusDot.classList.remove('white');
accentDot.classList.add('pink');
accentDot.classList.remove('white');
} else {
statusDot.classList.remove('pink');
statusDot.classList.add('white');
accentDot.classList.remove('pink');
accentDot.classList.add('white');
}
}
roleButtons.forEach(function(btn) {
btn.addEventListener('click', function() {
setActive(parseInt(btn.getAttribute('data-index')));
});
});
// Reveal on scroll (IntersectionObserver)
const heroMain = document.getElementById('heroMain');
const nameCol = document.getElementById('nameCol');
const infoParagraph = document.getElementById('infoParagraph');
const heroBtn = document.getElementById('heroBtn');
const observer = new IntersectionObserver(function(entries) {
entries.forEach(function(entry) {
if (entry.isIntersecting) {
nameCol.classList.remove('hidden-before-reveal', 'hidden-translate-y');
nameCol.classList.add('animate-reveal-up');
infoParagraph.classList.remove('hidden-before-reveal', 'hidden-translate-x');
infoParagraph.classList.add('animate-reveal-right');
heroBtn.classList.remove('hidden-before-reveal', 'hidden-translate-x');
heroBtn.classList.add('animate-reveal-right-delayed');
observer.unobserve(entry.target);
}
});
}, { threshold: 0.35 });
observer.observe(heroMain);
// Preload videos as blobs for smoother playback
var videoUrls = [
'https://meez.design/web/media/bg-videos/222_1-1.mp4',
'https://meez.design/web/media/bg-videos/224_1niceimage.mp4',
'https://meez.design/web/media/bg-videos/225_38.mp4'
];
videoUrls.forEach(function(url, i) {
fetch(url).then(function(res) { return res.blob(); }).then(function(blob) {
videos[i].src = URL.createObjectURL(blob);
}).catch(function() {});
});
})();
</script>
</body>
</html>
Celestial RenewalWellness · free prompt · copy-paste
**Build a React + Vite + Tailwind CSS landing page with two full-screen sections for a luxury beauty/wellness brand called "Serene". Use TypeScript.**
---
### Fonts (loaded via Google Fonts in index.html)
Load these three font families from Google Fonts:
- **Dancing Script** (weights: 400, 500, 600, 700) -- used for the brand logo
- **Instrument Serif** (italic: 0, 1) -- used for the hero heading and the quote text
- **Inter** (weights: 300, 400, 500, 600, 700, 800, 900) -- used for body text, navbar links, and buttons
```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=Dancing+Script:wght@400;500;600;700&family=Instrument+Serif:ital@0;1&family=Inter:wght@300;400;500;600;700;800;900&display=swap" rel="stylesheet" />
```
---
### Global CSS (index.css)
```css
@tailwind base;
@tailwind components;
@tailwind utilities;
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Inter', sans-serif;
background: #0a0a0c;
overflow-x: hidden;
}
.font-inter {
font-family: 'Inter', sans-serif;
}
.font-instrument {
font-family: 'Instrument Serif', serif;
}
.scrollbar-hide::-webkit-scrollbar {
display: none;
}
.scrollbar-hide {
-ms-overflow-style: none;
scrollbar-width: none;
}
.liquid-glass {
background: rgba(255, 255, 255, 0.01);
background-blend-mode: luminosity;
backdrop-filter: blur(4px);
-webkit-backdrop-filter: blur(4px);
border: none;
box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.1);
position: relative;
overflow: hidden;
}
.liquid-glass::before {
content: '';
position: absolute;
inset: 0;
border-radius: inherit;
padding: 1.4px;
background: linear-gradient(180deg,
rgba(255,255,255,0.45) 0%, rgba(255,255,255,0.15) 20%,
rgba(255,255,255,0) 40%, rgba(255,255,255,0) 60%,
rgba(255,255,255,0.15) 80%, rgba(255,255,255,0.45) 100%);
-webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
-webkit-mask-composite: xor;
mask-composite: exclude;
pointer-events: none;
}
.text-glow {
text-shadow: 0 0 40px rgba(255, 255, 255, 0.4), 0 0 80px rgba(255, 255, 255, 0.2), 0 0 120px rgba(255, 255, 255, 0.1);
}
.button-glow {
box-shadow: 0 0 20px rgba(255, 255, 255, 0.3), 0 0 40px rgba(255, 255, 255, 0.1);
}
```
---
### App Layout (App.tsx)
The wrapper div has `bg-[#0a0608]`. It renders `<Hero />` followed by `<QuoteSection />`.
---
### SECTION 1: Hero
A full-viewport (`h-screen`) section with:
1. **Background video** -- autoplays, muted, loops, playsInline, covers the full section with `object-cover`:
```
https://meez.design/web/media/ext/54f99e047eb75657.mp4
```
2. **Dark overlay** -- `absolute inset-0 bg-black/20`
3. **Fixed Navbar** -- `fixed top-0 left-0 right-0 z-50`, flex row, space-between, `px-6 md:px-12 py-5`:
- **Left**: Brand name "Serene" in Dancing Script cursive, white, `text-2xl md:text-3xl`
- **Center (desktop only, hidden on mobile)**: Navigation links -- "About", "Services", "Journal", "Contact" -- `text-white/80 hover:text-white text-sm tracking-wide`, spaced `gap-12`
- **Right (desktop)**: White pill button "Book a consultation"
- **Right (mobile)**: Hamburger icon (3 lines, animated to X on open). Uses cubic-bezier(0.22,1,0.36,1) easing. On open: top line rotates 45deg + translates down 9px; middle line fades/scales to 0; bottom line rotates -45deg + translates up 9px.
- **Mobile menu**: Slide-in panel from right, `w-[85%] max-w-[340px]`, `bg-[#0a0608]/95 backdrop-blur-xl border-l border-white/10`. Links stagger-animate in (opacity + translateX, 75ms delay between each, starting at 150ms). Button at bottom with 450ms delay.
4. **Center content** -- absolutely positioned, flex column, centered, with `-mt-[120px]` to shift up:
- **Heading**: `font-instrument text-white text-[36px] md:text-7xl lg:text-[110px] leading-[0.9] tracking-tight text-center text-glow` -- text: "Gentle touch. Radiant presence."
- **Subtext**: `text-white/70 text-sm md:text-base text-center mt-5 md:mt-7 max-w-xl` -- text: "Expert beauty and holistic wellness, delivered with warmth and intention."
- **CTA Button**: White pill button "Begin your renewal", `mt-6 md:mt-9`
5. **Sound indicator (desktop only)** -- bottom-left corner (`bottom-8 left-8`), a 40px circle with `border border-white/20` containing a small horizontal bar, next to two lines of text: "Experience" / "with sound" in `text-white/60 text-xs`
**Button component**: `bg-white text-black px-8 py-3.5 rounded-full font-medium text-sm tracking-wide hover:bg-white/90 transition-all duration-300 button-glow`
---
### SECTION 2: Quote Section (with parallax scroll animations)
A full-viewport (`h-screen`) section with:
**Background**: CSS linear-gradient top to bottom:
```
#010A17 0% -> #0A4267 30% -> #20658E 60% -> #6BADC4 100%
```
**Animated layers (requestAnimationFrame-based parallax with lerp smoothing):**
The animation uses a `progress` value (0 to 1) based on how far the section has scrolled through the viewport:
```
progress = clamp(0, 1, (windowHeight - rect.top) / (windowHeight + rect.height))
```
1. **Rainbow image** -- full-width, positioned `absolute inset-x-0 top-0 z-30`. Parallax: moves vertically from +120px to -160px based on scroll progress. Lerp factor: 0.06.
```
https://meez.design/web/media/ext/7ec95e7fa7e81bbe.png
```
2. **Left cloud** -- `absolute left-0 bottom-[10%] z-10`, hidden on mobile (`hidden sm:block`). Width: `w-[500px] md:w-[650px]`. Has `marginLeft: '-50%'` to let it overflow left. Slides in from -200px on X when in view (progress 0.12-0.92), slides back out when not. Also drifts up (cloudY = progress * -50). Opacity tied to X distance. Lerp factor: 0.04.
```
https://meez.design/web/media/ext/0d654f08e102decb.png
```
3. **Right cloud** -- same image as left but `scale-x-[-1]` (flipped), `absolute right-0 bottom-[15%] z-10`. Has `marginRight: '-75%'`. Slides in from +200px. Same lerp/timing as left cloud.
4. **Quote content** -- centered, `z-20`, `max-w-4xl`:
- **Quote text**: `font-instrument text-white text-xl sm:text-2xl md:text-4xl lg:text-[42px] leading-[1.45] md:leading-[1.5]` -- text: "Serene was founded on a belief in beauty that honors your nature. We pursue refined outcomes, considered approaches, and lasting vitality. We spend time learning what matters to you before deciding what serves you best. No rushing, no excess -- just support that lets you feel radiant." (wrapped in curly quotes)
- **Attribution**: `mt-6 md:mt-8 text-white/80 text-sm md:text-base tracking-wide` -- text: "Dr. Mia Callahan -- Founder"
**Key animation implementation detail**: All transforms use `translate3d` for GPU acceleration with `will-change-transform`. Initial cloud state is `opacity: 0` and translated off-screen. The lerp function smoothly interpolates current values toward targets each frame: `current + (target - current) * factor`.
---
### Tailwind Config
Default Tailwind config with no extensions -- all custom styling handled via CSS utility classes in index.css.
Coffee RewardsMobile App · free prompt · copy-paste
Build a mobile coffee profile screen inside a phone mockup frame. Use vanilla HTML, CSS, and JS with Vite as the bundler. The design is dark/warm-toned, inspired by iOS profile screens with glassmorphic UI elements.
**Phone mockup:**
- 390x844px at zoom 0.78, black background, 44px border-radius, overflow hidden, strong drop shadow
- Internal `.screen` div with dark background (`#180a06`), vertical scroll, hidden scrollbar
**Hero section (top):**
- Full-width, 430px tall
- Contains a looping muted autoplay video: `https://meez.design/web/media/bg-videos/278_kv7e7ksvfd.mp4`
- Video covers the area with `object-fit: cover; object-position: center top`
- Bottom gradient overlay fading from transparent at 52% to the background color at 100%
- Top bar with two glass circle buttons (edit icon on left, X close SVG on right), positioned absolute top 18px
**Identity section (overlaps hero by -112px margin-top):**
- Centered name "Dasha" (28px, weight 500)
- Left and right laurel images flanking the name (local assets `/assets/images/laurel-left.png` and `laurel-right.png`), 73px tall, 0.6 opacity, positioned via `right: calc(50% + 66px)` / `left: calc(50% + 66px)`
- Subtitle "Plum Parfait Latte" below (15px, muted color `rgba(235, 220, 205, 0.55)`)
**Achievements pill (centered, 30px below identity):**
- Glass pill button, 54px tall, 225px wide, 27px border-radius
- Trophy icon (local `/assets/images/icon-trophy.png`, 18px) + text "12 achievements" (18px, weight 500)
**Stats grid (3 columns, 12px gap, 26px top padding, 16px horizontal padding):**
- Each card: semi-transparent background `rgba(255,255,255,0.06)`, 24px border-radius
- Card 1: coffee image `https://meez.design/web/bg-previews/239_bp8i93exbq.jpg` (84x84), number "154", label "drinks consumed"
- Card 2: sandwich image `https://meez.design/web/bg-previews/240_bwuyzzssak.jpg` (84x84), number "36", label "sandwiches eaten"
- Card 3: cafe image `https://meez.design/web/bg-previews/241_bwxlb9yeti.jpg` (84x84), number "12", label "cafes visited"
- Numbers: 25px, weight 500. Labels: 13px, color `#BAAA9A8C`
**Favorite card (12px below stats, 16px horizontal margin):**
- Same card background, 24px radius, 110px height, flex row with 16px gap
- Latte image `https://meez.design/web/bg-previews/242_byzm6mnvgu.jpg` (108x108, object-fit contain)
- Text column: "Favorite" (13px, weight 500), "Latte" (19px, weight 500), "Ordered 73 times" (13px, color `#BAAA9A8C`)
- Shuffle button on right (glass circle, local icon `/assets/images/icon-shuffle.png` 19px)
**Partial next card:** Same card style but only 34px tall with flat bottom corners (teaser for scroll)
**Glass button system:**
- Shared `.glass` class: no border, `rgba(255,255,255,0.03)` background, subtle inset box-shadows for edge highlights, `backdrop-filter: blur(2px) saturate(1.3)`, scale-down on `:active`
- `.glass.circle`: 58x44px, 22px radius
- `.glass.pill`: 54px tall, pill-shaped
**Fonts:**
- Primary: "Neue Haas Unica" (loaded from local `/assets/fonts/neue-haas-unica/stylesheet.css`)
- Also load "Helvetica Now Display" from `/assets/fonts/helvetica-now/stylesheet.css`
- Fallbacks: -apple-system, SF Pro Display, Inter, Segoe UI, Roboto
**Page background (behind phone):**
- Multiple warm-toned radial gradients over `#070402`:
- `radial-gradient(ellipse 65% 55% at 15% 52%, rgba(168, 78, 10, 0.22))`
- `radial-gradient(ellipse 52% 48% at 83% 26%, rgba(122, 52, 8, 0.17))`
- `radial-gradient(ellipse 44% 52% at 56% 92%, rgba(98, 36, 5, 0.14))`
- `radial-gradient(ellipse 30% 30% at 72% 75%, rgba(60, 20, 5, 0.10))`
**Entry animations (respects prefers-reduced-motion):**
- Hero: `heroReveal` - opacity 0 + scale(1.01) to normal, 1.9s, cubic-bezier(0.16, 1, 0.3, 1)
- Top bar buttons: `dropIn` from translateY(-10px), 0.7s, staggered 0.35s/0.42s
- Laurels: `fadeIn` 0.8s, delay 0.5s
- Name: `fadeRise` from translateY(16px), 0.7s, delay 0.5s
- Subtitle: same, delay 0.58s
- Achievements: same, delay 0.66s
- Stat cards: staggered at 0.74s, 0.80s, 0.86s
- Favorite card: delay 0.94s
- Next card: fadeIn delay 1.02s
- All use cubic-bezier(0.16, 1, 0.3, 1) except simple fadeIn which uses ease-out
**JavaScript (liquid glass effect):**
- Generates a displacement map canvas for each `[data-liquid]` element based on its dimensions and border-radius
- Uses SDF (signed distance field) of a rounded rectangle to compute refraction vectors
- Creates SVG `<feDisplacementMap>` filters and applies them as `backdrop-filter: url(#id) blur(0.3px) saturate(1.3)`
- Falls back to standard blur if SVG filter not supported
**CSS variables:**
```
--bg: #180a06
--card: rgba(255, 255, 255, 0.06)
--text: #ede4d8
--muted: rgba(235, 220, 205, 0.55)
--radius-card: 24px
```
**Responsive:** At 440px viewport, phone scales to zoom 0.6. Body flex-wraps at 900px.
---
## Source Code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Coffee Profile</title>
<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=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
<style>
* { margin: 0; padding: 0; box-sizing: border-box; }
:root {
--bg: #180a06;
--card: rgba(255, 255, 255, 0.06);
--text: #ede4d8;
--muted: rgba(235, 220, 205, 0.55);
--radius-card: 24px;
}
html, body { height: 100%; }
body {
font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Inter", "Segoe UI", Roboto, sans-serif;
line-height: 1.2;
background:
radial-gradient(ellipse 65% 55% at 15% 52%, rgba(168, 78, 10, 0.22) 0%, transparent 65%),
radial-gradient(ellipse 52% 48% at 83% 26%, rgba(122, 52, 8, 0.17) 0%, transparent 60%),
radial-gradient(ellipse 44% 52% at 56% 92%, rgba(98, 36, 5, 0.14) 0%, transparent 58%),
radial-gradient(ellipse 30% 30% at 72% 75%, rgba(60, 20, 5, 0.10) 0%, transparent 50%),
#070402;
display: flex;
flex-wrap: nowrap;
justify-content: center;
align-items: center;
padding: 36px 24px;
color: var(--text);
}
.phone-mockup {
position: relative;
flex-shrink: 0;
zoom: .78;
width: 390px;
height: 844px;
background: #000;
border-radius: 44px;
overflow: hidden;
box-shadow: 0 30px 80px rgba(0, 0, 0, .6);
}
.screen {
position: relative;
width: 100%;
height: 100%;
background: var(--bg);
overflow-y: auto;
overflow-x: hidden;
scrollbar-width: none;
}
.screen::-webkit-scrollbar { display: none; }
@media (max-width: 900px) {
body { flex-wrap: wrap; }
}
@media (max-width: 440px) {
.phone-mockup { zoom: .6; }
}
.hero {
position: relative;
width: 100%;
height: 430px;
}
.hero img,
.hero video {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center top;
display: block;
user-select: none;
-webkit-user-drag: none;
}
.hero::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(to bottom,
rgba(24, 10, 6, 0) 52%,
rgba(24, 10, 6, 0.55) 78%,
var(--bg) 100%);
pointer-events: none;
}
.glass {
border: none;
cursor: pointer;
font-family: inherit;
color: var(--text);
background: rgba(255, 255, 255, 0.03);
backdrop-filter: blur(2px) saturate(1.3);
-webkit-backdrop-filter: blur(2px) saturate(1.3);
box-shadow:
0 8px 22px rgba(0, 0, 0, 0.22),
inset 0 0 0 0.6px rgba(255, 255, 255, 0.02),
inset 1.5px 2px 0 -1px rgba(255, 255, 255, 0.3),
inset -1.5px -2px 0 -1px rgba(255, 255, 255, 0.3),
inset 0 0 12px 3px rgba(255, 255, 255, 0.0);
transition: transform 0.16s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.glass:active { transform: scale(0.92); }
.glass:focus-visible { outline: 2px solid rgba(255,255,255,0.7); outline-offset: 2px; }
.glass.circle {
width: 58px;
height: 44px;
border-radius: 22px;
display: flex;
align-items: center;
justify-content: center;
}
.glass.circle svg { width: 22px; height: 22px; }
.glass.circle img {
width: 19px;
height: 19px;
object-fit: contain;
display: block;
user-select: none;
-webkit-user-drag: none;
}
.top-bar {
position: absolute;
top: 18px;
left: 18px;
right: 18px;
display: flex;
justify-content: space-between;
z-index: 3;
}
.top-bar .glass.circle {
backdrop-filter: none;
-webkit-backdrop-filter: none;
background: rgba(255, 255, 255, 0.05);
}
.identity {
position: relative;
margin-top: -112px;
z-index: 2;
text-align: center;
padding: 0 24px;
}
.name-row {
display: flex;
align-items: center;
justify-content: center;
}
.laurel {
position: absolute;
top: 50%;
transform: translateY(-50%);
height: 73px;
width: auto;
opacity: 0.6;
user-select: none;
-webkit-user-drag: none;
pointer-events: none;
-webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,0.6) 0%, rgba(0,0,0,0.95) 45%, rgba(0,0,0,0.95) 100%);
mask-image: linear-gradient(to bottom, rgba(0,0,0,0.6) 0%, rgba(0,0,0,0.95) 45%, rgba(0,0,0,0.95) 100%);
}
.laurel.left { right: calc(50% + 66px); }
.laurel.right { left: calc(50% + 66px); }
.name {
font-size: 28px;
font-weight: 500;
letter-spacing: 0.01em;
}
.subtitle {
margin-top: 6px;
font-size: 15px;
color: var(--muted);
font-weight: 400;
}
.achievements-wrap {
display: flex;
justify-content: center;
margin-top: 30px;
padding: 0 24px;
}
.glass.pill {
height: 54px;
padding: 0 26px;
border-radius: 27px;
display: flex;
align-items: center;
gap: 10px;
font-size: 18px;
font-weight: 500;
letter-spacing: 0.01em;
width: 225px;
backdrop-filter: none;
-webkit-backdrop-filter: none;
background: rgba(255, 255, 255, 0.05);
}
.glass.pill svg {
width: 18px;
height: 18px;
flex-shrink: 0;
}
.stats {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 12px;
padding: 26px 16px 0;
}
.stat-card {
background: var(--card);
border-radius: var(--radius-card);
padding: 14px 8px 20px;
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
}
.stat-card img {
width: 84px;
height: 84px;
object-fit: contain;
margin-bottom: 8px;
user-select: none;
-webkit-user-drag: none;
}
.stat-num {
font-size: 25px;
font-weight: 500;
line-height: 1;
}
.stat-label {
margin-top: 7px;
font-size: 13px;
line-height: 1.1;
font-weight: 400;
color: #BAAA9A8C;
}
.favorite {
margin: 12px 16px 0;
background: var(--card);
border-radius: var(--radius-card);
padding: 16px;
display: flex;
align-items: center;
gap: 16px;
height: 110px;
}
.favorite > img {
width: 108px;
height: 108px;
object-fit: contain;
flex-shrink: 0;
margin-left: -4px;
margin-right: 2px;
user-select: none;
-webkit-user-drag: none;
}
.fav-text { flex: 1; min-width: 0; }
.fav-eyebrow {
font-size: 13px;
font-weight: 500;
color: var(--text);
opacity: 0.9;
padding-top: 2px;
padding-bottom: 2px;
}
.fav-title {
font-size: 19px;
font-weight: 500;
padding-top: 3px;
padding-bottom: 3px;
}
.fav-sub {
font-size: 13px;
font-weight: 400;
color: #BAAA9A8C;
margin-top: 3px;
line-height: 1.1;
}
.favorite .glass.circle {
flex-shrink: 0;
backdrop-filter: none;
-webkit-backdrop-filter: none;
background: rgba(255, 255, 255, 0.05);
}
.next-card {
margin: 12px 16px 0;
background: var(--card);
border-radius: var(--radius-card) var(--radius-card) 0 0;
height: 34px;
}
@media (prefers-reduced-motion: reduce) {
.glass { transition: none; }
}
@media (prefers-reduced-motion: no-preference) {
@keyframes heroReveal {
from { opacity: 0; transform: scale(1.01); }
to { opacity: 1; transform: scale(1); }
}
@keyframes fadeRise {
from { opacity: 0; transform: translateY(16px); }
to { opacity: 1; transform: translateY(0); }
}
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
@keyframes dropIn {
from { opacity: 0; transform: translateY(-10px); }
to { opacity: 1; transform: translateY(0); }
}
.top-bar .glass.circle:nth-child(1) {
animation: dropIn 0.7s cubic-bezier(0.16, 1, 0.3, 1) 0.35s both;
}
.top-bar .glass.circle:nth-child(2) {
animation: dropIn 0.7s cubic-bezier(0.16, 1, 0.3, 1) 0.42s both;
}
.hero img,
.hero video {
animation: heroReveal 1.9s cubic-bezier(0.16, 1, 0.3, 1) both;
}
.laurel.left, .laurel.right {
animation: fadeIn 0.8s ease-out 0.5s both;
}
.name {
animation: fadeRise 0.7s cubic-bezier(0.16, 1, 0.3, 1) 0.5s both;
}
.subtitle {
animation: fadeRise 0.7s cubic-bezier(0.16, 1, 0.3, 1) 0.58s both;
}
.achievements-wrap {
animation: fadeRise 0.7s cubic-bezier(0.16, 1, 0.3, 1) 0.66s both;
}
.stat-card:nth-child(1) {
animation: fadeRise 0.7s cubic-bezier(0.16, 1, 0.3, 1) 0.74s both;
}
.stat-card:nth-child(2) {
animation: fadeRise 0.7s cubic-bezier(0.16, 1, 0.3, 1) 0.80s both;
}
.stat-card:nth-child(3) {
animation: fadeRise 0.7s cubic-bezier(0.16, 1, 0.3, 1) 0.86s both;
}
.favorite {
animation: fadeRise 0.7s cubic-bezier(0.16, 1, 0.3, 1) 0.94s both;
}
.next-card {
animation: fadeIn 0.6s ease-out 1.02s both;
}
}
</style>
</head>
<body>
<div class="phone-mockup">
<div class="screen">
<div class="hero">
<video src="https://meez.design/web/media/bg-videos/281_mag4s8xjit.mp4" autoplay muted loop playsinline></video>
<div class="top-bar">
<button class="glass circle" type="button" aria-label="Edit profile">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round">
<path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"/>
<path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"/>
</svg>
</button>
<button class="glass circle" type="button" aria-label="Close">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" style="width: 26px; height: 26px">
<path d="M18 6 6 18M6 6l12 12"></path>
</svg>
</button>
</div>
</div>
<div class="identity">
<svg class="laurel left" viewBox="0 0 40 80" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M38 75C34 65 30 55 28 45C26 35 26 25 30 15C32 10 35 6 38 3" stroke="#ede4d8" stroke-width="1" stroke-linecap="round" opacity="0.7"/>
<path d="M36 70C30 62 26 52 25 42" stroke="#ede4d8" stroke-width="0.8" stroke-linecap="round" opacity="0.5"/>
<ellipse cx="30" cy="18" rx="5" ry="8" fill="none" stroke="#ede4d8" stroke-width="0.8" opacity="0.6" transform="rotate(-15 30 18)"/>
<ellipse cx="26" cy="30" rx="5" ry="8" fill="none" stroke="#ede4d8" stroke-width="0.8" opacity="0.6" transform="rotate(-10 26 30)"/>
<ellipse cx="25" cy="43" rx="5" ry="8" fill="none" stroke="#ede4d8" stroke-width="0.8" opacity="0.6" transform="rotate(-5 25 43)"/>
<ellipse cx="27" cy="56" rx="5" ry="8" fill="none" stroke="#ede4d8" stroke-width="0.8" opacity="0.6" transform="rotate(5 27 56)"/>
<ellipse cx="32" cy="67" rx="4" ry="7" fill="none" stroke="#ede4d8" stroke-width="0.8" opacity="0.6" transform="rotate(10 32 67)"/>
</svg>
<svg class="laurel right" viewBox="0 0 40 80" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M2 75C6 65 10 55 12 45C14 35 14 25 10 15C8 10 5 6 2 3" stroke="#ede4d8" stroke-width="1" stroke-linecap="round" opacity="0.7"/>
<path d="M4 70C10 62 14 52 15 42" stroke="#ede4d8" stroke-width="0.8" stroke-linecap="round" opacity="0.5"/>
<ellipse cx="10" cy="18" rx="5" ry="8" fill="none" stroke="#ede4d8" stroke-width="0.8" opacity="0.6" transform="rotate(15 10 18)"/>
<ellipse cx="14" cy="30" rx="5" ry="8" fill="none" stroke="#ede4d8" stroke-width="0.8" opacity="0.6" transform="rotate(10 14 30)"/>
<ellipse cx="15" cy="43" rx="5" ry="8" fill="none" stroke="#ede4d8" stroke-width="0.8" opacity="0.6" transform="rotate(5 15 43)"/>
<ellipse cx="13" cy="56" rx="5" ry="8" fill="none" stroke="#ede4d8" stroke-width="0.8" opacity="0.6" transform="rotate(-5 13 56)"/>
<ellipse cx="8" cy="67" rx="4" ry="7" fill="none" stroke="#ede4d8" stroke-width="0.8" opacity="0.6" transform="rotate(-10 8 67)"/>
</svg>
<div class="name-row">
<h1 class="name">Dasha</h1>
</div>
<p class="subtitle">Plum Parfait Latte</p>
</div>
<div class="achievements-wrap">
<button class="glass pill" type="button">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round">
<path d="M6 9H4.5a2.5 2.5 0 0 1 0-5H6"/>
<path d="M18 9h1.5a2.5 2.5 0 0 0 0-5H18"/>
<path d="M4 22h16"/>
<path d="M10 14.66V17c0 .55-.47.98-.97 1.21C7.85 18.75 7 20.24 7 22"/>
<path d="M14 14.66V17c0 .55.47.98.97 1.21C16.15 18.75 17 20.24 17 22"/>
<path d="M18 2H6v7a6 6 0 0 0 12 0V2Z"/>
</svg>
12 achievements
</button>
</div>
<div class="stats">
<div class="stat-card">
<img src="https://meez.design/web/bg-previews/243_c6rpndcf3k.jpg" alt="">
<div class="stat-num">154</div>
<div class="stat-label">drinks<br>consumed</div>
</div>
<div class="stat-card">
<img src="https://meez.design/web/bg-previews/244_ca7j1h1ztr.jpg" alt="">
<div class="stat-num">36</div>
<div class="stat-label">sandwiches<br>eaten</div>
</div>
<div class="stat-card">
<img src="https://meez.design/web/bg-previews/245_cyhp8jgs3b.jpg" alt="">
<div class="stat-num">12</div>
<div class="stat-label">cafes<br>visited</div>
</div>
</div>
<div class="favorite">
<img src="https://meez.design/web/bg-previews/246_d1scdtfz8a.jpg" alt="">
<div class="fav-text">
<div class="fav-eyebrow">Favorite</div>
<div class="fav-title">Latte</div>
<div class="fav-sub">Ordered 73 times</div>
</div>
<button class="glass circle" type="button" aria-label="Change favorite">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round">
<polyline points="16 3 21 3 21 8"/>
<line x1="4" y1="20" x2="21" y2="3"/>
<polyline points="21 16 21 21 16 21"/>
<line x1="15" y1="15" x2="21" y2="21"/>
<line x1="4" y1="4" x2="9" y2="9"/>
</svg>
</button>
</div>
<div class="next-card"></div>
</div>
</div>
<svg width="0" height="0" style="position:absolute" aria-hidden="true">
<defs id="liquid-defs"></defs>
</svg>
<script>
const SVG_NS = 'http://www.w3.org/2000/svg';
const XLINK_NS = 'http://www.w3.org/1999/xlink';
const defs = document.getElementById('liquid-defs');
const mapCache = {};
let uid = 0;
function smoothstep(a, b, t) {
t = Math.min(1, Math.max(0, (t - a) / (b - a)));
return t * t * (3 - 2 * t);
}
function sdRoundedRect(px, py, hw, hh, r) {
const qx = Math.abs(px) - hw + r;
const qy = Math.abs(py) - hh + r;
return Math.min(Math.max(qx, qy), 0) +
Math.hypot(Math.max(qx, 0), Math.max(qy, 0)) - r;
}
function buildMap(w, h, radius) {
const key = w + 'x' + h + 'r' + radius;
if (mapCache[key]) return mapCache[key];
const scale = 2;
const canvas = document.createElement('canvas');
canvas.width = w * scale;
canvas.height = h * scale;
const ctx = canvas.getContext('2d');
const img = ctx.createImageData(canvas.width, canvas.height);
const data = img.data;
const hw = canvas.width / 2, hh = canvas.height / 2, r = radius * scale;
const edgeBand = Math.min(16, Math.min(w, h) * 0.32) * scale;
let i = 0;
for (let y = 0; y < canvas.height; y++) {
for (let x = 0; x < canvas.width; x++) {
const px = x - hw, py = y - hh;
const d = sdRoundedRect(px, py, hw, hh, r);
const t = smoothstep(-edgeBand, 0, d);
const strength = t * t;
const len = Math.hypot(px, py) || 1;
data[i++] = 128 + (px / len) * strength * 127;
data[i++] = 128 + (py / len) * strength * 127;
data[i++] = 128;
data[i++] = 255;
}
}
ctx.putImageData(img, 0, 0);
mapCache[key] = canvas.toDataURL();
return mapCache[key];
}
function attachGlass(el) {
const rect = el.getBoundingClientRect();
const w = Math.round(rect.width), h = Math.round(rect.height);
if (!w || !h) return;
const cs = getComputedStyle(el);
let radius = parseFloat(cs.borderTopLeftRadius) || 0;
radius = Math.min(radius, Math.min(w, h) / 2);
const id = 'lg-' + (uid++);
const filter = document.createElementNS(SVG_NS, 'filter');
filter.setAttribute('id', id);
filter.setAttribute('x', '-20%');
filter.setAttribute('y', '-20%');
filter.setAttribute('width', '140%');
filter.setAttribute('height', '140%');
filter.setAttribute('color-interpolation-filters', 'sRGB');
const feImage = document.createElementNS(SVG_NS, 'feImage');
const url = buildMap(w, h, radius);
feImage.setAttribute('href', url);
feImage.setAttributeNS(XLINK_NS, 'href', url);
feImage.setAttribute('x', '0');
feImage.setAttribute('y', '0');
feImage.setAttribute('width', w);
feImage.setAttribute('height', h);
feImage.setAttribute('preserveAspectRatio', 'none');
feImage.setAttribute('result', 'map');
const feDisp = document.createElementNS(SVG_NS, 'feDisplacementMap');
feDisp.setAttribute('in', 'SourceGraphic');
feDisp.setAttribute('in2', 'map');
feDisp.setAttribute('scale', '26');
feDisp.setAttribute('xChannelSelector', 'R');
feDisp.setAttribute('yChannelSelector', 'G');
filter.appendChild(feImage);
filter.appendChild(feDisp);
defs.appendChild(filter);
const value = `url(#${id}) blur(0.3px) saturate(1.3)`;
el.style.backdropFilter = value;
el.style.webkitBackdropFilter = value;
const applied = getComputedStyle(el).backdropFilter ||
getComputedStyle(el).webkitBackdropFilter || '';
if (!applied.includes('url')) {
el.style.backdropFilter = 'blur(6px) saturate(1.4) brightness(1.08)';
el.style.webkitBackdropFilter = 'blur(6px) saturate(1.4) brightness(1.08)';
el.style.background = 'rgba(255,255,255,0.10)';
}
}
requestAnimationFrame(() => {
document.querySelectorAll('[data-liquid]').forEach(attachGlass);
});
</script>
</body>
</html>
Cross-BorderMobile App · free prompt · copy-paste
Create a mobile-first logistics company landing page for "CARGOX GROUP" displayed inside an iPhone 15 Pro mockup frame. Use React, TypeScript, Tailwind CSS, and the `motion` library (motion/react) for animations. Use Vite as the build tool.
## Structure
The page is wrapped in a realistic iPhone 15 Pro mockup (aspect ratio 393:852) with:
- Dark frame (#1a1a1a) with 54px border-radius, 8px border (#2a2a2a), inset highlight (#3a3a3a)
- Dynamic Island (126x36px, centered at top, black, 20px border-radius, z-200)
- Home indicator at bottom (134x5px, white 30% opacity)
- Scrollable content area inside with hidden scrollbar and `container-type: size`
The body background is #111111. The scrollable container uses `container-type: size; container-name: phone;` for container queries.
## Fonts
- Import **Barlow Condensed 800** from Google Fonts
- Body font: Helvetica, Arial, sans-serif
## SECTION 1: Hero (full viewport height of the container using `100cqb`)
**Background:** Autoplaying, muted, looping video:
```
https://meez.design/web/media/ext/597d53d9b15f2d2d.mp4
```
**Navbar (absolute, top):**
- Left: "CARGOX" (white) / "GROUP" (yellow #ffda00) in Barlow Condensed 800, uppercase, clamp(22px, 6vw, 32px)
- Right: Hamburger menu icon (lucide-react Menu/X, 28px, white)
- Both slide in from left/right with 0.6s expo-out ease
**Mobile menu overlay:** Fixed, z-99, background #6682c2, centered nav items (Services, Industries, Company) in white 24px. AnimatePresence with scale + opacity transitions. Items stagger in from bottom.
**Hero content (bottom of section, z-10, padding 0 20px 24px):**
- Large headline in Barlow Condensed 800, uppercase, clamp(48px, 14vw, 72px), line-height 0.82:
- "BEYOND" (white) - slides from x:-400
- "BORDERS" (yellow #ffda00, text-align right) - slides from x:+400
- "AND LIMITS" (white) - slides from x:-400
- Staggered delays: 0s, 0.13s, 0.26s. Duration 0.85s, expo-out [0.16, 1, 0.3, 1]
- CTA Button: Custom SVG pill shape (fill #ffda00) with a circular end section containing a rotating arrow (white stroke, rotates from -135deg to -90deg on hover). Text "Get in touch" centered in the non-circle area. Font: Helvetica 20px, color #002a35. Hover: scale 1.08, y:-2. Tap: scale 0.97.
**Show hero content only after video `onCanPlay` fires** (fade in with AnimatePresence).
## SECTION 2: Info Card
**Background:** `linear-gradient(180deg, #C8C7B3 0%, #F0B172 50%, #EA7C58 100%)`
**Padding:** clamp(60px, 12vh, 120px) 20px
**Tagline** (scroll-triggered, slides from left):
- "LOGISTICS" in Barlow Condensed 800, white, clamp(44px, 13vw, 64px)
- "shaped by scale" / "powered by precision" in Helvetica, clamp(18px, 5vw, 26px), color #1a1a1a
**World Map:**
- Background map image: `https://meez.design/web/media/ext/f9ce5f887859208d.png`
- Aspect ratio 435/340, extends 20px beyond container edges
- SVG overlay (viewBox 0 0 299.037 142.509) at left:10%, top:18%, width:80% with 4 curved route paths in yellow (#FFDA00, 2.5 stroke):
```
M128.161 74.6764C79.9989 130.001 71.9994 46.0005 20.9815 111.737
M216.999 9.99985C260.499 12.4998 222.499 71.9998 291.999 58.9998
M130.102 70.9998C144.499 -32.0002 183.852 70.2739 219.999 3.99985
M14.4999 16.9998C111 20.9998 -53.0003 73.4998 21.4999 107
```
- Route lines animate with `pathLength` from 0 to 1, staggered
- Animated yellow arrow polygons (points="0,-4 8,0 0,4") using SVG `<animateMotion>` along each path, rotating automatically
- 5 stop dots at coordinates: [9.519,15.519], [289.519,59.518], [220.519,9.519], [125.518,78.519], [19.519,104.519] - each is a yellow circle r=9.519 with dark center r=3.389 (#002A35). They pop in with scale animation.
- 3 floating transport icons (white circle bg, 16% width, rounded-full, box-shadow):
- Ship: `https://meez.design/web/media/ext/0d3cbcc042a65ea1.png` at left:26%, top:28.9%
- Car: `https://meez.design/web/media/ext/457552dcad941164.png` at left:70.8%, top:15.6%, rotate(9.73deg)
- Plane: `https://meez.design/web/media/ext/c4fe9416e8e5502f.png` at left:55.2%, top:52.1%, rotate(180deg) scaleY(-1)
- Icons pop in (scale 0.5 -> 1), then continuously float up/down with infinite y animation
**Stats** (scroll-triggered, slide in from opposite sides):
- "3M+" white Barlow Condensed 800, clamp(50px, 14vw, 72px) + "tons of cargo / delivered / without delays" in #1a1a1a, clamp(14px, 3.8vw, 18px)
- "13+" same styling, indented left clamp(40px, 12vw, 90px) + "years of trusted / and reliable / operations"
## SECTION 3: Contact Us
**Background:** #0a1f2b
**Padding:** clamp(48px, 10vh, 96px) 20px clamp(32px, 6vh, 64px)
**Heading** (scroll-triggered fade+slide from bottom):
- "CONTACT " (white) + "US" (yellow #ffda00), Barlow Condensed 800, clamp(44px, 13vw, 64px)
- Subtitle: "Complete the form and our team will contact you soon." in #b0b8bc, clamp(14px, 3.8vw, 18px)
**Form fields** (scroll-triggered, stagger from bottom):
- 3 inputs (First Name, Last Name, E-mail): pill-shaped (40px radius), bg rgba(255,255,255,0.08), white text, clamp(14px, 3.5vw, 16px). On focus: bg brightens to 0.14, slight scale 1.01.
- "Send" button: pill, bg #FFDA00, color #0a1f2b, font-weight 700, clamp(16px, 4vw, 20px). Hover: scale 1.03, y:-2, bg #ffe84d. Tap: scale 0.97.
**Footer info:**
- Email: info@cargox-group.com
- Phone: +380 44 234-7890
- Color #b0b8bc, hover slides right 4px and turns white
**Social icons** (3 white circles 44x44, hover: scale 1.15, y:-3):
- Instagram, LinkedIn, Facebook (inline SVG icons, fill #0a1f2b)
**Scroll-to-top button** (right side): white 44x44 circle with up-arrow SVG, same hover animation.
**Copyright:** "(c) 2025. All rights reserved." in #6b7a80, clamp(12px, 3.2vw, 14px)
## Animation System
- Use `motion/react` (NOT framer-motion)
- Easing curves: EXPO_OUT = [0.16, 1, 0.3, 1], EASE_OUT = [0.25, 0.46, 0.45, 0.94]
- Scroll-triggered reveals using `useInView` from motion/react with `once: true` and margin: '0px 0px -40px 0px' or '0px 0px -60px 0px'
- All scroll animations fire only once
- Transport icons have infinite floating y-axis animation with varying durations (2.5-3.3s)
- Mobile menu uses AnimatePresence for enter/exit
## Dependencies
```json
{
"motion": "^12.40.0",
"lucide-react": "^0.344.0",
"react": "^18.3.1",
"react-dom": "^18.3.1"
}
```
Travel JournalMobile App · free prompt · copy-paste
Create a mobile travel app UI mockup displayed inside a realistic iPhone-style phone frame, centered on a white webpage. Tech stack: React + TypeScript, Tailwind CSS, Lucide React icons, Vite. Font: Google Fonts "Inter" (weights 300-900).
---
**PAGE WRAPPER:**
Full viewport (`h-screen w-screen`), solid white background, flexbox centered, overflow hidden.
---
**PHONE FRAME:**
- Dimensions: 375px x 780px
- Background: `#0a0a0c`
- Border-radius: 52px
- Overflow: hidden
- Box-shadow (layered bezel effect):
```
inset 0 0 0 2px rgba(255, 255, 255, 0.08),
0 0 0 1px rgba(0, 0, 0, 0.6),
0 0 0 10px #1a1a1e,
0 0 0 11px rgba(255, 255, 255, 0.06),
0 0 60px rgba(0, 0, 0, 0.5)
```
**Dynamic Island notch:** Absolute, top-0, centered horizontally, 120px wide, 28px tall, solid black, `rounded-b-2xl`, z-50.
---
**HEADER (absolute, top):**
- Z-index: 30
- `backdrop-filter: blur(12px)` with `background-color: rgba(10, 10, 12, 0.75)`
- Padding: `px-6 pt-14 pb-4`
- Left side: Button with "Asia" text (text-lg, font-semibold, white) + ChevronDown icon (size 18, text-white/70)
- Right side: Calendar icon button (size 22, text-white/70)
---
**SCROLLABLE CONTENT:**
- `overflow-y-auto` with hidden scrollbar
- Padding: `px-6 pt-28 pb-24`
- Vertical spacing: `space-y-4` (16px gap)
---
**DESTINATION CARDS (4 total):**
Each card:
- Full width, height 200px, rounded-2xl, overflow hidden, position relative
- Full-bleed background image (`absolute inset-0, object-cover`)
- Gradient overlay: `bg-gradient-to-t from-black/20 to-transparent`
- **Top-left:** liquid-glass pill (`rounded-full px-3 py-1`) with "{N} moments" text (text-white/90, text-xs, font-normal)
- **Top-right:** liquid-glass circle (w-8 h-8, rounded-full) with MoreHorizontal icon (size 16, text-white/80)
- **Bottom:** Destination name in 96px bold font, centered horizontally, clipped in an 80px tall container with `overflow: hidden`. Color: `rgba(255, 255, 255, 0.55)`, tracking-tight, leading-none, margin-top 2px
**Card data with exact image URLs:**
1. **Tokyo** - 23 moments
`https://meez.design/web/media/ext/bf4221c9788892cc.webp`
2. **Seoul** - 18 moments
`https://meez.design/web/media/ext/266bc9680f31a324.webp`
3. **Bali** - 29 moments
`https://meez.design/web/media/ext/4111355756d31bad.webp`
4. **Rome** - 15 moments
`https://meez.design/web/media/ext/17f0095a938bcda0.webp`
---
**FLOATING BOTTOM NAV BAR:**
- Absolute, bottom-6, centered horizontally, z-30
- liquid-glass pill (`rounded-full, flex, gap-6, px-6 py-2`)
- 3 nav items (flex-col, items-center, gap-0.5):
- "Feed" + Home icon (size 20) -- inactive (`text-white/50`)
- "Account" + User icon (size 20) -- inactive (`text-white/50`)
- "Trips" + FileText icon (size 20) -- active (`text-white`)
- Label style: `text-[10px] font-medium`
---
**LIQUID-GLASS CSS:**
```css
.liquid-glass {
background: rgba(255, 255, 255, 0.01);
background-blend-mode: luminosity;
backdrop-filter: blur(4px);
-webkit-backdrop-filter: blur(4px);
border: none;
box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.1);
position: relative;
overflow: hidden;
}
.liquid-glass::before {
content: '';
position: absolute;
inset: 0;
border-radius: inherit;
padding: 1.4px;
background: linear-gradient(180deg,
rgba(255,255,255,0.45) 0%, rgba(255,255,255,0.15) 20%,
rgba(255,255,255,0) 40%, rgba(255,255,255,0) 60%,
rgba(255,255,255,0.15) 80%, rgba(255,255,255,0.45) 100%);
-webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
-webkit-mask-composite: xor;
mask-composite: exclude;
pointer-events: none;
}
```
---
**STAGGERED ENTRANCE ANIMATION:**
Each card starts at `opacity: 0` and `transform: translateY(24px)`. On component mount, a `setTimeout` triggers a state change that transitions to `opacity: 1` and `translateY(0)`. Transition: `transition-all duration-700 ease-out`. Stagger delay: first card 150ms, each subsequent +120ms (150, 270, 390, 510ms). Implemented with React `useState` + `useEffect`.
---
**SCROLLBAR HIDING:**
```css
.scrollbar-hide::-webkit-scrollbar { display: none; }
.scrollbar-hide { -ms-overflow-style: none; scrollbar-width: none; }
```
---
**GLOBAL:**
```css
* { font-family: 'Inter', sans-serif; }
```
Load in HTML head:
```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=Inter:wght@300;400;500;600;700;800;900&display=swap" rel="stylesheet" />
```
Wellness CompanionMobile App · free prompt · copy-paste
Build a mobile wellness quiz screen inside a realistic phone frame mockup, centered on a white page. Use React with Tailwind CSS and Lucide React icons. **Phone Frame:** - Dimensions: 375px wide x 780px tall - Border radius: 52px - Background color: `#8a9aaa` - Box shadow to simulate a real phone bezel: `inset 0 0 0 2px rgba(255,255,255,0.08), 0 0 0 1px rgba(0,0,0,0.6), 0 0 0 10px #1a1a1e, 0 0 0 11px rgba(255,255,255,0.06), 0 0 60px rgba(0,0,0,0.5)` - A black pill-shaped Dynamic Island at the top center: 120px wide, 32px tall, fully rounded, z-index 50 **Background:** - Full-bleed background image using this exact URL: `https://meez.design/web/media/ext/6034ecdbf191b497.webp` - Apply `blur(12px)` and `scale(1.1)` to the background image - Semi-transparent overlay: `#8a9aaa` at 30% opacity on top **Font:** - Load "Helvetica Now Var" from: `(self-host this face — no free CDN; substitute a close match if unavailable)` - Fallback stack: 'Helvetica Neue', Helvetica, Arial, sans-serif - Apply globally to all elements **Content Layout (flex column, padding: 56px top, 24px sides, 24px bottom):** 1. **Header Badge** (top, with 40px margin-bottom): - Liquid glass pill with Timer icon (12px, white/80) + text "Vitaforge Daily" (12px, white/90, medium weight) - Padding: 10px vertical, 12px horizontal 2. **Title Section** (32px margin-bottom): - Subtitle: "Choose all that apply" - white/60, 14px - Heading: "What aspects of your wellness would you like to boost?" - white, 28px, normal weight, tight leading and tracking 3. **Selection Grid** (2 columns, 12px gap, pushes to fill available space): - 4 cards: "Sleep quality", "Stress", "Weight", "Skin" - Each card: rounded-[32px], 100px height, padding 16px - Shows a number label (01, 02, etc.) in white/50, 11px, medium weight - Option text in white, 16px, medium weight - "Stress" (id:2) and "Skin" (id:4) are pre-selected - Cards are toggleable on click 4. **Voice Button** (centered, 24px vertical margin): - Yellow/gold radial glow behind: `radial-gradient(ellipse at center, rgba(220,200,80,0.5) 0%, rgba(180,160,40,0.2) 40%, transparent 70%)` - 64px circular liquid glass button with a waveform SVG icon (white strokes, strokeWidth 2, strokeLinecap round) showing 5 vertical bars of varying heights - "voice" label below in white/70, 12px 5. **Slide-to-Confirm Button** (bottom, inside 24px horizontal padding): - Full-width rounded-full track, 56px tall, liquid glass style - White circular thumb (44px) on the left with ArrowRight icon (gray-800) - "Done" text centered in white/60, 14px, medium weight - 3 ChevronRight icons on the right (14px) at white/40, white/50, white/60 opacity - Draggable thumb with pointer events: snaps back if not dragged past 85%, snaps to end if past 85% **Liquid Glass Effect (CSS classes):** `.liquid-glass`: - Background: `rgba(255,255,255,0.01)` with luminosity blend mode - Backdrop filter: `blur(4px)` - Box shadow: `inset 0 1px 1px rgba(255,255,255,0.1)` - `::before` pseudo-element for gradient border: `linear-gradient(180deg, rgba(255,255,255,0.45) 0%, rgba(255,255,255,0.15) 20%, rgba(255,255,255,0) 40%, rgba(255,255,255,0) 60%, rgba(255,255,255,0.15) 80%, rgba(255,255,255,0.45) 100%)` with 1.4px padding and mask-composite exclude technique `.liquid-glass-selected`: - Same as above but background: `rgba(255,255,255,0.12)`, blur 8px, stronger box shadow (`inset 0 1px 2px rgba(255,255,255,0.2)`), and brighter gradient border (0.6 alpha at edges, 0.25 at 20%/80%) **Animations:** - Staggered fade-up animation on all elements - Keyframes: from `opacity:0, translateY(16px)` to `opacity:1, translateY(0)` - Duration: 0.5s, easing: `cubic-bezier(0.22, 1, 0.36, 1)`, fill: forwards - Delays: header 0.1s, title 0.25s, grid cards 0.4s/0.48s/0.56s/0.64s, voice 0.7s, slider 0.85s **Dependencies:** - React 18, Tailwind CSS 3, Lucide React, Vite, TypeScript
StillmindHero Section · free prompt · copy-paste
Create a fullscreen cinematic hero section for a mindfulness/focus app called "Lumora" using React, Tailwind CSS, and Lucide React icons.
## Font
Use **Instrument Serif** (Google Fonts, italic for the logo). Load it in index.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=Instrument+Serif:ital@0;1&display=swap" rel="stylesheet">
```
Set `font-family: 'Instrument Serif', serif` on html/body. Use `system-ui, sans-serif` inline for body text (subtext, buttons, stats, video labels).
---
## Background Video Layer
Stack 4 fullscreen looping videos absolutely positioned. Only the active one has `opacity-100`; others have `opacity-0`. Transition opacity over 1000ms ease-in-out. Videos autoPlay, muted, loop, playsInline.
**Video URLs (in order):**
1. `https://meez.design/web/bg-previews/299_trainmove1.mp4`
2. `https://meez.design/web/media/ext/37c6543a9e3b1bac.mp4`
3. `https://meez.design/web/media/ext/a14ef13297c1a6d7.mp4`
4. `https://meez.design/web/media/ext/680d661e1cefa0b3.mp4`
**Labels:** Golden Hour, Still Water, Deep Woods, Quiet Dawn
---
## Transparent PNG Overlay (z-index 1)
Place this image over the videos as an absolutely positioned overlay covering the full viewport:
```
https://meez.design/web/media/ext/979624a2a689c9e3.png
```
Apply a continuous "train-bob" animation: translateY oscillates between 0 and -6px over 3s ease-in-out infinite, with a constant scale(1.03) to prevent edges from showing during the motion.
---
## Liquid Glass Effect (CSS class `.liquid-glass`)
```css
.liquid-glass {
background: rgba(255, 255, 255, 0.01);
background-blend-mode: luminosity;
backdrop-filter: blur(4px);
-webkit-backdrop-filter: blur(4px);
border: none;
box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.1);
position: relative;
overflow: hidden;
}
```
With a `::before` pseudo-element for a subtle gradient border:
```css
.liquid-glass::before {
content: '';
position: absolute;
inset: 0;
border-radius: inherit;
padding: 1.4px;
background: linear-gradient(180deg,
rgba(255,255,255,0.45) 0%, rgba(255,255,255,0.15) 20%,
rgba(255,255,255,0) 40%, rgba(255,255,255,0) 60%,
rgba(255,255,255,0.15) 80%, rgba(255,255,255,0.45) 100%);
-webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
-webkit-mask-composite: xor;
mask-composite: exclude;
pointer-events: none;
}
```
---
## Content Layer (z-index 2) - Flex Column Full Height
### Navigation (top)
- Left: "Lumora" in white, italic, text-xl (sm:text-2xl)
- Right (desktop md+): A `.liquid-glass` pill containing nav links ("How It Works", "Features", "Pricing", "Community") in white/90 text-sm with hover to white, plus a solid white "Get Started" button at the end
- Right (mobile): A `.liquid-glass` rounded hamburger button using Lucide `Menu`/`X` icons with a crossfade rotation animation (300ms). The Menu icon rotates out 90deg and scales to 75%; the X icon rotates in from -90deg
### Mobile Menu Overlay (fixed, z-50)
- Backdrop: `bg-black/60 backdrop-blur-sm`
- Centered fullscreen panel with staggered entrance (each link delays 50ms more: 100ms, 150ms, 200ms, 250ms, 300ms)
- Links: white text-3xl, translate-y-4 to 0 on open
- "Get Started" button at bottom with scale animation
- Cubic-bezier easing: `cubic-bezier(0.4,0,0.2,1)`, duration 500ms
### Hero Content (centered, below nav)
- **Badge**: `.liquid-glass` rounded-full pill with text "Over 10,000 minds already finding their clarity"
- **Heading**: "Clarity in an Endlessly / Noisy Universe" (line break after "Endlessly"). Sizes: text-4xl / sm:text-5xl / md:text-7xl / lg:text-[5.5rem], leading-[1.1], max-w-4xl
- **Subtext**: "Rise above the chaos of pings, infinite scrolling, and relentless demands. Discover how to protect your presence and create with intention." max-w-xl, leading-relaxed
- **Email Input**: `.liquid-glass` rounded-full pill containing a text input ("Your Best Email") and a solid white "Get Early Access" button. Max-width 320px on mobile, sm:max-w-sm
- **Video Switcher**: Row of 4 text buttons with labels. Active button has solid color + bottom border. Inactive buttons are 50% opacity with transparent border, hover to 80%
### Dark Mode for "Deep Woods" (3rd video, index 2)
When the 3rd video is active, all hero content (badge, heading, subtext, input, video switcher) transitions to dark color `#182C41` with 700ms duration. The navbar and bottom stats remain white always.
### Bottom Stats (pushed to bottom via flex-1 spacer)
- Row of stats separated by `|` dividers (hidden on mobile): "60+ Deep Sessions", "12,000+ Creators", "4.8 User Satisfaction", "Intentional-First Design"
- text-white/70, text-xs sm:text-sm, system-ui font
---
## Video Switching Logic
- Track `activeVideo` state (default 0) and `isTransitioning` boolean
- On click, if not already active and not mid-transition, set new active video and start a 1000ms cooldown (matching the CSS crossfade duration)
- During cooldown, ignore additional clicks
---
## Responsive Behavior
- Mobile: Smaller text sizes, tighter padding, hamburger nav, stats wrap naturally
- Tablet/Desktop: Larger heading, more padding, inline nav pill, stats with pipe separators
---
## Section Container
```html
<section className="relative w-full h-screen overflow-hidden bg-black">
```
Black background prevents flash before videos load. Everything is a single viewport-height section with no scroll.
---
That's the complete specification. The entire app lives in a single `App.tsx` component with the CSS in `index.css`.
Wellbeing OSHero Section · free prompt · copy-paste
Create a fullscreen hero section for a SaaS product called "flowpath" using React, Tailwind CSS, and Lucide React icons. The section should be a single `<section>` filling the viewport (`h-screen w-full overflow-hidden`).
**Background:**
- A looping, muted, autoplaying `<video>` element covering the full section with `object-cover`. Video URL: `https://meez.design/web/media/ext/00e8673d6c0cdef2.mp4`
- A subtle dark overlay on top of the video: `bg-black/10`
**Font:**
- Use "Helvetica Now Text" as the primary font, loaded from: `(self-host this face — no free CDN; substitute a close match if unavailable)`
- Fallback stack: `-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif`
- Applied globally via `* { font-family: ... }` in CSS
**Navigation (top, not fixed/sticky):**
- Full-width with responsive horizontal padding (`px-5 sm:px-6 md:px-12 lg:px-16`) and vertical padding (`py-4 sm:py-5`)
- Logo: An inline SVG diamond shape (28x28) with two overlapping diamond paths at 0.9 and 0.5 opacity, followed by the text "flowpath" in white, `text-lg sm:text-xl font-medium tracking-tight`
- Desktop nav (hidden on mobile): horizontal flex with items "Product" (dropdown: Connections, Workflows, Insights), "Solutions" (dropdown: Guides, Use cases, API reference), "About" (dropdown: Our story, Open roles, Reach us), "Plans" (no dropdown)
- Nav buttons: `text-white/90 hover:text-white text-sm font-medium`, with a `ChevronDown` icon (3.5x3.5) that rotates 180 degrees when dropdown is open
- Dropdowns open on hover (onMouseEnter/onMouseLeave), positioned `absolute top-full left-0`, using a custom `.liquid-glass` class, `rounded-xl py-3 px-2 min-w-[160px] shadow-xl`. Dropdown items: `text-white/80 hover:text-white text-sm rounded-lg hover:bg-white/5`
- Desktop CTA: "Log in" link (`text-white/90 hover:text-white text-sm font-medium`) and "Try it free" button using `.liquid-glass rounded-full px-5 py-2 text-white text-sm font-medium`
- Mobile menu button: animated toggle between `Menu` and `X` icons with rotation/scale/opacity transitions (duration-300)
- Mobile menu: absolutely positioned below nav, slides in with `cubic-bezier(0.16,1,0.3,1)` easing over 400ms. Background: `bg-[#2C221C]/95 backdrop-blur-xl rounded-2xl p-6`. Shows all nav items with sub-items indented, plus a bordered footer with Log in and Try it free
**Hero Content (below nav, top-aligned, not vertically centered):**
- Container: `flex-1 flex items-start justify-center` with `pt-16 sm:pt-20 md:pt-24` for spacing from the nav
- Text wrapper: `text-center max-w-3xl`
- Heading `<h1>`: `text-white text-3xl sm:text-4xl md:text-5xl lg:text-6xl xl:text-7xl leading-[1.05] tracking-[-0.02em]`
- Content (with line breaks):
```
Bridge the
gaps. <span class="text-white/60">Ditch the</span>
<span class="text-white/60">grindwork.</span>
```
- Subheading `<p>`: `text-white/80 text-sm sm:text-base md:text-lg leading-relaxed max-w-md mx-auto mt-6 sm:mt-8`
- Text: "Flowpath unifies your complete wellness tools, so your crew spends less energy plugging gaps and more on real progress."
- Two CTA buttons side by side (`flex flex-wrap items-center justify-center gap-3 sm:gap-4 mt-6 sm:mt-8`):
1. "Begin your journey" - solid white button: `px-5 sm:px-6 py-2.5 sm:py-3 bg-white text-gray-900 text-sm font-semibold rounded-full hover:bg-white/90`
2. "See it live" - glass button: `px-5 sm:px-6 py-2.5 sm:py-3 liquid-glass rounded-full text-white text-sm font-semibold hover:bg-white/10`
**Custom CSS (`.liquid-glass` class):**
```css
.liquid-glass {
background: rgba(255, 255, 255, 0.01);
background-blend-mode: luminosity;
backdrop-filter: blur(4px);
-webkit-backdrop-filter: blur(4px);
border: none;
box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.1);
position: relative;
overflow: hidden;
}
.liquid-glass::before {
content: '';
position: absolute;
inset: 0;
border-radius: inherit;
padding: 1.4px;
background: linear-gradient(180deg,
rgba(255,255,255,0.45) 0%, rgba(255,255,255,0.15) 20%,
rgba(255,255,255,0) 40%, rgba(255,255,255,0) 60%,
rgba(255,255,255,0.15) 80%, rgba(255,255,255,0.45) 100%);
-webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
-webkit-mask-composite: xor;
mask-composite: exclude;
pointer-events: none;
}
```
**Additional CSS utilities:**
```css
@keyframes dropdown-in {
from { opacity: 0; transform: translateY(-4px) scale(0.96); }
to { opacity: 1; transform: translateY(0) scale(1); }
}
.animate-dropdown { animation: dropdown-in 0.2s ease-out; }
.duration-400 { transition-duration: 400ms; }
```
**Important notes:**
- Dropdown elements need `!absolute` (Tailwind important modifier) to override the `position: relative` from `.liquid-glass`
- The entire section is fully responsive with breakpoints at sm, md, lg, xl
- No external UI libraries beyond Lucide React for icons
- Tailwind config is default with no extensions
Subscription AgencyHero Section · free prompt · copy-paste
**Create a single-page landing hero section for a creative agency called "Alwayzz" with a React + Vite + Tailwind CSS setup. Use custom CSS (not Tailwind utilities) for all styling. The design should be minimal, clean, black-and-white, with tight negative letter-spacing throughout.**
---
### Fonts (loaded via Google Fonts in index.html)
```
Inter: weights 400, 500, 600, 700
Source Serif 4: weights 400, 600 (both normal and italic)
```
Preconnect to `fonts.googleapis.com` and `fonts.gstatic.com`.
---
### CSS Variables
```css
--bg: #ffffff;
--text: #0a0a0a;
--muted: #6b6b6b;
--button-bg: #0a0a0a;
--button-text: #ffffff;
--border-soft: rgba(0, 0, 0, 0.08);
--green: #17c964;
```
---
### Components
**1. Navbar (fixed top, z-index 100)**
- Padding: `19px 36px`, max-width `1200px` centered.
- Left: Logo text "Alwayzz" in `Source Serif 4`, 30px, weight 600, **italic**, letter-spacing `-0.08em`, with a registered trademark symbol in Inter 14px weight 600.
- Right: "Menu" pill button (black bg, white text, rounded-full, 14px weight 500, Inter) with a `ChevronUp` icon (16px) from lucide-react.
- Full-screen drawer overlay on click: white bg, fade transition 0.4s. Nav links centered vertically at 48px weight 500, letter-spacing `-0.04em`. Links: Projects, Plans, Team, FAQs, Get in Touch. Footer with copyright.
**2. Hero Section**
- Min-height: `850px`, padding: `160px 36px`, centered flex column.
- **Background image** (via `::before` pseudo-element, covers full section):
```
https://meez.design/web/media/ext/883823797a81fd1e.webp
```
Background-size: cover, background-position: center.
- **Curved line animations** (decorative):
- 20 lines on left side, 20 on right side, absolutely positioned.
- Each line is a tall rectangle with one-sided border-radius (80%) and `2.5px solid #FCFAF8` border.
- Left lines: no left border, radius on right. Right lines: no right border, radius on left.
- Staggered `animationDelay: i * 0.25s`, widths from 60px increasing by 10px per line.
- Animation: `line-pulse` 5s ease-in-out infinite (fade in to 0.9 opacity, then back to 0 with slight scale).
- On mobile (<810px): hide side lines, show top horizontal lines instead (same animation, horizontal orientation with bottom border-radius).
- **Ticker row** (max-width 500px, height 36px):
- Horizontal marquee scrolling left over 30s, linear, infinite.
- Items: "Brand Identity", "App Development", "Visual Design", "Creative Video", "Iconography"
- Each item: 13px, weight 500, color `var(--muted)`, padding `6px 14px`, rounded-full, background `rgb(251, 251, 251)`.
- Marquee has edge fade mask: `linear-gradient(90deg, transparent 0%, black 12%, black 88%, transparent 100%)`.
- 4x duplicated rows for seamless loop.
- **Title**:
```
Premium creative <span class="serif italic">alwayzz</span><sup style registered mark> on demand.
```
- Max-width: 550px, font-size: 82px, line-height: 1.03, letter-spacing: `-0.07em`, weight 600, centered.
- The word "alwayzz" uses `Source Serif 4`, italic, weight 600, letter-spacing `-0.08em`.
- The registered mark: Inter, 24px, weight 600, vertical-align super.
- **Subtitle**:
```
A flexible design partnership for founders, brands, and agencies who want top craft delivered on their timeline.
```
- Max-width: 476px, 17px, line-height 1.45, weight 400, color `var(--muted)`, centered.
- **CTA row** (flex, gap 16px, centered):
- **Primary button** "View Plans": height 56px, padding `18px 30px`, rounded-full, black bg, white text, 15px weight 600 Inter. Hover: translateY(-1px) + box-shadow `0 4px 20px rgba(0,0,0,0.12)`.
- **Book button** "Chat for 15 minutes": white bg, `4px solid rgb(248,248,248)` border, rounded-full, padding `8px 24px 8px 8px`. Contains:
- Avatar image (40px circle): `https://meez.design/web/media/ext/6be23d90a43b4ca1.png`
- Text stack: primary "Chat for 15 minutes" (14px, weight 600, black) and secondary "Pick a slot" (12px, weight 500, `rgb(152,152,152)`) with a green dot (`rgb(29, 204, 93)`, 8px circle).
- **Progressive blur** at bottom: absolute, full width, height 178px, gradient from transparent to `rgba(255,255,255,0.4)` at 40% to solid white.
**3. TrustedBy Section**
- Padding: 36px, max-width 1200px centered.
- Left: label "Partnered with top-tier companies globally" (max-width 163px, 14px, weight 500, muted color).
- Right: horizontal marquee (30s) of company names styled as text logos (16px, weight 600, black, each with distinct font-family):
- Airbnb (Cedarville Cursive, 700), Shopify (system-ui, 800), Notion (Georgia, 500), Linear (Inter, 600), Webflow (Inter, 700), Figma (system-ui, 600), Slack (Georgia, 700), Stripe (system-ui, 800), Vercel (Inter, 600), Framer (Source Serif 4, 600).
- Same edge-fade marquee mask as ticker.
---
### Responsive Breakpoints
- **< 1200px**: Hero padding `140px 32px`, title clamp(60px, 8vw, 72px), navbar padding 32px, drawer links 40px.
- **< 810px**: Hero min-height 760px, padding `120px 24px 96px`. Background image rotated 90deg to fill portrait viewport. Side curved lines hidden, top horizontal lines shown. Title clamp(44px, 13vw, 52px). CTA buttons stack vertically full-width (max 320px). Trusted section stacks vertically. Drawer links 32px. Navbar padding 20px.
---
### Key Animation Keyframes
```css
@keyframes marquee-left {
from { transform: translateX(0); }
to { transform: translateX(-50%); }
}
@keyframes line-pulse {
0% { opacity: 0; transform: scale(1); }
15% { opacity: 0.9; }
70% { opacity: 0.4; }
100% { opacity: 0; transform: scale(0.85); }
}
```
---
### CloudFront Video/Image URL
The hero background image URL (exact):
```
https://meez.design/web/media/ext/883823797a81fd1e.webp
```
The book button avatar URL (exact):
```
https://meez.design/web/media/ext/6be23d90a43b4ca1.png
```
]
Skybridge 404Landing Page · free prompt · copy-paste
Create a single-page, full-viewport 404 error screen in React + Vite + Tailwind CSS v4. Match this composition precisely.
PAGE / CANVAS
- The page must occupy the full viewport: `min-height: 100svh`.
- Use a black fallback background.
- Do not add page scrolling horizontally. Allow vertical scrolling only if a very short viewport requires it.
- The page should be responsive while preserving the desktop composition at larger sizes.
- Use no cards, buttons, nav links, gradients outside the 404 numerals, texture, glass, dark overlay, blur overlay, or any additional UI.
BACKGROUND VIDEO
- Add this exact MP4 as the full-page background:
`https://meez.design/web/media/prompt-media/v/dfa127b9f2c26b08.mp4`
- Use a semantic `<video>` element, placed as the first child inside the page.
- Required video attributes:
- `autoPlay`
- `loop`
- `muted`
- `playsInline`
- `aria-hidden="true"`
- The video must be absolutely positioned at `inset: 0`, with `width: 100%`, `height: 100%`, and `object-fit: cover`.
- Video opacity must be exactly `1` / `100%`.
- Do not apply any dark, black, colored, translucent, gradient, blur, blend-mode, or tint overlay over the video.
- The logo and 404 content must appear above the video with a higher z-index.
- Do not add animated CSS effects to the video; let the video’s own motion be the only background animation.
FONT
- Use the exact imported Figma font face:
- Family / CSS family: `"Geist Mono:SemiBold"`
- Weight: `600`
- Style: `normal`
- Format: `woff2`
- Source URL: `https://meez.design/web/media/ext/e10735933456b0d4.webp`
- Declare it using:
```css
@font-face {
font-family: "Geist Mono:SemiBold";
font-style: normal;
font-weight: 600;
font-display: swap;
src: url("https://meez.design/web/media/ext/e10735933456b0d4.webp") format("woff2");
}
Use this font for the large “404” and the message text.
Preserve its compact mono character and semibold weight.
HEADER LOGO
```
Position the logo centered horizontally at the top of the page.
On desktop:
top: 80px
left: 50%
transform: translateX(-50%)
Total logo frame size: 233px × 40px.
Use white fill only.
The mark is a geometric pixel-like symbol, 54px × 40px, built from these exact SVG paths:
<svg viewBox="0 0 54 40" fill="none">
<path d="M38 0H26V12H38V0Z" fill="white"/>
<path d="M54 12H38V28H54V12Z" fill="white"/>
<path d="M38 28H26V40H38V28Z" fill="white"/>
<path d="M26 12H16V22H26V12Z" fill="white"/>
<path d="M16 22H8V30H16V22Z" fill="white"/>
<path d="M16 2H6V12H16V2Z" fill="white"/>
<path d="M6 12H0V18H6V12Z" fill="white"/>
</svg>
Position the logotype 14px to the right of the mark.
The logotype SVG should use viewBox="0 0 164.311 100", white fill, and this exact path:
<path d="M122.498 37.4573H131.321L139.533 51.6222L147.772 37.4573H156.595V56.0604H152.449V37.6433L141.739 56.0604H137.354L126.617 37.6433V56.0604H122.498V37.4573ZM95.921 48.8317C92.785 48.8317 90.261 46.307 90.261 43.1445C90.261 40.0086 92.785 37.4573 95.921 37.4573H119.972V41.6031H95.921C95.071 41.6031 94.38 42.2941 94.38 43.1445C94.38 44.0215 95.071 44.7125 95.921 44.7125H114.285C117.421 44.7125 119.972 47.2372 119.972 50.3997C119.972 53.5357 117.421 56.0604 114.285 56.0604H90.261V51.9411H114.285C115.136 51.9411 115.827 51.2501 115.827 50.3997C115.827 49.5227 115.136 48.8317 114.285 48.8317H95.921ZM80.857 37.4573C84.843 37.4573 88.086 40.6995 88.086 44.7125C88.086 48.6989 84.843 51.9411 80.857 51.9411H62.254V56.0604H58.135V37.4573H80.857ZM80.83 47.7953C82.558 47.7953 83.94 46.4133 83.94 44.7125C83.94 42.985 82.558 41.6031 80.83 41.6031H62.254V47.7953H80.83ZM35.975 41.6031C33.105 41.6031 30.7927 43.9152 30.7927 46.7588C30.7927 49.629 33.105 51.9411 35.975 51.9411H51.336V48.6989H35.576V44.5796H55.482V56.0604H35.975C30.8192 56.0604 26.6734 51.9145 26.6734 46.7588C26.6734 41.6297 30.8192 37.4573 35.975 37.4573H55.482V41.6031H35.975ZM0 56.0604V37.4573H4.1192V51.9411H24.9281V56.0604H0ZM164.311 36.4177C164.311 37.7529 163.228 38.8354 161.893 38.8354C160.558 38.8354 159.475 37.7529 159.475 36.4177C159.475 35.0824 160.558 34 161.893 34C163.228 34 164.311 35.0824 164.311 36.4177Z" fill="white"/>
Do not animate the logo.
CENTERED 404 CONTENT
Position the main content group in the exact center of the viewport:
position: absolute
top: 50%
left: 50%
transform: translate(-50%, -50%)
Desktop content width: 483px.
The group is a vertically centered flex column with align-items: center, text-align: center, and a 44px gap between its three elements.
It contains exactly:
The large 404 heading
A thin horizontal divider
The error message
404 HEADING
Heading text: 404
Use the exact Geist Mono SemiBold font face.
Desktop font size: 295.751px.
Font weight: 600.
Line height: 1.1.
Letter spacing: -24.6459px.
Center aligned.
The heading needs enough bottom padding / room for the font baseline so the lower portions of the numerals are never cropped.
Do not constrain it with a clipping container.
Apply a text-only gradient:
linear-gradient(
247.3282658084845deg,
rgb(255, 255, 255) 2.5334%,
rgba(255, 255, 255, 0.4) 93.612%
)
Use background-clip: text and -webkit-background-clip: text, with transparent text color.
No text shadow, no glow, no animation.
DIVIDER
Directly below the 404 heading, after the 44px vertical gap.
Width: 425px.
Height: 1px.
Solid white.
No rounded ends, opacity changes, or animation.
MESSAGE
Directly below the divider, after another 44px vertical gap.
Exact copy: The path may be broken, but the journey isn't. Let's get you back.
Use the same Geist Mono SemiBold font.
Desktop font size: 24px.
Font weight: 600.
Line height: 1.1.
Letter spacing: -2px.
White, centered.
Width should follow the main content width.
No CTA, link styling, hover effects, or animation.
LAYERING
Background video: lowest layer.
Header logo: above video.
Center 404 content: above video.
Do not use any layer between the video and the page content.
RESPONSIVE MOBILE BEHAVIOR
At max-width: 640px:
Move the header logo to top: 32px.
Visually scale the 233px × 40px logo frame down to 75% while keeping it horizontally centered.
Set the central content width to min(100% - 40px, 360px).
Reduce the vertical gap between content elements to 28px.
Scale the 404 heading using: font-size: clamp(140px, 52vw, 200px).
Use a tighter 404 letter spacing around -0.09em.
Ensure the 404 has height: auto, min-height: 0, and bottom padding so it is not clipped.
Make the divider full width of the mobile content group.
Scale message text with: font-size: clamp(16px, 4.5vw, 20px).
Use approximately -1.3px letter spacing for the mobile message.
Maintain the same centered composition and no-overlay treatment on all screen sizes.
ACCESSIBILITY / IMPLEMENTATION
Use a semantic <main> for the page.
Use an <h1> for the 404 number.
Mark decorative SVG and video as aria-hidden.
Give the brand wrapper an aria-label="LGPSM".
Use React JSX and CSS/Tailwind utilities as appropriate.
Do not add any interface functionality, transition, fade-in, hover state, mouse-following effect, or extra content.
Mostar GuideLanding Page · free prompt · copy-paste
# PROMPT — Recreate "Mostar city" cinematic scroll page exactly
Build a **single standalone page** (`index.html` + `styles.css` + `script.js`, vanilla — no frameworks, no build step, no local assets). Every image and font must be loaded from the **remote URLs below**. Reproduce all values verbatim; they are not approximations.
---
## 1. Remote assets (the only allowed sources)
**Font — display serif, family name must be `"Ogg Medium"`**
```
https://meez.design/web/media/ext/82338cefef84b6d9.woff2
```
**Scene photographs (transparent-edge PNG layers)**
| Layer role | URL |
|---|---|
| Sky / farthest background | `https://meez.design/web/media/ext/125a599d710ae651.png` |
| Back "four" glow layer | `https://meez.design/web/media/ext/4c30cbf7df6db74e.png` |
| Bazaar mid-back | `https://meez.design/web/media/ext/1f88ffb89428a24c.png` |
| Splitframe LEFT | `https://meez.design/web/media/ext/11592a51c13f27ef.png` |
| Splitframe RIGHT | `https://meez.design/web/media/ext/e70e8bc6286f9f7a.png` |
| Bridge foreground | `https://meez.design/web/media/ext/020f8fce312ef368.png` |
| Frame-two river close-up | `https://meez.design/web/media/ext/2ff7d0d330a8773b.png` |
**Sight-card pin icons (transparent cutouts, square)**
| Icon | URL |
|---|---|
| icon1 | `https://meez.design/web/media/ext/1fbbb2933f1ed0af.png` |
| icon2 | `https://meez.design/web/media/ext/f9b3de4cb836bb8d.png` |
| icon3 | `https://meez.design/web/media/ext/cc430f6929d14950.png` |
Favicon: `<link rel="icon" href="data:," />`
---
## 2. Document head
```html
<html lang="en">
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Mostar city</title>
<meta name="description" content="A cinematic three-screen scroll story for Mostar city." />
```
Stylesheet linked normally; script linked with `defer`.
---
## 3. Exact DOM tree and source order
Source order **is** the paint order for equal z-index, so keep it exactly:
```
main.site-shell
└─ section.cinema-scroll#cinema [aria-label="Mostar cinematic scroll story"]
└─ div.stage
├─ div.world
│ ├─ img.scene-img.sky-img → sky URL
│ ├─ header.site-header [aria-label="Primary navigation"]
│ │ ├─ a.site-logo[href="#cinema"] "Bosnia and Herzegovina"
│ │ ├─ nav.site-nav [aria-label="Main menu"] Intro/#cinema, Bridge/#bridge,
│ │ │ Bazaar/#bazaar, Routes/#routes
│ │ └─ button.language-switcher [aria-label="Change language"]
│ │ ├─ span "EN"
│ │ └─ span[aria-hidden="true"] "⌄"
│ ├─ div.back-stack
│ │ ├─ img.scene-img.back-img.back-four → back-four URL
│ │ ├─ section.sights-slider [aria-label="Mostar sights slider"]
│ │ │ └─ div.sights-track
│ │ │ └─ 5 × article.sight-card [tabindex="0" role="button"]
│ │ └─ img.scene-img.back-img.back-bazaar → bazaar URL
│ ├─ div.sights-controls [aria-label="Slider controls"]
│ │ ├─ button.sight-nav.sight-prev "←" [aria-label="Previous sight"]
│ │ └─ button.sight-nav.sight-next "→" [aria-label="Next sight"]
│ ├─ h1.hero-title "MOSTAR"
│ ├─ img.scene-img.splitframe-img.splitframe-left → splitframe-1 URL
│ ├─ img.scene-img.splitframe-img.splitframe-right → splitframe-2 URL
│ ├─ img.scene-img.bridge-img → bridge URL
│ ├─ img.scene-img.frame-two-img → frame-two URL
│ └─ div.shade
├─ section.intro-copy [aria-label="Mostar overview"]
├─ section.story-panel.story-panel-bridge [aria-label="Old Bridge details"]
└─ section.story-panel.story-panel-bazaar [aria-label="Old town details"]
```
All `img.scene-img` have `alt=""`.
**Sight card internal order (per card):** `span.sight-kicker` → `img.sight-pin` → `h3` → `p`.
| # | aria-label | kicker | h3 | p | pin |
|---|---|---|---|---|---|
| 1 | Open Stari Most card | Old Bridge | Stari Most | The stone arch over the Neretva and Mostar's main landmark. | icon1 |
| 2 | Open Kujundziluk card | Bazaar Street | Kujundziluk | Copper shops, souvenirs, and the old bazaar lane by the bridge. | icon2 |
| 3 | Open Koski Mehmed Pasha Mosque card | Viewpoint | Koski Mehmed Pasha Mosque | A classic minaret view back toward Stari Most and the river. | icon3 |
| 4 | Open Kajtaz House card | Ottoman House | Kajtaz House | A preserved residential house showing Mostar's Ottoman layers. | icon1 |
| 5 | Open War Photo Exhibition card | Museum | War Photo Exhibition | A compact, moving stop for context on the city's recent history. | icon2 |
**intro-copy content:** `<p>A stone arch, emerald water, and a compact old city made for slow mornings, late light, and one unforgettable crossing.</p>` then `div.hero-tags[aria-label="Mostar highlights"]` with three spans: `Old Bridge`, `Neretva River`, `UNESCO old city`.
**story-panel-bridge:** `h2` = `The bridge is the city's compass.`; `p` = `Stari Most links the banks of the Neretva and anchors a historic quarter shaped by Ottoman, Mediterranean, and European layers.`; then `dl.facts` with two `div` groups: `dt 1566 / dd Original bridge completed` and `dt 2005 / dd Old Bridge Area inscribed by UNESCO`.
**story-panel-bazaar:** `h2` = `The bazaar keeps Mostar close.`; `p` = `Stone lanes, mosque courtyards, copper stalls, and riverside coffee stay within a short walk of Stari Most.`; then `button.note-button` containing `span[aria-hidden="true"] ↗` and `span Open old town notes`.
---
## 4. CSS custom properties — exact `:root` block
```css
:root {
--mx: 0; --my: 0;
--back-opacity: 1; --back-x: 0px; --back-y: 0px; --back-scale: 0.76;
--four-y: 10vh; --four-scale: 0.78;
--bazaar-y: 20vh;
--blur-px: 0px; --back-brightness: 1;
--bazaar-blur-px: 0px; --bazaar-brightness: 1; --bazaar-saturation: 1;
--shade-opacity: 1; --shade-z: 2;
--shade-top-alpha: 0; --shade-mid-alpha: 0; --shade-bottom-alpha: 0;
--blur-tint: 74, 181, 224;
--title-y: 0px; --title-scale: 1; --title-opacity: 1;
--bridge-x: -50%; --bridge-y: 0px; --bridge-bottom: 5vh;
--bridge-width: 67.2vw; --bridge-scale: 1.02;
--split-left-x: -50%; --split-left-y: 0px; --split-left-scale: 1;
--split-right-x: -50%; --split-right-y: 0px; --split-right-scale: 1;
--frame2-opacity: 0; --frame2-x: -50%; --frame2-y: -50%; --frame2-scale: 1.06;
--intro-copy-y: 0px; --intro-copy-opacity: 1;
--panel2-opacity: 0; --panel2-y: calc(-50% + 58px);
--panel3-opacity: 0; --panel3-y: calc(-50% + 58px);
--sights-opacity: 0; --sights-controls-opacity: 0; --sights-y: 0px;
--sights-enter-x: 420vw; --sights-visibility: hidden;
--sights-shift: 0px; --sights-scale: 1;
--sights-top: clamp(112px, 19vh, 220px);
--sights-screen-top: clamp(112px, 19vh, 220px);
--ink: #111411; --paper: #fdf1e1; --shadow: rgba(0, 0, 0, 0.32);
font-family: Inter, Satoshi, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
color: var(--paper);
background: #0b1110;
letter-spacing: 0;
}
```
Global: `* { box-sizing: border-box }`; `html { min-height:100%; scroll-behavior:smooth; background:#0b1110 }`; `body { min-height:100%; margin:0; overflow-x:clip; background:#0b1110 }`; `button { border:0; font:inherit }`; `.site-shell { min-height:100vh }`.
---
## 5. Exact positioning of every element
**Scroll rig**
- `.cinema-scroll { position: relative; height: calc(100vh + 3700px) }`
- `.stage { position: sticky; top: 0; height: 100vh; min-height: 620px; overflow: hidden; isolation: isolate; background: #7fb4d4 }`
- These are all `position: absolute`: `.world, .back-stack, .sky-img, .shade, .scene-img, .site-header, .sights-slider, .sights-controls, .hero-title, .intro-copy, .story-panel`
- `.world { inset: 0; overflow: hidden; background: #79b7dd }`
**Header (z-index 10)** — `top:0; left:0; right:0;` `display:grid; grid-template-columns: minmax(260px,1fr) auto minmax(260px,1fr); align-items:center; gap:32px; padding:32px; color:rgba(253,241,225,0.86); pointer-events:auto`
- `.site-logo` — `justify-self:start`, Ogg Medium 24px/1 weight 500, `rgba(253,241,225,0.92)`, no underline, `white-space:nowrap`
- `.site-nav` — flex, centered, `gap: clamp(24px, 2.2vw, 44px)`
- `.site-nav a, .language-switcher` — `rgba(253,241,225,0.86)`, `font-weight:700`, `line-height:1`, `text-shadow: 0 2px 16px rgba(0,0,0,0.2)`; `.site-nav a` overrides to `font-size:20px; font-weight:400`
- `.language-switcher` — `justify-self:end`, inline-flex centered, `gap:5px`, `padding:0`, transparent bg, `font-size:16px`, `cursor:pointer`; its spans are inline-flex, `line-height:1`
**Scene images (shared)** — `display:block; user-select:none; -webkit-user-drag:none; will-change: transform, opacity, filter; pointer-events:none`
**Sky (z 0)** — `inset:0; width:100%; height:100%; object-fit:cover; transform:none;` `filter: blur(var(--blur-px)) brightness(var(--back-brightness))`
**`.back-stack` (z 1)** — `top:0; bottom:0; left:-3vw; right:-3vw;` `opacity: var(--back-opacity)`; `transform: translate3d(var(--back-x), var(--back-y), 0) scale(var(--back-scale))`; `transform-origin: 50% 100%`; `will-change: transform, filter, opacity`
**`.back-img` base** — `inset:0; width:100%; height:100%; object-fit:cover;` `filter: blur(var(--blur-px)) brightness(var(--back-brightness))`
**Both `.back-bazaar` and `.back-four` override** — `top:auto; bottom:0; left:48%; right:auto; width:112%; height:auto; object-fit:contain`
- `.back-bazaar` — `z-index:3; opacity:1;` `filter: blur(var(--bazaar-blur-px)) brightness(var(--bazaar-brightness)) saturate(var(--bazaar-saturation));` `transform: translate3d(-50%, var(--bazaar-y), 0) scale(0.86)`
- `.back-four` — `z-index:1; opacity:0.72; mix-blend-mode:screen;` `transform: translate3d(-50%, calc(var(--four-y) - 110px), 0) scale(var(--four-scale))`
**`.sights-slider` (z 2)** — `left:0; right:0; top: var(--sights-top); padding:0;` `opacity:1` (literal — the fade is done by `visibility` + X translate, not opacity); `visibility: var(--sights-visibility);` `transform: translate3d(var(--sights-enter-x), var(--sights-y), 0) scale(var(--sights-scale));` `transform-origin: 0 0; pointer-events:auto; will-change:transform`
**`.sights-track`** — `display:flex; gap: clamp(16px, 1.15vw, 24px); align-items:stretch;` `transform: translate3d(calc(var(--sights-shift) - 18vw), 0, 0);` `transition: transform 640ms cubic-bezier(0.22, 1, 0.36, 1); will-change:transform`. Class `.is-jumping { transition: none }`
**`.sight-card`** — `position:relative; flex: 0 0 clamp(360px, 19.4vw, 430px); height:220px; padding:24px; overflow:hidden; border:1px solid rgba(253,241,225,0.42); border-radius:24px; color:#000; background:#fdf1e1; box-shadow: 0 18px 52px rgba(2,47,64,0.12); backdrop-filter:none; cursor:pointer; pointer-events:auto; user-select:none`. `::before/::after { content:none }`. Kicker/h3/p carry `text-shadow:none` and `position:relative; z-index:1`. `:focus-visible` and `.is-active` → `outline:none`.
- `.sight-kicker` — `display:block; margin-bottom:56px; color:#000; font-size:12px; font-weight:500; line-height:1.05; text-transform:uppercase`
- `.sight-pin` — `position:absolute; top:24px; right:24px; width:67.2px; height:67.2px; pointer-events:none`
- `.sight-card h3` — `position:absolute; left:24px; right:24px; bottom: calc(24px + (16px * 1.16 * 2) + 12px); max-width: calc(100% - 76px); margin:0; color:#000; font-size:24px; font-weight:800; line-height:0.95; overflow:hidden; text-overflow:ellipsis; white-space:nowrap`
- `.sight-card p` — `position:absolute; left:24px; right:24px; bottom:24px; max-width:100%; margin:12px 0 0; color:#000; font-size:16px; font-weight:400; line-height:1.16; display:-webkit-box; max-height: calc(2em * 1.16); overflow:hidden; -webkit-box-orient:vertical; -webkit-line-clamp:2`
**`.sights-controls` (z 5)** — `left:48px; right:auto; top: calc(var(--sights-screen-top) + 220px + 16px); display:flex; justify-content:flex-start; gap:14px;` `opacity: var(--sights-controls-opacity);` `transform: translate3d(0, var(--sights-y), 0);` `pointer-events:none; will-change:transform, opacity`. `.is-ready { pointer-events:auto }`
- `.sight-nav` — `54px × 54px`, inline-flex centered, `border-radius:999px; color:#111411; background:rgba(253,241,225,0.94); box-shadow: 0 18px 36px rgba(0,0,0,0.2); cursor:pointer`
**`.hero-title` (z 3)** — `left:50%; top: clamp(122px, 19vh, 205px); width: min(94vw, 1780px); margin:0; color:#fdf1e1;` Ogg Medium `font-size:14rem; font-weight:500; line-height:0.78; text-align:center; text-shadow:none;` `transform: translate3d(-50%, var(--title-y), 0) scale(var(--title-scale));` `opacity: var(--title-opacity); will-change: transform, opacity`
**`.bridge-img` (z 4)** — `left:50%; bottom: var(--bridge-bottom); width: min(var(--bridge-width), 2140px); height:auto;` `transform: translate3d(var(--bridge-x), var(--bridge-y), 0) scale(var(--bridge-scale));` `transform-origin: 50% 48%`
**`.splitframe-img` (z 6)** — `left:50%; bottom:-2vh; width: min(118vw, 2240px); height:auto; pointer-events:none`
- `.splitframe-left` — `transform: translate3d(var(--split-left-x), var(--split-left-y), 0) scale(var(--split-left-scale)); transform-origin: 21% 52%`
- `.splitframe-right` — `transform: translate3d(var(--split-right-x), var(--split-right-y), 0) scale(var(--split-right-scale)); transform-origin: 79% 52%`
**`.frame-two-img` (z 5)** — `filter: none !important; backdrop-filter:none; left:50%; top:50%; width: min(122vw, 2160px); height:auto;` `opacity: var(--frame2-opacity);` `transform: translate3d(var(--frame2-x), var(--frame2-y), 0) scale(var(--frame2-scale)); transform-origin: 50% 48%`
**`.shade`** — `inset:0; z-index: var(--shade-z); pointer-events:none; opacity: var(--shade-opacity);`
```css
background: linear-gradient(180deg,
rgba(var(--blur-tint), var(--shade-top-alpha)) 0%,
rgba(var(--blur-tint), var(--shade-mid-alpha)) 48%,
rgba(var(--blur-tint), var(--shade-bottom-alpha)) 100%);
```
**`.intro-copy` (z 9)** — `left:50%; bottom: clamp(56px, 28vh, 400px); width: min(560px, calc(100vw - 40px)); text-align:center;` `transform: translate3d(-50%, var(--intro-copy-y), 0); opacity: var(--intro-copy-opacity); will-change: transform, opacity`
- `p` — `margin:0 auto; max-width:560px; color:#fdf1e1; font-size:1.18rem; font-weight:500; line-height:1.18; text-shadow: 0 2px 18px rgba(0,0,0,0.42)`
- `.hero-tags` — flex, wrap, centered, `gap:10px; margin-top:26px`
- `.hero-tags span` — `min-height:42px`, inline-flex centered, `padding:0 25px; color:var(--ink); border-radius:999px; background:#fdf1e1; font-size:0.98rem; font-weight:500; box-shadow: 0 12px 30px rgba(0,0,0,0.18)`
**`.story-panel` (z 10)** — `left:50%; top:45%; width: min(760px, calc(100vw - 42px)); text-align:center; pointer-events:none; transform: translate3d(-50%, -50%, 0); will-change: transform, opacity`
- `h2` — `margin:0; color:#fdf1e1;` Ogg Medium `font-size:4.75rem; font-weight:500; line-height:0.95; text-shadow: 0 16px 38px var(--shadow)`
- `p` — `width: min(520px, 100%); margin:26px auto 0; color:#fdf1e1; font-size:1.14rem; font-weight:500; line-height:1.18; text-shadow: 0 2px 18px rgba(0,0,0,0.42)`
- `.story-panel-bridge` — `top:60%; opacity: var(--panel2-opacity); transform: translate3d(-50%, var(--panel2-y), 0)`
- `.story-panel-bazaar` — `top:29%; opacity: var(--panel3-opacity); transform: translate3d(-50%, var(--panel3-y), 0)`
- `.facts` — `display:grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap:86px; width: min(470px, 100%); margin:72px auto 0`
- `.facts dt` — `color:#fdf1e1;` Ogg Medium `font-size:4.2rem; font-weight:500; line-height:0.9; text-shadow: 0 14px 34px var(--shadow)`
- `.facts dd` — `margin:18px 0 0; color:#fdf1e1; font-size:1rem; font-weight:500; line-height:1.14; text-shadow: 0 2px 18px rgba(0,0,0,0.42)`
- `.note-button` — `min-height:50px; margin-top:28px;` inline-flex centered `gap:12px; padding:0 28px; border-radius:999px; color:var(--ink); background:#fdf1e1; box-shadow: 0 16px 34px rgba(0,0,0,0.18); pointer-events:auto; cursor:pointer`; first span `font-size:1.25rem; line-height:1`
---
## 6. Media queries (exact)
```css
@media (max-width: 1500px) {
.hero-title { font-size: 11rem; }
.story-panel h2 { font-size: 4.1rem; }
}
@media (max-width: 1100px) {
.hero-title { top: 15vh; font-size: 7.5rem; }
.bridge-img { width: 138vw; }
.frame-two-img { width: 132vw; }
.story-panel h2 { font-size: 3.2rem; }
.facts { gap: 34px; margin-top: 44px; }
.facts dt { font-size: 3.2rem; }
.sight-card { flex-basis: clamp(320px, 40vw, 390px); min-height: 178px; }
}
@media (max-width: 640px) {
.stage { min-height: 640px; }
.site-header { grid-template-columns: 1fr auto; gap: 18px; padding: 24px; }
.site-nav { grid-column: 1 / -1; grid-row: 2; justify-content: flex-start;
gap: 18px; overflow-x: auto; scrollbar-width: none; }
.site-nav::-webkit-scrollbar { display: none; }
.hero-title { top: 16vh; font-size: 4.5rem; }
.bridge-img { bottom: 2vh; width: 190vw; }
.frame-two-img { width: 176vw; }
.intro-copy { bottom: 42px; }
.intro-copy p, .story-panel p { font-size: 1rem; }
.hero-tags { gap: 8px; }
.hero-tags span { min-height: 38px; padding: 0 16px; font-size: 0.88rem; }
.story-panel { top: 42%; }
.story-panel-bazaar { top: 26%; }
.story-panel h2 { font-size: 2.45rem; }
.facts { gap: 18px; margin-top: 34px; }
.facts dt { font-size: 2.5rem; }
.sights-slider { padding: 0; }
.sights-track { gap: 12px; transform: translate3d(calc(var(--sights-shift) - 18vw), 0, 0); }
.sight-card { flex-basis: min(82vw, 330px); height: 220px; padding: 24px; border-radius: 24px; }
.sights-controls { top: calc(var(--sights-screen-top) + 236px); }
.sight-card h3 { max-width: 78%; }
.sight-card p { max-width: 100%; margin-top: 10px; }
.sight-kicker { margin-bottom: 56px; }
.sight-pin { top: 24px; right: 24px; width: 57.6px; height: 57.6px; }
}
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
.scene-img, .back-stack, .hero-title, .intro-copy,
.story-panel, .sights-track, .sights-slider { transition: none; }
}
```
---
## 7. JavaScript — animation engine, exact math
Query on load: `.cinema-scroll`, `document.documentElement`, `matchMedia("(prefers-reduced-motion: reduce)")`, `.sights-track`, `.sights-controls`, `.sight-prev`, `.sight-next`, and the original `.sight-card` list.
State: `targetMouseX/Y`, `mouseX/Y`, `targetScroll`, `smoothScroll`, `initialized`, `rafPending`, `sightCards`, `originalSightCount`, `activeSight = originalSightCount`.
**Helpers**
```js
clamp(v, min = 0, max = 1) => Math.min(max, Math.max(min, v))
smoothstep(e0, e1, v) => { const x = clamp((v - e0) / (e1 - e0)); return x * x * (3 - 2 * x); }
lerp(a, b, t) => a + (b - a) * t
segmentInOut(s, a, b, c, d) => {
const enter = smoothstep(a, b, s), exit = smoothstep(c, d, s);
return { enter, exit, active: enter * (1 - exit) };
}
getScrollDistance() => clamp(-section.getBoundingClientRect().top, 0,
section.offsetHeight - window.innerHeight)
```
**Per-frame `update()`**
```js
targetScroll = getScrollDistance();
if (!initialized || reduceMotion.matches) { smoothScroll = targetScroll; initialized = true; }
else { smoothScroll = lerp(smoothScroll, targetScroll, 0.14); }
if (Math.abs(smoothScroll - targetScroll) < 0.08) smoothScroll = targetScroll;
mouseX = lerp(mouseX, targetMouseX, 0.12);
mouseY = lerp(mouseY, targetMouseY, 0.12);
const frame2 = segmentInOut(smoothScroll, 560, 900, 1300, 1620);
const frame3 = segmentInOut(smoothScroll, 1760, 2140, 2540, 2700);
const progress = clamp(smoothScroll / 2700);
const introExit = smoothstep(90, 650, smoothScroll);
const sightsEnterRaw = smoothstep(2760, 3560, smoothScroll);
const sightsEnter = Math.pow(sightsEnterRaw, 1.55);
const sightsControlsEnter = smoothstep(3360, 3660, smoothScroll);
const blurActive = clamp(frame2.active + frame3.active);
const frame2Opacity = frame2.active * (1 - frame3.enter);
const splitDrift = Math.pow(frame2.enter, 1.5);
const panel2Opacity = frame2.active * (1 - frame2.exit);
const panel3Opacity = frame3.active * (1 - frame3.exit);
const backScale = 0.76 + progress * 0.2 + frame2.enter * 0.18 + frame3.enter * 0.16;
const sharedHeroY = progress * -74;
const sharedHeroScale = progress * 0.23;
const sightsScreenTop = Math.min(220, Math.max(112, window.innerHeight * 0.19)) - 50;
const sightsParentTop = window.innerHeight - (window.innerHeight - sightsScreenTop) / backScale;
```
**Variable writes (verbatim, `.toFixed` precision included)**
```js
--mx = reduceMotion.matches ? 0 : mouseX (4 decimals)
--my = reduceMotion.matches ? 0 : mouseY (4 decimals)
--back-opacity = (1 - frame2.active * 0.06)
--back-x = `${mouseX * -12}px`
--back-y = `${mouseY * -4}px`
--back-scale = backScale
--four-y = `${10 + progress * 10}vh`
--four-scale = 0.78 + progress * 0.16
--bazaar-y = `${20 - progress * 8}vh`
--blur-px = `${blurActive * 14}px`
--back-brightness = 1 - blurActive * 0.255
--bazaar-blur-px = `${frame2.active * 14}px`
--bazaar-brightness= 1 - frame2.active * 0.255 - frame3.active * 0.06
--bazaar-saturation= 1 + frame3.active * 0.18
--shade-opacity = "1"
--shade-z = frame2.active > 0.02 ? "2" : "0"
--shade-top-alpha = blurActive * 0.465
--shade-mid-alpha = blurActive * 0.42
--shade-bottom-alpha = blurActive * 0.51
--title-y = `${introExit * -210}px`
--title-scale = 1 - introExit * 0.08
--title-opacity = 1 - introExit
--bridge-x = `calc(-50% + ${mouseX * 18}px)`
--bridge-y = `${mouseY * 8 + sharedHeroY - frame2.exit * 760}px`
--bridge-bottom = `${5 - frame2.enter * 13}vh`
--bridge-width = `${67.2 + frame2.enter * 37.8}vw`
--bridge-scale = 1.02 + sharedHeroScale + frame2.exit * 0.46
--split-left-x = `calc(-50% + ${-splitDrift * 46}vw + ${mouseX * 22}px)`
--split-left-y = `${mouseY * 10 + sharedHeroY - splitDrift * 180}px`
--split-left-scale = 1 + sharedHeroScale + frame2.enter * 0.74
--split-right-x = `calc(-50% + ${ splitDrift * 46}vw + ${mouseX * 22}px)`
--split-right-y = `${mouseY * 10 + sharedHeroY - splitDrift * 180}px`
--split-right-scale = 1 + sharedHeroScale + frame2.enter * 0.74
--frame2-opacity = frame2Opacity
--frame2-x = `calc(-50% + ${mouseX * 10}px)`
--frame2-y = `calc(-50% + ${mouseY * 8 - frame2.exit * 150}px)`
--frame2-scale = 1.06 + frame2.enter * 0.08 + frame2.exit * 0.08
--intro-copy-y = `${introExit * 90}px`
--intro-copy-opacity = 1 - introExit
--panel2-opacity = panel2Opacity
--panel2-y = `calc(-50% + ${-frame2.exit * 86 + (1 - frame2.enter) * 58}px)`
--panel3-opacity = panel3Opacity
--panel3-y = `calc(-50% + ${-frame3.exit * 86 + (1 - frame3.enter) * 58}px)`
--sights-opacity = sightsEnter
--sights-controls-opacity = sightsControlsEnter
sightsControls.classList.toggle("is-ready", sightsControlsEnter > 0.98)
--sights-visibility = sightsEnter > 0.01 ? "visible" : "hidden"
--sights-y = "0px"
--sights-enter-x = `${(1 - sightsEnter) * 420}vw`
--sights-scale = 1 / backScale
--sights-top = `${sightsParentTop}px`
--sights-screen-top = `${sightsScreenTop}px`
```
Re-request a frame while `|smoothScroll - targetScroll| > 0.08` or `|mouseX - targetMouseX| > 0.001` or `|mouseY - targetMouseY| > 0.001`. `requestTick()` guards with `rafPending` and calls `requestAnimationFrame(update)`.
**Listeners**
- `window scroll` → `requestTick`, `{ passive: true }`
- `window resize` → `updateSightSlider(); requestTick();`
- `window pointermove` → `targetMouseX = clientX / innerWidth - 0.5; targetMouseY = clientY / innerHeight - 0.5; requestTick();` `{ passive: true }`
- `.sight-prev` click → `moveSightSlider(-1)`; `.sight-next` click → `moveSightSlider(1)`
- On load: `setupSightSlider(); requestTick();`
---
## 8. Infinite slider logic (exact behavior)
```js
setupSightSlider():
clear .sights-track (replaceChildren)
for setIndex 0..2: // 3 identical sets = 15 cards
for each original card:
clone = card.cloneNode(true)
clone.dataset.sightIndex = setIndex * originalCount + cardIndex
append clone
sightCards = all cloned cards
activeSight = originalCount // start in middle set
per card: click → selectSightCard(card)
keydown Enter or " " → preventDefault, selectSightCard(card)
track transitionend → normalizeSightSlider
updateSightSlider()
updateSightSlider():
cardWidth = sightCards[0].offsetWidth
gap = parseFloat(getComputedStyle(track).columnGap || "0")
--sights-shift = `${-(cardWidth + gap) * activeSight}px`
toggle .is-active on the card whose index === activeSight
moveSightSlider(dir): activeSight += dir; updateSightSlider()
selectSightCard(card): activeSight = Number(card.dataset.sightIndex) (if finite); updateSightSlider()
jumpSightSlider(i): add .is-jumping; activeSight = i; updateSightSlider();
double requestAnimationFrame → remove .is-jumping
normalizeSightSlider(): if activeSight >= originalCount * 2 → jump(activeSight - originalCount)
else if activeSight < originalCount → jump(activeSight + originalCount)
```
---
## 9. Resulting choreography (acceptance criteria)
Scrubbing ~3700px through the sticky stage must produce, in order:
1. **0–650px:** `MOSTAR` rises `-210px` while scaling to `0.92` and fading out; intro paragraph + 3 cream pills sink `+90px` and fade. Sky, back-stack, bridge, and splitframes drift subtly with the pointer the whole time.
2. **560–1620px:** bridge widens `67.2vw → 105vw`, its bottom lifts `5vh → -8vh`, then it launches up `-760px` and scales `+0.46` on exit. The two splitframe halves part symmetrically to ∓`46vw` (eased `enter^1.5`), rise `-180px`, scale `+0.74`. The frame-two river close-up fades in behind them. Global blur ramps to `14px`, brightness drops ~25.5%, and the blue `74,181,224` shade gradient rises to alphas `0.465 / 0.42 / 0.51`. Bridge story panel fades in at `top:60%`, sliding from `+58px` to `-86px`.
3. **1760–2700px:** bazaar layer gains `+0.18` saturation while the bridge panel exits; bazaar story panel fades in at `top:29%` with the same `+58px → -86px` slide and its `Open old town notes` pill.
4. **2760–3560px:** the sights slider flies in from `420vw` on X (`enter^1.55` easing), becoming visible past `0.01`, counter-scaled by `1 / backScale` so cards stay screen-true while the back stack keeps zooming; its top is solved so cards sit at `clamp(innerHeight*0.19, 112, 220) - 50` px on screen.
5. **3360–3660px:** the two round `←` `→` buttons fade in at `left:48px` beneath the cards and become clickable only past `0.98`. Prev/next and card clicks slide the track with the `640ms cubic-bezier(0.22, 1, 0.36, 1)` transition and loop seamlessly via the 3-set clone + instant-jump normalization.
Under `prefers-reduced-motion`, scroll smoothing and pointer parallax are bypassed (values snap, `--mx`/`--my` forced to 0) and layer transitions are disabled — the composition still scrubs, just without inertia.
Intelligent OperationsAgency · free prompt · copy-paste
# Exact recreation prompt — NovaAI landing page
Recreate this page **pixel-faithfully**. Stack: React + TypeScript + Vite + Tailwind CSS + lucide-react. Do not invent alternate copy, layout, fonts, colors, or effects.
---
## Page identity
- **Title:** `NOVA_AI — Today AI Aligns With Bold Dreams`
- **Brand:** lowercase `novaai` with a Lucide `Hexagon` icon (size 24, strokeWidth 1.5) to the left
- **Overall feel:** dark cinematic AI marketing site; full-viewport scroll-scrubbed video background; white typography with drop shadows; frosted glass UI chips; sparse editorial layout; no purple gradients, no cream paper look, no card grids of icons
---
## Assets (use these exact URLs)
**Hero scroll video (CloudFront — required):**
```
https://meez.design/web/media/prompt-media/v/256a995befea43be.mp4
```
Video content: abstract 3D forms (hanging white cables with glowing gold tips → organic white spherical / brain-like folds with warm orange core), soft blue-grey mist / grain background, floating bokeh particles. 1920×1080.
**Optional local mirrors for reliability:** `/hero.mp4` (same file) and `/hero-poster.jpg` (first-frame still). Prefer CloudFront URL in production code; local copy is fine for offline/dev.
**Portrait (“Talk with Mitha”) — exact URL:**
```
https://meez.design/web/media/ext/7c6fb70f3e54bac9.webp
```
Display as `h-24 w-20` (`96×80px`), `rounded-lg`, `object-cover`. Alt: `Mitha, co-founder of NovaAI`.
---
## Fonts
- Load Google Fonts Inter weights **400, 500, 600, 700**
- Body: `font-family: 'Inter', system-ui, sans-serif`
- Tailwind: both `font-sans` and `font-mono` map to Inter (mono labels still use `font-mono` class but render Inter)
- Antialiased text; selection color `rgba(255,255,255,0.2)`
- Page bg: `#0a0a0a`; default text white
---
## Global structure
```
relative root
ScrollVideo (fixed inset-0 z-0, pointer-events-none)
relative z-10 wrapper
Navbar (fixed top)
main
SectionOne (min-h-screen / 100svh)
spacer div h-[80vh] (aria-hidden) ← critical for scroll video length
SectionTwo (min-h-screen / 100svh)
```
Horizontal padding rhythm everywhere: `px-5 sm:px-8 md:px-12`.
Section top padding under fixed nav: `pt-24 sm:pt-28`.
Bottom padding: `pb-12 md:pb-16`.
---
## Scroll-scrubbed video background (exact behavior)
Fixed full-bleed layer `z-0`, bg `#0a0a0a`, `overflow-hidden`, `pointer-events-none`.
**Layers (bottom → top):**
1. Poster `<img>` — full cover; fades out (`opacity-0`, 500ms) once video has a decoded frame or frame cache is ready
2. `<video>` — muted, playsInline, preload=auto, object-cover; visible only while video has a frame and canvas frame-cache is not ready; then fade out
3. `<canvas>` — full cover; draws scrubbed frames; fades in when ready
**Scroll mapping:**
- `progress = scrollY / (scrollHeight - innerHeight)`, clamped 0–1
- Smooth with lerp: `smoothed += (target - smoothed) * 0.12` each `requestAnimationFrame`
- Draw with **object-cover** math (scale max, center crop)
**Frame cache (preferred smooth path):**
- Offscreen video loads same URL
- Extract up to **90** frames (or `duration * 12`, min 24), max width **960px**
- Wait until visible video has `loadeddata` + 300ms yield before extraction starts
- On ready, canvas draws cached `ImageBitmap`s by smoothed progress index
**Fallback:** seek the visible `<video>` to `smoothed * (duration - 0.05)` when frames aren’t ready (seek if delta > 0.04s)
**Canvas DPR:** `min(devicePixelRatio, 2)`
Do **not** autoplay as a normal looping background — motion is **scroll-driven only**.
---
## Reveal animation (every text/UI block)
IntersectionObserver, threshold `0.15`.
Hidden: `translate-y-8 opacity-0`
Visible: `translate-y-0 opacity-100`
Transition: `all 700ms ease-out`, `will-change-transform`
Per-element `transition-delay` in ms as specified below.
---
## Glass / material system (exact tokens)
Reuse these consistently:
| Token | Classes |
|--------|---------|
| Glass panel | `bg-white/15 backdrop-blur-md` (or `bg-white/10` for larger panels) |
| Glass border | `border border-white/15` or `border-white/20` or `border-white/25` |
| Left-accent badge | `border-l-2 border-white bg-white/15 px-3 py-1.5 backdrop-blur-md` + mono uppercase label |
| Primary CTA | solid white pill/rounded, black text, hover `bg-white/85` |
| Secondary CTA | glass border + `bg-white/10` or `bg-white/15`, white text |
| Text over video | white + `drop-shadow-md` / `drop-shadow-lg` |
| Mono labels | `font-mono text-[10px]` or `text-[11px]` or `text-xs`, `uppercase`, `tracking-[0.15em]` |
---
## Navbar (fixed, z-50)
- Full width, `border-b border-white/15`
- Row: logo left | center nav (md+) | CTA right
- Logo: Hexagon + `novaai` (`text-lg sm:text-xl font-medium tracking-tight`)
- Links (hidden below md): `Projects` with superscript `6` (`font-mono text-[10px] text-white/60`), `About`, `Blog`, `Contact` — `text-sm text-white/85`, hover `text-white`, gap `gap-8 lg:gap-10`
- CTA: `Get Free Consultation` — `rounded-md border border-white/20 bg-white/15 backdrop-blur-md px-4 py-2 text-xs sm:px-5 sm:text-sm`, hover `bg-white/25`
- Reveal delays: logo 0; links `100 + i*100` ms; CTA `500` ms
---
## Section One — Hero
Full viewport flex column `justify-between`.
**Top row** (`flex-col gap-8` → `sm:flex-row justify-between`):
**Left — service list** (gap-2), each reveal delay `150 + i*120`:
```
/ AI AUTOMATION
/ AI INTEGRATION
/ AI AGENT DEVELOPMENT
```
Style: `font-mono text-xs uppercase tracking-[0.15em] text-white/90 drop-shadow-md`
**Right — intro** (`max-w-xs sm:text-right`, delay 300):
> We design automation that brings clarity, precision, and efficiency to the way your company operates.
`text-lg sm:text-xl leading-relaxed text-white drop-shadow-md`
**Bottom row** (`flex-col gap-8` → `md:flex-row items-end justify-between`):
**Left:**
1. Badge delay 150: `We Automate 100+ Businesses` — left-accent glass badge, `font-mono text-[11px] uppercase tracking-[0.15em]`, `mb-5`
2. H1 delay 280:
```
Clear. Precise.
Automated.
```
`text-5xl sm:text-6xl lg:text-7xl font-normal leading-[1.05] tracking-tight text-white drop-shadow-lg`
**Right — glass contact card** (delay 420):
- Container: `flex items-center gap-4 rounded-xl bg-white/15 p-3 backdrop-blur-md`
- Image: portrait URL above, `h-24 w-20 rounded-lg object-cover`
- Text column (`gap-1.5 pr-2`):
- `Talk with Mitha` — `text-sm font-medium text-white`
- `Co-founder of NovaAI` — mono `text-[10px] uppercase tracking-[0.15em] text-white/60`
- Button: `Book 15-mins call` + Lucide `ChevronRight` size 14 — `rounded-full bg-white px-4 py-2 text-xs font-medium text-black`, hover `bg-white/85`, `mt-1.5`
---
## Mid spacer
`div` with `h-[80vh]` between sections so scroll progress has room to scrub the video between hero and section two.
---
## Section Two — Capability
Same full-viewport flex `justify-between` shell.
**Top row:**
**Left badge** delay 120: `Insight On Demand` — same left-accent glass badge as hero.
**Right copy** delay 220 (`max-w-sm sm:text-right`):
> Our AI doesn't just respond — it interprets, sharpens, and delivers the signal you need.
`text-lg sm:text-xl leading-relaxed text-white drop-shadow-md`
**Bottom area** (`flex-1 justify-end`, `flex-col gap-12` → `md:flex-row items-end justify-between gap-16`):
**Left column** (`max-w-xl`):
1. H2 delay 180:
```
Learn to see
brilliantly.
```
Same headline scale as H1 (`text-5xl sm:text-6xl lg:text-7xl … drop-shadow-lg`)
2. Body delay 320 (`mt-6 max-w-md text-sm sm:text-base text-white/80 drop-shadow-md`):
> From the first sketch to the final render, Nova turns raw intent into decisions your team can act on — quietly, precisely, at speed.
3. CTAs delay 420 (`mt-8 flex flex-wrap gap-3`):
- Primary pill: `Run the demo` + ChevronRight 14 — `rounded-full bg-white px-5 py-2.5 text-xs sm:text-sm font-medium text-black`, hover `bg-white/85`
- Secondary: `Free consultation` — `rounded-full border border-white/25 bg-white/10 backdrop-blur-md px-5 py-2.5 text-xs sm:text-sm`, hover `bg-white/20`
**Right — frosted capability panel**
`w-full max-w-md rounded-2xl border border-white/15 bg-white/10 backdrop-blur-md px-5 sm:px-6`
Three rows (dividers `border-b border-white/15` except last), each `flex gap-5 py-5`, reveal delay `300 + i*110`:
| # | Title | Body |
|---|--------|------|
| 01 | Real-time vision | Reads context as it happens and surfaces what matters before you ask. |
| 02 | Layered insight | Moves from rough outline to sharp output without losing the thread. |
| 03 | Adaptive speed | Learns your cadence and tightens every pass as you work. |
- Index: `font-mono text-[11px] tracking-[0.15em] text-white/55`
- Title: `text-base sm:text-lg font-medium text-white` + ChevronRight 16 (`text-white/40`, hover: translate-x-0.5 + `text-white`)
- Body: `mt-1.5 text-sm leading-relaxed text-white/70`
---
## Interactions / motion checklist
1. Scroll scrub maps page scroll → video timeline (smoothed)
2. Staggered fade-up reveals on enter viewport (700ms, per-delay)
3. Button / link color transitions `duration-300`
4. Capability chevrons nudge right on hover
5. Poster → video → canvas opacity crossfades `duration-500`
6. No looping autoplay of hero video
---
## Responsive rules
- Nav links hidden below `md`
- Hero/section stacks vertically on mobile; side-by-side from `sm`/`md` as specified
- Prefer `supports-[height:100svh]:min-h-[100svh]` plus `min-h-screen`
- Touch: video `playsInline` + muted
---
## Do not
- Do not replace Inter with another display font
- Do not use a different video URL than the CloudFront URL above
- Do not use the old Pexels portrait
- Do not rebuild section two as icon card stacks
- Do not put opaque solid backgrounds over the video (only glass / transparent wrappers)
- Do not remove the `80vh` spacer
---
## Acceptance
Top of page: fixed glass nav + service list + intro + “Clear. Precise. Automated.” + Mitha glass card over scroll video.
Scrolling scrubbing advances the CloudFront video smoothly.
After spacer: “Insight On Demand” + “Learn to see brilliantly.” + dual CTAs + three-item frosted capability panel.
Visual match to current NovaAI page at `localhost:5199`.
Forecast CenterMobile App · free prompt · copy-paste
Recreate this EXACT weather dashboard UI as a single self-contained HTML page (inline CSS, SVG icon sprite, no frameworks, no JS required). Pixel-faithful to the reference “Aurora Weather / Weather Forecast — Central Jakarta” liquid-glass dashboard.
═══════════════════════════════════════
TITLE / META
═══════════════════════════════════════
- Document title: Weather Forecast — Central Jakarta
- lang="en"
- viewport: width=device-width, initial-scale=1, viewport-fit=cover
- Fallback page bg: #04121b
- Color ink: #ffffff
- Antialiased Inter stack; font-feature-settings: "kern" 1
- html/body: height 100%; overflow hidden on desktop
═══════════════════════════════════════
FONTS (exact families + weights)
═══════════════════════════════════════
Use Inter + Inter Tight (SIL OFL). Preferred load:
<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=Inter:wght@400;500;600;700&family=Inter+Tight:wght@500&display=swap" rel="stylesheet">
OR embed WOFF2 @font-face for:
- Inter 400, 500, 600, 700
- Inter Tight 500 only
Body font-family:
'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif
Headline (h1) font-family:
'Inter Tight', 'Inter', sans-serif
Weight 500, size calc(63*u), line-height calc(78*u), letter-spacing calc(.25*u)
═══════════════════════════════════════
ASSETS (exact URLs / files)
═══════════════════════════════════════
1) FULL-BLEED BACKGROUND (storm landscape photo, 1600×1200 JPEG):
Local export from original file:
./assets/storm-background.jpg
(Originally embedded as a data:image/jpeg;base64 URI inside CSS.)
Subject: dramatic dark cumulonimbus storm clouds with multiple lightning bolts over a green field; cool teal-green / deep blue-black atmosphere.
CSS:
background-image: url("./assets/storm-background.jpg");
background-size: cover;
background-position: center 25%;
background-repeat: no-repeat;
2) AVATAR PHOTO (only remote image in the original):
https://images.unsplash.com/photo-1500648767791-00dcc994a43e?w=160&h=160&fit=crop&crop=faces&q=80&auto=format
alt="Calfin Danang"
loading="eager" decoding="async"
onerror="this.remove()" (falls back to inline SVG avatar #i-avatar)
Circular crop 52×52 (desktop).
3) NO other remote assets. All icons are inline SVG <symbol>s.
═══════════════════════════════════════
SCALING SYSTEM (critical)
═══════════════════════════════════════
Reference canvas: 1357 × 871 CSS px.
Define:
:root {
--u: min(100vw / 1357, 100dvh / 871);
--ink: #ffffff;
--glass: rgba(255,255,255,.155);
--glass-line: rgba(255,255,255,.20);
--e-out: cubic-bezier(.16,1,.3,1);
--e-soft: cubic-bezier(.22,.61,.36,1);
--e-pen: cubic-bezier(.37,.01,.2,1);
}
@supports not (height: 100dvh) {
:root { --u: min(100vw / 1357, 100vh / 871); }
}
Every size/spacing uses calc(N * var(--u)). Layout is absolute / edge-anchored so there is never a blank band.
═══════════════════════════════════════
LIQUID GLASS LANGUAGE (exact recipes)
═══════════════════════════════════════
Stage vignette (::after on .stage, pointer-events:none):
linear-gradient(105deg, rgba(4,16,24,.34) 0%, rgba(4,16,24,.20) 40%, rgba(4,16,24,.06) 78%, transparent 100%),
linear-gradient(180deg, rgba(4,16,24,.12) 0%, transparent 22%),
linear-gradient(0deg, rgba(4,16,24,.07), rgba(4,16,24,.07));
SIDEBAR glass:
background: linear-gradient(180deg,
rgba(255,255,255,.125) 0%,
rgba(255,255,255,.135) 13%,
rgba(255,255,255,.098) 34%,
rgba(255,255,255,.092) 100%);
backdrop-filter: blur(calc(18*var(--u))) saturate(115%);
-webkit-backdrop-filter: same;
border-radius: calc(26*var(--u));
TOOL BUTTONS / CHIP glass:
background: rgba(255,255,255,.15) /* tools */ / rgba(255,255,255,.175) /* chip */
backdrop-filter: blur(calc(16*var(--u))) saturate(115%);
tools: circle 52×52; chip: pill height 36, radius 18, padding-x 15
RIGHT RAIL CARDS glass (the main “liquid glass” panels):
background: linear-gradient(180deg,
rgba(255,255,255,.20) 0%,
rgba(255,255,255,.258) 24%,
rgba(255,255,255,.252) 78%,
rgba(255,255,255,.232) 100%);
backdrop-filter: blur(calc(26*var(--u))) saturate(118%);
border-radius: calc(24*var(--u)) /* big card: 26 */
Specular sheen coda (cards + chip):
::after width 38%, gradient
linear-gradient(100deg, transparent 0%, rgba(255,255,255,.17) 50%, transparent 100%);
skewX(-18deg); animation sheen 1.15s var(--e-soft) 2.55s 1 both;
@keyframes sheen { from { transform: translate3d(-150%,0,0) skewX(-18deg) }
to { transform: translate3d(260%,0,0) skewX(-18deg) } }
Do NOT use opaque white cards, heavy drop shadows, or purple gradients. Glass must feel frosted over the storm photo.
═══════════════════════════════════════
LAYOUT STRUCTURE (desktop absolute positions)
═══════════════════════════════════════
.stage { position:fixed; inset:0; overflow:hidden; }
1) LEFT SIDEBAR (.sidebar)
left:16u top:14u bottom:7u width:72u
flex column, align center
padding-top:22u padding-bottom:52u
- Active white pip: left:-2u top:131u width:5u height:29u radius:3u
box-shadow: 0 0 10u rgba(255,255,255,.55)
- Logo SVG 40×40 (wave-circle mark, rounded square rx=12, white stroke waves)
- Nav: margin-top 57.5u, gap 43u, icons 23×23 white
Links aria-labels: Dashboard (aria-current=page), Reports, Explore regions, Calendar, Settings
- Logout at bottom: Sign out
2) HEADER (.header)
top:22u left:126u right:37u height:52u
Left:
"Welcome" — 16u / weight 400 / color rgba(255,255,255,.93)
"Calfin Danang" — 19.5u / weight 700 / letter-spacing -0.35u / margin-top 13u
Right tools gap 16u: Add location (+), Search, Notifications, avatar
3) HERO (.hero)
left:126u top:136u max-width:560u
Chip text EXACTLY: Weather Forecast
H1 EXACT spelling (keep the typo):
line1: "Strom"
line2: "with Heavy Rain"
Each line wrapped as <span class="ln"><span>…</span></span> for mask reveal
Blurb EXACT copy (with soft line breaks as in original):
"Partly cloudy with occasional snow showers. High around 50°F.
Wind from the east 11 to 21 mph. Snow chance is 40%, with
rainfall expected to be less than an inch."
Blurb: width 480u, 15.2u / lh 24u / weight 500 / tracking -0.3u / color rgba(255,255,255,.95)
4) FORECAST STRIP (.forecast)
left:126u right:396u bottom:99u
Hourly/daily temps row (space-between):
11° cloud | 13° cloud2 | 14° cloud2 | 10° hail | 19° sun | 12° cloud
Temp type: 37u weight 400 tracking -0.7u
SVG wave chart viewBox="0 0 835 230" preserveAspectRatio="none"
height 230u, margin-top 43u, width 100%
Fill path + 3 stroked outline paths (stroke-width 6.2@opacity.17, 4.6@.26, 3.4@1)
Stroke uses horizontal white opacity gradient #wg
Fill uses #wf + vertical fade mask #wfade + clipPath #wclip / #wclipr for wipe-in
Use pathLength="1" + stroke-dasharray:1 for drawLine animation
Exact cubic path (start M0,79 … end L835,86 then fill closes to bottom)
Days under chart (margin-top -31u):
Sunday Monday Tuesday Wednesday(on/active weight 600) Thursday Friday
Font 18u weight 500 color rgba(255,255,255,.88); .on = #fff weight 600
5) RIGHT RAIL (.rail)
right:38u top:134u bottom:95u width:310u
flex column gap 20u
Card A (.card.big):
Central Jakarta + pin icon
10° C (big-temp 92u weight 500 tracking -4.4u; “C” in <i>)
metrics: 19 mph (wind) | 40% (drop) | 15km/h (gust)
Card B (.card.row height 120u):
Indonesia / North Jakarta / Mostly Sunny | 12° cloud
Card C:
Indonesia / Bandung / Cloudy | 10° cloud
Card D:
Indonesia / South Jakarta / Sunny | 14° cloud2
═══════════════════════════════════════
ICON SPRITE (inline SVG symbols, white/currentColor)
═══════════════════════════════════════
Implement exact symbols: i-grid, i-chart, i-globe, i-cal, i-gear, i-out,
i-plus, i-search, i-bell, i-pin, i-wind, i-drop, i-gust,
i-cloud, i-cloud2, i-hail, i-sun, i-avatar (vector fallback portrait).
Logo: circular clip with 7 horizontal wavy polyline strokes + soft square.
═══════════════════════════════════════
ENTRY CHOREOGRAPHY (must match timings)
═══════════════════════════════════════
Keyframes:
- riseIn: opacity 0 → 1, translateY(var(--ry,14px)) → none
- slideL: from -26px X
- slideR: from +30px X + scale(.985)
- popIn: scale .7 → 1
- growY: scaleY 0 → 1 (pip)
- lineUp: translateY(115%) → none (headline mask)
- wipeDown / wipeRight (clip-path)
- drawLine: stroke-dashoffset 1 → 0
- wipeX: scaleX 0 → 1 on #wclipr (fill follows pen)
- sheen: as above
Beat timing (animation-fill-mode: both):
1. Sidebar slideL .92s delay .05s; logo popIn .70s @.26s;
nav items riseIn .60s delays .36/.41/.46/.51/.56s; logout @.70s; pip growY .50s @.68s
2. hello riseIn .70s @.14s; who .80s @.22s;
tools popIn .58s delays .30/.365/.43/.495s
3. chip wipeRight .80s @.44s;
h1 line1 lineUp 1.05s @.56s; line2 @.67s;
blurb wipeDown .90s @.90s (--e-soft)
4. cards slideR .95s delays .80/.92/1.03/1.14s;
place/big-temp/metrics + row children staggered ~1.04–1.36s
5. temps riseIn delays 1.26…1.61s step ~.07s
6. Signature: .wline drawLine 1.60s --e-pen @1.50s;
#wclipr wipeX 1.42s --e-pen @1.72s (fill ~220ms behind pen)
7. days riseIn from 2.10s step .055s
8. Coda sheen @2.55s
prefers-reduced-motion: reduce → kill all animations/transitions; hide sheen ::after; show chart fully drawn.
Mobile ≤860px: reflow to single scrolling column; --u: min(100vw/430, 1.22px);
sidebar becomes fixed bottom dock height 64u; cards/forecast order change; pip hidden;
sidebar/cards use riseIn instead of slideL/slideR.
≤420px: --u: calc(100vw / 430).
═══════════════════════════════════════
INTERACTION MICROSTATES
═══════════════════════════════════════
.nav a:hover → opacity 1 + translateY(-1u)
.tool:hover → background rgba(255,255,255,.24)
:focus-visible → 2u white outline, offset 2u
═══════════════════════════════════════
HARD CONSTRAINTS
═══════════════════════════════════════
- Keep the typo “Strom” (not Storm).
- Keep all copy, temps, cities, metrics exactly as listed.
- Absolute desktop composition on the 1357×871 unit grid — not a generic CSS Grid dashboard.
- Liquid glass via backdrop-filter + translucent white gradients + final specular sheen — not solid frosted panels.
- Chart must DRAW itself (stroke dash) then FILL wipe left→right.
- No purple theme, no Inter-default marketing look-alikes beyond the specified Inter/Inter Tight, no card shadows stacks, no emoji.
- Single HTML file preferred; background may be external file at ./assets/storm-background.jpg and avatar at the Unsplash URL above.
```
```
---
**Asset notes**
- **Background:** not a public CDN URL in the original — it was a ~238KB embedded JPEG. Use `./assets/storm-background.jpg` (exported from this project) or re-embed the same data URI.
- **Avatar:**
`https://images.unsplash.com/photo-1500648767791-00dcc994a43e?w=160&h=160&fit=crop&crop=faces&q=80&auto=format`
- **Fonts:** Google Fonts Inter 400–700 + Inter Tight 500, or the embedded WOFF2s already in `index.html`.
Personal ShowcasePortfolio · free prompt · copy-paste
Recreate this page **pixel-faithfully**. Single full-viewport hero. React + Tailwind CSS. No cards, no purple, no Inter/Roboto. Black/cream editorial portfolio look. --- ## Stack & page chrome - Vite + React + TypeScript + Tailwind CSS - Document title: `Marcus — Bennet` (em dash) - Body font stack: `'Helvetica Neue ME', Helvetica, Arial, sans-serif` - Load this exact webfont (print→all pattern): ``` https://meez.design/web/media/ext/eed78f47abdeac6e.woff2 ``` - Tailwind theme extensions: - Color `cream`: `#efeee9` - Font family `hn` (and `sans`/`serif`): `"Helvetica Neue ME", Helvetica, Arial, sans-serif` - Lucide React for the mobile close icon only (`X`, size `26`, strokeWidth `1.5`) - Root section: `relative h-[100dvh] w-full overflow-hidden` — one composition, no scroll on the hero --- ## Exact asset URLs (do not substitute) **Background image (full-bleed, behind everything):** ``` https://meez.design/web/media/ext/b1adcb779aa26d3f.webp ``` **Front portrait (cutout overlay, above marquee, pointer-events none):** ``` https://meez.design/web/media/ext/b9d4e3d3ff44ac3c.png ``` Both images: `absolute inset-0 h-full w-full object-cover`. --- ## Layer order (z-index) | Layer | z | Content | |--------|---|---------| | BG image | default | full-bleed background | | Marquee name | `z-10` | scrolling “Marcus — Bennet” | | Horizontal cream rule | `z-10` | above footer | | Desktop footer | `sm:z-10` | bottom copy | | Front portrait | `z-20` | cutout over marquee | | Header + mobile footer | `z-30` | chrome | | Mobile drawer | `z-40` | overlay + panel | | Hamburger / close | `z-50` | always on top | --- ## Copy & links (exact strings) - Brand / logo link (top-left): `Marcus` - Year (desktop only): `2025` - Nav column (desktop + mobile “Site Index”): `Story`, `Jobs`, `Message` - Social column (desktop + mobile “Find Me”): `Instagram`, `TikTok`, `YouTube` - Marquee (duplicated twice for seamless loop): `Marcus — Bennet` + non-breaking space, with `pr-[6vw]` on each span. Use HTML entity `—` between names. - Footer left (three lines): - `Visuals Composer` - `Digital Crafter` - `Obsessed by The Office` - Footer right (right-aligned): - `A homage to` - `Marcus Holloway` - Mobile drawer labels: `Site Index`, `Find Me` (uppercase, `tracking-[0.2em]`, `text-cream/50`) - All links: `href="#"` for now - Front image `alt`: `Portrait`; BG image `alt`: empty All UI text color: `text-cream` (`#efeee9`). --- ## Layout — desktop (`sm:` and up) **Header** (`absolute inset-x-0 top-0 z-30 flex items-start justify-between px-6 pt-6 sm:px-10 sm:pt-8`): - Left: brand `Marcus` — `font-hn text-lg tracking-wide` - Right cluster (`hidden sm:flex items-start gap-16 lg:gap-24`): - Year `text-sm` - Nav: vertical stack `flex-col gap-0.5 text-sm`, hover `opacity-60` over `300ms` - Social: same stack/hover **Marquee** (`absolute inset-x-0 top-[16vh] sm:top-[14vh] z-10 overflow-hidden`): - Inner track: `marquee flex w-max whitespace-nowrap font-hn text-[16vh] sm:text-[26vh] leading-none text-cream` - Continuous horizontal scroll: `translateX(0)` → `translateX(-50%)`, **30s linear infinite** (track is two identical halves) **Cream rule** (`absolute inset-x-6 sm:inset-x-10 bottom-[5.5rem] sm:bottom-28 z-10 h-0.5 bg-cream`): - Grows from left via `scaleX(0)` → `scaleX(1)`, `transform-origin: left` **Footer** (`absolute inset-x-0 bottom-0 flex items-end justify-between px-6 pb-5 sm:px-10 sm:pb-8 text-xs sm:text-sm leading-relaxed font-hn`) **Mobile-only** (`sm:hidden`): hamburger (3 cream bars in `h-10 w-10`, bars in `h-4 w-6`). Desktop nav/social hidden on mobile. --- ## Mobile drawer (`sm:hidden`) - Backdrop: `fixed inset-0 z-40`, `bg-black/40 backdrop-blur-sm`, opacity 0↔100 over `500ms`; click closes; when closed: `pointer-events-none` - Panel: right slide-in, `w-[80%] max-w-sm`, `bg-[#141414]`, `px-8 py-10`, `translate-x-full` ↔ `translate-x-0`, `600ms` ease `cubic-bezier(0.76, 0, 0.24, 1)` - Lock `document.body.style.overflow = 'hidden'` while open - Close button: Lucide `X`, absolute `right-6 top-6`; open: rotate 0 / opacity 1 (delay 300ms); closed: rotate 90 / opacity 0 - “Site Index” label: fades/slides up (delay 250ms); nav links `text-4xl`, staggered `300 + i*80` ms, from `translate-y-6 opacity-0` - “Find Me” label: delay 500ms; socials `text-sm` wrap, staggered `550 + i*60` ms, from `translate-y-4 opacity-0` - Hamburger morphs to X: top/bottom bars rotate ±45° to center (`500ms`, ease `cubic-bezier(0.76, 0, 0.24, 1)`); middle fades out `300ms` --- ## Entrance animations (exact) Use `animation-fill-mode: both`. Honor `prefers-reduced-motion: reduce` by collapsing these to ~0.01ms / 0 delay. | Class | Keyframes | Duration / easing | Used on | |--------|-----------|-------------------|---------| | `anim-fade-in` | opacity 0→1 | **1.2s** `ease-out` | BG image (no delay) | | `anim-rise-in` | opacity 0→1, `translateY(4vh) scale(1.03)` → `0 / scale(1)` | **1.4s** `cubic-bezier(0.22, 1, 0.36, 1)` | Front portrait, **delay 300ms** | | `anim-fade-up` | opacity 0→1, `translateY(28px)` → 0 | **0.9s** `cubic-bezier(0.22, 1, 0.36, 1)` | UI chrome (see delays) | | `anim-line` | `scaleX(0)` → `1`, origin left | **1.1s** `cubic-bezier(0.76, 0, 0.24, 1)` | Cream rule, **delay 1200ms** | | `.marquee` | `translateX(0)` → `-50%` | **30s** `linear` infinite | Name track | **`anim-fade-up` delays:** - Marquee wrapper: `500ms` - Brand “Marcus”: `800ms` - Year + hamburger: `900ms` - Nav links: `1000 + i*80` ms (Story/Jobs/Message) - Social links: `1150 + i*80` ms - Footer left: `1400ms` - Footer right: `1550ms` --- ## Visual / interaction rules - First viewport = one composition: brand, marquee name, one portrait stack (BG + cutout), one CTA-less chrome (nav/social), footer blurb — nothing else - Portrait sits **on top of** the giant scrolling name so letters read through / behind the cutout - Cream `#efeee9` on dark/photo; no cards, no pills, no glow, no purple - Hover on desktop nav/social: `opacity-60`, `duration-300` - No page scroll on the hero (`overflow-hidden` + `100dvh`) --- ## Implementation checklist 1. Wire Helvetica Neue ME from the OnlineWebFonts URL above; map Tailwind `font-hn` / `cream` 2. Full-viewport section with the two image URLs at the correct z-layers 3. Infinite dual-span marquee at `16vh` / `14vh` (sm), sizes `16vh` / `26vh` 4. Desktop header triple column + mobile hamburger → drawer with staggered reveals 5. Cream rule + dual footer blocks with exact copy 6. All four entrance animations + marquee with the delays and easings listed 7. `prefers-reduced-motion` short-circuit Recreate this **exactly** as specified — same URLs, copy, spacing, z-order, timings, and font.
TrustFlowLanding Page · free prompt · copy-paste
Build a single full-viewport marketing landing page for **Boomerang**, a conversational AI platform for financial institutions. Tech: React + TypeScript + Vite + Tailwind CSS + Lucide React (`ArrowRight` only). No other UI libraries.
---
### Fonts (exact)
Load in `index.html`:
1. **Display / serif:** `P22 Mackinac W01 Book`
`https://meez.design/web/media/ext/7989306331865be9.woff2`
2. **UI / sans:** Inter weights 300, 400, 500, 600
`https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600&display=swap`
Tailwind `fontFamily`:
- `sans: ['Inter', 'sans-serif']`
- `serif: ['P22 Mackinac W01 Book', 'Georgia', 'serif']`
Body: `font-family: 'Inter', sans-serif` with antialiased smoothing. Page title: `Build Lasting Relationships`. Background: pure white `#FFFFFF`. Primary text/chrome: `#191919`.
---
### CloudFront video (exact URL — required)
```
https://meez.design/web/media/prompt-media/v/83285e780cd09e92.mp4
```
---
### Hero video background — boomerang playback (critical behavior)
Implement a `BoomerangVideoBg` absolute full-bleed background (`absolute inset-0 z-0`) with:
1. Wrapper: `scale-[1.15] origin-top overflow-hidden` (slightly oversized, anchored from top).
2. Hidden/capture `<video>`: `src` = CloudFront URL above, `muted`, `playsInline`, `preload="auto"`, `crossOrigin="anonymous"`, `className="w-full h-full object-cover object-top"`.
3. On load: play once (no native loop). While playing, capture every frame to offscreen canvases (prefer `requestVideoFrameCallback`, else `requestAnimationFrame`). Cap capture width at **960px**, scale height proportionally. Deduplicate by `currentTime`.
4. On `ended`: stop capture, store frames, switch from video to a display `<canvas>` (`w-full h-full object-cover object-top`).
5. Canvas playback: ping-pong / boomerang at **30fps** (`interval = 1000/30`). Advance frame index forward to last, then reverse to first, forever.
6. While frames aren’t ready, show the live video; once ready, hide video (`display: none`) and show canvas.
This is the main motion: a soft looping forward→reverse background video behind the hero.
---
### Logo (exact SVG)
Custom SVG mark (not Lucide), `viewBox="0 0 256 256"`, `fill="currentColor"`:
```
M 144 256 L 27.598 256 L 144 139.598 Z
M 256 207.5 L 200 256 L 200 56 L 0 56 L 48 0 L 256 0 Z
M 0 204.402 L 0 112 L 92.402 112 Z
```
Navbar size: `w-6 h-6 text-[#191919]`. Wordmark beside it: “Boomerang”, `font-semibold text-base tracking-tight text-[#191919]`, gap `2.5`.
---
### Fixed navbar
- `fixed top-0 left-0 right-0 z-50`
- Padding: `px-6 sm:px-10 md:px-14`, `py-4 sm:py-5`
- Three zones: logo left | center links (hidden below `md`) | CTA right
- Links: Product, Solutions, Pricing, Company — `text-sm text-[#191919]/70`, hover to full `#191919`, `transition-colors duration-200`, hrefs `#product` `#solutions` `#pricing` `#company`
- CTA button: “Book A Demo” — `px-5 py-2.5 bg-[#191919] text-white text-sm font-medium rounded-lg hover:bg-[#191919]/90 transition-colors duration-200`
- No nav background / blur / border — transparent over the video
---
### Hero section (first viewport = full screen)
- `relative flex flex-col items-center overflow-hidden h-screen`
- Video bg at `z-0`; content at `z-10`
**Hero copy block** (centered):
- Top padding: `pt-24 sm:pt-26 md:pt-32`, horizontal `px-4 sm:px-6`
- H1 (serif Mackinac):
`Build lasting` + line break + `relationships.`
Classes: `font-serif text-4xl sm:text-5xl md:text-7xl lg:text-8xl leading-[1.1] tracking-tighter text-[#191919] font-normal`
- Subcopy max-width `max-w-sm sm:max-w-md`, `mt-5 sm:mt-6 md:mt-8`, `text-sm md:text-base text-[#191919]/70 leading-relaxed`:
“Conversational AI platform for modern financial institutions — agents that handle the full borrower lifecycle across email, SMS, and voice.”
- Second “Book A Demo” button: `mt-6 sm:mt-8 md:mt-10 px-6 sm:px-8 py-3 sm:py-3.5` same black pill styling as nav CTA
**Bottom info panel** (`mt-auto`, sits on bottom of viewport):
- Outer: `w-full max-w-5xl px-4 sm:px-6`
- Card: `bg-white/90 backdrop-blur-sm border border-gray-200 border-b-0 pt-8 sm:pt-12 md:pt-16 px-5 sm:px-8 md:px-12 pb-0 shadow-sm` — flush to bottom (no bottom border/radius)
- **Row 1 — 2 cols** (`md:grid-cols-2`, gaps `6 / 8 / 16`):
- Left: micro-label `WHAT DO WE DO?` — `text-[11px] uppercase tracking-[0.2em] text-[#191919]/50 font-medium`
then H2 serif: “Conversations that / build momentum” — `mt-3 text-2xl sm:text-3xl md:text-4xl font-serif font-normal leading-tight tracking-tight` (line break from `sm` up)
- Right: body bottom-aligned — `text-sm md:text-[15px] text-[#191919]/70 leading-relaxed`:
“Conversational AI built for regulated financial institutions. Agents that hold a real conversation, plug into the systems you run, and show their work.”
- **Hairline divider:** `mt-6 sm:mt-8 md:mt-10 h-px bg-gray-200 w-full`
- **Row 2 — 3 interactive rows** (`sm:grid-cols-3`, gap `2` / `3`):
- Items:
- `01 / Conversational`
- `02 / Connected`
- `03 / Compliant`
- Each: `bg-[#F4F3F3] hover:bg-[#eaeaea] transition-all duration-200 cursor-pointer`, `px-4 sm:px-6 py-3.5 sm:py-4`, flex space-between
- Number: `text-[#191919]/40`; slash: `mx-2 text-[#191919]/30`; label: `font-medium`
- Lucide `ArrowRight` `w-4 h-4 text-gray-400`; on group hover: `text-gray-700` + `translate-x-0.5`, `transition-all duration-200`
---
### Layout / motion summary
- Page: `min-h-screen bg-white overflow-x-hidden`
- Only intentional motions:
1. Boomerang video ping-pong on canvas
2. Color transitions on nav links & buttons (200ms)
3. Feature-row hover bg + arrow nudge (200ms)
- No purple, no cards-as-hero, no stat strips, no floating badges. One composition: brand + headline + one sentence + CTA + full-bleed video, with the “What do we do?” panel anchored at the bottom of the first viewport.
- Responsive: nav links hide below `md`; feature rows stack on mobile; typography scales as specified.
Reproduce pixel-faithfully: same copy, colors (`#191919`, `#F4F3F3`, white/90 glass panel), fonts, CloudFront URL, and the capture→boomerang canvas video technique.
---
Digital DirectorPortfolio · free prompt · copy-paste
Recreate this exact full-viewport portfolio landing page — pixel-perfect match.
═══════════════════════════════════════
TECH / STACK
═══════════════════════════════════════
- React + TypeScript + Tailwind CSS + Vite
- Icons: lucide-react (`Play`, `Menu`, `X`)
- Single full-screen page: `h-screen w-full overflow-hidden`
- Root: `relative h-screen w-full overflow-hidden bg-black text-white`
═══════════════════════════════════════
FONTS (exact)
═══════════════════════════════════════
Load in <head>:
1) Inter (Google Fonts) — body/default:
<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=Inter:wght@300;400;500;600;700;800;900&display=swap" rel="stylesheet">
2) basis33 (pixel/bitmap monospace) — for `.font-pixel`:
<link href="https://meez.design/web/media/ext/47a28c1e2fef21f6.woff2" rel="stylesheet">
CSS:
- body { font-family: 'Inter', sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
- .font-pixel { font-family: 'basis33', monospace; }
Where basis33 (font-pixel) is used:
- "ROBERTS" under ADAM
- "ENGINEERING" under DESIGN &
- Brand blurb under name
- Labels "What I Do" and "Services"
- Words "UNEXPECTED" and "EXPERIENCES" inside the hero headline (1.25em size)
Where Inter is used:
- Everything else (nav, ADAM, DESIGN &, body copy, showreel button, awards, footer)
Page title: "Adam Roberts - Design & Engineering"
═══════════════════════════════════════
BACKGROUND VIDEO (exact URL — do not substitute)
═══════════════════════════════════════
Full-bleed background <video>:
src="https://meez.design/web/media/prompt-media/v/5198a3596261af2f.mp4"
Attributes: autoPlay muted loop playsInline
Classes: absolute inset-0 h-full w-full object-cover lg:scale-[1.2]
(On large screens, video is scaled 120% for a slight crop/zoom)
All UI sits above video at z-10. No dark overlay — white text over the video.
═══════════════════════════════════════
LOGO (exact SVG)
═══════════════════════════════════════
White geometric “GP / Grilled Pixels” mark, 28×28, viewBox="0 0 256 256":
<svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" viewBox="0 0 256 256" fill="none">
<path d="M 160 88 L 194 34 L 216 0 L 256 0 L 256 40 L 221.5 93.5 L 200 128 L 256 128 L 256 256 L 96 256 L 96 168 L 64.246 220 L 40 256 L 0 256 L 0 216 L 34 162 L 56 128 L 0 128 L 0 0 L 160 0 Z" fill="white" />
</svg>
Used in top-left navbar AND inside the mobile menu header.
═══════════════════════════════════════
LAYOUT STRUCTURE (top → bottom)
═══════════════════════════════════════
Outer content wrapper (above video):
relative z-10 flex h-full flex-col px-5 sm:px-6 md:px-10 lg:px-14
── 1. NAVBAR ──
flex items-center justify-between py-6
Left: logo SVG
Right desktop (md+): horizontal links, gap-8, text-sm tracking-wide
ABOUT | PROCESS | PROJECTS | CATALOG | D.O.T | TALK
Each: href="#", hover:opacity-70 transition-opacity
Right mobile (<md): hamburger button (Menu icon size 24), p-2 hover:opacity-70
── 2. FOUR-COLUMN META GRID ──
mt-4 grid grid-cols-2 lg:grid-cols-4 gap-4 sm:gap-6 lg:gap-8
COL 1 (left):
h2 text-lg md:text-xl tracking-wide leading-tight
Line1: "ADAM" (font-normal Inter)
Line2: "ROBERTS" (font-pixel text-2xl md:text-3xl)
Then: * asterisk at text-[10px] text-white/50 mt-3
Then brand blurb font-pixel mt-1 text-xs text-white/60 leading-relaxed, line breaks EXACTLY:
Grilled Pixels is my
personal brand - I came up
with it in 2004 based on
"cooking up ideas"
COL 2 (text-right on mobile 2-col, text-left on lg):
h2 same sizing
Line1: "DESIGN &" (Inter font-normal)
Line2: "ENGINEERING" (font-pixel text-2xl md:text-3xl)
COL 3:
Label: "What I Do" — text-base tracking-widest text-white/50 uppercase mb-3 font-pixel
Body: text-sm text-white/90 leading-relaxed max-w-[220px]
"I create the top 1% of experiences for brands and digital products"
COL 4 (text-right on mobile 2-col, text-left on lg):
Label: "Services" — same label styles as What I Do
ul text-sm text-white/90 leading-relaxed space-y-0.5:
- Branding
- Creative Direction & Strategy
- UX/UI Design
- Web Development (React/Nextjs)
- 3D, WebGL / Photography
- Video & Animation
── 3. FLEX SPACER ──
<div className="flex-1" /> ← pushes bottom block to viewport bottom
── 4. BOTTOM SECTION (pb-4) ──
ROW A — grid grid-cols-1 lg:grid-cols-2 gap-4 sm:gap-6 items-end
LEFT — Hero headline:
h1: text-3xl sm:text-4xl md:text-5xl lg:text-[3.75rem] xl:text-[4.25rem]
tracking-wide uppercase font-normal
inline style: lineHeight: 0.72
Exact line breaks:
I BRING THE
UNEXPECTED TO ← "UNEXPECTED" is font-pixel font-normal text-[1.25em] inline-block leading-none align-baseline
BRAND & DIGITAL
EXPERIENCES ← "EXPERIENCES" same pixel treatment as UNEXPECTED
RIGHT — column flex flex-col gap-4 sm:gap-6 justify-end:
A) PLAY SHOWREEL button (self-start):
flex items-center gap-3
border border-white/30 px-6 py-3
backdrop-blur-sm bg-white/5
hover:bg-white/10 transition-colors
Play icon: lucide Play size={14} fill="white"
Label: text-sm tracking-wider "PLAY SHOWREEL"
B) Awards row (self-start on mobile, lg:self-end):
flex flex-wrap items-stretch gap-2 sm:gap-3 text-sm text-white/80
Three dark chips, each: bg-[#0B0B0B] px-3 sm:px-4 py-2, flex items-center gap-2
1) "FWA" font-bold text-sm sm:text-base tracking-tight + "x1" text-white/50 text-xs
2) "W." font-bold text-lg sm:text-xl + "x7" text-white/50 text-xs
3) "CSSDesignAwards" font-bold text-[10px] sm:text-xs tracking-tight + "x22" text-white/50 text-xs
ROW B — footer strip:
mt-4 sm:mt-5 grid grid-cols-1 sm:grid-cols-2 gap-2 sm:gap-4 pt-4
Left: text-xs text-white/60
"Open to freelance, contract or full-time. "
then link "Schedule a call" — text-red-500 hover:text-red-400 transition-colors href="#"
Right: text-xs text-white/60 sm:text-right
"5 full cases • 82 archive fragments • 22 catalog items"
(use • or • between parts)
═══════════════════════════════════════
MOBILE FULLSCREEN MENU
═══════════════════════════════════════
State: menuOpen boolean
Overlay: fixed inset-0 z-50 bg-black/95 backdrop-blur-md flex flex-col
Transition: transition-all duration-500 ease-[cubic-bezier(0.16,1,0.3,1)]
open: opacity-100 pointer-events-auto
closed: opacity-0 pointer-events-none
Header: flex items-center justify-between px-6 py-6
Left: same logo SVG
Right: X button (size 24) closes menu — p-2 hover:opacity-70
Nav: flex flex-col items-center justify-center flex-1 gap-8
Same 6 links as desktop, text-2xl tracking-widest
Staggered entrance when opening:
transition-all duration-500 ease-[cubic-bezier(0.16,1,0.3,1)]
open: opacity-100 translate-y-0
closed: opacity-0 translate-y-4
transitionDelay when open: `${100 + i * 60}ms` (i = 0..5) → 100,160,220,280,340,400ms
when closed: delay 0ms
Clicking a link closes the menu
═══════════════════════════════════════
ANIMATIONS / INTERACTIONS SUMMARY
═══════════════════════════════════════
1. Background video: continuous autoplay loop, muted
2. Nav link hover: opacity → 70%
3. Showreel button hover: bg white/5 → white/10
4. Schedule a call hover: red-500 → red-400
5. Mobile menu overlay: 500ms cubic-bezier(0.16,1,0.3,1) fade
6. Mobile menu links: staggered fade+slide-up (60ms steps, start 100ms)
7. Hamburger / close icon hover: opacity 70%
8. NO scroll (overflow-hidden, h-screen) — single locked viewport composition
9. NO page load entrance animation on desktop content (static on paint)
10. Video scales to 1.2× at lg breakpoint
═══════════════════════════════════════
COLOR TOKENS
═══════════════════════════════════════
- Page bg: #000000 (black)
- Primary text: #ffffff
- Muted: white/90, white/80, white/60, white/50
- Accent link: Tailwind red-500 (Schedule a call)
- Award chips: #0B0B0B
- Showreel button: border white/30, fill white/5, blur
- Mobile overlay: black/95 + backdrop blur
═══════════════════════════════════════
RESPONSIVE BREAKPOINTS (Tailwind defaults)
═══════════════════════════════════════
- < md: hamburger + 2-col meta grid; awards/showreel stack under headline
- md+: desktop nav links
- lg+: 4-col meta grid; 2-col bottom (headline | showreel+awards); video scale 1.2
- sm/md/lg/xl: progressive padding and headline size as listed above
═══════════════════════════════════════
DO NOT
═══════════════════════════════════════
- Do not add cards, purple gradients, cream backgrounds, or extra sections
- Do not change copy, award counts, or line breaks
- Do not replace the CloudFront video URL
- Do not use Inter for pixel words — must be basis33
- Do not add scrolling or a second viewport section
```
```
AI Trip PlannerSaaS · free prompt · copy-paste
**Build a single-page React + TypeScript landing page for a travel app called "Wandor" using Vite, Tailwind CSS, and lucide-react. The page is a full-viewport hero section with a looping background video, a frosted-glass prompt card, and a navigation bar.**
**Fonts (load in index.html `<head>`):**
- Google Fonts link: `https://fonts.googleapis.com/css2?family=Special+Elite&family=Geist:wght@400;500;600;700&display=swap`
- Include preconnect to fonts.googleapis.com and fonts.gstatic.com (crossorigin).
- Body / UI font: "Geist" (sans-serif), weights 400/500/600/700.
- Logo font: "Special Elite" (typewriter serif), used only for the wordmark.
- Page title: `Wandor — Where will you go next?`
**Tailwind config (tailwind.config.js) — extend theme:**
- `fontFamily.sans`: `['Geist', 'sans-serif']`
- `fontFamily.display`: `['Special Elite', 'serif']`
- Custom colors under key `wandor`:
- `dark: '#0a0a0a'`
- `text: '#1a1a1a'`
- `muted: '#767676'`
- `prompt: '#905831'` (a brown/terracotta)
**Global CSS (index.css):**
- Standard Tailwind directives (base/components/utilities).
- `body`: `font-family: 'Geist', sans-serif; overflow-x: hidden; background: #fff;`
**Layout — single `<section>` that fills the viewport:**
- Section: `relative min-h-svh w-full overflow-hidden`.
**Background video (z-0):**
- `<video>` absolutely positioned `inset-0 w-full h-full object-cover z-0`.
- Exact `src`: `https://meez.design/web/media/prompt-media/v/4274a69e25d7e8a7.mp4`
- Attributes: `autoPlay muted loop playsInline`.
**Top gradient overlay (z-1):**
- Absolutely positioned `inset-x-0 top-0 h-[687px] pointer-events-none z-[1]`.
- Inline style background: `linear-gradient(180deg, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100%)` — a white-to-transparent vertical fade covering the top 687px so the nav and headline read clearly over the video.
**Content wrapper (z-2):**
- `relative z-[2] max-w-[1360px] mx-auto`.
**Navigation bar:**
- `<nav>`: `flex items-center justify-between px-20 pt-6 pb-4` (mobile: `px-6 pt-5`).
- Left: wordmark `<span className="font-display text-[40px] text-black leading-none select-none">wandor</span>` (mobile: `text-[32px]`).
- Center: absolutely centered group `absolute left-1/2 -translate-x-1/2 flex gap-8` (hidden on mobile via `max-md:hidden`). Three buttons: "Discover", "Pricing", "FAQs". Each button: `bg-transparent border-none cursor-pointer font-sans text-[15px] font-medium uppercase text-wandor-text tracking-[0.04em] transition-opacity hover:opacity-55`.
- Right: flex group `flex items-center gap-8`:
- "Login" button (hidden on mobile): `bg-transparent border-none cursor-pointer font-sans text-[15px] font-semibold uppercase text-[#292929] tracking-[0.04em] transition-opacity hover:opacity-55`.
- "Plan My Trip" button: `bg-wandor-dark text-[#fafafa] border-none cursor-pointer font-sans text-[15px] font-medium uppercase tracking-[0.04em] px-5 py-3.5 rounded-full transition-all hover:bg-[#333] active:scale-95`.
**Hero body:**
- Container: `flex flex-col items-center px-6 pt-16 pb-24 text-center`.
- Headline `<h1>`: `font-sans text-[clamp(40px,6vw,68px)] font-medium text-wandor-text leading-[1.05] tracking-[-0.04em] max-w-[820px] mb-5`. Text: "Where will you go next?"
- Subtitle `<p>`: `font-sans text-xl font-medium text-wandor-muted leading-relaxed max-w-[500px] mb-10`. Text: "Tell our AI where you're going and what you love. We'll create a personalized itinerary for you."
**Liquid glass prompt card:**
- Wrapper `<div>`: `relative w-[701px] max-md:w-[calc(100vw-48px)] min-h-[208px] bg-white/[0.06] border-[3px] border-white rounded-[44px] shadow-[0_0_4px_0_rgba(0,0,0,0.15)] overflow-hidden backdrop-blur-[20px]`. This is the liquid-glass effect: very low-opacity white fill, thick white border, heavy backdrop blur, soft shadow, large pill radius.
- Prompt text `<p>`: absolutely positioned `left-[29px] top-[57px] -translate-y-1/2 w-[609px] max-md:w-[calc(100%-58px)] font-sans text-xl max-md:text-[17px] font-medium text-wandor-prompt leading-relaxed break-words`. Text: "I'm planning a 7-day trip to Japan in October. I love food, hidden cafes, scenic hikes, and want to avoid crowds...." (note the trailing "....").
- "Plan My Trip" CTA button inside card: `absolute bottom-[21px] right-[21px] w-[156px] h-14 bg-black border-none rounded-[44px] shadow-[0_0_2px_0_rgba(0,0,0,0.05)] cursor-pointer flex items-center justify-center font-sans text-base font-medium text-[#fafafa] uppercase tracking-[0.02em] transition-all hover:bg-[#333] active:scale-95`. Text: "Plan My Trip".
- Hidden file input: `<input ref={fileInputRef} type="file" accept="image/*,.pdf" className="hidden" />`.
- Upload button: `absolute left-[21px] top-[137px] w-11 h-11 bg-transparent border border-white/70 rounded-full cursor-pointer flex items-center justify-center backdrop-blur-[14px] transition-transform hover:scale-105 focus-visible:outline-2 focus-visible:outline-white focus-visible:outline-offset-2`. `aria-label="Upload inspiration"`. On click, trigger the hidden file input via a ref. Inside, render the lucide-react `Upload` icon: `<Upload className="w-[18px] h-[18px] text-wandor-text flex-shrink-0" />`.
**Interactions / animations:**
- All buttons use `transition-opacity` / `transition-all` / `transition-transform` with `hover:opacity-55`, `hover:bg-[#333]`, `hover:scale-105`, and `active:scale-95` for tactile micro-interactions.
- The glass card and upload button use `backdrop-blur-[20px]` / `backdrop-blur-[14px]` for the liquid-glass frosted effect over the video.
- The video autoplays muted and loops continuously for ambient motion.
- The top white-to-transparent gradient overlay ensures the nav and headline remain legible over the video.
**Responsive behavior:**
- At `max-width: 760px` (Tailwind `max-md`): nav padding shrinks to `px-6 pt-5`, logo drops to 32px, center nav links and Login button hide, glass card becomes `calc(100vw - 48px)` wide with prompt text at 17px and width `calc(100%-58px)`.
**App structure:**
- `src/App.tsx` imports `Hero` from `@/components/Hero` and renders it inside a wrapping `<div>`.
- `Hero.tsx` contains all the markup above plus a `NavButton` helper component for the centered links.
- Use the `@/` path alias (maps to `src/`) configured in `vite.config.ts` via `resolve.alias`.
---
## Source Code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Wandor — Where will you go next?</title>
<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=Special+Elite&family=Geist:wght@400;500;600;700&display=swap" rel="stylesheet" />
<style>
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: 'Geist', sans-serif; overflow-x: hidden; background: #fff; }
.hero { position: relative; min-height: 100svh; width: 100%; overflow: hidden; }
.hero-video {
position: absolute; inset: 0; width: 100%; height: 100%;
object-fit: cover; z-index: 0;
}
.hero-overlay {
position: absolute; inset-inline: 0; top: 0; height: 687px;
background: linear-gradient(180deg, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100%);
pointer-events: none; z-index: 1;
}
.hero-content { position: relative; z-index: 2; max-width: 1360px; margin-inline: auto; }
nav {
display: flex; align-items: center; justify-content: space-between;
padding: 24px 80px 16px; position: relative;
}
.logo { font-family: 'Special Elite', serif; font-size: 40px; color: #000; line-height: 1; user-select: none; }
.nav-links { position: absolute; left: 50%; transform: translateX(-50%); display: flex; gap: 32px; }
.nav-links button {
background: none; border: none; cursor: pointer;
font-family: 'Geist', sans-serif; font-size: 15px; font-weight: 500;
text-transform: uppercase; color: #1a1a1a; letter-spacing: 0.04em; transition: opacity 0.15s;
}
.nav-links button:hover { opacity: 0.55; }
.nav-actions { display: flex; align-items: center; gap: 32px; }
.btn-login {
background: none; border: none; cursor: pointer;
font-family: 'Geist', sans-serif; font-size: 15px; font-weight: 600;
text-transform: uppercase; color: #292929; letter-spacing: 0.04em; transition: opacity 0.15s;
}
.btn-login:hover { opacity: 0.55; }
.btn-plan {
background: #0a0a0a; color: #fafafa; border: none; cursor: pointer;
font-family: 'Geist', sans-serif; font-size: 15px; font-weight: 500;
text-transform: uppercase; letter-spacing: 0.04em;
padding: 14px 20px; border-radius: 9999px; transition: background 0.15s, transform 0.1s;
}
.btn-plan:hover { background: #333; }
.btn-plan:active { transform: scale(0.95); }
.hero-body {
display: flex; flex-direction: column; align-items: center;
padding: 64px 24px 96px; text-align: center;
}
h1 {
font-family: 'Geist', sans-serif; font-size: clamp(40px, 6vw, 68px);
font-weight: 500; color: #1a1a1a; line-height: 1.05; letter-spacing: -0.04em;
max-width: 820px; margin-bottom: 20px;
}
.subtitle {
font-family: 'Geist', sans-serif; font-size: 20px; font-weight: 500;
color: #767676; line-height: 1.4; max-width: 500px; margin-bottom: 40px;
}
.glass-card {
position: relative; width: 701px; height: 208px;
background: rgba(255,255,255,0.06); border: 3px solid white;
border-radius: 44px; box-shadow: 0 0 4px 0 rgba(0,0,0,0.15); overflow: hidden;
backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
}
.card-prompt {
position: absolute; left: 29px; top: 57px; transform: translateY(-50%); width: 609px;
font-family: 'Geist', sans-serif; font-size: 20px; font-weight: 500;
color: #905831; line-height: 1.4; word-break: break-word;
}
.card-cta {
position: absolute; bottom: 21px; right: 21px; width: 156px; height: 56px;
background: #000; border: none; border-radius: 44px;
box-shadow: 0 0 2px 0 rgba(0,0,0,0.05); cursor: pointer;
display: flex; align-items: center; justify-content: center;
font-family: 'Geist', sans-serif; font-size: 16px; font-weight: 500;
color: #fafafa; text-transform: uppercase; letter-spacing: 0.02em;
transition: background 0.15s, transform 0.1s;
}
.card-cta:hover { background: #333; }
.card-cta:active { transform: scale(0.95); }
.upload-btn {
position: absolute; left: 21px; top: 137px; width: 44px; height: 44px;
background: transparent; border: 1px solid rgba(255,255,255,0.7);
border-radius: 44px; cursor: pointer;
display: flex; align-items: center; justify-content: center;
backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
transition: transform 0.15s; padding: 0;
}
.upload-btn:hover { transform: scale(1.05); }
.upload-btn:focus-visible { outline: 2px solid white; outline-offset: 2px; }
.upload-icon { width: 18px; height: 18px; flex-shrink: 0; }
#file-input { display: none; }
@media (max-width: 760px) {
nav { padding: 20px 24px 16px; }
.logo { font-size: 32px; }
.nav-links, .btn-login { display: none; }
.glass-card { width: calc(100vw - 48px); height: auto; min-height: 208px; }
.card-prompt { width: calc(100% - 58px); font-size: 17px; }
}
</style>
</head>
<body>
<section class="hero">
<video class="hero-video"
src="https://meez.design/web/media/prompt-media/v/4274a69e25d7e8a7.mp4"
autoplay muted loop playsinline></video>
<div class="hero-overlay"></div>
<div class="hero-content">
<nav>
<span class="logo">wandor</span>
<div class="nav-links">
<button>Discover</button>
<button>Pricing</button>
<button>FAQs</button>
</div>
<div class="nav-actions">
<button class="btn-login">Login</button>
<button class="btn-plan">Plan My Trip</button>
</div>
</nav>
<div class="hero-body">
<h1>Where will you go next?</h1>
<p class="subtitle">Tell our AI where you're going and what you love. We'll create a personalized itinerary for you.</p>
<div class="glass-card">
<p class="card-prompt">I'm planning a 7-day trip to Japan in October. I love food, hidden cafés, scenic hikes, and want to avoid crowds....</p>
<button class="card-cta">plan My trip</button>
<input type="file" id="file-input" accept="image/*,.pdf" />
<button class="upload-btn" aria-label="Upload inspiration"
onclick="document.getElementById('file-input').click()">
<svg class="upload-icon" viewBox="0 0 19.5001 19.5" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<path d="M0.750049 14.75C0.750049 15.68 0.750049 16.145 0.852269 16.5265C1.12967 17.5617 1.93832 18.3704 2.97359 18.6478C3.35509 18.75 3.82008 18.75 4.75005 18.75H14.75C15.68 18.75 16.145 18.75 16.5265 18.6478C17.5618 18.3704 18.3704 17.5617 18.6478 16.5265C18.75 16.145 18.75 15.68 18.75 14.75"
stroke="#1A1A1A" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M14.25 5.24997C14.25 5.24997 10.9358 0.75001 9.75003 0.75C8.56413 0.74999 5.25005 5.25 5.25005 5.25M9.75003 1.75V13.75"
stroke="#1A1A1A" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
</button>
</div>
</div>
</div>
</section>
</body>
</html>
F1 Racing HubMobile App · free prompt · copy-paste
# Recreate This Page Exactly — Lewis Hamilton / Silverstone F1 Hero
## Tech stack
- React + TypeScript + Vite
- Tailwind CSS (config extends `fontFamily.sans` = `['"Albert Sans"', 'sans-serif']`, plus custom `f1.dark = rgb(41,41,41)` and `f1.yellow = rgb(237,180,11)`)
- lucide-react for icons (X, Menu used)
- Google Font: **Albert Sans** weights 300;400;500;600;700;800, loaded in index.html via `https://fonts.googleapis.com/css2?family=Albert+Sans:wght@300;400;500;600;700;800&display=swap`
- Body background: `#0a0e1c`, antialiased
## Overall layout
A full-screen hero section (`relative w-full overflow-hidden font-sans`) with a page background image and dark overlay, then two responsive layouts:
**Page background image (used for both page and inside phone screens):**
```
https://meez.design/web/media/ext/4e6314027c373f81.webp
```
- Page: `<img>` absolute inset-0 w-full h-full object-cover z-0, then `<div className="absolute inset-0 bg-black/70 z-[1]" />`
**Desktop (md+):** `hidden md:flex relative z-[2] w-full h-screen items-center justify-center py-6` → a flex row `items-end justify-center gap-[2vw]` containing three phone mockups, each wrapped in `animate-fade-slide-up` with delays 300/500/700. Middle phone has `-mb-6`.
**Mobile (below md):** `md:hidden relative z-[2] flex flex-col items-center gap-[50px] py-[20px] px-[20px]` → same three phones, delays 300/500/700.
## PhoneMockup component
A reusable iPhone-style frame:
- Outer: `flex flex-col items-center`
- Frame: `relative rounded-[clamp(30px,4vw,54px)] bg-black p-[clamp(6px,1vw,12px)] shadow-2xl shadow-black/60`, with inner ring `absolute inset-0 rounded-[clamp(30px,4vw,54px)] ring-1 ring-white/15`
- Screen: `relative w-full h-full rounded-[clamp(24px,3.2vw,44px)] overflow-hidden bg-[#0a0e1c]`
- Dynamic Island: `absolute top-[3%] left-1/2 -translate-x-1/2 w-[30%] h-[4%] bg-black rounded-full z-50`
- Content scaling: inner div sized `390px × contentH` (contentH measured from ResizeObserver), scaled by `scale = screenW / 390`, transform-origin top-left
- Side buttons (neutral-700): left side three buttons at top 19%/26%/35.5% (heights 4.5%/7.3%/7.3%), right side one at 30.8% height 11.4%
**Phone frame sizing (CSS):**
- `.phone-frame { aspect-ratio: 390/844; width: clamp(200px, 75vw, 340px); }`
- `@media (min-width:768px) { width: min(25vw, 42vh); }`
- `@media (min-width:1280px) { width: min(28vw, 48vh, 430px); }`
## Phone navigation (shared, in every screen)
Top nav `absolute top-0 left-0 right-0 z-30 flex items-center justify-between px-5 h-14 mt-[20px]`:
- Left: F1 logo `<img src="https://meez.design/web/media/ext/0727f43267d0f98e.png" className="h-7 w-auto object-contain" />`
- Right: two 14×14 (h-14 w-14) square buttons, no rounding:
- White button with profile icon `https://meez.design/web/media/ext/d817d0589f44a41a.png` (w-5 h-5)
- Glass button: `background: rgba(255,255,255,0.15); backdropFilter: blur(12px)` containing two white bars (21px and 10px wide, 2px tall, rounded-full, 5px gap)
**Menu overlay (z-50, full screen):** `linear-gradient(160deg, #1a0000 0%, #8B0000 40%, #E10600 100%)`, fade transition 400ms. Links: Biography, Statistics, Career — text-3xl font-bold tracking-tight, stagger slide-in (translateX -20px→0, delay 0.1 + i*0.08s, cubic-bezier(0.16,1,0.3,1)). Hover color `#EDB40B`. Bottom: white "Sign in" button.
## Screen 1 — Lewis Hamilton hero
`relative w-full h-full flex flex-col px-5 pb-0 pt-[76px] overflow-hidden`
- Background: ScreenBackground (BG image + `bg-black/60`)
- PhoneNav
- Location block (z-10, mt-4 mb-2, animate-fade-slide-up delay-300): "United Kingdom" text-white/60 text-[16px] + UK flag `https://meez.design/web/media/ext/cd0882933a3261b3.png` (w-6 h-6). Title: text-white font-normal leading-[0.95] tracking-[-0.05em] text-[48px] → "Silverstone" / "England"
- **Driver photo container** (z-[5], absolute fill, flex items-end justify-center):
- `<img src="https://meez.design/web/media/ext/c6f89e9aa3cfdce0.png" className="w-[calc(140%-5px)] max-w-none h-auto object-contain animate-scale-in delay-500 origin-bottom" />`
- **Blur overlay** (the key glass effect): `absolute bottom-0 left-0 right-0 h-[50%] pointer-events-none` with inline style:
```
backdropFilter: 'blur(6px)',
WebkitBackdropFilter: 'blur(6px)',
mask: 'linear-gradient(to bottom, transparent 0%, black 50%)',
WebkitMask: 'linear-gradient(to bottom, transparent 0%, black 50%)'
```
- Bottom content (z-10, absolute bottom-0 px-5 pb-5):
- Driver avatar selector strip `https://meez.design/web/media/ext/95f5fe22951a9f12.png` (h-12 w-auto, animate-fade-slide-up delay-700, mb-3)
- Name: text-white font-semibold leading-[0.82] tracking-[-0.05em] text-[64px] animate-speed-reveal delay-800 → "Lewis" / "Hamilton"
## Screen 2 — Silverstone circuit + stats
`relative w-full h-full flex flex-col px-5 pb-8 pt-[76px] overflow-hidden`
- Background + PhoneNav
- Location block (z-10, mb-4, animate-fade-slide-up delay-400): same UK/flag/Silverstone England as Screen 1
- Circuit image (z-10, flex-1 flex items-center justify-center -mx-5 px-2 min-h-0, animate-scale-in delay-600): `https://meez.design/web/media/ext/5127edfd57ea3450.png` w-full h-full object-contain
- Stats block (z-10, mt-auto pt-4, animate-fade-slide-up delay-800): "Season Points" label + medal icon `https://meez.design/web/media/ext/fd5e6c93cb0cf78d.png` (w-6 h-6). Three count-up numbers, each font-semibold tracking-[-0.06em] fontSize 110px lineHeight 0.72:
- 227 (delay 800) — gradient text `linear-gradient(to bottom, white 0%, rgba(255,255,255,0.4) 50%, transparent 85%)` via bg-clip-text text-transparent
- 374 (delay 1000) — same gradient
- 4987 (delay 1200) — solid color `#EDB40B`
- Count-up animation: useCountUp hook, cubic ease-out (1-(1-t)³), duration 2200ms, starts after delay, requestAnimationFrame
## Screen 3 — Scuderia Ferrari team
`relative w-full h-full overflow-hidden`
- Background + PhoneNav
- Team title (absolute top-[100px] left-5 z-10, animate-fade-slide-up delay-300): "Team Name" text-white/60 text-[15px] + Ferrari icon `https://meez.design/web/media/ext/01aba650b4c0e9f7.png` (w-5 h-5). Title text-white font-normal leading-[0.83] text-[52px] letterSpacing -0.08em → "Scuderia" / "Ferrari"
- Chassis (absolute top-[245px] left-5 z-10, animate-fade-slide-up delay-500): chassis icon `https://meez.design/web/media/ext/8be58f7767f27e36.png` (w-5 h-5) + "Chassis" label. Number text-[#EDB40B] font-semibold leading-[0.79] text-[120px] letterSpacing -0.08em → "SF-26"
- Car image (absolute top-[390px] left-3 right-3 z-10 w-[calc(100%-24px)] h-auto object-contain animate-fade-slide-left delay-700): `https://meez.design/web/media/ext/2d28d081a568a3a0.png`
- Bottom driver cards (absolute bottom-0 flex, animate-fade-slide-up delay-900): two side-by-side cards, each w-1/2 h-200px rounded-t-2xl p-3, glass style:
```
background: rgba(20,20,30,0.8),
border: 1px solid rgba(255,255,255,0.1),
borderBottom: none,
backdropFilter: blur(16px)
```
- Leclerc card: "Charles Leclerc" text-white/60 text-[13px] + profile icon (w-4 h-4 opacity-60), stats image `https://meez.design/web/media/ext/ea6a6ea3bd472841.png` (h-5), big number "16" text-white font-semibold leading-[0.79] text-[110px] letterSpacing -0.08em
- Hamilton card: "Lewis Hamilton" + profile icon, stats image `https://meez.design/web/media/ext/80681b005d8cacf2.png` (h-5), big number "44"
## Animations (CSS keyframes, all `both` fill-mode)
- **fadeSlideUp**: opacity 0→1, translateY 30px→0, 0.9s cubic-bezier(0.16,1,0.3,1)
- **fadeSlideDown**: translateY -20px→0, 0.7s
- **fadeSlideLeft**: translateX 40px→0, 0.9s
- **fadeSlideRight**: translateX -40px→0, 0.9s
- **scaleIn**: opacity 0→1, scale 0.92→1, 1s
- **fadeIn**: opacity 0→1, 0.8s ease-out
- **speedReveal** (the name reveal): 0% opacity 0 translateX(-100%) skewX(-8deg) blur(8px) → 60% opacity 1 translateX(4%) skewX(-2deg) blur(0) → 100% translateX(0) skewX(0) blur(0), 0.8s
- **raceLineLeft**: scaleX 0→1.1→1 from left
- Delay utilities: delay-100 through delay-1600 (0.1s steps)
## Exact asset URLs (use verbatim)
- Page/phone background: `https://meez.design/web/media/ext/4e6314027c373f81.webp`
- F1 logo: `https://meez.design/web/media/ext/0727f43267d0f98e.png`
- Profile/search icon: `https://meez.design/web/media/ext/d817d0589f44a41a.png`
- UK flag: `https://meez.design/web/media/ext/cd0882933a3261b3.png`
- Lewis Hamilton photo: `https://meez.design/web/media/ext/c6f89e9aa3cfdce0.png`
- Driver avatar selector: `https://meez.design/web/media/ext/95f5fe22951a9f12.png`
- Silverstone circuit: `https://meez.design/web/media/ext/5127edfd57ea3450.png`
- Season points medal: `https://meez.design/web/media/ext/fd5e6c93cb0cf78d.png`
- Ferrari team icon: `https://meez.design/web/media/ext/01aba650b4c0e9f7.png`
- Chassis icon: `https://meez.design/web/media/ext/8be58f7767f27e36.png`
- Ferrari SF-26 car: `https://meez.design/web/media/ext/2d28d081a568a3a0.png`
- Leclerc stats: `https://meez.design/web/media/ext/ea6a6ea3bd472841.png`
- Hamilton stats: `https://meez.design/web/media/ext/80681b005d8cacf2.png`
## Color tokens
- Background dark: `#0a0e1c`
- F1 red (menu gradient): `#E10600`, dark red `#8B0000`, near-black `#1a0000`
- Gold/yellow accent: `#EDB40B`
- Glass card: `rgba(20,20,30,0.8)` + `backdropFilter: blur(16px)` + `border: 1px solid rgba(255,255,255,0.1)`
- Nav glass button: `rgba(255,255,255,0.15)` + `blur(12px)`
- Photo bottom blur: `blur(6px)` with vertical mask gradient transparent→black at 50%
## Typography rules
- Font: Albert Sans throughout
- Headlines: font-normal or font-semibold, very tight tracking (-0.05em to -0.08em), tight leading (0.72–0.95)
- Large display numbers: 110–120px, lineHeight 0.72–0.79
- Labels: text-white/60, 13–16px, font-normal
AI Workflow AgentsSaaS · free prompt · copy-paste
Build a single-page hero landing page for a product called "Axon" — a platform that deploys digital workers for mundane workflows. The page is a full-viewport hero section with a looping background video and overlaid content.
**Fonts:**
- Load Google Fonts: `Instrument Serif` (regular + italic) and `Inter` (weights 400, 500, 600).
- Body font: `Inter`, color `#1B133C`.
- Heading font: `Instrument Serif`.
**Page structure (single full-screen section, 100vh):**
1. **Navigation bar** — centered at the top with `pt-4 md:pt-6` padding. A horizontal nav pill with `bg-white/70 backdrop-blur-md rounded-xl px-4 md:px-6 py-3 shadow-sm`. Contains:
- A custom SVG logo (two geometric arrow/chevron shapes in `#1B133C`, 24x24px). The SVG paths are: `M 256 256 L 128 256 L 0 128 L 128 128 Z` and `M 256 128 L 128 128 L 0 0 L 128 0 Z` inside a 256x256 viewBox.
- Navigation links (hidden on mobile, shown `sm:` and up): "Features", "Plans", "Security", "About" — styled as `text-sm font-medium text-[#1B133C]/80` with hover transition to full opacity.
2. **Hero content** — centered below nav with `mt-8 md:mt-16`, stacked vertically:
- **Badge**: `mb-6`, inline-flex pill with `rounded-xl border border-[#1B133C]/10 bg-white/70 backdrop-blur-sm px-4 py-2 text-sm font-medium`. Contains an orange square icon (`bg-orange-500 rounded w-5 h-5`) with a bold white "Y" letter, followed by text "Funded by Y Combinator".
- **Heading**: `font-['Instrument_Serif'] text-4xl sm:text-5xl md:text-7xl lg:text-8xl leading-[0.95] tracking-tight text-[#1B133C] max-w-4xl`. Two lines:
- "Deploy digital workers"
- "for mundane workflows"
- **Subtitle**: `mt-5 sm:mt-6 max-w-3xl text-xs sm:text-sm md:text-base leading-relaxed text-[#1B133C]/70`. Text: "Eliminate your tedious browser work and 10x your team's capacity. Put intelligent agents on every routine process so you grow faster and deliver more for clients — effortlessly."
- **CTA button**: `mt-7 sm:mt-8`, styled as `rounded-xl bg-[#FEFEFE] px-6 sm:px-8 py-3 sm:py-3.5 text-sm font-semibold text-[#1B133C] shadow-[0px_4px_12px_rgba(0,0,0,0.15)]` with hover shadow `shadow-[0px_6px_16px_rgba(0,0,0,0.2)]` and `transition-all duration-300`. Text: "Get Early Access".
3. **Background video** — absolutely positioned (`absolute inset-0 z-0`) behind all content. The video element uses:
- URL: `https://meez.design/web/media/prompt-media/v/7fa839c57321f171.mp4`
- Attributes: `autoPlay muted loop playsInline`
- Styling: `w-full h-[130%] object-cover object-top` — full width, 130% height so it overflows vertically, with the focal point anchored to the top.
**CSS reset in index.css:**
```
body { font-family: 'Inter', sans-serif; color: #1B133C; }
```
**Key details:**
- The hero section uses `relative h-screen w-full overflow-hidden flex flex-col`.
- All content elements are `relative z-10` to sit above the video (`z-0`).
- No other sections or pages — just this single hero.
- Color palette: deep navy `#1B133C` for text, white/translucent for glass elements, orange-500 for the Y Combinator badge accent.
- Page title: "Axon — Digital Workers for Mundane Workflows"
Mind-Body HealingLanding Page · free prompt · copy-paste
Build a single-page hero landing page for a holistic wellness brand called "Vibrant Wellness." Use React, TypeScript, Tailwind CSS, and Lucide React icons. Load Google Fonts "Inter" (weights 300, 400, 500, 600, 700) via link tags in the HTML head. The entire page is a full-screen (100vh) section with a looping background video and liquid glass UI elements overlaid on top. **BACKGROUND VIDEO** Full-viewport autoplaying, looping, muted, playsInline video with `object-cover`, positioned absolute inset-0. Use this exact URL: `https://meez.design/web/media/prompt-media/v/f1830aceec29bfc0.mp4` **LIQUID GLASS EFFECT** Create a `.liquid-glass` CSS class applied to the nav pill, avatar circles, badge, and CTA button: - `background: rgba(255,255,255,0.01)` with `background-blend-mode: luminosity` - `backdrop-filter: blur(4px)` (with -webkit prefix) - No border - `box-shadow: inset 0 1px 1px rgba(255,255,255,0.1)` - `position: relative; overflow: hidden` - `::before` pseudo-element creating a gradient border: absolute inset-0, border-radius inherit, padding 1.4px, background is a vertical linear-gradient from rgba(255,255,255,0.45) at 0%, to 0.15 at 20%, transparent at 40-60%, back to 0.15 at 80% and 0.45 at 100%. Use the mask-composite exclude trick (`-webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask-composite: exclude`) so the gradient only shows as a border. Set `pointer-events: none`. **NAVIGATION (z-20, top)** Flex row, justify-between, padding px-5 pt-6 / sm:px-8 sm:pt-8 / md:px-16 lg:px-20. - Left: custom SVG logo (32x32, md:36x36), white fill, viewBox 0 0 256 256, path: `M 128 128 C 198.692 128 256 185.308 256 256 L 151.883 256 C 149.812 220.307 120.213 192 84 192 C 47.787 192 18.188 220.307 16.117 256 L 0 256 C 0 185.308 57.308 128 128 128 Z M 104.117 0 C 106.188 35.694 135.787 64 172 64 C 208.213 64 237.812 35.694 239.883 0 L 256 0 C 256 70.692 198.692 128 128 128 C 57.308 128 0 70.692 0 0 Z` - Center (desktop only, hidden on mobile): liquid-glass rounded-full pill (px-8 py-3) with three links — "Home" (text-white), "Our Approach" and "Healing Methods" (text-white/70, hover:opacity-100). All text-sm font-medium. - Right (desktop only): liquid-glass circle (h-10 w-10 rounded-full) containing Lucide `CircleUserRound` (h-5 w-5, text-white/80, strokeWidth 1.5). - Right (mobile only, md:hidden): liquid-glass circle button (h-10 w-10 rounded-full, z-50). Animated icon swap between Lucide `Menu` and `X` using absolute positioning with rotate-90 scale-0 opacity-0 transitions (duration-300) toggled by a `menuOpen` state. **MOBILE MENU OVERLAY (z-10, fixed inset-0, md:hidden)** Toggle visibility with 500ms ease-out opacity transition. Background: black/80 with backdrop-blur-xl. Centered flex column (gap-8) with the same three nav links at text-2xl font-medium. Below links: liquid-glass avatar circle + "Account" text (text-sm font-light text-white/60). Links close the menu on click. Content slides from -translate-y-8 to 0. **MAIN CONTENT (z-10)** Flex column, justify-between, fills remaining viewport height. On mobile, fades to opacity-0 and pointer-events-none when menu is open. Top block (mt-14 sm:mt-20 md:mt-28, max-w-2xl): 1. Badge — liquid-glass pill (rounded-full, inline-flex, gap-2.5 sm:gap-3, px-3 py-1.5 sm:px-4 sm:py-2, mb-5 sm:mb-6). Contains 4 overlapping avatars (flex -space-x-2, each h-5 w-5 sm:h-6 sm:w-6, rounded-full, border-2 border-white/20, object-cover) using these Pexels URLs: - `https://images.pexels.com/photos/774909/pexels-photo-774909.jpeg?auto=compress&cs=tinysrgb&w=100` - `https://images.pexels.com/photos/1222271/pexels-photo-1222271.jpeg?auto=compress&cs=tinysrgb&w=100` - `https://images.pexels.com/photos/1239291/pexels-photo-1239291.jpeg?auto=compress&cs=tinysrgb&w=100` - `https://images.pexels.com/photos/697509/pexels-photo-697509.jpeg?auto=compress&cs=tinysrgb&w=100` Followed by text "our path to natural wellness" (text-xs sm:text-sm, font-light, text-white/80). 2. Heading — `<h1>` "Heal Your Body" + `<br/>` + "Naturally". Style: text-4xl sm:text-5xl md:text-6xl lg:text-7xl, font-normal, leading-[1.05], text-white, inline letterSpacing -0.05em. 3. Subtitle — `<p>` "Holistic wellness. Transformative results." mt-4 sm:mt-5, text-sm sm:text-base md:text-lg, font-light, text-white/70. 4. CTA button — liquid-glass, rounded-full, px-6 py-3 sm:px-7 sm:py-3.5, mt-6 sm:mt-8, text-sm font-medium text-white, transition duration-300, hover:bg-white/10. Text: "Begin Your Journey". **BOTTOM STATS (flex, items-end, gap-6 sm:gap-10 md:gap-16)** Two stat columns: 1. First: a small triangular dot-pattern icon built from 9 absolutely-positioned 2.5px white/60 squares inside a 20x20 box; value "48 Hours" (text-xl sm:text-2xl md:text-3xl, font-normal, text-white); label "Initial Consultation" (text-xs sm:text-sm, font-light, text-white/60). 2. Second: a 3x3 grid icon (grid-cols-3, gap-[2px]) of 4px rounded cells alternating bg-white/60 and bg-white/0 in a checkerboard; value "Initial Consultation" (same sizing); label "Healing Sessions" (text-xs sm:text-sm, font-light, text-white/60).
Innovation LabLanding Page · free prompt · copy-paste
Create a full-screen immersive landing page for a fictional creative-tech studio called "VortxLab Creations" (brand: "V O R T X"). The page features a looping background video, a glassmorphism-cut button aesthetic with octagonal clip-path shapes, and staggered fade-up entrance animations on every element.
### Tech Stack
- React + TypeScript + Vite
- Tailwind CSS (configured with `fontFamily.inter: ['Inter', 'sans-serif']`)
- `lucide-react` for icons (only `ArrowRight` used)
- Google Fonts: **Inter** weights 300–900, loaded via `<link>` in index.html with preconnect to fonts.googleapis.com and fonts.gstatic.com
### Global CSS (index.css)
- `@tailwind base/components/utilities`
- `body { font-family: 'Inter', sans-serif; background-color: #000000; }`
- Three octagonal clip-path button classes:
**`.btn-cut`** (large buttons, 12px cut):
```
clip-path: polygon(
12px 0%, calc(100% - 12px) 0%, 100% 12px, 100% calc(100% - 12px),
calc(100% - 12px) 100%, 12px 100%, 0% calc(100% - 12px), 0% 12px
);
```
**`.btn-cut-border`** (outline variant): `position: relative; background: white;` same clip-path as above. A `::before` pseudo-element with `inset: 1px; background: black;` and the same clip-path but offset by 1px (11px values), `z-index: 0`. Direct children get `position: relative; z-index: 1;` so text shows on black.
**`.btn-cut-sm`** (small social buttons, 8px cut): same polygon but with 8px values.
### Animations (in index.css)
```css
@keyframes fadeUp {
from { opacity: 0; transform: translateY(24px); }
to { opacity: 1; transform: translateY(0); }
}
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
.anim-stagger {
opacity: 0;
animation: fadeUp 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
.anim-fade {
opacity: 0;
animation: fadeIn 1s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
```
### Background Video
Use this exact CloudFront URL as the `<video src>`:
```
https://meez.design/web/media/prompt-media/v/b262bf61e731668b.mp4
```
Attributes: `autoPlay loop muted playsInline`, class `absolute inset-0 w-full h-full object-cover anim-fade` with `animationDelay: '0.2s'`.
### Layout Structure (App.tsx)
Root: `div.h-screen.w-full.bg-black.p-3.md:p-4.font-inter`
→ Inner: `div.w-full.h-full.rounded-2xl.flex.flex-col.overflow-hidden.relative.bg-black` (this is the liquid-glass container — rounded corners, overflow hidden, video absolute behind content)
→ `<video>` (absolute background, as above)
**Navbar** (`nav.relative.z-10.flex.items-center.justify-between.px-6.md:px-10.pt-6.md:pt-8`):
- **Logo block** (`.anim-stagger`, delay 0.1s): custom SVG logo (256×256 viewBox, white fill, four quarter-circle shapes forming a vortex/plus pattern), sized `w-14 h-14 md:w-16 md:h-16`. Below it: `<span>` "V O R T X" — `text-white text-[10px] md:text-xs tracking-[0.4em] mt-1 font-light`.
- **Nav buttons** (`.anim-stagger`, delay 0.2s, `flex items-center gap-3`):
- "Neural Synergy" — `hidden md:block px-5 py-2.5 text-white text-sm hover:bg-white/10 btn-cut-border` (text wrapped in `<span>`)
- "Cyber Synthesis" — `hidden md:block px-5 py-2.5 bg-white text-black text-sm hover:bg-white/90 btn-cut`
**Main content** (`div.relative.z-10.flex-1.flex.flex-col.justify-between.px-6.md:px-10.pb-8.md:pb-10`):
*Top section* (`div.flex-1.flex.items-center.relative`):
- **Left column** (`.anim-stagger`, delay 0.4s) — `hidden lg:flex flex-col gap-6 absolute left-0 top-[18%]`:
- Paragraph: `text-white/80 text-base leading-relaxed max-w-[220px]` — text "Come with us<br>exploring the<br>horizon"
- Decorative group (`flex flex-col gap-2 mt-4`):
- Two `4×4` circles: `rounded-full border border-white/40` in a `flex items-center gap-1` row
- Row (`flex items-center gap-2 mt-2`): `<span>` "Perpetual<br>Immersion" (`text-white/70 text-xs`) + `<span>` "01" (`text-white/50 text-xs`)
- **Center heading** (`.anim-stagger`, delay 0.5s) — `div.w-full.text-center`:
- `<h1>` `text-white text-3xl sm:text-4xl md:text-5xl lg:text-6xl xl:text-7xl font-normal leading-[1.1] tracking-[-0.04em]` with inline `textShadow: '0 2px 12px rgba(0,0,0,0.25)'`. Three lines:
```
Forging Tomorrow
Virtual Horizon
VortxLab Creations
```
*Bottom row* (`div.grid.grid-cols-1.md:grid-cols-3.gap-6.items-center.mt-8`) — **3 columns; on mobile all center-aligned, on md+ outer columns right-aligned**:
- **Col 1** (`.anim-stagger`, delay 0.7s) — `flex items-center justify-center md:justify-end`:
- `<p>` `text-white text-sm leading-relaxed max-w-[260px] text-center md:text-left md:ml-auto` — "We push past conventions, reshaping the virtual terrain with next-level technologies."
- **Col 2** (`.anim-stagger`, delay 0.85s) — `flex flex-col items-center gap-8 md:gap-24` (smaller gap on mobile, large gap on desktop):
- `<span>` `text-white text-2xl md:text-3xl font-medium` — "Net Dynamics"
- `<button>` `w-full max-w-[280px] py-3.5 bg-white flex items-center justify-center gap-2 text-black hover:bg-white/90 transition-colors group btn-cut`:
- `<span>` `text-sm font-medium` — "Discover Now"
- `<ArrowRight className="w-4 h-4 group-hover:translate-x-1 transition-transform" />`
- **Col 3** (`.anim-stagger`, delay 1s) — `flex items-center justify-center md:justify-end gap-3`:
- Three social buttons, each `w-10 h-10 bg-white flex items-center justify-center text-black hover:bg-white/90 transition-colors btn-cut-sm`, containing custom inline SVGs (`w-4 h-4 fill="currentColor"`, viewBox `0 0 24 24`): **X (Twitter)**, **LinkedIn**, **Facebook** — standard brand path data.
### Staggered Animation Delays (summary)
| Element | Class | Delay |
|---|---|---|
| Background video | `anim-fade` | 0.2s |
| Logo + brand | `anim-stagger` | 0.1s |
| Nav buttons | `anim-stagger` | 0.2s |
| Left column | `anim-stagger` | 0.4s |
| Center heading | `anim-stagger` | 0.5s |
| Bottom col 1 | `anim-stagger` | 0.7s |
| Bottom col 2 | `anim-stagger` | 0.85s |
| Bottom col 3 | `anim-stagger` | 1s |
### Responsive Rules
- Page padding: `p-3` mobile / `md:p-4` desktop
- Nav and content horizontal padding: `px-6` / `md:px-10`
- Left column: hidden below `lg`
- Nav buttons: hidden below `md`
- Heading scales: `text-3xl → sm:4xl → md:5xl → lg:6xl → xl:7xl`
- Bottom row: single column on mobile, 3 columns from `md` up
- On mobile: bottom-row columns 1 & 3 are **center-aligned** (`justify-center`); on `md+` they're `justify-end`
- Column 2 gap: `gap-8` mobile / `md:gap-24` desktop
- Social button text and description text: `text-center` on mobile, `md:text-left` (with `md:ml-auto`)
### index.html
- `<title>VortxLab Creations</title>`
- Google Fonts Inter link: `https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap`
### Tailwind config
```js
theme: { extend: { fontFamily: { inter: ['Inter', 'sans-serif'] } } }
```
---
Fun 404 PageLanding Page · free prompt · copy-paste
Build a full-screen animated 404 error page for a children's brand called "TinyTrails" using React, Tailwind CSS, and Lucide React icons. The page must be a single `App.tsx` component. Use the Inter font (weights 400–900) loaded from Google Fonts. The page is a single viewport-height screen with no scrolling.
---
**LAYOUT & BACKGROUND:**
- The full page is `w-full h-screen overflow-hidden flex flex-col` with a CSS linear gradient background from `#FF8233` (top) to `#FDAC55` (bottom).
---
**BACKGROUND "404" TEXT EFFECT:**
- Behind everything, centered in the viewport, render the text "404" in white (`#FFFFFF`), `font-black`, `leading-none`, `tracking-tighter`, `whitespace-nowrap`.
- Font size: `clamp(200px, 48vw, 800px)`.
- The text is scaled horizontally by `1.15` and vertically dynamically: on mount (and resize), measure the text element's `offsetHeight`, divide `window.innerHeight` by that height, and multiply by `1.4` to get the Y scale. Apply via `transform: scale(1.15, ${scaleY * 1.4})`.
- Over the "404" text (same centered container), render a white (`#FFFFFF`) oval: a `div` with `rounded-full`, height `h-[22vh] sm:h-[26vh] md:h-[50vh]`, width `clamp(120px, 20vw, 400px)`, scaled vertically by the same dynamic `scaleY` value with `transformOrigin: center`.
- The entire background layer (text + oval) is wrapped in a container with `opacity: 0.8` and a CSS mask that fades to transparent at the bottom: `mask-image: linear-gradient(to bottom, black 40%, transparent 95%)` (with `-webkit-mask-image` for Safari).
- This layer is `absolute inset-0 pointer-events-none`.
---
**NAVIGATION BAR:**
- `relative z-20`, flex row, items centered, `justify-between`, padding `px-4 sm:px-6 md:px-12 py-4 sm:py-5`.
- **Logo (left):** A 2x2 grid of white circles (`grid-cols-2 gap-0.5`), each circle `w-2.5 h-2.5 sm:w-3 sm:h-3 bg-white rounded-full`. Next to it, the text "TinyTrails" in `text-white font-bold text-lg sm:text-xl ml-1`.
- **Desktop nav links (center/right):** Hidden on mobile (`hidden md:flex`), a row of pill buttons with `gap-1`. Items: "About Us", "Programs", "Reviews", "FAQ", "Contacts". Each is an `<a>` with `px-4 py-1.5 text-sm font-medium rounded-full bg-white` and text color `#F16524`, with `hover:opacity-90 transition-colors`.
- **Menu button (right):** A pill button with `px-4 py-2 sm:px-5 sm:py-2.5 rounded-full text-white` and background color `#F16524`. Contains a Lucide `Menu` icon (`w-4 h-4`) and the text "Menu" (`text-sm font-medium hidden sm:inline`). Has `hover:opacity-90 transition-colors`.
---
**MOBILE MENU OVERLAY:**
- Fixed fullscreen (`fixed inset-0 z-50`), with visibility toggled. Transition: `duration-500 ease-[cubic-bezier(0.16,1,0.3,1)]`.
- **Backdrop:** `absolute inset-0 bg-black/40 backdrop-blur-sm`, fades in/out with `opacity` transition over 500ms. Clicking it closes the menu.
- **Panel:** Slides in from right. `absolute top-0 right-0 h-full w-full sm:w-[380px]`, translates between `translate-x-full` (closed) and `translate-x-0` (open). Background: `linear-gradient(135deg, #FF6B1A 0%, #FF9642 100%)`.
- **Panel header:** Same logo as nav (2x2 white dots + "TinyTrails" bold white text). Close button: `w-10 h-10 rounded-full bg-white/20 text-white hover:bg-white/30` with Lucide `X` icon (`w-5 h-5`).
- **Menu items:** Staggered animation. Each item is `px-6 py-4 text-lg font-semibold text-white rounded-2xl bg-white/10 hover:bg-white/20 transition-all duration-300`. When open: `opacity-100 translate-y-0`; when closed: `opacity-0 translate-y-4`. Transition delay per item: `150 + i * 60`ms when opening, `0ms` when closing.
- **Bottom CTA:** Absolutely positioned at bottom (`absolute bottom-0 left-0 right-0 p-6`). A pill link: `w-full py-4 rounded-full bg-white font-semibold text-base` with text color `#F16524`, `hover:scale-[1.02]`. Contains Lucide `ArrowLeft` icon + "Back to Home". Fades in with 450ms delay when opening.
- Body scroll is locked (`overflow: hidden`) when menu is open.
---
**CENTER VIDEO:**
- An absolutely positioned container (`absolute inset-0 flex items-center justify-center pointer-events-none`) with `margin-top: calc(-6vh - 40px)` to shift it upward.
- Inside, a responsive container: `w-[120vw] h-[85vh] sm:w-[70vw] sm:h-[70vh] md:w-[62vw] md:h-[78vh]`.
- Contains a `<video>` element with `autoPlay loop muted playsInline`, class `w-full h-full object-contain pointer-events-none mix-blend-darken`.
- **Video source URL:** `https://meez.design/web/media/prompt-media/v/118ba14fa3179a4f.mp4`
---
**BOTTOM CONTENT:**
- `relative z-30 mt-auto pb-8 sm:pb-16 flex flex-col items-center text-center px-4`.
- Heading: "Oops, something went wrong!" in `text-white text-lg sm:text-xl md:text-2xl font-medium mb-3 sm:mb-4`.
- Button/link: An `<a href="/">` pill with `inline-flex items-center gap-2 px-6 py-3 sm:px-8 sm:py-4 rounded-full text-white font-semibold text-sm sm:text-base` and background `#F16524`. Has `hover:scale-105 hover:shadow-lg transition-all`. Contains Lucide `ArrowLeft` icon (`w-4 h-4 sm:w-5 sm:h-5`) + "Back to Home".
---
**GLOBAL CSS (`index.css`):**
```css
@tailwind base;
@tailwind components;
@tailwind utilities;
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Inter', sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
```
---
**HTML HEAD:**
- Load Inter font from Google Fonts: `https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap` with preconnect to `fonts.googleapis.com` and `fonts.gstatic.com`.
- Title: "404 - Page Not Found".
---
**KEY COLOR PALETTE:**
- Page gradient: `#FF8233` to `#FDAC55`
- Accent/buttons: `#F16524`
- Text & shapes: `#FFFFFF`
- Menu gradient: `#FF6B1A` to `#FF9642`
- Menu overlay backdrop: `black/40` with `backdrop-blur-sm`
- Menu item backgrounds: `white/10`, `white/20` on hover
---
**DEPENDENCIES:** React, Tailwind CSS, Lucide React (`ArrowLeft`, `Menu`, `X` icons). Vite build system. No other libraries.
---
## Source Code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>404 - Page Not Found</title>
<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=Inter:wght@400;500;600;700;800;900&display=swap" rel="stylesheet" />
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Inter', sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
overflow: hidden;
}
.page {
position: relative;
width: 100%;
height: 100vh;
overflow: hidden;
display: flex;
flex-direction: column;
background: linear-gradient(to bottom, #FF8233, #FDAC55);
}
/* Background 404 layer */
.bg-layer {
position: absolute;
inset: 0;
pointer-events: none;
opacity: 0.8;
-webkit-mask-image: linear-gradient(to bottom, black 40%, transparent 95%);
mask-image: linear-gradient(to bottom, black 40%, transparent 95%);
}
.bg-text-container {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
user-select: none;
}
.bg-text {
font-size: clamp(200px, 48vw, 800px);
font-weight: 900;
line-height: 1;
letter-spacing: -0.05em;
white-space: nowrap;
color: #FFFFFF;
-webkit-text-fill-color: #FFFFFF;
}
.bg-oval-container {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
}
.bg-oval {
width: clamp(120px, 20vw, 400px);
height: 22vh;
border-radius: 9999px;
background: #FFFFFF;
transform-origin: center;
}
/* Navigation */
.nav {
position: relative;
z-index: 20;
display: flex;
align-items: center;
justify-content: space-between;
padding: 16px 16px;
}
.nav-left {
display: flex;
align-items: center;
gap: 8px;
}
.logo-dots {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 2px;
}
.logo-dot {
width: 10px;
height: 10px;
background: white;
border-radius: 50%;
}
.logo-text {
color: white;
font-weight: 700;
font-size: 18px;
margin-left: 4px;
}
.nav-links {
display: none;
align-items: center;
gap: 4px;
}
.nav-link {
padding: 6px 16px;
font-size: 14px;
font-weight: 500;
border-radius: 9999px;
background: white;
color: #F16524;
text-decoration: none;
transition: opacity 0.2s;
}
.nav-link:hover {
opacity: 0.9;
}
.menu-btn {
display: flex;
align-items: center;
gap: 8px;
padding: 8px 16px;
border-radius: 9999px;
background: #F16524;
color: white;
border: none;
cursor: pointer;
font-family: inherit;
transition: opacity 0.2s;
}
.menu-btn:hover {
opacity: 0.9;
}
.menu-btn-text {
font-size: 14px;
font-weight: 500;
display: none;
}
/* Menu Overlay */
.menu-overlay {
position: fixed;
inset: 0;
z-index: 50;
visibility: hidden;
transition: visibility 0s 0.5s;
}
.menu-overlay.open {
visibility: visible;
transition: visibility 0s 0s;
}
.menu-backdrop {
position: absolute;
inset: 0;
background: rgba(0, 0, 0, 0.4);
backdrop-filter: blur(4px);
-webkit-backdrop-filter: blur(4px);
opacity: 0;
transition: opacity 0.5s;
}
.menu-overlay.open .menu-backdrop {
opacity: 1;
}
.menu-panel {
position: absolute;
top: 0;
right: 0;
height: 100%;
width: 100%;
background: linear-gradient(135deg, #FF6B1A 0%, #FF9642 100%);
transform: translateX(100%);
transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}
.menu-overlay.open .menu-panel {
transform: translateX(0);
}
.menu-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 20px 24px;
}
.menu-close-btn {
width: 40px;
height: 40px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
background: rgba(255, 255, 255, 0.2);
color: white;
border: none;
cursor: pointer;
transition: background 0.2s;
}
.menu-close-btn:hover {
background: rgba(255, 255, 255, 0.3);
}
.menu-items {
padding: 32px 24px 0;
display: flex;
flex-direction: column;
gap: 8px;
}
.menu-item {
display: block;
padding: 16px 24px;
font-size: 18px;
font-weight: 600;
color: white;
text-decoration: none;
border-radius: 16px;
background: rgba(255, 255, 255, 0.1);
transition: all 0.3s;
opacity: 0;
transform: translateY(16px);
}
.menu-item:hover {
background: rgba(255, 255, 255, 0.2);
}
.menu-overlay.open .menu-item {
opacity: 1;
transform: translateY(0);
}
.menu-overlay.open .menu-item:nth-child(1) { transition-delay: 150ms; }
.menu-overlay.open .menu-item:nth-child(2) { transition-delay: 210ms; }
.menu-overlay.open .menu-item:nth-child(3) { transition-delay: 270ms; }
.menu-overlay.open .menu-item:nth-child(4) { transition-delay: 330ms; }
.menu-overlay.open .menu-item:nth-child(5) { transition-delay: 390ms; }
.menu-bottom {
position: absolute;
bottom: 0;
left: 0;
right: 0;
padding: 24px;
opacity: 0;
transform: translateY(24px);
transition: all 0.5s;
}
.menu-overlay.open .menu-bottom {
opacity: 1;
transform: translateY(0);
transition-delay: 450ms;
}
.menu-bottom-btn {
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
width: 100%;
padding: 16px;
border-radius: 9999px;
background: white;
color: #F16524;
font-weight: 600;
font-size: 16px;
text-decoration: none;
transition: transform 0.2s;
}
.menu-bottom-btn:hover {
transform: scale(1.02);
}
/* Video */
.video-container {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
pointer-events: none;
margin-top: calc(-6vh - 40px);
}
.video-wrapper {
width: 120vw;
height: 85vh;
position: relative;
}
.video-wrapper video {
width: 100%;
height: 100%;
object-fit: contain;
pointer-events: none;
mix-blend-mode: darken;
}
/* Bottom content */
.bottom-content {
position: relative;
z-index: 30;
margin-top: auto;
padding-bottom: 32px;
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
padding-left: 16px;
padding-right: 16px;
}
.bottom-heading {
color: white;
font-size: 18px;
font-weight: 500;
margin-bottom: 12px;
}
.bottom-btn {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 12px 24px;
border-radius: 9999px;
background: #F16524;
color: white;
font-weight: 600;
font-size: 14px;
text-decoration: none;
transition: all 0.2s;
}
.bottom-btn:hover {
transform: scale(1.05);
box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
}
/* Responsive */
@media (min-width: 640px) {
.nav {
padding: 20px 24px;
}
.logo-dot {
width: 12px;
height: 12px;
}
.logo-text {
font-size: 20px;
}
.menu-btn {
padding: 10px 20px;
}
.menu-btn-text {
display: inline;
}
.menu-panel {
width: 380px;
}
.video-wrapper {
width: 70vw;
height: 70vh;
}
.bg-oval {
height: 26vh;
}
.bottom-content {
padding-bottom: 64px;
}
.bottom-heading {
font-size: 20px;
margin-bottom: 16px;
}
.bottom-btn {
padding: 16px 32px;
font-size: 16px;
}
}
@media (min-width: 768px) {
.nav {
padding: 20px 48px;
}
.nav-links {
display: flex;
}
.video-wrapper {
width: 62vw;
height: 78vh;
}
.bg-oval {
height: 50vh;
}
.bottom-heading {
font-size: 24px;
}
}
</style>
</head>
<body>
<div class="page">
<!-- Background 404 text + oval -->
<div class="bg-layer">
<div class="bg-text-container">
<span class="bg-text" id="bgText">404</span>
</div>
<div class="bg-oval-container">
<div class="bg-oval" id="bgOval"></div>
</div>
</div>
<!-- Navigation -->
<nav class="nav">
<div class="nav-left">
<div class="logo-dots">
<div class="logo-dot"></div>
<div class="logo-dot"></div>
<div class="logo-dot"></div>
<div class="logo-dot"></div>
</div>
<span class="logo-text">TinyTrails</span>
</div>
<div class="nav-links">
<a href="#" class="nav-link">About Us</a>
<a href="#" class="nav-link">Programs</a>
<a href="#" class="nav-link">Reviews</a>
<a href="#" class="nav-link">FAQ</a>
<a href="#" class="nav-link">Contacts</a>
</div>
<button class="menu-btn" onclick="openMenu()">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="4" x2="20" y1="12" y2="12"/><line x1="4" x2="20" y1="6" y2="6"/><line x1="4" x2="20" y1="18" y2="18"/></svg>
<span class="menu-btn-text">Menu</span>
</button>
</nav>
<!-- Menu Overlay -->
<div class="menu-overlay" id="menuOverlay">
<div class="menu-backdrop" onclick="closeMenu()"></div>
<div class="menu-panel">
<div class="menu-header">
<div class="nav-left">
<div class="logo-dots">
<div class="logo-dot"></div>
<div class="logo-dot"></div>
<div class="logo-dot"></div>
<div class="logo-dot"></div>
</div>
<span class="logo-text">TinyTrails</span>
</div>
<button class="menu-close-btn" onclick="closeMenu()">
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M18 6 6 18"/><path d="m6 6 12 12"/></svg>
</button>
</div>
<div class="menu-items">
<a href="#" class="menu-item">About Us</a>
<a href="#" class="menu-item">Programs</a>
<a href="#" class="menu-item">Reviews</a>
<a href="#" class="menu-item">FAQ</a>
<a href="#" class="menu-item">Contacts</a>
</div>
<div class="menu-bottom">
<a href="/" class="menu-bottom-btn">
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m12 19-7-7 7-7"/><path d="M19 12H5"/></svg>
Back to Home
</a>
</div>
</div>
</div>
<!-- Video -->
<div class="video-container">
<div class="video-wrapper">
<video autoplay loop muted playsinline src="https://meez.design/web/media/prompt-media/v/118ba14fa3179a4f.mp4"></video>
</div>
</div>
<!-- Bottom content -->
<div class="bottom-content">
<h2 class="bottom-heading">Oops, something went wrong!</h2>
<a href="/" class="bottom-btn">
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m12 19-7-7 7-7"/><path d="M19 12H5"/></svg>
Back to Home
</a>
</div>
</div>
<script>
const bgText = document.getElementById('bgText');
const bgOval = document.getElementById('bgOval');
const menuOverlay = document.getElementById('menuOverlay');
function updateScale() {
if (!bgText) return;
const naturalHeight = bgText.offsetHeight;
const viewportHeight = window.innerHeight;
const scaleY = viewportHeight / naturalHeight;
bgText.style.transform = `scale(1.15, ${scaleY * 1.4})`;
bgOval.style.transform = `scaleY(${scaleY})`;
}
updateScale();
window.addEventListener('resize', updateScale);
function openMenu() {
menuOverlay.classList.add('open');
document.body.style.overflow = 'hidden';
}
function closeMenu() {
menuOverlay.classList.remove('open');
document.body.style.overflow = '';
}
</script>
</body>
</html>
Wellness DeviceLanding Page · free prompt · copy-paste
Build a single-page hero section for a product called "Measured" — a health/wellness wearable device landing page. The page is fullscreen (100vh), dark/moody aesthetic with layered imagery, a cursor-following spotlight reveal effect, and a frosted-glass navigation. Use React + Vite + Tailwind CSS + TypeScript.
---
## Fonts
1. **Google Fonts — Inter** (weights 300-700): Used as the global default font on all elements (`* { font-family: 'Inter', sans-serif; }`)
2. **Google Fonts — Instrument Serif** (regular + italic): Used for the hero heading "Measured". Load via `<link>` in index.html: `https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&display=swap`
3. **Helvetica Neue Roman** (self-hosted woff2/woff in `/public/fonts/`): Applied via a `.font-helvetica-neue` class on the hero section wrapper. Declare with `@font-face`.
---
## Asset URLs (exact)
- **Background Image (BG_IMAGE_1):** `https://meez.design/web/media/ext/b3101a323e5a3897.webp`
- **Front Video (FRONT_VIDEO):** `https://meez.design/web/media/prompt-media/v/eecd18ba5aa24812.mp4`
- **Overlay Image (OVERLAY_IMAGE):** `https://meez.design/web/media/ext/204e1738460ecf88.png`
---
## Page Structure & Layers (z-index order)
### Navigation (z-50, fixed)
- **Logo (top-left):** Custom SVG geometric logo (white, 28x28), resembling angular interlocking shapes. The exact SVG path: `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` (viewBox 0 0 256 256, fill white)
- **Desktop center pill nav (hidden on mobile):** Fixed horizontally centered, contains buttons: "Device", "Real Stories", "Science", "Plans", "Reach Us". Uses `.liquid-glass` styling (frosted glass). Buttons are `text-white/70`, `text-sm`, `font-medium`, rounded-full, hover to white.
- **Desktop CTA (top-right, hidden on mobile):** `.liquid-glass` pill button with a small green dot (w-2 h-2 rounded-full bg-green-400) and text "Reserve Yours", white text-sm font-medium.
- **Mobile hamburger (top-right, hidden md+):** `.liquid-glass` rounded-full pill, contains two white lines (w-5 h-[1.5px] and w-3.5 h-[1.5px]).
### Mobile Fullscreen Menu (z-55)
- Background: `#0a0a0a` solid
- Close button: top-right, `.liquid-glass` rounded-full with X made of two rotated white lines (+45deg, -45deg)
- Nav items stacked vertically, centered, `text-3xl sm:text-4xl`, white/90, font-medium
- "Reserve Yours" CTA at bottom with green dot, `.liquid-glass` pill
- Staggered entry animations: each item slides up from 24px with opacity 0->1, delays incremented by 60ms starting at 100ms. Uses `cubic-bezier(0.77, 0, 0.18, 1)` easing. Close button rotates in from -90deg with scale 0.8.
### Hero Section (100vh, overflow hidden)
**Layer 1 — Grid Background (z-0, opacity 0.1):**
- SVG with a repeating pattern of 48px cells. Pattern draws an L-shaped path (`M 48 0 L 0 0 0 48`), stroke `#64748b`, strokeWidth 0.6, no fill.
- The grid subtly parallax-shifts based on cursor position (offset calculated as cursor position relative to section center * 16, eased at 0.06 factor).
**Layer 2 — Background Image (z-10):**
- `BG_IMAGE_1` displayed as `background-image`, `bg-center bg-cover bg-no-repeat`, absolutely positioned inset-0.
**Layer 3 — Hero Text (z-20):**
- The word "Measured" in huge uppercase text
- Font: `'Instrument Serif', serif`
- Sizes: `text-[4.5rem]` default, `xs:text-[5.5rem]`, `sm:text-[10rem]`, `md:text-[13rem]`, `lg:text-[16rem]`
- `leading-[0.9]`, white, centered, positioned `top-20 sm:top-28 md:top-32`
**Layer 4 — Overlay Image (z-25):**
- `OVERLAY_IMAGE` as an `<img>` tag, absolutely positioned inset-0, `w-full h-full object-cover`, pointer-events-none. This is a semi-transparent PNG that sits on top of the background to add depth/atmosphere.
**Layer 5 — Spotlight Reveal (z-30):**
- A cursor-following radial reveal mask that shows a video underneath only where the cursor hovers.
- **Radius:** 260px
- **Mask gradient stops:** center full white (0-40%), then feathers out: 60% at 0.75 alpha, 75% at 0.4, 88% at 0.12, 100% at 0 (fully transparent).
- **Implementation:** A hidden `<canvas>` draws the radial gradient at the smoothed cursor position. The canvas is exported as a dataURL and applied as a CSS mask (`-webkit-mask-image` / `mask-image`) on a div that contains the video.
- **Cursor smoothing:** Uses `requestAnimationFrame` loop with lerp factor 0.1 (`smooth += (target - smooth) * 0.1`).
- **Video placement:** The video (`FRONT_VIDEO`) is clipped to the bottom 60% of the viewport using `clipPath: 'inset(40% 0 0 0)'`. It autoplays, loops, is muted, and uses playsInline.
---
## Liquid Glass CSS Effect (`.liquid-glass`)
```css
.liquid-glass {
background: rgba(255, 255, 255, 0.01);
background-blend-mode: luminosity;
backdrop-filter: blur(4px);
-webkit-backdrop-filter: blur(4px);
border: none;
box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.1);
position: relative;
overflow: hidden;
}
.liquid-glass::before {
content: '';
position: absolute;
inset: 0;
border-radius: inherit;
padding: 1.4px;
background: linear-gradient(180deg,
rgba(255,255,255,0.45) 0%, rgba(255,255,255,0.15) 20%,
rgba(255,255,255,0) 40%, rgba(255,255,255,0) 60%,
rgba(255,255,255,0.15) 80%, rgba(255,255,255,0.45) 100%);
-webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
-webkit-mask-composite: xor;
mask-composite: exclude;
pointer-events: none;
}
```
This creates a near-invisible frosted glass background with a subtle gradient border using the mask-composite trick (border-only gradient).
---
## Key Behaviors
1. **Body overflow locks** when mobile menu is open
2. **No scrolling** — single viewport hero only
3. **Background is white** on the root container (`bg-white`), but the hero section fills the entire viewport with dark imagery
4. **The reveal effect only shows video in the bottom 60%** of the screen (the top 40% is masked out via clipPath), so hovering over the top portion shows nothing extra — just the base layers
---
## Summary of the Visual Effect
The user sees a dark, atmospheric product shot (wearable device on a wrist) with "Measured" in giant serif text overlaid. A semi-transparent overlay adds haze/depth. As the user moves their cursor, a soft spotlight circle reveals an underlying looping video (showing the product in motion) — but only in the lower portion of the screen. The grid background subtly shifts with parallax. Navigation uses an elegant frosted-glass pill aesthetic.
Church CommunityMobile App · free prompt · copy-paste
Create a mobile app showcase page displaying 3 iPhone mockups for "Christ Family Church" -- a church website mobile design. Use React Native with Expo Router, react-native-reanimated, and Manrope font (weights: Light, Regular, Medium).
**General layout:**
- Background color: `#5A4C41`
- 3 iPhone frames shown side by side on desktop (horizontal scroll), stacked vertically on mobile (<900px) with scale-to-fit
- Desktop: 40px padding, 48px gap between phones
- Mobile: 20px padding, 32px gap, phones scale down to fit screen width
- Each phone frame: 375x812 artboard inside a black rounded frame (borderRadius 50, borderWidth 2, borderColor `#2a2a2a`), with dynamic island notch (126x36, black, borderRadius 18) and home indicator bar (134x5, white 30% opacity)
- Soft shadow on frames: `shadowColor: #000, offset: {0, 12}, opacity: 0.3, radius: 24`
**Assets (all from our CDN):**
- Portrait photo: `https://meez.design/web/media/ext/a48cb56bb7c165fb.png`
- Logo (cross icon): `https://meez.design/web/media/ext/9c92417d3cd1ae53.png`
- Quote mark icon: `https://meez.design/web/media/ext/8bf0eae040f2e969.png`
- Star/compass decorative icon: `https://meez.design/web/media/ext/512a309ede976899.png`
- Hero image (hands raised worship): `https://meez.design/web/media/ext/d73c0ce69a6957dd.png`
- Avatars row: `https://meez.design/web/media/ext/e10b38cafd253935.png`
- Arrow icon: `https://meez.design/web/media/ext/45c106e2d5aa9422.png`
- Screen 3 hero (preacher): `https://meez.design/web/media/ext/e825edc63e4b9ced.png`
- Play button icon: `https://meez.design/web/media/ext/ca4555fb83ce7262.png`
**Color palette:**
- Dark background: `rgb(29, 25, 26)`
- Cream/gold accent: `rgb(241, 229, 198)` / `#F1E5C6`
- White: `#FFFFFF`
- Light text on dark: `rgba(255, 255, 255, 0.77)`, `rgba(255, 255, 255, 0.6)`, `rgba(255, 255, 255, 0.5)`, `rgba(255, 255, 255, 0.3)`
- Off-white: `#F5F0E8`
**Typography (all Manrope):**
- Brand name in header: 17px Regular, white, lineHeight 20
- Rotated sidebar text: 14px, Medium (name) and Regular (role), letterSpacing 1.2, half-transparent white
- Quote text: 20px Regular, lineHeight 27, `rgba(255,255,255,0.77)`
- Event card title: 36px Medium, letterSpacing -0.5, color `#1a1a1a`
- Event card date: 17px Regular, `#888888`
- Hero headline (Screen 2): 52px Light, lineHeight 52, letterSpacing -2.5, cream color `#F1E5C6`
- Hero subtext: 21px Regular, lineHeight 27, white 60% opacity
- CTA button text: 21px Medium, dark color
- Section title "Upcoming" (Screen 3): 38px Regular, letterSpacing -0.8, white
- Event list titles: 21px Regular, lineHeight 26
- Event times: 17px Regular, `#999999`
- Date card day: 34px Medium
- Date card month: 18px Regular
- Menu links: 36px Light, letterSpacing -0.8, white
**Animations:**
- Each iPhone frame fades in with `FadeIn.duration(600)` using react-native-reanimated
- All text uses a typewriter effect (characters appear one by one) with configurable delay and speed
- Menu overlay fades in with `FadeIn.duration(200)`
**Screen 1 - Testimonial:**
- Dark background (`rgb(29, 25, 26)`)
- Header: logo (46x46) + "Christ Family Church" text on left, hamburger menu (3 lines, 2 long + 1 short) on right, paddingTop 48, paddingHorizontal 19
- Rotated text on left side: "Anna Miller" / "Community Member" rotated -90deg, positioned at left: -44, top: 115, translateX: -60
- Portrait photo: positioned at top: 120, left: 125, size 240x300
- Quote icon (28x24) at left: 19, top: 395
- Quote text at left: 19, top: 440, width: 336: "We want to be a family where people can connect and benefit from friendships in Christ."
- White card at bottom (height 245): contains "Sunday Worship Service" (36px), "Dec 7th, 10-11:30am", "Learn more" with arrow, star icon (48x48) bottom-right
**Screen 2 - Hero/Landing:**
- Full hero image covering top 472px with dark overlay (15% black)
- Same header as Screen 1
- Avatars image (149x53) at left: 19, top: 442
- Headline at top: 520: "Take a step toward the light"
- Subtext: "Discover faith, hope, and a home for your soul"
- Cream CTA button at bottom (height 52, bottom: 32): "Join us" with arrow icon
**Screen 3 - Sermons/Events:**
- Hero image at top: covers 345px height (width: 415, offset left: -20), with 30% black overlay
- Play button (65x65 circle, cream background) centered at top: 175
- White body section starting at top: 343
- Dark band inside body (height 220, `rgb(29, 25, 26)`) behind "Upcoming" title
- Events list with date cards (68x90):
- 14 Dec: "Luke 1 | A Story From Zechariah" - 6:30 - 8:00 pm (white date card)
- 21 Dec: "Romans 15 | Living For Christ Alone" - 8:30 - 10:00 am (cream date card)
- 28 Dec: "Romans 9 | The Sovereignty Of God" - 5:30 - 7:00 pm (cream date card)
- 4 Jan: "John 3 | Born Again" (partial/faded at 50% opacity, cream date card)
- Gap between event rows: 22px
**Menu overlay (shared across all screens):**
- Full-screen dark overlay (`rgb(29, 25, 26)`), z-index 100
- Header with logo + brand name and X close button (two rotated lines)
- Navigation links: Home, About, Events, Sermons, Contact (36px Light)
- Gap between links: 22px
- Cream CTA "Join us" button at bottom (bottom: 36)
- Hamburger button on each screen opens the menu; close button dismisses it
ADHD PlannerLanding Page · free prompt · copy-paste
Build a single-page landing site for "Drift" -- a calm, ADHD-friendly planner app. Use React + Vite + TypeScript + Tailwind CSS + lucide-react for icons. No other UI libraries.
### Fonts
Import via Google Fonts in `index.css`:
- **Inter** (weights 400, 500, 600) -- used as base body font
- **Instrument Serif** (italic only) -- used for the italic word "the stress" in the hero heading
```css
@import url('https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@1&family=Inter:wght@400;500;600&display=swap');
```
Body: `font-family: 'Inter', sans-serif;` with antialiased rendering. `overflow-x: clip` on body.
### Color Palette
- Hero overlay: `bg-black/20`
- About section background: `#F6E4CF`
- Dark text / icons in About: `#321C04`
- Light cream (button backgrounds in About): `#FFF9F2`
- Muted accent (divider, secondary button bg): `#D9C4AA`
- Secondary button hover: `#CEBA9E`
- Dark button hover: `#1F1003`
### Tailwind Config
Add a custom keyframe `fade-in-down` (0%: opacity 0, translateY -8px; 100%: opacity 1, translateY 0) with 0.2s ease-out animation.
---
### SECTION 1: HERO (full viewport height)
- Full-screen section (`h-screen`, `overflow-hidden`, `mb-[-25px]` negative bottom margin so the next section overlaps it slightly)
- **Background video** (autoPlay, muted, loop, playsInline, object-cover, absolute inset-0):
```
https://meez.design/web/media/prompt-media/v/73dbfd8ef105173b.mp4
```
- **Semi-transparent overlay**: `absolute inset-0 bg-black/20`
#### Navbar (centered floating pill)
- Positioned `absolute top-6 left-1/2 -translate-x-1/2 z-50`
- White rounded-full pill with shadow-lg containing:
- Brand text "Drift." (text-lg, font-bold, tracking-tight, text-black)
- Animated hamburger icon (two lines that animate to an X on click using rotate-45/-rotate-45 with cubic-bezier(0.77,0,0.175,1) easing, 300ms)
- Dropdown (below the pill): white rounded-2xl container with links "Features", "Drift AI", "FAQ". Animated with opacity/scale/translate transitions. Hidden by default, pointer-events-none when closed.
#### Hero Content (bottom-aligned)
- Flex column, `justify-end`, padding bottom 12 (md:16)
- **Heading** (centered):
- Line 1: "Own your time" -- text-5xl / sm:text-7xl / md:text-8xl / lg:text-[96px], font-normal, text-white, leading-[1.1], tracking-tight
- Line 2: "without *the stress*" -- same sizing. The words "the stress" are rendered in Instrument Serif italic via inline style `fontFamily: "'Instrument Serif', serif", fontStyle: 'italic'` inside an `<em>` tag with className `not-italic`
- **Subtitle**: "Drift is a calm, ADHD-friendly planner that turns scattered ideas into a clear path" -- text-white/80, text-sm md:text-base, font-medium, max-w-[420px], centered
- **CTA Bar** (centered below heading with gap):
- Container: `bg-black/25 backdrop-blur-md rounded-xl`, flex row, items-center, pl-6 pr-1 py-1
- Desktop text: "No noise. No complicated systems. Just your day, gently sorted." (text-white, text-sm, font-medium, hidden on mobile)
- Mobile text (sm:hidden): "No noise. Just your day, gently sorted."
- Button: "Start for free" -- bg-white, text-black, text-sm, font-medium, px-5, py-2.5, rounded-xl, hover:bg-white/90
---
### SECTION 2: ABOUT SECTION
- Background: `bg-[#F6E4CF]`
- **Rounded top corners**: `rounded-t-[25px]` with `relative z-10` (overlaps hero by 25px)
- Padding: py-20 md:py-32, px-6
#### Top Area (centered, max-w-3xl)
- Paragraph: "We craft tools that move with your rhythm, not over it. Designed for ease, presence, and flow." -- text-[#321C04], text-base md:text-lg, text-center, leading-relaxed, max-w-lg
- Two buttons (flex-wrap, centered, gap-4):
1. **"Say hello"** -- dark pill button (`bg-[#321C04]`, `text-[#FFF9F2]`, rounded-full). Has a white circle on the left containing a Mail icon (lucide-react, size 16). Text is uppercase, tracking-wide, font-medium.
2. **"Stay informed"** -- muted pill button (`bg-[#D9C4AA]`, `text-[#321C04]`, rounded-full). Has a white circle on the left containing a Plus icon. Same text styling.
#### Decorative Divider
- Full-width flex row with: small circle (w-2 h-2 rounded-full bg-[#D9C4AA]) + 2px gap + horizontal line (flex-1 h-[2px] bg-[#D9C4AA]) + 2px gap + small circle
#### Bottom Area (max-w-6xl, flex-col md:flex-row)
- Left: Custom SVG logo (40x40, viewBox 0 0 256 256, abstract geometric shape with rounded quadrants, fill #321C04) + label "Calm / Amplified" (text-xs, uppercase, tracking-widest, font-semibold, line break between words)
- Right: Large paragraph: "We make AI tools and assistants. But, most importantly, we help you remember what gentle productivity looks like when software moves with you, not over you. We create systems that carry the cognitive weight, so you can attend to what truly counts." -- text-2xl / sm:text-3xl / md:text-4xl / lg:text-[42px], leading-[1.3], font-normal, text-[#321C04]
---
### SECTION 3: FEATURES SECTION (scroll-driven cards)
- **Fixed background image** (behind content, -z-10):
```
https://meez.design/web/media/ext/6d946368c80a4d1f.webp
```
- Padding: px-5 md:px-10 lg:px-16, py-20 md:py-40 lg:py-48
#### Layout: CSS Grid on lg+ (400px / xl:460px left column, 1fr right column, gap-24 / xl:gap-48)
#### Left Column (sticky on desktop)
- `lg:sticky lg:top-0 lg:h-screen lg:flex lg:flex-col lg:justify-between lg:py-32`
- Heading: "Software that flows with your mind, not over it" -- text-white, text-2xl / sm:text-3xl / lg:text-[46px], leading-[1.2], font-normal
- Feature nav buttons (hidden below lg): list of feature titles as buttons. Active state: `bg-black/20 text-white`. Inactive: `bg-black/20 text-white/40`. Clicking scrolls to card (smooth, block: center).
- Bottom CTA (hidden below lg): "No noise. No complicated systems. Just your day, gently sorted." + "Start for free" button (same style as hero)
#### Right Column (scrolling cards)
- 3 feature cards with IntersectionObserver:
- **Active detection** (threshold 0.6): highlights corresponding nav button
- **Reveal animation** (threshold 0.15): cards slide in from right (translate-x-16 to translate-x-0, opacity 0 to 1, duration-700, ease-out). Once revealed, stays visible.
Each card (`bg-black/20 backdrop-blur-sm rounded-3xl p-6 md:p-10`):
- Same SVG logo (40x40, fill rgba(255,255,255,0.8))
- Title (text-white, text-xl md:text-2xl, font-medium)
- Video (aspect-video, rounded-2xl, overflow-hidden, bg-black/30, autoPlay/muted/loop/playsInline)
- Description (text-white/60, font-medium, text-sm md:text-base, leading-relaxed)
**Feature data:**
1. Title: "Built for ease, not urgency"
Description: "Drift strips away the noise that makes organizing feel draining. Every surface is made to be soft, quiet, and intuitive so you can move forward, not get stuck decoding."
Video: `https://meez.design/web/media/prompt-media/v/7d15c4a1e6be1c22.mp4`
2. Title: "The gentlest way to start"
Description: "Beginning your day should feel natural, not daunting. Drift eases you into motion with subtle cues and a quiet view of what deserves your energy right now."
Video: `https://meez.design/web/media/prompt-media/v/64f44b8d061529bd.mp4`
3. Title: "Deep, undivided focus"
Description: "No interruptions, no clutter. Drift holds you in the present task with a stripped-back layout that softens all else until you are truly ready to shift."
Video: `https://meez.design/web/media/prompt-media/v/4ad0621c3e472f88.mp4`
---
### SVG Logo (used in About + Feature cards)
```svg
<svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="0 0 256 256" fill="none">
<path d="M 256 256 L 178 256 C 150.386 256 128 233.614 128 206 L 128 256 L 0 256 L 0 192 C 0 156.654 28.654 128 64 128 C 99.346 128 128 156.654 128 192 L 128 128 L 256 128 Z M 78 0 C 105.614 0 128 22.386 128 50 L 128 0 L 256 0 L 256 64 C 256 99.346 227.346 128 192 128 C 156.654 128 128 99.346 128 64 L 128 128 L 0 128 L 0 0 Z" fill="#321C04" />
</svg>
```
---
### File Structure
```
src/
App.tsx -- Hero section + renders AboutSection + FeaturesSection
main.tsx -- ReactDOM render
index.css -- Font imports + Tailwind directives + body styles
components/
Navbar.tsx -- Floating pill navbar with animated hamburger
AboutSection.tsx -- Cream-colored about section
FeaturesSection.tsx -- Dark features with sticky left + scrolling cards
```
Agent GroveSaaS · free prompt · copy-paste
Build a single full-screen (`h-screen w-full overflow-hidden`) hero page for **nexum** — a dark cinematic AI-ops landing hero with a full-bleed background video, glassmorphism nav/cards, and bottom-anchored content. Stack: React + Tailwind + `lucide-react` (`ChevronDown`, `Menu`, `X`). No routing. One section only.
### Fonts (exact)
Load from Google Fonts:
```
https://fonts.googleapis.com/css2?family=Geist:wght@300;400;500;600;700&family=Silkscreen:wght@400;700&display=swap
```
- Global body: `'Geist', -apple-system, BlinkMacSystemFont, sans-serif` with antialiased smoothing
- Stats number `"42,500+"` only: `fontFamily: "'Silkscreen', cursive"`, weight normal, tracking-tight
- Everything else is Geist
### Background video (exact URL + behavior)
```
https://meez.design/web/media/ext/3e968e8bf80d5a51.mp4
```
- Absolutely positioned `inset-0`, `h-full w-full object-cover`
- Attributes: `autoPlay`, `loop`, `muted`, `playsInline`
- No overlay gradient; content sits directly over the video at `z-10`
### Page title
`Nexum Hero`
### Layout architecture
```
<section> full viewport
<video> absolute full-bleed
<div z-10 flex-col h-full>
<nav> top bar
[mobile overlay + slide-in panel]
<main content> mt-auto bottom-anchored
left: headline + email CTA
right: two glass cards
```
Content is pinned to the bottom with `mt-auto`. On large screens: `lg:flex-row lg:items-end lg:justify-between`. On mobile/tablet: stacked column.
### Color / responsive text system (critical)
Many elements flip from near-black on small screens to white on `lg+` (because the video reads lighter/darker differently):
- Logo icon + “nexum” wordmark: `text/fill-[#010101]` → `lg:text/fill-white`
- H1: `text-[#010101]` → `lg:text-white`
- Stats number: `text-[#010101]` → `lg:text-white`
- Stats body: `text-[#010101]/70` → `lg:text-white/70`
- Testimonial text: `text-[#010101]/80` → `lg:text-white/80`
- Stratify name / Sara name: `#010101` → `lg:text-white`
- Role “Dir of Operations”: `#010101]/60` → `lg:text-white/60`
- Desktop nav links are always white/80 (desktop only shows at `md+`)
Primary CTA gradient (used on every “Get started” button):
```css
background: linear-gradient(to bottom, #2B2B2B, #101010)
```
Hover: `opacity-90`
### Logo (exact SVG)
24×24, viewBox `0 0 256 256`, path:
```
M 128 128 C 128 198.692 70.692 256 0 256 C 0 185.308 57.308 128 128 128 Z M 128 128 C 198.692 128 256 185.308 256 256 C 185.308 256 128 198.692 128 128 Z M 0 0 C 70.692 0 128 57.308 128 128 C 57.308 128 0 70.692 0 0 Z M 256 0 C 256 70.692 198.692 128 128 128 C 128 57.308 185.308 0 256 0 Z
```
Beside it: lowercase **nexum**, `text-lg font-semibold`, gap-2.
### Desktop navigation (`hidden md:flex`)
Padding: `px-5 py-5` → `sm:px-8 sm:py-6` → `lg:px-12`
**Glass pill nav cluster:**
- `rounded-full bg-white/10 px-1.5 py-1.5 backdrop-blur-lg`
- Links inside: Modules, Clientele, Solutions (with `ChevronDown` 3.5×3.5), Billing
- Each link: `rounded-full px-4 py-1.5 text-sm font-medium text-white/80`
- Hover: `bg-white/10 text-white`, `transition-colors`
- Gap between links: `gap-1`
**Separate “Get started” pill** to the right of the glass cluster (`gap-3`):
- `rounded-full px-5 text-sm font-medium text-white`
- `self-stretch` so height matches the glass pill
- Same dark vertical gradient as above
### Mobile hamburger (`md:hidden`)
- Circular button `h-10 w-10 rounded-full bg-white/10 backdrop-blur-lg`, `z-50`
- Icons swap with animation:
- Menu icon: when open → `rotate-90 scale-0 opacity-0`; when closed → visible. `transition-all duration-300`
- X icon: when open → visible; when closed → `-rotate-90 scale-0 opacity-0`
- Icon color: `#010101` → `lg:text-white`
- Opening menu locks `document.body.style.overflow = 'hidden'`
### Mobile menu glass overlay + drawer
1. **Backdrop:** `fixed inset-0 z-40 bg-black/80 backdrop-blur-md`, opacity 0→100 over 300ms; when closed also `pointer-events-none`
2. **Panel:** `fixed right-0 top-0 z-40 h-full w-72 bg-black/90 backdrop-blur-xl`
- Closed: `translate-x-full`; open: `translate-x-0`
- Transition: `duration-500 ease-[cubic-bezier(0.16,1,0.3,1)]`
3. **Links** (Modules, Clientele, Solutions, Billing) in `px-6 pt-24`, `gap-2`
- Each: `rounded-xl px-4 py-3.5 text-base font-medium text-white/80`
- Hover: `bg-white/10 text-white`
- Staggered entrance when open: opacity 0→1, `translateX(24px)`→0, delay `(index+1)*60ms`
- Solutions gets a ChevronDown on the right
4. **Bottom CTA** (`mt-auto px-6 pb-10`): full-width gradient “Get started” pill; fades/slides up with delay 300ms when open (`opacity` + `translateY(16px)`→0, 400ms)
### Hero headline (exact copy)
> Ship AI workers that grind while you rest
Typography:
- `text-3xl` → `sm:text-4xl` → `lg:text-[3.5rem]`
- `font-semibold leading-[1.1] tracking-tight`
- Container: `max-w-xl`
### Email CTA (exact)
Below headline with `mt-6 sm:mt-8`:
- Wrapper: on `sm+` becomes `inline-flex flex-row items-center rounded-full bg-white p-1.5`; on mobile stacks as column `gap-3`
- Email input:
- placeholder: **Type your email**
- Mobile: white pill `rounded-full bg-white px-5 py-3 text-sm text-gray-900 placeholder-gray-400`
- `sm+`: `sm:w-64 sm:rounded-none sm:bg-transparent sm:px-4 sm:py-2` (sits inside the white capsule)
- `outline-none`
- Button “Get started”: gradient pill, `rounded-full px-6 py-3 sm:py-2.5 text-sm font-medium text-white`
### Glass cards (right side)
Container: `flex flex-col gap-4 sm:flex-row lg:w-auto lg:gap-5`, full width on small, auto on large.
**Shared glass style:**
`rounded-2xl bg-white/10 backdrop-blur-lg p-5 sm:p-6`
#### Stats card (`sm:w-64`, flex-col justify-between)
- Big number: **42,500+** in Silkscreen, `text-3xl sm:text-4xl font-normal tracking-tight`
- Body: **Teams run Nexum to handle recurring ops daily.** — `text-sm leading-relaxed`, `mt-3 sm:mt-4`, opacity 70%
#### Testimonial card (`sm:w-64`)
- Header row: 6×6 black rounded square with bold white **S** + **Stratify** (`text-sm font-semibold`), gap-2, `mb-3 sm:mb-4`
- Quote (exact):
> "With Nexum we went from managing tedious operational work to having AI agents that handle everything."
— `text-sm leading-relaxed`, opacity 80%
- Footer: avatar + name
- Avatar: `https://i.pravatar.cc/72?img=12`, 9×9 rounded-full, `object-cover`, fallback bg `bg-white/20`, alt “Sara Klein”
- **Sara Klein** — `text-sm font-semibold`
- **Dir of Operations** — `text-xs`, opacity 60%
- `mt-4 sm:mt-5`, gap-3
### Bottom padding of main content block
`px-5 pb-8` → `sm:px-8 sm:pb-12` → `lg:px-12 lg:pb-16`
Inner vertical gap: `gap-6 sm:gap-8`
### Glass / blur tokens to preserve
| Element | Fill | Blur |
|--------|------|------|
| Desktop nav pill | `bg-white/10` | `backdrop-blur-lg` |
| Mobile hamburger | `bg-white/10` | `backdrop-blur-lg` |
| Mobile overlay | `bg-black/80` | `backdrop-blur-md` |
| Mobile drawer | `bg-black/90` | `backdrop-blur-xl` |
| Both cards | `bg-white/10` | `backdrop-blur-lg` |
### Animations / interactions checklist
1. Nav link hover color/bg transitions
2. CTA opacity hover
3. Menu ↔ X morph (rotate + scale + opacity, 300ms)
4. Overlay fade 300ms
5. Drawer slide with cubic-bezier(0.16, 1, 0.3, 1) over 500ms
6. Staggered mobile link slide-in (60ms steps)
7. Mobile bottom CTA delayed fade/slide (300ms delay)
8. Body scroll lock while menu open
9. Video continuous muted loop
### What NOT to add
No dark purple gradients, no extra sections, no stats strips in the nav, no cards in the hero beyond the two glass cards, no overlay labels on the video, no second scroll section. First viewport = brand + one headline + one CTA + two glass cards over the full-bleed CloudFront video.
Recreate pixel-faithfully: same copy, same URLs, same SVG path, same breakpoints, same glass opacities/blurs, same gradient, same Silkscreen on the stat number, same Geist everywhere else.
Agent WaveAI · free prompt · copy-paste
Recreate this exact single-viewport landing page for **Vesper.ai**. Document title: `Vesper.ai — Operational AI Infrastructure`. `lang="en"`. One HTML file with inline CSS and a small IIFE for the menu + animation fallback. Pure black `#000000`. No extra sections, cards, forms, pricing tables, or footer beyond the three stats. Do **not** add a video, WebGL, Three.js, or Lottie. Do **not** invent a CloudFront URL.
Force black immediately so the page can never flash white:
- First CSS rule: `html, body { background: #000000 !important; color: #ffffff; }`
- Body attribute: `style="background:#000;color:#fff"`
- Then again: `html, body { background: #000000; background: var(--bg, #000000); color: #ffffff; color: var(--text, #ffffff); }`
---
### Fonts (exact)
Self-hosted WOFF2s sitting next to `index.html`:
```css
@font-face {
font-family: "Inter";
font-style: normal;
font-weight: 100 900;
font-display: swap;
src: url("inter.woff2") format("woff2");
}
@font-face {
font-family: "Instrument Serif";
font-style: italic;
font-weight: 400;
font-display: swap;
src: url("instrument-serif-italic.woff2") format("woff2");
}
```
Stacks:
- UI / logo / nav / buttons / badge / lede / stats: `"Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif`
- **Only** the H1 words `AI agents`: `"Instrument Serif", "Times New Roman", Times, serif`
If those files are missing, load this exact Google Fonts CSS (Inter variable roman + Instrument Serif italic only):
```
https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900&family=Instrument+Serif:ital@1&display=swap
```
Body: `-webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; overflow-x: hidden; position: relative`. `html { scroll-behavior: smooth }`. Universal reset: `box-sizing: border-box; margin: 0; padding: 0`. Links `color: inherit; text-decoration: none`. Buttons `font-family: inherit`.
---
### Image / asset URLs (exact — there are only these)
**1. Herovide obackgorumf 100% opacity no overlay**
Relative file, same folder as the HTML:
```
https://meez.design/web/media/ext/fcb85f8b52447bb5.mp4
```
**3. Favicon (exact data URI)** — same mark as the logo, white:
```
data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cg transform='rotate(-30 12 12)'%3E%3Ccircle cx='7.3' cy='3.2' r='1.45'/%3E%3Crect x='5.5' y='4.7' width='3.6' height='14.6' rx='1.8'/%3E%3Crect x='14.9' y='4.7' width='3.6' height='14.6' rx='1.8'/%3E%3Ccircle cx='16.7' cy='20.8' r='1.45'/%3E%3C/g%3E%3C/svg%3E
```
No other images. All other icons are inline SVG.
---
### Tokens (default / ~1440px)
```
--bg: #000000
--text: #ffffff
--muted: #9a9a9a
--stat: #d8d8d8
--border: rgba(255, 255, 255, 0.16)
--border-soft: rgba(255, 255, 255, 0.12)
--logo: 15.5px
--logo-mark: 22px
--nav: 14px
--nav-h: 40px
--btn: 13.5px
--btn-h: 40px
--hero-btn-h: 42px
--h1: 48px
--lede: 15.5px
--badge: 12.5px
--stat-size: 13.5px
--header-y: 22px
--header-x: 40px
--stats-x: 72px
--stats-y: 36px
--hero-gap: 85px
--copy-max: 860px
--lede-max: 470px
```
---
### Layer stack (back → front)
1. `html/body` black
2. `.hero-photo` + `::after` scrim
3. `.page` — `position: relative; z-index: 1; display: grid; grid-template-rows: auto 1fr auto; min-height: 100vh / 100dvh`
4. `.grain` at `z-index: 100`
Markup order inside body:
```
.grain
.hero-photo
.page
.menu-backdrop
header.header
main.hero#top
footer.stats
script
```
---
### Header — 3-column grid
`display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;`
Padding: `var(--header-y) var(--header-x) 10px`. `z-index: 50; position: relative`.
**Left — logo** `a.logo.appear.appear--scale` → `#top`, `aria-label="Vesper.ai"`.
`display: inline-flex; align-items: center; gap: 9px; justify-self: start; font-size: var(--logo); font-weight: 600; letter-spacing: -0.03em; color: #fff`.
Mark SVG 22×22, `viewBox="0 0 24 24"`, `fill="currentColor"`, group `transform="rotate(-30 12 12)"`:
- `circle cx="7.3" cy="3.2" r="1.45"`
- `rect x="5.5" y="4.7" width="3.6" height="14.6" rx="1.8"`
- `rect x="14.9" y="4.7" width="3.6" height="14.6" rx="1.8"`
- `circle cx="16.7" cy="20.8" r="1.45"`
Wordmark: `Vesper` + `<span class="logo-suffix">.ai</span>` at `font-weight: 400`.
**Center — nav** `#site-nav`, `aria-label="Primary"`, `display: flex; align-items: center; gap: 8px; justify-self: center`.
| Label | href | appear class |
|---|---|---|
| Benefits | `#benefits` | `appear--scale` |
| How It Works | `#how-it-works` | `appear--soft` |
| FAQs | `#faqs` | `appear--scale` |
| Pricing | `#pricing` | `appear--soft` |
Each link is a **liquid-metal pill**: `height: var(--nav-h); padding: 0 18px; border-radius: 7px; overflow: hidden; position: relative;`
`border: 1px solid rgba(198,198,198,0.55)`
`background: linear-gradient(105deg, #050505 0%, #2a2a2a 48%, #4a4a4a 100%)`
color `#f3f3f3`, `font-size: var(--nav)`, weight 400, `letter-spacing: -0.01em`, `white-space: nowrap`.
Transition: `background / border-color / box-shadow 0.35s ease`.
Shine `::before`: `linear-gradient(115deg, transparent 30%, rgba(255,255,255,0.16) 50%, transparent 70%)`, idle `translateX(-120%)`, hover `translateX(120%)` over `0.6s ease`.
Hover: border `rgba(235,235,235,0.9)`, gradient `#111 → #3a3a3a 45% → #6a6a6a`, glow `0 0 18px rgba(200,210,230,0.18)`.
**Right — header CTA:** `a.btn.btn-solid.header-cta.appear.appear--scale` “Start for Free” → `#start`, `justify-self: end`.
**Burger** (hidden ≥901px, `display: none` → `display: grid` on phone): 42×42, `border-radius: 6px`, `border: 1px solid var(--border)`, `background: rgba(8,8,8,0.55)`, `z-index: 60`, `aria-controls="site-nav"`, `aria-expanded="false"`, label “Open menu”. Three white bars 16×1.5px, gap 5px, `border-radius: 1px`. Hover: border `rgba(255,255,255,0.32)`, bg `rgba(255,255,255,0.05)`. Open (`body.menu-open`): bar 1 `translateY(6.5px) rotate(45deg)`, bar 2 `opacity: 0`, bar 3 `translateY(-6.5px) rotate(-45deg)`, 0.25s / 0.2s.
---
### Buttons (shared liquid-glass language)
`.btn`: `position: relative; isolation: isolate; overflow: hidden; display: inline-flex; align-items: center; justify-content: center; height: var(--btn-h); padding: 0 16px; border-radius: 6px; font-size: var(--btn); font-weight: 500; letter-spacing: -0.02em; line-height: 1; white-space: nowrap; cursor: pointer`. Transitions 0.35s on background, border, shadow, color, filter.
Shine `::after`: `linear-gradient(115deg, transparent 20%, rgba(255,255,255,0.45) 48%, transparent 76%)`, idle `translateX(-130%)`, hover `translateX(130%)` in `0.65s ease`.
**Solid:**
`background: linear-gradient(180deg, #ffffff 0%, #e7e7e7 48%, #cfcfcf 100%)`
`color: #111; border: 1px solid #fff`
`box-shadow: inset 0 1px 0 rgba(255,255,255,0.95)`
Hover: `#fff → #f3f6ff 42% → #d5def2`, border `#f2f6ff`,
`inset 0 1px 0 #fff, 0 0 22px rgba(186,208,255,0.35), 0 8px 18px rgba(255,255,255,0.12)`
Hero solid hover glow is slightly stronger: `0 0 26px rgba(186,208,255,0.4), 0 8px 18px rgba(255,255,255,0.14)`.
**Ghost (header-level):**
`background: linear-gradient(135deg, rgba(255,255,255,0.1), rgba(0,0,0,0.45) 50%, rgba(160,175,200,0.08))`
`color: #fff; border: 1px solid rgba(198,198,198,0.45)`
`box-shadow: inset 0 1px 0 rgba(255,255,255,0.12)`
Hover: `rgba(210,225,255,0.18) → rgba(0,0,0,0.35) 48% → rgba(180,195,220,0.16)`, border `rgba(220,230,255,0.75)`,
`inset 0 1px 0 rgba(255,255,255,0.22), 0 0 20px rgba(170,200,255,0.22)`
**Hero ghost** (stronger frost):
`background: linear-gradient(135deg, rgba(255,255,255,0.12), rgba(0,0,0,0.5) 46%, rgba(150,170,200,0.1))`
`border: 1px solid rgba(198,198,198,0.55)`
`backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px)`
Hover glow `0 0 24px rgba(170,200,255,0.28)`, border `rgba(220,230,255,0.8)`.
Hero action buttons: height `var(--hero-btn-h)`, padding `0 18px`.
---
### Hero (bottom-centered, NOT vertically centered)
`.hero`: `display: flex; align-items: flex-end; justify-content: center; padding: 8px 24px var(--hero-gap); min-height: 0`.
`.hero-copy`: `position: relative; z-index: 1; flex-direction: column; align-items: center; text-align: center; max-width: var(--copy-max); width: 100%`.
**Badge** `.badge.appear.appear--pop` — text `Operational AI Infrastructure`
`inline-flex; gap: 8px; margin-bottom: 22px; padding: 9px 15px; border: 0; border-radius: 5px`
`background: linear-gradient(90deg, #7d7d7d 0%, #2a2a2a 52%, #0a0a0a 100%)`
color `#f2f2f2`, `font-size: var(--badge)`, weight 400, `letter-spacing: -0.01em`.
Sparkle SVG 18×20, white, `filter: drop-shadow(0 0 3px rgba(255,255,255,0.45))`, path:
```
M12 2.6C12.55 2.6 12.88 3.15 13.08 4.7c.62 4.7 1.52 5.6 6.22 6.22 1.55.2 2.1.53 2.1 1.08s-.55.88-2.1 1.08c-4.7.62-5.6 1.52-6.22 6.22-.2 1.55-.53 2.1-1.08 2.1s-.88-.55-1.08-2.1c-.62-4.7-1.52-5.6-6.22-6.22C3.15 12.88 2.6 12.55 2.6 12s.55-.88 2.1-1.08c4.7-.62 5.6-1.52 6.22-6.22C11.12 3.15 11.45 2.6 12 2.6Z
```
**H1** two masked lines, Inter 500, `letter-spacing: -0.045em`, `line-height: 1.12`, `#fff`, column, centered:
- Line 1: `Train <em>AI agents</em> on your`
- Line 2: `workflows in minutes.`
`.headline-line`: `display: block; overflow: hidden; padding: 0.06em 0.15em 0.14em`.
`em`: Instrument Serif italic 400, `font-size: 1.08em`, `letter-spacing: -0.03em`, color **`#9a9a9a`** (not white).
**Lede** `.lede.appear.appear--soft`, `max-width: var(--lede-max)`, `margin-top: 18px`, color `#9a9a9a`, `15.5px`, weight 400, `line-height: 1.55`, `letter-spacing: -0.015em`:
`Deploy adaptive AI agents that learn, execute, and scale operational tasks across your business.`
**Actions** `.hero-actions`: flex, wrap, center, gap `10px`, `margin-top: 26px`.
1. Solid `.appear.appear--btn`: `Start for Free` → `#start`
2. Ghost `.appear.appear--side`: `See it in action` → `#demo`
---
### Stats footer
`.stats`: flex, `align-items: center; justify-content: space-between; gap: 24px;`
padding `0 var(--stats-x) var(--stats-y)` and `padding-bottom: max(var(--stats-y), env(safe-area-inset-bottom))`, color `#d8d8d8`.
Each `.stat.appear.appear--stat`: `inline-flex; align-items: center; gap: 14px; font-size: var(--stat-size); letter-spacing: -0.015em; white-space: nowrap`. Icon 20×20 (`#e8e8e8`). Wide avatar icon 38×21.
**1. Dual-pill / workflow icon** (`viewBox="0 0 24 24"`):
Left rect `x=3.4 y=2.6 w=7.2 h=18.8 rx=3.6` fill linear `#ffffff@0.38 → #3a3a3a@0.62` (`x1=3 y1=2 x2=14 y2=22`).
Right rect `x=13.4 y=2.6` same size, inverted `#3a3a3a@0.38 → #ffffff@0.62`.
Connector `x=9.2 y=10.9 w=5.6 h=2.2 rx=1.1` fill `#4a4a4a`.
Label: `4.2M+ workflows automated`
**2. Download tile:** white rounded square `x=2.4 y=2.4 w=19.2 h=19.2 rx=6.2` fill `#ffffff`. Arrow `#111` stroke-width `1.85` round: vertical `M12 7.1v7.4`, chevron `M8.15 12.35L12 16.2l3.85-3.85`.
Label: `92% reduction in manual operations`
**3. Three avatars** (`viewBox="0 0 40 22"`, class `stat-icon-wide`):
- Dark circle `cx=10.2 cy=11 r=9.2` `#2b2b2b` + pale ellipse face `cx=10.2 cy=12.1 rx=4.15 ry=3.7` `#f4f4f4` + two ear triangles + eyes `r=0.7` `#1a1a1a`
- White circle `cx=20.2` `#ffffff` + black eyes `r=1.7` + nose ellipse + smile path stroke `#111` width `1.2`
- Orange circle `cx=30.2` `#f26b1d` + white Inter 700 `e` at `x=30.2 y=15.1 font-size=12.5 text-anchor=middle`
Label: `180+ operational teams onboarded`
---
### Entrance motion (exact)
`.appear` resting opacity is **1** (so the page is never blank if animations fail).
`animation-duration: 1.05s; animation-fill-mode: both; animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1); animation-delay: var(--d, 0.08s)`.
`both` applies the 0% keyframe during the delay, so they still hide then fade in when animations run.
On each element’s own `animationend`, add `.is-in` (`animation: none; opacity: 1; transform: none; clip-path: none; filter: none`). Same for `.hero-photo.is-in`.
JS fallback: after two `requestAnimationFrame`s, if `el.getAnimations()` has nothing `running` or `finished`, add `.is-in` to every `.appear` and `.hero-photo`.
| Element | Modifier | `--d` |
|---|---|---|
| Logo | `appear--scale` | 0.08s |
| Nav 1 Benefits | `appear--scale` | 0.16s |
| Nav 2 How It Works | `appear--soft` | 0.28s |
| Nav 3 FAQs | `appear--scale` | 0.40s |
| Nav 4 Pricing | `appear--soft` | 0.52s |
| Header CTA + burger | `appear--scale` | 0.34s |
| Badge | `appear--pop` | 0.22s |
| H1 line 1 | `appear--mask` | 0.42s |
| H1 line 2 | `appear--mask` | 0.62s |
| Lede | `appear--soft` | 0.82s, duration **1.25s** |
| Solid CTA | `appear--btn` | 0.96s |
| Ghost CTA | `appear--side` | 1.10s |
| Stat 1 | `appear--stat` | 1.12s |
| Stat 2 | `appear--stat` | 1.28s |
| Stat 3 | `appear--stat` | 1.44s |
Keyframes (all end at opacity 1 / identity transform):
- `in-scale`: `opacity 0, scale(0.84)` → 1
- `in-soft`: `opacity 0, translateY(14px)` → 0
- `in-mask`: `opacity 0, translateY(40%)` → 0 (clipped by `.headline-line` overflow)
- `in-pop`: 0 `scale(0.9)` → 70% `scale(1.03)` → 100% `scale(1)`
- `in-btn`: `translateY(18px) scale(0.94)` → rest
- `in-side`: `translateX(22px)` → 0
- `in-stat`: `translateY(20px)` → 0
- `in-star` on `.badge-star`, `0.9s`, delay `0.28s`, both: `scale(0.2) rotate(-50deg)` → 65% `scale(1.2) rotate(8deg)` → rest
- `in-em` on `h1 em`, `1.2s`, delay `0.72s`, both: `opacity 0.35; filter: blur(4px)` → sharp
`prefers-reduced-motion: reduce`: `transition: none !important; animation: none !important` on `*, *::before, *::after`. Force `.appear, .hero-photo, .hero h1 em, .badge-star` to `opacity: 1; transform: none; clip-path: none; filter: none`.
---
### Responsive (copy these breakpoints)
**≥1600:** logo 17 / mark 24 / nav 15 / nav-h 44 / btn 15 / btn-h 44 / hero-btn 48 / h1 **64** / lede 18 / badge 13.5 / stat 15 / header 28×64 / stats 96×44 / copy 980 / lede-max 540. Nav pad `0 20px`. Badge mb 26, lede mt 22, actions mt 30 gap 12. Icons 22, wide 45×24.
**≥1920:** logo 18 / mark 26 / nav 16 / nav-h 48 / btn 16 / btn-h 48 / hero-btn 52 / h1 **76** / lede 20 / badge 14.5 / stat 16 / header 32×80 / stats 120×52 / copy 1120 / lede-max 620. Nav gap 10, pad `0 22px`. Buttons pad `0 22px`. Badge pad `10px 15px`. Wide icon 48×26.
**≥2560:** h1 **88**, lede 22, header-x 120, stats-x 160, copy 1280, lede-max 680.
**1280–1599:** h1 54, lede 16, header-x 48, stats-x 80, copy 900.
**901–1279:** logo 15, nav 13, nav-h 36, btn 13, btn-h 38, hero-btn 40, h1 **42**, lede 15, badge 12, stat 12.5, header 16×28, stats 36×28, hero-gap 64, copy 760, lede-max 440. Nav pad `0 14px`. Badge mb 16, lede mt 14, actions mt 20.
**≥901 and max-height 850:** header-y 14, stats-y 24, hero-gap 48, h1 40; badge mb 12, lede mt 12, actions mt 16.
**≥901 and max-height 720:** h1 34, lede 14, hero-gap 32, stats-y 18, nav-h 30, btn-h 34, hero-btn 36, badge mb 8.
**≥901 desktop lock:** `html, body { height: 100%; overflow: hidden }`. `.page { height: 100vh / 100dvh; overflow: hidden }`. One frame, **no scroll**.
**≤900 phone:** no 100vh lock; `html/body` `height: auto; overflow-y: auto`. Header `grid-template-columns: 1fr auto auto`, gap 8, safe-area padding. Logo / CTA / burger `z-index: 80`. Burger shown.
Full-screen menu: `.menu-backdrop` `display: block; position: fixed; inset: 0; z-index: 40; background: rgba(8,8,8,0.42)`, idle `opacity: 0; visibility: hidden`. Open: opacity 1 + **`backdrop-filter: blur(24px)`**, 0.28s. Nav becomes full-viewport column, `z-index: 45`, transparent, centered, gap 12, padding `96px 22px 32px` with `padding-top: max(96px, calc(env(safe-area-inset-top) + 88px))`. Links full-width, height 56, `font-size: 19px`, `border-radius: 10px`. Escape / nav click / resize ≥901 closes. Toggle `aria-expanded` and label Open/Close menu. `body.menu-open { overflow: hidden }`.
Hero pad `20px 20px 64px`, still `align-items: flex-end`. Stats **column**, centered, gap 16, `white-space: normal`. Copy/lede max-width 100%. Tokens: logo 16, btn 15 / 46, hero-btn 48, h1 **36**, lede 16.5, badge 13.5, stat 15, header 16×18, stats 20×28, hero-gap 36.
**≤560:** h1 34, lede 16, header-x 16. Hero actions **column**, buttons `width: 100%`.
---
### JS (only this)
1. Each `.appear` → own `animationend` → add `is-in` (`once: true`).
2. If animations are not running after two rAFs, force `.is-in` on all `.appear` and `.hero-photo`.
3. Burger toggles `body.menu-open`.
4. Nav links and Escape close the menu.
5. Resize to `(min-width: 901px)` closes the menu.
---
---
AI RuntimeAI · free prompt · copy-paste
Rebuild this as a **single-viewport, full-bleed video-background landing page** using static **HTML + CSS + vanilla JS** (no framework). Match the current implementation exactly. File structure:
```
index.html
styles.css
main.js
assets/logo.webp
fonts/GeistPixel-Circle.woff2
```
Document title: `Intelligence Designed To Evolve`.
Body: black `#000`, `overflow: hidden`, height `100vh` / `100dvh`, Inter for UI, retro dot-matrix display font for headline + stat symbols. Antialiased text.
---
## Exact background video (required)
Full-viewport cover video behind all UI (`position: absolute; inset: 0; object-fit: cover; pointer-events: none; z-index: 0`).
```html
<video class="bg-video" autoplay muted loop playsinline>
<source
src="https://meez.design/web/media/ext/bad3dfa080f05e3f.mp4"
type="video/mp4"
/>
</video>
```
Use this **exact CloudFront URL**. Parent `.bg` is black `#000`, absolute inset 0, `overflow: hidden`.
---
## Fonts (exact)
**1. Inter** (UI) via Google Fonts: weights `400`, `500`, `600`
`https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap`
Stack: `"Inter", "Segoe UI", system-ui, sans-serif`
**2. BubbledotICG-FinePos** (primary display — retro dot-matrix) via OnlineWebFonts CDN — **do not use local Bubbledot files**:
```html
<link
href="(self-host this face — no free CDN; substitute a close match if unavailable)"
rel="stylesheet"
/>
```
Family name exactly: `"BubbledotICG-FinePos"`
**3. Geist Pixel Circle** (fallback display only) local `@font-face`:
- `fonts/GeistPixel-Circle.woff2`
- weight 400, `font-display: swap`
- Display stack: `"BubbledotICG-FinePos", "Geist Pixel Circle", monospace`
**4. Font Awesome 6.5.2** (enterprise brand icons) from cdnjs:
```
https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css
```
integrity:
`sha512-SnH5WK+bZxgPHs44uWIX+LLJAJ9/2PkPKZ5QiAj6Ta86w+fsb2TkcmfRyVX3pBnMFcV7oQPJkl9QevSCWr3W6A==`
---
## CSS variables (exact)
```css
--bg: #000000;
--text: #ffffff;
--muted: #8e8e8e;
--nav-text: #2e2e2e;
--pill-dark: #28282a;
--sign-in-text: #c8c8c8;
--nav-shadow: 0 4px 14px rgba(0, 0, 0, 0.16);
--trust-bg: #28282a;
--trust-border: rgba(255, 255, 255, 0.4);
--trust-text: #c4c2c3;
--font-sans: "Inter", "Segoe UI", system-ui, sans-serif;
--font-display: "BubbledotICG-FinePos", "Geist Pixel Circle", monospace;
```
---
## Layout composition (one viewport, 3 vertical regions)
`.page`: flex column, centered, padding `clamp(16px, 2.4vh, 28px) clamp(14px, 3vw, 32px)`, height `100vh`/`100dvh`, overflow hidden.
1. **Header** (top, shrink 0)
2. **Hero** (flex 1, centered)
3. **Stats footer** (bottom, shrink 0)
Header / hero / stats / mobile menu: `z-index: 1` above video.
---
## 1) Header (desktop)
Centered row, max-width `720px`, gap `clamp(18px, 2.8vw, 28px)`.
### Logo
- Circular button `clamp(40px, 4.4vw, 46px)`, `border-radius: 50%`
- **White background `#fff`**
- Soft shadow `--nav-shadow`
- Image: `assets/logo.webp` (alt empty; width/height attrs 52)
- Icon **inside** scaled to **72%** width/height, `object-fit: contain`, centered with CSS grid (circle size unchanged)
- Hover: `scale(1.04)`
### Nav pill (white)
- White `#fff` pill, height `clamp(44px, 5.2vw, 48px)`, max-width `430px`, flex 1, padding `4px 8px`, radius 999, same soft shadow
- Links: **Home** (active), **Product**, **Case Studies**, **Contact**
- Inter 500, size `clamp(13px, 1.4vw, 15px)`, letter-spacing `-0.01em`, color `#2e2e2e`
- Default opacity `0.5`; hover `0.75`; active `1`
- Active indicator: three 3×3px black dots under label via `::after` + box-shadow offsets `-5px` / `+5px`, bottom `5px`
### Sign in
- Dark pill `#28282a`, text `#c8c8c8`, same height as nav, radius 999, soft shadow
- Hover: bg `#323234`, text `#fff`, `translateY(-1px)`
### Entrance animation
Header: `slideDown 0.7s cubic-bezier(0.22, 1, 0.36, 1) both`
(from opacity 0, `translateY(-18px)` → settled)
---
## 2) Hero (center)
Column, text-center, max-width `900px`.
### Trust row (“Trusted by 2000+ Enterprises”)
- Inline flex; `--trust-size: clamp(36px, 4.5vw, 42px)` (34px at ≤420px)
- Margin-bottom `clamp(16px, 2.5vh, 26px)`
- Stagger delay `--d: 0.05s`
**Three overlapping avatar rings** (not full solid white disks):
- Outer ring: size `--trust-size`, bg `#28282a`, border `1px solid rgba(255,255,255,0.4)`, **padding `5px`**
- Inner white circle fills the padded area (`border-radius: 50%`, bg `#fff`)
- Icons (black `#111`) via Font Awesome brands, font-size `calc(var(--trust-size) * 0.34)`:
1. `fa-brands fa-microsoft`
2. `fa-brands fa-amazon`
3. `fa-brands fa-google`
- Overlap: later avatars `margin-left: calc(var(--trust-size) * -0.42)`; z-index 1 / 2 / 4
- Hover lift: a1 `-2px`, a2 `-4px`, a3 `-2px` (0.35s)
**Trust pill** (overlaps last avatar):
- Same height as avatars, bg `#28282a`, border same as avatars, radius 999
- Left margin `-0.42 * trust-size`; left padding `0.58 * trust-size` so text clears overlap
- Text: `Trusted by 2000+ Enterprises` — Inter 500, `#c4c2c3`, size `clamp(12px, 1.4vw, 13.5px)` (12px on mobile)
### Headline
Exact two lines (each a `<span>` block):
```
Intelligence
Designed To Evolve
```
- Font: **BubbledotICG-FinePos** (retro dot-matrix) / Geist Pixel Circle fallback
- Solid **white** (NO gradient, NO shimmer/LED scan)
- Size desktop: `clamp(28px, 6.2vw, 80px)`
- Letter-spacing: **`-0.04em`** desktop; **`-0.08em`** ≤720px; **`-0.09em`** ≤420px
- Line-height 1.12 (1.05 / 1.04 on smaller breakpoints)
- `white-space: nowrap`, overflow hidden
- Per-line fade: opacity 0 + `translateY(14px)` → in via `headlineFade 0.85s cubic-bezier(0.22, 1, 0.36, 1)`
delays: line1 `0.12s`, line2 `0.3s`
(parent `.headline.anim` has no reveal animation itself)
### Subhead (exact copy)
```
Build applications that reason, adapt and collaborate using a modular
AI platform designed for production.
```
- Max-width `min(500px, 92%)`
- Font-size: `clamp(calc(13.5px + 2pt), calc(1.55vw + 2pt), calc(16.5px + 2pt))` ← base + **2pt**
- Color `#d0d0d0`, **opacity `0.8`**
- Line-height 1.55, weight 400
- Delay `--d: 0.28s`
### CTA
- Text: `Get Started`
- White pill, black text, Inter 600, size `clamp(13.5px, 1.5vw, 14.5px)`
- Padding `clamp(11px, 1.6vh, 13px) clamp(22px, 3vw, 28px)`, radius 999
- Soft white glow:
`0 0 0 1px rgba(255,255,255,0.15), 0 0 22px rgba(255,255,255,0.32), 0 0 44px rgba(255,255,255,0.12)`
- Hover: `translateY(-2px) scale(1.02)` + stronger glow
- Entrance uses `revealPulse` (not plain reveal); delay `--d: 0.4s`
---
## 3) Stats footer (exact 4 metrics)
Grid 4 cols (2×2 on ≤720px), max-width `920px`. Each: icon (display font white) → counting value → muted label.
| Icon glyph | Target | Suffix | Decimals | Label |
|---|---|---|---|---|
| `<` | 120 | `ms` | 0 | Inference Time |
| `%` | 99.99 | `%` | 2 | Platform Uptime |
| `*` | 24 | `/7` | 0 | Autonomous Runtime |
| `#` | 2.4 | `M` | 1 | Context Windows |
- Icon size `clamp(22px, 3vw, 33px)`, **BubbledotICG-FinePos**
- Value: Inter, white, `clamp(18px, 2.2vw, 26px)`, letter-spacing `-0.025em`, tabular-nums
- Label: `#8e8e8e`, `clamp(11px, 1.2vw, 12.5px)`
- Stagger delays: `0.5s`, `0.58s`, `0.66s`, `0.74s`
- Count-up JS: easeOutCubic, duration `1500 + i*80`ms, start offset `480 + i*90`ms, once via IntersectionObserver threshold `0.25`
---
## Shared entrance animation
`.anim` elements:
- Start: opacity 0, `translateY(22px) scale(0.98)`, `blur(6px)`
- Animate: `reveal 0.85s cubic-bezier(0.22, 1, 0.36, 1) forwards`
- Delay from inline `--d`
`prefers-reduced-motion: reduce`: kill animations; show final state; headline solid white.
---
## Mobile (≤720px) — exact behavior
- Hide desktop nav + desktop Sign in
- Header: space-between; logo 48×48 left; circular burger 48×48 right (`#28282a`, 3 white 18×1.5px bars)
- Burger open: white circle, bars → black X (translateY ±6.5px + rotate ±45°)
- Overlay: fixed full screen, `rgba(0,0,0,0.62)`, blur 6px, `overlayIn 0.28s`
- White sheet menu: centered under header, radius 28px, padding `22px 18px 20px`, shadow `0 20px 60px rgba(0,0,0,0.45)`, `menuIn 0.38s`
- Links: Home / Product / Case Studies / Contact + full-width Sign in; staggered `linkIn`; active three-dot indicator at bottom 8px
- JS: toggle `aria-expanded`, `hidden`, `body.menu-open`; close on overlay click, Escape, link click, resize >720
- Stats → 2 columns
Also: ≤420px headline/trust tweaks; ≤700px height tighten hero spacing.
---
## Visual / interaction constraints (do not deviate)
- **No cards** in hero; one composition; brand logo is a real circular mark, not text-only
- **No gradient animation** on headline — solid white only
- Display type is **BubbledotICG-FinePos** from OnlineWebFonts (retro dot-matrix), **not** local Bubbledot.woff/ttf
- Trust logos are **small white inner circles** inside dark padded rings (same size language as the old inner gradient dots), **not** full-bleed white outer circles
- Soft nav/logo shadow only: `0 4px 14px rgba(0,0,0,0.16)` (not heavy)
- Page must work on desktop and mobile; first viewport = header + trust + headline + subhead + CTA + stats over the looping CloudFront video
---
## Implementation stack
Plain `index.html` + `styles.css` + `main.js`. No React/build step required. Copy local `assets/logo.webp` and `fonts/GeistPixel-Circle.woff2`. Load **Inter**, **BubbledotICG-FinePos** (OnlineWebFonts), and **Font Awesome 6.5.2** from CDNs as specified. Use the **exact** CloudFront MP4 URL above for the background video.
Aurex FinanceFintech · free prompt · copy-paste
Build a **single full-screen hero section** for a DeFi / private-banking landing page called **LŪMEN // ÍNDEX**. Use **React 18 + TypeScript + Vite + Tailwind CSS**, with `lucide-react` for icons. The entire page is ONE component rendering ONE `<section>` that fills the viewport — no scrolling, no other sections.
## 0. Project setup
Dependencies: `react@^18.3.1`, `react-dom@^18.3.1`, `lucide-react@^0.446.0`. Dev: `vite@^5.4.2`, `@vitejs/plugin-react`, `tailwindcss@^3.4.1`, `postcss`, `autoprefixer`, `typescript@^5.5.3`.
`tailwind.config.js` — leave the theme completely unextended. Nearly every value in this design is an arbitrary-value class (`text-[13px]`, `bg-[#AFDDFF]`, `px-[35px]`), so no custom theme tokens are needed:
```js
/** @type {import('tailwindcss').Config} */
export default {
content: ['./index.html', './src/**/*.{js,ts,jsx,tsx}'],
theme: { extend: {} },
plugins: [],
};
```
`src/main.tsx` mounts `<App />` in `<StrictMode>` into `#root` and imports `./index.css`.
## 1. `index.html` — fonts and metadata
The page title is exactly `LŪMEN // ÍNDEX` (macron U, acute I). Load **two** font families in `<head>`, in this order:
```html
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>LŪMEN // ÍNDEX</title>
<link href="(self-host this face — no free CDN; substitute a close match if unavailable)" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Manrope:wght@400;500&display=swap" rel="stylesheet">
</head>
<body>
<div id="root"></div>
<script type="module" src="/src/main.tsx"></script>
</body>
</html>
```
- **Display font** — `Graphik LCG Regular Regular` (fallback stack `'Graphik LCG', sans-serif`). Used ONLY for the logo wordmark and the H1.
- **UI font** — `Manrope` weights 400 and 500. Used for everything else — nav items, wallet strip, node labels, body copy, CTA.
## 2. Design tokens
| Token | Value | Usage |
|---|---|---|
| Accent (ice blue) | `#AFDDFF` | nav numbers, `[ CONNECTED ]`, badge fills, CTA background, polygon stroke, link text |
| Accent hover | `#c8e8ff` | CTA hover background only |
| Page background | `#000` (pure black) | body + section |
| Primary text | `#FFFFFF` | |
| Muted text | `rgba(255,255,255,0.5)` (`text-white/50`) | node description paragraphs |
| Nav number tint | `#AFDDFF` at 80% (`text-[#AFDDFF]/80`) | the `01.` `02.` prefixes |
| Grid line | `rgba(255,255,255,0.04)` (`bg-white/[0.04]`) | full-bleed grid |
| Plus mark | `rgba(255,255,255,0.7)` (`bg-white/70`) | grid intersections |
| Node border | `rgba(255,255,255,0.8)` (`border-white/80`) | the three squares |
| Connector stroke | `rgba(255,255,255,0.25)` | SVG lines |
| Menu divider | `rgba(255,255,255,0.1)` (`border-white/10`) | mobile menu wallet block top border |
| Menu backdrop | `rgba(0,0,0,0.9)` + `backdrop-blur-md` | mobile overlay |
Two easing curves, used consistently:
- **Entrance animations:** `cubic-bezier(0.16, 1, 0.3, 1)` (expo-out)
- **Interactive transitions (menu, hamburger):** `cubic-bezier(0.76, 0, 0.24, 1)` (expo-in-out)
---
# 3. SPACING SYSTEM — read this before writing any markup
## 3.1 The global reset kills all defaults
```css
* { margin: 0; padding: 0; box-sizing: border-box; }
```
This means **every space visible on the page is explicitly declared.** There are no inherited paragraph margins, no default list spacing, no button padding from the UA stylesheet. If a gap exists, it comes from one of the values in the tables below. `box-sizing: border-box` also means all `w-[…]`/`h-[…]` values *include* padding and border.
## 3.2 The page gutter (most important rule)
The whole composition hangs off a **two-value gutter**: **20px below `md`, 35px at `md` and above.** Four separate elements independently declare this same gutter, and they must match exactly or the layout visibly breaks alignment:
| Element | Mobile | `md`+ (≥768px) |
|---|---|---|
| `<nav>` horizontal padding | `px-5` → 20px | `md:px-[35px]` → 35px |
| `<h1>` left offset | `left-5` → 20px | `md:left-[35px]` → 35px |
| Bottom row left offset | `left-5` → 20px | `md:left-[35px]` → 35px |
| Bottom row right offset | `right-5` → 20px | `md:right-[35px]` → 35px |
| Mobile menu panel padding | `px-5` → 20px | (menu is hidden at `lg`+) |
The nav uses **padding**, while the H1 and bottom row use **absolute `left`/`right` offsets** — different mechanisms, identical result. The wordmark, the H1's first character, and the CTA button's left edge all land on the same vertical line.
**Vertical gutter** is asymmetric — the nav's is 20/27px, the bottom row's is 20/35px:
| Element | Mobile | `md`+ |
|---|---|---|
| `<nav>` vertical padding | `py-5` → 20px | `md:py-[27px]` → 27px |
| Bottom row bottom offset | `bottom-5` → 20px | `md:bottom-[35px]` → 35px |
## 3.3 Complete spacing reference — every value on the page
Tailwind numeric classes used (1 unit = 4px):
| Class | Computed | Where |
|---|---|---|
| `px-5` / `py-5` | 20px | nav padding, menu panel horizontal padding |
| `left-5` / `right-5` / `bottom-5` / `top-5` | 20px | H1 offset, bottom row offsets, menu close button |
| `gap-5` | 20px | bottom row gap (mobile, stacked) |
| `gap-3` | 12px | mobile menu row: number ↔ label |
| `mb-3` | 12px | mobile menu wallet row 1 bottom margin |
| `gap-8` | 32px | mobile menu nav list vertical gap |
| `pt-10` / `pb-10` | 40px | menu wallet block top padding, menu panel bottom padding |
| `pt-24` | 96px | menu panel top padding |
| `mt-auto` | — | pushes menu wallet block to the bottom |
| `ml-auto` | — | pushes nav right group / hamburger to the right |
Arbitrary bracket values used:
| Value | Where |
|---|---|
| `2px` | vertical padding — `PRIME_MEMBER` chip, `NOT A BANK` badge |
| `3px` | gap between nav item number and label; chip border radius |
| `4px` | `mt-[4px]` above every node description paragraph |
| `5px` | horizontal padding — `PRIME_MEMBER` chip |
| `6px` | horizontal padding — `NOT A BANK — AN ECOSYSTEM` badge |
| `8px` | gap in mobile menu wallet row 2 (`STATUS:` ↔ chip) |
| `10px` | CTA button internal gap (star ↔ label); mobile menu wallet row 1 gap; badge bottom margin |
| `12px` | nav right-group gap; CTA vertical padding at `md`+ |
| `16px` | CTA horizontal padding on mobile |
| `18px` | `mb-[18px]` — info card paragraph bottom margin |
| `20px` | gutter; `ml-[20px]` before `STATUS:`; info card body padding `p-[20px]`; CTA horizontal padding at `md`+ |
| `27px` | nav vertical padding at `md`+ |
| `35px` | gutter at `md`+ |
| `40px` | nav left-group gap AND nav links gap; hamburger/close button box size |
## 3.4 Elements with NO padding or margin
Do not add spacing to these — they are positioned purely by absolute coordinates or flex:
- `<section>`, the `<video>`, the content layer `<div>`
- The mobile menu wrapper and backdrop (both `inset-0`)
- `<h1>` (positioned by `top`/`left` only)
- All grid lines and plus marks
- The `CentralNodes` container, all three squares, all connector SVGs
- Node label `<span>`s (only their sibling `<p>` has `mt-[4px]`)
- The info card outer wrapper (padding lives on the inner body div)
---
## 4. `src/index.css` — reset, font classes, keyframes
```css
@tailwind base;
@tailwind components;
@tailwind utilities;
* { margin: 0; padding: 0; box-sizing: border-box; }
body { background: #000; overflow-x: hidden; }
.font-graphik { font-family: 'Graphik LCG Regular Regular', 'Graphik LCG', sans-serif; }
.font-manrope { font-family: 'Manrope', sans-serif; }
@keyframes fadeUp { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: translateY(0); } }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes slideInLeft { from { opacity: 0; transform: translateX(-20px); } to { opacity: 1; transform: translateX(0); } }
@keyframes slideInRight{ from { opacity: 0; transform: translateX(20px); } to { opacity: 1; transform: translateX(0); } }
@keyframes scaleIn { from { opacity: 0; transform: scale(0.85); } to { opacity: 1; transform: scale(1); } }
@keyframes drawLine { from { opacity: 0; stroke-dashoffset: 100; } to { opacity: 1; stroke-dashoffset: 0; } }
@keyframes gridReveal { from { opacity: 0; transform: scaleY(0); } to { opacity: 1; transform: scaleY(1); } }
@keyframes gridRevealH { from { opacity: 0; transform: scaleX(0); } to { opacity: 1; transform: scaleX(1); } }
.anim-fade-up { opacity: 0; animation: fadeUp 0.9s cubic-bezier(0.16,1,0.3,1) forwards; }
.anim-fade-in { opacity: 0; animation: fadeIn 0.8s cubic-bezier(0.16,1,0.3,1) forwards; }
.anim-slide-left { opacity: 0; animation: slideInLeft 0.8s cubic-bezier(0.16,1,0.3,1) forwards; }
.anim-slide-right { opacity: 0; animation: slideInRight 0.8s cubic-bezier(0.16,1,0.3,1) forwards; }
.anim-scale-in { opacity: 0; animation: scaleIn 0.7s cubic-bezier(0.16,1,0.3,1) forwards; }
.anim-grid-v { opacity: 0; transform-origin: top; animation: gridReveal 1.2s cubic-bezier(0.16,1,0.3,1) forwards; }
.anim-grid-h { opacity: 0; transform-origin: left; animation: gridRevealH 1.2s cubic-bezier(0.16,1,0.3,1) forwards; }
.anim-draw-line { stroke-dasharray: 100; stroke-dashoffset: 100; animation: drawLine 1s cubic-bezier(0.16,1,0.3,1) forwards; }
```
Note the animation transform distances are themselves a spacing decision: `fadeUp` travels **18px** vertically, the slide animations travel **20px** horizontally, and `scaleIn` starts at **0.85**. Every animated element starts at `opacity: 0` and uses `forwards` so it holds its end state. Stagger is driven purely by inline `style={{ animationDelay: 'Xms' }}`.
## 5. Root structure
```
<section class="relative w-full h-screen overflow-hidden bg-black"> ← no padding
├── <video> ← layer 0, absolute inset-0
└── <div class="relative z-10 w-full h-full"> ← content layer, no padding
├── <nav> ← absolute top strip, px-5/35 py-5/27
├── mobile menu overlay ← fixed inset-0 z-50
├── <h1> ← absolute, no padding
├── <GridLines /> ← 4 vertical + 2 horizontal + 8 plus marks
├── <CentralNodes /> ← 3 squares + 3 labels + 6 connector lines
└── bottom row ← absolute, inset 20/35px
```
## 6. Background video (layer 0)
Full-bleed autoplaying looped muted video, cover-fitted, fading in on load:
```jsx
<video
className="absolute inset-0 w-full h-full object-cover anim-fade-in"
src="https://meez.design/web/media/ext/59f3707c68f540a7.mp4"
autoPlay
muted
loop
playsInline
/>
```
Use that **exact CloudFront URL**. `muted` + `playsInline` are mandatory or iOS/Chrome will block autoplay. There is **no dark overlay or gradient scrim** over the video — text sits directly on it.
## 7. Top navigation
```jsx
<nav className="absolute top-0 left-0 w-full flex items-center px-5 md:px-[35px] py-5 md:py-[27px]">
```
**Nav spacing map:**
| Property | Mobile | `md`+ |
|---|---|---|
| Horizontal padding | 20px | 35px |
| Vertical padding | 20px | 27px |
| Total nav height | 20 + 21 + 20 = **61px** | 27 + 21 + 27 = **75px** |
(Content height is 21px — the wordmark's `leading-[21px]`, the tallest child.)
**Left group** — `flex items-center gap-[40px]`. The 40px gap separates the wordmark from the nav-links container.
1. **Wordmark** — literal string `LŪMEN // ÍNDEX`, class `font-graphik text-white text-[18px] md:text-[21px] leading-[21px] whitespace-nowrap anim-fade-up`, delay **200ms**. No margin or padding.
2. **Nav links** — `hidden lg:flex items-center gap-[40px]`. Another 40px, this time *between each of the four items*. Four `NavItem` components:
| number | label | delay |
|---|---|---|
| 01 | ECOSYSTEM | 350ms |
| 02 | LIQUIDITY_POOLS | 450ms |
| 03 | LUMEN_INDEX | 550ms |
| 04 | GOVERNANCE | 650ms |
`NavItem({ number, label, delay })` — wrapper `flex items-center gap-[3px] anim-fade-up`. The **3px gap** is deliberately tight so `01.` reads as attached to its label rather than as a separate item. Inside: a number span `font-manrope text-[#AFDDFF]/80 text-[13px] leading-[15.6px]` rendering `{number}.` (trailing period), then a label span `font-manrope text-white text-[13px] leading-[15.6px] cursor-pointer hover:text-[#AFDDFF] transition-colors`.
**Right group** — `hidden lg:flex items-center gap-[12px] ml-auto anim-slide-right`, delay **600ms**. `ml-auto` pushes it to the far right. A uniform **12px** gap separates all five children, with one exception:
| # | Child | Spacing notes |
|---|---|---|
| 1 | `<Wallet>` icon, `w-[15px] h-[15px]`, `strokeWidth={1.5}` | — |
| 2 | `0x71...f4e2` — `font-manrope text-white text-[13px] leading-[15.6px]` | 12px from icon |
| 3 | `[ CONNECTED ]` — same, `text-[#AFDDFF]` | 12px |
| 4 | `STATUS:` — white, **plus `ml-[20px]`** | 12 + 20 = **32px** effective — this breaks the strip into two visual clusters |
| 5 | `PRIME_MEMBER` chip | 12px |
**`PRIME_MEMBER` chip box model:** `bg-[#AFDDFF] rounded-[3px] px-[5px] py-[2px]` with `text-black text-[13px] leading-[15.6px]`. Rendered height = 2 + 15.6 + 2 = **19.6px**. This is the *only* rounded element on the entire page.
**Hamburger button** — `lg:hidden ml-auto relative w-[40px] h-[40px] flex items-center justify-center anim-fade-in`, delay **400ms**, `aria-label="Toggle menu"`, toggles `menuOpen`. **No padding** — it is a fixed 40×40 box centering a 22px icon, giving a 9px optical inset on each side and a comfortable tap target. It contains **two absolutely stacked spans** that cross-fade with rotation:
- Menu icon span: `opacity-100 rotate-0 scale-100` when closed → `opacity-0 rotate-90 scale-50` when open
- X icon span: `opacity-0 -rotate-90 scale-50` when closed → `opacity-100 rotate-0 scale-100` when open
- Both: `absolute transition-all duration-300 ease-[cubic-bezier(0.76,0,0.24,1)]`, icons `w-[22px] h-[22px] text-white` `strokeWidth={1.5}`
## 8. Mobile menu overlay
Wrapper: `fixed inset-0 z-50 lg:hidden transition-all duration-500 ease-[cubic-bezier(0.76,0,0.24,1)]`, toggling `visible` / `invisible` — visibility (not `hidden`) so the exit transition can play. No padding.
**Backdrop:** `absolute inset-0 bg-black/90 backdrop-blur-md transition-opacity duration-500 ease-[cubic-bezier(0.76,0,0.24,1)]`, `opacity-100` ↔ `opacity-0`, click closes the menu. No padding.
**Panel:** `relative h-full flex flex-col px-5 pt-24 pb-10 transition-all duration-500 ease-[...]`, animating `opacity-100 translate-y-0` ↔ `opacity-0 -translate-y-4` (16px).
**Panel spacing map:**
| Side | Value | Reason |
|---|---|---|
| Left / right | `px-5` → 20px | matches the page gutter |
| Top | `pt-24` → **96px** | clears the 61px nav plus the close button, so the first nav item starts well below the header |
| Bottom | `pb-10` → 40px | breathing room under the wallet block |
- **Close button:** `absolute top-5 right-5 w-[40px] h-[40px] flex items-center justify-center`, `aria-label="Close menu"`, containing an `<X>` at `w-[22px] h-[22px] text-white` `strokeWidth={1.5}`. The 20px top/right offsets align it with the hamburger it replaces.
- **Nav list:** `flex flex-col gap-8` → **32px between items**. Each row is `transition-all duration-500 ease-[cubic-bezier(0.76,0,0.24,1)]` animating `opacity-100 translate-x-0` ↔ `opacity-0 -translate-x-6` (24px), with **staggered `transitionDelay` of `${150 + i * 75}ms` when open, `0ms` when closing** (they cascade in, snap out together). Inner row: `flex items-center gap-3` → **12px** between number and label. Number: `font-manrope text-[#AFDDFF]/80 text-[14px] leading-[1]`. Label: `font-manrope text-white text-[28px] leading-[1.2] tracking-tight`.
- **Wallet block, pinned bottom:** `mt-auto pt-10 border-t border-white/10`. `mt-auto` absorbs all free space to push it down; **40px `pt-10`** sits between the divider rule and the first wallet row. Same 500ms transition, animating `opacity-100 translate-y-0` ↔ `opacity-0 translate-y-4` (16px), `transitionDelay` **450ms** open / 0ms closed.
- Row 1 — `flex items-center gap-[10px] mb-3`: **10px** between children, **12px** below the row. Contains Wallet icon (15px) + `0x71...f4e2` + `[ CONNECTED ]`.
- Row 2 — `flex items-center gap-[8px]`: **8px** between `STATUS:` and the `PRIME_MEMBER` chip (chip styling identical to desktop).
## 9. Main heading
Exact copy: **`Liquid Assets. Luminous Returns.`**
```
font-graphik text-white font-normal leading-[1em] absolute anim-fade-up
text-[32px] sm:text-[48px] md:text-[68px]
top-[140px] sm:top-[160px] md:top-[178px]
left-5 md:left-[35px]
max-w-[300px] sm:max-w-[420px] md:max-w-[554px]
```
Delay **400ms**. **No padding or margin** — position comes entirely from `top`/`left`.
**H1 spacing rationale:**
| Breakpoint | `top` | Nav height | Clear space below nav |
|---|---|---|---|
| < 640px | 140px | 61px | 79px |
| 640–767px | 160px | 61px | 99px |
| ≥ 768px | 178px | 75px | 103px |
`left` matches the page gutter exactly (20px → 35px). The tight `leading-[1em]` combined with `max-w` is what forces the wrap into three stacked lines — at `md` the 554px cap breaks it after "Liquid Assets." and again after "Luminous". Do not add letter-spacing.
## 10. Grid lines + plus intersections
A `GridLines` component. **No padding anywhere** — everything is percentage-positioned against the full viewport. Two hard-coded position arrays:
```js
const verticalPositions = ['12.6%', '37.5%', '61.9%', '86.2%'];
const horizontalPositions = ['32.7%', '71.4%'];
```
- **Vertical lines:** each `absolute top-0 h-full w-px bg-white/[0.04] anim-grid-v`, `style={{ left, animationDelay: `${600 + i * 100}ms` }}` → 600, 700, 800, 900ms. **1px wide, full viewport height, zero margin.** Wipe downward (`transform-origin: top`).
- **Horizontal lines:** each `absolute left-0 w-full h-px bg-white/[0.04] anim-grid-h`, `style={{ top, animationDelay: `${800 + i * 150}ms` }}` → 800, 950ms. **1px tall, full width.** Wipe rightward (`transform-origin: left`).
- **Plus marks:** nest the loops to place a mark at all **8** intersections. Wrapper `absolute anim-scale-in` at `{ top, left }`, delay `${1000 + (hi * 4 + vi) * 80}ms` → 1000, 1080, 1160, 1240, 1320, 1400, 1480, 1560ms. Two bars crossing at the exact point — the **`-translate-x-1/2 -translate-y-1/2` on both bars is what centers the plus on the intersection**; without it the mark hangs down-right of the crossing:
- horizontal bar: `absolute w-[10px] h-px bg-white/70 -translate-x-1/2 -translate-y-1/2`
- vertical bar: `absolute w-px h-[10px] bg-white/70 -translate-x-1/2 -translate-y-1/2`
Each plus is a **10×10px** cross. The grid stays visible at all breakpoints.
## 11. Central nodes — squares, labels, connectors
`CentralNodes` component: `absolute inset-0 pointer-events-none hidden md:block` — **the entire node system is hidden below `md` (768px)**, and has no padding.
Every square: `absolute w-[80px] h-[80px] lg:w-[100px] lg:h-[100px] border border-white/80 anim-scale-in`. **Empty — no padding, no content.** Because of `box-sizing: border-box` the 1px border is inside the 80/100px box.
Every label group is an absolutely positioned block with **no padding**, containing:
- title span — `font-manrope text-white text-[13px] leading-[15.6px] whitespace-nowrap`
- description `<p>` — `font-manrope text-white/50 text-[11px] leading-[14px] mt-[4px]` — the **only** spacing inside a label group is that 4px top margin.
| Node | Square pos | Square delay | Label pos | Label anim / delay | Title | Description | Description max-w |
|---|---|---|---|---|---|---|---|
| 1 | `top-[27%] left-[60%]` | 1500ms | `top-[11%] left-[26%]` | `anim-slide-left` / 1100ms | `[ CORE_ENTITY ]` | Neural node processing real-time data streams. | `max-w-[160px]` |
| 2 | `top-[58%] left-[32%]` | 1800ms | `top-[76%] left-[3%]` | `anim-slide-left` / 1400ms | `[ LUMINOUS_INSIGHT ]` | Deep-learning engine synthesizing raw inputs. | `max-w-[160px]` |
| 3 | `top-[63%] left-[50%]` | 2100ms | `top-[50%] left-[78%]` | `anim-slide-right` / 1700ms | `[ CONNECTIVITY ]` | Latency-free transmission across distributed networks. | `max-w-[180px]` |
**Connector lines.** A `ConnectorLine({ x1, y1, x2, y2, delay })` component — each renders its own full-bleed SVG so percentage coordinates resolve against the viewport:
```jsx
<svg className="absolute inset-0 w-full h-full pointer-events-none anim-fade-in"
style={{ animationDelay: `${delay}ms` }}>
<line x1={x1} y1={y1} x2={x2} y2={y2}
stroke="rgba(255,255,255,0.25)" strokeWidth="1" vectorEffect="non-scaling-stroke" />
</svg>
```
Six lines in elbow pairs (one horizontal run, then one diagonal into the square's top-left corner):
| # | x1 | y1 | x2 | y2 | delay |
|---|---|---|---|---|---|
| 1 (CORE_ENTITY, horizontal) | 38% | 14% | 52% | 14% | 1200ms |
| 2 (CORE_ENTITY, diagonal) | 52% | 14% | 60% | 27% | 1400ms |
| 3 (LUMINOUS_INSIGHT, diagonal) | 32% | 58% | 20% | 74% | 1500ms |
| 4 (LUMINOUS_INSIGHT, horizontal) | 20% | 74% | 6% | 74% | 1700ms |
| 5 (CONNECTIVITY, horizontal) | 78% | 53% | 63% | 53% | 1800ms |
| 6 (CONNECTIVITY, diagonal) | 63% | 53% | 50% | 63% | 2000ms |
Each pair's diagonal endpoint matches its square's `top`/`left` exactly (60%/27%, 32%/58%, 50%/63%), so the elbow lands precisely on the square's top-left corner. The horizontal runs start a few percent away from the label text, leaving a small visual gap rather than touching the type.
## 12. Bottom row
```jsx
<div className="absolute bottom-5 md:bottom-[35px] left-5 md:left-[35px] right-5 md:right-[35px]
flex flex-col md:flex-row items-start md:items-end justify-between gap-5 md:gap-0">
```
**Bottom row spacing map:**
| Property | Mobile | `md`+ |
|---|---|---|
| Bottom offset | 20px | 35px |
| Left / right offset | 20px | 35px |
| Direction | `flex-col` stacked | `flex-row` spread |
| Alignment | `items-start` | `items-end` (baselines the CTA with the card's bottom edge) |
| Gap | `gap-5` → 20px | `md:gap-0` → **0**, because `justify-between` handles separation |
**Left CTA button:**
```jsx
<button className="bg-[#AFDDFF] px-[16px] md:px-[20px] py-[10px] md:py-[12px] flex items-center gap-[10px]
hover:bg-[#c8e8ff] transition-colors anim-fade-up"
style={{ animationDelay: '900ms' }}>
<span className="text-black text-[16px] leading-none">✦</span>
<span className="font-manrope text-black text-[12px] md:text-[13px] leading-[15.6px] uppercase tracking-wide">
Explore Private Banking
</span>
</button>
```
**CTA box model:**
| Property | Mobile | `md`+ |
|---|---|---|
| Horizontal padding | 16px | 20px |
| Vertical padding | 10px | 12px |
| Internal gap (star ↔ label) | 10px | 10px |
| Label size | 12px | 13px |
| Rendered height | 10 + 16 + 10 = **36px** | 12 + 16 + 12 = **40px** |
The icon is the HTML entity `✦` (✦, four-pointed star) at 16px with `leading-none` — **not** a lucide icon. **Square corners — no border radius.** `tracking-wide` (0.025em) on the uppercase label.
**Right info card:** `relative max-w-[280px] hidden sm:block anim-slide-right`, delay **1100ms**. Hidden below 640px. **The wrapper itself has no padding** — it only caps width at 280px.
1. **Badge above the card:** `font-manrope text-black text-[13px] leading-[15.6px] bg-[#AFDDFF] px-[6px] py-[2px] inline-block mb-[10px]` reading `NOT A BANK — AN ECOSYSTEM` (em dash, not hyphen). Box: **6px horizontal / 2px vertical padding**, rendered height 19.6px, with **10px below** separating it from the card. `inline-block` keeps it hugging its text rather than filling 280px. **Square corners** — unlike the rounded `PRIME_MEMBER` chip.
2. **Card body:** `relative p-[20px]` — a **uniform 20px on all four sides**. It contains, first, an absolutely positioned SVG drawing the **chamfered border** (a rectangle with the bottom-left corner cut off):
```jsx
<svg className="absolute inset-0 w-full h-full pointer-events-none"
viewBox="0 0 280 168" preserveAspectRatio="none">
<polygon points="0.5,0.5 279.5,0.5 279.5,167.5 30,167.5 0.5,137.5"
fill="none" stroke="#AFDDFF" strokeWidth="1" vectorEffect="non-scaling-stroke" />
</svg>
```
The `0.5` offsets keep the 1px stroke crisp on the pixel grid; `vectorEffect="non-scaling-stroke"` with `preserveAspectRatio="none"` holds the stroke at exactly 1px despite non-uniform stretching. The **chamfer is 30px wide × 30px tall** (from `30,167.5` to `0.5,137.5`) — a 45° cut on the bottom-left.
**Why the viewBox is `0 0 280 168`:** it matches the card's natural rendered size, so the polygon isn't distorted. That height is the sum of the box model:
```
20px padding-top
90px paragraph (5 lines × 18px leading at 240px content width)
18px mb-[18px]
15.6px link line
20px padding-bottom
─────
≈168px
```
Content width is 280 − 20 − 20 = **240px**.
3. **Paragraph:** `relative font-manrope text-white text-[13px] leading-[18px] mb-[18px]` — "Maps the complexity of modern finance with a partner that brings clarity and organic growth to your portfolio." The `relative` is **required** to stack above the absolute SVG.
4. **Link:** `relative font-manrope text-[#AFDDFF] text-[13px] leading-[15.6px] cursor-pointer hover:underline` reading `VIEW_TRANSPARENCY_REPORT`. No margin — the paragraph's 18px bottom margin provides the separation.
## 13. Responsive behavior summary
Tailwind default breakpoints: `sm` 640px, `md` 768px, `lg` 1024px.
| Element | < 640px | 640–767px | 768–1023px | ≥ 1024px |
|---|---|---|---|---|
| Nav padding | `px-5 py-5` (20/20) | 20/20 | `px-[35px] py-[27px]` | 35/27 |
| Wordmark | 18px | 18px | 21px | 21px |
| Nav links / wallet strip | hidden | hidden | hidden | visible |
| Hamburger | visible | visible | visible | hidden |
| H1 size / top / max-w | 32px / 140px / 300px | 48px / 160px / 420px | 68px / 178px / 554px | same as md |
| H1 left | 20px | 20px | 35px | 35px |
| Grid + plus marks | visible | visible | visible | visible |
| Central nodes (all 3) | **hidden** | **hidden** | visible, 80px squares | visible, 100px squares |
| Bottom row inset | 20px | 20px | 35px | 35px |
| Bottom row layout | stacked, `gap-5` | stacked, `gap-5` | row, `items-end`, `gap-0` | row |
| CTA padding / text | 16/10px, 12px | 16/10px, 12px | 20/12px, 13px | same |
| Info card | **hidden** | visible | visible | visible |
Note the deliberate asymmetry: the nav collapses at `lg` (1024px), the node diagram disappears at `md` (768px), and the info card at `sm` (640px). Three different cutoffs, not one uniform mobile breakpoint.
## 14. Full entrance timeline
| Delay | Element |
|---|---|
| 0ms | background video fades in |
| 200ms | `LŪMEN // ÍNDEX` wordmark |
| 350 / 450 / 550 / 650ms | nav items 01–04 |
| 400ms | H1 · hamburger (mobile) |
| 600ms | wallet strip slides in from right |
| 600 / 700 / 800 / 900ms | vertical grid lines wipe down |
| 800 / 950ms | horizontal grid lines wipe right |
| 900ms | CTA button |
| 1000→1560ms (80ms steps) | 8 plus marks pop in |
| 1100ms | `[ CORE_ENTITY ]` label · info card slides in from right |
| 1200 / 1400ms | CORE_ENTITY connector elbow |
| 1400ms | `[ LUMINOUS_INSIGHT ]` label |
| 1500ms | CORE_ENTITY square · LUMINOUS_INSIGHT connector 1 |
| 1700ms | `[ CONNECTIVITY ]` label · LUMINOUS_INSIGHT connector 2 |
| 1800ms | LUMINOUS_INSIGHT square · CONNECTIVITY connector 1 |
| 2000ms | CONNECTIVITY connector 2 |
| 2100ms | CONNECTIVITY square |
Total choreography ≈ 2.8s. The pattern is intentional: labels and connectors arrive *before* the squares they point to.
## 15. Non-negotiables
- Only ONE piece of React state: `const [menuOpen, setMenuOpen] = useState(false)`.
- Section is `h-screen overflow-hidden` — the page never scrolls.
- Keep the global `* { margin: 0; padding: 0; box-sizing: border-box; }` reset. Every spacing value in this spec assumes it.
- The **20px / 35px gutter** must be identical across the nav padding, H1 `left`, and bottom row `left`/`right`. This alignment is the backbone of the layout.
- All spacing/sizing uses Tailwind **arbitrary values** in brackets, not scale steps, except the handful of numeric classes listed in §3.3. `leading-[15.6px]` (13px × 1.2) recurs throughout — keep it exact.
- All bracketed labels keep inner spaces: `[ CONNECTED ]`, `[ CORE_ENTITY ]`, `[ LUMINOUS_INSIGHT ]`, `[ CONNECTIVITY ]`.
- Underscores in labels are literal: `LIQUIDITY_POOLS`, `LUMEN_INDEX`, `PRIME_MEMBER`, `VIEW_TRANSPARENCY_REPORT`.
- Nav numbers render with a trailing period: `01.` not `01`.
- `rounded-[3px]` appears exactly once (the `PRIME_MEMBER` chip). Every other box is square-cornered.
- Node positioning is `top`/`left` percentages with **no centering transform** — the coordinate marks each square's top-left corner, which is what makes the connectors line up. The plus marks are the opposite case: they *require* `-translate-x-1/2 -translate-y-1/2`.
- `pointer-events-none` on all decorative SVG and the node container so nothing blocks the CTA.
Autonomous OpsSaaS · free prompt · copy-paste
Recreate this page as a single self-contained index.html file — pixel-faithful to the Falcon AI Operations Overview triptych. No frameworks, no external CSS/JS/fonts/images. System fonts only. Light color scheme. All sizing on desktop uses CSS container query units (cqw/cqh) against a size container.
════════════════════════════════════════
PAGE META & BOOT
════════════════════════════════════════
- <!doctype html>, lang="en"
- viewport: width=device-width, initial-scale=1, viewport-fit=cover
- color-scheme: light
- title: Falcon AI Operations Overview
- Inline head script BEFORE styles:
- If prefers-reduced-motion is NOT reduce AND Element.prototype.animate exists:
- add class "entrance-pending" on <html>
- set window.__entranceFallback = setTimeout that removes "entrance-pending" and "entrance-active" after 3000ms
- Otherwise do nothing (page shows fully visible)
════════════════════════════════════════
DESIGN TOKENS (:root)
════════════════════════════════════════
--aspect: 1.5204255 (kept; not required for layout math)
--page: #f0f0f0
--surface: #fff
--panel: #fffaf6
--ink: #282828
--muted: #777
--orange: #ff6900
--orange-soft: #ffdfca
--green: #4d8c35
--weight-regular: 400
--weight-body: 475
--weight-medium: 500
--weight-semibold: 600
--weight-display: 600
--weight-card-title: 600
--weight-bold: 700
--card-title-size: 1.86cqw
--card-title-tracking: -.125cqw
--feature-title-size: 2.17cqw
--feature-title-tracking: -.09cqw
--cards-height: 33.81cqw
--cards-scale: min(1, calc(60cqh / var(--cards-height)))
════════════════════════════════════════
FONTS (exact stacks — no webfonts)
════════════════════════════════════════
Body / most UI:
"Segoe UI Variable", "Segoe UI", Arial, Helvetica, sans-serif
weight: --weight-regular; antialiased; text-rendering: geometricPrecision
Card titles (.card-copy):
"Segoe UI Semibold", "Segoe UI Variable Display", "Segoe UI", Arial, sans-serif
Card body paragraphs:
"Segoe UI Variable", "Segoe UI", Arial, sans-serif
════════════════════════════════════════
GLOBAL LAYOUT
════════════════════════════════════════
html, body: width/height 100%; margin 0; overflow hidden; background --page
body color --ink
.viewport: position fixed; inset 0; overflow hidden; bg --page
.scene: absolute inset 0; overflow hidden; container-type: size; bg --page
.cards (desktop triptych):
position absolute; top/left 50%; translate -50% -50%
width: 81.71cqw; height: var(--cards-height)
display grid; grid-template-columns: 32.33% 32.33% 31.70%
justify-content: space-between; align-items: start
scale: var(--cards-scale) ← shrinks whole composition if viewport is short
════════════════════════════════════════
CARD SHELL
════════════════════════════════════════
.card:
relative; width 100%; height 100%; overflow hidden
display grid; grid-template-rows: 72.2% 27.8% ← panel / copy split
border: .075cqw solid rgb(255 233 218 / 96%)
border-radius: 1.59cqw
background: --surface
box-shadow:
.32cqw 1.18cqh 1.42cqw rgb(44 35 29 / 11%),
0 .18cqh .42cqw rgb(44 35 29 / 3.5%)
.card:last-child (3rd / Faster Decisions):
height: 98.5%; margin-top: .76%
.panel (upper visual area):
relative; margin-inline: 2.55%; overflow hidden
border-radius: 1.28cqw 1.28cqw 1.08cqw 1.08cqw
background:
radial-gradient(circle at 50% 78%, rgb(255 225 207 / 30%), transparent 47%),
linear-gradient(180deg, rgb(255 255 255 / 96%), rgb(255 248 243 / 94%))
.card:last-child .panel:
margin-inline: 2%
background:
radial-gradient(circle at 74% 46%, rgb(255 225 204 / 70%), transparent 48%),
linear-gradient(180deg, rgb(255 255 255 / 96%), rgb(255 242 232 / 97%))
.card-copy:
relative; padding: 7.1% 8.4% 6.5%
h2: margin 0 0 1.6%; color #292929; font-size --card-title-size; weight --weight-card-title;
line-height 1.04; letter-spacing --card-title-tracking; white-space nowrap;
transform: translateY(-.36cqh); transform-origin left top
.card:last-child h2: font-size --feature-title-size; letter-spacing --feature-title-tracking
p: margin 0; color --muted; font-size 1.39cqw; weight --weight-medium;
line-height 1.04; letter-spacing -.06cqw;
transform: scaleX(.94); transform-origin left top
(exact line breaks via <br> as in copy below)
.corner-icon:
absolute; right 8.4%; bottom 22.5%; width 8.2%; aspect-ratio 1
display grid; place-items center; border-radius 50%
background --orange-soft; color --orange
Entrance hide: .entrance-pending .card { opacity: 0 }
Reduced motion: .entrance-pending .card { opacity: 1 }
.entrance-active applies will-change on .card, .panel, .card-copy, h2, p, .corner-icon
════════════════════════════════════════
DOM STRUCTURE (exact order & copy)
════════════════════════════════════════
main.viewport[aria-label="Falcon AI operations overview"]
section.scene
section.cards[aria-label="Product benefits"]
/* CARD 1 — Instant Visibility */
article.card
.panel[aria-label="Visibility timeline chart"]
.timeline: span "06 AM" + i + span "12 PM" + i + span "06 PM"
.bars[aria-hidden="true"]: 24 <i class="bar"> with --h heights:
20%,33%,48%,56%,51%,47%,39%,31%,53%,55%,60%,56%,
then .bar.active 100%, then 92%,76%,67%,62%,65%,59%,70%,74%,87%,83%,77%
.value-chip: "$4.7M"
.axis: START | ACTIVE | PEAK | COMPLETE
.card-copy
h2: Instant Visibility
p: Real-time data across your<br>operations.
span.corner-icon > i.spark
/* CARD 2 — Autonomous Workflows (centre / product anchor) */
article.card
.panel
.assistant-head: span.badge > i.spark + span "Falcon AI"
p.question: How can I help you automate?
.prompt (div): When a new lead is captured in WebFlow,<br>create a deal in HubSpot and notify the sales<br>team on Slack.
.automate:
span.automate-label: Automate
canvas.magic[data-sparkle-icon][aria-hidden]
i.cursor[aria-hidden]
.card-copy
h2: Autonomous Workflows
p: Automate processes with<br>Falcon AI.
span.corner-icon > i.flow-icon
/* CARD 3 — Faster Decisions */
article.card
.panel
.metric:
.metric-label: Time saved
.metric-row: strong "128 Hrs" + span "↑ 18% efficiency"
canvas.decision-flow[data-flow-chart][aria-label="Decision paths converging into an optimized result"]
.tag.action: Action: Approve
.tag.confidence: Decision Confidence: 98%
.tag.path: Path Optimized: +14.2%
.card-copy
h2: Faster Decisions
p: Turn insights into action<br>instantly.
span.corner-icon > i.speed
════════════════════════════════════════
CARD 1 — VISIBILITY CHART DETAILS
════════════════════════════════════════
.timeline: absolute top 5.7% left 20.8% width 58.4%; flex; space-between; align center
color #f27624; font-size .62cqw; weight medium; letter-spacing -.015cqw
i: width 20%; border-top .05cqw dashed rgb(190 139 96 / 70%)
.bars: absolute left/right 5.9%; bottom 12%; height 62%; flex; align flex-end; space-between
.bar: width 2.4%; height var(--h); border-radius 999px; bg rgb(255 219 196 / 64%)
.bar.active: width 2.6%; bg --orange; box-shadow 0 0 .28cqw rgb(255 105 0 / 24%)
.value-chip: absolute top 15.5% left 46.2% width 14% height 7.6%
grid place-items center; border .12cqw solid #fff; radius 999px; bg --orange
shadows: 0 0 0 .055cqw --orange, 0 .28cqh .4cqw rgb(69 38 18 / 24%)
color #fff; font .67cqw; weight semibold
.axis: absolute left 7.7% right 7.2% bottom 5.2%; flex space-between
color #888; font .57cqw
.spark (corner + badge base): relative width 52% aspect-ratio 1
::before horizontal bar: top 41% left 0 width 100% height 18%; radius 999px; bg currentColor
::after vertical bar: top 0 left 41% width 18% height 100%; radius 999px; bg currentColor
(= plus/spark glyph)
════════════════════════════════════════
CARD 2 — WORKFLOW / ASSISTANT DETAILS
════════════════════════════════════════
.assistant-head: absolute top 8.2% left 6.2%; flex; align center; gap 1.02cqw
color --orange; font 1.28cqw; weight bold; letter-spacing -.04cqw
.badge: 2.16cqw square circle; bg --orange-soft; grid center
.spark INSIDE badge (override): width 48%; bg currentColor; filter blur(.035cqw);
clip-path polygon 8-point star:
47% 0, 53% 0, 58% 28%, 65% 35%, 72% 42%, 100% 47%, 100% 53%,
72% 58%, 65% 65%, 58% 72%, 53% 100%, 47% 100%,
42% 72%, 35% 65%, 28% 58%, 0 53%, 0 47%, 28% 42%, 35% 35%, 42% 28%
::before/::after content: none
.question: absolute top 21.5% left 6.2%; margin 0; color #151515
font 1.34cqw; weight medium; line-height 1; letter-spacing -.07cqw
.prompt: absolute top 32% left 6.2% width 87.2% height 35.8%
padding 4.7% 4.2%; border .06cqw solid #beb4ae; radius .86cqw
bg rgb(255 255 255 / 32%); color --muted
font 1.03cqw; weight --weight-body (475); line-height 1.31; letter-spacing -.035cqw
.automate (CTA pill): absolute top 78.1% left 6.2% width 34.6% height 11.6%
flex; align center; justify space-between; padding-inline 1cqw; radius 999px
background: linear-gradient(100deg, #ff9b5b 0%, #ff8840 38%, #ff6b05 100%)
box-shadow:
0 .6cqh 1.35cqw rgb(255 105 0 / 52%),
0 .2cqh .46cqw rgb(255 105 0 / 31%),
0 0 .82cqw .08cqw rgb(255 118 30 / 24%)
color #fff; font .98cqw; weight body; line-height 1
.automate-label: letter-spacing -.025cqw; transform scaleX(1.03); origin left center
canvas.magic: flex 0 0 auto; width 1.5cqw; height 1.46cqw; translateX(-.15cqw)
.cursor: absolute top 85.7% left 54% width 4.3% aspect-ratio .72; z-index 3; isolation isolate
filter: drop-shadow(0 0 .075cqw #fff) ×2 + drop-shadow(.08cqw .16cqw .08cqw rgb(0 0 0 / 48%))
::before: inset 0; bg #050505; clip-path polygon(0 0,94% 62%,57% 67%,38% 100%)
::after: inset -11%; z-index -1; bg #fff; same clip-path (white outline)
.flow-icon (corner): width 54% height 58%
bg linear-gradient(--orange,--orange) center / 48% 18% no-repeat (horizontal bar)
::before/::after: vertical rounded bars width 34% height 70% bg --orange
before: left 4% top 24%; after: right 4% top 6%
(= stylized “flow / branching” glyph)
════════════════════════════════════════
CARD 3 — DECISION / METRICS DETAILS
════════════════════════════════════════
.metric: absolute top 7.8% left 5.2%
.metric-label: mb .38cqh; color #676767; font .88cqw; weight body
.metric-row: flex; align center; gap 1.02cqw
strong: color --orange; font 2.1cqw; weight bold; lh .95; tracking -.04cqw
span: mt .52cqh; color --green; font .93cqw; weight bold; tracking -.045cqw
.decision-flow canvas: absolute top 39% left 0 width 100% height 53%; display block; pointer-events none
.tag: absolute z-index 2; height 8.3%; grid center; radius 999px
bg rgb(255 255 255 / 95%); color #282828; font .62cqw; weight semibold; tracking -.012cqw
.tag.action: top 34.8%; right 8%; width 28%
.tag.confidence: top 67%; left 6%; width 40%
.tag.path: top 82.2%; right 8%; width 37%
.speed (corner bolt): width 58% aspect-ratio 1
three horizontal orange bars via multi-background:
linear-gradient(--orange,--orange) 0 31% / 27% 8% no-repeat,
linear-gradient(--orange,--orange) 0 49% / 38% 8% no-repeat,
linear-gradient(--orange,--orange) 0 67% / 22% 8% no-repeat
::before: inset 4% 1% 2% 28%; bg --orange;
clip-path polygon(58% 0,100% 0,69% 40%,94% 40%,28% 100%,44% 58%,7% 58%)
::after: content none
════════════════════════════════════════
CANVAS 1 — SPARKLE ICON (Automate button)
════════════════════════════════════════
ResizeObserver redraws [data-sparkle-icon]. DPR-aware canvas sizing.
Data (frozen):
sparkles: [{x:.01,y:.01,size:.50}, {x:.28,y:.26,size:.72}]
sparklePoints (unit star):
[.50,.06],[.59,.41],[.94,.50],[.59,.59],[.50,.94],[.41,.59],[.06,.50],[.41,.41]
Draw each sparkle:
size = min(w,h) * sparkle.size; offset by x/y of canvas bounds
map sparklePoints → absolute points
roundedPolygon(points, roundness .34): for each corner, move to after-point of first,
then for each subsequent: lineTo(before) + quadraticCurveTo(point, after), close path
fillStyle rgba(255,220,202,.55); strokeStyle #fff
lineWidth max(1.1, size*.15); lineCap/Join round
shadowColor rgba(255,255,255,.78); shadowBlur size*.06; fill+stroke; clear shadow
════════════════════════════════════════
CANVAS 2 — DECISION FLOW CHART
════════════════════════════════════════
ResizeObserver redraws [data-flow-chart]. DPR-aware.
Bands (filled bezier ribbons L→R), source/target as [top,bottom] fractions of height:
{source:[.08,.26], target:[.29,.32], color:'rgba(255,189,144,.60)'}
{source:[.23,.42], target:[.30,.335], color:'rgba(255,149,80,.70)'}
{source:[.50,.75], target:[.32,.355], color:'rgba(255,136,64,.82)'}
{source:[.69,.98], target:[.33,.365], color:'rgba(255,181,128,.54)'}
{source:[.39,.51], target:[.31,.345], color:'rgba(255,105,0,.96)'} ← brightest core
flowShape: sourceHold .38, targetApproach .74, threadWidth .00135
Band path: move(0, h*sourceTop) → cubic(w*sourceHold,h*sourceTop, w*targetApproach,h*targetTop, w,h*targetTop)
→ line(w,h*targetBottom) → cubic back to (0,h*sourceBottom) → close → fill
Threads (white strokes on top):
{source:.05, target:.30, alpha:.68}
{source:.20, target:.315, alpha:.60}
{source:.62, target:.342, alpha:.84}
{source:.82, target:.352, alpha:.74}
{source:.97, target:.36, alpha:.64}
lineWidth max(.72, w*threadWidth); strokeStyle rgba(255,255,255,alpha)
same bezier control points as band edges (sourceHold / targetApproach)
Visual: five orange ribbons converge from left fan into a tight right node; white hairlines ride the ribbons.
════════════════════════════════════════
ENTRANCE ANIMATION (Web Animations API — exact choreography)
════════════════════════════════════════
Only if html has entrance-pending and !window.__entranceStarted.
Set __entranceStarted = true.
Double rAF, then:
1) Measure visible cards intersecting viewport.
2) Detect singleRow: all visible cards’ tops within max(4, height*0.04) of the topmost.
3) Order:
- singleRow (desktop): centre card index===1 first, then others by |distance from viewport centre|
- else (tablet/phone): sort by top then left
4) compact = viewport.width <= 512
rise = compact ? 11 : 16
easings: easePlace = cubic-bezier(.16,1,.3,1); easeWipe = cubic-bezier(.24,.86,.28,1)
Per card delays:
singleRow: primary (index 1) delay 60; others 245 + (order-1)*85
stacked: 70 + order*115
drift (singleRow non-primary only): -sign(centreOffset) * min(width*0.018, 7)
else drift 0
Four layers per card (fill: both):
SURFACE .card:
from {opacity:0, transform: translate3d(drift, rise, 0) scale(.985)} → {opacity:1, transform:none}
duration compact?780 : (primary?960:900); delay; easePlace
NOTE: no clip-path on card (would clip shadow)
PANEL .panel:
from {opacity:0, transform:scale(.994), clipPath: inset(0 0 {compact?26:34}% 0)}
→ {opacity:1, transform:none, clipPath:inset(0 0 0 0)}
duration compact?620:720; delay+200; easeWipe
COPY .card-copy:
from {opacity:0, transform: translate3d(0, compact?8:11, 0)} → none
duration compact?540:620; delay+330; easePlace
HEADING / DESCRIPTION (clip uncover only — do NOT transform them; they keep authored transforms):
from {opacity:0, clipPath: inset(-30% 0 100% 0)} → {opacity:1, clipPath: inset(-30% 0 -30% 0)}
heading: delay+350; duration compact?470:540; easeWipe
description: delay+450; duration compact?430:490; easeWipe
ACCENT .corner-icon:
from {opacity:0, transform:scale(.88)} → none
duration compact?340:400; delay+540; easePlace
On start: add entrance-active, remove entrance-pending.
When all animations settle: cancel() each, then revealImmediately() (clear fallback timeout; remove both classes).
If animate throws: cancel all, reveal immediately.
prefers-reduced-motion / no animate: never enter pending → page visible instantly.
════════════════════════════════════════
RESPONSIVE
════════════════════════════════════════
TABLET — @media (max-width: 56rem) and (max-aspect-ratio: 5/4):
.cards: width min(88cqw, 70cqh, 45rem); height auto; scale 1
2-col grid; gap clamp(.75rem,2cqw,1.2rem); rows auto
.card: height auto; aspect-ratio .781; radius clamp(.9rem,2cqw,1.2rem)
.card:last-child: grid-column 1/-1; width calc((100% - gap)/2); centered; no margin-top
Clamp down all internal type/icons (timeline, chip, axis, assistant, question, prompt, automate, magic, metric, tags) per the source clamps
Panel radii clamp similarly
MOBILE — @media (max-width: 32rem), OR (max-height: 28rem) and (max-width: 64rem) and (pointer: coarse):
html/body: height auto; min-height 100%; overflow auto
.viewport: relative; min-height 100svh; overflow visible
.scene: relative; height auto; min-height 100svh; padding-block with safe-area;
container-type: inline-size; overflow visible
.cards: relative; width min(90cqw, 26rem); centered; 1 column; gap clamp(1rem,4cqw,1.5rem);
no translate/scale
.card + :last-child: full width; aspect-ratio .781; larger clamp radii
Larger mobile type clamps for titles, body, chart labels, CTA (automate min-height 2.75rem)
════════════════════════════════════════
COMPOSITION RULES
════════════════════════════════════════
- First viewport = ONE composition: three peer product cards on flat #f0f0f0 — no nav, no hero headline, no footer, no stats strip outside the cards.
- Cards are the interaction/content containers; soft peach borders + warm shadows; no purple theme, no dark mode.
- Centre card (Falcon AI / Autonomous Workflows) is the product brand signal and entrance leader.
- Decision chart and Automate sparkles are canvas-drawn, not images.
- Single file; desktop + tablet + phone.
Build so a wide desktop screenshot shows three equal-ish cards centered as a scaled triptych: left bar chart with $4.7M chip, centre Falcon AI workflow with Automate pill + black cursor, right converging orange flow with 128 Hrs / tags — then entrance plays centre-out on load.
Cyber LayerCybersecurity · free prompt · copy-paste
Build a **single self-contained `index.html`** that recreates this cybersecurity landing page **pixel-faithfully**. Fixed fullscreen black stage, left-locked typography, right-side looping video atmosphere, one-shot entrance choreography, and a mobile burger overlay. No frameworks. No scroll. No cards. No purple. No rounded pills.
---
## 1. Document shell
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
<title>Security built into every system layer</title>
```
- `html, body { height:100%; background:#000; overflow:hidden }`
- `body { -webkit-font-smoothing:antialiased; text-rendering:geometricPrecision }`
---
## 2. Fonts (exact aliases from the original)
Embed two WOFF2 faces as `@font-face` with **`font-display:block`**:
| CSS family alias | Actual font | Role |
|---|---|---|
| `'SG'` | **Space Grotesk** (original embeds the Light cut as `SpaceGrotesk-Light`) | Headline, button labels, stat labels, mobile menu rows |
| `'JB'` | **JetBrains Mono Regular** (`JetBrainsMono-Regular`) | Nav links, subcopy, stat numbers, menu eyebrow/note/sublinks |
CSS weight usage (even if the embed is a single cut — match the original declarations):
- **SG**: `480` (buttons), `700` (h1 + mobile `.mrow`), `400` (stat labels)
- **JB**: `400` (nav, sub, menu), `480` (stat numbers)
Closest public substitutes if not copying the original base64: Google Fonts **Space Grotesk** + **JetBrains Mono**, still aliased as `'SG'` / `'JB'`.
---
## 3. Design tokens / scaling system
Three design canvases via `--s`:
**Desktop (default)**
```css
:root {
--s: min(100vw / 1505, 100vh / 700);
--red: #c81b1c;
--ink: #fff;
--sub: #e6e6e6;
--lab: #949494;
--bx:60; --by:36; --bs:44; /* burger box */
--h1y: -12.5;
--suby: 167.5;
--numy: 19;
--laby: 74;
}
```
**Tablet portrait** `@media (max-width:1023px) and (max-aspect-ratio:1/1)`
canvas **900×1200**:
```css
--s: clamp(0.82px, min(100vw / 900, 100vh / 1200), 1.25px);
--bx:56; --by:33; --bs:40;
--h1y:-10.25; --suby:137.4; --numy:15.6; --laby:60.7;
```
**Phone** `@media (max-width:599px)`
canvas **430×620**:
```css
--s: min(100vw / 430, 100vh / 620, 1.02px);
--bx:26; --by:21; --bs:34;
--h1y:-7.1; --suby:108; --numy:13; --laby:50;
```
Every layout value is `calc(N * var(--s))`. Do not use free rem/px layout outside this system.
---
## 4. Background video (mandatory exact URL)
Use this **exact** CloudFront URL everywhere a bg plate appears:
```
https://meez.design/web/media/ext/4a3f2c95c26203a8.mp4
```
**Three synced `<video>` instances**, each with:
`autoplay muted loop playsinline preload="auto"`
1. `.bg > video` — primary full-bleed plate
2. `.bg2 > video` — second pass, lifted lower half
3. `.menu-tex > video` — faint overlay inside mobile menu
CSS:
```css
.screen { position:fixed; inset:0; overflow:hidden; background:#000 }
.bg, .bg2 { position:absolute; inset:0; overflow:hidden; pointer-events:none }
.bg { filter: url(#grade) }
.bg video, .bg2 video {
position:absolute; inset:0; width:100%; height:100%;
object-fit:cover; object-position:center top; display:block;
}
.bg2 {
filter: url(#grade2);
mix-blend-mode: plus-lighter;
opacity: .35;
-webkit-mask-image: linear-gradient(180deg, transparent 21.5%, #000 100%);
mask-image: linear-gradient(180deg, transparent 21.5%, #000 100%);
}
```
**Tablet portrait video treatment**
- `.bg2 { display:none }`
- `.bg video { object-position:right top; transform:scale(1.18); transform-origin:right top }`
- `.bg` masked: `linear-gradient(180deg, #000 0 40%, transparent 64%)`
- `.scrim` ON: `linear-gradient(100deg, #000 26%, rgba(0,0,0,.74) 50%, rgba(0,0,0,.18) 76%, transparent 92%)`
**Phone video treatment**
- videos `object-position:78% top`
- `.bg2` shown again with mask `linear-gradient(180deg, transparent 10%, #000 60%)`
- `.scrim` ON vertical:
`linear-gradient(180deg, rgba(0,0,0,.10) 0%, rgba(0,0,0,.50) 24%, rgba(0,0,0,.86) 42%, #000 66%)`
**Video sync script**: master = first video; on `timeupdate`, if other videos drift `>0.12s`, set `currentTime` to master. If `prefers-reduced-motion: reduce`, pause all and remove `autoplay`.
**SVG color-grade filters** (required — applied to video containers):
### `#grade`
```xml
<filter id="grade" color-interpolation-filters="sRGB">
<feComponentTransfer>
<feFuncR type="table" tableValues="0.0018 0.0105 0.0154 0.0228 0.0307 0.0404 0.0485 0.0585 0.0719 0.0923 0.1205 0.1466 0.1657 0.1866 0.2197 0.2405 0.2485 0.2921 0.3362 0.3465 0.3472 0.3781 0.3781 0.4078 0.4199 0.4391 0.4604 0.4763 0.4798 0.5197 0.5473 0.5720 0.5995 0.6048 0.6232 0.6322 0.6483 0.6734 0.7201 0.7201 0.7410 0.7707 0.7707 0.7790 0.8084 0.8084 0.8390 0.8595 0.8707 0.8870 0.8993 0.9085 0.9132 0.9132 0.9162 0.9162 0.9162 0.9162 0.9162 0.9162 0.9162 0.9162 0.9162 0.9238 0.9300"/>
<feFuncG type="table" tableValues="0.0023 0.0106 0.0159 0.0250 0.0333 0.0445 0.0535 0.0620 0.0707 0.0827 0.0936 0.1063 0.1214 0.1402 0.1678 0.1727 0.2029 0.2176 0.2461 0.2757 0.2814 0.3050 0.3415 0.3692 0.3826 0.3884 0.4617 0.4617 0.4617 0.4643 0.4643 0.4808 0.5706 0.6005 0.6005 0.6390 0.6390 0.6390 0.6390 0.6390 0.6390 0.6390 0.6390 0.6390 0.6524 0.6664 0.6805 0.6945 0.7086 0.7227 0.7367 0.7508 0.7648 0.7789 0.7929 0.8070 0.8211 0.8351 0.8492 0.8632 0.8773 0.8913 0.9054 0.9195 0.9300"/>
<feFuncB type="table" tableValues="0.0021 0.0110 0.0187 0.0311 0.0377 0.0466 0.0584 0.0706 0.0791 0.0924 0.1039 0.1145 0.1316 0.1464 0.1614 0.1719 0.1887 0.2014 0.2247 0.2458 0.2954 0.2954 0.3089 0.3938 0.3938 0.3988 0.3988 0.4581 0.4581 0.4762 0.4762 0.4763 0.5374 0.5560 0.5813 0.5813 0.5813 0.5813 0.5835 0.5969 0.6104 0.6238 0.6373 0.6507 0.6642 0.6777 0.6911 0.7046 0.7181 0.7315 0.7449 0.7584 0.7719 0.7853 0.7988 0.8123 0.8257 0.8391 0.8526 0.8661 0.8795 0.8930 0.9065 0.9199 0.9300"/>
</feComponentTransfer>
</filter>
```
### `#grade2` (slightly darker lift pass)
```xml
<filter id="grade2" color-interpolation-filters="sRGB">
<feComponentTransfer>
<feFuncR type="table" tableValues="0.0016 0.0092 0.0136 0.0201 0.0270 0.0356 0.0427 0.0515 0.0633 0.0812 0.1060 0.1290 0.1458 0.1642 0.1933 0.2116 0.2187 0.2570 0.2959 0.3049 0.3055 0.3327 0.3327 0.3589 0.3695 0.3864 0.4052 0.4191 0.4222 0.4573 0.4816 0.5034 0.5276 0.5322 0.5484 0.5563 0.5705 0.5926 0.6337 0.6337 0.6521 0.6782 0.6782 0.6855 0.7114 0.7114 0.7383 0.7564 0.7662 0.7806 0.7914 0.7995 0.8036 0.8036 0.8063 0.8063 0.8063 0.8063 0.8063 0.8063 0.8063 0.8063 0.8063 0.8129 0.8184"/>
<feFuncG type="table" tableValues="0.0015 0.0069 0.0103 0.0163 0.0216 0.0289 0.0348 0.0403 0.0460 0.0538 0.0608 0.0691 0.0789 0.0911 0.1091 0.1123 0.1319 0.1414 0.1600 0.1792 0.1829 0.1983 0.2220 0.2400 0.2487 0.2525 0.3001 0.3001 0.3001 0.3018 0.3018 0.3125 0.3709 0.3903 0.3903 0.4153 0.4153 0.4153 0.4153 0.4153 0.4153 0.4153 0.4153 0.4153 0.4241 0.4332 0.4423 0.4514 0.4606 0.4698 0.4789 0.4880 0.4971 0.5063 0.5154 0.5246 0.5337 0.5428 0.5520 0.5611 0.5702 0.5793 0.5885 0.5977 0.6045"/>
<feFuncB type="table" tableValues="0.0013 0.0066 0.0112 0.0187 0.0226 0.0280 0.0350 0.0424 0.0475 0.0554 0.0623 0.0687 0.0790 0.0878 0.0968 0.1031 0.1132 0.1208 0.1348 0.1475 0.1772 0.1772 0.1853 0.2363 0.2363 0.2393 0.2393 0.2749 0.2749 0.2857 0.2857 0.2858 0.3224 0.3336 0.3488 0.3488 0.3488 0.3488 0.3501 0.3581 0.3662 0.3743 0.3824 0.3904 0.3985 0.4066 0.4147 0.4228 0.4309 0.4389 0.4469 0.4550 0.4631 0.4712 0.4793 0.4874 0.4954 0.5035 0.5116 0.5197 0.5277 0.5358 0.5439 0.5519 0.5580"/>
</feComponentTransfer>
</filter>
```
Hide defs: `.svgdefs { position:absolute; width:0; height:0; overflow:hidden }`
---
## 5. Exact copy & DOM structure
Layer tree inside `.screen`:
1. `.bg` (+ video)
2. `.bg2` (+ video)
3. `.scrim` (hidden on desktop)
4. `.frame` (flex column) containing:
- `header`
- spacer `.sp.sp-a`
- `section.hero`
- spacer `.sp.sp-b`
- `section.stats`
- spacer `.sp.sp-c`
5. `#menu.menu` overlay (mobile)
### Header
- **Logo**: 46×46 SVG, 4 chevron-arrows pointing inward (N/E/S/W), white stroke `#fff`, `stroke-width="3"`, butt caps. Paths per arm: `M23 0V19.5` + `M14 10.2L23 19.2L32 10.2`, rotated 0/90/180/270 around `(23,23)`. Desktop: left `60`, top `35`, size `45`.
- **Nav** (desktop only): `Home` · `Resources▾` · `Benefits▾` · `Contact`
- font JB 400 / `19.9` / white
- nav origin left `482`, top `32`, height `58`
- default sibling gap `40`; 2nd link margin-left `53`; 4th `37`
- chevron SVG 11×6, stroke `currentColor` 1.7, path `M1 1L5.5 5L10 1`, size `11.6×7.2`, margin-top `-2.6`
- **Burger** (≤1023px): 3 white bars; 3rd bar shorter (`.47` width) until open; open → X (`rotate ±45deg`, middle opacity 0). Aria: `Open menu` / `Close menu`.
- **Top CTA** `.btn.btn-top`: label **Secure system** + arrow SVG (`M0 9H20.1` / `M12.1 1L20.1 9L12.1 17`), left `1232`, top `30`.
### Hero
Exact headline (two masked lines):
```
Security built into
every system layer
```
Markup:
```html
<h1>
<span class="ln"><span>Security built into</span></span>
<span class="ln"><span>every system layer</span></span>
</h1>
```
- SG 700, size `68.7`, line `76`, tracking `-2.4`, left `73`, top `--h1y`
Subcopy (exact break):
```
Engineered to stay resilient, controlled,
and uncompromised under pressure.
```
- JB 400, size `18.7`, line `26`, tracking `-0.87`, color `--sub`, left `73`, top `--suby`
CTA `.btn.btn-cta` identical to top button, left `73`, top `248`.
### Buttons (shared `.btn`)
- Desktop: `212×58`, bg `--red`, padding L`18` R`22`, gap `11`
- Label SG 480 / `20.85` / tracking `-0.62` / translateY `1.5`
- Arrow `21.5×18`, white stroke 2
- Hover (hover-capable only): bg `#b01617`; arrow `translateX(3)`
- Tablet: `174×47.6`, pad `14.8/18`, gap `9`, label `17.1`
- Phone: `185×50`, pad `15.7/19.1`, gap `9.6`, label `17.5`
- Sharp corners (no border-radius)
### Stats
| Stat | Number | Label | left |
|---|---|---|---|
| s1 | `300+` | Clients | `70.4` |
| s2 | `99%` | Satisfaction | `213.1` |
| s3 | `$5M+` | Revenue | `392.6` (num offset `-4.4`) |
- Numbers: JB 480 / `33.45` / white
- Labels: SG 400 / `21.9` / tracking `-0.62` / `--lab`
- Vertical rules `.r1` @ `181`, `.r2` @ `356`, width `1.5`, gradient
`linear-gradient(180deg, rgba(255,255,255,.085), rgba(255,255,255,.21) 50%, rgba(255,255,255,.085))`
### Fluid spacers (desktop)
```
.sp-a flex 239 / .sp-b 194 / .sp-c 115
```
(Tablet 340/276/163 · Phone 106/92/56)
### Mobile menu (`#menu`)
- Fullscreen black plate + `.menu-tex` video at opacity `.4` with top fade mask
- Red top rule `.menu-rule` height `2`, scales X from 0→1 on open (`.55s`, delay `.04s`, cubic-bezier `.2,.7,.2,1`)
- Eyebrow: `MENU` style — JB, `11.5`, letter-spacing `.22em`, uppercase, `--lab`
- Rows: Home · Resources (accordion) · Benefits (accordion) · Contact
- Resources children: Documentation / Threat reports / Changelog
- Benefits children: Continuous monitoring / Access control / Incident response
- Footer CTA full-width `.btn-menu` + note: `300+ clients / 99% satisfaction`
- Open: body class `nav-open`; list items stagger fade/rise delays `.08/.14/.20/.26s`
- Accordion: only one open; Escape closes; link click closes; resize to desktop closes
Breakpoint: `@media (max-width:1023px)` hide `nav` + `.btn-top`, show burger + menu.
---
## 6. Entrance animation (exact choreography)
**Arm before paint** (inline in `<head>` after CSS): if WAAPI exists and motion is allowed, add class `intro` to `<html>` immediately so the finished page never flashes.
**Initial `html.intro` CSS state**
- logo / nav links / burger / sub / stats: `opacity:0`
- logo `scale(.9)`; nav `translateY(7)`; sub `14`; nums `12`; labs `10`
- rules `scaleY(0)` origin center
- `.btn-top` / `.btn-cta`: `clip-path: inset(0 100% 0 0)` (wipe draw, not fade)
- each `h1 .ln`: `overflow:hidden` + pad-bottom `6` / margin-bottom `-6` (protect SG descenders)
- inner spans start at `translateY(120%)`
**Master timeline** (absolute seconds; phone multiplies all durations/delays by `0.86`)
Easings:
- `EXPO = cubic-bezier(.16,1,.3,1)`
- `QUINT = cubic-bezier(.22,1,.36,1)`
- `QUART = cubic-bezier(.25,1,.5,1)`
- `TYPE = cubic-bezier(.22,.85,.24,1)`
| t | Action |
|---|---|
| 0.00 | Logo: opacity 0→1 + scale .9→1, dur `.70`, EXPO |
| 0.12 | Nav links rise `7`, dur `.62`, stagger `.055`, QUINT |
| 0.18 | Burger fade, dur `.55`, QUART |
| 0.28 | Top button wipe clip, dur `.66`, EXPO |
| 0.34 | Headline lines rise from 120%, dur `.98`, stagger `.09`, TYPE |
| 0.74 | Sub rise `14`, dur `.72`, QUINT |
| 0.90 | Hero CTA wipe, dur `.70`, EXPO |
| 0.98 | Rules scaleY 0→1, dur `.60`, stagger `.07`, QUART |
| 1.04 | Stat nums rise `12`, dur `.66`, stagger `.085`, QUINT |
| 1.10 | Stat labs rise `10`, dur `.62`, stagger `.085`, QUINT |
| ~1.9 | Complete |
**Completion rules**
- Wait for `document.fonts.ready` (backup `1000ms`), then `rAF` (+ `1200ms` backup) to start once.
- Measure `--s` via probe `width: calc(100 * var(--s))` because unregistered custom props don’t resolve in getComputedStyle.
- On finish: remove `intro`, **cancel** all animations (no residual inline styles). Hard deadline `4000ms`.
- Background video is **never** part of the entrance — it is already on stage.
- `prefers-reduced-motion: reduce`: no `intro` class; everything visible/static.
---
## 7. Interaction / a11y
- Hover only under `@media (hover:hover)`: nav → `--red`; buttons darken; menu rows/sublinks as specified
- Focus-visible: `2` white outline, offset `3`
- Reduced motion: kill transitions (`* { transition:none !important }`) and skip entrance
---
## 8. Non-negotiables for “exact”
1. Exact video URL above (all 3 instances)
2. Font aliases `'SG'` = Space Grotesk, `'JB'` = JetBrains Mono, `font-display:block`
3. Canvas scaler `--s` with 1505×700 / 900×1200 / 430×620
4. Dual graded video layers + exact LUT filters
5. Copy, line breaks, stats, menu tree character-exact
6. One-shot WAAPI entrance with absolute timing table above
7. Sharp red CTAs (`#c81b1c`), no border-radius
8. Single-file HTML, fullscreen, no scroll
Data SignalAnalytics · free prompt · copy-paste
Recreate this page **pixel-faithfully** as a single static `index.html` (inline CSS + JS, no framework). Match structure, copy, spacing tokens, glass, motion, fonts, and media exactly. Do not invent extra sections, stats, cards, or marketing blocks. Full-viewport dark landing only — no page scroll (`html, body { overflow: hidden; background: #000 }`).
## Product / brand
- Brand: **Vantage**
- Document title: `Stop Digging Through Dashboards`
- Theme color: `#000000`
- `color-scheme: dark`
- One composition: full-bleed cinematic background + left hero stack + bottom-right glass demo card. No inset hero media cards elsewhere.
## Exact background video (mandatory)
Full-bleed edge-to-edge background is a **`<video>`**, not an image:
```html
<video class="background" autoplay muted loop playsinline disablepictureinpicture aria-hidden="true">
<source src="https://meez.design/web/media/ext/4048e8b759e0669f.mp4" type="video/mp4">
</video>
```
CSS for `.background`:
- `position: absolute; inset: 0; z-index: -3; width/height: 100%; object-fit: cover; object-position: center; pointer-events: none; user-select: none`
Over video, add `.screen::before` vignette at `z-index: -2`:
```css
background:
linear-gradient(180deg, rgba(0,0,0,.03), transparent 24%, transparent 82%, rgba(0,0,0,.05)),
radial-gradient(ellipse at 44% 54%, transparent 30%, rgba(0,0,0,.055) 100%);
```
## Fonts (exact)
Embed / use these two variable fonts (not Inter/Roboto/system UI):
1. **Reference Sans** — `font-weight: 100 900` — default UI / body / nav / buttons
2. **Reference Display** — `font-weight: 400 900` — **headline only**
`:root { font-family: "Reference Sans", Arial, sans-serif; }`
**Headline (`.hero-title`)**:
- `font-family: "Reference Display", "Reference Sans", Arial, sans-serif`
- **`font-weight: 500` (medium)** — not bold, not semibold
- `font-optical-sizing: auto`
- `letter-spacing: -2.1px`
- `-webkit-text-stroke: .12px currentColor`
- `white-space: nowrap`
- `text-shadow: 0 2px 2px rgba(0,0,0,.44)`
Do **not** use Playfair Display.
## Exact copy (preserve wording, including grammar)
Headline (two lines):
1. `Stop Digging` — color `#fff`, `transform: scaleX(.775)` on `.line-one`
2. `Through Dashboards.` — color `rgba(211, 207, 207, .78)`, `transform: scaleX(.793)` on `.line-two`
Each line wrapped: `<span class="line line-one|line-two"><span class="line-reveal">…</span></span>` with `transform-origin: left center` on `.line`.
Body copy (exact, including “bring” not “brings”, and the three line breaks):
```
Your metrics are scattered across a dozen dashboards.<br>
Vantage bring them into one clear signal, so every<br>
decision is backed by data you actually trust.
```
- Color `rgba(226, 229, 228, .84)`
- `font-weight: 350`, `letter-spacing: .13px`
- width `clamp(390px, 31.67vw, 500px)`, `left: 1px`
- `text-shadow: 0 1px 3px rgba(0,0,0,.7)`
Buttons / chrome text:
- Nav: `Home` (active), `About`, `Services`, `Contact`
- Time panel label: `Timezone`
- Time panel value: `9:47 PM • 14 July 2026` (static string)
- Header CTA: `Sign Up`
- Primary CTA: `Get Started`
- Demo card: `Watch Demo` + play control `aria-label="Play demo"`
## Layout architecture
Fixed `.viewport` (`inset: 0; isolation: isolate; background: #000`). Inside: `.screen` centered with `left/top: 50%; transform: translate(-50%,-50%); width/height: 100%; background: #000`.
### Desktop CSS variables on `.screen` (exact)
```css
--gutter-start: clamp(36px, 4.177vw, 96px);
--gutter-end: clamp(36px, 4.04vw, 96px);
--header-top: clamp(20px, 2.264vh, 30px);
--hero-bottom: clamp(34px, 5.19vh, 64px);
--display-size: clamp(58px, 7.64vh, 88px);
--display-leading: clamp(72px, 9.34vh, 106px);
--copy-size: clamp(14px, 1.70vh, 19px);
--copy-leading: clamp(19px, 2.17vh, 24px);
--title-copy-gap: clamp(15px, 2.08vh, 24px);
--copy-cta-gap: clamp(24px, 3.11vh, 36px);
--cta-width: clamp(142px, 15.09vh, 168px);
--cta-height: clamp(38px, 3.96vh, 44px);
--compact-control-font-size: clamp(17px, 1.75vh, 19px);
--action-control-font-size: clamp(17px, 1.78vh, 19.5px);
--primary-control-font-size: clamp(17px, 1.77vh, 19.25px);
--control-inline-nudge: -1px;
--control-baseline-shift: clamp(1px, .19vh, 2px);
--copy-optical-shift: clamp(0px, .1vh, 1px);
--watch-baseline-shift: clamp(2px, .38vh, 4px);
--card-width: clamp(150px, 18.96vh, 215px);
```
### Header (top bar)
Absolute: `inset: var(--header-top) var(--gutter-end) auto var(--gutter-start); height: 48px; display: flex; align-items: flex-start; white-space: nowrap`.
1. **Brand** — 25×25 SVG disc logo (clipPath circle), light face with angular diamond shards (`#ededed` ground, `#050606` / `#737778` / `#fafafa` / `#0a0b0b` paths). `top: 10px`, drop-shadow `0 1px 2px rgba(0,0,0,.3)`. `aria-label="Vantage home"`.
2. **Nav** — `margin-left: clamp(36px, 3.03vw, 48px); gap: clamp(32px, 2.9vw, 43px); top: 9px`. Links: `font-size: 16px; font-weight: 430; letter-spacing: -.36px; color: rgba(229,229,230,.77); text-shadow: 0 1px 3px rgba(0,0,0,.55)`. Active: `#fff` + underline `::after` width `44px`, height `2px`, `background: rgba(255,255,255,.82)`. First link `top: -3px`; fourth `margin-left: 1px`.
3. **Time panel** — `margin-left: auto; width: 211px; height: 48px; padding-left: 8px; border-left: 2px solid rgba(230,230,230,.52)`. Label `15px / weight 420 / rgba(240,240,240,.77)`. Value `15px / weight 440 / rgba(255,255,255,.93)`.
4. **Sign Up** — white pill button `109×42`, `border-radius: 7px`, `background: #fff`, `color: #101010`, `font-weight: 460`, `letter-spacing: -.34px`, shadows `inset 0 1px 0 rgba(255,255,255,.72)` + `0 1px 5px rgba(0,0,0,.34)`, `margin-left: clamp(20px, 1.95vw, 29px)`.
5. **Menu toggle** — `display: none` on desktop; shown only in tablet/mobile breakpoints. Two-line hamburger SVG; morphs to X when `.header.menu-open`.
### Hero (bottom-left)
`.hero-content`: `position: absolute; left: var(--gutter-start); bottom: var(--hero-bottom); flex-column; align-items: flex-start`.
**Primary CTA** (white, not glass):
- size from `--cta-width` / `--cta-height`, `border-radius: 7px`, `background: #fff`, `color: #111`, `box-shadow: 0 1px 5px rgba(0,0,0,.38)`
- Label absolute at `left: 8.125%`, `font-weight: 450`, `letter-spacing: -.3px`
- Dark arrow box absolute `right: 3.125%; top: 14.286%; width: 20.625%; height: 71.429%; border-radius: 7px; background: #070909` with white stroke arrow SVG 14×14
### Demo card (bottom-right) — glass
`.demo-card` absolute `right: var(--gutter-end); bottom: var(--hero-bottom); width: var(--card-width); aspect-ratio: 201 / 265; container-type: inline-size`
Glass look (exact):
```css
border: 1px solid rgba(255,255,255,.13);
border-radius: clamp(12px, 1.52vh, 18px);
background: linear-gradient(145deg, rgba(24,22,20,.80), rgba(5,12,14,.86));
box-shadow:
0 2px 10px rgba(0,0,0,.44),
0 0 0 3px rgba(255,255,255,.035) inset,
0 0 0 1px rgba(0,0,0,.9);
backdrop-filter: blur(14px) saturate(108%);
```
Inside:
- `.demo-visual` square thumbnail area using `cqw` units (`left/top 3.5/4 cqw`, `92.5×92 cqw`, `border-radius: 4cqw`, bg `#101a1e`)
- Image: abstract red/blue smoke thumbnail (`alt="Abstract red and blue smoke"`), filter `brightness(.89) saturate(.93) contrast(1.03)` — use local `assets/watch-demo-thumbnail.png` or equivalent embedded asset
- Circular glass play button centered: `29cqw`, `border: 1px solid rgba(255,255,255,.34)`, `background: rgba(3,5,7,.47)`, `backdrop-filter: blur(4px)`, white play triangle SVG
- `.watch-button` full-width under visual: glass gradient `linear-gradient(145deg, rgba(26,34,36,.86), rgba(16,29,33,.9))`, border `rgba(255,255,255,.21)`, `font-weight: 430`, label `Watch Demo`
## Glass language (reuse consistently)
Dark translucent panels with:
- subtle white borders `~rgba(255,255,255,.13–.21)`
- dark teal/charcoal linear gradients ~145deg
- inset hairline highlights
- `backdrop-filter: blur(14–18px) saturate(108–110%)`
Used on: demo card, watch button, play button, tablet/mobile menu panel, menu toggle.
## Entrance motion (exact choreography)
On load (unless `prefers-reduced-motion: reduce`):
1. Head script immediately adds `motion-pending` to `<html>` and sets a **3500ms** fallback timeout to remove it.
2. While `.motion-pending`: header/nav/time/sign-up/copy/cta/card start `opacity: 0`; title lines clip with overflow hidden; `.line-reveal` starts at `translate3d(0,110%,0) skewY(2deg)`; copy/cta/card have slight downward + scale offsets.
3. Animations (easing / duration / delay):
| Element | Keyframes | Duration | Easing | Delay |
|---|---|---|---|---|
| brand | entrance-brand (fade + up 7px + scale .94→1) | 580ms | `cubic-bezier(.16,1,.3,1)` | 60ms |
| nav links | entrance-nav (fade + up 6px) | 480ms | same | 130 / 175 / 220 / 265ms |
| time panel | entrance-nav | 520ms | same | 180ms |
| sign up | entrance-action (fade + up 8px + scale .985) | 520ms | same | 220ms |
| menu toggle | entrance-action | 520ms | same | 140ms |
| title line 1 | entrance-line (110% + skewY 2° → 0) | 800ms | `cubic-bezier(.22,1,.36,1)` | 300ms |
| title line 2 | entrance-line | 850ms | same | 440ms |
| hero copy | entrance-copy | 620ms | `.16,1,.3,1` | 740ms |
| primary CTA | entrance-action | 560ms | same | 960ms |
| demo card | entrance-card (up 12px + scale .968, origin 82% 50%) | 920ms | `.22,1,.36,1` | **1040ms** |
4. On `.demo-card` `animationend`, remove `motion-pending` and clear fallback timeout.
5. Hover (if motion OK): `button, a { transition: filter/opacity 140ms }` → hover `filter: brightness(1.08)`.
6. Focus-visible: `outline: 2px solid #fff; outline-offset: 3px`.
## Responsive behavior (must match)
### Tablet
`@media (min-width: 620px) and (max-width: 790px), (min-width: 620px) and (max-width: 1100px) and (orientation: portrait)`:
- Collapse nav/time/sign-up into glass dropdown panel under hamburger (`#tablet-navigation`), closed by default (`opacity 0; visibility hidden; transform translateY(-8px) scale(.985)`), open via `.header.menu-open`.
- Menu toggle glass button 46×46, `border-radius: 11px`, `backdrop-filter: blur(14px)`.
- Dropdown: `blur(18px)`, `border-radius: 16px`, width `min(324px, calc(100vw - 2*gutter))`.
- JS: toggle `aria-expanded`, set `inert` on nav when closed (when toggle visible), Escape / outside pointer / link click closes; focus first link on open.
### Mobile
`@media (max-width: 619px)`: similar hamburger glass menu (`min(340px, …)`), hero bottom-anchored with `--mobile-gutter` / safe-area insets, tighter title scales (`scaleX(.78)` / `.55`), hide `<br>` in copy (`display:none`), demo card moves to upper-right (`top: clamp(176px, 32svh, 300px)`). Additional short-height and landscape-mobile overrides as in source.
## DOM skeleton (exact hierarchy)
```
main.viewport
section.screen#screen
video.background > source[CloudFront mp4 above]
header.header
a.brand > svg logo
div.header-actions#tablet-navigation
nav.nav > Home/About/Services/Contact
div.time-panel > label + value
button.sign-up
button.menu-toggle
section.hero
div.hero-content
h1.hero-title > two .line > .line-reveal spans
p.hero-copy
button.primary-cta > .label + .arrow-box
article.demo-card
div.demo-visual > img + button.play
button.watch-button
```
## Non-negotiables
- Use the **exact CloudFront MP4 URL** above for the background video.
- Headline font = **Reference Display at weight 500**.
- UI font = **Reference Sans** with the fractional weights listed (430/420/440/460/450/350 etc.).
- Glass demo card bottom-right; white primary CTA bottom-left under copy.
- One-shot entrance timeline with the delays/easings above.
- No scroll, no extra sections, no purple gradients, no Inter.
- Preserve static timezone string and the copy typo “Vantage bring”.
Implement as a polished production-ready single HTML file that looks identical to this Vantage landing page.
DeepThinkAI Assistant · free prompt · copy-paste
Recreate this page EXACTLY as a single static HTML file (no frameworks, no React, no Tailwind, no GSAP). Two full-viewport dark sections stacked vertically. Smooth scroll. Antialiased text. Reference canvas feel: polished AI product landing, near-black #0c0c0c.
════════════════════════════════════
EXTERNAL ASSETS (ONLY THESE)
════════════════════════════════════
Fonts (must load exactly):
- Preconnect: https://fonts.googleapis.com
- Preconnect: https://fonts.gstatic.com (crossorigin)
- Stylesheet: https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap
Section 1 font stack: "Inter","Helvetica Neue",Arial,system-ui,sans-serif
Section 2 font stack: -apple-system,BlinkMacSystemFont,"Helvetica Neue","Segoe UI",Arial,sans-serif
NO external images, videos, favicons, JS libraries, or CDN icon packs. All marks are inline SVG. Logo rays are generated at runtime with JS (24 radial lines).
════════════════════════════════════
PAGE TITLE / META
════════════════════════════════════
<title>Think clearly. Decide confidently</title>
viewport: width=device-width, initial-scale=1, viewport-fit=cover
html lang="en", base font-size 16px, scroll-behavior:smooth (auto if prefers-reduced-motion)
════════════════════════════════════
GLOBAL / BODY
════════════════════════════════════
body background #0c0c0c, color #fff
body.menu-open { overflow:hidden } when mobile menu open
════════════════════════════════════
SECTION 1 — HERO (class section-one, id="home")
min-height: 100dvh, background #0c0c0c
CSS variables (exact):
--bg:#0c0c0c
--box:#111111
--hairline:rgba(255,255,255,0.065)
--heading:#fafafa
--subtitle:#9e9e9e
--nav:#bcbcbc
--placeholder:#aeaeae
--chip-fill:rgba(255,255,255,0.028)
--chip-border:rgba(255,255,255,0.30)
--chip-edge: linear-gradient(135deg,
rgba(255,255,255,1) 0%,
rgba(255,255,255,0.94) 22%,
rgba(255,255,255,0.44) 38%,
rgba(255,255,255,0.28) 50%,
rgba(255,255,255,0.11) 63%,
rgba(255,255,255,0.04) 75%,
rgba(255,255,255,0.02) 100%)
--icon:#e8e8e8
--mic:#e1e1e1
--strip:#5c5c5c
--grad: linear-gradient(90deg,
rgba(255,232,120,0) 0%, #ffe776 6%, #ffd400 26%, #ffd000 42%,
#c9c93c 60%, #86ca8a 74%, #78d0cd 88%, rgba(120,208,205,0.55) 100%)
--grad-solid: linear-gradient(90deg,
#ffe776 0%, #ffd400 22%, #ffd000 40%, #c9c93c 60%, #86ca8a 76%, #78d0cd 100%)
Layout shell (.page):
min-height 100dvh, flex column
padding: clamp(14px,1.55vw,26px) clamp(16px,1.7vw,28px) 0
–––– NAV TOPBAR ––––
3-column grid: 1fr auto 1fr (desktop)
LEFT: logo link href="#home" aria-label="Home"
Logo SVG viewBox="0 0 52 52":
- empty <g class="rays" stroke="#f4f4f4" stroke-width="1.4" stroke-linecap="round">
- white circle cx=26 cy=26 r=7.4 fill="#fbfbfb"
JS fills rays: 24 lines, center 26,26, inner radius 10.4, outer 22.6, angles from -π/2 around full circle
Logo size: clamp(34px,3.1vw,52px)
CENTER nav links (ul.nav-links), gap clamp(1.6rem,2.63vw,2.75rem):
Features → #features
Benefits → #benefits
Pricing → #pricing
FAQ → #faq
Link style: color #bcbcbc, weight 400, size clamp(1rem,1.435vw,1.5rem), letter-spacing 0.005em, hover #f2f2f2, transition color .18s ease
RIGHT: white pill button "Start Free"
bg #ffffff, text #0c0c0c, weight 500, border-radius 999px,
padding clamp(0.55em,0.9vw,0.62em) clamp(1.1em,2vw,1.35em),
hover bg #ededed, active scale(.98)
Burger (≤1024 only): 3 hairline bars, morphs to X when aria-expanded=true
–––– HERO COPY ––––
Centered flex column
H1 (weight 500, color #fafafa, line-height 1.04, letter-spacing -0.021em,
font-size clamp(2rem,5.263vw,5.5rem); desktop ≥1025: clamp(3.25rem,4.6vw,4.75rem)):
TWO masked lines (NOT a single br):
Line1: "Think clearly."
Line2: "Decide confidently"
Structure each line as:
<span class="hl-mask"><span class="hl-line">…</span></span>
.hl-mask: display block; padding-bottom 0.16em; margin-bottom -0.16em
(during entrance overflow:hidden on mask)
Subtitle (data-enter), color #9e9e9e, weight 400,
size clamp(0.95rem,1.435vw,1.5rem), line-height 1.3, letter-spacing 0.004em,
margin-top clamp(1.1rem,2.9vw,3rem):
"An AI workspace that structures your reasoning,<br>not just your answers."
(On ≤680px: hide the <br>, width min(100%,22rem))
–––– COMPOSER CARD ––––
.composer-shell: full width, centered, isolation:isolate, transform translate3d(0,0,0)
.composer: width clamp(300px,55vw,913px) (desktop ≥1025: clamp(560px,52vw,820px); tablet: clamp(320px,72vw,760px); mobile: 100%)
margin-top clamp(1.2rem,2.9vw,3.05rem)
bg: linear-gradient(180deg,rgba(255,255,255,0.028),rgba(255,255,255,0) 42%), #111111
border 1px solid rgba(255,255,255,0.065)
radius clamp(14px,1.32vw,22px)
box-shadow: 0 2px 40px rgba(0,0,0,0.45), inset 0 1px 0 rgba(255,255,255,0.04)
padding clamp(16px,1.9vw,32px)
min-height clamp(150px,17.2vw,288px) (desktop: clamp(170px,15vw,250px))
flex column
INSIDE composer:
1) .composer-glow (absolute, z-index -1, behind card but above section via isolation):
left/right/top 0, bottom calc(-1 * clamp(3px,0.35vw,6px))
border-radius inherit, background --grad-solid, filter blur(0.4px), opacity 0.95
Creates yellow→teal underglow hugging bottom edge of composer
2) Placeholder text: "Break down a decision, problem, or idea…"
color #aeaeae, size clamp(0.95rem,1.435vw,1.5rem)
3) Controls row (margin-top auto, flex, gap clamp(8px,1.08vw,18px)):
a) ROUND + chip button (aria-label "Add attachment"):
size clamp(38px,3.23vw,54px), circle, white + icon SVG path M12 5v14M5 12h14, stroke 1.9
chip fill + masked 1px gradient ring via ::before with --chip-edge (mask-composite xor/exclude); flat border fallback
b) DeepThink pill chip: lightbulb SVG + label "DeepThink"
height same as round, radius 999, padding 0 clamp(12px,1.4vw,23px), text white ~clamp(0.9rem,1.316vw,1.375rem)
c) spacer flex 1
d) Mic button (no chip ring): mic SVG, color #e1e1e1
e) SEND button (the only continuous ambient motion):
size clamp(40px,3.35vw,56px), circle
--send-ring: clamp(1.1px,0.092vw,1.53px)
padding = ring thickness; outer bg --grad-solid
::before absolute inset 0 circle with same --grad-solid (animated layer)
INNER .send-inner: flex 1, circle, bg #141414, up-arrow SVG stroke #fafafa ~44% size
hover: filter brightness(1.08); active: scale(.95)
AFTER hero entrance completes (html.hero-ready): animate ::before with
@keyframes send-ring-sweep { from rotate(0) to rotate(360) }
10s linear infinite — gradient light sweeps around ring; button body never moves
–––– TRUST LOGOS FOOTER ––––
4 brands in a row (≤600px: 2×2), color #5c5c5c, gap clamp(1.6rem,5.6vw,5.9rem)
Each: small SVG mark + word "logoipsum" (2nd has ® superscript)
All placeholder logoipsum marks (inline SVG only — no logo URLs)
–––– MOBILE NAV OVERLAY (≤1024) ––––
Fixed fullscreen dialog #navOverlay
bg: radial yellow/teal tint + dark translucent gradient
backdrop-filter: blur(22px) saturate(120%)
opacity 0 / hidden → .open: opacity 1, transition .34s
Links: Features, Benefits, Pricing, FAQ — huge type clamp(2rem,9vw,3.4rem) weight 500
Staggered fade+lift on open (delays .08/.14/.20/.26s), ease cubic-bezier(.22,1,.36,1)
Hover underline grows with --grad (transparent→yellow→teal)
Footer: 2px --grad bar + full-width white "Start Free" CTA
Burger/Escape/resize>1024 closes menu
════════════════════════════════════
SECTION 2 — FEATURES (class section-two, id="features")
════════════════════════════════════
min-height 100dvh, bg #0c0c0c
padding: clamp(20px,3.2vh,42px) clamp(16px,6vw,91px) clamp(16px,2.4vh,32px)
On desktop ≥1025: padding-top clamp(130px,12.6vw,210px) — deliberate pause after logos
wrap max-width 1300px
Variables:
--heading:#ffffff
--subhead:#8b8b8d
--panel-bg:#0d0d0d
--bubble-bg:#1c1c1c
--msg-text:#efefef
--reason-text:#0b0c07
--green:#23d92c
--input-bg:#fdfdfd
--placeholder:#6b6b6d
--send-bg:#0c0c0c
H2 (weight 400, letter-spacing -0.02em, size clamp(1.6rem,4.1vw,3.3rem), line-height 1.11)
TWO masked lines:
"Built for human thinking."
"Powered by structured intelligence."
Subcopy (data-enter):
"Ask complex questions. Explore multiple perspectives.<br>Get structured, reliable answers — instantly."
color #8b8b8d, size clamp(0.82rem,1.25vw,1.125rem)
(hide on max-height 520px)
GRADIENT PANEL (.panel):
border-radius clamp(10px,1vw,14px)
EXACT multi-layer background:
radial-gradient(120% 150% at 9% 52%, #d2ae1a 0%, #bf9f28 22%, rgba(175,155,55,0) 56%),
radial-gradient(120% 150% at 95% 50%, #64a3a2 0%, #4d9494 34%, rgba(70,140,140,0) 64%),
radial-gradient(80% 110% at 42% 6%, rgba(150,160,55,.55) 0%, rgba(150,160,60,0) 42%),
linear-gradient(96deg, #c6a119 0%, #b0972a 32%, #7ba184 62%, #509393 100%)
::after vignette: radial-gradient(135% 120% at 50% 50%, transparent 58%, rgba(0,0,0,.30) 100%)
Inside panel:
- "Live reasoning" row: glowing green radial dot (box-shadow 0 0 6px rgba(45,220,55,.65)) + dark label #0b0c07
- Chat card max-width 814px, bg #0d0d0d, radius clamp(12px,1.4vw,18px)
Conversation (exact copy, alternating user/ai):
1 USER: "Should we expand into the European market next quarter?"
User avatar: grey person SVG (circle head + shoulders path stroke #f2f2f2)
2 AI: avatar = circle with gradient linear-gradient(105deg,#f5c40a 0%,#dcae3f 40%,#6ac6a0 62%,#22c0cf 100%)
Bubble:
"Let's evaluate this across four dimensions:" + 0.75em gap
"• Market demand & competition"
"• Regulatory complexity"
"• Operational cost impact"
"• Long-term strategic value" + gap
"Would you like to prioritize speed or profitability?"
3 USER: "Analyze the Q3 sales data. Why did revenue drop in August?"
4 AI: "I've reviewed the Q3 database. The drop in August correlates with a 15% decrease in enterprise renewals. I've drafted a retention strategy below."
5 USER: "Analyze our churn rate for February and draft a re-engagement email for inactive users"
(no AI reply after this — ends on user message)
Bubbles: bg #1c1c1c, color #efefef, radius clamp(11px,1.1vw,15px), max-width 78%,
font-size clamp(0.8rem,1.12vw,1.06rem), line-height 1.42
User msgs justify end; AI msgs justify start
White pill input bar at bottom of chat:
placeholder "What should we build today?" color #6b6b6d
mic SVG (filled dark #111) + black circle send with white up-arrow SVG
height clamp(40px,4.4vh,48px), bg #fdfdfd, radius 999
════════════════════════════════════
ANIMATIONS — EXACT CHOREOGRAPHY
════════════════════════════════════
NO animation libraries. Use Web Animations API (Element.animate) + CSS.
HEAD SCRIPT (before paint):
If NOT prefers-reduced-motion: add classes html.entrance AND html.entrance-s2
Failsafe: remove .entrance after 3500ms
Under entrance: [data-enter] opacity 0; .hl-line opacity 0; .hl-mask overflow hidden
Under entrance-s2: same for section-two
Easing constants:
REVEAL = cubic-bezier(0.16, 1, 0.3, 1)
LIFT = cubic-bezier(0.22, 1, 0.36, 1)
On mobile ≤680: multiply travel distances by D=0.7 (desktop D=1)
Wait for document.fonts.ready OR 400ms max before starting section-1 timeline
(Inter display:swap — avoid FOUT mid-tween)
SECTION 1 MASTER TIMELINE (once on load, ~1.8s then teardown):
0.00 logo: opacity 0→1, scale 0.92→1, dur 0.60s, LIFT
0.10 nav links: lift 10px, dur 0.50, stagger +0.05 each
0.16 burger (if visible): lift 10px
0.26 Start Free: lift 10px
0.20 / 0.29 headline lines: masked reveal —
from {opacity:0, translateY(108%)} → opacity 1 at offset 0.14 → translateY(0)
duration 950ms, delay 200+i*90ms, REVEAL
0.52 subtitle: lift 14px, dur 0.65
0.64 composer-shell: opacity 0→1, translateY(22*D) + scale(0.985)→1, dur 0.95, REVEAL
0.78 placeholder: lift 10px, dur 0.55
0.84+ control buttons: lift 10px, stagger 0.055
0.94 composer-glow: clipPath inset(0 40% 0 40%) → inset(0 0% 0 0%), opacity→0.95, dur 0.80, REVEAL
1.08 trust brands: lift 12px, stagger 0.06
COMPLETE → remove html.entrance, cancel all WAAPI fills, add html.hero-ready
→ starts send-ring-sweep 10s linear infinite
SECTION 2 ENTRANCE (once, IntersectionObserver rootMargin '0px 0px -20% 0px', threshold 0; disconnect after first play):
0.00 / 0.09 two h2 lines: same masked reveal as hero (delay i*90ms, no +200 base)
0.30 subhead: lift 14px, dur 0.65
0.40 panel: translateY(26*D)+scale(0.985)→identity, opacity 0→1, dur 1.00, REVEAL
0.68 Live reasoning: lift 10px
0.72 chat card: translateY(18*D)→0 ONLY (no opacity — inherits panel fade), dur 0.85
0.88+ messages: lift 10px stagger 0.065
1.24 inputbar: lift 10px
COMPLETE → remove entrance-s2, cancel animations; never replay on scroll back
REDUCED MOTION:
Do not arm entrance classes. Disable all transitions. Force visible. No send ring sweep.
════════════════════════════════════
RESPONSIVE BREAKPOINTS (exact architecture)
════════════════════════════════════
≥1025 desktop: quieter type scales; section-two large top padding
≤1024: hide center links + Start Free; show burger; composer wider clamp
≤680: tighter hero type, full-width composer, fixed control sizes ~44px
≤600: logos 2 columns
≤360: tighter chips
max-height 520: hide section-two subhead
════════════════════════════════════
INTERACTIONS
════════════════════════════════════
Chip hover: fill rgba(255,255,255,0.06)
Nav link hover: #f2f2f2
Mobile overlay open/close as specified
Composer is decorative UI (no real chat backend required)
All icons inline SVG as described — zero image URLs
════════════════════════════════════
OUTPUT
════════════════════════════════════
One self-contained index.html matching pixel-level layout, colors, gradients, typography, copy, SVGs, entrance timelines, ambient send-ring sweep, mobile overlay, and responsive clamps above. Do not invent extra sections, cards, stats, purple themes, or stock photography.
```
---
FastshotAI · free prompt · copy-paste
Recreate this page as ONE self-contained HTML file (inline CSS + JS). Match it pixel-faithfully. Do not invent extra sections, extra pages, extra copy, or a different visual language. The entire website is this single full-viewport hero.
════════════════════════════════════════════════════════════════
CRITICAL — COMPOSER RIGHT CLUSTER (this is where one-shot gens fail)
════════════════════════════════════════════════════════════════
The bottom of the prompt card is ONE toolbar row. Left: three chips. Right: “Sonnet 4.5”, paperclip, orange send circle.
DO NOT do any of the following (these are the usual mistakes):
- wrapping model + attach + send in a flex row with align-items:center
- giving the send button the same height as the chips
- vertically centering the send circle with the “Sonnet 4.5” text
- putting the send button on its own row or in the card’s vertical center
- adding padding/min-size around the paperclip (it is a raw SVG, not a padded icon button)
- using gap: 8px / 12px / 16px guesses between those three controls
DESKTOP MUST use absolute coordinates inside the toolbar, copied from the measured 1560×1008 frame.
Card (absolute frame coords): x=425, y=413, w=708, h=143, radius=26
Toolbar strip (.tools) inside the card:
left = (444 − 425) = 19u from card left
top = (505 − 413) = 92u from card top
height = 30u ← this is the CHIP row height
right ≈ card right (formula: right: calc((425 + 708 − 1134)*var(--u)) which is −1u)
Chips fill that 30u-tall strip. The send circle is TALLER than the chips and is NOT centered on them.
RIGHT CLUSTER (.right):
position:absolute; inset:0; pointer-events:none
each child: position:absolute; pointer-events:auto
(left offsets are relative to .tools, whose left edge is frame-x 444)
MODEL “Sonnet 4.5” + chevron
left: (955 − 444 − 0.8) = 510.2u
top: 15.5u
font-size: 10.4u, weight 400, color #98999C, line-height 1
display:inline-flex; align-items:center; gap: 6.2u
chevron SVG width: 6.8u
The 10.4u text sits in the LOWER-MIDDLE of the 30u chip row (top 15.5 + height 10.4 = 25.9, so it sits above the chip baseline, not vertically centered with the 35u send).
ATTACH paperclip
left: (1043.15 − 444) = 599.15u
top: (515.14 − 505) = 10.14u
color #A9AAAD
SVG width: 19.79u (no button padding, no background, no 32px hit box)
hover color #fff
SEND circle
left: (1084 − 444) = 640u
top: (507 − 505) = 2u
size: 35 × 35u, border-radius 50%
So: send top is 2u below the chip-row top; send bottom is at 2+35=37u, which HANGS 7u BELOW the 30u chip row.
Right padding: card right (1133) − send right (1084+35=1119) = 14u from the card’s inner right edge.
Horizontal gaps (do not invent others):
attach right ≈ 599.15+19.79 = 618.94u
send left = 640u
gap attach→send ≈ 21.06u
model starts at 510.2u; leave the natural width of “Sonnet 4.5” + 6.2u + chevron; do not stretch it.
VISUAL CHECK (desktop screenshot):
All three chips, the model label, the paperclip, and the send circle share one horizontal band near the BOTTOM of the glass card.
Placeholder text is a separate band near the TOP of the card (33u from card top). Two bands, not one.
The orange circle is the largest control on that band. Chips are 30u tall pills. Send is a 35u circle that slightly overshoots the chip row downward.
“Sonnet 4.5” is small muted text sitting left of the paperclip, vertically aligned to the chip TEXT, not to the send circle’s center.
Paperclip sits between the model label and the send circle, slightly higher than the model text, lower than the send’s top.
TABLET (600–1180 wide AND height ≥ 600) is the ONLY place the right cluster becomes flex:
.right { position:static; display:flex; align-items:center; margin-left:auto; gap:0 }
.right > * { position:static }
.attach { margin-left: clamp(9px, 1.4vw, 20px) }
.send { margin-left: clamp(9px, 1.3vw, 18px); width/height: clamp(32px, 3.5vw, 38px) }
Toolbar stays ONE ROW: chips left, controls right. Do not wrap the send onto a second row.
PHONE (max-width 599, or height < 600 with width ≤ 1180):
.tools { flex-direction:column; align-items:stretch; gap:12px }
chips wrap on row 1
.right { position:static; display:flex; align-items:center; justify-content:flex-start }
.attach { margin-left:auto } ← paperclip + send hug the right; model stays left
.send { margin-left:14px; width:40px; height:40px }
Still not a centered send. Model left, attach+send right, same second row.
════════════════════════════════════════════════════════════════
PRODUCT
════════════════════════════════════════════════════════════════
Fastshot landing hero.
<title>Fastshot — Describe an app. We'll build it.</title>
<meta name="description" content="Fastshot turns a written description into a working app.">
viewport: width=device-width, initial-scale=1, viewport-fit=cover
BACKGROUND VIDEO (REQUIRED — this exact URL, no substitute, no still image)
https://meez.design/web/media/ext/3d16a1c80d75577d.mp4
<video> covering the full viewport: autoplay muted loop playsinline, object-fit:cover, z-index 0.
Page behind it: #0a0d12. html/body height 100%, body overflow:hidden.
The video is a dawn lake-and-mountains landscape. CSS must not pan/zoom/ken-burns it. UI sits on top.
FONTS
Google Fonts Inter variable: opsz 14..32, wght 100..900, font-display:block
--font-text: Inter, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif
--font-display: Inter, var(--font-text)
Display roles: font-variation-settings: "opsz" 32
body: font-synthesis:none; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; text-rendering:geometricPrecision
Weights actually used (do not synthesize others): 400, display 410, 480 proof, 500 brand/labels, 520 CTA
REFERENCE LAYOUT (DESKTOP)
Frame 1560 × 1008. 1 unit (--u) = 1 reference px.
:root {
--u: min(0.06410256vw, 0.12400794vh);
--vu: 0.09920635vh;
--inset-top: 41; --inset-bottom: 106;
}
@supports (height:100dvh) {
--u: min(0.06410256vw, 0.12400794dvh);
--vu: 0.09920635dvh;
}
@media (min-width:1561px) { --inset-top:27; --inset-bottom:74; }
The composition scales as one block and is never clipped. Video always covers the viewport (no letterboxing).
CSS VARIABLES (copy exactly)
Nav:
--brand-x:225; --brand-y:45; --mark:34; --brand-gap:12; --brand-fs:18.49;
--links-y:50.5; --links-gap:50; --links-fs:21.69;
--cta-x:1195; --cta-y:42; --cta-w:140; --cta-h:43; --cta-r:12; --cta-fs:15.70; --cta-dy:2;
Hero:
--hero-gap:51;
--h1-y:323; --h1-fs:36.25; --display-ls:0.0018em;
--nav-ls:-0.0115em; --brand-ls:-0.0154em; --cta-ls:-0.0127em; --body-ls:0.007em;
--label-ls:normal; --model-ls:normal; --proof-ls:0.0065em;
--w-regular:400; --w-display-wght:410; --w-medium:500; --w-semibold:600;
--w-display:var(--w-display-wght); --w-nav:400; --w-brand:500; --w-cta:520;
--w-body:var(--w-regular); --w-label:var(--w-medium);
--w-model:var(--w-regular); --w-proof:480;
Composer:
--card-x:425; --card-y:413; --card-w:708; --card-h:143; --card-r:26;
--ph-x:452; --ph-y:446; --ph-fs:9.97;
--chips-x:444; --chips-y:505; --chip-h:30; --chip-r:9; --chip-fs:9.0; --chip-gap:5.5;
--son-fs:10.4; --son-top:15.5; --chev-gap:6.2;
--chev-x:1013.5; --chev-y:522.3;
--att-x:1043.2; --att-y:515.1;
--send-x:1084; --send-y:507; --send-d:35;
Footer:
--by-y:799; --by-fs:14.01; --logo-y:867; --logo-gap:62;
PAGE STRUCTURE
.stage (position:fixed; inset:0; overflow:hidden; background:#0a0d12)
.stage-video (absolute; inset:0; width/height 100%; object-fit:cover; z-index:0)
.frame (absolute; inset:0; z-index:1; flex column)
padding: calc(var(--inset-top)*var(--vu)) calc(225*var(--u)) calc(var(--inset-bottom)*var(--vu));
hidden checkbox #menu
header.nav (height: calc(43*var(--u)); flex; align-items:center; justify-content:space-between)
.sheet (mobile menu; display:none on desktop)
main.hero (flex:1; column; align center; justify center; gap: calc(var(--hero-gap)*var(--vu)); padding-bottom: calc(4*var(--vu)))
footer.proof (flex:none; column; align center; gap: calc(52.3*var(--vu)))
NAV LEFT — brand
Link “Fastshot”, aria-label “Fastshot home”
Mark 34×34: circle #9C86CE r=17, circle #FFFFFF r=8.6, circle #151519 r=3.7
Wordmark: Inter, 18.49u, weight 500, letter-spacing -0.0154em, translateY(1u), opsz 32
text-shadow: 0 1u 10u rgba(0,0,0,.30)
gap 12u
NAV CENTER — absolutely centered
position:absolute; left:50%; transform:translateX(-50%);
top: calc((50.5 − 41)*var(--u));
gap 50u
Features · Examples · Pricing · Docs (href="#")
21.69u, weight 400, Inter, letter-spacing -0.0115em, line-height 1.2, white
text-shadow: 0 1u 12u rgba(0,0,0,.32)
hover opacity .72, transition opacity .18s ease
NAV RIGHT — Get Started
140×43u, radius 12u, Inter 15.70u, weight 520, letter-spacing -0.0127em
align-self flex-start; margin-top: calc((42 − 41)*var(--u))
background: linear-gradient(180deg, #3d3d3f 0%, #1d1d20 100%)
box-shadow: inset 0 1u 0 rgba(255,255,255,.10), 0 2u 14u rgba(0,0,0,.28)
inner span translateY(2u)
hover filter:brightness(1.16); active translateY(1px)
HEADLINE
“Describe an app. We'll build it.”
Inter, 36.25u, weight 410, line-height 1.10, letter-spacing 0.0018em, white, opsz 32
text-shadow: 0 2u 22u rgba(0,0,0,.30)
COMPOSER CARD
<form class="card" onsubmit="return false">
708×143u, radius 26u, margin-right: 3u
background: rgba(41,41,43,.955)
backdrop-filter: blur(26u) saturate(112%)
box-shadow: inset 0 0 0 1px rgba(214,228,255,.14), 0 22u 60u rgba(0,0,0,.30)
position:relative (required so .ph and .tools can be absolutely placed)
PLACEHOLDER (a <p>, not an input)
“Build a fintech tracking app with bank level privacy and...”
position:absolute
left: (452−425)=27u
top: (446−413)=33u
right: 24u
color #8B8C8E, 9.97u, weight 400, line-height 1.35, letter-spacing 0.007em
white-space:nowrap; overflow:hidden
CHIPS (left side of the 30u toolbar)
.chips { display:flex; align-items:center; gap: 5.5u }
Each chip: height 30u, radius 9u, font 9.0u weight 500, color #909093, line-height 1
background: linear-gradient(180deg, rgba(255,255,255,.088) 0%, rgba(255,255,255,.050) 45%, rgba(255,255,255,.038) 100%)
border: 1px solid rgba(255,255,255,.05)
hover: linear-gradient(180deg, rgba(255,255,255,.14), rgba(255,255,255,.07)); color #c8c8cb
label span translateY(2u)
Chip 1 “Attach Screens” style="--cw:107;--pl:12;--ig:3.7" icon width 15.06u
Chip 2 “Attach a Figma” style="--cw:108;--pl:16;--ig:3.9" icon width 11.8u
Chip 3 “Today's Theme” style="--cw:107;--pl:15.8;--ig:2.9" icon width 12.13u
Icons are FILLED currentColor blob paths (not outline/stroke icons).
SEND STYLING
background: linear-gradient(163deg, #FBBC94 0%, #F49D70 46%, #E88654 100%)
box-shadow: 0 3u 12u rgba(210,110,60,.34)
white filled UP-arrow SVG, width 11.66u, flex-centered in the circle
aria-label “Build it”
hover brightness(1.07); active scale(.95)
FOOTER
“Built by engineers from”
Inter, 14.01u, weight 480, letter-spacing 0.0065em, color rgba(255,255,255,.95), opsz 32
text-shadow: 0 1u 12u rgba(0,0,0,.35)
Three white wordmark SVGs, gap 62u, drop-shadow 0 1u 10u rgba(0,0,0,.30)
Google 96.84u · Cisco 67.29u · Adobe 88.68u
Filled currentColor wordmarks (white on the photo).
FOCUS
:focus-visible { outline: 2px solid #F8B285; outline-offset: 3px; border-radius: 4px; }
Reset: *,*::before,*::after { box-sizing:border-box; margin:0; padding:0 }
button,input,textarea { font:inherit; color:inherit; background:none; border:0 }
img,svg { display:block }
MOBILE MENU
Burger 38×38, radius 11, background rgba(255,255,255,.10), border 1px solid rgba(255,255,255,.14), two-bar icon 17×12
CSS-only: hidden checkbox #menu + label.burger
.sheet: grid-template-rows 0fr → 1fr, 0.32s cubic-bezier(.4,0,.2,1)
Panel: rgba(24,24,27,.86), blur 20px, radius 16, border rgba(255,255,255,.09)
Links 15px; Get Started height 40, radius 11, font 15
RESPONSIVE — implement all three architectures
1) DESKTOP (default): unit-scaled 1560×1008 composition above. .burger and .sheet { display:none }. Absolute toolbar as specified.
2) TABLET: @media (min-width:600px) and (max-width:1180px) and (min-height:600px)
--u: 1px
Fluid DESKTOP, not phone. One-line headline. ONE-ROW toolbar (chips left, controls right).
.frame padding: clamp(24px,3.4vh,44px) clamp(28px,4.2vw,60px) clamp(26px,4.4vh,56px)
Nav stays horizontal with all four links + Get Started visible.
.h1: clamp(27px,4.3vw,44px); line-height 1.12
.card: width min(100%, clamp(516px,74vw,760px)); height:auto; margin-right:0
padding clamp(15px,1.9vw,24px); radius clamp(17px,2.1vw,26px)
display:flex; flex-direction:column; gap: clamp(20px,3.2vh,44px)
.ph: position:static; white-space:normal; clamp(11px,1.35vw,14px); line-height 1.4
.tools: position:static; height:auto; display:flex; flex-direction:row; flex-wrap:wrap; gap: clamp(10px,1.4vw,18px)
.chips: nowrap; gap clamp(6px,0.85vw,10px)
.chip: width:auto; height clamp(29px,3.4vh,34px); padding 0 clamp(7px,1vw,13px); font clamp(9.6px,1.12vw,12.5px)
.model: clamp(9.8px,1.12vw,12.5px)
Proof gap clamp(15px,2.5vh,30px)
3) COMPACT: @media (max-width:599px), (max-height:599px) and (max-width:1180px)
--u: 1px
padding:
max(18px, env(safe-area-inset-top))
max(clamp(18px,5.2vw,40px), env(safe-area-inset-right))
max(20px, env(safe-area-inset-bottom))
max(clamp(18px,5.2vw,40px), env(safe-area-inset-left));
Hide .links and header .cta. Show burger. Brand 30px mark.
.h1: width 100%; max-width:15ch; clamp(29px,7.6vw,50px); line-height 1.14; letter-spacing -.012em
.card: width 100%; max-width 600px; height auto; column; gap clamp(16px,4.6vh,34px); padding clamp(13px,3.4vw,18px)
.ph: nowrap ellipsis; clamp(9.4px,2.95vw,14px)
Extra short: @media (max-width:1180px) and (max-height:560px) { .hero gap 16px; .h1 clamp(24px,5.4vh,34px); .proof gap 10px; padding-top 10px }
ENTRANCE (once on first paint; never loops; not scroll-bound)
Head script: document.documentElement.classList.add('anim')
Only under prefers-reduced-motion: no-preference
--e-primary: cubic-bezier(.16,1,.3,1)
--e-soft: cubic-bezier(.22,1,.36,1)
@keyframes:
e-settle-down opacity 0, translateY(-5u) → none
e-settle-up opacity 0, translateY(6u) → none
e-mark scale(.9) → none
e-focus opacity 0, translateY(14u), blur(6u) → none / blur 0 (headline only)
e-panel opacity 0, translateY(18u) scale(.985) → none
e-populate opacity 0, translateY(4u) → none
e-send scale(.82) → none
animation-fill: both
brand e-settle-down .58s soft .06s
mark e-mark .62s primary .06s
nav links e-settle-down .50s soft .16s, stagger +0.05s (.16 .21 .26 .31)
Get Started e-settle-down .55s soft .34s
headline e-focus 1.00s primary .30s
composer e-panel .90s primary .62s
placeholder e-populate .50s soft .88s
chip row e-populate .50s soft .94s
.right e-populate .50s soft 1.00s
.send e-send .50s primary 1.00s
proof caption e-settle-up .55s soft 1.08s
logos e-settle-up .55s soft 1.16s, stagger +0.06s (1.16 1.22 1.28)
will-change transform,opacity on .h1 and .card while animating
After last logo animationend OR 2600ms timeout: remove class "anim" from <html>
prefers-reduced-motion: reduce → animation/transition duration .01ms
INTERACTION
Chips / model / attach / send are presentational. Form does not submit. Links are "#".
No JS except the anim class + teardown. Mobile menu is the checkbox.
OUTPUT
One HTML file. Dark full-bleed hero. Match colors, radii, shadows, letter-spacing, and the three responsive architectures.
Do not add a second section below the fold.
Desktop composer: absolute toolbar. Right cluster is NOT a flex-centered group.
---
## HTML Code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
<title>Fastshot — Describe an app. We'll build it.</title>
<meta name="description" content="Fastshot turns a written description into a working app.">
<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=Inter:opsz,wght@14..32,100..900&display=block" rel="stylesheet">
<style>
/* Standalone: Inter variable (Google Fonts) with opsz 14–32. Display roles pin "opsz" 32. */
/* ─────────────────────────────────────────────────────────────
Reference frame: 1560 × 1008. 1 unit (--u) == 1 reference px.
--u = min(viewport-width/1560, viewport-height/1008) so the
composition scales proportionally and is never clipped, while
the photograph behind it always covers the viewport edge to
edge — no letterboxing at the top or bottom at any size.
───────────────────────────────────────────────────────────── */
:root{
--u: min(0.06410256vw, 0.12400794vh);
--vu: 0.09920635vh;
/* Outer vertical insets. At the prototype's own size these are its measured values.
Wider-than-reference screens get a tighter crop: the composition scales with width,
so holding the prototype's inset proportion there leaves the header and the proof
row floating too far off the edges. */
--inset-top:41; --inset-bottom:106;
/* families */
--font-text:Inter,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
--font-display:Inter,var(--font-text);
--opsz-display:"opsz" 32;
/* nav */
--brand-x:225; --brand-y:45; --mark:34; --brand-gap:12; --brand-fs:18.49;
/* nav link spacing — prototype measures 36.1; widened for breathing room */
--links-y:50.5; --links-gap:50;--links-fs:21.69;
--cta-x:1195; --cta-y:42; --cta-w:140; --cta-h:43; --cta-r:12; --cta-fs:15.70; --cta-dy:2;
/* hero */
--hero-gap:51;
--h1-y:323; --h1-fs:36.25; --display-ls:0.0018em;
--nav-ls:-0.0115em; --brand-ls:-0.0154em; --cta-ls:-0.0127em; --body-ls:0.007em;
--label-ls:normal; --model-ls:normal; --proof-ls:0.0065em;
/* Weight scale — only weights that physically exist in the loaded font. */
--w-regular:400; --w-display-wght:410; --w-medium:500; --w-semibold:600;
/* role -> scale step */
--w-display:var(--w-display-wght); --w-nav:400;
--w-brand:500; --w-cta:520;
--w-body:var(--w-regular); --w-label:var(--w-medium);
--w-model:var(--w-regular); --w-proof:480;
--card-x:425; --card-y:413; --card-w:708;--card-h:143;--card-r:26;
--ph-x:452; --ph-y:446; --ph-fs:9.97;
--chips-x:444; --chips-y:505; --chip-h:30; --chip-r:9; --chip-fs:9.0; --chip-gap:5.5;
--son-fs:10.4; --son-top:15.5; --chev-gap:6.2;
--chev-x:1013.5; --chev-y:522.3;
--att-x:1043.2; --att-y:515.1;
--send-x:1084; --send-y:507; --send-d:35;
/* footer */
--by-y:799; --by-fs:14.01;
--logo-y:867; --logo-gap:62;
}
@supports (height:100dvh){ :root{ --u: min(0.06410256vw, 0.12400794dvh); --vu: 0.09920635dvh } }
/* beyond the reference width the frame is scaled up by width, so pull the chrome in */
@media (min-width:1561px){ :root{ --inset-top:27; --inset-bottom:74 } }
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
background:#0a0d12;
color:#fff;
font-family:Inter,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
font-synthesis:none;
-webkit-font-smoothing:antialiased;
-moz-osx-font-smoothing:grayscale;
text-rendering:geometricPrecision;
overflow:hidden;
}
img,svg{display:block}
button,input,textarea{font:inherit;color:inherit;background:none;border:0}
:focus-visible{outline:2px solid #F8B285;outline-offset:3px;border-radius:4px}
.stage{
position:fixed;inset:0;overflow:hidden;
background:#0a0d12;
}
.stage-video{
position:absolute;inset:0;width:100%;height:100%;
object-fit:cover;z-index:0;
}
.frame{
position:absolute;inset:0;z-index:1;
display:flex;flex-direction:column;
padding:calc(var(--inset-top)*var(--vu)) calc(225*var(--u)) calc(var(--inset-bottom)*var(--vu));
}
.nav{
position:relative;flex:none;
height:calc(43*var(--u));
display:flex;align-items:center;justify-content:space-between;
}
.hero{
flex:1 1 auto;min-height:0;
display:flex;flex-direction:column;align-items:center;justify-content:center;
gap:calc(var(--hero-gap)*var(--vu));padding-bottom:calc(4*var(--vu));
}
.proof{
flex:none;
display:flex;flex-direction:column;align-items:center;
gap:calc(52.3*var(--vu));
}
/* ── nav ─────────────────────────────────────────────── */
.brand{
align-self:flex-start;margin-top:calc(4*var(--u));
height:calc(var(--mark)*var(--u));
display:flex;align-items:center;gap:calc(var(--brand-gap)*var(--u));
text-decoration:none;color:#fff;
}
.mark{width:calc(var(--mark)*var(--u));height:calc(var(--mark)*var(--u));flex:none}
.brand span{
transform:translateY(calc(1*var(--u)));
font-size:calc(var(--brand-fs)*var(--u));font-weight:var(--w-brand);line-height:1;
text-shadow:0 calc(1*var(--u)) calc(10*var(--u)) rgba(0,0,0,.30);
letter-spacing:var(--brand-ls);
font-family:var(--font-display);
font-variation-settings:var(--opsz-display);
}
.links{
position:absolute;left:50%;transform:translateX(-50%);
top:calc((var(--links-y) - 41)*var(--u));
display:flex;align-items:flex-start;gap:calc(var(--links-gap)*var(--u));
}
.links a{
font-size:calc(var(--links-fs)*var(--u));font-weight:var(--w-nav);line-height:1.2;
color:#fff;text-decoration:none;white-space:nowrap;
text-shadow:0 calc(1*var(--u)) calc(12*var(--u)) rgba(0,0,0,.32);
transition:opacity .18s ease;
letter-spacing:var(--nav-ls);
font-family:var(--font-display);
font-variation-settings:var(--opsz-display);
}
.links a:hover{opacity:.72}
.cta{
align-self:flex-start;margin-top:calc((var(--cta-y) - 41)*var(--u));
width:calc(var(--cta-w)*var(--u));height:calc(var(--cta-h)*var(--u));
border-radius:calc(var(--cta-r)*var(--u));
display:flex;align-items:center;justify-content:center;
font-size:calc(var(--cta-fs)*var(--u));font-weight:var(--w-cta);line-height:1;
color:#fff;text-decoration:none;white-space:nowrap;
background:linear-gradient(180deg,#3d3d3f 0%,#1d1d20 100%);
box-shadow:inset 0 calc(1*var(--u)) 0 rgba(255,255,255,.10),
0 calc(2*var(--u)) calc(14*var(--u)) rgba(0,0,0,.28);
transition:filter .18s ease,transform .18s ease;
letter-spacing:var(--cta-ls);
font-family:var(--font-display);
font-variation-settings:var(--opsz-display);
}
.cta span{display:block;transform:translateY(calc(var(--cta-dy)*var(--u)))}
.cta:hover{filter:brightness(1.16)}
.cta:active{transform:translateY(1px)}
/* ── headline ────────────────────────────────────────── */
.h1{
font-family:var(--font-display);
text-align:center;
font-size:calc(var(--h1-fs)*var(--u));font-weight:var(--w-display);line-height:1.10;
letter-spacing:var(--display-ls);
color:#fff;
text-shadow:0 calc(2*var(--u)) calc(22*var(--u)) rgba(0,0,0,.30);
font-variation-settings:var(--opsz-display);
}
/* ── prompt card ─────────────────────────────────────── */
.card{
position:relative;flex:none;margin-right:calc(3*var(--u));
width:calc(var(--card-w)*var(--u));height:calc(var(--card-h)*var(--u));
border-radius:calc(var(--card-r)*var(--u));
background:rgba(41,41,43,.955);
-webkit-backdrop-filter:blur(calc(26*var(--u))) saturate(112%);
backdrop-filter:blur(calc(26*var(--u))) saturate(112%);
box-shadow:inset 0 0 0 1px rgba(214,228,255,.14),
0 calc(22*var(--u)) calc(60*var(--u)) rgba(0,0,0,.30);
}
.ph{
position:absolute;left:calc((var(--ph-x) - var(--card-x))*var(--u));
top:calc((var(--ph-y) - var(--card-y))*var(--u));
right:calc(24*var(--u));
font-size:calc(var(--ph-fs)*var(--u));font-weight:var(--w-body);line-height:1.35;
color:#8B8C8E;white-space:nowrap;overflow:hidden;
letter-spacing:var(--body-ls);
}
.ph .caret{display:none}
.tools{
position:absolute;left:calc((var(--chips-x) - var(--card-x))*var(--u));
right:calc((var(--card-x) + var(--card-w) - 1134)*var(--u));
top:calc((var(--chips-y) - var(--card-y))*var(--u));
height:calc(var(--chip-h)*var(--u));
display:flex;align-items:center;justify-content:space-between;
}
.chips{display:flex;align-items:center;gap:calc(var(--chip-gap)*var(--u))}
.chip{
display:inline-flex;align-items:center;
height:calc(var(--chip-h)*var(--u));
padding-left:calc(var(--pl)*var(--u));width:calc(var(--cw)*var(--u));
gap:calc(var(--ig)*var(--u));
border-radius:calc(var(--chip-r)*var(--u));
background:linear-gradient(180deg,rgba(255,255,255,.088) 0%,rgba(255,255,255,.050) 45%,rgba(255,255,255,.038) 100%);
border:1px solid rgba(255,255,255,.05);
color:#909093;white-space:nowrap;cursor:pointer;
font-size:calc(var(--chip-fs)*var(--u));font-weight:var(--w-label);line-height:1;
transition:background .18s ease,color .18s ease;
letter-spacing:var(--label-ls);
}
.chip:hover{background:linear-gradient(180deg,rgba(255,255,255,.14),rgba(255,255,255,.07));color:#c8c8cb}
.chip .ic{flex:none;height:auto}
.chip span{transform:translateY(calc(2*var(--u)))}
.ic-chip1{width:calc(15.06*var(--u))}
.ic-chip2{width:calc(11.8*var(--u))}
.ic-chip3{width:calc(12.13*var(--u))}
.right{position:absolute;inset:0;pointer-events:none}
.right > *{position:absolute;pointer-events:auto}
.model{
left:calc((955 - 444 - 0.8)*var(--u));top:calc(var(--son-top)*var(--u));
display:inline-flex;align-items:center;gap:calc(var(--chev-gap)*var(--u));
font-size:calc(var(--son-fs)*var(--u));font-weight:var(--w-model);line-height:1;
color:#98999C;cursor:pointer;white-space:nowrap;
transition:color .18s ease;
letter-spacing:var(--model-ls);
}
.model:hover{color:#d0d1d4}
.ic-chevron{width:calc(6.8*var(--u))}
.attach{
left:calc((1043.15 - 444)*var(--u));top:calc((515.14 - 505)*var(--u));
color:#A9AAAD;cursor:pointer;
transition:color .18s ease;
}
.attach:hover{color:#fff}
.ic-attach{width:calc(19.79*var(--u))}
.send{
left:calc((var(--send-x) - 444)*var(--u));top:calc((var(--send-y) - var(--chips-y))*var(--u));
width:calc(var(--send-d)*var(--u));height:calc(var(--send-d)*var(--u));
border-radius:50%;flex:none;cursor:pointer;
display:flex;align-items:center;justify-content:center;
background:linear-gradient(163deg,#FBBC94 0%,#F49D70 46%,#E88654 100%);
box-shadow:0 calc(3*var(--u)) calc(12*var(--u)) rgba(210,110,60,.34);
color:#fff;
transition:filter .18s ease,transform .18s ease;
}
.send:hover{filter:brightness(1.07)}
.send:active{transform:scale(.95)}
.ic-arrow{width:calc(11.66*var(--u))}
/* ── proof ───────────────────────────────────────────── */
.by{
text-align:center;
font-size:calc(var(--by-fs)*var(--u));font-weight:var(--w-proof);line-height:1.2;
color:rgba(255,255,255,.95);
text-shadow:0 calc(1*var(--u)) calc(12*var(--u)) rgba(0,0,0,.35);
letter-spacing:var(--proof-ls);
font-family:var(--font-display);
font-variation-settings:var(--opsz-display);
}
.logos{
display:flex;align-items:center;justify-content:center;
gap:calc(var(--logo-gap)*var(--u));color:#fff;
}
.logos svg{height:auto;filter:drop-shadow(0 calc(1*var(--u)) calc(10*var(--u)) rgba(0,0,0,.30))}
.ic-google{width:calc(96.84*var(--u))}
.ic-cisco{width:calc(67.29*var(--u))}
.ic-adobe{width:calc(88.68*var(--u))}
/* mobile-only chrome, hidden on the reference layout */
.burger{display:none}
.sheet{display:none}
/* ─────────────────────────────────────────────────────────────
Fluid layout for narrow / portrait viewports. The frame stops
scaling as one block and reflows instead, still filling the
full viewport height with no dead space.
───────────────────────────────────────────────────────────── */
/* ═══════════════════════════════════════════════════════════════════════════
TABLET
Desktop scales the whole 1560x1008 composition by --u, which holds while --u
stays near 1. Measured, the composer's micro-labels (9u) and body (10u) fall
under 8px/9px once --u drops past ~0.88, and at 1024x768 they reach 5.9px and
6.5px. That is where the desktop model stops being legible -- not where it
stops fitting. The lowest common laptop is 1280 wide, so desktop is left
untouched and tablet space is picked up at 1180 (exactly iPad Air landscape)
and below, gated on height so phone-landscape stays compact.
Architecture: tablets get a FLUID version of the DESKTOP composition, not the
phone's. Same vertical order, same one-line headline, same single-row composer
toolbar with chips left and controls right. Only the fixed 1560 grid is traded
for fluid sizing, so it reads as the same design at a smaller scale rather
than as a widened mobile layout.
═══════════════════════════════════════════════════════════════════════════ */
@media (min-width:600px) and (max-width:1180px) and (min-height:600px){
:root{ --u:1px }
.frame{
position:absolute;inset:0;transform:none;width:100%;height:100%;
display:flex;flex-direction:column;
padding:clamp(24px,3.4vh,44px) clamp(28px,4.2vw,60px) clamp(26px,4.4vh,56px);
}
/* the nav still fits its desktop composition at this size, so it keeps it */
.nav{
position:relative;flex:none;height:auto;
display:flex;align-items:center;justify-content:space-between;
gap:clamp(14px,2.2vw,30px);
}
.brand{align-self:auto;margin-top:0;height:auto;gap:clamp(9px,1.1vw,13px)}
.mark{width:clamp(27px,3.1vw,36px);height:clamp(27px,3.1vw,36px)}
.brand span{transform:none;font-size:clamp(15.5px,1.8vw,19.3px)}
.links{position:static;transform:none;top:auto;display:flex;gap:clamp(18px,3.2vw,50px)}
.links a{font-size:clamp(14px,1.8vw,21.69px)}
.cta{
align-self:auto;margin-top:0;width:auto;height:auto;
padding:clamp(8px,1vh,12px) clamp(15px,1.9vw,26px);
border-radius:clamp(9px,1.1vw,12px);
font-size:clamp(12.5px,1.45vw,15.7px);
}
.cta span{transform:none}
.burger,.sheet{display:none}
.hero{
flex:1 1 auto;min-height:0;
display:flex;flex-direction:column;align-items:center;justify-content:center;
gap:clamp(26px,4.2vh,52px);padding-bottom:0;
}
.h1{
width:auto;text-align:center;
font-size:clamp(27px,4.3vw,44px);line-height:1.12;
}
.card{
position:relative;flex:none;margin-right:0;
width:min(100%,clamp(516px,74vw,760px));height:auto;
padding:clamp(15px,1.9vw,24px);
border-radius:clamp(17px,2.1vw,26px);
display:flex;flex-direction:column;gap:clamp(20px,3.2vh,44px);
}
.ph{
position:static;right:auto;white-space:normal;
font-size:clamp(11px,1.35vw,14px);line-height:1.4;
}
/* single-row toolbar preserved — it is the composer's desktop identity */
.tools{
position:static;height:auto;
display:flex;flex-direction:row;align-items:center;flex-wrap:wrap;
gap:clamp(10px,1.4vw,18px);
}
.chips{display:flex;flex-wrap:nowrap;gap:clamp(6px,0.85vw,10px);min-width:0}
.chip{
width:auto;flex:0 0 auto;
height:clamp(29px,3.4vh,34px);
padding:0 clamp(7px,1vw,13px);gap:clamp(4px,0.6vw,6px);
border-radius:clamp(8px,0.95vw,10px);
font-size:clamp(9.6px,1.12vw,12.5px);
}
.chip span{transform:none}
.chip .ic{width:clamp(10.5px,1.3vw,15px)}
.right{
position:static;pointer-events:auto;margin-left:auto;
display:flex;align-items:center;justify-content:flex-end;gap:0;
}
.right > *{position:static}
.model{font-size:clamp(9.8px,1.12vw,12.5px);gap:clamp(5px,0.65vw,7px)}
.ic-chevron{width:clamp(6.5px,0.78vw,9px)}
.attach{margin-left:clamp(9px,1.4vw,20px)}
.ic-attach{width:clamp(15px,1.85vw,21px)}
.send{
margin-left:clamp(9px,1.3vw,18px);
width:clamp(32px,3.5vw,38px);height:clamp(32px,3.5vw,38px);
}
.ic-arrow{width:clamp(9.5px,1.15vw,13px)}
.proof{
flex:none;padding-top:0;
display:flex;flex-direction:column;align-items:center;
gap:clamp(15px,2.5vh,30px);
}
.by{width:auto;font-size:clamp(11px,1.3vw,14.5px)}
.logos{width:auto;gap:clamp(32px,5vw,68px)}
.ic-google{width:clamp(64px,7.8vw,100px)}
.ic-cisco{width:clamp(45px,5.5vw,70px)}
.ic-adobe{width:clamp(58px,7vw,90px)}
}
/* Compact — phones, and any window too short to seat the tablet composition. */
@media (max-width:599px), (max-height:599px) and (max-width:1180px){
:root{ --u:1px }
.frame{
left:0;top:0;transform:none;width:100%;height:100%;
display:flex;flex-direction:column;
padding:max(18px,env(safe-area-inset-top))
max(clamp(18px,5.2vw,40px),env(safe-area-inset-right))
max(20px,env(safe-area-inset-bottom))
max(clamp(18px,5.2vw,40px),env(safe-area-inset-left));
}
.brand,.cta{align-self:auto;margin-top:0}
.links{position:static;transform:none}
.card{position:relative}
.nav{height:auto}
.hero{padding-bottom:0}
.brand{height:auto;gap:11px}
.mark{width:30px;height:30px}
.brand span{font-size:clamp(17px,4.6vw,20px);transform:none}
.cta span{transform:none}
.nav{display:flex;align-items:center;gap:10px;flex:none}
.brand{margin-right:auto}
.links{display:none}
.nav .cta{display:none}
.burger{
display:flex;width:38px;height:38px;border-radius:11px;
align-items:center;justify-content:center;cursor:pointer;
background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.14);
}
.burger svg{width:17px;height:12px;color:#fff}
.hero{
flex:1 1 auto;min-height:0;
display:flex;flex-direction:column;align-items:center;justify-content:center;
gap:clamp(20px,4.4vh,40px);
}
.h1{
width:100%;max-width:15ch;
font-size:clamp(29px,7.6vw,50px);line-height:1.14;letter-spacing:-.012em;
text-shadow:0 2px 22px rgba(0,0,0,.34);
}
.card{
width:100%;max-width:600px;height:auto;margin-right:0;
padding:clamp(13px,3.4vw,18px);
border-radius:clamp(18px,4.6vw,26px);
display:flex;flex-direction:column;gap:clamp(16px,4.6vh,34px);
-webkit-backdrop-filter:blur(26px) saturate(112%);
backdrop-filter:blur(26px) saturate(112%);
}
.ph{
position:static;right:auto;
font-size:clamp(9.4px,2.95vw,14px);line-height:1.4;
white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.tools{
position:static;height:auto;
flex-direction:column;align-items:stretch;gap:12px;
}
.chips{
flex-wrap:wrap;align-content:flex-start;
gap:clamp(3.5px,1vw,8px);
row-gap:clamp(6px,1.6vw,8px);
}
.chip{
height:clamp(34px,8.4vw,38px);flex:0 0 auto;
padding:0 clamp(5px,1.6vw,13px);
gap:clamp(2.8px,0.9vw,6px);
border-radius:clamp(8px,2.6vw,10px);
font-size:clamp(7.6px,2.44vw,12.5px);
}
.chip span{transform:none}
.chip .ic{width:clamp(8.5px,2.6vw,14px)}
.right{position:static;display:flex;align-items:center;justify-content:flex-start;gap:0;pointer-events:auto}
.right > *{position:static}
.attach{margin-left:auto}
.chip{width:auto}
.model{font-size:clamp(11.5px,3.2vw,12.5px);gap:7px}
.ic-chevron{width:8px}
.ic-attach{width:20px}
.send{margin-left:14px;width:40px;height:40px}
.ic-arrow{width:10px}
.proof{
flex:none;display:flex;flex-direction:column;align-items:center;
gap:clamp(14px,2.6vh,24px);padding-top:clamp(16px,3vh,28px);
}
.by{width:auto;font-size:clamp(12.5px,3.4vw,14.5px)}
.logos{width:auto;gap:clamp(30px,8vw,62px)}
.ic-google{width:clamp(64px,17vw,96px)}
.ic-cisco{width:clamp(45px,12vw,67px)}
.ic-adobe{width:clamp(58px,15.5vw,88px)}
.sheet{
position:absolute;z-index:40;
top:calc(max(18px,env(safe-area-inset-top)) + 38px);
left:max(clamp(18px,5.2vw,40px),env(safe-area-inset-left));
right:max(clamp(18px,5.2vw,40px),env(safe-area-inset-right));
display:grid;grid-template-rows:0fr;
transition:grid-template-rows .32s cubic-bezier(.4,0,.2,1);
}
.sheet > div{overflow:hidden}
.sheet nav{
display:flex;flex-direction:column;gap:2px;
margin-top:12px;padding:8px;
border-radius:16px;
background:rgba(24,24,27,.86);
-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);
border:1px solid rgba(255,255,255,.09);
}
.sheet a{
padding:11px 14px;border-radius:11px;
color:#fff;text-decoration:none;font-size:15px;
}
.sheet a:hover{background:rgba(255,255,255,.07)}
.sheet .cta{
width:auto;height:40px;margin-top:6px;padding:0 18px;border-radius:11px;
font-size:15px;justify-content:center;
}
.sheet .cta span{transform:none}
#menu:checked ~ .sheet{grid-template-rows:1fr}
}
@media (max-width:1180px) and (max-height:560px){
.hero{gap:16px}
.h1{font-size:clamp(24px,5.4vh,34px)}
.proof{gap:10px;padding-top:10px}
}
/* ═══════════════════════════════════════════════════════════════════════════
ENTRANCE — one sequence, once, on first paint. Nothing loops, nothing is
scroll-bound, nothing survives completion.
DIRECTION
The photograph is a still dawn landscape. It is the stage and never moves.
The interface settles onto it. Motion is derived from where a thing lives:
chrome anchored to an edge arrives from that edge; content that sits over
the water rises out of it; the headline pulls into focus like a lens
finding its subject, which is the one gesture that belongs to a photograph.
VOCABULARY (four behaviours, no more)
A focus-rise headline only — rise + defocus->focus
B settle edge chrome — short travel from its own edge
C panel-lift the composer — rises as one object, micro scale
D populate panel contents — opacity-led, minimal travel
TIMELINE (s) start dur
brand group 0.06 0.58 B (mark scales inside the group)
nav links 0.16 0.50 B stagger 0.05
Get Started 0.34 0.55 B
headline 0.30 1.00 A overlaps the nav, takes the eye
composer panel 0.62 0.90 C arrives after the promise is read
placeholder 0.88 0.50 D
chip row 0.94 0.50 D
controls + send 1.00 0.50 D send adds a scale settle
proof caption 1.08 0.55 B from the bottom edge
partner logos 1.16 0.55 B stagger 0.06
complete ~1.83
═══════════════════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: no-preference){
:root{
--e-primary:cubic-bezier(.16,1,.3,1);
--e-soft:cubic-bezier(.22,1,.36,1);
}
@keyframes e-settle-down{ from{opacity:0;transform:translateY(calc(-5*var(--u)))} to{opacity:1;transform:none} }
@keyframes e-settle-up { from{opacity:0;transform:translateY(calc(6*var(--u)))} to{opacity:1;transform:none} }
@keyframes e-mark { from{transform:scale(.9)} to{transform:none} }
@keyframes e-focus { from{opacity:0;transform:translateY(calc(14*var(--u)));filter:blur(calc(6*var(--u)))}
to {opacity:1;transform:none;filter:blur(0)} }
@keyframes e-panel { from{opacity:0;transform:translateY(calc(18*var(--u))) scale(.985)} to{opacity:1;transform:none} }
@keyframes e-populate { from{opacity:0;transform:translateY(calc(4*var(--u)))} to{opacity:1;transform:none} }
@keyframes e-send { from{transform:scale(.82)} to{transform:none} }
html.anim .brand { animation:e-settle-down .58s var(--e-soft) .06s both }
html.anim .mark { animation:e-mark .62s var(--e-primary) .06s both }
html.anim .links a { animation:e-settle-down .50s var(--e-soft) .16s both }
html.anim .links a:nth-child(2){ animation-delay:.21s }
html.anim .links a:nth-child(3){ animation-delay:.26s }
html.anim .links a:nth-child(4){ animation-delay:.31s }
html.anim .cta { animation:e-settle-down .55s var(--e-soft) .34s both }
html.anim .h1 { animation:e-focus 1.00s var(--e-primary) .30s both }
html.anim .card { animation:e-panel .90s var(--e-primary) .62s both }
html.anim .ph { animation:e-populate .50s var(--e-soft) .88s both }
html.anim .chips { animation:e-populate .50s var(--e-soft) .94s both }
html.anim .right { animation:e-populate .50s var(--e-soft) 1.00s both }
html.anim .send { animation:e-send .50s var(--e-primary)1.00s both }
html.anim .by { animation:e-settle-up .55s var(--e-soft) 1.08s both }
html.anim .logos svg { animation:e-settle-up .55s var(--e-soft) 1.16s both }
html.anim .logos svg:nth-of-type(2){ animation-delay:1.22s }
html.anim .logos svg:nth-of-type(3){ animation-delay:1.28s }
html.anim .h1, html.anim .card{ will-change:transform,opacity }
}
@media (prefers-reduced-motion:reduce){
*,*::before,*::after{transition-duration:.01ms !important;animation-duration:.01ms !important}
}
</style>
<script>document.documentElement.classList.add('anim')</script>
</head>
<body>
<div class="stage">
<video class="stage-video" src="https://meez.design/web/media/ext/3d16a1c80d75577d.mp4" autoplay muted loop playsinline></video>
<div class="frame">
<input type="checkbox" id="menu" hidden>
<header class="nav">
<a class="brand" href="#" aria-label="Fastshot home">
<svg class="mark" viewBox="0 0 34 34" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<circle cx="17" cy="17" r="17" fill="#9C86CE"/>
<circle cx="17" cy="17" r="8.6" fill="#FFFFFF"/>
<circle cx="17" cy="17" r="3.7" fill="#151519"/>
</svg>
<span>Fastshot</span>
</a>
<nav class="links" aria-label="Primary">
<a href="#">Features</a>
<a href="#">Examples</a>
<a href="#">Pricing</a>
<a href="#">Docs</a>
</nav>
<label class="burger" for="menu" aria-label="Open menu">
<svg viewBox="0 0 17 12" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<rect y="1" width="17" height="1.6" rx=".8" fill="currentColor"/>
<rect y="8.4" width="17" height="1.6" rx=".8" fill="currentColor"/>
</svg>
</label>
<a class="cta" href="#"><span>Get Started</span></a>
</header>
<div class="sheet"><div><nav aria-label="Mobile">
<a href="#">Features</a><a href="#">Examples</a><a href="#">Pricing</a><a href="#">Docs</a>
<a class="cta" href="#"><span>Get Started</span></a>
</nav></div></div>
<main class="hero">
<h1 class="h1">Describe an app. We'll build it.</h1>
<form class="card" onsubmit="return false">
<p class="ph">Build a fintech tracking app with bank level privacy and...</p>
<div class="tools">
<div class="chips">
<button type="button" class="chip" style="--cw:107;--pl:12;--ig:3.7"><svg class="ic ic-chip1" viewBox="2.61 10.43 15.059999999999999 10.590000000000002" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" ><path d="M15.17 20.67 L4.67 20.6 L3.67 20.29 L3.1 19.5 L2.97 18.0 L2.96 12.5 L3.43 11.33 L4.5 10.82 L7.0 10.86 L8.83 11.33 L9.34 12.5 L10.0 12.96 L11.33 13.15 L12.83 12.73 L13.54 14.67 L15.67 15.26 L17.13 16.83 L17.32 18.17 L17.0 19.63 L15.17 20.67 Z M13.17 12.4 L10.55 11.17 L11.83 10.78 L14.17 10.9 L14.35 11.67 L13.17 12.4 Z M5.31 13.83 L7.23 12.67 L7.33 11.99 L6.17 11.78 L4.89 12.17 L4.45 13.33 L5.31 13.83 Z M5.52 18.5 L6.58 17.0 L8.17 16.9 L9.67 17.5 L11.83 16.55 L12.97 15.67 L13.22 15.0 L9.0 13.79 L7.36 14.0 L4.87 15.83 L4.73 18.0 L5.52 18.5 Z M14.51 19.5 L15.94 18.17 L14.67 16.53 L11.25 18.67 L11.83 19.3 L14.51 19.5 Z" fill="currentColor"/></svg><span>Attach Screens</span></button>
<button type="button" class="chip" style="--cw:108;--pl:16;--ig:3.9"><svg class="ic ic-chip2" viewBox="4.680000000000001 9.24 11.799999999999997 13.120000000000001" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" ><path d="M10.17 22.01 L7.93 21.5 L6.74 18.17 L5.03 16.33 L5.27 14.83 L6.7 13.83 L6.54 11.0 L7.33 10.05 L8.5 9.59 L10.67 9.98 L12.83 9.6 L14.83 9.8 L15.83 10.77 L16.13 11.67 L15.96 13.5 L14.31 14.67 L15.53 16.5 L15.42 17.67 L14.32 18.0 L13.06 15.5 L13.92 14.5 L13.33 13.95 L12.38 14.67 L12.51 16.17 L12.0 16.98 L10.87 16.67 L10.73 14.5 L10.0 14.07 L9.13 14.5 L8.84 16.5 L7.91 17.33 L7.83 19.5 L9.33 21.19 L10.67 20.75 L11.94 18.83 L13.33 18.78 L13.0 19.77 L10.17 22.01 Z M9.62 13.0 L10.59 12.33 L10.5 10.92 L8.17 11.0 L7.91 11.67 L8.19 12.5 L9.62 13.0 Z M13.57 13.17 L14.65 12.5 L14.8 12.0 L13.83 10.91 L12.83 10.88 L12.23 11.33 L12.12 12.33 L12.67 12.98 L13.57 13.17 Z M6.96 16.17 L7.59 15.0 L7.33 14.39 L6.97 14.5 L6.64 15.67 L6.64 16.17 L6.96 16.17 Z" fill="currentColor"/></svg><span>Attach a Figma</span></button>
<button type="button" class="chip" style="--cw:107;--pl:15.8;--ig:2.9"><svg class="ic ic-chip3" viewBox="3.42 9.8 12.129999999999999 10.789999999999997" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" ><path d="M14.0 20.24 L12.48 19.83 L12.5 18.0 L11.33 17.98 L8.5 18.91 L6.12 17.67 L3.77 13.67 L3.85 12.67 L4.77 11.0 L6.5 10.27 L11.67 10.15 L14.24 11.0 L15.1 12.33 L15.2 14.5 L14.9 15.83 L13.51 17.67 L14.6 19.33 L14.0 20.24 Z M9.37 17.5 L10.72 16.17 L7.24 14.67 L7.09 13.67 L7.83 13.31 L11.17 14.05 L11.54 14.5 L10.85 16.0 L12.17 16.25 L12.83 15.67 L13.54 13.67 L13.57 12.67 L13.03 12.0 L11.5 11.38 L9.17 11.68 L7.5 11.44 L5.69 12.33 L5.63 13.67 L6.98 16.33 L8.5 17.37 L9.37 17.5 Z" fill="currentColor"/></svg><span>Today's Theme</span></button>
</div>
<div class="right">
<button type="button" class="model">Sonnet 4.5 <svg class="ic ic-chevron" viewBox="3.48 5.3100000000000005 6.8 4.2299999999999995" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" ><path d="M7.67 9.19 L6.3 9.0 L3.83 6.67 L3.83 5.66 L4.83 5.68 L7.33 7.71 L9.17 6.02 L9.93 6.0 L9.9 7.0 L7.67 9.19 Z" fill="currentColor"/></svg></button>
<button type="button" class="attach" aria-label="Attach a file"><svg class="ic ic-attach" viewBox="4.15 4.140000000000001 19.79 20.400000000000002" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" ><path d="M19.5 14.2 L18.33 14.21 L17.83 13.83 L18.62 12.17 L18.44 10.0 L16.17 10.07 L15.56 9.33 L16.0 8.74 L18.23 8.17 L18.43 5.17 L19.17 4.49 L20.1 5.17 L20.5 7.88 L23.0 8.76 L23.59 9.67 L23.35 10.33 L22.83 10.54 L21.17 9.82 L20.38 10.0 L20.23 13.5 L19.5 14.2 Z M20.5 24.19 L8.33 24.17 L6.17 23.05 L5.0 21.67 L4.5 19.67 L4.58 8.83 L5.0 7.5 L6.5 5.94 L8.0 5.48 L12.83 5.53 L13.67 5.68 L14.04 6.17 L13.33 6.9 L7.67 6.96 L6.08 8.33 L6.0 20.0 L6.72 21.5 L9.33 22.89 L20.48 22.67 L21.47 21.17 L21.51 15.83 L21.12 14.33 L22.33 13.95 L23.08 15.0 L22.99 21.67 L22.18 23.17 L20.5 24.19 Z M10.67 21.04 L9.67 20.88 L9.58 20.17 L12.33 17.03 L14.17 15.96 L16.84 15.33 L16.83 15.97 L13.17 18.3 L10.67 21.04 Z" fill="currentColor"/></svg></button>
<button type="submit" class="send" aria-label="Build it"><svg class="ic ic-arrow" viewBox="8.41 8.24 11.659999999999998 14.8" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" ><path d="M14.67 22.69 L14.04 22.5 L13.79 21.83 L13.17 12.34 L12.33 12.35 L10.17 14.33 L9.17 14.28 L8.76 13.5 L13.5 8.88 L14.33 8.59 L19.25 13.0 L19.72 14.0 L19.33 14.62 L18.5 14.63 L16.5 12.79 L15.43 12.67 L15.18 21.67 L14.67 22.69 Z" fill="currentColor"/></svg></button>
</div>
</div>
</form>
</main>
<footer class="proof">
<p class="by">Built by engineers from</p>
<div class="logos">
<svg class="ic ic-google" viewBox="3.78 8.530000000000001 96.84 32.08" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" ><path d="M18.25 33.02 L13.25 32.81 L9.0 30.74 L5.75 27.35 L4.13 22.5 L4.14 18.75 L5.93 14.25 L9.06 11.0 L13.75 8.88 L19.0 9.0 L23.38 11.0 L24.12 12.25 L22.25 14.12 L19.75 12.73 L14.75 12.14 L12.25 12.88 L9.75 14.76 L7.83 18.25 L7.48 21.75 L8.0 24.22 L10.54 27.75 L12.25 28.91 L16.25 29.78 L20.5 28.88 L22.41 27.5 L23.72 25.5 L24.0 23.27 L16.75 22.81 L16.16 21.25 L16.75 19.86 L26.5 19.82 L27.66 20.75 L27.34 25.25 L25.56 28.75 L22.15 31.75 L18.25 33.02 Z M83.5 32.79 L81.5 32.65 L81.01 31.5 L81.12 10.5 L81.5 9.78 L82.5 9.56 L84.0 9.82 L84.41 10.75 L84.59 31.5 L83.5 32.79 Z M38.75 33.04 L35.0 33.01 L32.34 31.75 L30.0 29.26 L29.0 26.75 L29.08 23.75 L30.04 21.25 L32.04 19.0 L35.75 17.32 L37.75 17.28 L40.75 18.13 L43.5 20.58 L44.76 23.0 L44.77 27.0 L43.74 29.5 L41.5 31.84 L38.75 33.04 Z M55.75 33.01 L52.5 32.89 L49.89 31.75 L47.21 28.75 L46.43 26.25 L46.99 22.25 L48.18 20.25 L50.87 18.0 L53.5 17.21 L56.25 17.27 L59.5 18.92 L61.75 21.71 L62.29 23.5 L62.06 27.75 L61.0 29.8 L59.0 31.78 L55.75 33.01 Z M71.75 40.26 L69.25 39.96 L67.0 38.83 L65.07 36.75 L64.94 35.5 L67.25 34.26 L69.75 36.78 L73.0 36.95 L74.92 35.5 L75.6 32.5 L74.75 32.04 L73.0 32.94 L70.25 32.92 L67.25 31.66 L64.29 28.0 L64.3 22.5 L65.77 20.0 L68.75 17.73 L72.0 17.21 L75.0 18.54 L76.5 17.67 L78.0 17.6 L78.92 19.0 L78.56 35.0 L77.75 36.97 L76.0 38.88 L74.0 39.95 L71.75 40.26 Z M94.75 33.02 L91.75 32.84 L89.64 31.75 L87.37 29.5 L86.36 27.0 L86.42 23.0 L87.36 21.0 L90.5 18.06 L93.0 17.27 L97.0 18.15 L100.27 22.5 L99.75 23.63 L90.72 27.75 L90.87 28.75 L93.0 30.05 L95.5 29.84 L97.75 28.08 L100.0 29.38 L99.95 30.5 L98.5 31.75 L94.75 33.02 Z M38.71 29.75 L40.94 27.75 L41.63 25.75 L41.6 23.75 L39.63 21.0 L36.25 20.31 L34.5 21.1 L33.01 22.75 L32.72 26.75 L33.75 28.51 L35.25 29.68 L38.71 29.75 Z M91.1 24.5 L96.0 22.5 L96.09 21.25 L93.75 20.12 L91.75 20.95 L89.73 23.75 L90.0 24.62 L91.1 24.5 Z M54.94 30.0 L57.93 28.5 L58.98 26.75 L59.09 24.5 L57.23 21.25 L54.0 20.31 L52.25 20.93 L51.0 22.1 L50.12 23.75 L50.01 25.75 L51.42 28.75 L53.0 29.78 L54.94 30.0 Z M72.55 30.0 L73.73 29.5 L75.31 27.75 L75.62 23.75 L73.75 21.15 L71.0 20.56 L69.5 21.13 L68.25 22.41 L67.5 26.25 L69.0 28.82 L70.75 29.91 L72.55 30.0 Z" fill="currentColor"/></svg>
<svg class="ic ic-cisco" viewBox="5.0200000000000005 7.0 67.28999999999999 35.36" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" ><path d="M23.75 24.86 L22.0 24.67 L21.48 23.0 L21.5 8.5 L21.77 7.75 L22.75 7.35 L24.24 7.75 L24.58 8.5 L24.54 23.75 L23.75 24.86 Z M54.75 25.09 L53.54 24.75 L53.17 23.75 L53.16 9.0 L53.5 7.87 L55.0 7.53 L56.05 8.5 L56.09 20.25 L55.84 24.0 L54.75 25.09 Z M16.0 22.27 L14.25 22.34 L13.56 21.25 L13.67 13.75 L14.75 12.66 L16.0 13.06 L16.52 14.25 L16.55 21.25 L16.0 22.27 Z M31.75 21.79 L30.25 21.79 L29.67 20.75 L29.64 13.5 L30.5 12.6 L31.75 12.91 L32.51 14.25 L32.4 20.75 L31.75 21.79 Z M62.75 22.06 L61.5 21.79 L61.08 20.75 L61.1 14.0 L61.53 13.0 L62.5 12.67 L63.75 13.19 L64.08 14.5 L63.92 21.0 L62.75 22.06 Z M47.75 21.77 L46.0 21.82 L45.27 21.0 L45.43 14.5 L46.75 12.92 L47.57 13.25 L48.09 14.5 L47.75 21.77 Z M70.75 22.33 L69.75 22.16 L69.16 21.0 L69.28 17.25 L70.5 16.44 L71.5 16.82 L71.96 17.75 L71.89 21.25 L70.75 22.33 Z M7.0 22.03 L5.75 21.81 L5.37 21.0 L5.43 17.5 L6.25 16.69 L7.75 16.95 L8.29 18.0 L8.28 21.25 L7.0 22.03 Z M39.5 22.05 L38.25 22.02 L37.39 21.0 L37.44 18.25 L38.5 16.89 L39.75 17.18 L40.27 18.25 L40.29 21.0 L39.5 22.05 Z M36.5 41.82 L32.5 41.83 L31.29 40.5 L32.0 39.13 L34.75 39.37 L35.92 38.75 L35.58 37.75 L33.25 36.88 L31.2 34.5 L32.0 31.63 L34.0 30.26 L37.5 30.32 L38.76 31.5 L38.0 33.02 L35.25 32.99 L34.43 33.75 L34.86 34.75 L37.67 35.5 L39.33 37.75 L38.58 40.5 L36.5 41.82 Z M50.5 41.84 L46.1 41.75 L44.49 40.75 L43.0 38.68 L42.7 36.25 L43.11 33.75 L44.25 32.17 L46.75 30.44 L50.25 30.18 L51.2 31.25 L51.0 33.01 L47.5 33.31 L46.13 34.5 L45.81 35.75 L46.0 37.54 L47.19 38.75 L50.96 39.25 L51.18 40.75 L50.5 41.84 Z M62.0 42.01 L58.83 42.0 L56.75 41.04 L54.46 37.75 L54.4 35.25 L55.25 33.0 L56.83 31.25 L58.75 30.35 L61.5 30.25 L63.5 31.16 L66.0 34.36 L65.83 38.5 L64.0 40.93 L62.0 42.01 Z M19.25 41.76 L16.25 41.84 L14.25 41.04 L12.77 39.5 L12.05 37.75 L11.99 35.5 L12.75 33.25 L14.75 31.19 L16.5 30.37 L19.25 30.33 L20.49 31.5 L20.21 33.25 L17.0 33.51 L15.75 34.38 L15.12 36.0 L15.52 37.75 L16.5 38.71 L20.28 39.0 L20.45 40.75 L19.25 41.76 Z M26.75 41.77 L25.0 41.77 L24.47 40.75 L24.56 31.5 L25.5 30.35 L27.0 30.67 L27.61 31.5 L27.61 40.75 L26.75 41.77 Z M61.3 39.0 L62.92 37.25 L63.08 35.0 L61.65 33.25 L59.75 33.11 L58.14 34.25 L57.49 36.5 L59.0 38.84 L61.3 39.0 Z" fill="currentColor"/></svg>
<svg class="ic ic-adobe" viewBox="5.140000000000001 12.34 88.68 24.570000000000004" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" ><path d="M36.25 36.27 L31.0 35.97 L27.79 33.75 L26.2 31.0 L26.05 26.5 L27.25 23.5 L29.75 20.99 L31.89 20.0 L36.32 19.5 L36.75 13.18 L37.5 12.69 L40.25 12.69 L41.03 13.75 L41.15 34.75 L40.25 35.92 L36.25 36.27 Z M69.75 36.29 L62.75 36.03 L61.92 35.25 L61.91 13.75 L62.5 12.77 L66.0 13.0 L66.49 19.75 L70.25 19.61 L72.5 20.2 L75.0 22.23 L76.78 25.5 L76.81 29.75 L75.77 32.5 L73.5 34.87 L69.75 36.29 Z M24.5 36.08 L20.75 35.95 L19.08 31.5 L17.75 30.77 L12.0 30.79 L11.18 31.5 L9.53 36.0 L6.25 36.22 L5.49 35.75 L12.18 15.25 L13.0 14.34 L16.75 14.15 L18.16 15.0 L25.09 35.25 L24.5 36.08 Z M17.03 27.0 L17.47 26.0 L15.75 20.16 L15.0 19.5 L12.68 26.5 L13.5 27.16 L17.03 27.0 Z M52.5 36.51 L48.5 36.06 L46.52 34.75 L44.77 32.5 L43.78 28.75 L43.93 25.5 L45.67 22.25 L48.5 20.12 L51.25 19.52 L54.25 19.86 L56.5 21.23 L58.75 24.0 L59.61 26.75 L59.47 30.0 L58.51 32.75 L55.34 35.75 L52.5 36.51 Z M89.0 36.52 L86.0 36.56 L82.8 35.75 L80.5 33.69 L79.25 31.41 L78.86 28.0 L79.41 24.75 L81.25 21.86 L84.0 19.93 L87.0 19.59 L89.5 19.98 L92.0 21.98 L93.1 23.75 L93.47 28.0 L92.95 29.0 L84.0 29.05 L83.2 29.5 L83.5 30.93 L85.75 32.89 L92.2 32.75 L92.58 34.25 L92.18 35.75 L89.0 36.52 Z M89.12 26.0 L89.55 25.25 L89.02 24.0 L87.0 22.75 L85.23 23.0 L83.3 25.25 L84.0 26.18 L89.12 26.0 Z M35.82 33.0 L36.68 31.75 L36.67 24.0 L36.25 23.08 L35.0 22.89 L32.25 23.94 L31.02 25.25 L30.27 29.0 L30.75 30.85 L32.25 32.4 L33.5 32.97 L35.82 33.0 Z M52.46 33.0 L54.64 31.0 L55.18 27.0 L54.22 24.25 L52.75 23.09 L51.5 22.92 L48.9 24.75 L48.14 27.0 L48.11 29.25 L48.83 31.5 L49.97 32.75 L52.46 33.0 Z M68.41 33.0 L70.0 32.57 L71.75 31.04 L72.66 27.0 L71.25 24.03 L69.75 23.08 L67.5 22.91 L66.18 24.0 L66.16 32.25 L66.75 32.98 L68.41 33.0 Z" fill="currentColor"/></svg>
</div>
</footer>
</div>
</div>
<script>
/* Tear the entrance down the moment it finishes: removing the class drops every
animation declaration, so the page is left in its authored static state with
no compositor layers, no running animations and nothing able to replay. */
(function(){
var root = document.documentElement;
if (!root.classList.contains('anim')) return;
var settled = false;
function settle(){
if (settled) return;
settled = true;
clearTimeout(guard);
root.classList.remove('anim');
}
var guard = setTimeout(settle, 2600); // fires even in a background tab
var last = document.querySelector('.logos svg:last-of-type');
if (last) last.addEventListener('animationend', settle, {once:true});
})();
</script>
</body>
</html>
Growth DecisionsSaaS · free prompt · copy-paste
**Recreate this exact single-page SaaS hero. Do not invent extra sections, extra pages, extra images, or extra copy. Implement only what is specified. Stack: one `index.html`, one `styles.css`, one `main.js`. No frameworks.**
### What this page is
A single full-viewport landing hero for **Meridian — Revenue Intelligence for SaaS**. No footer, no extra sections, no scroll on desktop. White page with a full-bleed looping background video of painterly navy/orange mountains. UI is sharp-cornered (radius `0` everywhere). Type is Inter. Layout is a 3-row column: top nav, left-aligned hero, bottom-left lede.
Page title: `Meridian — Revenue Intelligence for SaaS`
`html lang="en"`
`meta viewport width=device-width, initial-scale=1.0`
---
### Exact assets (use these URLs, do not substitute)
**Google Fonts — Inter only, weights 300, 400, 500, 600, 700:**
```
https://fonts.googleapis.com
https://fonts.gstatic.com (preconnect, crossorigin)
https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap
```
**Background video (mandatory CloudFront URL, do not replace):**
```
https://meez.design/web/media/ext/13b52ff7bdc5d6ce.mp4
```
`<video class="bg-video" autoplay muted loop playsinline>` with one `<source type="video/mp4">`. No poster. No controls.
There are **no other image/video assets**. Logo and arrows are inline SVG.
---
### Design tokens (`:root`)
```
--bg: #ffffff
--text: #0a0a0a
--muted: #1a1a1a
--blue: #006cd2
--blue-dark: #0053a3
--headline-muted: #6b7378
--glass: rgba(0, 0, 0, 0.13)
--glass-blur: 18px
--glass-light: rgba(255, 255, 255, 0.28)
--radius: 0
--font: "Inter", "Helvetica Neue", Helvetica, Arial, sans-serif
--pad-x: clamp(20px, 3.52vw, 64px)
--nav-top: clamp(16px, 2.05vw, 28px)
--btn-icon: 36px
--btn-pad-y: 12px
--btn-pad-x: 22px
```
Global: `box-sizing: border-box`, all margins/paddings 0.
`html, body { height: 100%; overflow: hidden }`
`body`: Inter, `--bg`, `--text`, `-webkit-font-smoothing: antialiased`, `-moz-osx-font-smoothing: grayscale`
Links inherit color, no underline. Buttons inherit font, no border, pointer cursor.
---
### Page shell
`.page` is `position: relative; width: 100%; height: 100vh; height: 100dvh; display: flex; flex-direction: column; overflow: hidden`
Padding: `var(--nav-top) var(--pad-x) clamp(28px, 4.9vw, 48px)`
`.bg` is `position: absolute; inset: 0; z-index: 0; background: #ffffff; pointer-events: none; overflow: hidden`
`.bg-video` is `position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover`
`.nav`, `.hero`, `.lede`, `.mobile-menu` are `position: relative; z-index: 1`
---
### Header / nav
3-column CSS grid: `1fr auto 1fr`, items vertically centered.
**Left — glass pill of links** (`.nav__links`, `aria-label="Primary"`):
- Links (all `href="#"`): `Platform` · `Solutions` · `Company` · `Pricing`
- Flex row, `gap: clamp(22px, 2.6vw, 32px)`, `justify-self: start`
- Padding `24px 34px`
- Background `var(--glass)`, `backdrop-filter: blur(18px)` (+ `-webkit-`), `border-radius: 0`
- Link type: `clamp(13px, 1.37vw, 15px)`, weight `500`, tracking `-0.01em`, color `#0a0a0a`, `line-height: 1`, nowrap, `padding-bottom: 2px`
- Hover: color `#006cd2`, `translateY(-2px)`, 0.22s `cubic-bezier(0.16, 1, 0.3, 1)`
- Underline bar `::after`: 3px tall, `#006cd2`, `bottom: -6px`, full width, `scaleX(0)` from left, hover `scaleX(1)`, 0.28s same easing
**Center — logo** (`<a class="logo" href="#" aria-label="Meridian">`):
Inline SVG, `viewBox="0 0 42 34"`, rendered width `clamp(30px, 3.2vw, 38px)`, `fill: currentColor` (`#0a0a0a`). Six parallelograms:
```
<polygon points="12,0 30,0 33.2,3.2 15.2,3.2" />
<polygon points="14.6,5.6 32.6,5.6 35.8,8.8 17.8,8.8" />
<polygon points="17.2,11.2 35.2,11.2 38.4,14.4 20.4,14.4" />
<polygon points="3.2,16.8 21.2,16.8 24.4,20 6.4,20" />
<polygon points="5.8,22.4 23.8,22.4 27,25.6 9,25.6" />
<polygon points="8.4,28 26.4,28 29.6,31.2 11.6,31.2" />
```
Hover: `scale(1.1)`, 0.35s `cubic-bezier(0.16, 1, 0.3, 1)`
Each polygon: `transform-box: fill-box; transform-origin: left center`
Entrance `mark-in` 0.5s same easing, `backwards`: from `opacity 0` + `translate3d(-12px, 8px, 0)`
Delays: 0.04 / 0.09 / 0.14 / 0.19 / 0.24 / 0.29s
**Right — nav Book Demo** (`.btn.btn--nav`, `justify-self: end`):
- Label `Book Demo` + 36×36 icon square
- Arrow SVG `viewBox="0 0 20 20"`, path `M4 10h10.2M10.4 5.6 15.2 10l-4.8 4.4`, stroke currentColor, width 1.7, round caps/joins, no fill. CSS sizes the svg to 14×14.
- Background `#006cd2`, text white
- Icon square `#0053a3`, white arrow
- Hover icon: white bg, blue arrow
- Hover wipe `::before` fill `#004a96` (see buttons)
- Entrance: `wipe-right` 0.65s, delay 0.16s, `backwards`
**Burger** (hidden on desktop, shown ≤820px):
- 36×36, 3 bars: 18×1.5px, `#0a0a0a`, gap 5px
- Hover: scale 1.08; bars turn `#006cd2`; first and third bars shrink to 14px
- `aria-label="Open menu"`, `aria-expanded="false"`, `aria-controls="mobile-menu"`
- JS toggles `.is-open`, `aria-expanded`, label Open/Close, and `hidden` on `#mobile-menu`. Escape and any menu link close it. There is **no X-transform CSS** for `.is-open` — bars stay 3 lines.
**Mobile menu** (`#mobile-menu`, `hidden` by default):
- Same 4 links + same Book Demo button
- Column, gap 1.25rem, padding `1.25rem 0 0.5rem`
- Links wrap: padding `16px 20px`, glass bg + 18px blur, column gap 0.9rem, font 1.05rem / 500
Nav link entrance (`link-in` 0.55s, `backwards`): from `opacity 0` + `translate3d(-16px, 0, 0)`
Delays: Platform 0.02s, Solutions 0.08s, Company 0.14s, Pricing 0.2s
Burger uses `link-in` 0.5s delay 0.16s
---
### Buttons (shared)
All `.btn`:
- `inline-flex`, align center, **height 58px**, `border-radius: 0`
- Padding `12px 10px 12px 22px`, gap 18px
- Font 16px / 500 / tracking `-0.015em` / line-height 1 / nowrap
- `::before` absolute inset 0, `scaleX(0)` from left, hover `scaleX(1)`, 0.4s `cubic-bezier(0.16, 1, 0.3, 1)`, `pointer-events: none`
- Label and icon `z-index: 1` above the wipe
**`.btn--nav`:** blue `#006cd2` / white; icon `#0053a3`; wipe `#004a96`
**`.btn--light`:** white bg / `#006cd2` text; icon `#006cd2` with white arrow; wipe `#e8f2fb`
**`.btn--ghost`:** padding `12px 26px` (no icon); color `#0a0a0a`; bg `rgba(255,255,255,0.55)`; blur 24px; wipe `rgba(255,255,255,0.78)` at z-index 0. Hover keeps same 0.55 white + 24px blur.
---
### Hero (left column, not centered)
`.hero { margin-top: clamp(52px, 10.15vh, 92px); max-width: none }`
**Badge** (`.badge.wipe`, `--d: 0.18s`):
- Text exactly: `Revenue Intelligence for SaaS`
- Left: 14×14 white square with `2px solid #006cd2` (empty, no glyph)
- `inline-flex`, gap 10px, height `clamp(34px, 3.6vw, 42px)`, padding `0 18px 0 14px`
- Bg `rgba(255,255,255,0.28)`, `1px solid rgba(0, 108, 210, 0.2)`, blur 18px
- Color `#1a1a1a`, `clamp(13px, 1.35vw, 15px)`, weight 500, tracking `-0.01em`
**Headline** (`h1.headline`):
```
Every revenue decision
starts with a better question.
```
Two masked lines (`.headline__mask` = `display:block; overflow:hidden`):
1. `--d: 0.26s` → `Every revenue decision` — color `#0a0a0a`
2. `--d: 0.4s` → `.headline__line` nowrap:
- `.headline__muted` `starts with a` — color `#6b7378`, weight 600
- `.headline__accent` `better question.` with `data-text="better question."`
Type: `font-size: calc(clamp(2.9rem, 5.9vw, 5rem) + 3px)`, weight 600, line-height 1.18, tracking `-0.038em`
`.headline` margin-top `clamp(22px, 2.8vw, 36px)`
Each `.headline__rise` uses `type-rise` 0.85s `cubic-bezier(0.16, 1, 0.3, 1)` `backwards`, delay `var(--d)`: from `translate3d(0, 118%, 0)` to 0.
**Accent paint-on (critical):**
Base `.headline__accent` is `#6b7378`. Two absolutely stacked copies via `content: attr(data-text)`:
- Soft left-to-right mask:
`linear-gradient(90deg, #000 0%, #000 calc(100% - 72px), transparent 100%)`
start `mask-size: 0% 100%`, no-repeat
- `::before` color `#7eb6ee`, `accent-fill` 1.05s `cubic-bezier(0.4, 0, 0.2, 1)` delay **0.7s** forwards
- `::after` color `#006cd2`, same animation delay **1.08s**
- End state: `mask-size: calc(100% + 72px) 100%`
This is a two-pass wipe: pale blue then brand blue, with a 72px soft leading edge.
**Actions** (flex, gap 12px, margin-top `clamp(28px, 3.4vw, 42px)`):
1. `.btn.btn--light.wipe` `--d: 0.56s` — `Book Demo` + same arrow icon
2. `.btn.btn--ghost.wipe` `--d: 0.66s` — `See Meridian in Action` (no icon)
`.wipe` = `wipe-left` 0.7s `cubic-bezier(0.16, 1, 0.3, 1)` `backwards`: `clip-path: inset(0 100% 0 0)` → `inset(0 0 0 0)`
---
### Bottom lede
Pinned with `margin-top: auto`, max-width **700px**, overflow hidden.
Color **`#ffffff`** (sits on the dark mountain).
`clamp(17px, 1.8vw, 20px)`, weight **300**, line-height 1.5, tracking `-0.01em`
Exact copy:
> Meridian continuously analyzes product usage, customer behavior and commercial data to identify expansion opportunities, predict revenue risk, and recommend the highest-impact actions for your team.
Inner `.lede__rise` `--d: 0.78s` uses `type-rise` 0.9s same easing `backwards`.
---
### Animation timeline (page load)
| t | what |
|---|---|
| 0.02s | Platform slides in from left |
| 0.04–0.29s | 6 logo bars stagger in from down-left |
| 0.08 / 0.14 / 0.20s | Solutions / Company / Pricing |
| 0.16s | Book Demo wipes in from the right; burger fades in |
| 0.18s | Badge wipes left→right |
| 0.26s | Line 1 rises from below mask |
| 0.40s | Line 2 rises |
| 0.56s | Light Book Demo wipes in |
| 0.66s | Ghost button wipes in |
| 0.70s | Pale-blue `#7eb6ee` starts filling “better question.” |
| 0.78s | Lede rises |
| 1.08s | Brand blue `#006cd2` overpaints the accent |
All entrance animations use `animation-fill-mode: backwards`.
**`prefers-reduced-motion: reduce`:** kill every listed animation; restore opacity/transform/clip-path; accent becomes solid `#006cd2` and `::before/::after` `content: none`.
---
### Responsive
**≤820px:**
- `html, body { overflow: auto }`
- `.page` height auto, `min-height: 100vh / 100dvh`
- Hide `.nav__links` and desktop `.btn--nav`
- Nav grid `auto 1fr auto`; logo `justify-self: start`; show burger
- Show `.mobile-menu` as flex column (still hidden via `[hidden]{display:none}`)
- Hero margin-top 48px
- Headline `calc(clamp(2.75rem, 10vw, 3.85rem) + 3px)`
- Actions wrap
- Lede width 100%, max 700px, margin-top 64px
**`max-height: 700px` and `min-width: 821px`:**
- Hero margin-top 36px
- Headline `calc(clamp(2.75rem, 7.2vh, 4.15rem) + 3px)`
---
### JS (`main.js`)
IIFE only. Query `.nav__burger` and `#mobile-menu`. Toggle open/closed as specified. No other JS. No video JS. No scroll libraries. No analytics.
---
### Do not
- Do not add more pages, sections, cards, testimonials, pricing tables, or a footer
- Do not round corners
- Do not swap Inter for another font
- Do not change the CloudFront mp4 URL
- Do not center the hero
- Do not make the lede dark text
- Do not add a poster image or grain overlay (grain is in the video)
- Do not use a different logo
- Do not add burger-to-X animation unless already specified (it is not)
Match this 1:1.
USD HaloLanding Page · free prompt · copy-paste
Build a premium, fintech-style landing page for a stablecoin product called "Halo / USD Halo" using React + TypeScript + Vite + Tailwind CSS, with lucide-react for icons. No other UI libraries. Background color of the page is #F5F5F5.
Global Setup
Use TT Norms Pro as the primary font, loaded via @font-face from /fonts/tt-norms-pro-regular.woff2 (weight 400) and /fonts/tt-norms-pro-semibold.woff2 (weight 600), with font-display: swap. Apply it to html, body, and inherit on *.
Tailwind base + components + utilities at the top of src/index.css.
Page wrapper: flex flex-col bg-[#F5F5F5]. The first section (Navbar + Hero) is wrapped in a h-screen flex flex-col overflow-hidden container.
Inner content max width across sections: max-w-[88rem] mx-auto.
Custom Logo Icon
Create an SVG component LogoIcon using currentColor, viewBox 0 0 256 256, with this path (a stylized "halo" mark made of two interlocking rounded squares):
M 128.005 191.173 C 128.448 156.208 156.93 128 192 128 L 192 64 L 128 64 C 128 99.346 99.346 128 64 128 L 64 192 L 128 192 Z M 192 256 L 64 256 C 28.654 256 0 227.346 0 192 L 0 64 L 64 64 L 64 0 L 192 0 C 227.346 0 256 28.654 256 64 L 256 192 L 192 192 Z
1. Navbar (absolute, transparent over hero)
nav is absolute top-0 left-0 right-0 z-20 px-6 py-5.
Inner row: flex items-center justify-between.
Left: LogoIcon (w-7 h-7, black) + word "Halo" (text-2xl font-medium tracking-tight text-black).
Center (hidden below md): links Network · Ecosystem · Rewards · Help · News, gap-8, text-base text-gray-700 hover:text-black font-medium transition-colors duration-200.
Right: black pill button "Open Wallet" — bg-black text-white text-base font-medium px-7 py-2.5 rounded-full hover:bg-gray-800 transition-colors duration-200.
2. Hero Section
Outer: flex-1 px-6 pt-20 pb-6 flex items-end.
Inner card: relative w-full rounded-2xl overflow-hidden, inline style height: calc(100vh - 96px).
Background video (autoplay, muted, loop, playsInline, object-cover absolute inset-0 w-full h-full):
https://meez.design/web/media/ext/96b0a69bacbd9f05.mp4
Content overlay: relative z-10 flex flex-col items-start justify-start h-full p-12 pt-36.
h1: "Your Wealth\nWorks" (with <br/>) — text-black text-5xl md:text-6xl font-medium leading-tight max-w-xl mb-4, inline letterSpacing: '-0.04em'.
p: "An automated, reward-powered digital dollar built for native passive earnings and effortless connection into DeFi." — text-black/70 text-base md:text-lg max-w-md mb-8 leading-relaxed, inline fontFamily: "'Inter', ui-sans-serif, system-ui, sans-serif".
Pill button "Join us" with arrow circle: inline-flex items-center gap-3 bg-black text-white text-base md:text-lg font-medium pl-8 pr-2 py-2 rounded-full hover:bg-gray-800. Trailing arrow inside bg-white rounded-full p-2, using ArrowRight w-5 h-5 text-black from lucide-react.
Followed by the Brand Marquee below.
Brand Marquee (inside hero, below button)
Container: mt-24 w-full max-w-md overflow-hidden.
Inject scoped <style> with keyframes marquee translating 0 → -50%, applied to .marquee-track { display:flex; width:max-content; animation: marquee 22s linear infinite; }.
Render the brand list twice (so it loops seamlessly).
Each item: mx-7 shrink-0 text-black/60 whitespace-nowrap with these inline styles:
Stripe — Georgia serif, weight 700, letterSpacing -0.02em, fontSize 15px
Coinbase — Arial sans, weight 900, letterSpacing 0.08em, fontSize 13px, uppercase
Uniswap — Trebuchet MS, weight 600, letterSpacing 0.01em, fontSize 15px, italic
Aave — Courier New monospace, weight 700, letterSpacing 0.12em, fontSize 13px, uppercase
Compound — Palatino, Book Antiqua, weight 400, letterSpacing -0.01em, fontSize 16px
MakerDAO — Impact, Arial Narrow, weight 400, letterSpacing 0.04em, fontSize 14px
Chainlink — Verdana, weight 700, letterSpacing -0.03em, fontSize 13px
3. Info Section ("Meet USD Halo.")
section bg-[#F5F5F5] px-6 py-24.
Row 1: 2-col grid (grid-cols-1 md:grid-cols-2 gap-12 mb-16 items-start).
Left: h2 "Meet USD Halo." — text-black text-4xl md:text-5xl font-medium leading-tight mb-8, letterSpacing -0.03em. Below it, black pill "Discover it" button with white arrow circle (same pattern as "Join us" but text-base).
Right: paragraph "USD Halo is a reward-earning dollar coin that lets your savings grow while remaining tied to the U.S. dollar." — text-black/70 text-2xl md:text-3xl leading-relaxed.
Row 2 — 4-col card grid (grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4):
Card 1 (spans 2 cols on lg): rounded-2xl with background image:
https://meez.design/web/media/ext/1ff5172230c90957.png
backgroundSize: cover; backgroundPosition: center. Inside: p-7 min-h-80 flex flex-col justify-between. Title (top): "Savings that bloom" — text-black text-2xl font-medium leading-snug letterSpacing -0.02em. Body (bottom): "Gain steady returns as your dollar tokens are routed into top-performing DeFi strategies." — text-black/70 text-base max-w-xs.
Card 2: solid #2B2644, rounded-2xl, p-7, min-h-80, flex-col-justify-between. White heading "Always fluid,\nalways pegged." text-2xl font-medium, body "Keep fully dollar-anchored with on-demand access to funds — no lockups or waits." text-white/60 text-base.
Card 3: same #2B2644 styling. Heading "Fully\nautomated". Body "Skip the task of tuning positions yourself. USD Halo runs in the background for you."
4. Backed By Section (marquee row)
section bg-[#F5F5F5] px-6 with inner max-w-[88rem] mx-auto grid grid-cols-1 md:grid-cols-4 gap-8 items-center.
Left col (1/4): text-black/70 text-base leading-relaxed — "Funded by premier partners\nand forward-thinking leaders."
Right col (3/4): infinite marquee (same pattern as hero marquee but 30s linear infinite, class .backers-track, keyframes backers-marquee). Items use mx-10 shrink-0 text-black/50 whitespace-nowrap with these inline styles:
Fundamental Labs — Times New Roman serif, 400, ls 0.02em, 14px
KUCOIN — Arial Black, 900, ls 0.08em, 16px
NGC — Impact, 700, ls 0.05em, 18px
NxGen — Georgia, 600, ls -0.02em, 17px
Matter Labs — Helvetica, 700, ls -0.01em, 15px
DEXTools — Verdana, 700, ls 0.06em, 14px, uppercase
NGRAVE — Courier New, 700, ls 0.18em, 14px
Polychain — Palatino, 500, ls 0.03em, 15px
Render brands twice for the loop.
5. Use Cases Section
section bg-[#F5F5F5] px-6 py-24. Inner: 2-col grid grid-cols-1 md:grid-cols-2 gap-8 items-start.
Left column (md:pr-12 md:pt-2):
Eyebrow: "USD Halo in Practice" — text-black/60 text-sm mb-2.
h2 "Use modes" — text-5xl md:text-6xl font-medium leading-none mb-6, ls -0.04em.
Paragraph: "USD Halo powers a wide range of modes for builders, companies and treasuries wanting safe and rewarding stablecoin integrations plus more" — text-black/60 text-base leading-relaxed max-w-sm.
Right column: large relative rounded-3xl overflow-hidden min-h-[720px] with background video (autoplay/muted/loop/playsInline, object-cover absolute inset-0):
https://meez.design/web/media/ext/6ca06be4279f8beb.mp4
Overlay content relative z-10 p-10 md:p-12:
h3 "Commerce" — text-4xl md:text-5xl font-medium leading-tight mb-5, ls -0.03em.
Paragraph: "Lift customer retention by offering USD Halo, a trusted dollar-backed stablecoin with strong yields, letting your patrons earn with zero effort on your platform." — text-black/70 text-base max-w-md mb-8.
Inline-flex link "Know more" with leading circular icon: w-9 h-9 rounded-full bg-white/80 backdrop-blur flex items-center justify-center group-hover:bg-white transition-colors containing ArrowRight w-4 h-4 text-black.
Animations & Interactions
Two CSS keyframe marquees (22s for hero brands, 30s for backers), both translating 0 → -50% on a duplicated track for seamless looping.
All buttons use transition-colors duration-200 with hover state hover:bg-gray-800 (or hover:bg-white for the white circle).
Nav links transition on hover from text-gray-700 to text-black.
Videos autoplay muted with playsInline for mobile compatibility.
Composition
App renders, in order:
h-screen overflow-hidden wrapper containing Navbar (absolute) + HeroSection.
InfoSection
BackedBySection
UseCasesSection
All section backgrounds are #F5F5F5. All headings use negative letter-spacing for the tight, modern fintech feel. Use font-medium (600) as the heaviest weight throughout.
Intelligence LayerTechnology · free prompt · copy-paste
Recreate a single-file dark cinematic AI-infrastructure landing page EXACTLY as specified. Deliver one self-contained index.html (inline CSS + JS, no build step). Pixel-faithful to a measured Figma-style comp. No cards, no purple, no glow orbs, no decorative abstract gradients as the main visual — the hero visual is a full-bleed looping video.
════════════════════════════════════════
PAGE META / IDENTITY
════════════════════════════════════════
- Document title: "The Next Layer of Intelligence"
- Brand: abstract geometric S-like mark (lightning/bolt geometry), NOT a wordmark in the header.
- Product vibe: premium AI infrastructure / “next layer of intelligence”; black void stage; restrained silver/white type; white pill CTAs.
- Viewport: fixed full-screen stage; html/body height 100%; overflow hidden; background #050505.
- Antialiased Manrope UI; text-rendering: geometricPrecision.
════════════════════════════════════════
FONTS (REQUIRED)
════════════════════════════════════════
1) Primary UI type: Manrope (variable / range font-weight 200–800), normal style.
- Load via @font-face woff2 OR Google Fonts equivalent:
https://fonts.google.com/specimen/Manrope
weights covering 400, 500, 700 (variable 200–800 preferred).
- body font-family: 'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif
2) Partner logo wordmark type: custom display face named "IpsumMark", weight 700.
- Used ONLY on the four bottom “logoipsum” wordmarks.
- If IpsumMark binary is unavailable, approximate with a bold geometric sans close to logoipsum marks (still set font-family stack: 'IpsumMark','Manrope',sans-serif) — do NOT use Inter/Roboto/Arial as primary.
════════════════════════════════════════
COLOR TOKENS (CSS VARIABLES)
════════════════════════════════════════
--ink: #fafafa /* headline / primary text */
--muted: #a7a6a6 /* subcopy */
--nav: #b6b5b5 /* header links */
--strip: #8b8a8a /* partner logos */
--pill: #ffffff /* CTA fill */
--pill-ink: #050505 /* CTA text */
Stage / page black: #050505
════════════════════════════════════════
RESPONSIVE UNIT SYSTEM (CRITICAL — MATCH EXACTLY)
════════════════════════════════════════
Reference canvas: 1487 × 1058.
:root {
--u: calc(100vh / 1058); /* 1 design px locked to HEIGHT */
--uw: calc(100vw / 1487);
--h: clamp(var(--u), calc(var(--u) * .65 + var(--uw) * .35), calc(var(--u) * 1.16));
}
@supports (height: 100dvh) { :root { --u: calc(100dvh / 1058); } }
Meaning:
- Vertical rhythm always fills the screen (nav ~27u, headline top ~230.5u, logos ~995u, baseline 1058u).
- Left column anchored ~75u from left; header CTA ~75–76u from right; nav + logo strip centered.
- --h grows type slightly on ultra-wide (max +16%), never shrinks below height-locked --u.
Portrait / narrow (max-aspect-ratio: 11/10):
- Switch to flow layout (flex column), unit --m: min(100vw/430, 1.34px); --u: var(--m)
- Tablet band (≥600px AND max-aspect-ratio 11/10):
--m: min(100vw/860, 100vh/760, 1.25px)
════════════════════════════════════════
BACKGROUND — CLOUDFRONT VIDEO (MANDATORY URL)
════════════════════════════════════════
Exact video URL (must use this, not a substitute):
https://meez.design/web/media/ext/13c2dff571bad2e4.mp4
Markup inside absolute .plate covering the stage:
<video class="plate-video" autoplay muted loop playsinline preload="auto" aria-hidden="true">
<source src="[URL ABOVE]" type="video/mp4">
</video>
Desktop video geometry (match photo-plate sizing):
- position absolute
- left: 50%; top: calc(1 * var(--u))
- width: calc(1492 * var(--u)); height: calc(1054 * var(--u))
- transform: translateX(calc(-50% - calc(0.5 * var(--u))))
- object-fit: cover; pointer-events: none
Portrait: inset 0; full width/height; transform none; object-fit cover; object-position 43% center
Tablet portrait: object-position 44% center
Video subject (for art direction fidelity): dark cinematic scene — silhouetted figure walking toward a tall glowing white vertical portal/door of light on misty ground, smoke/fog at base, pure black surroundings. Loop seamlessly.
FADE OVERLAYS on .plate::after (keep BOTH gradients):
Desktop:
1) Bottom fade:
linear-gradient(to bottom,
rgba(5,5,5,0) 78.8%, rgba(5,5,5,.23) 79.6%, rgba(5,5,5,.45) 81.4%,
rgba(5,5,5,.75) 83.3%, rgba(5,5,5,.84) 85.2%, rgba(5,5,5,.888) 88%,
rgba(5,5,5,.905) 91%, rgba(5,5,5,.96) 95%, #050505 100%)
2) Side letterbox:
linear-gradient(to right,
#050505 calc(50% - 746u),
transparent calc(50% - 676u),
transparent calc(50% + 676u),
#050505 calc(50% + 746u))
where u = var(--u)
Portrait overlays (replace desktop):
- to-right: rgba(5,5,5,.86)→.66@42%→.20@78%→.10@100%
- to-bottom: .72@0%→.34@24%→.34@56%→.80@82%→.97@94%→#050505
Tablet portrait slightly lighter side/top values (.84/.60/.16/.06 and .66/.28/.30/.78/.96).
════════════════════════════════════════
STRUCTURE (DOM ORDER)
════════════════════════════════════════
.stage
.plate > video.plate-video
header.topbar
a.brand (aria-label Home) > brand SVG
nav.links (aria-label Primary): About | Features | FAQ | Contact
a.pill.pill-nav > span “Get Started”
button.burger#burger (two <i> bars) — portrait only visually
nav.menu#menu (mobile overlay)
.menu-inner
p.menu-eyebrow “Menu”
ul.menu-list: About, Features, FAQ, Contact
.menu-foot: pill “Get Started” + ghost “View Architecture”
main.hero
h1.headline: <span>The Next Layer</span> <span>of Intelligence</span>
p.sub: <span>A unified infrastructure platform to help teams build,</span>
<span>ship, and scale AI systems with confidence.</span>
.actions
a.pill.pill-cta > span “Get Started”
a.ghost “View Architecture”
.logos
.lg.lg1 … .lg.lg4 (icon SVG + word “logoipsum”; lg2 has a tiny raised dot after the word)
════════════════════════════════════════
DESKTOP ABSOLUTE LAYOUT (in --u / --h units)
════════════════════════════════════════
Brand mark:
- left 75u, top 27u, size 31.5u × 48.5u
Nav links (.links):
- left 50%, top 51u, transform translate(-50%, -50%)
- font 19.0u / weight 400 / color --nav
- gaps between links ≈ 24.5u, 23.5u (3rd), 26.0u (4th)
- items: About, Features, FAQ, Contact — plain text links, no underlines
Header pill (.pill-nav):
- right 75.4u, top 27u, 175u × 49u
- white pill, radius 999px, text #050505, font 20.6u weight 500
- inner span translateY(1u) for optical centering
- label: “Get Started”
Headline (.headline):
- left 75.5u, top 230.5u
- font-size 71.6h, line-height 80.5h, weight 400, letter-spacing 0.3h
- color --ink; white-space nowrap; each span display:block (two lines):
Line1: “The Next Layer”
Line2: “of Intelligence”
Subcopy (.sub):
- left 75.5u
- top: 230.5u + 189.0h
- font 20.7h / lh 23.5h / weight 400 / word-spacing 1.8h / color --muted
- two nowrap lines as spans:
“A unified infrastructure platform to help teams build,”
“ship, and scale AI systems with confidence.”
Primary CTA (.pill-cta):
- left 74.9u
- top: 230.5u + 264.5h
- size 175.6h × 50h, font 20.6h
- label “Get Started”
Ghost link (.ghost):
- left: 74.9u + 220.6h
- top: 230.5u + 279.5h
- font 20.6h weight 500 letter-spacing 0.12h color #fff
- label “View Architecture” (no underline)
Partner strip (.logos):
- width 741u, left 50%, transform translateX(-50% + 20u)
- color --strip (#8b8a8a)
- Four marks, absolute positions:
lg1: left -0.5u, top 994.7u; mark 30.5×31u; word left 37u top ~5.6u size 18.1u “logoipsum”
lg2: left 206.5u, top 995.7u; mark 24.5×30u; word left 31u top ~7.3u size 18.5u “logoipsum” + .dot (inline 0.09em circle, vertical-align 0.62em, margin-left 0.06em)
lg3: left 416.5u, top 996.7u; mark 28.5×28u; word left 35u top ~7.3u size 16.15u “logoipsum”
lg4: left 620.5u, top 998.7u; mark 28.5×25.5u; word left 37u top ~8.3u size 15.3u “logoipsum”
- Wordmarks use font-family IpsumMark, weight 700
════════════════════════════════════════
BRAND SVG (exact geometry)
════════════════════════════════════════
viewBox="0 0 31.5 48.5"
- LinearGradient id bg1 from (8,0)→(34.1,28.9) stops:
0 #9e9e9e, .28 #a6a6a6, .34 #a3a3a3, .40 #3a3a3a, .55 #414141,
.60 #7a7a7a, .68 #8e8e8e, .80 #a9a9a9, .95 #c4c4c4, 1 #cccccc
- Path: M21.5 0 L21.5 19.5 L31.5 19.5 L31.5 29 L10 48.5 L10 28.5 L0.5 28.5 L0.5 18.5 Z fill url(#bg1)
- Rect 0.5,18.5 9×10 fill #fdfdfd
- Rect 22,19.5 9.5×9.5 fill #fdfdfd
Shape reads as a stylized angular “S” / bolt with two bright rectangular notches.
════════════════════════════════════════
PARTNER ICON SVGs (currentColor = --strip)
════════════════════════════════════════
1) viewBox 0 0 30 31 — square frame with circular bite (mask circle at 19.5,10.5 r5.1) + circle path
2) viewBox 0 0 25 30 — vertical bar + circle yin-yang mask split (classic logoipsum dual form)
3) viewBox 0 0 28 28 — circle stroke r12.35 sw 3.1 + two curved stroke paths (swirls)
4) viewBox 0 0 28 25.5 — filled wavy “mound” path + two stroked wave lines beneath (sw ~3.05)
(Use the exact path data from the source page if available; otherwise match these logoipsum silhouettes precisely.)
════════════════════════════════════════
ANIMATIONS (prefers-reduced-motion: no-preference ONLY)
════════════════════════════════════════
Easing: cubic-bezier(.22, 1, .36, 1)
@keyframes rise:
from { opacity:0; transform: translateY(14u) }
@keyframes riseNav: (for centered nav — preserve translate(-50%,-50%) end state)
from { opacity:0; transform: translate(-50% + 0u, -50% + 14u) }
to { opacity:1; transform: translate(-50% + 0u, -50%) }
@keyframes fade:
from { opacity:0 }
Stagger on load:
- .brand, .links, .pill-nav → rise / riseNav, 0.8s, both
- .headline → rise 0.9s, delay 0.06s
- .sub → rise 0.9s, delay 0.14s
- .pill-cta, .ghost → rise 0.9s, delay 0.22s
- .lg → fade 1.1s, delay 0.34s, ease
Reduced motion: collapse menu/burger transitions to ~0.001s; skip entrance animations.
════════════════════════════════════════
PORTRAIT / MOBILE BEHAVIOR
════════════════════════════════════════
- Hide .links and .pill-nav; show frosted-glass pill burger (rgba white .06 / border .14, backdrop blur).
- Burger bars morph to X when .stage.is-open (rotate ±45deg with translateY ±4.3m).
- Overlay .menu: full-screen dark gradient blur, opacity/visibility transition 0.42s.
- Staggered menu reveal (eyebrow, each li, foot) opacity+translateY with delays .06/.10/.16/.22/.28/.34s.
- Menu links large (~31m, min 25px) with small chevron ::after.
- Headline wraps inline on phone; returns to two-line spans on tablet band.
- Logos: 2×2 grid on phone; single row of 4 on tablet ≥600px.
- Safe-area padding on stage.
════════════════════════════════════════
JS (minimal)
════════════════════════════════════════
Toggle .is-open on .stage via burger click; sync aria-expanded / aria-hidden / aria-label.
Close on Escape, on menu link click, and when resized to landscape aspect > 1.1.
════════════════════════════════════════
COMPOSITION RULES (DO NOT VIOLATE)
════════════════════════════════════════
- First viewport = ONE composition: brand mark + nav + one headline + one sub + CTA pair + full-bleed video + bottom partner strip. No stats, cards, badge chips, or secondary marketing blocks.
- Brand mark is a hero-level left signal, not tiny nav decoration only.
- Video is edge-to-edge background plane (not inset card/media).
- No overlays/stickers on the video except the measured edge/bottom fades.
- White fully-rounded pills for primary CTAs only; ghost text for secondary.
- Single HTML file; works desktop + mobile.
Build it so a 1487×1058 desktop screenshot matches this layout to the pixel, with the CloudFront MP4 looping behind the left typography column and the four gray logoipsum marks sitting in the bottom fade.
```
---
Orbit FloraAI · free prompt · copy-paste
Build a **single-file** `index.html` full-viewport poster. No scroll. No frameworks. No redesign. Match layout, type, color, both image URLs, entrance choreography, mobile menu, and mouse morph-reveal **exactly**.
---
## 0. Document shell
```html
<!doctype html>
<html lang="en" class="anim">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
<meta name="theme-color" content="#161616">
<title>Orbit — Secure system</title>
```
- Root `<html>` starts with class `anim`
- `html, body`: `width/height 100%`, `margin: 0`, `overflow: hidden`, background `#161616`
- Body: `"Orbit Sans", Arial, Helvetica, sans-serif`, color `#fff`, antialiased
- CSS vars:
- `--ink: #ffffff`
- `--surface: #161616`
- `--orb-reveal: cubic-bezier(.16, 1, .3, 1)`
- `--orb-soft: cubic-bezier(.25, .8, .28, 1)`
Structure:
```
main.viewport (fixed, inset 0, black)
section.stage (absolute, inset 0, contain:strict, isolation:isolate)
[all poster elements]
```
Z-order: wordmark `1` → flower `2` → corner copy `3` → brand/nav/pill `4`. Mobile: scrim `9`, sheet `10`, burger `12`.
---
## 1. Fonts (mandatory)
Two custom TrueType faces, weight 400, `font-display: block`, embedded as `@font-face` data-URLs:
1. **`"Orbit Sans"`** — nav, pill, corner copy. Fallback: Arial, Helvetica, sans-serif
2. **`"Orbit Display"`** — giant wordmark only. Fallback: `"Times New Roman", Times, serif`
Do **not** use Inter, Roboto, system-ui, or Playfair. Extract the original base64 TTFs from the existing `index.html` `@font-face` blocks if needed.
---
## 2. The two image URLs (use exactly — do not replace)
Both are Higgsfield-proxied PNGs as webp `w=1280&q=85`. Transparent backgrounds. Pixel-art / halftone lilies.
### FRONT / BG lily (default visible)
```
https://meez.design/web/media/ext/46c24ca63eb40187.png
```
Raw source:
```
https://meez.design/web/media/ext/63aa99e65fc131b8.png
```
### REVEAL / TOP lily (only visible inside morph trail)
```
https://meez.design/web/media/ext/0690c0efaeb24338.png
```
Raw source:
```
https://meez.design/web/media/ext/3d3af870588cd878.png
```
Front `alt`: `Pixel-art pink and violet lily`. Reveal `alt=""`. No other images.
---
## 3. Every on-stage element (desktop)
### Brand mark
SVG `.brand-mark`, `viewBox="0 0 66 62"`, white 4-stroke asterisk, `stroke-width: 5px`, square caps:
- `(33,1)→(33,61)`, `(3,31)→(63,31)`, `(11.8,9.8)→(54.2,52.2)`, `(54.2,9.8)→(11.8,52.2)`
- Position: `top: 2.141745dvh; left: 3.854167vw; width: clamp(34px, min(3.4375vw, 5.2dvh), 66px)`
### Primary nav
Links: Home / Resources / Benefits / Contact → `#home` `#resources` `#benefits` `#contact`
White, size `clamp(13px, min(1.302083vw, 2.05dvh), 25px)`, each `li` at `top: 3.426791dvh`:
| Item | left | scaleX |
|---|---|---|
| Home | `10.104167vw` | `1.165` |
| Resources | `17.526042vw` | `1.052` |
| Benefits | `27.578125vw` | `1.126` |
| Contact | `36.171875vw` | `1.168` |
`.primary-nav` is full-stage but `pointer-events: none`; links opt back in with `pointer-events: auto` so the lily stays hoverable.
### Secure system pill
White pill, text `#161616`, `top: 2.336449dvh; right: 7.5vw`, height `clamp(34px, 4.439252dvh, 57px)`, `border-radius: 999px`, tracking `0.026923em`.
### Wordmark ORBIT
```html
<h1 class="orbit-word" id="orbit-title" aria-label="Orbit">
<span class="orbit-word__mask">
<span class="orbit-word__inner">
<span class="orbit-word__white"><span class="orbit-word__o">O</span>R</span>
<span class="orbit-word__pink">BIT</span>
</span>
</span>
</h1>
```
- `top: 11.565421dvh; left: 4.348958vw`
- `"Orbit Display"`, size `min(27.8125vw, 55dvh)`, tracking `0.033708em`
- **OR** solid `#fff`; **O** has `scaleX(1.0866)`, `margin-right: 0.042135em`
- **BIT** gradient: `linear-gradient(180deg, #ffc5dc 0%, #fd86db 100%)` via `background-clip: text`
### Flower stack
```html
<div class="flower">
<img class="flower__sizer" src="[FRONT]" alt="" aria-hidden="true">
<div class="flower__layer flower__layer--bg">
<img src="[FRONT]" alt="Pixel-art pink and violet lily">
</div>
<div class="flower__layer flower__layer--top" aria-hidden="true">
<img src="[REVEAL]" alt="">
</div>
</div>
```
- `top: 14.749065dvh; left: 49.121328vw; height: 106.109034dvh; transform: translateX(-50%); pointer-events: none`
- Sizer: hidden, `height: 100%; width: auto` (sets intrinsic width)
- Layers: `absolute; inset: 0`; imgs `object-fit: cover`
- Top layer starts fully masked out: `mask-image: linear-gradient(#0000, #0000)`
### Corner copy
Color `#f7f7f7`, size `clamp(14px, min(1.40625vw, 2.102804dvh), 27px)`, `bottom: 4.361371dvh`
Left (`left: 3.177083vw; scaleX(1.073)`): `Every workflow, / intelligently connected.`
Right (`left: 78.28125vw; scaleX(1.058)`): `Less manual work. / More meaningful output.`
Animate via inner `.support-copy__inner` only.
### Mobile chrome (hidden on desktop)
Burger + scrim buttons. Shown only at `(max-width: 900px), (max-aspect-ratio: 4 / 5)`.
---
## 4. Mouse morph-reveal trail (implement exactly)
**Not** a CSS circle spotlight. Organic morphing blob trail that punches holes in the front lily and paints the reveal lily in the same shape.
### Constants
```
TRAIL_MAX_POINTS = 60
TRAIL_HEAD_R = 140
TRAIL_NOISE_AMP = 44
TRAIL_BLOB_PTS = 24
TRAIL_FADE_SPEED = 0.92
TRAIL_SAMPLE_DIST = 8
```
### Architecture
Each `MorphTrailLayer`:
- Hidden offscreen canvas (`display:none`) sized to `.flower`
- Visible absolute layer with cover-fit `<img>`
- Every active frame: `maskImage = url(canvas.toDataURL())`, size `100% 100%`, no-repeat
Two layers, same trail:
- `invert=false` → FRONT/BG (white fill → `destination-out` blobs = holes)
- `invert=true` → REVEAL/TOP (clear canvas → white blobs = only trail shows)
Mouse on **`.stage`**: `mousemove` / `mouseenter` / `mouseleave`. Convert to flower canvas space via getBoundingClientRect + scale.
### Per frame
```
targetR = hovering ? 140 : 0
headRadius += (targetR - headRadius) * (hovering ? 0.14 : 0.04)
```
When hovering and `headRadius > 5`, if distance from last sample `> 8px`, push `{x,y,r:headRadius,alpha:1,seed:random*100}`; cap 60.
Decay: `alpha *= 0.92; r *= 0.995`; remove if `alpha < 0.01`.
`time += 0.016`.
### `drawMorphBlob(ctx, cx, cy, r, t, seed)`
Skip if `r < 2`. 24 points:
```
n1 = sin(angle*3 + t*1.4 + seed) * 0.45
n2 = sin(angle*5 - t*0.9 + seed*2.3) * 0.3
n3 = cos(angle*2 + t*1.8 + seed*0.7) * 0.25
noise = (n1+n2+n3) * 44 * (r/140)
```
Closed path via midpoints + `quadraticCurveTo` (organic blob, not circle). Fill white.
Result: moving the mouse leaves a morphing organic wipe that cuts the front lily away and paints the second lily along a fading trail. Wordmark still shows through transparent petals. Leave stage → head lerps shut, trail dies.
---
## 5. Entrance animation (once)
Pure CSS while `<html class="anim">`. JS removes `.anim` after last `orb-*` animation finishes (6000ms safety). Never replays.
Keyframes:
- `orb-word`: `translateY(118%) → 0` (no fade)
- `orb-subject`: fade + `translateX(-50%) translateY(3.4dvh → 0)` — do **not** scale the lily
- `orb-corner` / `orb-quiet`: small rise + fade
- `orb-dim`: fade only
Desktop timing:
| Element | anim | dur | delay |
|---|---|---|---|
| brand | quiet | 620ms | 100ms |
| nav 1–4 | dim | 550ms | 180 / 225 / 270 / 315ms |
| pill | quiet | 620ms | 340ms |
| word inner | word | 1150ms | 300ms |
| flower | subject | 1150ms | 660ms |
| both corners | corner | 720ms | **980ms same** |
Easing: word/flower use `--orb-reveal`; rest use `--orb-soft`.
While animating, wordmask has overflow hidden + padding/negative margin so the serif can rise without clipping layout.
Do **not** animate transform on nav `li`, corner parents, or the O — their `scaleX` is optical.
Reduced motion: only whole-stage 280ms fade.
Mobile entrance: burger instead of pill/nav; slightly tighter delays.
---
## 6. Responsive essentials
**(max-width: 900px) or (max-aspect-ratio: 4/5):** white circular burger, frosted sheet menu, scrim, Escape/Tab-trap/inert when closed.
**(max-aspect-ratio: 4/5):** smaller centered lily `height: min(55dvh, 110vw)`, word `min(27.5vw, 18dvh)`, wrapping corner copy.
**(max-width: 1200px) or portrait:** center the wordmark (`left:0; width:100%; text-align:center`).
---
## 7. Acceptance checklist
- Black `#161616` poster, no scroll
- Asterisk + 4 nav words with exact scaleX + white Secure system pill
- Giant OR white + BIT pink gradient; O slightly wider
- FRONT lily at exact desktop coords, overlapping BIT
- Load: frame → word rises → lily rises in front → both corners together; then `.anim` gone
- Mouse: 140px-head morphing trail, 24-point noisy blobs, fade 0.92, sample every 8px, max 60 points
- Trail punches FRONT and paints REVEAL; wordmark readable through transparency
- Exact two Higgsfield URLs above
- Orbit Sans + Orbit Display embedded
Palomar LabsAI · free prompt · copy-paste
Build a standalone pixel-accurate recreation of the Palomar Labs marketing landing page: fixed navbar + full-viewport video hero only. No other sections. Match this spec exactly. Do not invent extra copy, buttons, gradients, overlays, or decorative blobs.
Stack
React + TypeScript + Vite
Tailwind CSS
lucide-react icons: ChevronDown, ArrowRight, Triangle
Single App.tsx with Navbar, Hero, TrustedBy
Exact assets and URLs (do not change)
Background video (must be this exact CloudFront URL):
https://meez.design/web/media/ext/4ee225aa17cc394a.mp4
Fonts in index.html:
<link href="(self-host this face — no free CDN; substitute a close match if unavailable)" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Playfair+Display:wght@700&family=Oswald:wght@500&family=Montserrat:wght@700&family=Roboto+Slab:wght@600&family=Raleway:wght@700&display=swap" rel="stylesheet">
Page title: Palomar - One Unified System for LLMs
Color tokens (Tailwind theme.extend.colors.brand)
dark: #2d3a2e
green: #3d5a3e
light: #f5f3ef
cream: #faf8f5
Font families (Tailwind theme.extend.fontFamily)
helvetica-neue: "Helvetica Neue Light", Helvetica, Arial, sans-serif
playfair: "Playfair Display", serif
oswald: "Oswald", sans-serif
montserrat: "Montserrat", sans-serif
roboto-slab: "Roboto Slab", serif
raleway: "Raleway", sans-serif
Body: font-family: 'Helvetica Neue Light', Helvetica, Arial, sans-serif; with antialiasing. Global * { margin:0; padding:0; box-sizing:border-box; }. html { scroll-behavior: smooth; }. Root app wrapper: font-helvetica-neue. Background of the hero section: bg-brand-cream (#faf8f5).
Animations (global CSS, exact)
@keyframes fade-up {
from { opacity: 0; transform: translateY(20px); }
to { opacity: 1; transform: translateY(0); }
}
@keyframes fade-down {
from { opacity: 0; transform: translateY(-12px); }
to { opacity: 1; transform: translateY(0); }
}
.animate-fade-up { animation: fade-up 0.8s cubic-bezier(0.16, 1, 0.3, 1) both; }
.animate-fade-down { animation: fade-down 0.7s cubic-bezier(0.16, 1, 0.3, 1) both; }
.stagger-1 { animation-delay: 0ms; }
.stagger-2 { animation-delay: 120ms; }
.stagger-3 { animation-delay: 240ms; }
.stagger-4 { animation-delay: 360ms; }
.stagger-5 { animation-delay: 480ms; }
.stagger-6 { animation-delay: 600ms; }
1) Navbar
Fixed top-0 left-0 right-0 z-50. Transition duration-300.
If window.scrollY > 20: bg-brand-cream/90 backdrop-blur-md shadow-sm
Else: bg-transparent
Inner container: max-w-7xl mx-auto px-6 lg:px-8. Bar: relative flex items-center h-16 md:h-20.
Desktop left links (hidden md:flex items-center gap-8, animate-fade-down stagger-1)
All: text-sm text-brand-dark tracking-wide uppercase hover:opacity-70 transition-opacity
Button: Solutions + ChevronDown w-3.5 h-3.5, flex items-center gap-1
Anchor: Plans
Anchor: News
Center logo (absolute centered)
absolute left-1/2 -translate-x-1/2 flex items-center gap-2 animate-fade-down stagger-2
Lucide Triangle: w-5 h-5 text-brand-dark fill-brand-dark
Text Palomar: text-xl text-brand-dark tracking-tight font-helvetica-neue
Desktop CTA (right)
hidden md:inline-flex items-center ml-auto px-5 py-2.5 bg-brand-dark text-white text-sm tracking-wide uppercase rounded-full hover:bg-brand-green transition-colors animate-fade-down stagger-3 Label: Try It Free
Mobile hamburger (md:hidden, ml-auto, z-50, w-10 h-10, aria-label="Toggle menu")
Two 2px bars (w-6 h-[2px] bg-brand-dark rounded) with transition-all duration-300 ease-[cubic-bezier(0.68,-0.6,0.32,1.6)]:
Top bar at top-[6px]. Open: rotate-45 translate-y-[5px]
Bottom bar at top-[13px]. Open: -rotate-45 When open, lock document.body.style.overflow = 'hidden'.
Mobile overlay (md:hidden)
fixed inset-0 bg-brand-cream z-40 Transition duration-500 ease-[cubic-bezier(0.22,1,0.36,1)]
Open: opacity-100 pointer-events-auto
Closed: opacity-0 pointer-events-none
Inner column: flex flex-col items-center justify-center h-full gap-8, same 500ms ease, delay-100
Open: translate-y-0 opacity-100
Closed: -translate-y-8 opacity-0
Links (each text-3xl text-brand-dark tracking-tight): Solutions, Plans, News CTA: mt-4 inline-flex items-center px-8 py-3.5 bg-brand-dark text-white text-lg tracking-wide rounded-full → Try It Free Clicking any item closes the menu.
No dropdown panel for Solutions — it is a button on desktop and a simple link on mobile.
2) Hero
section.relative.w-full.h-screen.min-h-[700px].overflow-hidden.bg-brand-cream
Video layer
div.absolute.inset-0 wrapping <video>:
src = the CloudFront URL above
autoPlay muted loop playsInline
class: w-full h-full object-cover object-bottom
No dark overlay, no gradient, no poster image
Content column (sits on top of video, left-aligned, not vertically centered)
relative z-10 flex flex-col items-start max-w-7xl mx-auto pt-28 md:pt-36 px-6 lg:px-8
Announcement pill
Anchor, inline-flex items-center gap-2 px-4 py-2 rounded-full border border-brand-dark/15 bg-white/60 backdrop-blur-sm hover:bg-white/80 transition-colors mb-5 md:mb-6 animate-fade-up stagger-3
Text text-sm text-brand-dark: Live for everyone today! Offering $1MM in credits.
ArrowRight w-3.5 h-3.5 text-brand-dark
Headline
h1 classes: text-left text-3xl sm:text-4xl md:text-5xl lg:text-6xl text-brand-dark leading-[1.05] tracking-tight max-w-4xl font-helvetica-neue animate-fade-up stagger-4
Exact copy with a line break only from sm and up:
One unified system to build,
test, ship, and observe LLMs
Implementation: first line, then <br className="hidden sm:block" />, then a space, then test, ship, and observe LLMs. On <640px it wraps naturally as one block.
No subtitle, no primary CTA in the hero body.
3) Trusted by (inside Hero, under headline)
Wrapper: w-full mt-8 md:mt-10 animate-fade-up stagger-5
Label: text-left text-xs tracking-[0.25em] uppercase text-brand-dark/50 mb-6 md:mb-8 font-helvetica-neue → Backed by
Logo row: flex flex-wrap items-center justify-start gap-6 md:gap-12 lg:gap-16 animate-fade-up stagger-6
Five wordmarks as text (not images), text-lg md:text-xl lg:text-2xl text-brand-dark/80 whitespace-nowrap:
Meridian — font-playfair (Playfair Display 700)
STELLEX — font-oswald uppercase (Oswald 500)
Luminar — font-montserrat (Montserrat 700)
OVERLAND — font-roboto-slab uppercase (Roboto Slab 600)
Kinetic — font-raleway (Raleway 700)
Responsive rules (must match)
< md (768px): hamburger + full-screen cream overlay; hide desktop links and CTA; nav height h-16; hero padding pt-28 px-6; logo gaps gap-6; headline text-3xl then sm:text-4xl
md+: three left links, centered logo, right pill CTA; nav h-20; hero pt-36; logo gaps md:gap-12
lg+: container px-8; headline lg:text-6xl; logo gaps lg:gap-16
Hero always h-screen with min-h-[700px]
Content always left-aligned (items-start, text-left, justify-start)
Video always object-cover object-bottom so the bottom of the footage stays framed
Visual character
Quiet, editorial, cream/forest. Light Helvetica Neue, not heavy Inter/SF. Centered triangle + Palomar wordmark. Frosted white pill over a full-bleed landscape video. Wordmark “logos” in mixed display fonts, not SVG brand files. Entrance: nav fades down (stagger 0 / 120 / 240ms); pill, headline, backed-by fade up (240 / 360 / 480 / 600ms).
Do not add
Footer, extra sections, search, language switcher, social icons, video controls, mute button, overlay scrim, second headline, hero “Get started” button, Solutions mega-menu content, or any other video URL.
Implement this as one working page that looks identical on desktop and mobile.
---
## HTML Code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Palomar - One Unified System for LLMs</title>
<link href="(self-host this face — no free CDN; substitute a close match if unavailable)" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Playfair+Display:wght@700&family=Oswald:wght@500&family=Montserrat:wght@700&family=Roboto+Slab:wght@600&family=Raleway:wght@700&display=swap" rel="stylesheet">
<style>
:root {
--brand-dark: #2d3a2e;
--brand-green: #3d5a3e;
--brand-light: #f5f3ef;
--brand-cream: #faf8f5;
}
* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
font-family: "Helvetica Neue Light", Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
background: var(--brand-cream);
color: var(--brand-dark);
}
a { text-decoration: none; color: inherit; }
button {
font-family: inherit;
background: none;
border: none;
cursor: pointer;
color: inherit;
}
/* ---------- Animations ---------- */
@keyframes fade-up {
from { opacity: 0; transform: translateY(20px); }
to { opacity: 1; transform: translateY(0); }
}
@keyframes fade-down {
from { opacity: 0; transform: translateY(-12px); }
to { opacity: 1; transform: translateY(0); }
}
.animate-fade-up {
animation: fade-up 0.8s cubic-bezier(0.16, 1, 0.3, 1) both;
}
.animate-fade-down {
animation: fade-down 0.7s cubic-bezier(0.16, 1, 0.3, 1) both;
}
.stagger-1 { animation-delay: 0ms; }
.stagger-2 { animation-delay: 120ms; }
.stagger-3 { animation-delay: 240ms; }
.stagger-4 { animation-delay: 360ms; }
.stagger-5 { animation-delay: 480ms; }
.stagger-6 { animation-delay: 600ms; }
/* ---------- Navbar ---------- */
.nav {
position: fixed;
top: 0; left: 0; right: 0;
z-index: 50;
transition: background-color 0.3s, box-shadow 0.3s, backdrop-filter 0.3s;
}
.nav.scrolled {
background: rgba(250, 248, 245, 0.9);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}
.nav-inner {
max-width: 80rem;
margin: 0 auto;
padding: 0 1.5rem;
}
@media (min-width: 1024px) {
.nav-inner { padding: 0 2rem; }
}
.nav-bar {
position: relative;
display: flex;
align-items: center;
height: 4rem;
}
@media (min-width: 768px) {
.nav-bar { height: 5rem; }
}
.nav-left {
display: none;
align-items: center;
gap: 2rem;
}
@media (min-width: 768px) {
.nav-left { display: flex; }
}
.nav-link {
display: flex;
align-items: center;
gap: 0.25rem;
font-size: 0.875rem;
letter-spacing: 0.025em;
text-transform: uppercase;
color: var(--brand-dark);
transition: opacity 0.2s;
}
.nav-link:hover { opacity: 0.7; }
.nav-link svg {
width: 14px;
height: 14px;
}
.logo {
position: absolute;
left: 50%;
transform: translateX(-50%);
display: flex;
align-items: center;
gap: 0.5rem;
}
.logo svg {
width: 20px;
height: 20px;
fill: var(--brand-dark);
color: var(--brand-dark);
}
.logo span {
font-size: 1.25rem;
letter-spacing: -0.025em;
color: var(--brand-dark);
}
.nav-cta {
display: none;
margin-left: auto;
align-items: center;
padding: 0.625rem 1.25rem;
background: var(--brand-dark);
color: #fff;
font-size: 0.875rem;
letter-spacing: 0.025em;
text-transform: uppercase;
border-radius: 9999px;
transition: background-color 0.2s;
}
.nav-cta:hover { background: var(--brand-green); }
@media (min-width: 768px) {
.nav-cta { display: inline-flex; }
}
.hamburger {
position: relative;
z-index: 50;
width: 40px;
height: 40px;
margin-left: auto;
display: flex;
align-items: center;
justify-content: center;
}
@media (min-width: 768px) {
.hamburger { display: none; }
}
.hamburger-icon {
position: relative;
width: 24px;
height: 24px;
}
.hamburger-icon span {
position: absolute;
left: 0;
width: 24px;
height: 2px;
background: var(--brand-dark);
border-radius: 9999px;
transition: all 0.3s cubic-bezier(0.68, -0.6, 0.32, 1.6);
}
.hamburger-icon span:nth-child(1) { top: 6px; }
.hamburger-icon span:nth-child(2) { top: 13px; }
.nav.open .hamburger-icon span:nth-child(1) {
transform: rotate(45deg) translateY(5px);
}
.nav.open .hamburger-icon span:nth-child(2) {
transform: rotate(-45deg);
}
.mobile-overlay {
position: fixed;
inset: 0;
background: var(--brand-cream);
z-index: 40;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 2rem;
opacity: 0;
pointer-events: none;
transition: all 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}
@media (min-width: 768px) {
.mobile-overlay { display: none; }
}
.nav.open .mobile-overlay {
opacity: 1;
pointer-events: auto;
}
.mobile-overlay-inner {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 2rem;
transform: translateY(-2rem);
opacity: 0;
transition: all 0.5s cubic-bezier(0.22, 1, 0.36, 1);
transition-delay: 100ms;
}
.nav.open .mobile-overlay-inner {
transform: translateY(0);
opacity: 1;
}
.mobile-link {
font-size: 1.875rem;
letter-spacing: -0.025em;
color: var(--brand-dark);
}
.mobile-cta {
margin-top: 1rem;
display: inline-flex;
align-items: center;
padding: 0.875rem 2rem;
background: var(--brand-dark);
color: #fff;
font-size: 1.125rem;
letter-spacing: 0.025em;
border-radius: 9999px;
}
/* ---------- Hero ---------- */
.hero {
position: relative;
width: 100%;
height: 100vh;
min-height: 700px;
overflow: hidden;
background: var(--brand-cream);
}
.hero-video {
position: absolute;
inset: 0;
}
.hero-video video {
width: 100%;
height: 100%;
object-fit: cover;
object-position: bottom;
}
.hero-content {
position: relative;
z-index: 10;
display: flex;
flex-direction: column;
align-items: flex-start;
max-width: 80rem;
margin: 0 auto;
padding: 7rem 1.5rem 0;
}
@media (min-width: 768px) {
.hero-content { padding-top: 9rem; }
}
@media (min-width: 1024px) {
.hero-content { padding-left: 2rem; padding-right: 2rem; }
}
.pill {
display: inline-flex;
align-items: center;
gap: 0.5rem;
padding: 0.5rem 1rem;
border-radius: 9999px;
border: 1px solid rgba(45, 58, 46, 0.15);
background: rgba(255, 255, 255, 0.6);
backdrop-filter: blur(4px);
-webkit-backdrop-filter: blur(4px);
margin-bottom: 1.25rem;
transition: background-color 0.2s;
}
.pill:hover { background: rgba(255, 255, 255, 0.8); }
@media (min-width: 768px) {
.pill { margin-bottom: 1.5rem; }
}
.pill span {
font-size: 0.875rem;
color: var(--brand-dark);
}
.pill svg {
width: 14px;
height: 14px;
color: var(--brand-dark);
flex-shrink: 0;
}
.headline {
text-align: left;
font-size: 1.875rem;
line-height: 1.05;
letter-spacing: -0.025em;
color: var(--brand-dark);
max-width: 56rem;
font-weight: 400;
}
@media (min-width: 640px) {
.headline { font-size: 2.25rem; }
.headline .break { display: block; }
}
@media (min-width: 768px) {
.headline { font-size: 3rem; }
}
@media (min-width: 1024px) {
.headline { font-size: 3.75rem; }
}
.headline .break { display: none; }
/* ---------- Trusted by ---------- */
.trusted {
width: 100%;
margin-top: 2rem;
}
@media (min-width: 768px) {
.trusted { margin-top: 2.5rem; }
}
.trusted-label {
text-align: left;
font-size: 0.75rem;
letter-spacing: 0.25em;
text-transform: uppercase;
color: rgba(45, 58, 46, 0.5);
margin-bottom: 1.5rem;
}
@media (min-width: 768px) {
.trusted-label { margin-bottom: 2rem; }
}
.trusted-logos {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: flex-start;
gap: 1.5rem;
}
@media (min-width: 768px) {
.trusted-logos { gap: 3rem; }
}
@media (min-width: 1024px) {
.trusted-logos { gap: 4rem; }
}
.trusted-logos span {
font-size: 1.125rem;
color: rgba(45, 58, 46, 0.8);
white-space: nowrap;
}
@media (min-width: 768px) {
.trusted-logos span { font-size: 1.25rem; }
}
@media (min-width: 1024px) {
.trusted-logos span { font-size: 1.5rem; }
}
.font-playfair { font-family: "Playfair Display", serif; font-weight: 700; }
.font-oswald { font-family: "Oswald", sans-serif; font-weight: 500; text-transform: uppercase; }
.font-montserrat { font-family: "Montserrat", sans-serif; font-weight: 700; }
.font-roboto-slab { font-family: "Roboto Slab", serif; font-weight: 600; text-transform: uppercase; }
.font-raleway { font-family: "Raleway", sans-serif; font-weight: 700; }
body.menu-lock { overflow: hidden; }
</style>
</head>
<body>
<nav class="nav" id="nav">
<div class="nav-inner">
<div class="nav-bar">
<div class="nav-left animate-fade-down stagger-1">
<button class="nav-link" type="button">
Solutions
<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m6 9 6 6 6-6"/></svg>
</button>
<a href="#" class="nav-link">Plans</a>
<a href="#" class="nav-link">News</a>
</div>
<a href="#" class="logo animate-fade-down stagger-2">
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="currentColor" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M13.73 4a2 2 0 0 0-3.46 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3Z"/></svg>
<span>Palomar</span>
</a>
<a href="#" class="nav-cta animate-fade-down stagger-3">Try It Free</a>
<button class="hamburger" type="button" aria-label="Toggle menu" id="hamburger">
<div class="hamburger-icon">
<span></span>
<span></span>
</div>
</button>
</div>
</div>
<div class="mobile-overlay" id="overlay">
<div class="mobile-overlay-inner">
<a href="#" class="mobile-link" data-close>Solutions</a>
<a href="#" class="mobile-link" data-close>Plans</a>
<a href="#" class="mobile-link" data-close>News</a>
<a href="#" class="mobile-cta" data-close>Try It Free</a>
</div>
</div>
</nav>
<section class="hero">
<div class="hero-video">
<video
src="https://meez.design/web/media/ext/4ee225aa17cc394a.mp4"
autoplay
muted
loop
playsinline
></video>
</div>
<div class="hero-content">
<a href="#" class="pill animate-fade-up stagger-3">
<span>Live for everyone today! Offering $1MM in credits.</span>
<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14"/><path d="m12 5 7 7-7 7"/></svg>
</a>
<h1 class="headline animate-fade-up stagger-4">
One unified system to build,<br class="break" />
test, ship, and observe LLMs
</h1>
<div class="trusted animate-fade-up stagger-5">
<p class="trusted-label">Backed by</p>
<div class="trusted-logos animate-fade-up stagger-6">
<span class="font-playfair">Meridian</span>
<span class="font-oswald">STELLEX</span>
<span class="font-montserrat">Luminar</span>
<span class="font-roboto-slab">OVERLAND</span>
<span class="font-raleway">Kinetic</span>
</div>
</div>
</div>
</section>
<script>
const nav = document.getElementById("nav");
const hamburger = document.getElementById("hamburger");
window.addEventListener("scroll", () => {
nav.classList.toggle("scrolled", window.scrollY > 20);
});
hamburger.addEventListener("click", () => {
const open = nav.classList.toggle("open");
document.body.classList.toggle("menu-lock", open);
});
document.querySelectorAll("[data-close]").forEach((el) => {
el.addEventListener("click", () => {
nav.classList.remove("open");
document.body.classList.remove("menu-lock");
});
});
</script>
</body>
</html>
Pet DiagnosticsHealthcare · free prompt · copy-paste
Build a **single self-contained `index.html`** file. No build step, no framework, no external
JS, no local image files. All CSS in one `<style>` block in `<head>`; one small `<script>`
before `</body>`. Match every number below exactly — the layout is measurement-driven, not
eyeballed.
---
## 1. Assets (remote only — use these exact URLs)
**Hero video (desktop, autoplaying background) — 1928×1076, 8.04 s, H.264 MP4, silent:**
```
https://meez.design/web/media/ext/6812d4a9d0301d25.mp4
```
**Hero still (desktop) — doubles as the video's poster and the reduced-motion frame:**
```
https://meez.design/web/media/ext/fb817b7f0e340cc4.png
```
**Hero still (mobile, 9:16 portrait crop):**
```
https://meez.design/web/media/ext/65ba287728c496ef.png
```
**Open Graph share image:**
```
https://meez.design/web/media/ext/64e221fdd85cc4d9.png
```
All four depict the same scene: a golden retriever lying on a low dark-walnut dog bed on the
left third of frame, head turned toward camera; a person seen from behind on the right in a
ribbed olive-green knit sweater, seated on polished concrete; floor-to-ceiling black-framed
window behind them onto blurred golden hills; a palm houseplant at the far-left edge. Warm
late-afternoon grade.
---
## 2. Fonts
Google Fonts, loaded with `preconnect` to `fonts.googleapis.com` and `fonts.gstatic.com`
(the latter with `crossorigin`):
```html
<link href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Inter:wght@400;500;600&display=swap" rel="stylesheet">
```
- **Instrument Serif 400** — the headline only.
- **Inter 400 / 500 / 600** — everything else.
- Body font stack: `"Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif`
- Headline stack: `"Instrument Serif", Georgia, "Times New Roman", serif`
- Enable `-webkit-font-smoothing: antialiased` and `-moz-osx-font-smoothing: grayscale` on `body`.
---
## 3. Head
```
<title>Lume — 120+ health markers, read by top-tier vets.</title>
meta description: 120+ health markers read. Guidance from top-tier vets. Just $349 in total. Created alongside leading veterinary research specialists.
og:title: Lume — 120+ health markers read
og:description: Guidance from top-tier vets. Just $349 in total.
og:image: <OG url above>
viewport: width=device-width, initial-scale=1
```
---
## 4. Design tokens & global reset
```css
:root{ --cream:#eef0d0; --ink:#101010; }
*,*::before,*::after{ box-sizing:border-box; }
body{
background:#0d0d0d;
overflow-x:hidden;
color:var(--ink);
}
```
`#eef0d0` is the pale cream used for the highlighted brand column and the primary pill.
`#0d0d0d` is the near-black page ground visible below the hero band.
---
## 5. Section geometry — full-bleed, fluid measure
The page is **one full-bleed hero band**. There is no gray page frame, no max-width page
shell, no rounded corners, no drop shadow on the section.
```css
.hero{
position:relative;
width:100%;
height:min(92vh, 62vw);
min-height:600px;
overflow:hidden;
isolation:isolate;
}
```
Inside it, a **measure container** holds the headline and table. It is what every `cqw`
value below resolves against, and it grows with the monitor so type scales up on large
displays and down on small ones:
```css
.hero__inner{
position:absolute;
inset:0;
z-index:2;
width:100%;
max-width:min(100%, clamp(1080px, 82vw, 1700px));
margin-inline:auto;
container-type:inline-size;
}
```
**The nav is deliberately NOT inside `.hero__inner`** — it is a direct child of `.hero` so it
sits at the true page edges like a normal site header. Everything else lives inside the measure.
Resulting type scale (verify against these):
| Viewport | Measure | Headline | Pills | Table text |
|---|---|---|---|---|
| 1024 | 1024 | 20.8px | 10px | 9.4px |
| 1280 | 1080 | 21.9px | 10px | 9.9px |
| 1440 | 1181 | 24.0px | 10px | 10.9px |
| 1920 | 1574 | 32.0px | 12.4px | 14.5px |
| 2560+ | 1700 | 34.5px | 13.4px | 15.6px |
---
## 6. Media layer
Three stacked elements, all `.hero__media`, all absolutely positioned and covering:
```css
.hero__media{
position:absolute; inset:0;
width:100%; height:100%;
object-fit:cover;
object-position:50% 50%;
z-index:0;
filter:saturate(1.06) contrast(1.04) brightness(.97);
}
.hero__media--mobile{ display:none; }
```
Order in the DOM: desktop `<img>`, mobile `<img>`, then the `<video>` on top.
```html
<img class="hero__media hero__media--desktop" src="…193afe38….png"
alt="A person sitting beside their golden retriever in a sunlit living room"
fetchpriority="high" decoding="async">
<img class="hero__media hero__media--mobile" src="…44c2e930….png"
alt="" aria-hidden="true" decoding="async">
<video class="hero__media hero__media--desktop hero__video" src="…de4032ce….mp4"
autoplay muted loop playsinline preload="auto" aria-hidden="true" tabindex="-1"></video>
```
The video starts transparent and cross-fades in only once it can actually play, so a slow
connection shows the still rather than a black frame:
```css
.hero__video{ opacity:0; transition:opacity .9s ease; }
.hero__video.is-ready{ opacity:1; }
@media (prefers-reduced-motion:reduce){ .hero__video{ display:none; } }
```
---
## 7. Overlay gradients
A single `::after` on `.hero` at `z-index:1`, `pointer-events:none`, three layers stacked in
this order — two for text legibility, one warm tint to unify the grade:
```css
background:
linear-gradient(to bottom, rgba(0,0,0,.30) 0%, rgba(0,0,0,.09) 20%, rgba(0,0,0,0) 38%),
linear-gradient(to top, rgba(0,0,0,.18) 0%, rgba(0,0,0,0) 26%),
linear-gradient(120deg, rgba(120,64,18,.14), rgba(150,96,32,.10));
```
---
## 8. Nav
```css
.nav{
position:absolute; top:0; left:0; right:0;
z-index:4;
display:flex; align-items:center; justify-content:space-between;
padding:clamp(16px,2vw,34px) clamp(18px,3.2vw,56px);
}
.brand{
display:flex; align-items:center; gap:.42em;
color:#fff;
font-size:clamp(15px,1.15vw,23px);
font-weight:500;
letter-spacing:-.014em;
text-decoration:none;
}
.brand__mark{ width:1.02em; height:1.02em; flex:none; display:block; }
```
**Brandmark — a crescent moon** (fits the name "Lume"), 16×16 viewBox, `fill="currentColor"`
so it inherits white in the nav and near-black in the table header:
```html
<svg class="brand__mark" viewBox="0 0 16 16" fill="none" aria-hidden="true">
<path d="M11.35 1.55a7 7 0 1 0 0 12.9 7.65 7.65 0 0 1 0-12.9Z" fill="currentColor"/>
</svg>
```
Wordmark: `Lume`. Right side: one dark pill reading `Start today`.
---
## 9. Buttons
```css
.btn{
display:inline-flex; align-items:center; justify-content:center;
border:0; cursor:pointer; text-decoration:none; white-space:nowrap;
font-family:inherit; font-weight:500;
letter-spacing:-.006em;
border-radius:999px;
transition:background-color .18s ease, transform .18s ease;
}
.btn:active{ transform:translateY(1px); }
.btn--dark{ /* nav */
background:#0b0b0b; color:#fff;
font-size:clamp(12px,.88vw,18px);
padding:.86em 1.32em;
}
.btn--dark:hover{ background:#242424; }
.btn--cream{ /* primary, in hero */
background:var(--cream); color:#16160f;
font-size:1em; padding:.9em 1.35em;
}
.btn--cream:hover{ background:#f3f5da; }
.btn--glass{ /* secondary, in hero */
background:rgba(255,255,255,.19); color:#fff;
font-size:1em; padding:.9em 1.35em;
backdrop-filter:blur(14px) saturate(120%);
-webkit-backdrop-filter:blur(14px) saturate(120%);
box-shadow:inset 0 0 0 1px rgba(255,255,255,.15);
}
.btn--glass:hover{ background:rgba(255,255,255,.28); }
```
---
## 10. Headline block
```css
.hero__copy{
position:absolute; z-index:3;
left:50%; top:16.75%;
transform:translateX(-50%);
width:min(94%, 66cqw);
text-align:center;
color:#fff;
}
.hero__title{
margin:0;
font-family:"Instrument Serif",Georgia,"Times New Roman",serif;
font-weight:400;
font-size:max(17px, 2.03cqw);
line-height:1.15;
letter-spacing:.004em;
text-shadow:0 1px 14px rgba(0,0,0,.30);
}
.hero__actions{
display:flex; align-items:center; justify-content:center;
gap:.55cqw;
margin-top:1.66cqw;
font-size:max(10px, .79cqw);
}
```
The `max()` floors are load-bearing: without them the table text drops below 8px on narrow
desktops when the fluid measure shrinks. Do not replace them with plain `cqw`.
Two lines, split by an explicit `<br>` (not natural wrapping):
```html
<h1 class="hero__title">
120+ health markers read. Guidance from top-tier vets. Just $349 in total.<br>
Created alongside leading veterinary research specialists
</h1>
```
Then the pills: cream `Start today`, glass `Book a call with us`.
---
## 11. Comparison table — the layering trick
This is the fiddly part. The table is **not** a `<table>`. It is a CSS grid of loose `div`s
laid over three independently positioned background panels, so the cream brand column can
float *above* the frosted panels and *overhang* the header row.
```css
.compare{
--cols:1fr 16.5% 16.2%;
--pad-x:.85em;
--panel-top:3.2em;
--panel-bottom:4.9em;
--radius:1.4em;
position:absolute; z-index:3;
left:50%; transform:translateX(-50%);
bottom:16%;
width:54.8cqw;
color:#fff;
font-size:max(8.5px, .92cqw);
}
```
Column proportions are measured from the reference: feature column ≈67.3 %, brand 16.5 %,
comparison 16.2 %. The whole table is 54.8 % of the measure and horizontally centred.
**Layer 1 — frosted panels** (`z-index:0`, `pointer-events:none`), inset from the container
top/bottom by the two custom properties so they hug only the rows:
```css
.compare__panels{
position:absolute; left:0; right:0;
top:var(--panel-top); bottom:var(--panel-bottom);
display:grid; grid-template-columns:var(--cols);
z-index:0; pointer-events:none;
}
.panel{ border-radius:var(--radius); }
.panel--features{ /* spans columns 1–2 */
grid-column:1 / span 2;
background:linear-gradient(102deg, rgba(255,255,255,.19), rgba(255,255,255,.08));
backdrop-filter:blur(18px) saturate(115%);
-webkit-backdrop-filter:blur(18px) saturate(115%);
box-shadow:inset 0 0 0 1px rgba(255,255,255,.12);
}
.panel--vet{ /* column 3 only */
grid-column:3;
background:rgba(255,255,255,.12);
backdrop-filter:blur(18px) saturate(115%);
-webkit-backdrop-filter:blur(18px) saturate(115%);
box-shadow:inset 0 0 0 1px rgba(255,255,255,.11);
}
```
Note the features panel spans **two** columns so it passes *behind* the cream column — the
frosted glass is continuous underneath it.
**Layer 2 — the cream brand column** (`z-index:2`), which overhangs the header by `1.5em`
above and sits `0.2em` below the panels:
```css
.hugo-col{
position:absolute; z-index:2;
top:-1.5em;
bottom:calc(var(--panel-bottom) - .2em);
left:calc(100% - 32.7%);
width:16.5%;
background:var(--cream);
border-radius:var(--radius);
box-shadow:0 12px 34px -14px rgba(0,0,0,.45);
pointer-events:none;
}
```
**Layer 3 — the content grid** (`z-index:1`, cells bumped to `3` where they sit on cream):
```css
.compare__grid{ display:grid; grid-template-columns:var(--cols); align-items:stretch; }
.compare__head{ display:contents; } /* header spans become grid items directly */
.compare__head span{
font-size:1.02em; font-weight:500;
letter-spacing:-.012em;
height:calc(var(--panel-top) / 1.02);
display:flex; align-items:flex-start;
text-shadow:0 1px 8px rgba(0,0,0,.4);
}
.compare__head .h-feature{ padding-left:var(--pad-x); }
.compare__head .h-hugo,
.compare__head .h-vet{ justify-content:center; }
.compare__head .h-hugo{ /* sits on cream → dark ink, no shadow */
color:#1a1a12; text-shadow:none;
position:relative; z-index:3;
align-items:center; height:auto;
}
.row-label,.row-hugo,.row-vet{
display:flex; align-items:center;
height:3.6em;
position:relative; z-index:1;
}
.row-label{
padding-left:var(--pad-x); padding-right:1em;
letter-spacing:-.008em;
color:rgba(255,255,255,.95);
text-shadow:0 1px 6px rgba(0,0,0,.3);
}
.row-hugo{ justify-content:center; color:#20200f; z-index:3; }
.row-vet{ justify-content:center; color:rgba(255,255,255,.9); text-shadow:0 1px 6px rgba(0,0,0,.3); }
```
**Hairline dividers**, inset by `--pad-x` on the outer edge only, suppressed on the last row:
```css
.row-label::after{ content:""; position:absolute; left:var(--pad-x); right:0; bottom:0;
height:1px; background:rgba(255,255,255,.16); }
.row-vet::after { content:""; position:absolute; left:0; right:var(--pad-x); bottom:0;
height:1px; background:rgba(255,255,255,.14); }
.r-last::after{ display:none !important; }
```
Add class `r-last` to all three cells of the fourth row.
**Checkmark** (one per row, in the cream column), `1.1em` square:
```html
<svg class="check" viewBox="0 0 14 14" fill="none" aria-label="Included" role="img">
<path d="M2.4 7.4l3 3 6.2-7" stroke="currentColor" stroke-width="1.35"
stroke-linecap="round" stroke-linejoin="round"/>
</svg>
```
```css
.check{ width:1.1em; height:1.1em; display:block; }
```
---
## 12. Totals & footnote
```css
.totals{
display:grid; grid-template-columns:var(--cols); align-items:center;
margin-top:1.9em;
font-weight:600; font-size:1.02em;
letter-spacing:-.014em;
text-shadow:0 1px 8px rgba(0,0,0,.4);
}
.totals span:first-child{ padding-left:var(--pad-x); }
.totals span:nth-child(n+2){ text-align:center; }
.footnote{
margin:.8em 0 0 var(--pad-x);
font-size:.88em; font-style:italic; font-weight:400;
color:rgba(255,255,255,.8);
letter-spacing:-.004em;
text-shadow:0 1px 6px rgba(0,0,0,.4);
}
```
---
## 13. Exact copy (character counts are a hard constraint)
| Slot | String | Chars |
|---|---|---|
| Wordmark (nav + table header) | `Lume` | 4 |
| Nav pill | `Start today` | 11 |
| Headline line 1 | `120+ health markers read. Guidance from top-tier vets. Just $349 in total.` | 74 |
| Headline line 2 | `Created alongside leading veterinary research specialists` | 57 |
| Primary pill | `Start today` | 11 |
| Secondary pill | `Book a call with us` | 19 |
| Header col 1 | `Screening & Care` | 16 |
| Header col 3 | `Standard` | 8 |
| Row 1 | `Complete Laboratory Panel (Blood, Urine, Stool, Saliva)` | 55 |
| Row 2 | `Full Physical Exam & Vitals Scan` | 32 |
| Row 3 | `Diet & Daily Behaviour Breakdown` | 32 |
| Row 4 | `Written findings and a tailored care plan` | 41 |
| Prices | `$720` `$280` `$160` `$240` | 4 each |
| Totals | `Total price:` / `$349` / `*$1,400+` | 12 / 4 / 8 |
| Footnote | `*Typical yearly spend if each of these was booked one by one at a walk-in clinic.` | 81 |
Escape the ampersands as `&` in markup. British spelling in `Behaviour` is intentional.
---
## 14. Animations & motion
There are **no scroll, entrance, or decorative animations**. Total motion inventory:
1. **Hero video** — `autoplay muted loop playsinline`, 8.04 s seamless loop, silent.
2. **Video reveal** — `opacity 0 → 1` over `.9s ease`, triggered by the `is-ready` class.
3. **Button hover** — `background-color .18s ease`.
4. **Button press** — `transform:translateY(1px)`, `.18s ease`.
Global reduced-motion guard, plus the video is removed entirely under that preference:
```css
@media (prefers-reduced-motion:reduce){ *{ transition:none !important; } }
```
---
## 15. Responsive — single breakpoint at 820px
```css
@media (max-width:820px){
.hero{ height:100svh; min-height:620px; }
.hero__inner{ padding-inline:0; }
.hero__media--desktop{ display:none; } /* also hides the video */
.hero__media--mobile{ display:block; }
.nav{ padding:18px 18px; }
.brand{ font-size:16px; }
.btn--dark{ font-size:12px; }
.hero__copy{ top:11%; width:88%; }
.hero__title{ font-size:5.4cqw; line-height:1.24; }
.hero__actions{ font-size:3.2cqw; gap:2cqw; margin-top:5cqw; flex-wrap:wrap; }
.compare{ width:88cqw; bottom:6%; font-size:3.1cqw; --cols:1fr 20% 20%; }
.hugo-col{ left:calc(100% - 40%); width:20%; }
.row-label,.row-hugo,.row-vet{ height:4.1em; }
}
```
Because the video also carries `hero__media--desktop`, the same rule that swaps to the
portrait still also suppresses the video on phones — no separate mobile-video handling.
---
## 16. Script (the only JS on the page)
```html
<script>
(function () {
var v = document.querySelector('.hero__video');
if (!v) return;
if (matchMedia('(prefers-reduced-motion: reduce)').matches) return;
function reveal() { v.classList.add('is-ready'); }
if (v.readyState >= 3) reveal();
else v.addEventListener('canplay', reveal, { once: true });
v.addEventListener('loadeddata', function () {
var p = v.play();
if (p && p.catch) p.catch(function () {});
}, { once: true });
})();
</script>
```
---
## 17. Structure
```
body
└─ div.page ← inert wrapper, carries no CSS
└─ section.hero
├─ img.hero__media.hero__media--desktop
├─ img.hero__media.hero__media--mobile
├─ video.hero__media.hero__media--desktop.hero__video
├─ nav.nav ← OUTSIDE the measure, pinned to page edges
│ ├─ a.brand (svg.brand__mark + span "Lume")
│ └─ a.btn.btn--dark "Start today"
└─ div.hero__inner ← the cqw measure container
├─ div.hero__copy
│ ├─ h1.hero__title (two lines, explicit <br>)
│ └─ div.hero__actions (a.btn--cream, a.btn--glass)
└─ div.compare
├─ div.compare__panels (div.panel--features, div.panel--vet)
├─ div.hugo-col
├─ div.compare__grid
│ ├─ div.compare__head (span.h-feature, span.h-hugo, span.h-vet)
│ └─ 4 × (div.row-label, div.row-hugo, div.row-vet)
├─ div.totals (3 spans)
└─ p.footnote
```
---
## 18. Acceptance checks
- At 1440×900 the headline renders at **24px** and the table body text at **10.9px**.
- The cream column's top edge sits **above** the `Screening & Care` header baseline, and the
frosted features panel is visible continuing *behind* it.
- The video reports `readyState 4`, `paused=false`, `videoWidth 1928`, `duration 8.04`.
- No horizontal scrollbar at any width from 320px to 2560px.
- With `prefers-reduced-motion: reduce`, the `<video>` is absent from the render and the
desktop still is what's visible.
- Below 820px: portrait still, no video, table columns at `1fr 20% 20%`.
Planetary PulseScience · free prompt · copy-paste
Build a single-screen, non-scrolling hero landing page called **Terranova — Signals from the Deep Green**. It is a full-bleed looping background video with a real-time refractive "liquid glass" card floating over it, plus a slide-in fullscreen menu. Vanilla HTML/CSS/JS only — **no frameworks, no build step, no Three.js, no WebGL, no canvas 3D**. The glass effect is done entirely with an SVG filter plus a 2D canvas that re-draws the video every frame.
Produce exactly five files: `index.html`, `styles.css`, `glass-card.js`, `ui.js`, `serve.mjs`.
---
## 1. Global setup
### Fonts
In `<head>`, in this order:
```html
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link rel="stylesheet" href="(self-host this face — no free CDN; substitute a close match if unavailable)" />
<link rel="stylesheet" href="./styles.css" />
```
Font stack on `html, body`:
`'Helvetica Neue Light', 'Helvetica Neue', Helvetica, Arial, sans-serif`
with `-webkit-font-smoothing: antialiased` and `-moz-osx-font-smoothing: grayscale`.
Page title: `Terranova — Signals from the Deep Green` (em dash).
`<html lang="en">`, `<meta charset="UTF-8">`, `<meta name="viewport" content="width=device-width, initial-scale=1.0">`.
### Reset
```css
html, body { width: 100%; height: 100%; overflow: hidden; background: #c2ccd3; color: #000; overflow-x: hidden; }
```
`#c2ccd3` is only a pre-load fallback behind the video. The page never scrolls.
Breakpoints follow Tailwind's: **sm 640px, md 768px, lg 1024px**, all `min-width` (mobile-first).
---
## 2. Background video
First element inside `<body>`:
```html
<video id="bg-video" class="bg-video" aria-hidden="true"
autoplay muted loop playsinline preload="auto"
src="https://meez.design/web/media/ext/e9ccabd4ebfb9505.mp4"></video>
```
That exact URL. The asset is 1920×1080, ~10.04s, a bright iridescent soap-bubble / glass-sphere loop on a near-white studio background.
**Do not set `crossorigin`.** The host serves no CORS headers; adding the attribute breaks loading outright. Without it the video plays and can still be drawn into a canvas — the canvas just becomes tainted, which is fine because nothing ever reads pixels back.
```css
.bg-video {
position: fixed; top: 0; left: 0;
display: block;
width: 100%; height: 100%;
object-fit: cover;
z-index: 0;
opacity: 1;
pointer-events: none;
}
```
**100% opacity. No overlay, scrim, tint, gradient, or darkening layer of any kind over the video, at any breakpoint.**
---
## 3. The liquid-glass SVG filter
Immediately after the video, an off-screen SVG holding the filter def:
```html
<svg class="glass-defs" width="0" height="0" aria-hidden="true" focusable="false">
<defs>
<filter id="liquid-glass-refraction"
x="-30%" y="-30%" width="160%" height="160%"
color-interpolation-filters="sRGB">
<feTurbulence type="fractalNoise" baseFrequency="0.012 0.015" numOctaves="3" result="noise" />
<feColorMatrix in="SourceAlpha" type="matrix" result="boosted_alpha"
values="0 0 0 0 0
0 0 0 0 0
0 0 0 0 0
0 0 0 100 0" />
<feGaussianBlur in="boosted_alpha" stdDeviation="45" result="blurred_alpha" />
<feComponentTransfer in="blurred_alpha" result="edge_mask">
<feFuncA type="linear" slope="-1.3" intercept="1" />
</feComponentTransfer>
<feComposite in="noise" in2="edge_mask" operator="arithmetic"
k1="1" k2="0" k3="0" k4="0" result="masked_noise" />
<!-- chromatic dispersion: one displacement pass per channel -->
<feDisplacementMap in="SourceGraphic" in2="masked_noise" scale="65"
xChannelSelector="R" yChannelSelector="G" result="red_displaced" />
<feColorMatrix in="red_displaced" type="matrix" result="red"
values="1 0 0 0 0
0 0 0 0 0
0 0 0 0 0
0 0 0 1 0" />
<feDisplacementMap in="SourceGraphic" in2="masked_noise" scale="56"
xChannelSelector="R" yChannelSelector="G" result="green_displaced" />
<feColorMatrix in="green_displaced" type="matrix" result="green"
values="0 0 0 0 0
0 1 0 0 0
0 0 0 0 0
0 0 0 1 0" />
<feDisplacementMap in="SourceGraphic" in2="masked_noise" scale="47"
xChannelSelector="R" yChannelSelector="G" result="blue_displaced" />
<feColorMatrix in="blue_displaced" type="matrix" result="blue"
values="0 0 0 0 0
0 0 0 0 0
0 0 1 0 0
0 0 0 1 0" />
<feBlend in="red" in2="green" mode="screen" result="rg" />
<feBlend in="rg" in2="blue" mode="screen" result="chromatic_dispersion" />
</filter>
</defs>
</svg>
```
```css
.glass-defs { position: absolute; width: 0; height: 0; pointer-events: none; }
```
**How it works** — reproduce the reasoning, not just the values:
1. `feTurbulence` makes a static fractal-noise field: the refraction normal map.
2. `SourceAlpha` is pushed to full opacity (alpha row `0 0 0 100 0`), blurred by 45, then inverted by `feFuncA slope="-1.3" intercept="1"`. That yields an **edge mask** — near 0 in the element's interior, rising toward its borders.
3. The noise is multiplied by that mask (`feComposite` arithmetic, `k1=1`), so displacement is strong at the rim and near-nil in the middle. That is what reads as a thick glass bevel.
4. `SourceGraphic` is displaced **three times at different strengths — 65 / 56 / 47** — and each pass is masked down to a single channel (R, G, B), then recombined with two `screen` blends. The per-channel offset spread is the chromatic aberration / rainbow fringing.
5. The `-30% / 160%` filter region gives the blur and displacement room to work past the element bounds.
Scales `65 / 56 / 47`, `stdDeviation="45"`, `baseFrequency="0.012 0.015"`, `numOctaves="3"`, and `slope="-1.3"` are all tuned — keep them exact.
---
## 4. Page structure
```
<body>
<video.bg-video>
<svg.glass-defs> ← filter def
<main.hero>
<div.rule.rule--left> ← desktop-only vertical rule
<div.rule.rule--right>
<nav.nav> ← top bar
<div.hero-bottom>
<div.lede> ← left column
<aside.card[data-glass-card]> ← right column, the glass card
<div.menu#menu> ← slide-in overlay
<script type="module" src="./glass-card.js">
<script type="module" src="./ui.js">
```
```css
.hero {
position: relative; z-index: 10;
display: flex; flex-direction: column;
width: 100%; height: 100vh; height: 100dvh;
color: #000;
pointer-events: none; /* only interactive children opt back in */
}
.icon { flex: none; }
```
Every interactive descendant re-enables `pointer-events: auto` individually.
---
## 5. Vertical rules (≥768px only)
Two identical decorative columns, `aria-hidden`, each containing five spans in order:
`seg--end`, `plus`, `seg--mid`, `plus`, `seg--end`, where each `plus` is a literal `+` character.
```css
.rule { position: absolute; top: 0; bottom: 0; display: none; flex-direction: column; align-items: center; }
.rule--left { left: 1.25rem; }
.rule--right { right: 1.25rem; }
.rule__seg { width: 1px; background: rgba(0, 0, 0, 0.2); }
.rule__seg--end { height: 15%; }
.rule__seg--mid { flex: 1 1 0%; }
.rule__plus { font-size: 0.75rem; line-height: 1; color: rgba(0, 0, 0, 0.4); padding: 0.25rem 0; }
@media (min-width: 768px) { .rule { display: flex; } }
```
---
## 6. Navbar
Left: a `<button id="menu-open" aria-expanded="false" aria-controls="menu">` with a 20×20 three-line hamburger SVG + label **"Menu"**.
Right: an `<a href="#">` with an 8px black dot + label **"Book a call"**.
All icons in the page share one convention: `viewBox="0 0 24 24"`, `fill="none"`, `stroke="currentColor"`, `stroke-width="1.5"`, `stroke-linecap="round"`, `stroke-linejoin="round"`.
Hamburger = three `<line>`s at y = 6, 12, 18, x from 4 to 20.
```css
.nav { position: relative; z-index: 2; display: flex; align-items: center; justify-content: space-between; padding: 1.25rem; }
.nav__item {
display: inline-flex; align-items: center; gap: 0.625rem;
color: #000; background: none; border: 0; font: inherit; text-decoration: none;
cursor: pointer; pointer-events: auto; transition: opacity 300ms;
}
.nav__item:hover { opacity: 0.6; }
.nav__label { font-size: 0.875rem; line-height: 1.25rem; letter-spacing: 0.025em; }
.nav__label--menu { display: none; } /* hamburger is icon-only on mobile */
.nav__dot { width: 8px; height: 8px; border-radius: 9999px; background: #000; }
@media (min-width: 640px) { .nav { padding: 1.25rem 1.5rem; } .nav__label--menu { display: inline; } }
@media (min-width: 768px) { .nav { padding: 1.5rem 3rem; } }
```
---
## 7. Bottom row layout
```css
.hero-bottom {
position: relative; z-index: 2;
margin-top: auto;
display: flex; flex-direction: column; gap: 1.5rem;
padding: 0 1.25rem 1.5rem; /* matches .nav so columns align with the navbar */
}
@media (min-width: 640px) { .hero-bottom { padding: 0 1.5rem 2rem; } }
@media (min-width: 768px) {
.hero-bottom {
flex: 1; margin-top: 0;
flex-direction: row; align-items: stretch; justify-content: space-between;
gap: 3rem; padding: 2rem 3rem 3rem;
}
.lede { align-self: flex-start; } /* copy pinned top-left */
.card { align-self: flex-end; } /* card pinned bottom-right */
}
```
Below 768px it stacks vertically, pushed to the bottom by `margin-top: auto`. At ≥768px it becomes a full-height row with the copy top-left and the card bottom-right — the diagonal is the whole composition.
**No scrim / no `::before` overlay on `.hero-bottom`.** Text is dark at every width.
---
## 8. Left column — copy
```html
<div class="lede">
<h1 class="lede__title">Signals from<br />the Deep Green</h1>
<p class="lede__body">
An open research collective mapping, decoding, and archiving the silent
vibrations that bind our planet's ecological networks.
</p>
<a class="chamfer" href="#"> … </a>
</div>
```
Keep the `<br />` after "Signals from" and the curly apostrophe in "planet's".
```css
.lede { max-width: 24rem; }
.lede__title { font-size: 1.25rem; font-weight: 300; line-height: 1.25; letter-spacing: -0.025em; color: #000; }
.lede__body { margin-top: 0.75rem; max-width: 280px; font-size: 0.75rem; line-height: 1.625; color: rgba(0, 0, 0, 0.6); }
@media (min-width: 640px) { .lede__title { font-size: 1.5rem; } .lede__body { font-size: 0.875rem; } }
@media (min-width: 768px) { .lede__title { font-size: 1.875rem; } .lede__body { margin-top: 1rem; } }
@media (min-width: 1024px) { .lede__title { font-size: 2.25rem; } }
```
Title `#000` and body `rgba(0,0,0,0.6)` at **all** widths — mobile included. Only sizes change across breakpoints.
---
## 9. Chamfered "Start listening" button
Four stacked layers inside one `<a class="chamfer">`:
```html
<a class="chamfer" href="#">
<span class="chamfer__glass" aria-hidden="true"></span>
<svg class="chamfer__outline" viewBox="0 0 260 48" preserveAspectRatio="none" aria-hidden="true">
<polygon points="14,0 260,0 260,34 246,48 0,48 0,14"
fill="none" stroke="currentColor" stroke-width="1.5" vector-effect="non-scaling-stroke" />
</svg>
<span class="chamfer__label">Start listening</span>
<svg class="icon" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor"
stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
<path d="M5 12h14" /><path d="m12 5 7 7-7 7" />
</svg>
</a>
```
The silhouette is a rectangle with two opposite corners cut at 14px — **top-left and bottom-right**. `vector-effect="non-scaling-stroke"` keeps the 1.5px stroke even though `preserveAspectRatio="none"` stretches the viewBox.
```css
.chamfer {
position: relative; display: flex; align-items: center; justify-content: space-between;
width: 220px; height: 44px; margin-top: 1.5rem; padding: 0 1.25rem;
color: #000; text-decoration: none; pointer-events: auto; transition: opacity 300ms;
}
.chamfer:hover { opacity: 0.7; }
/* mobile-only frosted backing, clipped to the same chamfer silhouette */
.chamfer__glass {
position: absolute; inset: 0;
background: rgba(255, 255, 255, 0.6);
backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
border: 1px solid rgba(0, 0, 0, 0.2);
clip-path: polygon(14px 0, 100% 0, 100% calc(100% - 14px), calc(100% - 14px) 100%, 0 100%, 0 14px);
}
.chamfer__outline { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.chamfer__label { position: relative; font-size: 0.75rem; letter-spacing: 0.025em; }
.chamfer .icon { position: relative; }
@media (min-width: 640px) {
.chamfer { width: 260px; height: 48px; padding: 0 1.5rem; }
.chamfer__label { font-size: 0.875rem; }
.chamfer__glass { background: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; border-color: transparent; }
}
@media (min-width: 768px) { .chamfer { margin-top: 2rem; } }
```
Note the inversion: the frosted fill exists **only below 640px**; at ≥640px it dissolves and just the hairline outline remains.
---
## 10. Right column — the liquid-glass card
```html
<aside class="card group" data-glass-card>
<div id="dup-video-container"><canvas id="dup-image"></canvas></div>
<div class="card__frost" aria-hidden="true"></div>
<div class="card__head">
<h2 class="card__title">Latest findings</h2>
<span class="card__index">//02</span>
</div>
<div class="card__body">
<div class="finding">
<h3 class="finding__title">Canopy Pulse Analysis 09.17</h3>
<p class="finding__text">Identified harmonic oscillation links between root mycelia networks and surrounding atmospheric moisture.</p>
</div>
<div class="finding">
<h3 class="finding__title">Watershed Harmonic Index 11.06</h3>
<p class="finding__text">Forecasting framework for ecosystem regeneration spanning six continents using over 2,400 sensor arrays.</p>
</div>
</div>
<svg class="card__wave" viewBox="0 0 220 50" fill="none" aria-hidden="true">
<path d="M0 30 C10 30 12 45 18 45 C24 45 26 10 34 10 C42 10 44 40 52 40 C60 40 62 5 70 5 C78 5 80 42 88 42 C96 42 98 15 106 15 C114 15 116 38 124 38 C132 38 134 20 142 20 C150 20 152 35 160 35 C168 35 170 22 178 22 C186 22 188 32 196 32 C204 32 210 28 220 28"
stroke="black" stroke-width="1.8" stroke-linecap="round" fill="none" />
</svg>
</aside>
```
The wave is a static hand-authored waveform — irregular amplitudes, decaying left to right. Copy the `d` verbatim.
Three stacking layers inside the card: refracted duplicate at `z-index: 0`, frost sheen at `1`, all text/wave at `2`.
```css
.card {
position: relative;
display: flex; flex-direction: column; justify-content: space-between;
width: 340px; max-width: 100%; height: 460px;
padding: 2rem;
border-radius: 48px;
overflow: hidden; /* clips the duplicate to the card */
background: transparent; /* the refraction IS the fill */
border: 1px solid rgba(47, 47, 47, 0.15);
pointer-events: auto;
animation: fade-slide-up-card 900ms cubic-bezier(0.16, 1, 0.3, 1) both;
}
@keyframes fade-slide-up-card {
from { opacity: 0; transform: translateY(28px); }
to { opacity: 1; transform: translateY(0); }
}
/* full-viewport-aligned copy of the backdrop; left/top/width/height are written every frame by glass-card.js */
#dup-video-container { position: absolute; left: 0; top: 0; z-index: 0; overflow: hidden; pointer-events: none; }
#dup-image { position: absolute; inset: 0; width: 100%; height: 100%; filter: url(#liquid-glass-refraction); }
.card__frost {
position: absolute; inset: 0; z-index: 1;
border-radius: 48px; pointer-events: none;
background: rgba(255, 255, 255, 0.05);
box-shadow: inset 0 1.5px 2px rgba(255, 255, 255, 0.3),
inset 0 -1px 2px rgba(0, 0, 0, 0.15);
transition: background 400ms;
}
.card.group:hover .card__frost { background: rgba(255, 255, 255, 0.1); }
.card__head, .card__body, .card__wave { position: relative; z-index: 2; }
.card__head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem;
padding-bottom: 0.75rem; border-bottom: 1px solid rgba(0, 0, 0, 0.1); }
.card__title { font-size: 1rem; font-weight: 500; letter-spacing: -0.025em; }
.card__index { font-size: 0.75rem; color: rgba(0, 0, 0, 0.4); }
.card__body { display: flex; flex-direction: column; gap: 1rem; margin-top: 1rem; }
.finding__title { font-size: 0.875rem; font-weight: 600; letter-spacing: -0.025em; }
.finding__text { margin-top: 0.25rem; font-size: 0.75rem; line-height: 1.625; color: rgba(0, 0, 0, 0.5); }
.card__wave { display: block; width: 100%; height: auto; margin-top: 1.25rem; }
@media (min-width: 640px) { .card__title { font-size: 1.125rem; } }
@media (min-width: 768px) {
.card__head { padding-bottom: 1rem; }
.card__title { font-size: 1.25rem; }
.card__body { gap: 1.25rem; margin-top: 1.25rem; }
.finding__title { font-size: 1rem; }
.finding__text { font-size: 0.875rem; margin-top: 0.375rem; }
.card__wave { margin-top: 1.5rem; }
}
```
---
## 11. `glass-card.js` — the frame sync
This is the load-bearing trick. **The card is a window onto a refracted duplicate of the background video.**
Each animation frame:
1. Measure the card with `getBoundingClientRect()`; bail if it has no size, or if `video.videoWidth/videoHeight` are still 0.
2. Position `#dup-video-container` at `left: -rect.left`, `top: -rect.top`, sized to `document.documentElement.clientWidth/clientHeight`. Because it is absolutely positioned inside the card, that negative offset lands it exactly over the viewport origin — its pixels line up 1:1 with the real video behind the card. The card's `overflow: hidden` + `border-radius: 48px` do all the clipping.
3. Resize `#dup-image` to viewport size at `DUP_PIXEL_RATIO = 1` (only when it actually changed).
4. Draw the current video frame into it, reproducing `object-fit: cover`:
```js
const cover = Math.max(vw / video.videoWidth, vh / video.videoHeight);
const sw = vw / cover, sh = vh / cover;
const sx = (video.videoWidth - sw) / 2, sy = (video.videoHeight - sh) / 2;
ctx.drawImage(video, sx, sy, sw, sh, 0, 0, w, h);
```
Wrap in `try/catch` — a frame may not be decodable yet.
5. The canvas carries `filter: url(#liquid-glass-refraction)` in CSS, so the browser refracts it on composite.
Drive it with a self-starting `requestAnimationFrame` loop; the module runs itself, no exports needed.
**Two comments worth preserving, because both encode non-obvious decisions:**
- Sizing the duplicate to the **viewport** rather than to the card is deliberate. The filter shifts each colour channel by a different amount, so the filtered element's own leading edges show hard channel-separation bands. At viewport size those bands fall outside the card and only clean refraction shows.
- The duplicate stays at **1× even on retina**: the SVG filter's cost scales with pixel count, and what shows through is a soft refraction where 4× the filter work buys nothing.
---
## 12. `ui.js` — the menu
Markup: `#menu` > `#menu-backdrop` + `.menu__panel`, panel holding a `#menu-close` button (20×20 X icon, two paths `M18 6 6 18` and `m6 6 12 12`, label "Close"), a `.menu__nav` of five `.menu__link`s, and a `.menu__foot`.
Links, in order: **About, Research, Projects, Journal, Contact** — each a `.menu__linkText` span plus a 16×16 right-arrow (`M5 12h14` + `m12 5 7 7-7 7`) with class `menu__arrow icon`.
Foot: label **"Get in touch"** over `<a class="menu__mail" href="mailto:hello@terranova.earth">hello@terranova.earth</a>`.
Behaviour — a single `setMenu(open)` that toggles `.is-open` on `#menu`, mirrors it to `aria-expanded` on the open button, and moves focus (`{ preventScroll: true }`) to the close button on open / back to the open button on close. Wire: open button, close button, backdrop click, every link click (closes), and `Escape` — Escape only acts while open.
```css
.menu { position: fixed; inset: 0; z-index: 50; visibility: hidden; pointer-events: none;
transition: visibility 0s linear 500ms; }
.menu.is-open { visibility: visible; pointer-events: auto; transition-delay: 0s; }
.menu__backdrop { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.4);
backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
opacity: 0; transition: opacity 500ms; }
.menu.is-open .menu__backdrop { opacity: 1; }
.menu__panel { position: absolute; top: 0; left: 0; display: flex; flex-direction: column;
width: 100%; height: 100%; padding: 1.5rem 2rem; background: #f5f4f0;
transform: translateX(-100%);
transition: transform 500ms cubic-bezier(0.16, 1, 0.3, 1); }
.menu.is-open .menu__panel { transform: translateX(0); }
@media (min-width: 640px) { .menu__panel { width: 380px; padding: 1.5rem 2.5rem; } }
.menu__close { display: inline-flex; align-items: center; gap: 0.625rem; align-self: flex-start;
margin-bottom: 3rem; background: none; border: 0; font: inherit; font-size: 0.875rem;
color: #000; cursor: pointer; transition: opacity 300ms; }
.menu__close:hover { opacity: 0.6; }
.menu__nav { display: flex; flex-direction: column; }
.menu__link { display: flex; align-items: center; justify-content: space-between; padding: 1rem 0;
border-bottom: 1px solid rgba(0, 0, 0, 0.1); color: #000; text-decoration: none;
opacity: 0; transform: translateY(20px); transition: opacity 500ms, transform 500ms; }
.menu__linkText { font-size: 1.5rem; font-weight: 300; letter-spacing: -0.025em; transition: transform 300ms; }
.menu__link:hover .menu__linkText { transform: translateX(8px); }
.menu__arrow { opacity: 0; transform: translateX(8px); transition: opacity 300ms, transform 300ms; }
.menu__link:hover .menu__arrow { opacity: 1; transform: translateX(0); }
@media (min-width: 640px) { .menu__linkText { font-size: 1.875rem; } }
.menu.is-open .menu__link { opacity: 1; transform: translateY(0); }
.menu.is-open .menu__link:nth-child(1) { transition-delay: 150ms; }
.menu.is-open .menu__link:nth-child(2) { transition-delay: 225ms; }
.menu.is-open .menu__link:nth-child(3) { transition-delay: 300ms; }
.menu.is-open .menu__link:nth-child(4) { transition-delay: 375ms; }
.menu.is-open .menu__link:nth-child(5) { transition-delay: 450ms; }
.menu__foot { margin-top: auto; padding: 1.5rem 0 2rem; border-top: 1px solid rgba(0, 0, 0, 0.1);
opacity: 0; transform: translateY(20px); transition: opacity 500ms, transform 500ms; }
.menu.is-open .menu__foot { opacity: 1; transform: translateY(0); transition-delay: 600ms; }
.menu__footLabel { display: block; margin-bottom: 0.75rem; font-size: 0.75rem; text-transform: uppercase;
letter-spacing: 0.025em; color: rgba(0, 0, 0, 0.4); }
.menu__mail { font-size: 0.875rem; color: rgba(0, 0, 0, 0.7); text-decoration: none; transition: color 300ms; }
.menu__mail:hover { color: #000; }
```
Panel is full-width below 640px, a 380px drawer above. The `visibility` transition is delayed 500ms on close so the slide-out finishes before the layer goes inert.
---
## 13. Complete animation inventory
| What | Trigger | Spec |
|---|---|---|
| Card entrance | page load | `fade-slide-up-card` 900ms `cubic-bezier(0.16, 1, 0.3, 1)` `both` — opacity 0→1, translateY 28px→0 |
| Live refraction | every rAF | canvas redraw + SVG filter |
| Card frost | hover on card | background `rgba(255,255,255,0.05)` → `0.1`, 400ms |
| Nav item | hover | opacity → 0.6, 300ms |
| Chamfer button | hover | opacity → 0.7, 300ms |
| Menu backdrop | open | opacity 0→1, 500ms |
| Menu panel | open | translateX -100%→0, 500ms `cubic-bezier(0.16, 1, 0.3, 1)` |
| Menu links | open | opacity + translateY 20px→0, 500ms, staggered 150 / 225 / 300 / 375 / 450ms |
| Menu foot | open | same, delay 600ms |
| Menu link text | hover | translateX 8px, 300ms |
| Menu link arrow | hover | opacity 0→1 + translateX 8px→0, 300ms |
| Menu close btn | hover | opacity → 0.6, 300ms |
| Menu mail | hover | color → `#000`, 300ms |
Close with:
```css
@media (prefers-reduced-motion: reduce) { * { transition-duration: 0.01ms !important; } }
```
---
## 14. `serve.mjs` — local static server
ES modules require HTTP; `file://` will not work. Write a dependency-free Node static server:
- `createServer` from `node:http`, `readFile` from `node:fs/promises`, `extname/join/normalize` from `node:path`.
- Resolve the root with **`fileURLToPath(new URL('.', import.meta.url))`**, *not* `.pathname` — `.pathname` leaves spaces percent-encoded and every request 404s if the folder name contains a space.
- MIME map for `.html .js .mjs .css .json .png .jpg .svg .mp4`, falling back to `application/octet-stream`.
- Map `/` → `/index.html`, decode the URL, `normalize`, and reject anything not starting with root (directory-traversal guard). Send `Cache-Control: no-store`. Any failure → 404 `not found`.
- Listen on `Number(process.env.PORT) || 8123` at `127.0.0.1`, logging the URL.
---
## 15. Acceptance checks
- Page fills the viewport, never scrolls, at 375px and at 1280px+.
- Video autoplays, loops seamlessly, no controls, and is **completely untinted** — no overlay element anywhere above it.
- The card shows a live, moving, chromatically-fringed refraction of the video that stays registered with the background as the viewport resizes.
- Card content is legible; the refraction sits behind the frost, which sits behind the text.
- Menu opens with staggered links, closes on X / backdrop / link / Escape, and returns focus to the hamburger.
- Console is clean. There must be zero references anywhere to Three.js, WebGPU, WebGL, TSL, lil-gui, or OrbitControls.
**One known artifact, inherent to the design — do not "fix" it by changing the filter:** at ≤640px the card is nearly viewport-width, so its left edge falls inside the filter's 45px edge-mask zone and a chromatic band shows as a blue stripe down the card's left edge. It is invisible at ≥768px where the card is narrow relative to the viewport.
PortalHero Section · free prompt · copy-paste
Build a password manager landing page hero section using React, TypeScript, Tailwind CSS, Framer Motion, and Lucide React icons. Here is every specification:
---
### Fonts
- **Heading font:** "Helvetica Now Display Bold" -- load via this stylesheet in `index.html`:
```
<link href="(self-host this face — no free CDN; substitute a close match if unavailable)" rel="stylesheet">
```
- **Body font:** "Inter" (weights 300-900) -- load via Google Fonts in `index.css`:
```
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap');
```
### CSS Variables (defined in `:root` in `index.css`)
```
--font-heading: 'Helvetica Now Display Bold', sans-serif;
--font-body: 'Inter', sans-serif;
--color-text: #192837;
--color-accent: #7342E2;
--color-login-bg: #F2F2EE;
```
Global reset: `* { box-sizing: border-box; }`, body uses `var(--font-body)`, `var(--color-text)`, margin/padding 0.
---
### Background
Full-viewport looping background video, absolutely positioned, covering the entire page with `object-cover`. URL:
```
https://meez.design/web/media/ext/25f7c4381c7e64d5.mp4
```
Attributes: `autoPlay`, `muted`, `loop`, `playsInline`. Classes: `absolute inset-0 z-0 w-full h-full object-cover`.
---
### Logo (inline SVG component)
A custom geometric SVG logo, 32x32, viewBox `0 0 256 256`, fill `#192837`:
```
M 64 128 L 64.5 128 L 32 95 L 0 64 L 0 0 L 64 0 L 128 64 L 128 64.5 L 161 32 L 192 0 L 256 0 L 256 64 L 192 128 L 128 128 L 128 192 L 96 223 L 63.5 256 L 0 256 L 0 192 Z M 256 192 L 224 223 L 191.5 256 L 128 256 L 128 192 L 192 128 L 256 128 Z
```
---
### Navbar
- Max-width `1280px`, centered with `margin: 0 auto`.
- Padding: `px-5 sm:px-8 py-4 sm:py-5`.
- `relative z-10`, flexbox with `justify-between`, `items-center`.
- **Left:** Logo component.
- **Center (desktop, hidden on mobile `md:flex`):** 5 nav links -- "Vault", "Plans", "Install", "News", "Help". Each is `text-sm font-medium`, color `var(--color-text)`, `transition-opacity hover:opacity-70`, gap-8.
- **Right (desktop, hidden on mobile `md:flex`):** Two pill buttons with `gap-3`:
- "Start For Free": background `#7342E2`, white text, `text-sm font-semibold px-5 py-2.5 rounded-full`, hover shadow, active scale-95.
- "Sign In": background `#F2F2EE`, text `var(--color-text)`, same sizing/rounding.
- **Mobile (`md:hidden`):** Hamburger button using Lucide `Menu` icon (24px). Toggles to `X` icon when open.
---
### Mobile Menu (slide-in sheet)
Uses Framer Motion `AnimatePresence`. Two layers:
1. **Backdrop:** Fixed overlay, `rgba(25,40,55,0.35)` background, `backdrop-blur(4px)`. Fades in/out over 0.3s. Clicking dismisses the menu.
2. **Sheet:** Fixed, right-aligned, `width: min(88vw, 360px)`, `height: 100dvh`, background `#CFC8C5`, box-shadow `-12px 0 48px rgba(25,40,55,0.18)`. Slides in from right with custom cubic bezier `[0.22, 1, 0.36, 1]` over 0.45s; exits with `[0.55, 0, 1, 0.45]` over 0.35s.
Contents:
- **Header:** Logo + circular close button (40x40, background `rgba(25,40,55,0.1)`, X icon 20px), with `whileTap={{ scale: 0.9 }}`.
- **Divider:** 1px line, `rgba(25,40,55,0.12)`, margin `0 24px`.
- **Nav links:** Each link staggers in from right (x: 24 to 0, delay `0.18 + i * 0.07`, duration 0.4s). Font size `1.1rem`, rounded-xl, hover `bg-black/10`.
- **CTA buttons:** Same "Start For Free" (`#7342E2`) and "Sign In" (`#F2F2EE`) as desktop, full-width, `py-3.5 rounded-full`, font size `0.95rem`.
---
### Hero Content
- Centered container, max-width `1280px`, `relative z-10`.
- Padding top: `clamp(40px, 8vw, 72px)`, bottom `48px`.
- Inner content wrapper: max-width `660px`, centered.
**Heading (`<h1>`):**
- Font: `var(--font-heading)`.
- Size: `clamp(1.65rem, 5vw, 3rem)`.
- Line-height: `1.05`, letter-spacing: `-0.01em`.
- Color: `var(--color-text)`.
- Text-align: center.
- Two lines:
- Line 1 (nowrap): `Lock` [Zap icon 24px] `Down Your` [LockKeyhole icon 24px] `Passwords`
- Line 2: `with Ironclad Security` [Fingerprint icon 24px]
- All inline icons: color `#192837`, `display: inline`, `verticalAlign: middle`, `position: relative`, `top: -2px`, margin `0 4px` (Fingerprint has `marginLeft: 6px` only).
- Animates: fade-up from `y: 28`, `opacity: 0`, duration 0.6s, ease `[0.22, 1, 0.36, 1]`, delay `0 * 0.15`.
**Subtext (`<p>`):**
- Font: `var(--font-body)`.
- Size: `clamp(0.9rem, 2.5vw, 1.1rem)`.
- Color: `var(--color-text)` at `opacity: 0.8`.
- Max-width: `560px`, line-height `1.65`, text-align center.
- Copy: "Zero stress, total control. Unbreakable storage, one-tap access, and pro-grade tools for your non-stop world."
- Animates: same fade-up, delay `1 * 0.15`.
**CTA Button:**
- Pill button (`borderRadius: 50px`), background `#7342E2`, white text.
- Size: `clamp(0.9rem, 2vw, 1rem)`, padding `17px 24px`, min-width `210px`.
- Box-shadow: `0 4px 24px rgba(115,66,226,0.28)`.
- Flexbox with `justify-between`, gap `32px`.
- Label: "Get It Free" with `ArrowRightCircle` icon (20px) on right.
- Hover: `scale: 1.04, brightness(1.1)`. Tap: `scale: 0.96`.
- Animates: same fade-up, delay `2 * 0.15`.
---
### Animation System (Framer Motion variants)
All hero elements use a shared `fadeUp` variant:
```
hidden: { opacity: 0, y: 28 }
visible: (i) => ({ opacity: 1, y: 0, transition: { delay: i * 0.15, duration: 0.6, ease: [0.22, 1, 0.36, 1] } })
```
---
### Dependencies
- `react`, `react-dom` (v18)
- `framer-motion`
- `lucide-react` (icons: ArrowRightCircle, Zap, LockKeyhole, Fingerprint, Menu, X)
- Tailwind CSS 3 with default config, no custom theme extensions
- Vite + TypeScript
Quantum CoreData Intelligence · free prompt · copy-paste
# PROMPT — Recreate the "Apogee" Hero Section Exactly
Build a pixel-exact, fully mobile-responsive hero landing section called **"Apogee"**. Follow every specification below literally — exact hex values, exact pixel numbers, exact class names, exact animation delays, exact copy. Do not substitute, round, simplify, or "improve" any value. Where a bracketed Tailwind arbitrary value is given (e.g. `text-[15.5px]`), use that arbitrary value verbatim rather than the nearest Tailwind preset.
---
## 1. STACK & PROJECT SETUP
- **Vite 5** + **React 18.3** + **TypeScript 5.5** + **Tailwind CSS 3.4** + **PostCSS/Autoprefixer**
- Icons: **`lucide-react`** (v0.446) — use only `ChevronDown`, `Menu`, `X`
- `package.json` type: `"module"`. Scripts: `dev: vite`, `build: vite build`, `lint: eslint .`, `preview: vite preview`, `typecheck: tsc --noEmit -p tsconfig.app.json`
**`vite.config.ts`:**
```ts
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
import { fileURLToPath, URL } from 'node:url';
export default defineConfig({
plugins: [react()],
resolve: {
alias: {
'@': fileURLToPath(new URL('./src', import.meta.url)),
},
},
optimizeDeps: {
exclude: ['lucide-react'],
},
});
```
**`tsconfig.app.json`** must include the matching path alias so `@/foo` resolves to `src/foo`:
```json
"baseUrl": ".",
"paths": { "@/*": ["src/*"] }
```
**`tailwind.config.js`** — stock, no theme extensions (all styling uses arbitrary values):
```js
/** @type {import('tailwindcss').Config} */
export default {
content: ['./index.html', './src/**/*.{js,ts,jsx,tsx}'],
theme: { extend: {} },
plugins: [],
};
```
**File structure:**
```
index.html
src/main.tsx
src/App.tsx
src/index.css
src/components/Hero.tsx
```
`src/App.tsx` renders nothing but the hero:
```tsx
import Hero from '@/components/Hero';
function App() {
return <Hero />;
}
export default App;
```
`src/main.tsx` uses `createRoot` + `<StrictMode>`, importing `./App.tsx` and `./index.css`.
---
## 2. `index.html` — FONT & HEAD
Page title: **`Apogee`**. Viewport meta: `width=device-width, initial-scale=1.0`.
Load the **Suisse Intl** webfont with this exact stylesheet link in `<head>`:
```html
<link href="(self-host this face — no free CDN; substitute a close match if unavailable)" rel="stylesheet">
```
Root div id is `root`; module script is `/src/main.tsx`.
---
## 3. `src/index.css` — GLOBAL CSS & KEYFRAMES
Exactly this file, in this order:
```css
@tailwind base;
@tailwind components;
@tailwind utilities;
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Suisse Intl', -apple-system, BlinkMacSystemFont, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
@keyframes fade-up {
from { opacity: 0; transform: translateY(24px); }
to { opacity: 1; transform: translateY(0); }
}
@keyframes fade-down {
from { opacity: 0; transform: translateY(-16px); }
to { opacity: 1; transform: translateY(0); }
}
@keyframes fade-left {
from { opacity: 0; transform: translateX(-20px); }
to { opacity: 1; transform: translateX(0); }
}
@keyframes fade-right {
from { opacity: 0; transform: translateX(20px); }
to { opacity: 1; transform: translateX(0); }
}
@keyframes fade-scale {
from { opacity: 0; transform: scale(0.92); }
to { opacity: 1; transform: scale(1); }
}
@keyframes bar-grow {
from { transform: scaleY(0); opacity: 0; }
to { transform: scaleY(1); opacity: 1; }
}
.animate-fade-up { animation: fade-up 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards; }
.animate-fade-down { animation: fade-down 0.7s cubic-bezier(0.16, 1, 0.3, 1) forwards; }
.animate-fade-left { animation: fade-left 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards; }
.animate-fade-right { animation: fade-right 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards; }
.animate-fade-scale { animation: fade-scale 0.9s cubic-bezier(0.16, 1, 0.3, 1) forwards; }
.animate-bar-grow {
animation: bar-grow 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards;
opacity: 0;
}
```
**Critical:** every animation uses `forwards` fill mode and the easing `cubic-bezier(0.16, 1, 0.3, 1)`. Elements start at `opacity-0` in markup and are revealed by the animation — never by JS state or IntersectionObserver.
---
## 4. `src/components/Hero.tsx`
Single file containing four things in this order: the `BAR_HEIGHTS` constant, the `Animate` helper, the `RevenueCard` component, the default-exported `Hero`, then the `Nav` component (function declarations, so hoisting allows `Nav` to be defined after `Hero`).
### 4.1 The `BAR_HEIGHTS` constant — use these 32 numbers exactly, in this order
```ts
const BAR_HEIGHTS = [
23, 40, 53, 40, 33, 14, 7, 17, 75, 65,
88, 75, 65, 47, 33, 88, 4, 7, 9, 14,
95, 65, 79, 37, 7, 40, 17, 20, 62, 47,
92, 72,
];
```
### 4.2 `Animate` — the reusable entrance-animation wrapper
Props: `children: React.ReactNode`, `delay?: number` (default `0`), `className?: string` (default `''`), `direction?: 'up' | 'down' | 'left' | 'right' | 'scale'` (default `'up'`).
It maps direction → class via a lookup object (`up: 'animate-fade-up'`, `down: 'animate-fade-down'`, `left: 'animate-fade-left'`, `right: 'animate-fade-right'`, `scale: 'animate-fade-scale'`) and renders:
```tsx
<div
className={`opacity-0 ${directionClass} ${className}`}
style={{ animationDelay: `${delay}ms` }}
>
{children}
</div>
```
### 4.3 `Hero` — the outer section (default export)
```
<section class="relative w-full h-screen overflow-hidden bg-[#080A19]">
```
**Background video** — first child, absolutely positioned, covering, with this EXACT source URL:
```
https://meez.design/web/media/ext/8697de2ba28425a4.mp4
```
```tsx
<video
className="absolute inset-0 w-full h-full object-cover"
src="https://meez.design/web/media/ext/8697de2ba28425a4.mp4"
autoPlay
loop
muted
playsInline
/>
```
(It is a dark deep-blue/red nebula clip. There is **no** dark gradient overlay — the `#080A19` section background only shows while the video loads.)
**Content wrapper:** `<div className="relative z-10 h-full flex flex-col">` containing `<Nav />`, then:
```
<div class="flex-1 flex items-center py-8">
<div class="w-full max-w-[1800px] mx-auto px-5 sm:px-8 md:px-[82px] flex flex-col lg:flex-row lg:items-center lg:justify-between gap-10 lg:gap-12">
<div class="max-w-[593px]"> …copy block… </div>
<RevenueCard />
</div>
</div>
```
**Copy block (left column), in order:**
1. `<Animate delay={300} direction="up">` wrapping an `<h1>`:
- classes: `text-white text-[36px] sm:text-[52px] md:text-[64px] lg:text-[72px] font-normal leading-[0.95] mb-5 sm:mb-8`
- text: **`Elevate your essential data to new heights`**
2. `<Animate delay={500} direction="up">` wrapping a `<p>`:
- classes: `text-white/80 text-[16px] sm:text-[18px] md:text-[20px] font-[450] leading-[1.3] max-w-[370px] mb-7 sm:mb-10`
- text: **`Advanced reasoning systems and predictive models built for the unknown`**
3. `<Animate delay={700} direction="up">` wrapping `<div className="flex flex-wrap gap-3 sm:gap-4">` with two buttons:
- **`Book a demo`** — `h-[46px] sm:h-[51px] px-5 sm:px-[27px] bg-[#E9E9E9] rounded-[12px] text-[#0A0707] text-[14px] sm:text-[15.5px] font-[450] leading-[15.5px] transition-opacity hover:opacity-90`
- **`Talk with the team`** — `h-[46px] sm:h-[51px] px-5 sm:px-[27px] rounded-[12px] border border-white text-white text-[14px] sm:text-[15.5px] font-[450] leading-[15.5px] transition-opacity hover:opacity-80`
### 4.4 `RevenueCard` — the glassmorphic stat card (right column)
Wrapper: `<Animate delay={900} direction="scale" className="w-full max-w-[405px] mx-auto lg:mx-0">`
(so it is **centered on mobile, left-aligned in its column on `lg`**).
Card shell:
```
w-full rounded-[24px] sm:rounded-[33px] bg-[rgba(17,16,15,0.35)] backdrop-blur-[20px] p-5 sm:p-8 pb-5 sm:pb-6
```
**Contents, in order:**
1. Label `<p>`: **`Revenue Growth`** — `text-white text-[16px] sm:text-[20px] font-[450] leading-[20px] mb-3 sm:mb-4`
2. Amount `<p className="mb-2 sm:mb-3">` containing **two spans**, so the cents are dimmed:
- `<span class="text-white text-[28px] sm:text-[46px] font-[450] leading-[1]">$14,205,890</span>`
- `<span class="text-white/20 text-[28px] sm:text-[46px] font-[450] leading-[1]">.00</span>`
3. Delta row `<div className="flex items-center gap-[10px] mb-6 sm:mb-8">`:
- badge span **`+32.4%`** — `px-[6px] py-[7px] bg-white/20 rounded-[6px] text-white text-[12px] sm:text-[14px] font-[450] leading-[14px]`
- caption span **`vs. previous period ($10.7M)`** — `text-white/80 text-[12px] sm:text-[14px] font-[450] leading-[14px] opacity-70`
4. Chart block `<div className="relative">` with three children:
**(a) Bars** — `<div className="flex items-end gap-[1.5px] h-[80px] sm:h-[100px]">`, mapping `BAR_HEIGHTS`. Compute `const maxHeight = Math.max(...BAR_HEIGHTS);` once at the top of the component (= `95`). For each bar at index `i`:
- `const isProjected = i >= 28;` ← the **last 4 bars** are the dimmed "projected" ones
- `const heightPercent = (h / maxHeight) * 100;`
- className: `flex-1 rounded-[0.5px] animate-bar-grow origin-bottom`
- inline style:
```ts
{
height: `${heightPercent}%`,
backgroundColor: isProjected ? 'rgba(255,255,255,0.1)' : 'white',
animationDelay: `${1100 + i * 30}ms`,
}
```
- So bars stagger from **1100ms** to **2030ms** (`1100 + 31*30`), each growing from `scaleY(0)` about its bottom origin over 600ms.
**(b) Vertical gridlines** — `<div className="absolute inset-0 pointer-events-none">` containing `[0,1,2,3,4].map(i => …)`:
- className `absolute top-0 bottom-0 w-px bg-white/10`
- style `{ left: `${((i + 1) / 5) * 100}%` }` → 20%, 40%, 60%, 80%, 100%
**(c) Time axis** — `<div className="flex justify-between mt-3">` over `['10:00', '12:00', '14:00', '16:00', '16:00']` (yes, `16:00` is repeated as the final label — reproduce it):
- className `text-[9px] sm:text-[10px] font-[450] leading-[10px] text-white/80`
- style `{ opacity: i >= 3 ? 0.4 : 1 }` → the last two labels are dimmed
### 4.5 `Nav` — header + mobile menu
Holds `const [isOpen, setIsOpen] = useState(false);` and a `useEffect` that **locks body scroll** while the menu is open:
```tsx
useEffect(() => {
if (isOpen) {
document.body.style.overflow = 'hidden';
} else {
document.body.style.overflow = '';
}
return () => { document.body.style.overflow = ''; };
}, [isOpen]);
```
Returns a fragment `<>…</>` with the `<nav>` bar and the mobile overlay as siblings.
**Nav bar:**
```
<nav class="w-full max-w-[1800px] mx-auto px-5 sm:px-8 md:px-[82px] pt-[20px] sm:pt-[30px] flex items-center justify-between relative z-50">
```
(Note: the nav uses the same `max-w-[1800px]` + `px-5 sm:px-8 md:px-[82px]` rhythm as the hero body so the logo aligns with the headline.)
**(i) Logo** — `<Animate delay={0} direction="down">` → `<div className="flex items-center gap-2.5">`:
Inline SVG, `width="28" height="28" viewBox="0 0 256 256" fill="none" className="sm:w-[32px] sm:h-[32px]"`, single white path — use this exact `d`:
```
M 256 256 L 178 256 C 150.386 256 128 233.614 128 206 L 128 256 L 0 256 L 0 192 C 0 156.654 28.654 128 64 128 C 99.346 128 128 156.654 128 192 L 128 128 L 256 128 Z M 78 0 C 105.614 0 128 22.386 128 50 L 128 0 L 256 0 L 256 64 C 256 99.346 227.346 128 192 128 C 156.654 128 128 99.346 128 64 L 128 128 L 0 128 L 0 0 Z
```
Wordmark span: **`Apogee`** — `text-white text-[22px] sm:text-[26px] font-[450] leading-none tracking-[-0.02em]`
**(ii) Center nav pill** — `<Animate delay={100} direction="down" className="hidden lg:block">` → glass pill:
```
h-[52px] px-6 flex items-center gap-[30px] bg-[rgba(10,7,7,0.35)] rounded-[11px] backdrop-blur-[17px]
```
Items (all `text-white/80 text-[14px] font-[450] leading-[14px] hover:text-white transition-colors`):
- **`Platform`** — a `<button className="flex items-center gap-[5px] …">` with a trailing `<ChevronDown className="w-[10px] h-[10px] opacity-80" />`
- **`Pricing`**, **`Resources`**, **`Blog`** — plain `<span>`s with `cursor-pointer`
**(iii) Right auth pill** — `<Animate delay={200} direction="down" className="hidden lg:block">`:
```
h-[52px] p-[3px] bg-[rgba(0,0,0,0.35)] rounded-[13px] backdrop-blur-[17px] flex items-center gap-[5px]
```
- **`Login`** — `h-[46px] px-6 rounded-[11px] text-white text-[14px] font-[450] leading-[14px] hover:bg-white/5 transition-colors`
- **`Book a demo`** — `h-[46px] px-6 bg-[#E9E9E9] rounded-[11px] text-[#0A0707] text-[14px] font-[450] leading-[14px] hover:bg-white transition-colors`
**(iv) Mobile hamburger** — `<Animate delay={100} direction="down" className="lg:hidden">`:
Button: `w-[44px] h-[44px] flex items-center justify-center rounded-[11px] bg-[rgba(10,7,7,0.35)] backdrop-blur-[17px] transition-colors hover:bg-white/10`, `onClick={() => setIsOpen(!isOpen)}`, `aria-label="Toggle menu"`.
Inside, a `<div className="relative w-5 h-5">` with **both icons stacked absolutely** and cross-faded (never conditionally unmounted):
- `<Menu className={\`w-5 h-5 text-white absolute inset-0 transition-all duration-300 ease-out ${isOpen ? 'opacity-0 rotate-90 scale-75' : 'opacity-100 rotate-0 scale-100'}\`} />`
- `<X className={\`w-5 h-5 text-white absolute inset-0 transition-all duration-300 ease-out ${isOpen ? 'opacity-100 rotate-0 scale-100' : 'opacity-0 -rotate-90 scale-75'}\`} />`
**(v) Mobile menu overlay** (sibling of `<nav>`):
Container — visibility-toggled, never unmounted, so transitions play both ways:
```
lg:hidden fixed inset-0 z-40 transition-all duration-500 ease-[cubic-bezier(0.32,0.72,0,1)] + (isOpen ? 'visible' : 'invisible')
```
Backdrop (click closes the menu):
```
absolute inset-0 bg-[#080A19]/90 backdrop-blur-[24px] transition-opacity duration-500 + (isOpen ? 'opacity-100' : 'opacity-0')
```
Panel:
```
absolute top-[76px] sm:top-[86px] left-4 right-4 sm:left-6 sm:right-6
bg-[rgba(17,16,15,0.6)] backdrop-blur-[30px] rounded-[20px] border border-white/[0.06]
p-6 sm:p-8 transition-all duration-500 ease-[cubic-bezier(0.32,0.72,0,1)] origin-top
+ (isOpen ? 'opacity-100 translate-y-0 scale-100' : 'opacity-0 -translate-y-4 scale-[0.97]')
```
Panel links — `<div className="flex flex-col gap-1">` over `['Platform', 'Pricing', 'Resources', 'Blog']`, each an `<a href="#">`:
```
flex items-center justify-between px-4 py-4 rounded-[12px] text-white/90 text-[18px] font-[450]
hover:bg-white/[0.06] transition-all duration-300
+ (isOpen ? 'opacity-100 translate-x-0' : 'opacity-0 -translate-x-3')
```
with staggered `style={{ transitionDelay: isOpen ? `${100 + i * 50}ms` : '0ms' }}` (→ 100/150/200/250ms), and only the `Platform` item gets a trailing `<ChevronDown className="w-4 h-4 opacity-50" />`.
Divider: `<div className="h-px bg-white/10 my-5" />`
Panel CTAs — `<div className="flex flex-col gap-3 transition-all duration-300" style={{ transitionDelay: isOpen ? '350ms' : '0ms' }}>` with `isOpen ? 'opacity-100 translate-y-0' : 'opacity-0 translate-y-2'`:
- **`Book a demo`** — `w-full h-[50px] bg-[#E9E9E9] rounded-[12px] text-[#0A0707] text-[15px] font-[450] transition-colors hover:bg-white`
- **`Login`** — `w-full h-[50px] rounded-[12px] border border-white/30 text-white text-[15px] font-[450] transition-colors hover:bg-white/5`
---
## 5. EXACT SPACING / BOX-MODEL TABLE — CRITICAL, DO NOT ESTIMATE
**Read this before building.** Every number below is a literal pixel value taken from the source code. Do not eyeball proportions from the screenshot, do not round to "looks about right," and do not let auto-layout/AI defaults substitute their own padding. If a cell says `24px` padding, the rendered element must have 24px of empty space between its border and its text/icon on that side — verify by measuring, not by glancing. The most common failure mode when this gets rebuilt is buttons and pills getting little or no internal padding (text touching the edges) — every button/pill row below exists specifically to prevent that.
Format: **Property — base (<640px) → sm (≥640px) → md (≥768px) → lg (≥1024px)**. A dash (`—`) means "unchanged from the last stated breakpoint."
### 5.1 Page-level containers
| Element | Property | base | sm | md | lg |
|---|---|---|---|---|---|
| `<nav>` and hero content row | horizontal padding | `20px` | `32px` | `82px` | — |
| `<nav>` | top padding | `20px` | `30px` | — | — |
| `<nav>` | bottom padding | `0` (none — spacing to hero content comes from the `flex-1 items-center` centering below it, not nav padding) | | | |
| Hero content row (`flex-1`) | vertical padding | `32px` top and bottom (`py-8`) | — | — | — |
| Nav / content row | max width | `1800px`, centered (`mx-auto`) | — | — | — |
| Copy column ↔ Revenue card | gap between them | `40px` (stacked vertically, so this is vertical gap) | — | — | `48px` (horizontal gap, side by side) |
| Copy column | max width | `593px` | — | — | — |
| Revenue card wrapper | max width | `405px`, horizontally centered (`mx-auto`) | — | — | left-aligned (`mx-0`, no longer centered) |
### 5.2 Logo (top-left)
| Property | base | sm |
|---|---|---|
| Icon size | `28×28px` | `32×32px` |
| Gap between icon and "Apogee" text | `10px` | — |
### 5.3 Center nav pill ("Platform · Pricing · Resources · Blog") — desktop only, `≥1024px`
| Property | Value |
|---|---|
| Height | `52px` (fixed) |
| Horizontal padding (left + right) | `24px` each side |
| Vertical padding | none set — height is fixed at 52px and content is vertically centered via `flex items-center` |
| Gap between each nav item | `30px` |
| Gap between "Platform" text and its chevron | `5px` |
| Chevron icon size | `10×10px` |
| Border radius | `11px` |
**This pill must be wide enough that "Platform / Pricing / Resources / Blog" plus three 30px gaps plus 24px of padding on each side all fit on one line without wrapping or touching the rounded corners.**
### 5.4 Right auth pill ("Login / Book a demo") — desktop only, `≥1024px`
| Property | Value |
|---|---|
| Outer pill height | `52px` |
| Outer pill padding (all 4 sides) | `3px` — this is the thin gap between the outer pill edge and the two inner buttons |
| Gap between "Login" button and "Book a demo" button | `5px` |
| Outer pill border radius | `13px` |
| **Login button** height | `46px` (fills the 52px pill minus the 3px+3px padding) |
| **Login button** horizontal padding | `24px` each side |
| **Login button** border radius | `11px` |
| **Book a demo button** height | `46px` |
| **Book a demo button** horizontal padding | `24px` each side |
| **Book a demo button** border radius | `11px` |
### 5.5 Mobile hamburger button — `<1024px` only
| Property | Value |
|---|---|
| Button size | `44×44px` square |
| Icon size (Menu/X) | `20×20px`, centered in the button |
| Border radius | `11px` |
### 5.6 Headline, subhead, CTA row (left column)
| Element | Property | base | sm |
|---|---|---|---|
| `<h1>` | margin-bottom (space to subhead) | `20px` | `32px` |
| Subhead `<p>` | margin-bottom (space to CTA row) | `28px` | `40px` |
| Subhead `<p>` | max width (forces the line wrap seen in the mock) | `370px` | — |
| CTA button row | gap between the two buttons | `12px` | `16px` |
### 5.7 CTA buttons ("Book a demo" / "Talk with the team") — the two large hero buttons, NOT the nav ones
| Property | base | sm |
|---|---|---|
| Height | `46px` | `51px` |
| Horizontal padding (left + right) | `20px` each side | `27px` each side |
| Vertical padding | none set — height is fixed and text is vertically centered | — |
| Border radius | `12px` | — |
| "Talk with the team" border width | `1px` solid white | — |
**These are the two buttons that came out with almost no padding in your screenshot. At 20–27px of horizontal padding, there should be a visibly comfortable margin of empty space between the button's rounded edge and the first/last letter of the label — not text kissing the border.**
### 5.8 Revenue card shell
| Property | base | sm |
|---|---|---|
| Border radius | `24px` | `33px` |
| Padding — top | `20px` | `32px` |
| Padding — right | `20px` | `32px` |
| Padding — left | `20px` | `32px` |
| Padding — bottom (overridden, shallower than the other 3 sides) | `20px` | `24px` |
### 5.9 Revenue card internal spacing (top to bottom, in flow order)
| Property | base | sm |
|---|---|---|
| "Revenue Growth" label → margin-bottom | `12px` | `16px` |
| Amount line → margin-bottom | `8px` | `12px` |
| Delta row (badge + caption) → margin-bottom | `24px` | `32px` |
| Gap between badge and caption text, inside the delta row | `10px` | — |
| Badge ("+32.4%") internal padding — horizontal | `6px` each side | — |
| Badge ("+32.4%") internal padding — vertical | `7px` top and bottom | — |
| Badge border radius | `6px` | — |
| Chart height (bars) | `80px` | `100px` |
| Gap between individual bars | `1.5px` | — |
| Bar border radius | `0.5px` (barely rounded — near-square tops) | — |
| Time-axis row → margin-top (space above it, below the bars) | `12px` | — |
### 5.10 Mobile menu overlay panel — `<1024px` only, when hamburger is open
| Property | base | sm |
|---|---|---|
| Panel offset from top of screen | `76px` | `86px` |
| Panel offset from left/right screen edges | `16px` | `24px` |
| Panel internal padding (all 4 sides) | `24px` | `32px` |
| Panel border radius | `20px` | — |
| Panel border width | `1px`, color `white` at 6% opacity | — |
| Each nav link row — internal padding | `16px` all 4 sides | — |
| Each nav link row — border radius | `12px` | — |
| Gap between stacked nav link rows | `4px` (`gap-1`) | — |
| Divider line → vertical margin (above and below) | `20px` | — |
| Gap between the two bottom CTA buttons (stacked) | `12px` | — |
| Bottom CTA buttons — height | `50px` | — |
---
## 6. COMPLETE COLOR REFERENCE
| Token | Value | Used for |
|---|---|---|
| Section background | `#080A19` | Hero `<section>`, mobile backdrop at 90% |
| Light button fill | `#E9E9E9` | "Book a demo" (all instances) |
| Light button text | `#0A0707` | Text on `#E9E9E9` buttons |
| Nav pill glass | `rgba(10,7,7,0.35)` | Center nav pill, hamburger button |
| Auth pill glass | `rgba(0,0,0,0.35)` | Right auth pill |
| Card / panel glass | `rgba(17,16,15,0.35)` card · `rgba(17,16,15,0.6)` mobile panel | Revenue card, mobile menu panel |
| Projected bar | `rgba(255,255,255,0.1)` | Bars at index ≥ 28 |
| Active bar | `white` | Bars at index < 28 |
| Gridlines | `white/10` | 5 vertical chart lines |
| Panel border | `white/[0.06]` | Mobile menu panel |
| Cents dim | `white/20` | The `.00` span |
| Body/secondary text | `white/80` | Subhead, nav links, axis labels |
**Backdrop-blur scale:** `17px` (nav pills) · `20px` (revenue card) · `24px` (mobile backdrop) · `30px` (mobile panel).
---
## 7. COMPLETE ANIMATION TIMELINE (page load, ms)
| Delay | Element | Animation |
|---|---|---|
| 0 | Logo + wordmark | `fade-down` 700ms |
| 100 | Center nav pill (desktop) / hamburger (mobile) | `fade-down` 700ms |
| 200 | Right auth pill (desktop) | `fade-down` 700ms |
| 300 | `<h1>` headline | `fade-up` 800ms |
| 500 | Subheadline `<p>` | `fade-up` 800ms |
| 700 | CTA button row | `fade-up` 800ms |
| 900 | Revenue card | `fade-scale` 900ms |
| 1100 + i×30 | Chart bar `i` (0–31) | `bar-grow` 600ms, `origin-bottom` |
All use `cubic-bezier(0.16, 1, 0.3, 1)` with `forwards`. Total sequence resolves at ~2630ms.
---
## 8. RESPONSIVE BEHAVIOR (Tailwind defaults: `sm`=640px, `md`=768px, `lg`=1024px)
**Layout**
- `< lg`: single column — copy block stacked above the revenue card, `gap-10`; card is `mx-auto` (centered), capped at `405px`
- `≥ lg`: `flex-row`, `items-center`, `justify-between`, `gap-12`; card becomes `mx-0`
- Horizontal padding ramps `px-5` → `sm:px-8` → `md:px-[82px]`; content capped at `max-w-[1800px] mx-auto`
- Section is always `h-screen` with `overflow-hidden`; the inner row is `flex-1 flex items-center py-8` (vertically centered)
**Navigation**
- `≥ lg`: center nav pill + right auth pill visible, hamburger hidden
- `< lg`: both pills hidden (`hidden lg:block`), 44×44 hamburger shown, full overlay menu available; body scroll locks while open
**Typography scale**
| Element | base | sm | md | lg |
|---|---|---|---|---|
| h1 | 36px | 52px | 64px | 72px |
| Subhead | 16px | 18px | 20px | — |
| CTA buttons | 14px | 15.5px | — | — |
| Wordmark | 22px | 26px | — | — |
| Card label | 16px | 20px | — | — |
| Card amount | 28px | 46px | — | — |
| Delta row | 12px | 14px | — | — |
| Axis labels | 9px | 10px | — | — |
**Sizing shifts**
| Element | base | sm |
|---|---|---|
| Logo SVG | 28×28 | 32×32 |
| CTA height | 46px | 51px |
| CTA h-padding | 20px (`px-5`) | 27px |
| Card radius | 24px | 33px |
| Card padding | 20px (`p-5`, `pb-5`) | 32px (`p-8`), 24px bottom (`pb-6`) |
| Chart height | 80px | 100px |
| Nav top padding | 20px | 30px |
| Mobile panel top | 76px | 86px |
| Mobile panel insets | `left-4 right-4` | `left-6 right-6` |
| Mobile panel padding | 24px | 32px |
---
## 9. NON-NEGOTIABLES CHECKLIST
- [ ] Video `src` is the CloudFront URL above, character for character, with `autoPlay loop muted playsInline` (muted+playsInline are required for iOS autoplay)
- [ ] `BAR_HEIGHTS` has all 32 values in the given order; `maxHeight` derived with `Math.max(...)`, not hardcoded
- [ ] Bars 28–31 are `rgba(255,255,255,0.1)`; bars 0–27 are solid `white`
- [ ] The final time-axis label is `16:00` (duplicated), and labels at index ≥ 3 render at `opacity: 0.4`
- [ ] The `.00` in the amount is a separate `white/20` span
- [ ] `font-[450]` is used throughout (not `font-normal`/`font-medium`) except the `<h1>`, which is `font-normal`
- [ ] Mobile menu is visibility-toggled, not conditionally rendered, so close transitions animate
- [ ] Menu/X icons cross-fade with rotate+scale; they are never swapped by unmounting
- [ ] Body scroll lock on menu open, with cleanup on unmount
- [ ] Every animated element carries `opacity-0` in markup and is revealed only by the CSS animation's `forwards` fill
- [ ] No scroll-triggered animation, no IntersectionObserver, no animation library — pure CSS keyframes + `animationDelay`
- [ ] **Both hero CTA buttons have 20–27px of horizontal breathing room between their border and their label text — never text touching the edge** (see §5.7 — this was the exact defect in the last rebuild)
- [ ] The center desktop nav pill is sized to its content plus 24px of padding on each side, with the full 52px height — not a cramped box that clips or crowds the four nav links (see §5.3)
- [ ] The right auth pill has a visible 3px gap of outer padding between its rounded edge and the Login/Book-a-demo buttons inside it, not the buttons flush against the pill's border (see §5.4)
- [ ] Revenue card padding is 20px (mobile) / 32px (desktop) on top/right/left, with the bottom intentionally shallower at 20px / 24px — verify this asymmetry, don't make all four sides equal (see §5.8)
- [ ] Re-check every value in §5 against the rendered output before calling this done — if any padding number doesn't match, fix that value, don't approximate
Quantum LucidSaaS · free prompt · copy-paste
Build a SINGLE standalone file: index.html (inline CSS + JS, no frameworks, no extra files). Recreate this exact Quantum² marketing landing page pixel-for-pixel: one-screen hero, black pill nav, two-line headline, subcopy, Get Started, full-bleed cyan video band, and a fixed-geometry product mockup card sitting on the band. html lang="en". Title: Quantum² — Convert screen recording into clear, intelligent insights. Viewport: width=device-width, initial-scale=1, viewport-fit=cover.
════════════════════════════════════════
FONT (required)
════════════════════════════════════════
Use Figtree as a VARIABLE font, weight axis 100–900, font-display:block (never swap/synthesize bold). Load from Google Fonts:
https://fonts.googleapis.com/css2?family=Figtree:wght@100..900&display=block
Fallback stack: Figtree, -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif.
Body: -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; text-rendering:geometricPrecision.
Do NOT use Inter, SF Pro, or system UI as the primary face.
CSS variables on :root — use these EXACT tokens (fractional weights are real variable-font instances):
Family
--font-sans: 'Figtree', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
Type scale (desktop)
--fs-display : 55.7px; /* hero h1 */
--fs-title : calc(var(--dp) * 20); /* card title */
--fs-heading : calc(var(--dp) * 17); /* panel heading */
--fs-body : 16.1px; /* hero sub */
--fs-eyebrow : calc(var(--dp) * 15.8);
--fs-ui : 15px; /* nav links, buttons */
--fs-meta : calc(var(--dp) * 14.3);
--fs-item : calc(var(--dp) * 12.9);
--fs-caption : calc(var(--dp) * 12.2);
--fs-tab : calc(var(--dp) * 12.1);
--fs-sup : 11.4px; /* wordmark superscript */
--fs-wordmark: 17.1px;
Weights
--fw-light : 388;
--fw-regular : 470;
--fw-medium : 500;
--fw-semibold : 511;
--fw-bold : 577;
--fw-black : 783;
Tracking (tight throughout)
--tr-display : -0.0572em;
--tr-title : -0.0570em;
--tr-heading : -0.0200em;
--tr-body : -0.0475em;
--tr-eyebrow : -0.0293em;
--tr-ui : -0.0080em;
--tr-cta : -0.0200em;
--tr-meta : -0.0447em;
--tr-item : -0.0287em;
--tr-caption : -0.0295em;
--tr-tab : -0.0398em;
--tr-wordmark: -0.0075em;
Leading
--lh-display : 61px;
--lh-body : 20px;
--lh-flat : 1;
--lh-display-ratio : 1.1;
--lh-body-ratio : 1.45;
Ink / surfaces
--c-ink : #000000;
--c-ink-soft : #2e2e2e; /* active tab */
--c-muted : #b8b8b8; /* meta, idle tabs, owners */
--c-on-dark : #ffffff;
--c-on-light : #000000;
--c-surface-nav : #000000;
--c-surface-card : #f2f2f2;
--c-surface-panel : #ffffff;
--c-border-row : #ededed;
--c-accent : #38c6ec;
Typography utility classes (apply these, do not invent new type):
.t-display fs-display fw-regular tr-display lh-display color ink
.t-body fs-body fw-regular tr-body lh-body color ink
.t-title fs-title fw-light tr-title lh-flat color ink
.t-heading fs-heading fw-semibold tr-heading lh-flat color ink
.t-eyebrow fs-eyebrow fw-light tr-eyebrow lh-flat color ink
.t-meta fs-meta fw-light tr-meta lh-flat color muted
.t-item fs-item fw-medium tr-item lh-flat color ink
.t-caption fs-caption fw-light tr-caption lh-flat color muted
.navmenu__link : fs-ui fw-medium tr-ui lh-flat color on-dark, no underline
.navmenu__cta : fs-ui fw-bold tr-cta lh-flat color on-light, no underline
════════════════════════════════════════
MEDIA — USE THESE EXACT URLS (do not substitute)
════════════════════════════════════════
Band video (REQUIRED, this exact CloudFront URL):
src="https://meez.design/web/media/ext/54a766afa9db375f.mp4"
Poster (same origin):
poster="https://meez.design/web/media/ext/24c7552d4295810b.png"
<video class="band__video" autoplay muted loop playsinline> covering the band:
position absolute; inset 0; width/height 100%; object-fit:cover; object-position:center top; z-index:0.
Band fallback color #0db5ed. Do not use a static gradient or Unsplash in place of this video.
════════════════════════════════════════
PAGE SHELL
════════════════════════════════════════
*, *::before, *::after { box-sizing:border-box }
html, body { margin:0; padding:0; height:100%; overflow:hidden; background:#fff }
#viewport { position:fixed; inset:0; overflow:hidden; background:#fff }
#stage {
position:absolute; top:0; left:0;
width:1290px; height:860px;
transform-origin:0 0; background:#fff;
}
Two nested wrappers: #viewport > #stage > all content.
════════════════════════════════════════
COPY — EXACT STRINGS AND LINE BREAKS
════════════════════════════════════════
Wordmark: Quantum<sup>2</sup> (sup: fs-sup, fw-black, relative top:-5px left:1px)
Nav links (href="#"): Product, Pricing, Blog, FAQ
Nav CTA: Download Now
Hero CTA: Get Started
h1.hero-h1.t-display (white-space:pre-line — keep this exact two-line break):
Convert Screen recording into
clear, intelligent insights
p.hero-sub.t-body (white-space:pre-line — keep this exact break):
From screen recordings to searchable knowledge, powered by quantum AI.
Skip the manual work.
Card:
eyebrow: # Project Horizon 1742m/ Strategy Sync
title: Outcome Review
meta: Today at 10:30 a.m. • 45 mins • Aligned (use <span class="sep">•</span> with padding 0 calc(var(--dp)*10))
tabs: Outcomes (active), Decisions, Action Items, Open Questions
panel heading: Key Outcomes
row1 title: Agreed on success metrics for Q3 launch
row1 owner: Owner: Product Lead
row2 title: Refined the product positioning strategy pending final approval
row2 owner: Owner: Marketing Manager
════════════════════════════════════════
LOGO SVG (exact path, fill #38c6ec)
════════════════════════════════════════
<svg class="logo" viewBox="0 0 26 25" fill="none" aria-label="Quantum squared">
<path fill-rule="evenodd" d="M9.45 24.95 L7.07 24.09 L5.56 23.30 L3.33 21.03 L2.31 19.44 L0.74 16.05 L0.27 13.91 L0.29 11.25 L0.80 8.75 L1.95 6.20 L3.26 4.50 L5.15 2.67 L7.77 1.02 L9.91 0.18 L12.16 -0.20 L15.22 -0.16 L17.61 0.35 L19.30 1.06 L20.88 2.06 L22.23 3.37 L24.01 5.48 L24.76 6.58 L25.70 8.63 L26.00 10.35 L26.02 11.35 L25.54 12.12 L24.96 12.32 L22.35 12.36 L21.46 12.18 L20.78 11.85 L20.32 11.37 L19.45 9.56 L17.88 7.58 L16.59 6.60 L14.59 5.84 L13.24 5.69 L11.54 5.93 L10.47 6.44 L9.12 7.35 L7.92 8.50 L6.70 10.55 L6.26 12.65 L6.41 14.36 L7.14 15.86 L8.63 17.79 L12.57 20.70 L12.96 21.60 L13.13 22.82 L12.93 24.36 L12.65 24.86 L12.03 25.35 L11.27 25.42 L9.45 24.95 Z M24.55 25.53 L22.49 24.77 L19.56 23.18 L18.15 22.07 L16.63 20.48 L16.14 19.79 L15.63 18.71 L14.66 15.66 L14.59 14.50 L14.75 13.92 L15.12 13.45 L15.85 13.10 L16.91 12.88 L18.90 12.85 L19.49 13.04 L19.94 13.38 L20.25 13.88 L20.86 15.66 L21.97 17.30 L23.05 18.22 L25.00 19.43 L26.05 20.27 L26.34 20.66 L26.63 21.86 L26.51 23.68 L25.79 25.10 L25.35 25.42 L24.55 25.53 Z" fill="#38c6ec"/>
</svg>
Logo box: 26×25px, absolute left:9px top:13px.
════════════════════════════════════════
DESKTOP LAYOUT (≥940px) — ABSOLUTE STAGE 1290×860
════════════════════════════════════════
Everything is absolutely placed on #stage. Design reference 1290×860.
NAV .nav
position:absolute; left:calc(50% - 439px); top:43px; width:880px; height:52px;
background:#000; border-radius:26px;
.wordmark: absolute left:40px top:2px height:52px; flex align center; fs-wordmark fw-black tr-wordmark color white; nowrap.
Nav links .nav a.link: absolute top:0 height:52px; flex align center; transform:translateX(-50%); fs-ui fw-medium tr-ui color white; no underline; nowrap.
.link.l1{left:279px} /* Product */
.link.l2{left:386.5px} /* Pricing */
.link.l3{left:483px} /* Blog */
.link.l4{left:571px} /* FAQ */
Buttons .btn: absolute; border:0; border-radius:17px; height:34px; flex center; inherit font; fs-ui tr-cta lh-flat nowrap cursor pointer no underline.
.btn--nav: left:718px; top:9px; width:153px; background:#fff; color:#000; fw-bold. Text: Download Now
.btn--hero: left:calc(50% - 64px); top:calc(388px + var(--dsk-hero-dy, 0px)); width:129px; background:#000; color:#fff; fw-medium. Text: Get Started
HERO
.hero-h1: absolute left:0 right:0 top:calc(203px + var(--dsk-hero-dy, 0px)); margin:0; text-align:center; white-space:pre-line;
.hero-sub: absolute left:0 right:0 top:calc(333px + var(--dsk-hero-dy, 0px)); margin:0; text-align:center; white-space:pre-line;
BAND .band
position:absolute; left:0; right:0; top:calc(473px + var(--dsk-band-dy, 0px)); bottom:0;
border-radius:0; overflow:hidden; background-color:#0db5ed;
Full bleed — no 9px gutter, no top radius.
CARD GEOMETRY (cannot reflow — scale via --u / --dp)
:root {
--u : 548px;
--dp : calc(var(--u) / 548);
}
.card: absolute; left:calc(50% - 273px); top:calc(549px + var(--dsk-band-dy, 0px));
width:var(--u); height:calc(var(--dp)*340);
transform:scale(var(--dsk-card-s, 1)); transform-origin:top center;
background:#f2f2f2; border-radius:calc(var(--dp)*16); overflow:hidden;
box-shadow:
0 0 0 1px rgba(255,255,255,.6),
0 0 calc(var(--dp)*9) calc(var(--dp)*3) rgba(255,255,255,.5),
0 calc(var(--dp)*22) calc(var(--dp)*64) rgba(2,72,105,.16);
Inside the card EVERY length is a multiple of --dp (design pixels of a 548×340 mockup):
.eyebrow left 19 top 21 nowrap
.cardtitle left 18 top 47 nowrap
.meta left 15 top 81 height 28
.avatars left 0 top 0 height 28
.av 28×28 circle; border max(1px, calc(var(--dp)*2)) solid #fff; background-size cover
.av1 left 0; .av2 left 11; .av3 left 22 (overlapping stack)
.clockicon left 66 top 5 14×14
.metatext left 89 top -2 height 28 flex align center nowrap
Clock SVG 14×14:
circle cx=7 cy=7 r=7 fill #d9d9d9
path d="M7 3.6V7.2l2.3 1.4" stroke #f2f2f2 stroke-width 1.3 round
Three avatars as inline SVG data-URI background-image (simple person glyphs):
av1: bg #8d6a52, head #d9a882, body #3c3a44
av2: bg #b9b3ad, head #e8c4a0, body #786f66
av3: bg #a08b7a, head #dda882, body #6b4f3f
Each: 40×40 svg rect + circle r=9 at (20,16 or 15) + ellipse cy=38 rx=14 ry=13.
TABS .tabs: left 0 right 0 top 129 height 30
.tab: absolute top 0 height 30; flex align; inherit font; fs-tab fw-light tr-tab color muted; no border/bg/padding; nowrap
.tab.is-active: left 19; padding 0 18; fw-medium; color #2e2e2e; bg white; border-radius 8 8 0 0
.tab.is-active::after: accent underline 2px (max(1px, calc(var(--dp)*2))) at bottom, inset left 12 right 13, fill #38c6ec
.t2 left 148; .t3 left 239; .t4 left 341
Tabs are visual only (Outcomes stays active). Do not implement tab switching unless asked.
PANEL .panel: left 19 top 160 width 511 height 169; bg white; border-radius 0 8 8 8
.panel__heading left 12 top 10 nowrap
.row: left 13 width 485 height 46; bg white; border 1px solid #ededed; radius 8; box-shadow 0 1px calc(var(--dp)*2) rgba(0,0,0,.03)
.row1 top 36; .row2 top 87
.dot left 7 top 7 15×15
.rowtitle left 33 top 10 nowrap
.rowowner left 33 top 27 nowrap
Row1 check (green): circle fill #2a9a30; check path "M4.1 7.15 6.05 9.05 9.9 5.2" stroke #fff 1.5 round
Row2 question (amber): circle fill #f6a825; question-mark stroke #fff 1.25 + white dot r=0.78 at (6.97,10.05)
Burger + .navmenu exist in DOM at all widths but display:none on desktop.
════════════════════════════════════════
COMPACT / MOBILE @media (max-width:939.98px), (scripting: none)
════════════════════════════════════════
Swap the scaled stage for a real CSS Grid flow. Clear any JS transform.
:root inside this query:
--page-margin : clamp(16px, 3.4vw, 34px);
--fs-display-t : clamp(31px, 3.2vw + 1.6vh, 54px);
--fs-body-t : clamp(14px, 0.9vw + 0.5vh, 16.1px);
--gap-stack : clamp(14px, 2.4vh, 26px);
--card-inset : clamp(24px, 5.5vh, 76px);
--u : max(min(280px, 90vw), min(80vw, max(calc(1039px - 50.3vw), 60vh)));
--card-h : calc(var(--dp) * 340);
--band-h : min(calc(var(--card-inset) + var(--card-h) * .9), 52vh);
html,body { overflow:hidden }
#viewport { position:fixed; inset:0; overflow:hidden }
#stage {
position:static; width:100%; height:100dvh;
transform:none !important;
display:grid; grid-template-columns:100%;
grid-template-rows:
auto
minmax(clamp(20px, 3.5vh, 44px), 1fr)
auto auto auto
minmax(clamp(16px, 2.4vh, 30px), .85fr)
minmax(0, var(--band-h));
grid-template-areas: "nav" "." "head" "sub" "cta" "." "art";
padding-top: clamp(20px, 3.4vw, 43px);
}
NAV compact:
position:relative; grid-area:nav; left/top auto; height:52px;
width:min(calc(100% - 2 * var(--page-margin)), 820px); margin:0 auto;
display:flex; align-items:center; z-index:20;
Hide .nav a.link and .btn--nav.
.logo position static; margin-left:9px; flex:none
.wordmark position static; height auto; margin-left:6px
BURGER (shown only here):
display:flex; flex-direction:column; justify-content:center; gap:5px;
margin-left:auto; margin-right:9px; width:34px; height:34px; padding:0 7px;
background none; border 0; radius 17px; cursor pointer; tap-highlight transparent
.burger__bar: block; height 2px; width 100%; bg white; radius 1px; transition transform .22s ease, opacity .22s ease
focus-visible: outline 2px solid #38c6ec offset 2px
expanded: bar1 translateY(3.5px) rotate(45deg); bar2 translateY(-3.5px) rotate(-45deg)
aria-label Open menu / Close menu; aria-expanded; aria-controls="nav-menu"
NAV MENU .navmenu (dropdown from pill):
flex column; absolute top:calc(100% + 8px) right:0; min-width:216px; padding:10px;
bg #000; radius 20px; opacity 0; transform translateY(-6px);
transition opacity .2s ease, transform .2s ease; pointer-events none
.navmenu[hidden]{ display:flex } /* hidden attr drives state, not display */
.nav.is-open .navmenu { opacity:1; transform:none; pointer-events:auto }
.navmenu__link padding 11px 14px radius 12px; hover/focus bg rgba(255,255,255,.1)
.navmenu__cta margin-top 6px; padding 11px 14px; bg #fff; radius 17px; text-align center
Links: Product Pricing Blog FAQ + Download Now
HERO compact:
.hero-h1 grid-area head; position static; margin 0 page-margin then margin-inline auto;
max-width calc(100% - 2*page-margin); font-size --fs-display-t; line-height 1.1;
white-space:pre-line; text-wrap:balance
.hero-sub grid-area sub; position static; margin var(--gap-stack) auto 0;
max-width min(52ch, calc(100% - 2*page-margin)); font-size --fs-body-t; line-height 1.45;
letter-spacing --tr-body; white-space:NORMAL (release authored break so text-wrap:balance splits evenly)
.btn--hero grid-area cta; position static; justify-self center; margin-top calc(gap-stack * 1.4); left/top auto
BAND + CARD share grid-area:art
.band: position relative; left/right/top/bottom auto; margin 0; radius 0; min-height 0
KEEP the same video covering the band (object-fit cover, object-position center top). Do not replace video with a still image.
.card: position relative; justify-self center; align-self start; margin-top var(--card-inset); transform:none
Card still sizes from --u/--dp so internals stay proportional. Card is meant to overrun the band and clip at the viewport bottom (composition, not a bug). No page scrollbar on portrait phones.
@media (max-width:479.98px) {
.hero-h1 { white-space:normal; text-wrap:balance; } /* release two-line break */
}
@media (max-height:520px) { /* landscape phones: allow scroll so card is fully in the band */
:root { --band-h: calc(var(--card-h) + 2 * var(--card-inset)); }
html,body { height:auto; min-height:100%; overflow:visible }
#viewport { position:static; overflow:visible }
#stage { height:auto; min-height:100dvh }
}
@media (scripting: none) {
.nav:hover .navmenu, .nav:focus-within .navmenu { opacity:1; transform:none; pointer-events:auto }
}
@media (prefers-reduced-motion: reduce) {
* { animation:none !important; transition:none !important }
.navmenu, .burger__bar { transition:none }
}
════════════════════════════════════════
ENTRANCE ANIMATIONS (once on load)
════════════════════════════════════════
Motion tokens:
--ease-reveal : cubic-bezier(.22, 1, .36, 1);
--ease-settle : cubic-bezier(.16, 1, .30, 1);
--dur-nav : .62s;
--dur-navitem : .5s;
--dur-head : .92s;
--dur-copy : .62s;
--dur-cta : .58s;
--dur-panel : .94s;
CRITICAL: animate the independent `translate` property, NEVER `transform` (stage scale, link -50% centering, and card scale would be overwritten). Band/video does not animate.
Head script (before first paint, in <head> after CSS):
If prefers-reduced-motion:reduce, do nothing (page shows final state).
Else document.documentElement.setAttribute('data-enter','pending').
Initial [data-enter="pending"]:
.hero-h1 clip-path: inset(0 0 100% 0)
.nav opacity 0; translate 0 -10px
.hero-sub opacity 0; translate 0 14px
.btn--hero opacity 0; translate 0 14px
.card opacity 0; translate 0 22px
.logo, .wordmark, .nav a.link, .btn--nav opacity 0
Keyframes:
enter-wipe from clip-path inset(0 0 100% 0) to inset(0 0 0% 0)
enter-drop from opacity 0 translate 0 -10px to 1 / 0
enter-rise14 from opacity 0 translate 0 14px to 1 / 0
enter-rise22 from opacity 0 translate 0 22px to 1 / 0
enter-fade from opacity 0 to 1
Timeline [data-enter="run"] animation ... both:
.nav enter-drop dur-nav ease-settle delay .05s
.logo enter-fade dur-navitem ease-settle .18s
.wordmark enter-fade .22s
.link.l1 .26s
.link.l2 .30s
.link.l3 .34s
.link.l4 .38s
.btn--nav .42s
.hero-h1 enter-wipe dur-head ease-reveal .30s
.hero-sub enter-rise14 dur-copy ease-settle .62s
.btn--hero enter-rise14 dur-cta ease-settle .78s
.card enter-rise22 dur-panel ease-settle .88s
Body script: wait document.fonts.ready, then double rAF, then set data-enter="run". Fallback start at 1200ms. On .card animationend (once) OR 3000ms timeout, set data-enter="done" (drops all entrance styles so rest state is authored CSS). Only run once.
════════════════════════════════════════
DESKTOP FIT JS (min-width: 940px)
════════════════════════════════════════
Design width DW=1290, height DH=860, CARD_TOP=549, CARD_H=340, NAV_W=880, MINW=960, HERO_SHARE=0.55.
If below 940px: clear stage transform/width/height and return (CSS grid owns layout).
Else:
vw, vh = innerWidth, innerHeight
s = min(vh/DH, vw/MINW)
W = vw/s; H = vh/s
csMax = min(NAV_W, 0.80*W) / 548
cs = max(1, min((H - CARD_TOP)/CARD_H, csMax))
dy = max(0, H - CARD_TOP - CARD_H*cs)
heroDy = HERO_SHARE * dy
stage.style.width = W+'px'; height = H+'px'; transform = 'scale('+s+')'
Set CSS vars --dsk-card-s, --dsk-band-dy (px), --dsk-hero-dy (px)
Listen: resize, orientationchange, visualViewport.resize, pageshow, fonts.ready. On desktop, force-close the burger menu.
Burger JS: toggle .nav.is-open, aria-expanded, menu.hidden. Click outside closes. Escape closes and focuses burger. Clicking a menu link closes. stopPropagation on burger click.
════════════════════════════════════════
MARKUP ORDER inside #stage
════════════════════════════════════════
1. nav.nav
logo svg, .wordmark > .wordmark__lockup Quantum<sup>2</sup>
a.link.l1–l4, a.btn.btn--nav
button.burger (two .burger__bar spans)
#nav-menu.navmenu[hidden] with 4 links + .navmenu__cta
2. h1.hero-h1.t-display
3. p.hero-sub.t-body
4. a.btn.btn--hero
5. .band[role=presentation] > video.band__video (exact CloudFront src + poster)
6. .card with eyebrow, title, meta (avatars + clock + metatext), tabs, panel (heading + two rows)
════════════════════════════════════════
DO / DO NOT
════════════════════════════════════════
DO: one HTML file; Figtree variable; exact CloudFront video+poster; 1290×860 stage + JS fit on desktop; --dp card; grid compact below 940px; clip-path wipe on headline; independent translate for motion; card bleeds off bottom of band.
DO NOT: React/Next/Tailwind unless asked; Inter/system font as primary; replace the video URL; add extra sections (footer, logos row, pricing); round type sizes; use transform for entrance motion; stretch the nav into a full-width bar on mobile; show a scrollbar on portrait phones; invent new copy.
Match desktop 1290×860 and a ~390px phone as the two acceptance views.
---
## HTML Code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
<title>Quantum² — Convert screen recording into clear, intelligent insights</title>
<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=Figtree:wght@100..900&display=block" rel="stylesheet">
<style>
:root{
--font-sans:'Figtree',-apple-system,BlinkMacSystemFont,'Segoe UI',Helvetica,Arial,sans-serif;
--fs-display : 55.7px;
--fs-title : calc(var(--dp) * 20);
--fs-heading : calc(var(--dp) * 17);
--fs-body : 16.1px;
--fs-eyebrow : calc(var(--dp) * 15.8);
--fs-ui : 15px;
--fs-meta : calc(var(--dp) * 14.3);
--fs-item : calc(var(--dp) * 12.9);
--fs-caption : calc(var(--dp) * 12.2);
--fs-tab : calc(var(--dp) * 12.1);
--fs-sup : 11.4px;
--fs-wordmark: 17.1px;
--fw-light : 388;
--fw-regular : 470;
--fw-medium : 500;
--fw-semibold : 511;
--fw-bold : 577;
--fw-black : 783;
--tr-display : -0.0572em;
--tr-title : -0.0570em;
--tr-heading : -0.0200em;
--tr-body : -0.0475em;
--tr-eyebrow : -0.0293em;
--tr-ui : -0.0080em;
--tr-cta : -0.0200em;
--tr-meta : -0.0447em;
--tr-item : -0.0287em;
--tr-caption : -0.0295em;
--tr-tab : -0.0398em;
--tr-wordmark: -0.0075em;
--lh-display : 61px;
--lh-body : 20px;
--lh-flat : 1;
--lh-display-ratio : 1.1;
--lh-body-ratio : 1.45;
--c-ink : #000000;
--c-ink-soft : #2e2e2e;
--c-muted : #b8b8b8;
--c-on-dark : #ffffff;
--c-on-light : #000000;
--c-surface-nav : #000000;
--c-surface-card : #f2f2f2;
--c-surface-panel : #ffffff;
--c-border-row : #ededed;
--c-accent : #38c6ec;
--u : 548px;
--dp : calc(var(--u) / 548);
--ease-reveal : cubic-bezier(.22, 1, .36, 1);
--ease-settle : cubic-bezier(.16, 1, .30, 1);
--dur-nav : .62s;
--dur-navitem : .5s;
--dur-head : .92s;
--dur-copy : .62s;
--dur-cta : .58s;
--dur-panel : .94s;
}
.navmenu__link{
font-size:var(--fs-ui); font-weight:var(--fw-medium);
letter-spacing:var(--tr-ui); line-height:var(--lh-flat);
color:var(--c-on-dark); text-decoration:none;
}
.navmenu__cta{
font-size:var(--fs-ui); font-weight:var(--fw-bold);
letter-spacing:var(--tr-cta); line-height:var(--lh-flat);
color:var(--c-on-light); text-decoration:none;
}
.t-display{ font-size:var(--fs-display); font-weight:var(--fw-regular);
letter-spacing:var(--tr-display); line-height:var(--lh-display); color:var(--c-ink); }
.t-body { font-size:var(--fs-body); font-weight:var(--fw-regular);
letter-spacing:var(--tr-body); line-height:var(--lh-body); color:var(--c-ink); }
.t-title { font-size:var(--fs-title); font-weight:var(--fw-light);
letter-spacing:var(--tr-title); line-height:var(--lh-flat); color:var(--c-ink); }
.t-heading{ font-size:var(--fs-heading); font-weight:var(--fw-semibold);
letter-spacing:var(--tr-heading); line-height:var(--lh-flat); color:var(--c-ink); }
.t-eyebrow{ font-size:var(--fs-eyebrow); font-weight:var(--fw-light);
letter-spacing:var(--tr-eyebrow); line-height:var(--lh-flat); color:var(--c-ink); }
.t-meta { font-size:var(--fs-meta); font-weight:var(--fw-light);
letter-spacing:var(--tr-meta); line-height:var(--lh-flat); color:var(--c-muted); }
.t-item { font-size:var(--fs-item); font-weight:var(--fw-medium);
letter-spacing:var(--tr-item); line-height:var(--lh-flat); color:var(--c-ink); }
.t-caption{ font-size:var(--fs-caption); font-weight:var(--fw-light);
letter-spacing:var(--tr-caption); line-height:var(--lh-flat); color:var(--c-muted); }
*,*::before,*::after{box-sizing:border-box;}
html,body{margin:0;padding:0;height:100%;overflow:hidden;background:#fff;}
body{
font-family:var(--font-sans);
-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
text-rendering:geometricPrecision;
}
#viewport{position:fixed;inset:0;overflow:hidden;background:#fff;}
#stage{
position:absolute;top:0;left:0;
width:1290px;
height:860px;
transform-origin:0 0;
background:#fff;
}
.nav{
position:absolute;left:calc(50% - 439px);top:43px;width:880px;height:52px;
background:var(--c-surface-nav);border-radius:26px;
}
.logo{position:absolute;left:9px;top:13px;width:26px;height:25px;display:block;}
.wordmark{
position:absolute;left:40px;top:2px;height:52px;
display:flex;align-items:center;
font-size:var(--fs-wordmark);font-weight:var(--fw-black);
letter-spacing:var(--tr-wordmark);color:var(--c-on-dark);
line-height:var(--lh-flat);white-space:nowrap;
}
.wordmark sup{
font-size:var(--fs-sup);font-weight:var(--fw-black);
position:relative;top:-5px;left:1px;letter-spacing:0;vertical-align:baseline;
}
.nav a.link{
position:absolute;top:0;height:52px;display:flex;align-items:center;
transform:translateX(-50%);
font-size:var(--fs-ui);font-weight:var(--fw-medium);letter-spacing:var(--tr-ui);
color:var(--c-on-dark);line-height:var(--lh-flat);
text-decoration:none;white-space:nowrap;
}
.link.l1{left:279px;}
.link.l2{left:386.5px;}
.link.l3{left:483px;}
.link.l4{left:571px;}
.btn{
position:absolute;border:0;border-radius:17px;height:34px;
display:flex;align-items:center;justify-content:center;
font-family:inherit;font-size:var(--fs-ui);letter-spacing:var(--tr-cta);
line-height:var(--lh-flat);white-space:nowrap;cursor:pointer;text-decoration:none;
}
.btn--nav {left:718px;top:9px;width:153px;background:#fff;color:var(--c-on-light);
font-weight:var(--fw-bold);}
.btn--hero{left:calc(50% - 64px);top:calc(388px + var(--dsk-hero-dy, 0px));width:129px;background:#000;color:var(--c-on-dark);
font-weight:var(--fw-medium);}
.hero-h1 {position:absolute;left:0;right:0;top:calc(203px + var(--dsk-hero-dy, 0px));margin:0;text-align:center;white-space:pre-line;}
.hero-sub{position:absolute;left:0;right:0;top:calc(333px + var(--dsk-hero-dy, 0px));margin:0;text-align:center;white-space:pre-line;}
.band{
position:absolute;left:0;right:0;top:calc(473px + var(--dsk-band-dy, 0px));bottom:0;
border-radius:0;overflow:hidden;
background-color:#0db5ed;
background-repeat:no-repeat;
background-position:center top;
background-size:cover;
}
.band__video{
position:absolute;inset:0;width:100%;height:100%;
object-fit:cover;object-position:center top;z-index:0;
}
.card{
position:absolute;left:calc(50% - 273px);top:calc(549px + var(--dsk-band-dy, 0px));
width:var(--u);height:calc(var(--dp) * 340);
transform:scale(var(--dsk-card-s, 1));transform-origin:top center;
background:var(--c-surface-card);border-radius:calc(var(--dp) * 16);
box-shadow:0 0 0 1px rgba(255,255,255,.6),
0 0 calc(var(--dp) * 9) calc(var(--dp) * 3) rgba(255,255,255,.5),
0 calc(var(--dp) * 22) calc(var(--dp) * 64) rgba(2,72,105,.16);
overflow:hidden;
}
.eyebrow {position:absolute;left:calc(var(--dp) * 19);top:calc(var(--dp) * 21);margin:0;white-space:nowrap;}
.cardtitle{position:absolute;left:calc(var(--dp) * 18);top:calc(var(--dp) * 47);margin:0;white-space:nowrap;}
.meta{position:absolute;left:calc(var(--dp) * 15);top:calc(var(--dp) * 81);height:calc(var(--dp) * 28);}
.avatars{position:absolute;left:0;top:0;height:calc(var(--dp) * 28);}
.av{
position:absolute;top:0;width:calc(var(--dp) * 28);height:calc(var(--dp) * 28);border-radius:50%;
border:max(1px, calc(var(--dp) * 2)) solid #ffffff;background-size:cover;background-position:center;
}
.av1{left:0;} .av2{left:calc(var(--dp) * 11);} .av3{left:calc(var(--dp) * 22);}
.clockicon{position:absolute;left:calc(var(--dp) * 66);top:calc(var(--dp) * 5);width:calc(var(--dp) * 14);height:calc(var(--dp) * 14);}
.metatext{position:absolute;left:calc(var(--dp) * 89);top:calc(var(--dp) * -2);height:calc(var(--dp) * 28);display:flex;align-items:center;white-space:nowrap;}
.metatext .sep{padding:0 calc(var(--dp) * 10);}
.tabs{position:absolute;left:0;right:0;top:calc(var(--dp) * 129);height:calc(var(--dp) * 30);}
.tab{
position:absolute;top:0;height:calc(var(--dp) * 30);display:flex;align-items:center;
font-family:inherit;font-size:var(--fs-tab);font-weight:var(--fw-light);
letter-spacing:var(--tr-tab);line-height:var(--lh-flat);color:var(--c-muted);
white-space:nowrap;cursor:pointer;background:none;border:0;padding:0;
}
.tab.is-active{
left:calc(var(--dp) * 19);padding:0 calc(var(--dp) * 18);
font-weight:var(--fw-medium);color:var(--c-ink-soft);
background:var(--c-surface-panel);border-radius:calc(var(--dp) * 8) calc(var(--dp) * 8) 0 0;
}
.tab.is-active::after{
content:"";position:absolute;left:calc(var(--dp) * 12);right:calc(var(--dp) * 13);bottom:0;
height:max(1px, calc(var(--dp) * 2));background:var(--c-accent);
}
.t2{left:calc(var(--dp) * 148);} .t3{left:calc(var(--dp) * 239);} .t4{left:calc(var(--dp) * 341);}
.panel{
position:absolute;left:calc(var(--dp) * 19);top:calc(var(--dp) * 160);
width:calc(var(--dp) * 511);height:calc(var(--dp) * 169);
background:var(--c-surface-panel);border-radius:0 calc(var(--dp) * 8) calc(var(--dp) * 8) calc(var(--dp) * 8);
}
.panel__heading{position:absolute;left:calc(var(--dp) * 12);top:calc(var(--dp) * 10);margin:0;white-space:nowrap;}
.row{
position:absolute;left:calc(var(--dp) * 13);width:calc(var(--dp) * 485);height:calc(var(--dp) * 46);
background:var(--c-surface-panel);border:1px solid var(--c-border-row);
border-radius:calc(var(--dp) * 8);box-shadow:0 1px calc(var(--dp) * 2) rgba(0,0,0,.03);
}
.row1{top:calc(var(--dp) * 36);} .row2{top:calc(var(--dp) * 87);}
.dot{position:absolute;left:calc(var(--dp) * 7);top:calc(var(--dp) * 7);width:calc(var(--dp) * 15);height:calc(var(--dp) * 15);}
.rowtitle{position:absolute;left:calc(var(--dp) * 33);top:calc(var(--dp) * 10);white-space:nowrap;}
.rowowner{position:absolute;left:calc(var(--dp) * 33);top:calc(var(--dp) * 27);white-space:nowrap;}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important;}}
.burger,
.navmenu{ display:none; }
@media (max-width:939.98px), (scripting: none){
:root{
--page-margin : clamp(16px, 3.4vw, 34px);
--fs-display-t : clamp(31px, 3.2vw + 1.6vh, 54px);
--fs-body-t : clamp(14px, 0.9vw + 0.5vh, 16.1px);
--gap-stack : clamp(14px, 2.4vh, 26px);
--card-inset : clamp(24px, 5.5vh, 76px);
--u : max(min(280px, 90vw),
min(80vw,
max(calc(1039px - 50.3vw), 60vh)));
--card-h : calc(var(--dp) * 340);
--band-h : min(calc(var(--card-inset) + var(--card-h) * .9), 52vh);
}
html,body{ overflow:hidden; }
#viewport{ position:fixed; inset:0; overflow:hidden; }
#stage{
position:static;
width:100%;
height:100dvh;
transform:none !important;
display:grid;
grid-template-columns:100%;
grid-template-rows:
auto
minmax(clamp(20px, 3.5vh, 44px), 1fr)
auto auto auto
minmax(clamp(16px, 2.4vh, 30px), .85fr)
minmax(0, var(--band-h));
grid-template-areas:"nav" "." "head" "sub" "cta" "." "art";
padding-top:clamp(20px, 3.4vw, 43px);
}
.nav{
position:relative;
grid-area:nav;
left:auto; top:auto;
height:52px;
width:min(calc(100% - 2 * var(--page-margin)), 820px);
margin:0 auto;
display:flex; align-items:center;
z-index:20;
}
.nav a.link,
.btn--nav{ display:none; }
.logo{ position:static; margin-left:9px; flex:none; }
.wordmark{ position:static; height:auto; margin-left:6px; }
.burger{
display:flex; flex-direction:column; justify-content:center;
gap:5px;
margin-left:auto; margin-right:9px;
width:34px; height:34px;
padding:0 7px;
background:none; border:0; border-radius:17px;
cursor:pointer;
-webkit-tap-highlight-color:transparent;
}
.burger__bar{
display:block; height:2px; width:100%;
background:var(--c-on-dark); border-radius:1px;
transition:transform .22s ease, opacity .22s ease;
}
.burger:focus-visible{ outline:2px solid var(--c-accent); outline-offset:2px; }
.burger[aria-expanded="true"] .burger__bar:nth-child(1){ transform:translateY(3.5px) rotate(45deg); }
.burger[aria-expanded="true"] .burger__bar:nth-child(2){ transform:translateY(-3.5px) rotate(-45deg); }
.navmenu{
display:flex; flex-direction:column;
position:absolute; top:calc(100% + 8px); right:0;
min-width:216px;
padding:10px;
background:var(--c-surface-nav);
border-radius:20px;
opacity:0; transform:translateY(-6px);
transition:opacity .2s ease, transform .2s ease;
pointer-events:none;
}
.navmenu[hidden]{ display:flex; }
.nav.is-open .navmenu{ opacity:1; transform:none; pointer-events:auto; }
.navmenu__link{
padding:11px 14px;
border-radius:12px;
}
.navmenu__link:hover,
.navmenu__link:focus-visible{ background:rgba(255,255,255,.1); outline:none; }
.navmenu__cta{
margin-top:6px;
padding:11px 14px;
background:#fff;
border-radius:17px; text-align:center;
}
.hero-h1{
position:static; grid-area:head;
margin:0 var(--page-margin);
max-width:calc(100% - 2 * var(--page-margin));
margin-inline:auto;
font-size:var(--fs-display-t);
line-height:var(--lh-display-ratio);
white-space:pre-line;
text-wrap:balance;
}
.hero-sub{
position:static; grid-area:sub;
margin:var(--gap-stack) auto 0;
max-width:min(52ch, calc(100% - 2 * var(--page-margin)));
font-size:var(--fs-body-t);
line-height:var(--lh-body-ratio);
letter-spacing:var(--tr-body);
white-space:normal;
text-wrap:balance;
}
.btn--hero{
position:static; grid-area:cta;
justify-self:center;
margin-top:calc(var(--gap-stack) * 1.4);
left:auto; top:auto;
}
.band{
position:relative; grid-area:art;
left:auto; right:auto; top:auto; bottom:auto;
margin:0;
border-radius:0;
min-height:0;
}
.card{
position:relative; grid-area:art;
left:auto; top:auto;
justify-self:center; align-self:start;
margin-top:var(--card-inset);
transform:none;
}
@media (max-width:479.98px){
.hero-h1{
white-space:normal;
text-wrap:balance;
}
}
@media (max-height:520px){
:root{ --band-h: calc(var(--card-h) + 2 * var(--card-inset)); }
html,body{ height:auto; min-height:100%; overflow:visible; }
#viewport{ position:static; overflow:visible; }
#stage{ height:auto; min-height:100dvh; }
}
@media (scripting: none){
.nav:hover .navmenu,
.nav:focus-within .navmenu{ opacity:1; transform:none; pointer-events:auto; }
}
@media (prefers-reduced-motion:reduce){
.navmenu,.burger__bar{ transition:none; }
}
}
[data-enter="pending"] .hero-h1 { clip-path:inset(0 0 100% 0); }
[data-enter="pending"] .nav { opacity:0; translate:0 -10px; }
[data-enter="pending"] .hero-sub { opacity:0; translate:0 14px; }
[data-enter="pending"] .btn--hero { opacity:0; translate:0 14px; }
[data-enter="pending"] .card { opacity:0; translate:0 22px; }
[data-enter="pending"] .logo,
[data-enter="pending"] .wordmark,
[data-enter="pending"] .nav a.link,
[data-enter="pending"] .btn--nav { opacity:0; }
@keyframes enter-wipe { from{ clip-path:inset(0 0 100% 0); } to{ clip-path:inset(0 0 0% 0); } }
@keyframes enter-drop { from{ opacity:0; translate:0 -10px; } to{ opacity:1; translate:0 0; } }
@keyframes enter-rise14 { from{ opacity:0; translate:0 14px; } to{ opacity:1; translate:0 0; } }
@keyframes enter-rise22 { from{ opacity:0; translate:0 22px; } to{ opacity:1; translate:0 0; } }
@keyframes enter-fade { from{ opacity:0; } to{ opacity:1; } }
[data-enter="run"] .nav{
animation:enter-drop var(--dur-nav) var(--ease-settle) .05s both;
}
[data-enter="run"] .logo { animation:enter-fade var(--dur-navitem) var(--ease-settle) .18s both; }
[data-enter="run"] .wordmark { animation:enter-fade var(--dur-navitem) var(--ease-settle) .22s both; }
[data-enter="run"] .link.l1 { animation:enter-fade var(--dur-navitem) var(--ease-settle) .26s both; }
[data-enter="run"] .link.l2 { animation:enter-fade var(--dur-navitem) var(--ease-settle) .30s both; }
[data-enter="run"] .link.l3 { animation:enter-fade var(--dur-navitem) var(--ease-settle) .34s both; }
[data-enter="run"] .link.l4 { animation:enter-fade var(--dur-navitem) var(--ease-settle) .38s both; }
[data-enter="run"] .btn--nav { animation:enter-fade var(--dur-navitem) var(--ease-settle) .42s both; }
[data-enter="run"] .hero-h1 { animation:enter-wipe var(--dur-head) var(--ease-reveal) .30s both; }
[data-enter="run"] .hero-sub { animation:enter-rise14 var(--dur-copy) var(--ease-settle) .62s both; }
[data-enter="run"] .btn--hero { animation:enter-rise14 var(--dur-cta) var(--ease-settle) .78s both; }
[data-enter="run"] .card { animation:enter-rise22 var(--dur-panel) var(--ease-settle) .88s both; }
</style>
<script>
(function(){
try{
if (matchMedia('(prefers-reduced-motion: reduce)').matches) return;
document.documentElement.setAttribute('data-enter','pending');
}catch(e){}
})();
</script>
</head>
<body>
<div id="viewport">
<div id="stage">
<nav class="nav">
<svg class="logo" viewBox="0 0 26 25" fill="none" aria-label="Quantum squared">
<path fill-rule="evenodd" d="M9.45 24.95 L7.07 24.09 L5.56 23.30 L3.33 21.03 L2.31 19.44 L0.74 16.05 L0.27 13.91 L0.29 11.25 L0.80 8.75 L1.95 6.20 L3.26 4.50 L5.15 2.67 L7.77 1.02 L9.91 0.18 L12.16 -0.20 L15.22 -0.16 L17.61 0.35 L19.30 1.06 L20.88 2.06 L22.23 3.37 L24.01 5.48 L24.76 6.58 L25.70 8.63 L26.00 10.35 L26.02 11.35 L25.54 12.12 L24.96 12.32 L22.35 12.36 L21.46 12.18 L20.78 11.85 L20.32 11.37 L19.45 9.56 L17.88 7.58 L16.59 6.60 L14.59 5.84 L13.24 5.69 L11.54 5.93 L10.47 6.44 L9.12 7.35 L7.92 8.50 L6.70 10.55 L6.26 12.65 L6.41 14.36 L7.14 15.86 L8.63 17.79 L12.57 20.70 L12.96 21.60 L13.13 22.82 L12.93 24.36 L12.65 24.86 L12.03 25.35 L11.27 25.42 L9.45 24.95 Z M24.55 25.53 L22.49 24.77 L19.56 23.18 L18.15 22.07 L16.63 20.48 L16.14 19.79 L15.63 18.71 L14.66 15.66 L14.59 14.50 L14.75 13.92 L15.12 13.45 L15.85 13.10 L16.91 12.88 L18.90 12.85 L19.49 13.04 L19.94 13.38 L20.25 13.88 L20.86 15.66 L21.97 17.30 L23.05 18.22 L25.00 19.43 L26.05 20.27 L26.34 20.66 L26.63 21.86 L26.51 23.68 L25.79 25.10 L25.35 25.42 L24.55 25.53 Z" fill="#38c6ec"/>
</svg>
<div class="wordmark"><span class="wordmark__lockup">Quantum<sup>2</sup></span></div>
<a class="link l1" href="#">Product</a>
<a class="link l2" href="#">Pricing</a>
<a class="link l3" href="#">Blog</a>
<a class="link l4" href="#">FAQ</a>
<a class="btn btn--nav" href="#">Download Now</a>
<button class="burger" type="button" aria-label="Open menu"
aria-expanded="false" aria-controls="nav-menu">
<span class="burger__bar"></span>
<span class="burger__bar"></span>
</button>
<div class="navmenu" id="nav-menu" hidden>
<a class="navmenu__link" href="#">Product</a>
<a class="navmenu__link" href="#">Pricing</a>
<a class="navmenu__link" href="#">Blog</a>
<a class="navmenu__link" href="#">FAQ</a>
<a class="navmenu__cta" href="#">Download Now</a>
</div>
</nav>
<h1 class="hero-h1 t-display">Convert Screen recording into
clear, intelligent insights</h1>
<p class="hero-sub t-body">From screen recordings to searchable knowledge, powered by quantum AI.
Skip the manual work.</p>
<a class="btn btn--hero" href="#">Get Started</a>
<div class="band" role="presentation">
<video class="band__video" src="https://meez.design/web/media/ext/54a766afa9db375f.mp4" autoplay muted loop playsinline poster="https://meez.design/web/media/ext/24c7552d4295810b.png"></video>
</div>
<div class="card">
<p class="eyebrow t-eyebrow"># Project Horizon 1742m/ Strategy Sync</p>
<p class="cardtitle t-title">Outcome Review</p>
<div class="meta">
<div class="avatars">
<span class="av av1" style="background-image:url('data:image/svg+xml;utf8,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 40 40%22><rect width=%2240%22 height=%2240%22 fill=%22%238d6a52%22/><circle cx=%2220%22 cy=%2216%22 r=%229%22 fill=%22%23d9a882%22/><ellipse cx=%2220%22 cy=%2238%22 rx=%2214%22 ry=%2213%22 fill=%22%233c3a44%22/></svg>')"></span>
<span class="av av2" style="background-image:url('data:image/svg+xml;utf8,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 40 40%22><rect width=%2240%22 height=%2240%22 fill=%22%23b9b3ad%22/><circle cx=%2220%22 cy=%2215%22 r=%229%22 fill=%22%23e8c4a0%22/><ellipse cx=%2220%22 cy=%2238%22 rx=%2214%22 ry=%2213%22 fill=%22%23786f66%22/></svg>')"></span>
<span class="av av3" style="background-image:url('data:image/svg+xml;utf8,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 40 40%22><rect width=%2240%22 height=%2240%22 fill=%22%23a08b7a%22/><circle cx=%2220%22 cy=%2216%22 r=%229%22 fill=%22%23dda882%22/><ellipse cx=%2220%22 cy=%2238%22 rx=%2214%22 ry=%2213%22 fill=%22%236b4f3f%22/></svg>')"></span>
</div>
<svg class="clockicon" viewBox="0 0 14 14" fill="none">
<circle cx="7" cy="7" r="7" fill="#d9d9d9"/>
<path d="M7 3.6V7.2l2.3 1.4" stroke="#f2f2f2" stroke-width="1.3" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
<div class="metatext t-meta">Today at 10:30 a.m.<span class="sep">•</span>45 mins<span class="sep">•</span>Aligned</div>
</div>
<div class="tabs">
<button class="tab is-active">Outcomes</button>
<button class="tab t2">Decisions</button>
<button class="tab t3">Action Items</button>
<button class="tab t4">Open Questions</button>
</div>
<div class="panel">
<h3 class="panel__heading t-heading">Key Outcomes</h3>
<div class="row row1">
<svg class="dot" viewBox="0 0 14 14" fill="none">
<circle cx="7" cy="7" r="7" fill="#2a9a30"/>
<path d="M4.1 7.15 6.05 9.05 9.9 5.2" stroke="#fff" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
<div class="rowtitle t-item">Agreed on success metrics for Q3 launch</div>
<div class="rowowner t-caption">Owner: Product Lead</div>
</div>
<div class="row row2">
<svg class="dot" viewBox="0 0 14 14" fill="none">
<circle cx="7" cy="7" r="7" fill="#f6a825"/>
<path d="M5.4 5.25c0-.9.72-1.55 1.62-1.55.92 0 1.6.6 1.6 1.45 0 .72-.4 1.1-1.02 1.5-.5.32-.63.55-.63 1.02v.3" stroke="#fff" stroke-width="1.25" stroke-linecap="round"/>
<circle cx="6.97" cy="10.05" r="0.78" fill="#fff"/>
</svg>
<div class="rowtitle t-item">Refined the product positioning strategy pending final approval</div>
<div class="rowowner t-caption">Owner: Marketing Manager</div>
</div>
</div>
</div>
</div>
</div>
<script>
(function(){
var root = document.documentElement;
if (root.getAttribute('data-enter') !== 'pending') return;
var started = false, finished = false;
function finish(){
if (finished) return;
finished = true;
root.setAttribute('data-enter','done');
}
function start(){
if (started) return;
started = true;
root.setAttribute('data-enter','run');
var last = document.querySelector('.card');
if (last) last.addEventListener('animationend', finish, {once:true});
setTimeout(finish, 3000);
}
var go = function(){ requestAnimationFrame(function(){ requestAnimationFrame(start); }); };
if (document.fonts && document.fonts.ready) document.fonts.ready.then(go, go);
else addEventListener('load', go);
setTimeout(start, 1200);
})();
(function(){
var DW = 1290;
var DH = 860;
var stage = document.getElementById('stage');
var desktop = window.matchMedia('(min-width:940px)');
var CARD_TOP = 549, CARD_H = 340;
var NAV_W = 880;
var MINW = 960;
var HERO_SHARE = 0.55;
function fit(){
if(!desktop.matches){
stage.style.transform = '';
stage.style.height = '';
stage.style.width = '';
return;
}
var vw = window.innerWidth, vh = window.innerHeight;
var s = Math.min(vh / DH, vw / MINW);
var W = vw / s;
var H = vh / s;
var csMax = Math.min(NAV_W, 0.80 * W) / 548;
var cs = Math.max(1, Math.min((H - CARD_TOP) / CARD_H, csMax));
var dy = Math.max(0, H - CARD_TOP - CARD_H * cs);
var heroDy = HERO_SHARE * dy;
stage.style.width = W + 'px';
stage.style.height = H + 'px';
stage.style.transform = 'scale(' + s + ')';
var root = document.documentElement.style;
root.setProperty('--dsk-card-s', String(cs));
root.setProperty('--dsk-band-dy', dy + 'px');
root.setProperty('--dsk-hero-dy', heroDy + 'px');
}
var nav = document.querySelector('.nav');
var burger = document.querySelector('.burger');
var menu = document.getElementById('nav-menu');
function setMenu(open){
nav.classList.toggle('is-open', open);
burger.setAttribute('aria-expanded', String(open));
burger.setAttribute('aria-label', open ? 'Close menu' : 'Open menu');
menu.hidden = !open;
}
if(burger){
burger.addEventListener('click', function(e){
e.stopPropagation();
setMenu(burger.getAttribute('aria-expanded') !== 'true');
});
document.addEventListener('click', function(e){
if(nav.classList.contains('is-open') && !nav.contains(e.target)) setMenu(false);
});
document.addEventListener('keydown', function(e){
if(e.key === 'Escape' && nav.classList.contains('is-open')){
setMenu(false); burger.focus();
}
});
menu.addEventListener('click', function(e){
if(e.target.closest('a')) setMenu(false);
});
}
function onResize(){
fit();
if(desktop.matches) setMenu(false);
}
onResize();
window.addEventListener('resize', onResize, {passive:true});
window.addEventListener('orientationchange', onResize, {passive:true});
if (window.visualViewport) window.visualViewport.addEventListener('resize', onResize, {passive:true});
window.addEventListener('pageshow', onResize, {passive:true});
if (document.fonts && document.fonts.ready) document.fonts.ready.then(onResize);
})();
</script>
</body>
</html>
Rare GalleryCurated · free prompt · copy-paste
Build a single-page luxury brand landing (navbar + full-viewport hero only). Stack: React 18 + TypeScript + Vite + Tailwind CSS 3. No extra UI kits. Use lucide-react only for the Flower2 icon. Page title: Aurevon. Root wrapper: bg-black. html, body { overflow-x: hidden }. Global reset: margin: 0; padding: 0; box-sizing: border-box.
Fonts Load Google Fonts exactly:
https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&display=swap
Utility: .font-instrument { font-family: 'Instrument Serif', serif; }
Use Instrument Serif only for the hero H1 and overlay nav links. Logo, nav pill, body copy, and CTA use Tailwind’s default sans (ui-sans-serif, system-ui, …).
Easing (reuse everywhere)
Entrance: cubic-bezier(0.16, 1, 0.3, 1)
Menu overlay / hamburger morph: cubic-bezier(0.76, 0, 0.24, 1)
NAVBAR (fixed)
Fixed top-0 left-0 w-full z-50. Transparent until window.scrollY > 40, then bg-black/80 backdrop-blur-md. Transition: duration-500.
Inner bar: max-w-[1440px] mx-auto px-6 md:px-10 flex items-center justify-between h-16 md:h-20.
Left — logo
Text link “Aurevon”, text-white text-xl md:text-2xl font-semibold tracking-tight z-50.
Center — desktop only (hidden md:flex)
Pill button: px-5 py-2 rounded-full border border-white/20 text-white/90 text-sm hover:bg-white/10, items-center gap-2. Label Navigate when closed, Close when overlay is open. Toggles overlay.
Right — desktop only (hidden md:flex)
Flower2 from lucide-react: w-7 h-7 text-white/90.
Right — mobile (md:hidden)
Hamburger w-8 h-8, flex-col items-center justify-center gap-1.5, aria-label="Toggle menu". Two bars: w-6 h-[2px] bg-white. When open: top bar rotate-45 translate-y-[4px], bottom -rotate-45 -translate-y-[4px]. Morph duration-500 with overlay easing.
Navbar entrance (on load)
After 100ms, set mounted. Elements start opacity-0 -translate-y-4, end opacity-100 translate-y-0. duration-700 + entrance easing. Delays when mounted: logo 0ms, Navigate/hamburger 200ms, flower 400ms.
When overlay is open, set document.body.style.overflow = 'hidden'; restore on close.
FULL-SCREEN OVERLAY MENU
fixed inset-0 z-40 bg-black (under navbar z-50). Closed: opacity-0 invisible. Open: opacity-100 visible. Transition duration-700 + overlay easing. Center content: flex flex-col items-center justify-center.
Links, stacked gap-8, centered:
Home
Story
Collection
Inquire
Each: href="#", text-white font-instrument text-4xl md:text-6xl hover:opacity-60. Closed: opacity-0 translate-y-6. Open: opacity-100 translate-y-0. Duration 600ms, overlay easing. Stagger when opening: 150 + index * 80 ms (Home 150, Story 230, Collection 310, Inquire 390). Delay 0 when closing. Clicking a link closes the overlay.
HERO (full viewport)
<section class="relative w-full h-screen overflow-hidden flex items-end justify-center">
Background video (must be this exact URL)
https://meez.design/web/media/ext/098ffe06644e148a.mp4
Wrapper: absolute inset-0. Starts scale-105 opacity-0, after 300ms mounted becomes scale-100 opacity-100. Transition duration-[1400ms] + entrance easing.
<video>: that src, autoPlay muted loop playsInline, class="w-full h-full object-cover". No overlay gradient. Video is the only background.
Foreground (bottom-centered)
relative z-10 text-center px-6 pb-16 md:pb-24 max-w-4xl mx-auto
H1 (Instrument Serif):
font-instrument text-white text-[2.5rem] leading-[0.95] sm:text-5xl md:text-6xl lg:text-7xl mb-5 md:mb-6
Exact copy, with a line break only from sm up:
A carefully curated<br class="hidden sm:block" /> collection beyond compare
On mobile it is one wrapping line; from sm it is two lines: “A carefully curated” then “collection beyond compare”.
Subcopy
text-white/70 text-base md:text-lg mb-8 md:mb-10 max-w-md mx-auto
Copy: Reserve your place in our private gallery.
CTA
<a href="#"> “Join the waitlist”
inline-block px-8 py-3.5 bg-white text-black text-sm md:text-base font-medium rounded-full hover:bg-white/90
Hero text/CTA entrance
All three start opacity-0 translate-y-8, end opacity-100 translate-y-0. duration-900 + entrance easing. Mounted after 300ms, then delays: H1 400ms, subcopy 600ms, CTA 800ms. Delay 0 before mounted.
RESPONSIVE CHECKLIST (must match)
Breakpoint Behavior
Default / mobile
Nav height 64px, padding-x 24px. Hamburger only (no Navigate pill, no flower). Hero padding-bottom 64px. H1 2.5rem / line-height 0.95, no forced H1 break. Subcopy text-base, CTA text-sm. Overlay links text-4xl.
sm (640px)
H1 text-5xl; H1 line break appears.
md (768px)
Nav height 80px, padding-x 40px. Desktop: logo | Navigate pill | flower. Overlay links text-6xl. Hero pb-24. H1 text-6xl, mb-6. Subcopy text-lg, mb-10. CTA text-base.
lg (1024px)
H1 text-7xl.
No other sections, footer, or extra chrome. No video controls, no poster, no extra color overlays. Recreate navbar + hero pixel-faithful to these classes, timings, copy, and the CloudFront URL above.
---
## HTML Code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Aurevon</title>
<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=Instrument+Serif:ital@0;1&display=swap" rel="stylesheet" />
<style>
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html, body { overflow-x: hidden; }
body {
background: #000;
font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}
body.menu-open { overflow: hidden; }
.font-instrument { font-family: "Instrument Serif", serif; }
/* ——— Navbar ——— */
.nav {
position: fixed;
top: 0;
left: 0;
width: 100%;
z-index: 50;
background: transparent;
transition: background-color 500ms, backdrop-filter 500ms, -webkit-backdrop-filter 500ms;
}
.nav.scrolled {
background: rgba(0, 0, 0, 0.8);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
}
.nav-inner {
max-width: 1440px;
margin: 0 auto;
padding: 0 1.5rem;
display: flex;
align-items: center;
justify-content: space-between;
height: 4rem;
}
.logo {
color: #fff;
font-size: 1.25rem;
font-weight: 600;
letter-spacing: -0.025em;
text-decoration: none;
z-index: 50;
opacity: 0;
transform: translateY(-1rem);
transition: opacity 700ms cubic-bezier(0.16, 1, 0.3, 1), transform 700ms cubic-bezier(0.16, 1, 0.3, 1);
}
.nav-mounted .logo {
opacity: 1;
transform: translateY(0);
}
.nav-pill {
display: none;
align-items: center;
gap: 0.5rem;
padding: 0.5rem 1.25rem;
border-radius: 9999px;
border: 1px solid rgba(255, 255, 255, 0.2);
background: transparent;
color: rgba(255, 255, 255, 0.9);
font-size: 0.875rem;
font-family: inherit;
cursor: pointer;
opacity: 0;
transform: translateY(-1rem);
transition: opacity 700ms cubic-bezier(0.16, 1, 0.3, 1), transform 700ms cubic-bezier(0.16, 1, 0.3, 1), background-color 700ms cubic-bezier(0.16, 1, 0.3, 1);
}
.nav-mounted .nav-pill {
opacity: 1;
transform: translateY(0);
transition-delay: 200ms, 200ms, 0ms;
}
.nav-pill:hover { background: rgba(255, 255, 255, 0.1); }
.nav-flower {
display: none;
align-items: center;
z-index: 50;
opacity: 0;
transform: translateY(-1rem);
transition: opacity 700ms cubic-bezier(0.16, 1, 0.3, 1), transform 700ms cubic-bezier(0.16, 1, 0.3, 1);
}
.nav-mounted .nav-flower {
opacity: 1;
transform: translateY(0);
transition-delay: 400ms;
}
.nav-flower svg {
width: 1.75rem;
height: 1.75rem;
color: rgba(255, 255, 255, 0.9);
}
.hamburger {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 0.375rem;
width: 2rem;
height: 2rem;
z-index: 50;
position: relative;
background: none;
border: none;
cursor: pointer;
opacity: 0;
transform: translateY(-1rem);
transition: opacity 700ms cubic-bezier(0.16, 1, 0.3, 1), transform 700ms cubic-bezier(0.16, 1, 0.3, 1);
}
.nav-mounted .hamburger {
opacity: 1;
transform: translateY(0);
transition-delay: 200ms;
}
.hamburger span {
display: block;
width: 1.5rem;
height: 2px;
background: #fff;
transition: transform 500ms cubic-bezier(0.76, 0, 0.24, 1);
}
.hamburger.open span:first-child { transform: rotate(45deg) translateY(4px); }
.hamburger.open span:last-child { transform: rotate(-45deg) translateY(-4px); }
/* ——— Overlay ——— */
.overlay {
position: fixed;
inset: 0;
z-index: 40;
background: #000;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
opacity: 0;
visibility: hidden;
transition: opacity 700ms cubic-bezier(0.76, 0, 0.24, 1), visibility 700ms cubic-bezier(0.76, 0, 0.24, 1);
}
.overlay.open {
opacity: 1;
visibility: visible;
}
.overlay-links {
display: flex;
flex-direction: column;
align-items: center;
gap: 2rem;
}
.overlay-links a {
color: #fff;
font-family: "Instrument Serif", serif;
font-size: 2.25rem;
text-decoration: none;
opacity: 0;
transform: translateY(1.5rem);
transition: opacity 600ms cubic-bezier(0.76, 0, 0.24, 1), transform 600ms cubic-bezier(0.76, 0, 0.24, 1), color 600ms cubic-bezier(0.76, 0, 0.24, 1);
}
.overlay-links a:hover { opacity: 0.6; }
.overlay.open .overlay-links a {
opacity: 1;
transform: translateY(0);
}
.overlay.open .overlay-links a:nth-child(1) { transition-delay: 150ms; }
.overlay.open .overlay-links a:nth-child(2) { transition-delay: 230ms; }
.overlay.open .overlay-links a:nth-child(3) { transition-delay: 310ms; }
.overlay.open .overlay-links a:nth-child(4) { transition-delay: 390ms; }
.overlay.open .overlay-links a:hover { transition-delay: 150ms; opacity: 0.6; }
.overlay.open .overlay-links a:nth-child(2):hover { transition-delay: 230ms; }
.overlay.open .overlay-links a:nth-child(3):hover { transition-delay: 310ms; }
.overlay.open .overlay-links a:nth-child(4):hover { transition-delay: 390ms; }
/* ——— Hero ——— */
.hero {
position: relative;
width: 100%;
height: 100vh;
overflow: hidden;
display: flex;
align-items: flex-end;
justify-content: center;
}
.hero-video-wrap {
position: absolute;
inset: 0;
transform: scale(1.05);
opacity: 0;
transition: transform 1400ms cubic-bezier(0.16, 1, 0.3, 1), opacity 1400ms cubic-bezier(0.16, 1, 0.3, 1);
}
.hero-mounted .hero-video-wrap {
transform: scale(1);
opacity: 1;
}
.hero-video-wrap video {
width: 100%;
height: 100%;
object-fit: cover;
}
.hero-content {
position: relative;
z-index: 10;
text-align: center;
padding: 0 1.5rem 4rem;
max-width: 56rem;
margin: 0 auto;
}
.hero h1 {
font-family: "Instrument Serif", serif;
color: #fff;
font-size: 2.5rem;
line-height: 0.95;
font-weight: 400;
margin-bottom: 1.25rem;
opacity: 0;
transform: translateY(2rem);
transition: opacity 900ms cubic-bezier(0.16, 1, 0.3, 1), transform 900ms cubic-bezier(0.16, 1, 0.3, 1);
}
.hero-mounted .hero h1 {
opacity: 1;
transform: translateY(0);
transition-delay: 400ms;
}
.hero-br { display: none; }
.hero p {
color: rgba(255, 255, 255, 0.7);
font-size: 1rem;
line-height: 1.5;
margin: 0 auto 2rem;
max-width: 28rem;
opacity: 0;
transform: translateY(2rem);
transition: opacity 900ms cubic-bezier(0.16, 1, 0.3, 1), transform 900ms cubic-bezier(0.16, 1, 0.3, 1);
}
.hero-mounted .hero p {
opacity: 1;
transform: translateY(0);
transition-delay: 600ms;
}
.cta {
display: inline-block;
padding: 0.875rem 2rem;
background: #fff;
color: #000;
font-size: 0.875rem;
font-weight: 500;
line-height: 1.25;
text-decoration: none;
border-radius: 9999px;
opacity: 0;
transform: translateY(2rem);
transition: opacity 900ms cubic-bezier(0.16, 1, 0.3, 1), transform 900ms cubic-bezier(0.16, 1, 0.3, 1), background-color 900ms cubic-bezier(0.16, 1, 0.3, 1);
}
.hero-mounted .cta {
opacity: 1;
transform: translateY(0);
transition-delay: 800ms, 800ms, 0ms;
}
.cta:hover { background: rgba(255, 255, 255, 0.9); }
@media (min-width: 640px) {
.hero h1 { font-size: 3rem; }
.hero-br { display: block; }
}
@media (min-width: 768px) {
.nav-inner {
padding: 0 2.5rem;
height: 5rem;
}
.logo { font-size: 1.5rem; }
.nav-pill { display: flex; }
.nav-flower { display: flex; }
.hamburger { display: none; }
.overlay-links a { font-size: 3.75rem; }
.hero-content { padding-bottom: 6rem; }
.hero h1 {
font-size: 3.75rem;
margin-bottom: 1.5rem;
}
.hero p {
font-size: 1.125rem;
margin-bottom: 2.5rem;
}
.cta { font-size: 1rem; }
}
@media (min-width: 1024px) {
.hero h1 { font-size: 4.5rem; }
}
</style>
</head>
<body>
<nav class="nav" id="nav">
<div class="nav-inner">
<a class="logo" href="#">Aurevon</a>
<button class="nav-pill" id="navPill" type="button">
<span id="navPillLabel">Navigate</span>
</button>
<div class="nav-flower" aria-hidden="true">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<path d="M12 5a3 3 0 1 1 3 3m-3-3a3 3 0 1 0-3 3m3-3v1M9 8a3 3 0 1 0 3 3M9 8h1m5 0a3 3 0 1 1-3 3m3-3h-1m-2 3v-1" />
<circle cx="12" cy="8" r="2" />
<path d="M12 10v12" />
<path d="M12 22c4.2 0 7-1.667 7-5-4.2 0-7 1.667-7 5Z" />
<path d="M12 22c-4.2 0-7-1.667-7-5 4.2 0 7 1.667 7 5Z" />
</svg>
</div>
<button class="hamburger" id="hamburger" type="button" aria-label="Toggle menu">
<span></span>
<span></span>
</button>
</div>
</nav>
<div class="overlay" id="overlay">
<div class="overlay-links">
<a href="#">Home</a>
<a href="#">Story</a>
<a href="#">Collection</a>
<a href="#">Inquire</a>
</div>
</div>
<section class="hero" id="hero">
<div class="hero-video-wrap">
<video
src="https://meez.design/web/media/ext/098ffe06644e148a.mp4"
autoplay
muted
loop
playsinline
></video>
</div>
<div class="hero-content">
<h1>A carefully curated<br class="hero-br" /> collection beyond compare</h1>
<p>Reserve your place in our private gallery.</p>
<a class="cta" href="#">Join the waitlist</a>
</div>
</section>
<script>
(function () {
var nav = document.getElementById("nav");
var overlay = document.getElementById("overlay");
var hamburger = document.getElementById("hamburger");
var navPill = document.getElementById("navPill");
var navPillLabel = document.getElementById("navPillLabel");
var hero = document.getElementById("hero");
var open = false;
setTimeout(function () { nav.classList.add("nav-mounted"); }, 100);
setTimeout(function () { hero.classList.add("hero-mounted"); }, 300);
window.addEventListener("scroll", function () {
nav.classList.toggle("scrolled", window.scrollY > 40);
});
function setOpen(next) {
open = next;
overlay.classList.toggle("open", open);
hamburger.classList.toggle("open", open);
navPillLabel.textContent = open ? "Close" : "Navigate";
document.body.classList.toggle("menu-open", open);
}
hamburger.addEventListener("click", function () { setOpen(!open); });
navPill.addEventListener("click", function () { setOpen(!open); });
overlay.querySelectorAll("a").forEach(function (link) {
link.addEventListener("click", function () { setOpen(false); });
});
})();
</script>
</body>
</html>
Real-Time AlertsSign in · free prompt · copy-paste
Build a single, self-contained `index.html` file — no build step, no external requests except one video URL, no frameworks, no dependencies. Everything (CSS, JS, SVG) is inline. The file is a pixel-locked recreation of a designed login page, reconstructed from a 1464×949 reference frame. Follow every number exactly; the design is calibrated, not approximate.
## 0. Global rules
- `<!DOCTYPE html>`, `<html lang="en">`.
- `<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">`
- `<title>Signal — Log in</title>`
- `html,body{height:100%;background:var(--page)}`; body sets `-webkit-font-smoothing:antialiased; text-rendering:geometricPrecision; overflow:hidden`.
- No semicolon-optional sloppiness — this is production-grade static output.
## 1. Fonts
Two families, both **embedded as base64 `data:font/woff2` URIs inside `@font-face`** (the page must work fully offline for type):
| Family | Weights | Format | Notes |
|---|---|---|---|
| `FreeSans` | 400, 700 (two separate `@font-face` blocks) | `format('woff2')` | Body/UI font |
| `Eloquia` | variable `200 800` | `format('woff2-variations')` | Display font for headline + card H1 |
All three declare `font-display:block` (no FOUT — the entrance animation waits on `document.fonts.ready`).
- Body stack: `'FreeSans',-apple-system,BlinkMacSystemFont,'Helvetica Neue',Arial,sans-serif`
- Display usage: `font-family:'Eloquia',sans-serif` **plus** `font-variation-settings:'wght' var(--hl-wght)` — the variable axis is what sets weight, not `font-weight`.
If you cannot source the exact fonts, substitute a grotesque for FreeSans and a variable geometric sans for Eloquia, keep `font-variation-settings`, and say so — do not silently swap in a system font.
## 2. The hero media (video, not an image)
The left panel's artwork is a **looping video of a peregrine falcon in a high-speed dive** — feathers rippling in the wind, eye locked forward, background streaking with motion blur, slow camera push-in. 1352×1532, ~5s, silent.
Source URL (use exactly this):
```
https://meez.design/web/media/ext/1643aec4b5d85510.mp4
```
There are **two** `<video>` elements — responsive variants that CSS shows/hides, both pointing at the same file:
```html
<video class="photo-img photo-img--tall" autoplay muted loop playsinline preload="auto" poster="data:image/webp;base64,…">
<source src="falcon.mp4" type="video/mp4">
</video>
<video class="photo-img photo-img--wide" aria-hidden="true" autoplay muted loop playsinline preload="auto" poster="data:image/webp;base64,…">
<source src="falcon.mp4" type="video/mp4">
</video>
```
- `autoplay muted loop playsinline` are all four required (muted + playsinline are what let iOS autoplay).
- `poster` on each is a **base64 webp still of the same falcon** (the original 1177×1336 photograph), so first paint is the photo and there is no empty flash while the video buffers.
- The `--tall` one carries `alt`-equivalent meaning; the `--wide` duplicate is `aria-hidden="true"`.
- Either reference the CloudFront URL directly in `src`, or download it beside the file as `falcon.mp4` and reference it relatively.
## 3. Design tokens (`:root`)
Reference frame and box metrics:
```
--W:1464; --H:949; --photoW:836; --paneW:628; --cardW:613; --cardH:922;
```
Type and spacing tokens — reproduce verbatim:
```
--badge-fs:13.60px; --badge-fw:400; --badge-ls:-0.163px; --badge-gap:10px; --badge-dy:0px; --badge-ws:0px;
--badge-left:34px; --badge-top:684px;
--hl-lh:1; --hl-wght:578;
--hl1-fs:69.14px; --hl1-ls:-1.936px; --hl1-ws:0px; --hl1-left:33.00px; --hl1-top:750.02px;
--hl2-fs:68.95px; --hl2-ls:-1.931px; --hl2-left:32.00px; --hl2-top:831.01px;
--h1-top:65.00px; --h1-fs:42.55px; --h1-ls:-2.553px; --h1-ws:1.300px; --h1-wght:584;
--sub-top:120.00px; --sub-fs:20.41px; --sub-ls:-0.245px; --sub-ws:-2.000px; --sub-fw:400; --sub-fwb:700;
--fieldpad:19px;
--eph-fs:15.68px; --eph-ls:-0.188px; --eph-left:17.0px; --eph-fw:400; --eph-ws:0px;
--pph-fs:17.29px; --pph-ls:-0.698px; --pph-left:18px; --pph-fw:400;
--login-fs:16.38px; --login-fw:400; --login-ls:0.200px; --login-gap:10px; --login-dy:0.00px; --login-padl:-12.00px;
--arrow-w:13.2px;
--div-top:477px; --or-fs:11.5px; --or-fw:700; --or-ls:0.8px; --or-dy:2.00px; --or-dx:0.00px;
--or-line-l:205px; --or-line-r:204px;
--g-gap:17px; --g-icon:18.5px;
--gt-fs:18.10px; --gt-fw:400; --gt-ls:-0.217px; --gt-ws:-1.000px; --gt-dy:1.00px;
--bt-top:611.00px; --bt-fs:16.37px; --bt-fw:400; --bt-ls:-0.196px; --bt-ws:-2.060px; --bt-fwb:700; --bt-uo:3px;
--card-shadow:1px 10px 14px rgba(10,14,20,0.14), 0 1px 3px rgba(10,14,20,0.05);
--cs:1;
```
Palette:
```
--ink:#000; --h1-color:#2c3343; --sub-grey:#797979;
--badge-bg:#2f2a27; --ph:#606060; --or:#5a5a5b;
--gtext:#232424; --bottom:#0a0a0a;
--btn1:#283139; --btn2:#293340;
--inputFill:#fafafa; --inputBorder:#acacae; --pwFill:#f9f9f9;
--gBorder:#c8c8ca; --divider:#b1b1b2; --page:#fefefe;
```
Note the deliberate asymmetries — they are intentional, not typos: the two headline lines differ slightly in size/tracking (69.14 vs 68.95px), the OR divider rules differ by 1px (205/204), the email and password fields differ in fill, height, border and padding, and `--login-padl` is negative to optically center the Login label against its trailing arrow.
## 4. Structure
```
body > .stage
section.photo
video.photo-img.photo-img--tall
video.photo-img.photo-img--wide
div.scrim
div.hero#hero
div.badge → inline SVG lightning/signal glyph + span#badgeTxt
div.hl-wrap → span.hl#hl1, span.hl#hl2
section.pane
div.card#card
div.card-in#cardIn
h1.col.center#h1
p.col.center#sub
div.field#email > input
div.field#pw > input
button#loginBtn > span + arrow SVG
div.divider > i + b + i
button#gBtn > Google SVG + span
p#bottom > text + a
```
Copy:
- Badge: **"Built for fast-moving teams"**
- Headline line 1: **"Find Signal to Action"** · line 2: **"Instantly"**
- H1: **"Welcome Back!"**
- Sub: **`<b>Log in</b> to continue monitoring your signals.`**
- Email placeholder: **"Eg. johndoe@gmail.com"** (`type="email"`, `autocomplete="email"`, `aria-label="Email address"`)
- Password placeholder: **"Password"** (`type="password"`, `autocomplete="current-password"`, `aria-label="Password"`)
- Button: **"Login"** + right-arrow · Divider: **"OR"** · Google button: **"Sign in with Google"**
- Footer: **"Don't have an account? "** (curly apostrophe `’`) + link **"Start Free"**
Both buttons are `type="button"`. There is no `<form>` and no submit handling — this is a static composition.
### Inline SVGs
**Badge glyph** — `viewBox="0 0 582 557"`, single white `fill-rule="evenodd"` path, rendered 17 × 16.27px, nudged `top:-1px`:
```
M449.0 0.0 435.0 0.0 415.0 10.0 200.0 249.0 187.0 276.0 189.0 299.0 212.0 326.0 232.0 332.0 289.0 334.0 289.0 516.0 301.0 543.0 324.0 556.0 346.0 556.0 374.0 536.0 573.0 311.0 582.0 288.0 579.0 264.0 559.0 240.0 539.0 233.0 478.0 230.0 478.0 32.0 470.0 13.0ZM442.0 38.0 446.0 250.0 466.0 267.0 540.0 270.0 547.0 285.0 341.0 520.0 332.0 522.0 324.0 514.0 321.0 314.0 307.0 300.0 295.0 297.0 233.0 297.0 224.0 291.0 221.0 282.0ZM1.0 67.0 4.0 81.0 17.0 90.0 216.0 90.0 223.0 87.0 232.0 74.0 228.0 57.0 215.0 49.0 18.0 49.0 5.0 57.0ZM0.0 285.0 4.0 300.0 17.0 308.0 105.0 308.0 118.0 299.0 121.0 291.0 119.0 278.0 111.0 270.0 103.0 267.0 17.0 267.0 4.0 275.0ZM1.0 495.0 4.0 511.0 10.0 517.0 23.0 520.0 179.0 520.0 191.0 516.0 200.0 500.0 196.0 488.0 182.0 479.0 18.0 479.0 9.0 483.0Z
```
**Login arrow** — `viewBox="0 0 22 22"`, `<path d="M3 11h15.4M11 3.3l7.7 7.7-7.7 7.7" stroke="#fff" stroke-width="2.6" stroke-linecap="round" stroke-linejoin="round"/>`
**Google mark** — standard 4-colour `viewBox="0 0 48 48"`, exact fills `#EA4335`, `#4285F4`, `#FBBC05`, `#34A853`.
## 5. Desktop layout (the base composition)
- `.stage{position:fixed;inset:0;overflow:hidden}`
- `.photo{position:absolute;left:0;top:0;height:100%;width:57.1038%;overflow:hidden}` — that is 836/1464.
- `.photo-img{position:absolute;inset 0;width:100%;height:100%;object-fit:cover;object-position:100% 50%;display:block;-webkit-user-drag:none}`
- `.scrim` — `display:none` on desktop; a white top-down gradient defined but unused until mobile.
- `.hero{position:absolute;left:0;bottom:0;width:836px;height:949px;transform-origin:left bottom;pointer-events:none}` with `.hero>*{pointer-events:auto}`. JS scales this whole block.
- `.badge` — `inline-flex`, height 37px, padding `0 16px 0 19px`, `border-radius:999px`, background `--badge-bg`, `backdrop-filter:blur(7px) saturate(120%)`, shadow `0 1px 2px rgba(0,0,0,.18), 0 6px 18px rgba(0,0,0,.14)`, white text, `white-space:nowrap`.
- `.hl` — absolutely positioned, Eloquia, `line-height:1`, `color:var(--ink)`, `white-space:nowrap`.
- `.pane{position:absolute;left:57.1038%;right:0;top:0;bottom:0}`
- `.card` — `left:1px;top:14px;width:613px;height:922px;border-radius:26px;overflow:hidden; background:rgba(254,254,254,.90); backdrop-filter:blur(28px) saturate(160%); border:1px solid rgba(0,0,0,.036); box-shadow:var(--card-shadow)`.
- `.card-in` — 613×922, `transform-origin:left top` (JS scales it).
- `.col{position:absolute;left:62px;width:488px}`; `.field{left:62px;width:489px;display:flex;align-items:center;border-radius:12px}`.
- `#email{top:203px;height:61px;background:var(--inputFill);border:1.5px solid var(--inputBorder)}`
- `#pw{top:273.5px;height:59px;background:var(--pwFill);border:0}`
- `#loginBtn{left:62px;top:366px;width:489px;height:65.5px;border-radius:999px;background:linear-gradient(180deg,var(--btn1) 0%,var(--btn2) 100%);color:#fff;display:flex;align-items:center;justify-content:center;gap:var(--login-gap);padding-left:var(--login-padl);padding-right:4px;box-shadow:0 8px 20px rgba(18,26,34,.16), 0 2px 5px rgba(18,26,34,.10)}`
- `.divider{left:63px;top:var(--div-top);width:487px;display:flex;align-items:center;justify-content:center}` — `i` rules are `height:1.5px`, first `flex:0 0 205px`, last `flex:0 0 204px`, `b` is `flex:1 1 auto`.
- `#gBtn{left:62px;top:535px;width:489px;height:59.5px;border:1.5px solid var(--gBorder);border-radius:999px;background:rgba(255,255,255,.92);box-shadow:0 1px 2px rgba(0,0,0,.03)}`
- `#bottom{left:62px;width:489px;top:var(--bt-top);text-align:center}`; its link is `#000`, weight 700, `text-decoration:underline`, `text-underline-offset:3px`, `text-decoration-thickness:2px`.
Interaction states:
- `#loginBtn` — `transition:transform .18s cubic-bezier(.2,.7,.3,1), box-shadow .18s ease, filter .18s ease`; `:hover{filter:brightness(1.12)}`; `:active{transform:translateY(1px)}`
- `#gBtn` — `transition:background .18s ease, box-shadow .18s ease, transform .18s cubic-bezier(.2,.7,.3,1)`; `:hover{background:#fff;box-shadow:0 3px 10px rgba(0,0,0,.07)}`; `:active{transform:translateY(1px)}`
- `:focus-visible{outline:2px solid #2b6cb0;outline-offset:2px}`
- `@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}`
## 6. Responsive engine (JS-driven, three modes)
An IIFE owns layout. Constants:
```js
var REF_W=1464, REF_H=949, PHOTO_W=836, PANE_W=628, CARD_W=613, CARD_H=922;
var CONTENT_H=697; // form block + breathing room, reference px
var IMG_W=1177, IMG_H=1336, IMG_REF_SCALE=836/1177;
var PANE_RATIO=PANE_W/REF_W;
var HERO_W=681, HERO_H=219; // hero block extents, reference px
var REF_CARD_ASPECT=692/855;
var RAMP_HI=1280, RAMP_LO=1000, PHOTO_MIN=0.42;
var RAMP_LO2=820, PHOTO_MIN2=0.36;
var TP={"pad":0.1076,"h1Top":0.08656,"h1Fs":0.06839,"subTop":0.17368,"subFs":0.0309,"emTop":0.25435,"emH":0.10257,"emR":0.0202,"ephFs":0.02702,"ephPad":0.0332,"pwTop":0.36851,"pwH":0.10839,"btnTop":0.50435,"btnH":0.10981,"btnFs":0.0275,"arrow":0.026,"btnGap":0.02,"divTop":0.68222,"orFs":0.02245,"orPad":0.051,"divH":0.0026,"gTop":0.76445,"gH":0.09966,"gIcon":0.032,"gtFs":0.03205,"gGap":0.026,"btTop":0.89668,"btFs":0.1058,"badgeH":0.0742,"heroLh":1.1246,"heroBot":0.06493,"heroGap":-0.30423,"heroSide":0.0525};
```
(`btFs` is `0.02876` and `heroFs` is `0.1058` — keep both keys.)
Breakpoints are declared once as media-query objects and shared by CSS intent and the layout pass:
```js
var mqLandscape = window.matchMedia('(min-width:700px) and (min-aspect-ratio:51/50)');
var mqPortrait = window.matchMedia('(min-width:700px) and (max-aspect-ratio:51/50)');
```
### Mode A — `land` (desktop / landscape ≥700px)
- Photo column width comes from `photoRatio(vw)`: at ≥1280px it is the untouched `1 - PANE_RATIO` (57.1%); from 1280→1000 it eases linearly down to `0.42`; from 1000→820 it eases further to `0.36`. This yields width to the card as the frame narrows so the form stays legible, with no jump.
- `placeCard(paneW, vh)`: `cs = Math.min(paneW/PANE_W, vh/CONTENT_H)`; margins `gapL=1*cs, mT=14*cs, mB=13*cs, mR=14*cs`; card width `Math.max(CARD_W*cs, paneW-gapL-mR)`, height `vh-mT-mB`, radius `26*cs`, border `Math.max(1,cs)`. Then `cardIn.style.transform='translate('+((cw-CARD_W*cs)/2)+'px,0) scale('+cs+')'` — the interior is *scaled*, so all the fixed pixel values above hold at any size.
- `seatHero(photoW, vh)`: the hero rides the video's own cover-scale but is never wider than its panel — `imgScale=Math.max(photoW/IMG_W, bandH/IMG_H)`, then `s=Math.min(imgScale/IMG_REF_SCALE, photoW*0.92/HERO_W)`, applied as `transform:scale(s)` with `transform-origin:left bottom`, `bottom:0`.
### Mode B — `tabport` (≥700px, portrait) — `body.tabport`
The two-column split has nowhere to go, so the photo becomes a **masthead band** with badge + headline seated at its foot, and the card takes the full measure underneath. Proportions from a 1086×1448 tablet reference:
- band = `round(vh*0.425)`; side margin = `round(vw*0.0525)`; footer = `round(vh*0.0297)`.
- Photo becomes `width:100%;height:var(--band-h)`, and swaps to the `--wide` video with `object-position:50% 50%`.
- Hero becomes a static flex column anchored to the band's bottom, with `--tp-hero-b`, `--tp-hero-gap` (note: **negative**, −0.30423 × band) and a scaled badge via `--badge-k = band*0.0742/37`.
- The headline goes inline-wrapping inside `.hl-wrap`; its measure is set to `round(headlineMeasure()*0.61)px` so the line can only break after "to". `headlineMeasure()` clones a hidden span with the computed font-family/size/weight/letter-spacing/word-spacing/variation-settings, measures "Find Signal to Action Instantly", and removes it.
- The card interior goes **fluid, not scaled**: `card-in` becomes `inset:0`, `transform:none`. Every interior value is written as a CSS var derived from the card's own measure — vertical keys off `cardH`, `pad`/`orPad` off `cardW`, hero/badge keys off the band, everything else off `S = Math.min(cardH, cardW*REF_CARD_ASPECT)`. Camel-case TP keys convert to `--tp-kebab-case`.
- Tablet CSS re-derives tracking proportionally, e.g. `letter-spacing:calc(var(--h1-ls)/var(--h1-fs)*var(--tp-h1-fs))`.
### Mode C — `phone` (<700px) — `body.stacked`
A real document-flow composition — **nothing is viewport-scaled**, so type stays readable and short screens scroll.
- `--mobile-hero-h:clamp(244px,34svh,304px)`; body becomes `height:auto;min-height:100%;overflow-y:auto;background:#fff`; `.stage` becomes a relative flex column with `min-height:100svh`.
- Photo is a relative band of `--mobile-hero-h`, using the `--wide` video with `object-position:64% 48%` and `transform:scale(1.015)`.
- `.scrim` turns **on** here: `linear-gradient(180deg,rgba(7,10,13,.02) 18%,rgba(7,10,13,.12) 48%,rgba(7,10,13,.78) 100%)`.
- Hero sits bottom-left over the scrim; badge becomes `height:31px;padding:0 12px;background:rgba(24,27,30,.82);box-shadow:0 4px 16px rgba(0,0,0,.18)`, 11px label. Headline lines go **white** on the photo: `font-size:clamp(30px,8.8vw,38px);letter-spacing:-.035em;line-height:.96;text-shadow:0 2px 18px rgba(0,0,0,.32)`.
- Card overlaps the photo: `margin:-28px 0 0;border-radius:28px 28px 0 0;background:#fff;border:0;box-shadow:0 -10px 28px rgba(20,28,36,.10);min-height:calc(100svh - var(--mobile-hero-h) + 28px)`.
- `card-in`: `max-width:500px;margin:0 auto;padding:36px clamp(24px,7vw,38px) max(30px,env(safe-area-inset-bottom));display:flex;flex-direction:column;justify-content:center`.
- All children go `position:static;width:100%`. Fields 56px, login button 58px, Google button 56px, **inputs at `font-size:16px`** (prevents iOS zoom-on-focus). H1 `clamp(31px,8.8vw,38px)`, sub 15px, footer 14px.
- `@media (max-width:370px)`: hero 232px, tighter padding, headline pinned to 30px.
- `@media (max-height:520px) and (orientation:landscape)`: hero 208px, `card-in` switches to `justify-content:flex-start`.
- The JS phone branch is deliberately **empty** — it only calls `setMode('phone')`. Keeping it free of measurements prevents stale desktop/tablet inline values.
### Mode-switch hygiene (important)
Every branch writes inline styles, and inline styles outrank the stylesheet. On a mode change, **wipe first**: `clearInline()` resets `cssText=''` on `photo`, `pane`, `card`, `cardIn`, `hero`. Without this, the outgoing mode's `left/top/width/padding` stay latched and the incoming mode's CSS never applies — the layout would only look right after a reload. None of these elements carry a `style` attribute in the markup, so clearing is safe.
`layout()` is bound to `resize` (passive), `orientationchange`, both media-query `change` events, `document.fonts.ready`, and is called once immediately.
## 7. Entrance animation (runs exactly once)
**Pre-paint guard.** A tiny `<script>` in `<head>`, *before* the stylesheet, adds `entry-pending` to `<html>` and arms a 3500ms safety release:
```js
document.documentElement.classList.add('entry-pending');
window.__entryFallback=setTimeout(function(){
document.documentElement.classList.remove('entry-pending');
},3500);
```
With JS disabled the class is never added, so the complete page stays visible. This is the whole no-JS story — do not add a `<noscript>` block.
**CSS first-frame states** (`.entry-pending …`) set `opacity:0` and `will-change:transform,opacity,clip-path` on: `.card`, `.badge`, `#hl1`, `#hl2`, `#h1`, `#sub`, `#email`, `#pw`, `#loginBtn`, `.divider`, `#gBtn`, `#bottom` — plus per-element transforms: card `translateY(12px) scale(.988)`, badge `translateY(8px)`, headlines `translateY(16px)` **with `clip-path:inset(100% 0 0 0)`**, h1/sub `translateY(10px)`, the rest `translateY(8px)`. Under `max-width:699px` the card uses `translateY(14px)` and headlines `translateY(12px)`. Under `prefers-reduced-motion:reduce` every one of these is forced back to `opacity:1;transform:none;clip-path:none;will-change:auto`.
**The photograph/video is deliberately excluded — it is the static stage and never animates.**
**The timeline.** A second IIFE at the end of `<body>`. If reduced-motion is on or `Element.prototype.animate` is missing, it just calls `releaseEntrance()` and returns. Otherwise, two easings — `ease='cubic-bezier(.16,1,.3,1)'` and `softEase='cubic-bezier(.22,1,.36,1)'` — and `compact = matchMedia('(max-width:699px)').matches` picks the compact offsets. Each step is a WAAPI `el.animate([from,to],{delay,duration,easing,fill:'both'})`:
| Target | Delay | Duration | Easing | From |
|---|---|---|---|---|
| `.card` | 40 | 820 | ease | `opacity:0`, `translateY(14px)` compact else `translateY(12px) scale(.988)` |
| `.badge` | 120 | 480 | softEase | `translateY(8px)` |
| `#hl1` | 240 | 760 | ease | `translateY(16/12px)` + `clipPath:inset(100% 0 0 0)` |
| `#hl2` | 330 | 760 | ease | `translateY(16/12px)` + `clipPath:inset(100% 0 0 0)` |
| `#h1` | 470 | 620 | ease | `translateY(10px)` |
| `#sub` | 570 | 560 | ease | `translateY(10px)` |
| `#email` | 720 | 520 | softEase | `translateY(8px)` |
| `#pw` | 790 | 520 | softEase | `translateY(8px)` |
| `#loginBtn` | 930 | 560 | ease | `translateY(8px)` |
| `.divider` | 1060 | 440 | softEase | `translateY(6px)` |
| `#gBtn` | 1150 | 540 | ease | `translateY(8px)` |
| `#bottom` | 1260 | 500 | softEase | `translateY(6px)` |
All `to` states are `{opacity:1,transform:'none'}` (headlines also `clipPath:'inset(0 0 0 0)'`).
Design intent, in order: **surface establishes depth → brand promise overlaps it → functional form groups resolve last.**
**Handoff.** Immediately after scheduling, remove `entry-pending` from `<html>` — the animation layer now owns the hidden first frame, so the CSS guard can drop without flashing. Then `Promise.allSettled(animations.map(a=>a.finished))` → `cancel()` every animation, empty the array, and `releaseEntrance()` (which also clears `__entryFallback`). Cancelling restores the authored static styles exactly, leaving no `fill:'both'` residue.
**Trigger.** `Promise.race([document.fonts.ready, new Promise(r=>setTimeout(r,650))])` then a double `requestAnimationFrame` before starting — fonts get a chance to land, but a slow font can never stall the page past 650ms.
## 8. Acceptance checks
1. Desktop 1464×949 reproduces the reference frame exactly.
2. Resizing 1400 → 900 → 700 shows the photo column easing back smoothly with no jump and no reload needed.
3. Rotating a tablet swaps cleanly between `land` and `tabport` (proof that `clearInline()` works).
4. On a phone the page scrolls, inputs do not trigger iOS zoom, and the headline is white over the scrim.
5. The entrance plays once on load and never again on resize.
6. With `prefers-reduced-motion:reduce`, everything is visible immediately and nothing moves.
7. With JS disabled, the full page renders statically.
8. The falcon video autoplays silently and loops in every mode, with the poster still visible during buffering.
Scaling PlatformSaaS · free prompt · copy-paste
# Prompt: Recreate the Targo hero + about sections
Build a single-page site with exactly two sections. Font: **Quantico** (Google Fonts, weights 400 + 700), fallback 'Arial Narrow', sans-serif. Accent color: **#15BCDF** (hover #3fd0ef, border #0fa3c2). Page/body background: **#F2F1F0**. Text colors: headings #2b3033, nav links #3a3a3a, body gray #6b6f72. All headings uppercase, letter-spacing 0.01em, line-height 0.98.
## Section 1 — Hero (min-height: 100svh, background #F2F1F0, overflow hidden)
**Background video** (absolutely positioned, pointer-events none, no crop — objectFit: contain, height auto):
`https://meez.design/web/media/ext/91c8885f71aa1e73.mp4`
- Desktop: top 0, right -20%, width 99%.
- Mobile (≤700px): top 0, left -12%, width 119%.
- Attributes: autoplay, muted, loop, playsinline, preload auto. Robustness: retry `video.play()` every 1s and on first document click/touchstart (always set muted before play, swallow rejections).
- Desktop only: a scrim overlay on the left 70% of the section, `linear-gradient(90deg, #F2F1F0 0%, #F2F1F0 55%, rgba(242,241,240,0.85) 78%, rgba(242,241,240,0) 100%)`, no scrim on mobile.
**Navbar** (relative, flex, wrap, gap clamp(20px,5vw,56px), padding clamp(20px,3vw,38px) clamp(20px,4vw,48px) 0):
- Logo: 38px dark (#111) circle containing a white 20×8px ellipse rotated -25°, next to lowercase word "targo" (font-size clamp(22px,5vw,30px), weight 400, color #111, letter-spacing -0.5px).
- Links HOME / ABOUT / CONTACT US: bold 700, font-size clamp(12px,2.4vw,15px), letter-spacing 0.06em, color #3a3a3a, nowrap, gap 34px. Hidden on mobile.
- Right-aligned "Contact us" button (desktop only): transparent, **no border**, white text, uppercase, letter-spacing 0.14em, padding 14px 26px, chamfered corners via `clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 12px 100%, 0 calc(100% - 12px))`, with a white stroked mail-envelope SVG icon (17×13, stroke-width 1.4). Hover: background rgba(255,255,255,0.14).
- Mobile: hamburger button (3 white 22×2px bars, gap 5px) replacing links + contact button; tapping toggles a stacked menu of the 3 links (dark #1a1c1e, bold, gap 18px).
**Headline** (h1, 6 staircase lines, uppercase, weight 700):
```
SCALING
THE
PLATFORM
FOR
YOUR
BUSINESS ← this line in #15BCDF
```
Last three lines indented by `min(238px, 28vw)`.
- Desktop: padding `min(clamp(40px,9vw,120px),9vh) 20px min(clamp(24px,4vw,44px),5vh) clamp(20px,9vw,118px)`; font-size `min(clamp(34px,7.6vw,80px), 9.2vh)` (vh caps keep headline + button inside 100vh on short monitors).
- Mobile: margin-top 360px (text sits below the video), padding `0 20px 28px 20px`, font-size `clamp(34px,10vw,56px)`.
**CTA button** "GET STARTED" under the headline, left edge aligned with the FOR/YOUR/BUSINESS indent (left padding `calc(clamp(20px,9vw,118px) + min(238px,28vw))`, bottom padding `min(clamp(36px,6vw,80px),7vh)`). Style: background #15BCDF, border 1px solid #0fa3c2, dark text #1a1c1e, uppercase, weight 700, letter-spacing 0.14em, padding 18px 34px, font-size clamp(13px,2.2vw,16px), chamfered corners `clip-path: polygon(0 0, calc(100% - 16px) 0, 100% 16px, 100% 100%, 16px 100%, 0 calc(100% - 16px))`, glow `box-shadow: 0 0 0 1px rgba(21,188,223,0.35), 0 10px 30px -12px rgba(15,163,194,0.6)`, trailing 22×1px dark line. Hover: background #3fd0ef, stronger glow.
## Section 2 — About (flex, wrap, align center, gap 40px)
Background: `linear-gradient(180deg, #F2F1F0 0%, #F7F6F8 18%, #F7F6F8 100%)` (smooth handoff from hero). Padding: `clamp(60px,10vw,140px) 0 clamp(30px,5vw,70px) clamp(20px,9vw,118px)` — **no right padding** so the media touches the right screen edge.
**Left column** (flex 1 1 420px, min-width 300px):
- h2, two staircase lines: "ABOUT" then "BUSINESS" in #15BCDF indented by `min(160px,18vw)`. Font-size clamp(34px,6.5vw,72px), weight 700, uppercase.
- Paragraph (max-width 520px, margin 32px 0 0 min(160px,18vw), font-size clamp(14px,1.6vw,17px), line-height 1.7, color #6b6f72), text verbatim:
"Targo builds the testing infrastructure modern teams rely on. From automated pipelines to full-scale QA audits, we make sure your software ships fast and breaks nothing. Hundreds of releases, zero surprises."
- "LEARN MORE" button, identical style to the hero CTA, margin 36px 0 0 min(160px,18vw).
**Right column** (flex 1 1 360px, min-width 280px, justify-content flex-end, position relative):
- Video, width 100%, max-width 644px, height auto, flush to the right edge:
`https://meez.design/web/media/ext/8244e1a58b5e3d46.mp4`
Same attributes + autoplay-retry logic as the hero video.
- Overlay rectangle exactly covering the video (absolute, top 0, right 0, width 100%, max-width 644px, height 100%): background **#15BCDF** with `mix-blend-mode: hue`, pointer-events none, z-index 1 (tints the video cyan).
## Global
- `body { margin: 0; background: #F2F1F0; }`; links: color #3a3a3a, no underline, hover #000.
- Mobile breakpoint: 700px (JS-driven via window.innerWidth + resize listener, or media queries).
- No other sections, no footer.
Signal IDTechnology · free prompt · copy-paste
Recreate this exact full-viewport dark hero landing page for “ECHOID” — a voice-identity product for the E network. Match every detail below precisely. Do not invent extra sections, cards, stats, or decorative overlays. Desktop composition: full-bleed cinematic background video on the left/center with a right-aligned signup panel; black negative space on the left; UI pinned top (nav), right (form), and bottom (legal).
═══════════════════════════════════════
PAGE META
═══════════════════════════════════════
- Document title: ECHOID — Your voice ID to the E network
- Lang: en
- Pure black page background (#000)
- Antialiased text
- Single full-viewport section only (no other page sections)
═══════════════════════════════════════
EXACT MEDIA URLS (CloudFront — use these verbatim)
═══════════════════════════════════════
Background video (MP4):
https://meez.design/web/media/ext/ef332df5da921818.mp4
Poster / fallback still (PNG):
https://meez.design/web/media/ext/71d89c5b89d722c9.png
Video attributes: autoPlay, muted, loop, playsInline, preload="auto"
Video CSS: width/height 100%, object-fit: cover, object-position: center
Media layer: position absolute, inset 0, z-index -1, black background behind video
Preconnect to: https://meez.design
Video content (for reference): dark cinematic AI/surreal face sequence — abstract metallic/glass facial forms, cool dark palette, motion graphic identity vibe. Full-bleed edge-to-edge; never inset, never in a card.
═══════════════════════════════════════
FONTS (exact Google Fonts)
═══════════════════════════════════════
Load from Google Fonts:
family=Sora:wght@200;300;400
family=JetBrains+Mono:wght@300;400;500
display=swap
Preconnect fonts.googleapis.com and fonts.gstatic.com
CSS stacks:
--font-display: "Sora", "Helvetica Neue", Helvetica, Arial, sans-serif
--font-mono: "JetBrains Mono", ui-monospace, "SF Mono", "Cascadia Mono", Menlo, Consolas, monospace
Usage map:
- Sora 200: nav logo “ECHOID”, hero H1 “ECHOID”
- Sora 300: email input, legal footer text
- JetBrains Mono 400: nav links, JOIN UP CTA, chip, buttons, referral link, mobile menu links/CTA
- JetBrains Mono 300: tagline “YOUR VOICE ID TO THE E NETWORK.”
═══════════════════════════════════════
DESIGN TOKENS
═══════════════════════════════════════
--bg: #000000
--text: #ffffff
--text-dim: rgba(255,255,255,0.62)
--text-dimmer: rgba(255,255,255,0.42)
--line: rgba(255,255,255,0.14)
--line-strong: rgba(255,255,255,0.26)
--fill-ghost: rgba(255,255,255,0.05)
--fill-solid: rgba(255,255,255,0.10)
--gutter: clamp(20px, 5vw, 100px)
--ease-premium: cubic-bezier(0.16, 1, 0.3, 1)
═══════════════════════════════════════
LAYOUT SHELL
═══════════════════════════════════════
.hero:
- position relative, width 100%
- height: 100vh AND 100svh
- min-height: 640px (if max-height ≤640px, min-height becomes 100svh)
- overflow hidden
- CSS grid: grid-template-rows: auto 1fr auto
- isolation: isolate
Row 1 = navbar
Row 2 = right-aligned form body (flex end / center on mobile)
Row 3 = legal footer
═══════════════════════════════════════
SCRIM (dual gradient overlay on video)
═══════════════════════════════════════
Desktop (≥721px) — two stacked linear-gradients:
1) to right:
transparent 0% → transparent 45% → rgba(0,0,0,0.45) 72% → rgba(0,0,0,0.72) 100%
2) to bottom:
rgba(0,0,0,0.55) 0% → transparent 22% → transparent 78% → rgba(0,0,0,0.65) 100%
Mobile (≤720px) — single bottom gradient:
rgba(0,0,0,0.6) 0% → rgba(0,0,0,0.25) 30% → rgba(0,0,0,0.75) 100%
═══════════════════════════════════════
NAVBAR (top)
═══════════════════════════════════════
Flex space-between, align center, gap 32px
Padding: clamp(20px, 2.4vw, 34px) horizontal gutter; respect safe-area insets
LEFT — Logo link “ECHOID”
- Sora 200
- font-size: clamp(20px, 1.75vw, 30px)
- letter-spacing: 0.16em
- white, no underline, line-height 1
RIGHT — nav cluster (gap clamp(24px, 3.2vw, 62px)):
A) Desktop links (≥901px): Story, Platforms, Identity, Contact
- JetBrains Mono 400
- font-size: clamp(11px, 0.78vw, 14px)
- letter-spacing: 0.18em
- text-transform: uppercase
- white; hover → --text-dim
- transition color 0.25s ease
- link gap: clamp(20px, 2.8vw, 56px)
- hrefs: #story #platforms #identity #contact
B) Desktop CTA “Join up” (renders as JOIN UP via uppercase)
- same mono type as links
- padding: clamp(12px,1vw,17px) clamp(20px,1.8vw,32px)
- border: 1px solid --line-strong
- hover: background --fill-ghost, border-color rgba(255,255,255,0.5)
- transition background+border 0.25s ease
- href #join
C) Mobile hamburger (≤900px only; desktop links+CTA hidden)
- 44×44 hit target, 3 bars 22px wide × 1px tall, white
- bars at top 16/22/28px, centered with translateX(-50%)
- Active (X morph): bar1 rotate(45deg) to top 22px; bar2 opacity 0 + scaleX(0); bar3 rotate(-45deg) to top 22px
- transition: transform 0.45s --ease-premium, opacity 0.25s ease
═══════════════════════════════════════
MOBILE MENU OVERLAY
═══════════════════════════════════════
Fixed fullscreen, z-index 50 (nav is 60)
Background: rgba(4,4,6,0.94)
backdrop-filter: blur(28px) saturate(140%)
Closed: clip-path circle(3% at calc(100% - 42px) 42px), opacity 0, pointer-events none
Open: clip-path circle(150% at same origin), opacity 1, pointer-events auto
Transition: clip-path 0.7s --ease-premium, opacity 0.45s ease
Centered column of uppercase mono links (Story/Platforms/Identity/Contact) then bordered “Join up”
Link size: clamp(20px, 5.5vw, 28px), letter-spacing 0.14em
CTA: letter-spacing 0.22em, padding 16px 40px, border 1px --line-strong
Stagger entrance: each item starts opacity 0 + translateY(16px); when open → opacity 1 + translateY(0)
Delay: calc(180ms + var(--i) * 70ms) where i = 0..3 for links, i=4 for CTA
Transition on items: opacity 0.4s ease, transform 0.5s --ease-premium
Escape closes; click backdrop closes; body.menu-open { overflow:hidden }; restore focus; auto-close at ≥901px
═══════════════════════════════════════
RIGHT PANEL (voice entry signup)
═══════════════════════════════════════
hero__body: flex align center, justify flex-end (center on ≤720px), horizontal gutter, min-height 0, overflow-y auto
.panel desktop: width min(34vw, 620px), min-width 380px, column flex-start
≤1100px: width min(70vw, 520px), min-width 0
≤720px: width 100%, stretch; chip stays flex-start
Elements in order:
1) CHIP: “[ Voice entry ]” displayed as uppercase “[ VOICE ENTRY ]”
- JetBrains Mono 400
- font-size: clamp(11px, 0.72vw, 14px)
- letter-spacing: 0.2em
- background: rgba(255,255,255,0.09)
- padding: clamp(9px,0.8vw,14px) clamp(14px,1.1vw,20px)
- line-height 1
- NO rounded pill — sharp rectangle
2) H1: “ECHOID”
- Sora 200
- font-size: clamp(54px, 6.2vw, 118px) [≤380px: clamp(44px,15vw,64px)]
- letter-spacing: 0.03em
- line-height: 0.95
- margin-top: clamp(28px, 3vw, 52px)
- Brand-first: this is the dominant hero word; nothing larger
3) TAGLINE: “Your voice ID to the E network.”
- JetBrains Mono 300, uppercase via CSS
- font-size: clamp(11px, 0.94vw, 17px)
- letter-spacing: 0.14em
- color: --text-dim
- margin-top: clamp(14px, 1.4vw, 24px)
- line-height 1.4
4) FORM (noValidate, prevent default submit):
margin-top: clamp(38px, 4.6vw, 82px)
column gap: clamp(14px, 1.3vw, 22px)
width 100%
a) Email field
- Visually-hidden label “Email”
- Transparent input, no side borders, bottom border only 1px --line-strong
- border-radius 0
- padding: 0 2px clamp(12px,1.1vw,18px)
- Sora 300, clamp(16px,0.95vw,18px), white text
- placeholder “Email” color --text-dim
- focus: bottom border rgba(255,255,255,0.85); placeholder → --text-dimmer
- transition border-color 0.25s ease
b) Button “Proceed using email” (.btn--ghost)
- full width, border-radius 0, no border
- padding: clamp(17px,1.6vw,27px) 20px
- JetBrains Mono 400, uppercase, letter-spacing 0.22em
- font-size: clamp(11px,0.78vw,14px)
- background --fill-ghost, color --text-dimmer
- hover: bg rgba(255,255,255,0.09), color white
c) Button “Access” (.btn--solid)
- same type/padding as above
- background --fill-solid, color white
- hover: bg rgba(255,255,255,0.17)
5) Referral link (centered under form): “I've got an invite key”
- JetBrains Mono 400, uppercase via CSS
- font-size: clamp(11px, 0.74vw, 14px)
- letter-spacing: 0.18em
- margin-top: clamp(26px, 2.6vw, 46px)
- align-self: center
- href #invite
- hover: --text-dim + underline, underline-offset 4px
═══════════════════════════════════════
LEGAL FOOTER
═══════════════════════════════════════
border-top: 1px solid --line
padding: clamp(18px,1.7vw,30px) gutter; safe-area bottom
text-align center
Copy exact:
“Opening an e.xyz account signals that you accept our Privacy Notice and Service Contract.”
- Sora 300, clamp(12px,0.82vw,16px), color --text-dim, line-height 1.5
- “Privacy Notice” and “Service Contract” are white underlined links (underline-offset 3px, thickness 1px), hrefs #privacy-notice and #service-contract
- link hover → --text-dim
═══════════════════════════════════════
FOCUS / A11Y
═══════════════════════════════════════
Focus-visible outline: 1px solid rgba(255,255,255,0.7), offset 3px on buttons, CTA, toggle, referral, input, mobile links
Mobile menu: role=dialog, aria-modal, aria-label="Site menu", aria-hidden when closed, inert when closed
Toggle: aria-expanded, aria-controls="mobileMenu", aria-label Open/Close menu
═══════════════════════════════════════
REDUCED MOTION
═══════════════════════════════════════
prefers-reduced-motion: reduce → hide video; show poster as cover background-image on .hero__media; crush all animation/transition durations to 0.01ms
═══════════════════════════════════════
SHORT-HEIGHT COMPRESS (max-height: 640px)
═══════════════════════════════════════
Tighter nav padding; smaller H1 (clamp(36px,7vw,64px)); smaller form margins/gaps; thinner buttons; smaller legal (11px); tighter mobile menu
═══════════════════════════════════════
MOTION SUMMARY (what animates)
═══════════════════════════════════════
1. Background video continuous loop (primary presence)
2. Hover color/background transitions at 0.25s ease on links, CTAs, buttons, input border
3. Hamburger ↔ X morph 0.45s premium ease
4. Mobile menu circular clip-path expand 0.7s premium ease + opacity 0.45s
5. Mobile menu items staggered fade/slide-up with 70ms index delay
NO entrance animation on desktop panel. NO floating badges over video. NO cards, pills, glow, purple, or multi-shadow chrome. Sharp rects only. Aesthetic: black / white / translucent white glass, terminal-mono UI over cinematic face video.
═══════════════════════════════════════
STACK / IMPLEMENTATION NOTES
═══════════════════════════════════════
React + plain CSS (or equivalent). No Tailwind utility look required — custom properties as above. Form action="#" method="post" but preventDefault. Page is the hero only.
```
---
**Media URLs to keep verbatim:**
- Video: `https://meez.design/web/media/ext/ef332df5da921818.mp4`
- Poster: `https://meez.design/web/media/ext/71d89c5b89d722c9.png`
- Fonts: **Sora** (200/300/400) + **JetBrains Mono** (300/400/500)
Space planet3D · free prompt · copy-paste
Build a single, self-contained HTML file: a full-viewport space-themed hero section
for a site called "SpaceEdu". No build step, no frameworks, no external JS. All CSS in
one <style> block in <head>, all JS in one <script> block before </body>. It must be
pixel-faithful to the spec below and fully mobile responsive.
════════════════════════════════════════════════════════════════════════
1. CONCEPT
════════════════════════════════════════════════════════════════════════
A cinematic hero. A looping video of a single planet fills the whole viewport as the
background. Centred over it: eyebrow "PLANET", a huge serif planet name, a short cyan
rule, a paragraph, and a glossy white pill button. Flanking the button, cropped by the
left and right screen edges, sit two transparent planet cut-outs with serif labels.
Three planets exist: EARTH, VENUS, MARS. Exactly one is "featured" (its clip is the
background, its name is the headline). The other two occupy the left and right slots.
Clicking a side planet makes it featured; the two slots then re-fill with the other
two. Earth is featured on load. The rotation is fully reversible.
════════════════════════════════════════════════════════════════════════
2. ASSETS — use these exact URLs
════════════════════════════════════════════════════════════════════════
Background clips (10s, 16:9, 1276x720, silent, loop):
EARTH https://meez.design/web/media/bg-videos/222_1-1.mp4
VENUS https://meez.design/web/media/bg-videos/224_1niceimage.mp4
MARS https://meez.design/web/media/bg-videos/225_38.mp4
Poster / still for each clip (also used as the .sky background-image fallback):
EARTH https://meez.design/web/bg-previews/201_95.jpg
VENUS https://meez.design/web/bg-previews/128_Motion-Background-16.jpg
MARS https://meez.design/web/bg-previews/129_Motion-Background-17.jpg
Transparent planet cut-outs, 2048x2048 PNG with alpha (the side-slot artwork):
EARTH https://meez.design/web/bg-previews/151_Motion-Background-031045.jpg
VENUS https://meez.design/web/bg-previews/178_Thermal-Glow.jpg
MARS https://meez.design/web/bg-previews/162_Background-5.jpg
Favicon: use the Earth cut-out URL above, type image/png.
════════════════════════════════════════════════════════════════════════
3. FONTS — load from Google Fonts
════════════════════════════════════════════════════════════════════════
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
Load: Prata 400; Hanken Grotesk 400,500,600,700; Poppins 500,600.
Stacks:
--font-serif : 'Prata', Georgia, serif
--font-body : 'Hanken Grotesk', system-ui, -apple-system, 'Segoe UI', sans-serif
--font-logo : 'Poppins', sans-serif
Body text uses --font-body. Headline and the two planet labels use --font-serif.
The wordmark uses --font-logo.
════════════════════════════════════════════════════════════════════════
4. DESIGN SYSTEM — the single most important rule
════════════════════════════════════════════════════════════════════════
The layout is NOT built from rem/%/flex guesswork. It is a fixed composition measured
from a 1353 x 1163 reference, expressed in ONE custom property --u = one design pixel.
EVERY length in the file is calc(N * var(--u)). Do not substitute px values.
*, *::before, *::after { box-sizing:border-box; margin:0; padding:0 }
:root{
--dw:1353; --dh:1163; --gutter:25;
--u:max(min(.72px, calc(100vh / 700)), min(calc(100vw / 1353), calc(100vh / 1163)));
--dh-px:calc(1163 * var(--u));
--vshift:calc(max(0px, (100vh - var(--dh-px))) * .42);
--ink:#ffffff; --cyan:#79dce8; --cyan-logo:#5fd0e1;
--rule:rgba(255,255,255,.23); --btn-ink:#071227;
}
@supports (height:100dvh){
:root{
--u:max(min(.72px, calc(100dvh / 700)), min(calc(100vw / 1353), calc(100dvh / 1163)));
--vshift:calc(max(0px, (100dvh - var(--dh-px))) * .42);
}
}
html,body{height:100%}
body{background:#04101f; color:var(--ink); font-family:var(--font-body);
-webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
text-rendering:geometricPrecision; overflow:hidden}
--vshift pushes everything below the nav down on taller-than-design viewports so the
composition stays balanced. --gutter offsets the content column left by half its value
so the optical centre sits at x=664, not 676.
════════════════════════════════════════════════════════════════════════
5. MARKUP
════════════════════════════════════════════════════════════════════════
<div class="stage"> position:fixed; inset:0; overflow:hidden;
isolation:isolate
<div class="sky"> absolute; inset:0; z-index:0;
background-image:url(EARTH STILL);
background-size:cover; background-position:center;
background-repeat:no-repeat
3 x <video data-planet="earth|venus|mars">
Earth: class="is-active" autoplay muted loop playsinline preload="auto"
src=EARTH CLIP poster=EARTH STILL aria-hidden="true"
Venus & Mars: muted loop playsinline preload="none"
data-src=CLIP (NOT src) poster=STILL aria-hidden="true"
</div>
<div class="ui"> absolute; inset:0; z-index:3
<header class="navbar">
<div class="navrow">
<a class="logo" href="#">space<i>edu</i></a>
<nav class="links" id="site-nav">
<a href="#" aria-current="page">Planets</a>
<a href="#">Tution</a> (keep this spelling)
<a href="#">Tutorials</a>
<a href="#">Blog</a>
<a class="enroll" href="#">Enroll</a>
</nav>
<button class="burger" type="button" aria-label="Open navigation"
aria-expanded="false" aria-controls="site-nav">
<span></span><span></span><span></span>
</button>
</div>
</header>
<div class="copy">
<div class="col eyebrow"><span class="ent-mask"><span class="ent-line">PLANET</span></span></div>
<h1 class="col title"><span class="ent-mask"><span class="ent-line">EARTH</span></span></h1>
<div class="col rule"><span></span></div>
<p class="col lede">Learn more about the fascinating details that we call our home,
Planet Earth. Course enrollment <br>starts today. Early Bird tickets typically
last a week, don’t miss out!</p>
<div class="col cta">
<button class="planet planet-l" type="button" data-slot="l">
3 x <img data-planet="earth|venus|mars" alt="" src="CUTOUT URL">
</button>
<button class="planet planet-r" type="button" data-slot="r">
3 x <img data-planet="earth|venus|mars" alt="" src="CUTOUT URL">
</button>
<a href="#">GET STARTED</a>
<span class="label label-l"></span> (empty — filled by script)
<span class="label label-r"></span>
</div>
</div>
</div>
<button class="scroll" type="button" aria-label="Scroll to next section">
<svg viewBox="0 0 26 33" fill="none" aria-hidden="true">
<path d="M13 1.5 V31.5 M1.9 20.4 L13 31.5 L24.1 20.4" stroke="#ffffff"
stroke-width="3" stroke-linecap="square" stroke-linejoin="miter"/>
</svg>
</button>
</div>
CRITICAL: all three cut-outs are present in BOTH slots as sibling <img> tags. Switching
reveals one with a class — it must never reassign img.src, or the browser keeps painting
the old planet until the new 2048px file downloads.
════════════════════════════════════════════════════════════════════════
6. CSS — exact values
════════════════════════════════════════════════════════════════════════
BACKDROP
.sky video{position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
display:block; opacity:0; transition:opacity .22s linear}
.sky video.is-active{opacity:1}
@media (prefers-reduced-motion:reduce){ .sky video{display:none} }
SIDE PLANET SLOTS (two slots, not two planets)
.planet{position:absolute; z-index:-1; padding:0; border:0; background:none;
-webkit-appearance:none; appearance:none; line-height:0; cursor:pointer;
pointer-events:auto; /* .copy disables pointers wholesale */
transition:transform .45s cubic-bezier(.22,1,.36,1)}
.planet img{display:none; width:100%; height:auto}
.planet img.is-shown{display:block}
.planet:hover{transform:scale(1.045)}
.planet:active{transform:scale(.99)}
.planet-l{width:calc(143 * var(--u)); left:calc(-69.5 * var(--u)); top:calc(-38.3 * var(--u))}
.planet-r{width:calc(143 * var(--u)); right:calc(-64.7 * var(--u)); top:calc(-40.6 * var(--u))}
@media (prefers-reduced-motion:reduce){
.planet{transition:none} .planet:hover,.planet:active{transform:none} }
(The cut-outs fill ~97% of their square canvas; these box sizes make the rendered
sphere 139u across with its centre 2u from the left edge / 6.8u from the right.)
LAYOUT
.copy{position:absolute; inset:0; transform:translateY(var(--vshift)); pointer-events:none}
.copy a{pointer-events:auto}
.col{position:absolute; left:0; right:calc(var(--gutter) * var(--u)); text-align:center}
NAV
.navbar{position:absolute; top:0; left:0; right:0; z-index:6; height:calc(88 * var(--u))}
.navbar::after{content:""; position:absolute; left:calc(25 * var(--u));
right:calc(49 * var(--u)); top:calc(86 * var(--u)); height:calc(2 * var(--u));
background:var(--rule)}
.navrow{position:absolute; left:calc(25 * var(--u)); right:calc(49 * var(--u)); top:0;
height:calc(86 * var(--u)); display:flex; align-items:center; justify-content:space-between}
.logo{font-family:var(--font-logo); font-weight:600; font-size:calc(18.4 * var(--u));
letter-spacing:calc(-0.15 * var(--u)); line-height:1; color:#fff; text-decoration:none;
white-space:nowrap; position:relative; top:calc(-1 * var(--u))}
.logo i{font-style:normal; color:var(--cyan-logo)}
.burger{display:none; position:relative; width:calc(46 * var(--u)); height:calc(46 * var(--u));
padding:0; border:0; background:none; cursor:pointer; flex-direction:column;
align-items:center; justify-content:center; gap:calc(6 * var(--u)); flex:none}
.burger span{display:block; width:calc(24 * var(--u)); height:calc(2 * var(--u));
border-radius:calc(2 * var(--u)); background:#fff;
transition:transform .28s cubic-bezier(.4,0,.2,1), opacity .18s linear}
.navrow[data-open="true"] .burger span:nth-child(1){transform:translateY(calc(8 * var(--u))) rotate(45deg)}
.navrow[data-open="true"] .burger span:nth-child(2){opacity:0}
.navrow[data-open="true"] .burger span:nth-child(3){transform:translateY(calc(-8 * var(--u))) rotate(-45deg)}
.links{display:flex; align-items:center}
.links a{position:relative; display:flex; align-items:center; height:calc(86 * var(--u));
font-size:calc(18.4 * var(--u)); font-weight:400; line-height:1; color:#fff;
text-decoration:none; padding:0 calc(17.5 * var(--u));
letter-spacing:calc(-1 * var(--u)); white-space:nowrap}
.links a[aria-current="page"]::after{content:""; position:absolute; left:0; right:0;
top:calc(83.5 * var(--u)); height:calc(4 * var(--u)); background:var(--cyan);
border-radius:calc(1 * var(--u))}
.links a:nth-child(3){letter-spacing:calc(-1.75 * var(--u))}
.links a:nth-child(2){margin-left:calc(24 * var(--u))}
.links a:nth-child(3){margin-left:calc(26 * var(--u))}
.links a:nth-child(4){margin-left:calc(27 * var(--u))}
.links a.enroll{margin-left:calc(28.5 * var(--u)); width:calc(107 * var(--u));
height:calc(38 * var(--u)); border-radius:calc(19 * var(--u)); display:flex;
align-items:center; justify-content:center; font-size:calc(17 * var(--u));
font-weight:600; letter-spacing:calc(-0.75 * var(--u)); line-height:1;
color:var(--btn-ink); text-decoration:none; padding-top:calc(2 * var(--u));
background:linear-gradient(180deg,#ffffff 0%,#d8ecfe 9%,#dceefe 72%,#f4f9ff 100%);
box-shadow:0 calc(3 * var(--u)) calc(14 * var(--u)) rgba(255,255,255,.22),
inset 0 0 0 calc(1.5 * var(--u)) rgba(255,255,255,.92);
flex:none}
HERO COPY
.eyebrow{top:calc(188.8 * var(--u)); font-size:calc(30.45 * var(--u)); font-weight:500;
line-height:1; letter-spacing:calc(4 * var(--u)); text-indent:calc(4 * var(--u)); color:#fff}
h1.title{top:calc(268 * var(--u)); font-family:var(--font-serif); font-weight:400;
font-size:calc(112.4 * var(--u)); line-height:1; letter-spacing:calc(2 * var(--u));
text-indent:calc(2 * var(--u)); color:#fff}
.rule{top:calc(405.5 * var(--u)); height:calc(5 * var(--u)); font-size:0; line-height:0;
padding-right:calc(2 * var(--u))}
.rule span{display:inline-block; vertical-align:top; width:calc(100 * var(--u));
height:100%; border-radius:calc(2.5 * var(--u)); background:var(--cyan)}
p.lede{top:calc(433.2 * var(--u)); font-size:calc(18.36 * var(--u)); font-weight:400;
line-height:calc(30 * var(--u)); color:rgba(255,255,255,.95)}
CTA ROW
.cta{top:calc(597 * var(--u)); height:calc(66 * var(--u)); isolation:isolate}
.cta a{display:inline-flex; align-items:center; justify-content:center;
width:calc(216 * var(--u)); height:calc(66 * var(--u)); border-radius:calc(33 * var(--u));
font-size:calc(17 * var(--u)); font-weight:700; letter-spacing:0; text-indent:0;
line-height:1; color:var(--btn-ink); text-decoration:none; padding-top:calc(2 * var(--u));
background:linear-gradient(180deg,#ffffff 0%,#d6e8f8 4%,#d9ecfe 72%,#ffffff 100%);
box-shadow:0 calc(10 * var(--u)) calc(18 * var(--u)) calc(-8 * var(--u)) rgba(255,255,255,.50),
0 0 calc(26 * var(--u)) rgba(255,255,255,.18),
inset 0 0 0 calc(2 * var(--u)) rgba(255,255,255,.9)}
.label{position:absolute; top:calc(33 * var(--u)); font-family:var(--font-serif);
font-weight:400; font-size:calc(17.8 * var(--u)); letter-spacing:calc(4.6 * var(--u));
line-height:1; color:#fff; white-space:nowrap}
.label.label-l{left:calc(111 * var(--u))}
.label.label-r{right:calc(104 * var(--u))}
SCROLL CONTROL
.scroll{position:absolute; z-index:4; left:50%;
margin-left:calc((-48 - (var(--gutter) / 2)) * var(--u)); bottom:calc(68 * var(--u));
width:calc(96 * var(--u)); height:calc(96 * var(--u)); border-radius:50%;
background:rgba(24,30,42,.70); -webkit-backdrop-filter:blur(calc(6 * var(--u)));
backdrop-filter:blur(calc(6 * var(--u))); border:0; display:flex; align-items:center;
justify-content:center; cursor:pointer}
.scroll svg{width:calc(20 * var(--u)); height:calc(25 * var(--u)); display:block}
FOCUS
.scroll:focus-visible,.links a:focus-visible,.enroll:focus-visible,
.cta a:focus-visible,.logo:focus-visible{
outline:calc(2 * var(--u)) solid var(--cyan); outline-offset:calc(3 * var(--u))}
.planet:focus-visible{outline:calc(2 * var(--u)) solid var(--cyan);
outline-offset:calc(6 * var(--u)); border-radius:50%}
════════════════════════════════════════════════════════════════════════
7. RESPONSIVE — six tiers, in this exact source order
════════════════════════════════════════════════════════════════════════
A) NAV COLLAPSE @media (max-width:1030px), (max-height:620px)
Threshold is derived: below ~1030px the desktop labels fall under ~14px with sub-40px
touch targets. The SAME <a> elements re-compose into a panel — never duplicate markup.
.navrow{left:calc(25 * var(--u)); right:calc(25 * var(--u))}
.burger{display:flex}
.links{position:absolute; top:calc(96 * var(--u)); right:0; z-index:5;
width:min(calc(324 * var(--u)), calc(100vw - 50 * var(--u)));
flex-direction:column; align-items:stretch; padding:calc(12 * var(--u));
border-radius:calc(20 * var(--u)); background:rgba(9,21,42,.84);
backdrop-filter:blur(calc(18 * var(--u)));
border:calc(1 * var(--u)) solid rgba(255,255,255,.14);
box-shadow:0 calc(18 * var(--u)) calc(44 * var(--u)) rgba(2,8,20,.55);
opacity:0; visibility:hidden; transform:translateY(calc(-10 * var(--u)));
transition:opacity .24s ease, transform .28s cubic-bezier(.4,0,.2,1), visibility .28s}
.navrow[data-open="true"] .links{opacity:1; visibility:visible; transform:none}
.links a:nth-child(n){margin-left:0; height:auto; justify-content:flex-start;
padding:calc(14 * var(--u)) calc(16 * var(--u)); font-size:calc(19 * var(--u));
letter-spacing:calc(-.6 * var(--u))}
.links a + a{border-top:calc(1 * var(--u)) solid rgba(255,255,255,.08)}
.links a[aria-current="page"]::after{top:auto; bottom:calc(9 * var(--u));
left:calc(16 * var(--u)); right:auto; width:calc(26 * var(--u)); height:calc(3 * var(--u))}
.links a.enroll{margin:calc(14 * var(--u)) 0 calc(2 * var(--u)); width:100%;
height:calc(46 * var(--u)); border-radius:calc(23 * var(--u)); justify-content:center;
padding-top:calc(2 * var(--u)); font-size:calc(18 * var(--u));
letter-spacing:calc(-.4 * var(--u)); border-top:0}
.links a.enroll::after{content:none}
B) TABLET @media (min-width:580px) and (max-width:1030px) and (min-height:621px)
The hero is a centred symmetric composition — it is re-proportioned, NOT stacked. The
flanking planet / button / planet row is the section's signature and must survive.
:root{--gutter:0;
--u:min(max(min(.85px, calc(100vh / 780)), min(calc(100vw / 900), calc(100vh / 1163))), 1.15px);
--dh-px:calc(1120 * var(--u));
--vshift:calc(max(0px, (100vh - var(--dh-px))) * .38)}
(repeat inside @supports (height:100dvh) with 100dvh)
.navbar::after{left:calc(25 * var(--u)); right:calc(25 * var(--u))}
p.lede br{display:none}
p.lede{max-width:calc(620 * var(--u)); margin-left:auto; margin-right:auto; text-wrap:pretty}
.label.label-r{right:calc(116 * var(--u))}
C) PHONE @media (max-width:579px), (max-height:620px)
Below the nav the interface FLOWS (flex column) instead of being absolutely pinned, so
it adapts to however many lines the copy wraps onto.
:root{--gutter:0;
--u:max(min(.92px, calc(100vh / 620)), min(calc(100vw / 430), calc(100vh / 880)));
--dh-px:calc(880 * var(--u));
--vshift:calc(max(0px, (100vh - var(--dh-px))) * .34)}
(repeat inside @supports (height:100dvh))
.navbar{height:calc(76 * var(--u))}
.navbar::after{left:calc(24 * var(--u)); right:calc(24 * var(--u)); top:calc(74 * var(--u))}
.navrow{left:calc(24 * var(--u)); right:calc(24 * var(--u)); height:calc(74 * var(--u))}
.links{top:calc(84 * var(--u))}
.copy{top:calc(76 * var(--u)); display:flex; flex-direction:column; align-items:center;
padding:calc(56 * var(--u)) calc(26 * var(--u)) 0}
.col{position:static; width:100%; right:auto}
.eyebrow{font-size:calc(20 * var(--u)); letter-spacing:calc(5 * var(--u)); text-indent:calc(5 * var(--u))}
h1.title{font-size:calc(86 * var(--u)); margin-top:calc(15 * var(--u))}
.rule{margin-top:calc(20 * var(--u)); height:calc(5 * var(--u)); padding-right:0}
.rule span{width:calc(84 * var(--u))}
p.lede{margin-top:calc(19 * var(--u)); font-size:calc(15.5 * var(--u));
line-height:calc(26 * var(--u)); max-width:calc(400 * var(--u)); text-wrap:balance}
p.lede br{display:none}
.cta{top:auto; margin-top:calc(32 * var(--u)); height:calc(60 * var(--u)); position:relative}
.cta a{width:calc(190 * var(--u)); height:calc(60 * var(--u)); border-radius:calc(30 * var(--u))}
.label{top:50%; transform:translateY(-50%); font-size:calc(16 * var(--u));
letter-spacing:calc(4 * var(--u))}
.label.label-l{left:calc(56 * var(--u))}
.label.label-r{right:calc(60 * var(--u))}
.planet-l{width:calc(89 * var(--u)); left:calc(-44.5 * var(--u)); top:calc(-17 * var(--u))}
.planet-r{width:calc(89 * var(--u)); right:calc(-44.5 * var(--u)); top:calc(-18.3 * var(--u))}
.scroll{width:calc(74 * var(--u)); height:calc(74 * var(--u));
margin-left:calc(-37 * var(--u)); bottom:calc(49 * var(--u))}
.scroll svg{width:calc(15.5 * var(--u)); height:calc(19.5 * var(--u))}
D) @media (max-height:660px){ .scroll{display:none} } /* no room for it */
E) SHORT @media (max-height:620px)
:root{--u:max(min(.85px, calc(100vh / 470)), min(calc(100vw / 640), calc(100vh / 560)));
--dh-px:calc(560 * var(--u)); --vshift:0px}
.copy{padding-top:calc(26 * var(--u))}
h1.title{font-size:calc(64 * var(--u)); margin-top:calc(8 * var(--u))}
.rule{margin-top:calc(12 * var(--u))}
p.lede{margin-top:calc(12 * var(--u))}
.cta{margin-top:calc(20 * var(--u))}
.label{top:50%; transform:translateY(-50%); font-size:calc(15 * var(--u))}
.label.label-l{left:calc(58 * var(--u))}
.label.label-r{right:calc(58 * var(--u))}
@media (min-width:821px) and (max-height:660px){ .copy{transform:none} }
F) NARROW PHONE @media (max-width:500px) — declared LAST so it wins inside tier E
Below ~500px the label / button / label triad can no longer share a line, so the two
labels drop to their own band beneath the button, still left- and right-anchored.
.label{top:calc(100% + 34 * var(--u)); transform:none; font-size:calc(15 * var(--u))}
.label.label-l{left:calc(6 * var(--u))}
.label.label-r{right:calc(6 * var(--u))}
@media (prefers-reduced-motion:reduce){ .links,.burger span{transition:none} }
════════════════════════════════════════════════════════════════════════
8. ENTRANCE ANIMATION — runs once, then deletes itself
════════════════════════════════════════════════════════════════════════
Motion language: DRAW hairlines scale from centre · REVEAL type rises out of a mask ·
RISE copy lifts a short distance · SETTLE pills arrive with a small scale resolve ·
FADE the full-bleed backdrop resolves in (it fades, never translates — a translate
would drag a bare edge into frame).
In <head>, BEFORE the stylesheet, a blocking inline script so the opening frame is
composed rather than flashing the finished page:
(function(){try{
if(!window.matchMedia||!matchMedia('(prefers-reduced-motion: reduce)').matches){
document.documentElement.classList.add('anim');
}
}catch(e){}})();
@keyframes ent-reveal{from{transform:translateY(115%)}to{transform:translateY(0)}}
@keyframes ent-rise{from{opacity:0;transform:translateY(var(--rise,10px))}to{opacity:1;transform:none}}
@keyframes ent-settle{from{opacity:0;transform:translateY(var(--rise,8px)) scale(.965)}to{opacity:1;transform:none}}
@keyframes ent-draw{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes ent-fade{from{opacity:0}to{opacity:1}}
.anim{--e-expo:cubic-bezier(.16,1,.3,1); --e-quint:cubic-bezier(.22,1,.36,1);
--e-slow:cubic-bezier(.4,0,.2,1)}
.ent-mask,.ent-line{display:block}
.anim .ent-mask{overflow:hidden; padding-top:.18em; margin-top:-.18em}
.anim .ent-line{transform:translateY(115%); will-change:transform}
.anim .navbar::after,.anim .links a[aria-current="page"]::after,.anim .rule span{transform:scaleX(0)}
.anim .logo,.anim .links a,.anim .burger,.anim p.lede,.anim .label,.anim .cta a,
.anim .scroll,.anim .sky{opacity:0}
.anim .sky{will-change:opacity}
Sequence (all `both` fill):
.anim.play .sky ent-fade 1.6s --e-slow .25s
.anim.play .navbar::after ent-draw .9s --e-expo .12s
.anim.play .logo --rise 8u ent-rise .6s --e-quint .20s
.anim.play .links a --rise 8u ent-rise .55s --e-quint
nth-child(1) .26s · (2) .31s · (3) .36s · (4) .41s
.anim.play .links a.enroll, .burger --rise 8u ent-settle .6s --e-quint .46s
.anim.play .links a[aria-current]::after ent-draw .55s --e-expo .60s
.anim.play .eyebrow .ent-line ent-reveal .75s --e-expo .30s
.anim.play h1.title .ent-line ent-reveal .95s --e-expo .44s
.anim.play .rule span ent-draw .65s --e-expo .78s
.anim.play p.lede --rise 12u ent-rise .7s --e-quint .86s
.anim.play .label.label-l --rise 8u ent-rise .6s --e-quint 1.04s
.anim.play .label.label-r --rise 8u ent-rise .6s --e-quint 1.10s
.anim.play .cta a --rise 8u ent-settle .7s --e-quint 1.14s
.anim.play .scroll ent-settle .6s --e-quint 1.42s
Driver script: if <html> lacks .anim, return. Otherwise wait for document.fonts.ready
(with a 500ms guard timeout so a font stall cannot block the page), then two nested
requestAnimationFrame calls, then add .play. After 2150ms remove BOTH .anim and .play,
leaving the page in its authored static state with no timers or residual transforms.
════════════════════════════════════════════════════════════════════════
9. PLANET SWITCHER — JS behaviour
════════════════════════════════════════════════════════════════════════
const ORDER = ['earth','venus','mars'];
Per planet store: name (uppercase), cut-out URL, still URL, and lede HTML:
earth: "Learn more about the fascinating details that we call our home, Planet Earth.
Course enrollment <br>starts today. Early Bird tickets typically last a week,
don’t miss out!"
venus: "The hottest world in our solar system, wrapped in clouds of sulfuric acid.
Course enrollment <br>starts today. Early Bird tickets typically last a week,
don’t miss out!"
mars: "The rust-red desert world, home to the tallest volcano we know of. Course
enrollment <br>starts today. Early Bird tickets typically last a week,
don’t miss out!"
show(next):
1. bail if unknown or already featured
2. for each clip: if it is `next` and has no src but has data-src, assign src from
data-src (first-use fetch). Toggle .is-active on the matching clip; .play() it
(catch the rejected promise); .pause() every other clip.
3. set .sky background-image to that planet's still — keeps reduced-motion users,
who never see the clip, on the correct planet
4. set the h1's .ent-line textContent to the planet name
5. set p.lede innerHTML to that planet's lede
6. rest = ORDER minus `next`; slot L gets rest[0], slot R gets rest[1]. For each slot:
toggle .is-shown on the img whose data-planet matches — DO NOT touch img.src —
set the button's data-planet, set aria-label "Show <NAME>", set the label text.
warm(planet): if that clip has no src but has data-src, set preload='auto', assign
src, call load(). Bind it to pointerenter AND focus on both buttons so the fetch starts
on intent rather than on click. After first paint, requestIdleCallback(warm all,
{timeout:4000}) — fall back to setTimeout 2500ms — to pull the remaining clips down.
Bind click on both buttons -> show(this.dataset.planet). Call show('earth') once at the
end of setup to establish the initial state.
════════════════════════════════════════════════════════════════════════
10. BURGER MENU — JS behaviour
════════════════════════════════════════════════════════════════════════
set(open) writes navrow.dataset.open, the button's aria-expanded, and its aria-label
("Open navigation" / "Close navigation"). Initialise with set(false). Toggle on button
click (stopPropagation). Close on: a document click outside the menu and button, Escape
(then return focus to the button), and any click on a link inside the menu.
════════════════════════════════════════════════════════════════════════
11. ACCESSIBILITY
════════════════════════════════════════════════════════════════════════
· Side planets are real <button type="button"> with a dynamic aria-label — keyboard
operable, focus-visible ringed in --cyan.
· Videos are aria-hidden="true", muted, playsinline (required for iOS autoplay).
· Cut-out <img> tags carry alt="" — they are decorative; the labels carry the meaning.
· prefers-reduced-motion: no entrance sequence at all (the .anim class is never added),
clips hidden in favour of the still, no planet hover/press transforms, no nav
transitions.
· .copy spans the whole frame with pointer-events:none so it can never swallow nav
clicks; only .copy a and .planet re-enable pointers.
════════════════════════════════════════════════════════════════════════
12. ACCEPTANCE CHECKS
════════════════════════════════════════════════════════════════════════
· Loads with EARTH featured, VENUS left, MARS right. Only the Earth clip has a src.
· Clicking a side planet swaps the visible cut-out in the SAME FRAME (measurable at
<2ms) — no flash of the previous planet.
· Earth -> Venus -> Mars -> Earth returns to the exact initial state.
· Backdrop crossfades in .22s; headline, lede, both cut-outs and both labels all update
together.
· body never scrolls horizontally at any width from 320px to 2560px.
· Entrance runs once; afterwards <html> carries neither .anim nor .play.
---
## HTML Code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
<title>SpaceEdu — Planet Earth</title>
<link rel="icon" type="image/png" href="https://meez.design/web/bg-previews/103_Animated-Background-134830.jpg">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link rel="preconnect" href="https://meez.design/web/bg-previews/004_Motion-Background-12.jpg" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Hanken+Grotesk:wght@400;500;600;700&family=Poppins:wght@500;600&family=Prata&display=block" rel="stylesheet">
<script>
/* set before paint so the opening frame is composed, never a flash of
finished page. If scripting is unavailable the class is never added and
the site simply renders in its final state. */
(function(){try{
if(!window.matchMedia||!matchMedia('(prefers-reduced-motion: reduce)').matches){
document.documentElement.classList.add('anim');
}
}catch(e){}})();
</script>
<style>
/* ---------- design system ----------
Every length below is a measured design pixel from the reference
(1353 x 1163). --u is one design pixel, resolved against the viewport. */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
--dw:1353; /* design width */
--dh:1163; /* design height */
--gutter:25; /* right gutter -> content centre sits at x=664 */
--u:max(min(.72px, calc(100vh / 700)), min(calc(100vw / 1353), calc(100vh / 1163)));
--dh-px:calc(1163 * var(--u)); /* composition height at current scale */
--vshift:calc(max(0px, (100vh - var(--dh-px))) * .42);
--ink:#ffffff;
--cyan:#79dce8;
--cyan-logo:#5fd0e1;
--rule:rgba(255,255,255,.23);
--btn-ink:#071227;
--font-serif:'Prata',Georgia,serif;
--font-body:'Hanken Grotesk',system-ui,-apple-system,'Segoe UI',sans-serif;
--font-logo:'Poppins',sans-serif;
}
@supports (height:100dvh){
:root{
--u:max(min(.72px, calc(100dvh / 700)), min(calc(100vw / 1353), calc(100dvh / 1163)));
--vshift:calc(max(0px, (100dvh - var(--dh-px))) * .42);
}
}
html,body{height:100%}
body{
background:#04101f;
color:var(--ink);
font-family:var(--font-body);
-webkit-font-smoothing:antialiased;
-moz-osx-font-smoothing:grayscale;
text-rendering:geometricPrecision;
overflow:hidden;
}
.stage{
position:fixed;
inset:0;
overflow:hidden;
isolation:isolate;
}
/* ---------- layer 0 : backdrop ---------- */
.sky{
position:absolute;
inset:0;
background-image:url(https://meez.design/web/bg-previews/203_81.jpg);
background-size:cover;
background-position:center center;
background-repeat:no-repeat;
z-index:0;
}
/* One clip per planet, stacked. Only the featured one is opaque; the rest are
paused and transparent, so the swap is a crossfade rather than a reload. */
.sky video{
position:absolute;
inset:0;
width:100%;
height:100%;
object-fit:cover;
display:block;
opacity:0;
transition:opacity .22s linear;
}
.sky video.is-active{opacity:1}
@media (prefers-reduced-motion:reduce){
/* the still on .sky is swapped alongside the clip, so this stays in sync */
.sky video{display:none}
}
/* ---------- layer 1 : side planets ----------
Two slots, not two planets: whichever pair is not currently featured fills
them, so the artwork and label are set from script rather than authored. */
.planet{
position:absolute;
z-index:-1;
padding:0;
border:0;
background:none;
-webkit-appearance:none;
appearance:none;
line-height:0;
cursor:pointer;
pointer-events:auto; /* .copy switches these off wholesale */
transition:transform .45s cubic-bezier(.22,1,.36,1);
}
/* every planet is present in both slots and only revealed — swapping a src at
click time would leave the old planet on screen until the new file arrived */
.planet img{display:none;width:100%;height:auto}
.planet img.is-shown{display:block}
.planet:hover{transform:scale(1.045)}
.planet:active{transform:scale(.99)}
/* The cutouts sit tight in their canvas (97% fill), so the boxes are trimmed to
hold the sphere at the size the composition was drawn around: 139u across,
centred 2u from the left edge and 6.8u from the right. */
.planet-l{
width:calc(143 * var(--u));
left:calc(-69.5 * var(--u));
top:calc(-38.3 * var(--u));
}
.planet-r{
width:calc(143 * var(--u));
right:calc(-64.7 * var(--u));
top:calc(-40.6 * var(--u));
}
@media (prefers-reduced-motion:reduce){
.planet{transition:none}
.planet:hover,.planet:active{transform:none}
}
/* ---------- layer 3 : interface ---------- */
.ui{position:absolute;inset:0;z-index:3}
/* everything below the nav shifts down together on taller-than-design viewports,
so the composition stays balanced instead of stranding the copy at the top */
.copy{
position:absolute;
inset:0;
transform:translateY(var(--vshift));
pointer-events:none; /* it spans the frame — never swallow nav clicks */
}
.copy a{pointer-events:auto}
/* content column: centred, offset left by half the gutter */
.col{
position:absolute;
left:0;
right:calc(var(--gutter) * var(--u));
text-align:center;
}
/* ---------- navigation ---------- */
.navbar{
position:absolute;
top:0;left:0;right:0;
z-index:6;
height:calc(88 * var(--u));
}
.navbar::after{ /* hairline under the nav */
content:"";
position:absolute;
left:calc(25 * var(--u));
right:calc(49 * var(--u));
top:calc(86 * var(--u));
height:calc(2 * var(--u));
background:var(--rule);
}
.navrow{
position:absolute;
left:calc(25 * var(--u));
right:calc(49 * var(--u));
top:0;
height:calc(86 * var(--u));
display:flex;
align-items:center;
justify-content:space-between;
}
.logo{
font-family:var(--font-logo);
font-weight:600;
font-size:calc(18.4 * var(--u));
letter-spacing:calc(-0.15 * var(--u));
line-height:1;
color:#fff;
text-decoration:none;
white-space:nowrap;
position:relative;
top:calc(-1 * var(--u));
}
.logo i{font-style:normal;color:var(--cyan-logo)}
/* --- menu trigger: only ever visible once the desktop links stand down --- */
.burger{
display:none;
position:relative;
width:calc(46 * var(--u));
height:calc(46 * var(--u));
padding:0;
border:0;
background:none;
cursor:pointer;
flex-direction:column;
align-items:center;
justify-content:center;
gap:calc(6 * var(--u));
flex:none;
}
.burger span{
display:block;
width:calc(24 * var(--u));
height:calc(2 * var(--u));
border-radius:calc(2 * var(--u));
background:#fff;
transition:transform .28s cubic-bezier(.4,0,.2,1), opacity .18s linear;
}
.navrow[data-open="true"] .burger span:nth-child(1){transform:translateY(calc(8 * var(--u))) rotate(45deg)}
.navrow[data-open="true"] .burger span:nth-child(2){opacity:0}
.navrow[data-open="true"] .burger span:nth-child(3){transform:translateY(calc(-8 * var(--u))) rotate(-45deg)}
.links{display:flex;align-items:center}
.links a{
position:relative;
display:flex;
align-items:center;
height:calc(86 * var(--u));
font-size:calc(18.4 * var(--u));
font-weight:400;
line-height:1;
color:#fff;
text-decoration:none;
padding:0 calc(17.5 * var(--u));
letter-spacing:calc(-1 * var(--u));
white-space:nowrap;
}
/* the active marker is drawn by the link itself, so it can never drift away
from its label the way a separately-positioned bar would */
.links a[aria-current="page"]::after{
content:"";
position:absolute;
left:0;
right:0;
top:calc(83.5 * var(--u));
height:calc(4 * var(--u));
background:var(--cyan);
border-radius:calc(1 * var(--u));
}
.links a:nth-child(3){letter-spacing:calc(-1.75 * var(--u))}
.links a:nth-child(2){margin-left:calc(24 * var(--u))}
.links a:nth-child(3){margin-left:calc(26 * var(--u))}
.links a:nth-child(4){margin-left:calc(27 * var(--u))}
.links a.enroll{
margin-left:calc(28.5 * var(--u));
width:calc(107 * var(--u));
height:calc(38 * var(--u));
border-radius:calc(19 * var(--u));
display:flex;
align-items:center;
justify-content:center;
font-size:calc(17 * var(--u));
font-weight:600;
letter-spacing:calc(-0.75 * var(--u));
line-height:1;
color:var(--btn-ink);
text-decoration:none;
padding-top:calc(2 * var(--u));
background:linear-gradient(180deg,#ffffff 0%,#d8ecfe 9%,#dceefe 72%,#f4f9ff 100%);
box-shadow:0 calc(3 * var(--u)) calc(14 * var(--u)) rgba(255,255,255,.22),
inset 0 0 0 calc(1.5 * var(--u)) rgba(255,255,255,.92);
flex:none;
}
/* ---------- hero copy ---------- */
.eyebrow{
top:calc(188.8 * var(--u));
font-size:calc(30.45 * var(--u));
font-weight:500;
line-height:1;
letter-spacing:calc(4 * var(--u));
text-indent:calc(4 * var(--u)); /* cancel trailing tracking */
color:#fff;
}
h1.title{
top:calc(268 * var(--u));
font-family:var(--font-serif);
font-weight:400;
font-size:calc(112.4 * var(--u));
line-height:1;
letter-spacing:calc(2 * var(--u));
text-indent:calc(2 * var(--u));
color:#fff;
}
.rule{
top:calc(405.5 * var(--u));
height:calc(5 * var(--u));
font-size:0;
line-height:0;
padding-right:calc(2 * var(--u));
}
.rule span{
display:inline-block;
vertical-align:top;
width:calc(100 * var(--u));
height:100%;
border-radius:calc(2.5 * var(--u));
background:var(--cyan);
}
p.lede{
top:calc(433.2 * var(--u));
font-size:calc(18.36 * var(--u));
font-weight:400;
line-height:calc(30 * var(--u));
color:rgba(255,255,255,.95);
}
/* ---------- call to action row ---------- */
.cta{
top:calc(597 * var(--u));
height:calc(66 * var(--u));
isolation:isolate;
}
.cta a{
display:inline-flex;
align-items:center;
justify-content:center;
width:calc(216 * var(--u));
height:calc(66 * var(--u));
border-radius:calc(33 * var(--u));
font-size:calc(17 * var(--u));
font-weight:700;
letter-spacing:calc(0 * var(--u));
text-indent:calc(0 * var(--u));
line-height:1;
color:var(--btn-ink);
text-decoration:none;
padding-top:calc(2 * var(--u));
background:linear-gradient(180deg,#ffffff 0%,#d6e8f8 4%,#d9ecfe 72%,#ffffff 100%);
box-shadow:0 calc(10 * var(--u)) calc(18 * var(--u)) calc(-8 * var(--u)) rgba(255,255,255,.50), 0 0 calc(26 * var(--u)) rgba(255,255,255,.18), inset 0 0 0 calc(2 * var(--u)) rgba(255,255,255,.9);
}
.label{
position:absolute;
top:calc(33 * var(--u));
font-family:var(--font-serif);
font-weight:400;
font-size:calc(17.8 * var(--u));
letter-spacing:calc(4.6 * var(--u));
line-height:1;
color:#fff;
white-space:nowrap;
}
.label.label-l{left:calc(111 * var(--u))}
.label.label-r{right:calc(104 * var(--u))}
/* ---------- scroll control ---------- */
.scroll{
position:absolute;
z-index:4;
left:50%;
margin-left:calc((-48 - (var(--gutter) / 2)) * var(--u));
bottom:calc(68 * var(--u));
width:calc(96 * var(--u));
height:calc(96 * var(--u));
border-radius:50%;
background:rgba(24,30,42,.70);
-webkit-backdrop-filter:blur(calc(6 * var(--u)));
backdrop-filter:blur(calc(6 * var(--u)));
border:0;
display:flex;
align-items:center;
justify-content:center;
cursor:pointer;
}
.scroll svg{
width:calc(20 * var(--u));
height:calc(25 * var(--u));
display:block;
}
/* =========================================================
NAVIGATION TRANSFORMATION
Derived, not assumed: the desktop nav stays until its labels
would fall under ~14px with sub-40px touch targets, which is
--u < .761, i.e. a viewport narrower than ~1030px. Below that
the same <a> elements are re-composed into a panel — no second
copy of the markup, so the links and the CTA remain one source.
========================================================= */
@media (max-width:1030px), (max-height:620px){
.navrow{
left:calc(25 * var(--u));
right:calc(25 * var(--u));
}
.burger{display:flex}
.links{
position:absolute;
top:calc(96 * var(--u));
right:0;
z-index:5;
width:min(calc(324 * var(--u)), calc(100vw - 50 * var(--u)));
flex-direction:column;
align-items:stretch;
padding:calc(12 * var(--u));
border-radius:calc(20 * var(--u));
background:rgba(9,21,42,.84);
-webkit-backdrop-filter:blur(calc(18 * var(--u)));
backdrop-filter:blur(calc(18 * var(--u)));
border:calc(1 * var(--u)) solid rgba(255,255,255,.14);
box-shadow:0 calc(18 * var(--u)) calc(44 * var(--u)) rgba(2,8,20,.55);
opacity:0;
visibility:hidden;
transform:translateY(calc(-10 * var(--u)));
transition:opacity .24s ease, transform .28s cubic-bezier(.4,0,.2,1), visibility .28s;
}
.navrow[data-open="true"] .links{
opacity:1;
visibility:visible;
transform:none;
}
/* the row-spacing rules are a desktop concern; neutralise them here */
.links a:nth-child(n){
margin-left:0;
height:auto;
justify-content:flex-start;
padding:calc(14 * var(--u)) calc(16 * var(--u));
font-size:calc(19 * var(--u));
letter-spacing:calc(-.6 * var(--u));
}
.links a + a{border-top:calc(1 * var(--u)) solid rgba(255,255,255,.08)}
.links a[aria-current="page"]::after{
top:auto;
bottom:calc(9 * var(--u));
left:calc(16 * var(--u));
right:auto;
width:calc(26 * var(--u));
height:calc(3 * var(--u));
}
.links a.enroll{
margin:calc(14 * var(--u)) 0 calc(2 * var(--u));
width:100%;
height:calc(46 * var(--u));
border-radius:calc(23 * var(--u));
justify-content:center;
padding-top:calc(2 * var(--u));
font-size:calc(18 * var(--u));
letter-spacing:calc(-.4 * var(--u));
border-top:0;
}
.links a.enroll::after{content:none}
}
/* =========================================================
RESPONSIVE
The scene is anchored to the real viewport edges so it always
fills — never a blank band at top or bottom. Below 820px the
interface reflows.
========================================================= */
/* =========================================================
TABLET ARCHITECTURE (601–1030px, normal height)
The hero is a centred, symmetric composition, so it does not
want stacking — it wants to be re-proportioned. The scale is
re-based on a 900px design width so type returns to comfortable
size, the paragraph is released from its desktop line break to
wrap on its own measure, and the planet · CTA · planet row keeps
its flanking arrangement, which is the section's signature.
========================================================= */
@media (min-width:580px) and (max-width:1030px) and (min-height:621px){
:root{
--gutter:0;
--u:min(
max(min(.85px, calc(100vh / 780)),
min(calc(100vw / 900), calc(100vh / 1163))),
1.15px);
--dh-px:calc(1120 * var(--u));
--vshift:calc(max(0px, (100vh - var(--dh-px))) * .38);
}
@supports (height:100dvh){
:root{
--u:min(
max(min(.85px, calc(100dvh / 780)),
min(calc(100vw / 900), calc(100dvh / 1163))),
1.15px);
--vshift:calc(max(0px, (100dvh - var(--dh-px))) * .38);
}
}
.navbar::after{left:calc(25 * var(--u));right:calc(25 * var(--u))}
/* released from the desktop line break; wraps on its own measure */
p.lede br{display:none}
p.lede{
max-width:calc(620 * var(--u));
margin-left:auto;
margin-right:auto;
text-wrap:pretty;
}
/* the flanking labels sit symmetrically once the gutter is gone */
.label.label-r{right:calc(116 * var(--u))}
}
@media (max-width:579px), (max-height:620px){
:root{
--gutter:0;
--u:max(min(.92px, calc(100vh / 620)), min(calc(100vw / 430), calc(100vh / 880)));
--dh-px:calc(880 * var(--u));
--vshift:calc(max(0px, (100vh - var(--dh-px))) * .34);
}
@supports (height:100dvh){
:root{
--u:max(min(.92px, calc(100dvh / 620)), min(calc(100vw / 430), calc(100dvh / 880)));
--vshift:calc(max(0px, (100dvh - var(--dh-px))) * .34);
}
}
.navbar{height:calc(76 * var(--u))}
.navbar::after{left:calc(24 * var(--u));right:calc(24 * var(--u));top:calc(74 * var(--u))}
.navrow{left:calc(24 * var(--u));right:calc(24 * var(--u));height:calc(74 * var(--u))}
.links{top:calc(84 * var(--u))}
/* below the nav the interface flows instead of being pinned, so the block
adapts to however many lines the copy wraps onto */
.copy{
top:calc(76 * var(--u));
display:flex;
flex-direction:column;
align-items:center;
padding:calc(56 * var(--u)) calc(26 * var(--u)) 0;
}
.col{position:static;width:100%;right:auto}
.eyebrow{font-size:calc(20 * var(--u));letter-spacing:calc(5 * var(--u));text-indent:calc(5 * var(--u))}
h1.title{font-size:calc(86 * var(--u));margin-top:calc(15 * var(--u))}
.rule{margin-top:calc(20 * var(--u));height:calc(5 * var(--u));padding-right:0}
.rule span{width:calc(84 * var(--u))}
p.lede{
margin-top:calc(19 * var(--u));
font-size:calc(15.5 * var(--u));
line-height:calc(26 * var(--u));
max-width:calc(400 * var(--u));
text-wrap:balance; /* even line lengths — no stranded closing words */
}
p.lede br{display:none}
.cta{top:auto;margin-top:calc(32 * var(--u));height:calc(60 * var(--u));position:relative}
.cta a{width:calc(190 * var(--u));height:calc(60 * var(--u));border-radius:calc(30 * var(--u))}
.label{
top:50%;
transform:translateY(-50%);
font-size:calc(16 * var(--u));
letter-spacing:calc(4 * var(--u));
}
.label.label-l{left:calc(56 * var(--u))}
.label.label-r{right:calc(60 * var(--u))}
.planet-l{width:calc(89 * var(--u));left:calc(-44.5 * var(--u));top:calc(-17 * var(--u))}
.planet-r{width:calc(89 * var(--u));right:calc(-44.5 * var(--u));top:calc(-18.3 * var(--u))}
.scroll{
width:calc(74 * var(--u));height:calc(74 * var(--u));
margin-left:calc(-37 * var(--u));
bottom:calc(49 * var(--u));
}
.scroll svg{width:calc(15.5 * var(--u));height:calc(19.5 * var(--u))}
}
/* very short viewports (landscape phones, short desktop windows):
compress the stack and retire the scroll control, which has no room */
@media (max-height:660px){
.scroll{display:none}
}
@media (max-height:620px){
:root{
--u:max(min(.85px, calc(100vh / 470)), min(calc(100vw / 640), calc(100vh / 560)));
--dh-px:calc(560 * var(--u));
--vshift:0px;
}
.copy{padding-top:calc(26 * var(--u))}
h1.title{font-size:calc(64 * var(--u));margin-top:calc(8 * var(--u))}
.rule{margin-top:calc(12 * var(--u))}
p.lede{margin-top:calc(12 * var(--u))}
.cta{margin-top:calc(20 * var(--u))}
.label{top:50%;transform:translateY(-50%);font-size:calc(15 * var(--u))}
.label.label-l{left:calc(58 * var(--u))}
.label.label-r{right:calc(58 * var(--u))}
}
@media (min-width:821px) and (max-height:660px){
.copy{transform:none}
}
/* Narrow phones only: below ~500px the label / button / label triad can no
longer share a line without crowding, so the two labels drop to their own
band beneath the button — still left- and right-anchored, so the flanking
relationship the section is built on survives the change. Declared last so
it also wins inside the short-window tier. */
@media (max-width:500px){
.label{top:calc(100% + 34 * var(--u));transform:none;font-size:calc(15 * var(--u))}
.label.label-l{left:calc(6 * var(--u))}
.label.label-r{right:calc(6 * var(--u))}
}
@media (prefers-reduced-motion:reduce){
.links,.burger span{transition:none}
}
.scroll:focus-visible,.links a:focus-visible,.enroll:focus-visible,.cta a:focus-visible,.logo:focus-visible{
outline:calc(2 * var(--u)) solid var(--cyan);
outline-offset:calc(3 * var(--u));
}
.planet:focus-visible{
outline:calc(2 * var(--u)) solid var(--cyan);
outline-offset:calc(6 * var(--u));
border-radius:50%;
}
/* =========================================================
ENTRANCE — one sequence, once, then nothing.
Motion language, derived from the composition itself:
DRAW hairlines scale from their centre (three rules share it)
REVEAL primary type rises out of a mask (the title lockup)
RISE supporting copy lifts a short distance
SETTLE pills arrive with a small scale resolve
FADE the backdrop resolves in — the slow layer underneath
The planets live in the backdrop clip, which carries its own motion.
========================================================= */
.ent-mask,.ent-line{display:block}
@keyframes ent-reveal{from{transform:translateY(115%)}to{transform:translateY(0)}}
@keyframes ent-rise{from{opacity:0;transform:translateY(var(--rise,10px))}to{opacity:1;transform:none}}
@keyframes ent-settle{from{opacity:0;transform:translateY(var(--rise,8px)) scale(.965)}to{opacity:1;transform:none}}
@keyframes ent-draw{from{transform:scaleX(0)}to{transform:scaleX(1)}}
/* the backdrop is full-bleed, so it fades rather than rising — a translate
would drag a bare edge into frame */
@keyframes ent-fade{from{opacity:0}to{opacity:1}}
.anim{--e-expo:cubic-bezier(.16,1,.3,1);--e-quint:cubic-bezier(.22,1,.36,1);
--e-slow:cubic-bezier(.4,0,.2,1)}
/* resting states held before play, so nothing flashes unanimated */
.anim .ent-mask{overflow:hidden;padding-top:.18em;margin-top:-.18em}
.anim .ent-line{transform:translateY(115%);will-change:transform}
.anim .navbar::after,
.anim .links a[aria-current="page"]::after,
.anim .rule span{transform:scaleX(0)}
.anim .logo,.anim .links a,.anim .burger,.anim p.lede,
.anim .label,.anim .cta a,.anim .scroll,
.anim .sky{opacity:0}
.anim .sky{will-change:opacity}
/* --- the sequence --- */
.anim.play .sky{animation:ent-fade 1.6s var(--e-slow) .25s both}
.anim.play .navbar::after{animation:ent-draw .9s var(--e-expo) .12s both}
.anim.play .logo{--rise:calc(8 * var(--u));animation:ent-rise .6s var(--e-quint) .20s both}
.anim.play .links a{--rise:calc(8 * var(--u));animation:ent-rise .55s var(--e-quint) both}
.anim.play .links a:nth-child(1){animation-delay:.26s}
.anim.play .links a:nth-child(2){animation-delay:.31s}
.anim.play .links a:nth-child(3){animation-delay:.36s}
.anim.play .links a:nth-child(4){animation-delay:.41s}
.anim.play .links a.enroll,
.anim.play .burger{--rise:calc(8 * var(--u));animation:ent-settle .6s var(--e-quint) .46s both}
.anim.play .links a[aria-current="page"]::after{animation:ent-draw .55s var(--e-expo) .60s both}
.anim.play .eyebrow .ent-line{animation:ent-reveal .75s var(--e-expo) .30s both}
.anim.play h1.title .ent-line{animation:ent-reveal .95s var(--e-expo) .44s both}
.anim.play .rule span{animation:ent-draw .65s var(--e-expo) .78s both}
.anim.play p.lede{--rise:calc(12 * var(--u));animation:ent-rise .7s var(--e-quint) .86s both}
.anim.play .label.label-l{--rise:calc(8 * var(--u));animation:ent-rise .6s var(--e-quint) 1.04s both}
.anim.play .label.label-r{--rise:calc(8 * var(--u));animation:ent-rise .6s var(--e-quint) 1.10s both}
.anim.play .cta a{--rise:calc(8 * var(--u));animation:ent-settle .7s var(--e-quint) 1.14s both}
.anim.play .scroll{animation:ent-settle .6s var(--e-quint) 1.42s both}
</style>
</head>
<body>
<div class="stage">
<div class="sky">
<video data-planet="earth" class="is-active" autoplay muted loop playsinline preload="auto"
src="https://meez.design/web/media/bg-videos/227_82.mp4"
poster="https://meez.design/web/bg-previews/058_Aurora-Waves.jpg"
aria-hidden="true"></video>
<!-- the other two stay unfetched until their planet is chosen -->
<video data-planet="venus" muted loop playsinline preload="none"
data-src="https://meez.design/web/media/bg-videos/228_84.mp4"
poster="https://meez.design/web/bg-previews/074_Cosmic-Vortex.jpg"
aria-hidden="true"></video>
<video data-planet="mars" muted loop playsinline preload="none"
data-src="https://meez.design/web/media/bg-videos/229_96.mp4"
poster="https://meez.design/web/bg-previews/015_Background-086.jpg"
aria-hidden="true"></video>
</div>
<div class="ui">
<header class="navbar">
<div class="navrow">
<a class="logo" href="#">space<i>edu</i></a>
<nav class="links" id="site-nav">
<a href="#" aria-current="page">Planets</a>
<a href="#">Tution</a>
<a href="#">Tutorials</a>
<a href="#">Blog</a>
<a class="enroll" href="#">Enroll</a>
</nav>
<button class="burger" type="button" aria-label="Open navigation"
aria-expanded="false" aria-controls="site-nav">
<span></span><span></span><span></span>
</button>
</div>
</header>
<div class="copy">
<div class="col eyebrow"><span class="ent-mask"><span class="ent-line">PLANET</span></span></div>
<h1 class="col title"><span class="ent-mask"><span class="ent-line">EARTH</span></span></h1>
<div class="col rule"><span></span></div>
<p class="col lede">Learn more about the fascinating details that we call our home, Planet Earth. Course enrollment <br>starts today. Early Bird tickets typically last a week, don’t miss out!</p>
<div class="col cta">
<button class="planet planet-l" type="button" data-slot="l">
<img data-planet="earth" alt="" src="https://meez.design/web/bg-previews/014_Background-085.jpg">
<img data-planet="venus" alt="" src="https://meez.design/web/bg-previews/001_Motion-Background-10.jpg">
<img data-planet="mars" alt="" src="https://meez.design/web/bg-previews/002_Motion-Background-2.jpg">
</button>
<button class="planet planet-r" type="button" data-slot="r">
<img data-planet="earth" alt="" src="https://meez.design/web/bg-previews/006_Cosmic-Drift.jpg">
<img data-planet="venus" alt="" src="https://meez.design/web/bg-previews/007_Digital-Pulse.jpg">
<img data-planet="mars" alt="" src="https://meez.design/web/bg-previews/008_Liquid-Motion.jpg">
</button>
<a href="#">GET STARTED</a>
<span class="label label-l"></span>
<span class="label label-r"></span>
</div>
</div>
</div>
<button class="scroll" type="button" aria-label="Scroll to next section">
<svg viewBox="0 0 26 33" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<path d="M13 1.5 V31.5 M1.9 20.4 L13 31.5 L24.1 20.4"
stroke="#ffffff" stroke-width="3" stroke-linecap="square" stroke-linejoin="miter"/>
</svg>
</button>
</div>
<script>
(function(){
var row = document.querySelector('.navrow'),
btn = document.querySelector('.burger'),
menu = document.getElementById('site-nav');
if(!row || !btn || !menu) return;
function set(open){
row.dataset.open = open ? 'true' : 'false';
btn.setAttribute('aria-expanded', open ? 'true' : 'false');
btn.setAttribute('aria-label', open ? 'Close navigation' : 'Open navigation');
}
set(false);
btn.addEventListener('click', function(e){
e.stopPropagation();
set(row.dataset.open !== 'true');
});
document.addEventListener('click', function(e){
if(row.dataset.open === 'true' && !menu.contains(e.target) && e.target !== btn){ set(false); }
});
document.addEventListener('keydown', function(e){
if(e.key === 'Escape' && row.dataset.open === 'true'){ set(false); btn.focus(); }
});
menu.addEventListener('click', function(e){
if(e.target.closest('a')) set(false);
});
})();
/* ---- entrance: runs once, then removes itself entirely ---- */
(function(){
var root = document.documentElement;
if(!root.classList.contains('anim')) return;
var started = false;
function start(){
if(started) return; started = true;
requestAnimationFrame(function(){
requestAnimationFrame(function(){
root.classList.add('play');
/* when the last tween lands, drop every entrance rule so the page is
left in exactly its authored static state — no timers, no loops,
no residual transforms, nothing left running. */
setTimeout(function(){ root.classList.remove('anim','play'); }, 2150);
});
});
}
/* hold for the faces so the masked reveal runs on real metrics */
if(document.fonts && document.fonts.ready){
var guard = setTimeout(start, 500);
document.fonts.ready.then(function(){ clearTimeout(guard); start(); });
} else { start(); }
})();
/* ---- planet switcher ----
Three planets, one featured at a time. The featured planet is the backdrop
clip; the other two fill the left and right slots in a fixed order, so the
arrangement is a pure function of which one is featured. */
(function(){
var ORDER = ['earth','venus','mars'];
var PLANETS = {
earth:{
name:'EARTH',
still:'https://meez.design/web/bg-previews/010_Vapor-Trail.jpg',
lede:'Learn more about the fascinating details that we call our home, Planet Earth. Course enrollment <br>starts today. Early Bird tickets typically last a week, don’t miss out!'
},
venus:{
name:'VENUS',
still:'https://meez.design/web/bg-previews/065_Ember-Trail.jpg',
lede:'The hottest world in our solar system, wrapped in clouds of sulfuric acid. Course enrollment <br>starts today. Early Bird tickets typically last a week, don’t miss out!'
},
mars:{
name:'MARS',
still:'https://meez.design/web/bg-previews/059_Crystal-Bloom.jpg',
lede:'The rust-red desert world, home to the tallest volcano we know of. Course enrollment <br>starts today. Early Bird tickets typically last a week, don’t miss out!'
}
};
var sky = document.querySelector('.sky'),
clips = document.querySelectorAll('.sky video'),
title = document.querySelector('h1.title .ent-line'),
lede = document.querySelector('p.lede'),
slots = {
l:{ btn:document.querySelector('.planet-l'), label:document.querySelector('.label-l') },
r:{ btn:document.querySelector('.planet-r'), label:document.querySelector('.label-r') }
};
if(!sky || !clips.length || !title || !lede || !slots.l.btn || !slots.r.btn) return;
var featured = null;
function show(next){
if(!PLANETS[next] || next === featured) return;
featured = next;
/* backdrop: fetch the clip the first time it is asked for, then crossfade */
for(var i=0;i<clips.length;i++){
var clip = clips[i], on = clip.dataset.planet === next;
if(on && !clip.getAttribute('src') && clip.dataset.src){
clip.src = clip.dataset.src;
}
clip.classList.toggle('is-active', on);
if(on){ var p = clip.play(); if(p && p.catch) p.catch(function(){}); }
else { clip.pause(); }
}
/* keeps reduced-motion users, who never see the clip, on the right planet */
sky.style.backgroundImage = 'url(' + PLANETS[next].still + ')';
title.textContent = PLANETS[next].name;
lede.innerHTML = PLANETS[next].lede;
/* the two that are not featured, in their fixed order. Every planet is
already in the slot, so this reveals one rather than loading one. */
var rest = ORDER.filter(function(k){ return k !== next; });
['l','r'].forEach(function(side, i){
var key = rest[i], slot = slots[side];
var imgs = slot.btn.querySelectorAll('img');
for(var j=0;j<imgs.length;j++){
imgs[j].classList.toggle('is-shown', imgs[j].dataset.planet === key);
}
slot.btn.dataset.planet = key;
slot.btn.setAttribute('aria-label', 'Show ' + PLANETS[key].name);
slot.label.textContent = PLANETS[key].name;
});
}
/* Give a clip its source before it is asked for, so the click lands on
something already buffering instead of starting the download itself. */
function warm(planet){
for(var i=0;i<clips.length;i++){
var c = clips[i];
if(c.dataset.planet === planet && !c.getAttribute('src') && c.dataset.src){
c.preload = 'auto';
c.src = c.dataset.src;
c.load();
}
}
}
['l','r'].forEach(function(side){
var btn = slots[side].btn;
btn.addEventListener('click', function(){ show(this.dataset.planet); });
/* intent, well before the click */
btn.addEventListener('pointerenter', function(){ warm(this.dataset.planet); });
btn.addEventListener('focus', function(){ warm(this.dataset.planet); });
});
show('earth');
/* once the page has settled, pull the remaining clips down in the background */
function warmRest(){ ORDER.forEach(warm); }
if(window.requestIdleCallback){ requestIdleCallback(warmRest, {timeout:4000}); }
else { setTimeout(warmRest, 2500); }
})();
</script>
</body>
</html>
SparkformCreative · free prompt · copy-paste
**Recreate this exact landing page pixel-for-pixel.**
## Tech stack
React + Vite + TypeScript + Tailwind CSS. Single page: `<Hero />` then `<Marquee />`. No router, no extra sections. Body: `font-family: 'Inter', sans-serif`, `background: #000`, `overflow-x: hidden`. `html { scroll-behavior: smooth }`. Page title: `Beyond Hero`.
## Fonts (exact URLs)
Load in `<head>`:
1. **Bamboly Demo** (display / title / marquee):
```html
<link href="(self-host this face — no free CDN; substitute a close match if unavailable)" rel="stylesheet">
```
Direct files if needed:
- `(self-host this face — no free CDN; substitute a close match if unavailable)`
- `(self-host this face — no free CDN; substitute a close match if unavailable)`
- `(self-host this face — no free CDN; substitute a close match if unavailable)`
`font-family: "Bamboly Demo", sans-serif` · letter-spacing `0.02em` on the heading helper class.
2. **Inter + Poppins** (Google Fonts):
```html
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&family=Poppins:wght@400;500;600;700&display=swap" rel="stylesheet">
```
- Inter = body default only
- Poppins weight **500** = side word columns
## Color palette
| Role | Hex |
|------|-----|
| Hero background | `#EC612C` |
| BEYOND front layer | `#FFFFFF` |
| BEYOND layer (green) | `#90EE90` |
| BEYOND layer (orange gap, same as bg) | `#EC612C` |
| BEYOND back layer (blue) | `#89CFF0` |
| Side words | `white` at `opacity` via column (base class `text-white/80`) |
| Marquee background | `#FFFFFF` |
| Marquee text | `#EC612C` |
| Body page bg | `#000000` |
## Asset — character image (exact URL used in code)
```
https://meez.design/web/media/ext/11ffbe21c96271e6.png
```
Original PNG source behind the proxy:
```
https://meez.design/web/media/ext/9bd22f6f8a2a0202.png
```
Subject: 3D bust of a young Black man, electric-blue braids with silver beads, bright blue eyes looking upward, neon-green ribbed turtleneck, transparent/orange-cutout background. Centered, chest-up.
*(Local unused files exist at `/public/images/{0B435C65-A382-4437-BCE3-E275271AEB12}.png` and `{A01C6A0D-C4E6-496C-BC3D-D942405C2DBB}.png` — do not use them; the live page uses the Higgs URL above.)*
---
## SECTION 1 — Hero
### Structure & layout
- `<section>` height **`120vh`**, `backgroundColor: #EC612C`, `relative w-full overflow-hidden`.
- Two layers:
**A. Character (z-index 10)** — absolute `inset-0`, `pointer-events-none`:
- `<img>` `absolute bottom-0 left-1/2 -translate-x-1/2`
- `w-auto max-w-none block`
- inline style: `height: 115%`, `maxHeight: 115%`, `minHeight: 80%`
- Sits in front of the title (covers center of “BEYOND”).
**B. Sticky text overlay (z-index 5)** — `sticky top-0 h-screen w-full`:
### “BEYOND” stacked title
- Top-centered: `absolute inset-0 flex items-start justify-center pt-[2vh] md:pt-[3vh]`
- Four absolutely stacked `<h1>` layers (except front layer `position: relative`), all text `BEYOND`, same box, `leading-[0.85] tracking-tight select-none`
- Font: `"Bamboly Demo", sans-serif`
- Size: `clamp(7.5rem, 30vw, 28rem)`
- Stack order (render back→front), each with `transform: translateY(offset)`:
| Layer | Color | Desktop offset | Mobile (`<768px`) offset |
|-------|-------|----------------|---------------------------|
| 0 (back) | `#89CFF0` | `36px` | `18px` |
| 1 | `#EC612C` | `24px` | `12px` |
| 2 | `#90EE90` | `12px` | `6px` |
| 3 (front) | `#FFFFFF` | `0` | `0` |
Visual effect: white “BEYOND” with green → orange-gap → baby-blue stripes peeking downward under the letters (retro stacked drop).
### Side word columns
- Arrays (source lowercase; CSS `uppercase`):
- Left: `spark`, `imagine`, `evolve`, `render`
- Right: `blaze`, `genesis`, `purpose`, `ignite`
- Container: `absolute inset-0 flex items-end justify-between px-[3vw] md:px-[6vw]`, `bottom: -8vh`, `pointer-events-none`
- Left column: `flex flex-col gap-1 md:gap-2`
- Right column: same + `items-end`, words `text-right`
- Each word: `"Poppins", sans-serif`, `fontWeight: 500`, `fontSize: clamp(1.6rem, 7vw, 9rem)`, `lineHeight: 1.1`, `text-white/80`, `select-none`, `transition: transform 0.05s linear`
### Scroll-driven animation (exact math)
Track scroll progress on the 120vh section:
```
progress = clamp(0..1, -rect.top / (sectionHeight - window.innerHeight))
```
`scaleFactor = window.innerWidth < 768 ? 0.5 : 1`
**Horizontal offsets** (at progress `0` = start; progress `1` = fully scrolled through sticky range):
```
leftOffset[i] = -(60 + i * 40) * scaleFactor * (1 - progress)
rightOffset[i] = +(60 + i * 40) * scaleFactor * (1 - progress)
```
Desktop start offsets by index: ±60, ±100, ±140, ±180 px. Mobile half of that. As user scrolls, words slide inward to `0`.
**Opacity** (both columns):
```
opacity = 0.35 + progress * 0.65 // 0.35 → 1.0
```
Listeners: `scroll` (passive) + `resize`. Sticky text stays pinned for the ~20vh scroll range while the tall section scrolls underneath.
---
## SECTION 2 — Marquee
- Full-width white band: `w-full bg-white overflow-hidden py-6 md:py-8`
- Track class `marquee-track`: `display flex`, `whitespace-nowrap`
- CSS animation:
```css
@keyframes marquee-scroll {
0% { transform: translateX(0); }
100% { transform: translateX(-50%); }
}
.marquee-track {
animation: marquee-scroll 18s linear infinite;
}
```
- Exact string (middle dots = `\u00B7` / `·`):
```
SPARK · RENDER · IGNITE · UNFOLD · GENESIS · EVOLVE · PURPOSE · BEYOND ·
```
- Render **4 identical copies** of that string side-by-side (`shrink-0`) so `-50%` loops seamlessly.
- Style: `"Bamboly Demo", sans-serif`, `uppercase`, `color: #EC612C`, `fontSize: clamp(2.5rem, 6vw, 5rem)`, `lineHeight: 1`, `paddingRight: 0.25em`, `select-none`
---
## Composition / z-order summary
1. Orange `#EC612C` hero plane (120vh)
2. Sticky white/colored typography (z5) — BEYOND top, word columns bottom-left/right
3. Character image (z10) centered, bottom-anchored, height 115% — overlaps title and sits between the word columns
4. White marquee strip below hero, infinite horizontal scroll of brand words in Bamboly orange
## Responsive breakpoints
- Mobile `<768px`: half scroll offsets, half BEYOND layer offsets, tighter padding (`px-[3vw]`, `pt-[2vh]`, smaller marquee py).
- Desktop: full offsets, `px-[6vw]`, `pt-[3vh]`.
## Do not add
No nav, cards, CTAs, stats, purple gradients, Inter for the hero display, or the unused local PNGs. Match fonts, colors, asset URL, scroll math, and marquee string/timing exactly as above.
Synth ModeFashion · free prompt · copy-paste
Build a pure-white, minimal, futuristic fashion landing page titled **"LGPSM — Future Forward Fashion"**. Stack: React 19 + Vite + TypeScript + Tailwind CSS v4 + lucide-react. Page title: `LGPSM — Future Forward Fashion`. Description vibe: pure white minimal futuristic fashion website interface. Full-viewport single composition, black text on white, no purple, no cream, no cards-as-decoration, no glow effects.
---
## FONTS (exact Google Fonts)
Load via Google Fonts:
```
https://fonts.googleapis.com/css2?family=Chakra+Petch:wght@500;600;700&family=Michroma&family=Orbitron:wght@600;700;800;900&family=Plus+Jakarta+Sans:wght@400;500;600;700&display=swap
```
Usage:
- **Orbitron** (600/700/800/900): logo `LGPSM`, main headline `FUTURE FORWARD FASHION`, drawer titles, collection titles
- **Plus Jakarta Sans** (400/500/600/700): body UI, nav links, taglines, buttons, drawer content (default page font)
- Michroma and Chakra Petch may be loaded but are unused on the main UI
CSS utilities:
- `.font-orbitron { font-family: 'Orbitron', sans-serif; }`
- `.font-jakarta { font-family: 'Plus Jakarta Sans', sans-serif; }`
Body: `bg-white text-black antialiased`, selection: `selection:bg-black selection:text-white`.
---
## FLUID SIZE SYSTEM (exact CSS variables)
All sizes scale with viewport via `clamp()` — no hard fixed px breakpoints for type/spacing:
```css
:root {
--pad-x: clamp(1.25rem, 4.5vw, 5rem);
--pad-y: clamp(1rem, 3vh, 4rem);
--header-pt: clamp(1.25rem, 2.5vh, 2.5rem);
--gap-nav: clamp(1rem, 2.2vw, 2.25rem);
--logo: clamp(1.35rem, 1.2vw + 0.9rem, 2.1rem);
--logo-deg: clamp(0.65rem, 0.4vw + 0.45rem, 0.9rem);
--nav: clamp(0.65rem, 0.35vw + 0.5rem, 0.875rem);
--headline: clamp(2.15rem, 4.5vw + 0.75rem, 5.25rem);
--body: clamp(0.7rem, 0.35vw + 0.55rem, 0.9rem);
--micro: clamp(0.55rem, 0.25vw + 0.45rem, 0.7rem);
--btn-px: clamp(1.15rem, 1.4vw, 1.75rem);
--btn-py: clamp(0.6rem, 0.9vh, 0.85rem);
--btn-gap: clamp(0.75rem, 1vw, 1.1rem);
--feature-pad: clamp(1rem, 1.5vw, 1.75rem);
--feature-min: clamp(13rem, 18vw, 20rem);
--globe: clamp(2.25rem, 2.5vw + 1rem, 3.25rem);
--checker-w: clamp(2.75rem, 4.5vw, 6.5rem);
--checker-h: clamp(1.35rem, 2.2vw, 3rem);
--corner: clamp(0.65rem, 0.4vw + 0.4rem, 0.95rem);
--icon: clamp(1rem, 0.6vw + 0.7rem, 1.35rem);
--drawer-pad: clamp(1.25rem, 2.5vw, 2.25rem);
--drawer-max: clamp(18rem, 28vw, 28rem);
--section-gap: clamp(0.75rem, 1.5vh, 1.5rem);
--main-py: clamp(1.25rem, 4vh, 4rem);
}
```
---
## EXACT BACKGROUND IMAGE URLS
**Base image (BG_IMAGE_1)** — always visible full-bleed desktop background; also used as the mobile static image:
```
https://meez.design/web/media/ext/299f1f52922a97ba.png
```
**Reveal image (BG_IMAGE_2)** — second image revealed only inside the mouse spotlight mask:
```
https://meez.design/web/media/ext/38f100c5af5e55e9.png
```
Both layers: `absolute inset-0`, `background-size: cover`, `background-position: center`, `background-repeat: no-repeat`.
---
## DESKTOP INTERACTIVE IMAGE REVEAL EFFECT (exact behavior)
Component: `ImageRevealBackground`. Desktop only: `hidden lg:block fixed inset-0 pointer-events-none z-0 overflow-hidden`.
### Layers (bottom → top)
1. Base layer: BG_IMAGE_1 full bleed
2. Reveal layer: BG_IMAGE_2 full bleed, clipped by a CSS/WebKit mask generated from an offscreen canvas
3. Subtle SVG grid overlay at `opacity: 0.10`, stroke `#64748b`, strokeWidth `0.6`
### Spotlight / mask algorithm (exact)
- Track raw mouse (`mousemove` on `window`) into `mouseRef`
- Every animation frame, ease `smoothRef` toward mouse with factor **0.1**:
- `smooth.x += (mouse.x - smooth.x) * 0.1`
- `smooth.y += (mouse.y - smooth.y) * 0.1`
- Spotlight radius (fluid): `Math.round(Math.min(420, Math.max(160, window.innerWidth * 0.16)))`
- Draw soft radial gradient circle on offscreen canvas at smoothed cursor:
- `createRadialGradient(cx, cy, 0, cx, cy, radius)`
- stops exactly:
- 0 → `rgba(255,255,255,1)`
- 0.4 → `rgba(255,255,255,1)`
- 0.6 → `rgba(255,255,255,0.75)`
- 0.75 → `rgba(255,255,255,0.4)`
- 0.88 → `rgba(255,255,255,0.12)`
- 1 → `rgba(255,255,255,0)`
- Export canvas each frame as `toDataURL()` and apply to BG_IMAGE_2 as:
- `mask-image: url(dataUrl)` / `-webkit-mask-image: url(dataUrl)`
- `mask-size: 100% 100%`
- Result: moving the cursor smoothly reveals BG_IMAGE_2 inside a soft circular spotlight while BG_IMAGE_1 remains everywhere else
### Parallax grid
- Grid cell size (fluid): `Math.round(Math.min(64, Math.max(36, window.innerWidth * 0.028)))`, update on resize
- SVG `<pattern>` with path `M {cell} 0 L 0 0 0 {cell}`
- Offset grid with eased parallax: normalize smoothed cursor to container (`cx`, `cy` from −0.5 to 0.5), ease offset toward `cx*16` / `cy*16` with factor **0.06**
- Pattern `x`/`y` = that eased offset
On viewports below `lg`, hide this interactive background and instead show a static bordered image of BG_IMAGE_1 in a section below the hero (`aspect-[4/5]` mobile, `sm:aspect-[16/9]`, border `border-gray-200`).
---
## PAGE STRUCTURE & EXACT COPY
Root: `min-h-screen bg-white text-black font-jakarta flex flex-col justify-between relative overflow-hidden`.
### 1. Header (z-20)
Padding: `paddingInline: var(--pad-x)`, `paddingTop: var(--header-pt)`, `paddingBottom: var(--section-gap)`. Flex space-between.
**Logo (left):** Orbitron black/900, letter-spacing `0.15em`, size `var(--logo)`. Text: `LGPSM` + small degree symbol `˚` (size `var(--logo-deg)`, slightly raised `-mt-0.5 ml-0.5`). Clicking closes any open drawer. Hover opacity 80%.
**Nav (right):** Plus Jakarta Sans, medium, uppercase, tracking `0.2em`, size `var(--nav)`, gap `var(--gap-nav)`.
Links (buttons): `SHOP` | `COLLECTIONS` | `JOURNAL` then gray `|` divider then lucide `ShoppingBag` icon (stroke 1.5, size `var(--icon)`).
Hover: opacity 50%. Cart shows black circular badge with item count when cart has items.
### 2. Main hero (flex-1)
Padding: `paddingInline: var(--pad-x)`, `paddingBlock: var(--main-py)`. Layout: column on mobile, `lg:flex-row` space-between.
**Left block** (vertically centered):
1. Small top-left L-corner bracket SVG (stroke 1.5, size `var(--corner)`)
2. Headline — Orbitron extrabold, uppercase, tracking `0.08em`, leading `1.05`, size `var(--headline)`, three lines:
- `FUTURE`
- `FORWARD`
- `FASHION` + inline **checkerboard grid SVG** (viewBox `0 0 36 18`, 4 rows of 3.8×3.8 black squares; even rows shifted by 2.25; size `var(--checker-w)` × `var(--checker-h)`, slightly translated down 2px)
3. Bottom-left L-corner bracket
4. CTA button: border `border-gray-400`, rounded-md, uppercase `SHOP NOW` + lucide `ArrowUpRight`. Tracking `0.18em`, size `var(--body)`, padding `var(--btn-px)` / `var(--btn-py)`. Hover: fill black, text white, border black; icon nudges up-right.
**Right lower feature block** (`self-end`, bottom-aligned on desktop):
Framed box with four corner bracket SVGs (TL/TR/BL/BR) at absolute corners — no filled card background. Inside:
- Wireframe globe SVG (viewBox `0 0 64 64`, stroke 1.2: outer circle r=28, equator line, 2 horizontal ellipses, meridian line, 2 vertical ellipses), size `var(--globe)`
- Tagline in Plus Jakarta Sans semibold uppercase tracking `0.18em`, size `var(--body)`:
- `BEYOND TRENDS.`
- `BUILT FOR TOMORROW.`
min-width `var(--feature-min)`, padding `var(--feature-pad)`.
### 3. Side drawers (exact)
Clicking SHOP / COLLECTIONS / JOURNAL / cart opens a right-side white drawer over dimmed backdrop (`bg-black/20 backdrop-blur-xs`). Max width `var(--drawer-max)`, padding `var(--drawer-pad)`, border-left gray. Header: Orbitron bold uppercase title + lucide `X` close. Click backdrop to close.
**SHOP → title `Catalog`**
Subtitle: `Featured Garments`
Items (exact):
1. CYBER-TEX OVERCOAT — $850 — tag LIMITED EDITION
2. GEO-MESH TECH HOODIE — $320 — tag NEW DROP
3. ORBITAL TAPERED TROUSERS — $290 — tag IN STOCK
4. MODULAR ALL-WEATHER VEST — $410 — tag PRE-ORDER
Each row: tag (micro gray), title, price, `ADD` button. ADD adds to cart and shows toast: `Added "{title}" to your shopping bag.` (3s, black toast top-right with lucide Check emerald).
**COLLECTIONS → title `Archive 2026`**
Subtitle: `Season Lineup`
1. SERIES 01 — SYNTHETIC HORIZONS — Ultra-durable weather-sealed fabrics with minimalist silhouette architecture.
2. SERIES 02 — KINETIC FORM — Ergonomic streetwear designed for maximum mobility and temperature equilibrium.
3. SERIES 03 — MONOCHROME ZERO — Pure black and white structural tailoring crafted from 100% recycled polymers.
**JOURNAL → title `Editorial`**
Subtitle: `Latest Dispatches`
1. AUG 2026 — THE ARCHITECTURE OF NEXT-GEN TEXTILES — 4 MIN READ
2. JUL 2026 — CIRCULAR DESIGN IN HIGH-END APPAREL — 6 MIN READ
3. JUN 2026 — MINIMALISM AS A FUNCTIONAL STATEMENT — 3 MIN READ
**CART → title `Shopping Bag`**
Empty: ShoppingBag icon + `Your shopping bag is empty.`
With items: list title/price + Remove. Footer: full-width black `CHECKOUT NOW` + ChevronRight → toast `Order submitted successfully!`, clear cart, close drawer.
Non-cart footer: `LGPSM © 2026 — FUTURE FORWARD FASHION` (micro, gray, centered uppercase).
---
## ICONS
lucide-react only: `ShoppingBag`, `ArrowUpRight`, `X`, `ChevronRight`, `Check`. Custom SVGs for: checkerboard, wireframe globe, four L-shaped corner brackets (paths: TL `M0 11.5V0.5H11.5`, TR `M0.5 0.5H11.5V11.5`, BL `M0 0.5V11.5H11.5`, BR `M0.5 11.5H11.5V0.5`, viewBox `0 0 12 12`).
---
## VISUAL RULES
- White page, black ink, gray accents only (`gray-200` / `gray-300` / `gray-400` / `gray-500` / `gray-600` / slate grid `#64748b`)
- No purple, no cream, no glow, no floating badges over hero media, no inset hero cards
- Brand `LGPSM` and headline `FUTURE FORWARD FASHION` dominate first viewport
- First viewport content only: logo/nav, headline + checker, SHOP NOW, globe tagline, and full-bleed dual-image reveal background
- UI text sits above background at z-10/z-20; background is z-0 and non-interactive (`pointer-events-none`)
Recreate this page pixel-faithfully with the exact URLs, exact reveal math (ease 0.1, radius `clamp(160, 16vw, 420)`, gradient stops listed), exact copy, fonts, fluid clamps, and drawer contents above.
---
Talent CollectiveAgency · free prompt · copy-paste
Build a single full-viewport React + TypeScript + Tailwind CSS page for a creative studio called **Kollektiva**. The app renders only this one section (no nav, no other pages). Stack: Vite + React 18 + Tailwind 3. Font: **Geist** (Google Fonts weights 300, 400, 500). Title: `Kollektiva`.
### Font setup
In `index.html`:
```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=Geist:wght@300;400;500&display=swap" rel="stylesheet" />
```
In Tailwind config, extend:
```js
fontFamily: { geist: ['Geist', 'system-ui', 'sans-serif'] }
```
In CSS, add this keyframe:
```css
@keyframes fadeIn {
from { opacity: 0; transform: translateY(4px); }
to { opacity: 1; transform: translateY(0); }
}
```
### Overall structure
One `<section>` that is:
- `relative`, `h-screen`, `w-full`, `overflow-hidden`
- `font-geist`, text white
- Full-bleed stacked background portraits (one per team member)
- A light dark gradient overlay on top of the backgrounds
- A content layer (`z-10`) with two vertical zones: top (headline + description) and bottom (avatar picker + meta footer)
### Background portraits (exact asset URLs)
Render **all 8** backgrounds as absolutely positioned `inset-0` layers with `bg-cover bg-center`. Only the active index has `opacity: 1`; others `opacity: 0`. Transition: `transition-opacity duration-700 ease-out` (700ms opacity crossfade).
Use these exact image URLs (same URL for full-bleed background AND circular avatar thumbnail):
1. **Andrei Baranov** — Design Chief
`https://meez.design/web/media/ext/630c443eb97b8314.png`
Description: `Andrei sets the visual direction of every project. He turns rough ideas into clear, confident design languages that feel effortless yet leave a lasting impression.`
2. **Daria Lebedeva** — Interface Expert
`https://meez.design/web/media/ext/89668087abc97ce2.png`
Description: `Daria crafts interfaces people understand at first glance. Every screen she designs balances clarity and character, making complex products feel simple and warm.`
3. **Ivan Sorokin** — Concept Chief
`https://meez.design/web/media/ext/6977597bc2fb6a2c.png`
Description: `Ivan shapes the ideas behind the work. He digs into every brief until the core story emerges, then builds concepts that give each project its reason to exist.`
4. **Anna Fedorova** — Brand Consultant
`https://meez.design/web/media/ext/2b38bc7f04bb15a8.png`
Description: `Anna helps brands find their voice. From positioning to tone, she builds identities that stay consistent everywhere and grow stronger with every appearance.`
5. **Pavel Smirnov** — Movement Artist
`https://meez.design/web/media/ext/6db3500b914ec149.png`
Description: `Pavel brings stillness to life. His motion work adds rhythm and personality to every product, guiding attention with transitions that feel natural and precise.`
6. **Olga Kravtsova** — UX Specialist
`https://meez.design/web/media/ext/39c2292ab2d3de5c.png`
Description: `Olga studies how people actually use what we make. Her research keeps every decision grounded in real behavior, so the work serves users and not assumptions.`
7. **Igor Zakharenko** — Graphic Creator
`https://meez.design/web/media/ext/5b312e2f4717efc9.png`
Description: `Igor gives every project its finishing touch. From typography to illustration, he sweats the visual details that separate good work from unforgettable work.`
8. **Ksenia Romanova** — Studio Head
`https://meez.design/web/media/ext/d468106fd6e7855d.png`
Description: `Ksenia keeps the studio moving as one. She connects people, plans, and priorities so every project ships on time without losing the craft it deserves.`
Default active index: `0` (Andrei Baranov).
### Gradient overlay
Above backgrounds, below content:
`absolute inset-0 bg-gradient-to-b from-black/20 via-black/5 to-black/25`
(top 20% black, middle 5%, bottom 25% — soft vignette, not heavy).
### Content layout
Content wrapper:
`relative z-10 flex h-full flex-col justify-between`
Padding:
- mobile: `px-6 pb-6 pt-10`
- sm: `px-10 pb-8 pt-14`
- lg: `px-16`
#### Top zone — headline + bio
Flex column on mobile (`flex-col gap-8`); from `md` up: `md:flex-row md:items-start md:justify-between md:gap-16`.
**Left — H1 (static, never changes):**
Exact copy (non-breaking space before “day”):
> Kollektiva is the talent you build with each day
Styles:
- `max-w-xl`
- `text-3xl` → `sm:text-5xl` → `lg:text-7xl`
- `font-normal`, `leading-[1.1]`, `tracking-tight`
- white
**Right — description (changes with active slide):**
- `max-w-xs`
- `text-sm font-medium leading-relaxed text-white/80` → `sm:text-base`
- `md:pt-2`
- On change: remount with `key={slide.name}` and class `animate-[fadeIn_0.5s_ease]` (0.5s fade + 4px upward settle)
#### Bottom zone
Outer: `flex flex-col gap-8`
##### Avatar picker row
- Horizontal flex: `flex items-end gap-2` → `sm:gap-3`
- Mobile: `overflow-x-auto` with hidden scrollbar (`[scrollbar-width:none] [&::-webkit-scrollbar]:hidden`), `pb-1`
- Desktop sm+: `sm:overflow-visible sm:pb-0`
Each avatar is a `<button>`:
- `flex shrink-0 flex-col items-center gap-2`
- `aria-label={`Show ${name}`}`
- `onClick` sets active index
Per button, top to bottom:
1. **Active indicator dot:** `h-1 w-1 rounded-full bg-white`
Active: `opacity-100`; inactive: `opacity-0`
Transition: `transition-opacity duration-300`
(dot fades in/out in place — does NOT slide between avatars)
2. **Circular thumbnail:** outer `block h-10 w-10 overflow-hidden rounded-full` → `sm:h-14 sm:w-14`
Inner `<img>`: same slide image URL, `h-full w-full object-cover`, `alt={name}`
Order of avatars must match slides array order 1→8 above.
##### Meta footer
Below avatars:
- Top border: `border-t border-white/20`
- `pt-5`
- `flex flex-wrap items-center justify-between gap-4`
- `text-sm font-medium`
Four items left→right (space-between):
1. **Name** (always visible): white, remounts with `key={slide.name}` + `animate-[fadeIn_0.5s_ease]`
2. **Role** (hidden on mobile, visible `sm:`+): `text-white/70`, remounts with `key={slide.role}` (no fade animation on role)
3. **Static tenure** (hidden until `md`): `text-white/70` — exact text: `In the business since 2020` (does not change per person)
4. **WhatsApp link:** `<a href="#">WhatsApp</a>` with `underline underline-offset-4 transition-colors hover:text-white/70`
### Interaction & animation summary
| Interaction | Behavior |
|---|---|
| Click avatar | Set `active` index |
| Background change | 700ms opacity crossfade (`ease-out`) |
| Description + name change | 500ms `fadeIn` (opacity 0→1, translateY 4px→0) via CSS keyframe + React `key` remount |
| Active dot | 300ms opacity toggle on the active avatar only |
| WhatsApp hover | color → `white/70` |
| No autoplay | Manual selection only |
| No carousel arrows | Avatars only |
| No blur on background | Cover + center only |
| No extra cards, badges, stats, or secondary CTAs | |
### Responsive behavior checklist
- **Mobile:** stacked headline over bio; horizontally scrollable avatar row (40×40px circles); footer shows Name + WhatsApp only (role/tenure hidden)
- **sm:** larger type, 56×56 avatars, role visible, no avatar scroll
- **md:** headline and bio side-by-side; tenure visible
- **lg:** headline `text-7xl`, horizontal padding `px-16`
### Visual character
Studio portrait photography on soft light gray / off-white seamless backgrounds (Asian / East-European creative professionals, soft studio lighting). White Geist sans-serif type over full-bleed portraits with a subtle black gradient vignette. Minimal, editorial, no purple, no cards, no pills, no glow. One composition filling the first viewport.
### What NOT to include
- Do not use the unused local files in `/public/images/` (those are unrelated mockups)
- No Lucide icons, no Supabase, no extra sections
- No Russian copy — English only as specified
- No Telegram link — the live page uses **WhatsApp**
- Brand name is **Kollektiva**, not Pragmatica
- Exactly **8** people (not 9)
- No separate large “action circle” on the right of the avatar row
### App wiring
`App.tsx` renders only `<Hero />`. Import via `@/components/Hero`. State: single `useState(0)` for active slide index.
---
Task EngineSaaS · free prompt · copy-paste
## ROLE
Recreate a single-file HTML product landing mosaic **pixel-faithful** to the reference below. Output one self-contained `index.html` with inline CSS + JS. **No external images.** All icons are inline SVG. The only external resource is Google Fonts.
---
## PAGE META
- `lang="en"`
- Title: `Automate your work — Focus on what matters`
- Viewport: `width=device-width, initial-scale=1, viewport-fit=cover`
- Body page background: `#f0f0f0`
- Text color: `#141414`
- Font smoothing: antialiased; `text-rendering: optimizeLegibility`
- `body`: flex center, `min-height: 100vh` / `100dvh`, `overflow: hidden`
---
## FONT (exact URL)
```
https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap
```
Preconnect: `https://fonts.googleapis.com` and `https://fonts.gstatic.com` (crossorigin).
Family stack:
`'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif`
Weights used: **400, 500, 600, 700, 800**. No other display/serif fonts.
---
## MEASUREMENT SYSTEM (critical)
Author the entire composition in **design units** where:
- Reference stage = **1374 × 666** units
- `1rem` = 1 reference unit
- Root scale knob:
```css
html { font-size: min(calc(95vw / 1374), calc(94vh / 666)); }
```
Nothing hard-coded in device pixels for the desktop composition. All sizes below are in these rem-units.
---
## DESKTOP STAGE GRID
`.stage` = `1374rem × 666rem`, CSS grid:
- Columns: `339rem | 627rem | 388rem`
- Rows: `149rem | 343rem | 156rem`
- `column-gap: 10rem`, `row-gap: 9rem`
- `role="main"`, `aria-label="Product feature overview"`
### Card placement
| Class | Grid |
|---|---|
| `.notif` | col 1, row 1 |
| `.connect` | col 1, row 2 / span 2 |
| `.automate` | col 2, row 1 / span 2 |
| `.insights` | col 3, row 1 / span 2 |
| `.search` | col 2 / span 2, row 3 |
### Shared `.card` chrome
- `border-radius: 22rem`
- `border: 1.6rem solid rgba(255,255,255,.92)`
- `overflow: hidden`
- `box-shadow: 0 2rem 16rem rgba(24,30,45,.045)`
- `position: relative`
---
## CARD 1 — NOTIFICATION (`.notif`)
**Background:**
```
radial-gradient(120% 140% at 92% 100%, rgba(255,236,246,.95) 0%, rgba(255,236,246,0) 62%),
linear-gradient(135deg, #f9d9e9 0%, #fbdfec 55%, #fce6f1 100%)
```
Padding: `37rem 12rem 0 11rem`. Aria: `"Automation notification"`.
### Toast stack
- `.toast-wrap`: relative, height `70rem`
- `.toast-ledge` (behind toast): absolute `left:24 right:20 top:55 height:23`, radius `14rem`,
background `linear-gradient(100deg, #e6e6e6 0%, #e6e3e2 42%, #e5d6d6 74%, #e4cdcf 100%)`,
shadow `0 3rem 9rem rgba(120,80,100,.09)`
- `.toast`: absolute inset 0, height 70, radius 16,
bg `linear-gradient(105deg, #ffffff 34%, #fdeee5 78%, #fce8dd 100%)`,
shadow `0 3rem 10rem rgba(122,86,106,.10)`, flex center, pad `0 12 0 13`, gap `11`
**Contents:**
1. **Sparkle icon** SVG 27×27, viewBox 0 0 24 24:
- Black circle `r=12` with mask that punches a 4-point star hole
- Overlay filled black 4-point sparkle path centered
2. Title: `Automation completed!` — 11.2rem / weight 800 / ls -0.012em / line 1.1 / `#0d0d0d`
3. Sub: `Weekly client report sent automatically` — 10rem / 400 / line 1.28 / ls -0.005em / `#2b2b2b` / max-width 118rem / margin-top 3.6rem
4. Time: `2:34 PM` — 7.4rem / 500 / `#8b8489` / align self start / margin-top 12rem / ls 0.005em
---
## CARD 2 — CONNECT YOUR TOOLS (`.connect`)
**Background:** `linear-gradient(180deg, #fcfdfd 0%, #f4f7f9 30%, #e2ebef 66%, #cedce4 100%)`
Padding: `32rem 0 0 20rem`. Aria: `"Integrations"`.
- H2: `Connect your<br>Tools Now.` — 28rem / 800 / line 1.1 / ls -0.028em / `#0c0c0c`
- Sub: `120+ integrations available` — margin-top 14, 17rem / 400 / line 1.3 / ls -0.013em / `#1c1c1c`
### Integration chips
Chips container absolute: `left:11 right:16 bottom:13`, column flex, gap 8, z-index 2.
Rows: flex gap 14; `.r2` has `padding-left: 10rem`.
**Chip style:**
- Height 42, inline-flex, gap 10, pad `0 17`, radius 999
- Bg: `linear-gradient(180deg, rgba(247,253,255,.97) 0%, rgba(240,250,254,.93) 100%)`
- Shadow ring: `0 0 0 3rem rgba(0,0,0,.047)` (NOT a CSS border)
- Backdrop blur 7rem
- Text: 18rem / 500 / ls -0.018em / `#131313` / nowrap
- SVG icons: 21×21
**Chip order / content (text then brand SVG):**
1. Row r1: `Microsoft Teams` (Teams purple avatar SVG)
2. Row r2: `Notion` (white rounded square + N stroke) + `GitHub` (Octocat path fill `#0d0d0d`)
3. Row r3: `Google Drive` (official 6-color triangle SVG viewBox `0 0 87.3 78`) + `Figma` (official 5-color logo viewBox `0 0 38 57`)
**Floating Slack chip** (`.chip-slack`): absolute `right:6 bottom:124`, `rotate(-20deg)`, z-index 3, slightly stronger ring `0 0 0 3.2rem rgba(0,0,0,.052)`. Text `Slack` + official 4-color Slack SVG (viewBox `0 0 122.8 122.8`, fills `#E01E5A`, `#36C5F0`, `#2EB67D`, `#ECB22E`).
Use exact brand SVG path data from the reference (Microsoft Teams multi-layer purple, Notion rect+stroke N, GitHub octocat, Drive 6 paths, Figma 5 circles/rects, Slack 4 pods).
---
## CARD 3 — AUTOMATE YOUR WORK (`.automate`) — hero center
**Background:**
```
radial-gradient(90% 70% at 6% 0%, rgba(226,236,200,.9) 0%, rgba(226,236,200,0) 70%),
linear-gradient(168deg, #e2ebc9 0%, #e9f0c4 48%, #f0f4b8 78%, #f3f5b0 100%)
```
Aria: `"Automate your work"`.
**Copy pad** (z-index 3): padding `37rem 0 0 45rem`
- H2: `<span class="g">Automate</span> your work.<br>Focus on what matters.`
— 35rem / 800 / line 1.43 / ls -0.03em / `#15201a`
— `.g` color `#5f8b3e`
- Sub: `AI-powered workflows that save teams hours every week.`
— margin-top 13, 17rem / 400 / line 1.3 / ls -0.014em / `#1e2a1b`
### Illustration layer `.illo` (absolute inset 0, 627×501, z-index 2)
**Window chrome shared:**
- Radius 11, border `3rem solid #fff`, overflow hidden, shadow `0 12rem 28rem rgba(64,74,44,.16)`
- Title bar height **13.4rem**, bg `#242424`, flex start, gap 4.6, pad-left 4.9
- Three traffic dots: 6×6 circle, `linear-gradient(150deg, #fff 0%, #f6f6f6 50%, #dcdcdc 100%)`
**Back window** `.win-back`:
- `left:121.2 top:245.2 width:324 height:250` · `rotate(-7.02deg)`
- Body bg `#eaefcd`; left strip width 23.7% bg `#bfd0ac`
**Front window** `.win-front`:
- `left:180.4 top:283.3 width:322 height:250` · `rotate(+4.23deg)` (positive — opposite lean from back; splay ≈11.25°)
- `border-bottom:0`, bottom radii 0 (bleeds off card)
- Stronger shadow `0 14rem 32rem rgba(64,74,44,.18)`
- Body bg `#f9edfb`; left strip width 16% bg `#e8d6fb`
**“Workflow Automated” pill** `.pill-wf`:
- `left:395 top:349 height:30`, flex, gap 7, pad `0 14 0 6`, radius 999, bg `#fff`
- Ring `0 0 0 2.8rem rgba(0,0,0,.045)`, `rotate(-1.2deg)`
- Text 11.5rem / 600 / ls -0.014em / `#151515`
- Tick disc 20×20: radial white highlight + `linear-gradient(145deg, #e6f3df 0%, #cfe0bd 47%, #b9cfa5 100%)` + checkmark SVG stroke `#161616` width 1.9
**AI sparkle card** `.pill-ai`:
- `left:68 top:404 width:144 height:52`, radius 10, white, same ring, flex, gap 9, pad `0 16`, `rotate(-1deg)`
- Two grey skeleton lines: height 6.5, radius 99, bg `#d8d8d7`, gap 8
- Dual 4-point sparkle SVG 23×23: fill `#eff4e6`, stroke `#4f7433`, stroke-widths 2.2 and 2.25 on two diamond-star paths (small tip then large tip)
**Cursor** `.cursor`:
- `left:490 top:454` size 30×35, viewBox 0 0 24 28
- Classic pointer path: fill `#fff`, stroke `#2b2b2b` width 1.3
---
## CARD 4 — PRODUCTIVITY INSIGHTS (`.insights`)
**Background:**
```
radial-gradient(115% 70% at 22% 0%, #fdf2e5 0%, rgba(253,242,229,0) 68%),
linear-gradient(180deg, #f9f1e8 0%, #f7efe6 100%)
```
Padding: `29 25 23 21`. Flex column. Aria: `"Productivity insights"`.
- Tag pill: height 31, pad `0 17`, radius 999, margin-left 4,
bg `linear-gradient(100deg, #ffffff 18%, #fdeadb 100%)`, border `1.2rem solid rgba(255,255,255,.9)`,
shadow `0 3rem 9rem rgba(160,120,80,.09)`, text `Productivity Insights` — 12rem / 700 / ls -0.01em / `#111`
- H2: `48 hours` — margin-top 22, 37rem / 800 / ls -0.035em / line 1 / `#0b0b0b`
- Sub: `saved this week!` — margin-top 12, 14.5rem / 400 / ls -0.012em / `#1d1d1d`
### Bar chart (margin-top auto, height 294, flex end, gap 13)
Seven columns MON→SUN. Quiet bars bg `#e9e3da`, radius 7, pad-top 9, label color `#a1978a` 13rem/500. Day labels: 10.4rem / 500 / ls 0.05em / `#a79c8e`, margin-top 10.
| Day | Label | Bar height |
|---|---|---|
| MON | 2h | 43.2 |
| TUE | 6h | 80.9 |
| WED | 12h | 131.7 |
| THU | 20h | 165.5 |
| FRI | 31h | 203.2 |
| SAT | 40h | 235.2 |
| SUN | 48h | **265** — special gradient `linear-gradient(180deg, #f2b705 0%, #e7b208 26%, #a8a422 52%, #6a8f33 76%, #3d7a3e 100%)`, white text weight 600, shadow `0 4rem 12rem rgba(150,120,20,.20)` |
Aria on chart: `"Hours saved per day: Monday 2, Tuesday 6, Wednesday 12, Thursday 20, Friday 31, Saturday 40, Sunday 48"`
---
## CARD 5 — SEARCH (`.search`)
**Background:** `linear-gradient(103deg, #eae9f5 0%, #e2e0f1 34%, #cfcdea 72%, #c2c0e6 100%)`
Flex align center, pad-left 46, pad-right 25. Aria: `"Search"`.
- H2: `Find anything<br>instantly` — 23rem / 800 / line 1.39 / ls -0.028em / `#0d0d10`
- Search bar: `margin-left:auto`, **612×64**, radius 999, white, shadow `0 4rem 14rem rgba(70,66,120,.10)`, flex, pad `0 22 0 10`, gap 16
- Mag circle 44×44 bg `#f1f1f5` with search SVG (circle r=7.1 stroke `#121212` w=2.2 + diagonal handle)
- Placeholder: `Search tasks, docs, workflows...` — 16.5rem / 400 / ls -0.015em / `#8c8c99`
- Mic SVG 16×20: dark capsule + U arc + stem + base, fill/stroke `#141414`
---
## RESPONSIVE
### Tablet: `(min-width:701px) and (max-width:1040px) and (max-aspect-ratio:3/2)`
- Scale: `min(95vw/1025, 94vh/918)`
- Stage 1025×918; cols `627 | 388`; rows `505 | 194 | 201`
- Remap: automate(1,1) height 501; notif(1,2); search(1,3); insights(2,1); connect(2, 2/span2)
- Notif: center toast (wrap width 380, max-width calc(100%-24))
- Search: stack column; bar full width, margin-top 22
- Bump toast/tag/qbar/day font sizes for legibility floor
### Mobile: `(max-width:700px)`
- `html { font-size: calc((min(100vw,560px) - 30px) / 375) }`
- Body: block, scroll Y, pad 15px 0
- Single column stage width 375, auto height, row-gap 13
- Fixed card heights: notif 149, connect 508, insights 500, automate 298
- Automate illo: `scale(.5981)` origin 0 0; smaller headline/sub
- Search stacked, bar height 58
---
## ENTRANCE ANIMATION SYSTEM (exact)
### Boot script (in `<head>`)
If NOT `prefers-reduced-motion: reduce`:
- Add class `motion-pending` on `<html>`
- Fail-safe timeout 2400ms removes `motion-pending`
### End script (before `</body>`)
1. If reduced motion OR `__entrancePlayed` already: clear fail-safe, remove motion classes, return
2. Set `__entrancePlayed = true`
3. Race `document.fonts.ready` vs 700ms deadline
4. Replace `motion-pending` → `entrance-run`
5. After **1850ms**, remove `entrance-run` (returns to pure static authored styles)
### While `.motion-pending`
Desktop: all `.card` `opacity:0; visibility:hidden`
Mobile ≤700: only `.notif`, `.connect`, `.automate` hidden; insights/search stay visible and never animate
### While `.entrance-run` — panel order (product mosaic: automate leads)
Use `will-change: opacity, translate, scale, clip-path` on cards. All animations `backwards` fill.
**Keyframes (exact):**
| Name | From → To |
|---|---|
| `panel-settle` | opacity 0, translate Y 12, scale .988, clip-path inset(3% round 22) → settled (opacity 1 at 62%) |
| `type-unmask` | opacity 0, translate Y 16, clip-path inset(0 0 96% 0) → full |
| `content-rise` | opacity 0, translate Y 9 → none |
| `interface-settle` | opacity 0, translate Y 16, scale .975 → none |
| `detail-settle` | opacity 0, translate Y 8, scale .97 → none |
| `toast-arrive` | opacity 0, translate Y 10, scale .982 → none |
| `chip-row-arrive` | opacity 0, translate Y 11 → none |
| `chart-unmask` | opacity 0, translate Y 10, clip-path inset(100% 0 0 0) → none |
| `search-resolve` | opacity 0, translate X 12, scale(.975, 1) → none; transform-origin right center |
**Easings:** panels/details mostly `cubic-bezier(.16,1,.3,1)`; type-unmask `cubic-bezier(.22,1,.36,1)`.
**Timing table:**
| Target | Animation | Duration | Delay |
|---|---|---|---|
| `.automate` card | panel-settle | .82s | .04s |
| `.notif` card | panel-settle | .66s | .10s |
| `.insights` card | panel-settle | .74s | .14s |
| `.connect` card | panel-settle | .74s | .20s |
| `.search` card | panel-settle | .68s | .28s |
| automate h2 | type-unmask | .78s | .20s |
| automate .sub | content-rise | .54s | .48s |
| win-back | interface-settle | .84s | .42s |
| win-front | interface-settle | .94s | .50s |
| pill-ai | detail-settle | .60s | .72s |
| pill-wf | detail-settle | .58s | .78s |
| cursor | detail-settle | .54s | .96s |
| toast-wrap | toast-arrive | .62s | .38s |
| connect h2 | type-unmask | .64s | .54s |
| connect .sub | content-rise | .48s | .73s |
| chip-row.r1 | chip-row-arrive | .62s | .86s |
| chip-row.r2 | chip-row-arrive | .62s | .91s |
| chip-row.r3 | chip-row-arrive | .62s | .96s |
| chip-slack | detail-settle | .58s | 1.02s |
| insights .tag | content-rise | .46s | .44s |
| insights h2 | type-unmask | .62s | .56s |
| insights .sub | content-rise | .44s | .75s |
| .chart | chart-unmask | .86s | .72s |
| search h2 | type-unmask | .56s | .72s |
| .bar-search | search-resolve | .70s | .88s |
`prefers-reduced-motion: reduce` → no animations, all visible immediately.
---
## ASSET URLS
There are **no raster/CDN image assets**. Recreate with:
1. Google Fonts URL above
2. Inline SVGs only (Slack, Teams, Notion, GitHub, Drive, Figma, toast sparkle, AI dual-sparkle, checkmark, cursor, search, mic)
Do not invent Unsplash/CDN photos, Lottie files, or icon libraries.
---
## DESIGN INTENT SUMMARY
Centered product **feature mosaic** on light grey `#f0f0f0`: five rounded cards — pink notification toast, cool-grey integrations with pill chips + tilted Slack, chartreuse automation hero with two splayed faux OS windows + AI/workflow badges + cursor, warm peach insights with ascending bars (Sunday gold→green), lavender search with pill search field. One-shot entrance: automate panel leads, interface layers resolve, surrounding utilities complete the frame; then animations detach leaving the static design.
---
## DELIVERABLE
Single `index.html` matching the above measurements, colors, copy, SVG geometry, responsive rules, and entrance choreography exactly. No frameworks. No cards-within-cards beyond the five specified panels.
---
Vectrus EnergyEditorial · free prompt · copy-paste
Build a standalone cinematic one-page site that recreates this EXACTLY. Do not invent extra sections, extra copy, extra logos, extra overlays, GSAP, Lenis, or a different video. Match structure, copy, colors, type, spacing, breakpoints, animations, and scroll-video logic.
STACK
- Vite + React 18 + TypeScript + Tailwind CSS 3
- lucide-react icons: ArrowRight, ArrowDown, ChevronUp, Info, X
- mp4box ^0.5.2 for WebCodecs frame extraction
- Path alias @ -> src
- No routing. Single App. One full-viewport sticky scene, 500vh tall scroll track.
VIDEO (use this URL exactly, nowhere else)
https://meez.design/web/media/ext/ec344d33d55ad7a9.mp4
The clip is a high-key aerial fly-through: pale clouds, mist, mountains, then darker atmospheric landscape. Full-bleed object-cover background. No poster image. No controls. muted, playsInline, preload="auto". Video is NEVER autoplayed as a timeline; playback position is driven by scroll.
FONT
Load exactly:
<link href="(self-host this face — no free CDN; substitute a close match if unavailable)" rel="stylesheet">
body font-family: 'Helvetica Neue ME', 'Helvetica Neue', Helvetica, Arial, sans-serif;
html { scroll-behavior: smooth; }
body { overflow-x: hidden; }
Title: "Scroll Tied Video Section"
COLOR
const DARK = '#1D3045'
Navy text on light cloud frames. White text on dark later frames.
No color overlays / gradients on the video. Text sits directly on the video.
PAGE ARCHITECTURE
Outer: relative h-[500vh] (this is the scroll distance)
Inner sticky: sticky top-0 w-full h-screen overflow-hidden
Inside sticky:
1) <video> full cover
2) <canvas width=1920 height=1080> absolute inset-0 object-cover, opacity 1 when frame-bank is live else 0, transition-opacity duration-300. Canvas draws decoded frames so scrubbing is smooth (video.currentTime seeking is fallback only).
3) Overlay absolute inset-0 pointer-events-none containing Navbar + 3 sequential sections.
SCROLL PROGRESS
p = clamp(0, 1, window.scrollY / (container.offsetHeight - window.innerHeight))
Recompute span on resize and orientationchange.
TEXT SECTIONS ARE SEQUENTIAL (previous fully fades out before next appears)
s1Opacity:
p < 0.20 → 1
else → max(0, 1 - (p - 0.20) / 0.08)
s2Opacity:
p < 0.32 → 0
p < 0.40 → (p - 0.32) / 0.08
p < 0.55 → 1
else → max(0, 1 - (p - 0.55) / 0.08)
s3Opacity:
p < 0.67 → 0
p < 0.75 → (p - 0.67) / 0.08
else → 1
Each section: absolute inset-0, style opacity + transition 'opacity 0.1s ease-out'
Children use Stagger: visible when section opacity > 0.3
Stagger: opacity 0→1, translateY(24px)→0, 0.8s cubic-bezier(0.16,1,0.3,1), delay in ms.
NAVBAR (absolute top, z-50, pointer-events-auto)
Padding: px-6 sm:px-8 md:px-12 pt-8 sm:pt-12 pb-6
flex items-center justify-between
Color flips at p > 0.55: DARK → white (duration-500)
Desktop lg+: left cluster of 5 links, gap-8 xl:gap-10
VECTRUS ENERGY (active, 2px underline -bottom-3 full width)
VECTRUS UPSTREAM
VECTRUS MARKETS
VECTRUS SYSTEMS
VECTRUS+
Link style: text-xs tracking-[0.15em] uppercase font-medium, hover:opacity-70
Nav entrance: after 200ms, each link fades/slides from translateY(-12px), opacity 0.6s cubic-bezier(0.16,1,0.3,1), delay i*80+100ms
Right cluster (hidden below sm):
NEWS (text-xs tracking-[0.2em] uppercase font-medium) + 20px circle filled with current nav color, Info icon size 10 inverted
MENU label same type (lg+: span, below lg: button that opens overlay)
Right cluster delay 500ms same entrance
Mobile <lg: hamburger left, 3 bars:
bar 24x2, 24x2, 16x2, gap 5px, color follows isLight
Hamburger opens full-screen overlay.
MOBILE MENU OVERLAY
fixed inset-0 z-[100], background DARK
open: opacity-100 visible; closed: opacity-0 invisible; duration-500 ease cubic-bezier(0.4,0,0.2,1)
inner panel: closed -translate-y-8, open translate-y-0
Close: top-right px-6 sm:px-8 pt-8 sm:pt-12, 40px circle border-white/30, X 18, hover:border-white
Links centered vertically, px-8 sm:px-12, py-3, text-2xl sm:text-3xl font-light tracking-wide uppercase
active white, others white/60 hover:white
stagger in: delay i*60ms, translateY(20px)→0
Footer: NEWS and CONTACT, text-xs tracking-[0.2em] uppercase text-white/60, px-8 sm:px-12 pb-10
When open, body overflow hidden.
SECTION 1 (hero, left aligned, vertically centered)
px-6 sm:px-8 md:px-20 lg:px-32
H1: "Advancing resources for a cleaner future"
clamp(2rem,5vw,5rem) font-light uppercase leading-[1.2] color DARK
Subtitle below mt-6: "Sustainable power with purpose"
text-sm tracking-[0.3em] uppercase color DARK at 90% alpha (#1D304590)
Bottom-right absolute bottom-12 right-6 sm:right-8 md:right-12:
48px circle button, border DARK 50% alpha, ArrowRight 18, hover:opacity-70
Stagger delays: title 0, subtitle 150, button 300
SECTION 2 (center)
px-6 sm:px-8, flex center
max-w-[900px]
H2 clamp(1.5rem,4.5vw,4.5rem) font-extralight tracking-wide leading-[1.3] text-center uppercase
Copy exactly:
"We build lasting partnerships with vision " + span color DARK 80% "and precision" + " " + span color DARK 50% "across every frontier"
Right column absolute bottom-16 right-6 sm:right-8 md:right-12, flex-col items-center gap-4:
48px circle, border DARK 40%, ArrowDown 18
then mt-4 three dots: 8px solid DARK (active), 6px DARK 40%, 6px DARK 40%, gap-2
then 40px circle, border DARK 30%, ChevronUp 16, color DARK 80%, mt-2
Stagger delays: headline 0, down 200, dots 350, up 500
SECTION 3 (right aligned, white type — video is dark here)
flex items-center justify-end px-6 sm:px-8 md:px-20 lg:px-32
max-w-2xl text-left
Eyebrow: "Halder | Nordvik" text-white/60 text-lg tracking-wide mb-4
H2: "Fueling ambition," line break "shaping tomorrow."
clamp(2rem,4vw,4rem) font-light text-white leading-[1.2] uppercase tracking-wide mb-8
CTA row gap-4:
"Contact Nordvik" text-sm tracking-[0.3em] text-white/80 uppercase
40px white filled circle, gray-800 ArrowRight 16, hover:scale-110 duration-300
Stagger delays: 0 / 150 / 300
SMOOTH VIDEO SCROLL — SAME LOGIC (do not replace with GSAP or naive currentTime only)
Hook useVideoScrub(videoSrc):
Constants:
LERP_TAU = 8
SNAP = 0.002
LRU_MAX = 24
LEAD = 24
WATCHDOG = 60000 ms
State:
bank: {ts microseconds, blob webp}[]
lru: Map<index, ImageBitmap | null>
current / target times in seconds
ready, reverted, painted, building, dur
rAF loop every frame:
dt = min(0.1, deltaSeconds)
p = getProgress(); setScrollProgress(p)
if dur > 0:
target = p * dur
if prefers-reduced-motion: current = target
else:
current += (target - current) * (1 - exp(-dt * LERP_TAU))
if abs(target-current) < SNAP: current = target
if ready: draw nearest frame from bank
else: fallback: if not seeking and abs(video.currentTime - current) > 0.01, set video.currentTime = current
Frame bank (build after window load, skip if reduced-motion or no VideoDecoder):
fetch the CloudFront mp4 as ArrayBuffer
parse with MP4Box.createFile(), extract video track, configure VideoDecoder (codec + avcC/hvcC/vpcC/av1C description)
decode samples as EncodedVideoChunk (key vs delta)
throttle with LEAD so decode doesn't outrun blob encoding
each VideoFrame → offscreen canvas → toBlob('image/webp', 0.82) stored with timestamp
sort bank by ts
nearestIndex: binary search on timestamps (compare t*1e6)
warmLRU around i-1..i+2, createImageBitmap, evict oldest when size > LRU_MAX
first successful canvas paint → canvasLive true (canvas fades in over video)
if hardware decode fails, retry once with hardwareAcceleration: 'prefer-software'
60s watchdog → revert to video seeking fallback, hide canvas
CORS: fetch needs CloudFront CORS; video element still works as fallback if decode fails
Video element still renders underneath until canvas is live.
DO NOT
- Add extra brands, logos, cookie widgets, or “scroll down to discover”
- Change copy or nav labels
- Play the video with play()
- Use a different video host or local file
- Skip mobile overlay or hamburger
- Skip lerp (jumping frames = wrong)
DELIVER
Working Vite React TS app: index.html, App.tsx, useVideoScrub.ts, index.css, mp4box.d.ts, vite alias @, lucide-react + mp4box installed. Pixel-faithful to the spec above.
---
## HTML Code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Scroll Tied Video Section</title>
<link href="(self-host this face — no free CDN; substitute a close match if unavailable)" rel="stylesheet" />
<style>
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
font-family: 'Helvetica Neue ME', 'Helvetica Neue', Helvetica, Arial, sans-serif;
overflow-x: hidden;
background: #0a0a0a;
}
.track { position: relative; height: 500vh; }
.sticky {
position: sticky;
top: 0;
width: 100%;
height: 100vh;
overflow: hidden;
}
.bg-video, .bg-canvas {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
.bg-canvas {
opacity: 0;
transition: opacity 0.3s ease;
pointer-events: none;
}
.bg-canvas.live { opacity: 1; }
.overlay { position: absolute; inset: 0; pointer-events: none; }
/* NAV */
.nav {
position: absolute;
top: 0; left: 0; right: 0;
z-index: 50;
pointer-events: auto;
padding: 3rem 1.5rem 1.5rem;
display: flex;
align-items: center;
justify-content: space-between;
}
@media (min-width: 640px) { .nav { padding: 3rem 2rem 1.5rem; } }
@media (min-width: 768px) { .nav { padding: 3rem 3rem 1.5rem; } }
.nav-links { display: none; align-items: center; gap: 2.5rem; }
@media (min-width: 1024px) { .nav-links { display: flex; } }
@media (min-width: 1280px) { .nav-links { gap: 2.5rem; } }
.nav-link {
position: relative;
font-size: 0.75rem;
letter-spacing: 0.15em;
text-transform: uppercase;
font-weight: 500;
cursor: pointer;
color: #1D3045;
transition: color 0.5s, opacity 0.3s;
}
.nav-link:hover { opacity: 0.7; }
.nav-link.active::after {
content: '';
position: absolute;
left: 0; right: 0;
bottom: -0.75rem;
height: 2px;
background: currentColor;
}
.nav-link.enter, .nav-right.enter {
opacity: 0;
transform: translateY(-12px);
}
.nav-link.show, .nav-right.show {
opacity: 1;
transform: translateY(0);
}
.nav-link.show, .nav-right.show, .nav-link.enter, .nav-right.enter {
transition: opacity 0.6s cubic-bezier(0.16,1,0.3,1), transform 0.6s cubic-bezier(0.16,1,0.3,1), color 0.5s;
}
.hamburger {
display: flex;
flex-direction: column;
gap: 5px;
background: none;
border: none;
cursor: pointer;
z-index: 60;
padding: 0;
}
@media (min-width: 1024px) { .hamburger { display: none; } }
.hamburger span {
display: block;
height: 2px;
background: #1D3045;
transition: background-color 0.5s;
}
.hamburger span:nth-child(1),
.hamburger span:nth-child(2) { width: 24px; }
.hamburger span:nth-child(3) { width: 16px; }
.nav-right {
display: none;
align-items: center;
gap: 1.5rem;
}
@media (min-width: 640px) { .nav-right { display: flex; } }
.news {
display: flex;
align-items: center;
gap: 0.5rem;
}
.news-label, .menu-label {
font-size: 0.75rem;
letter-spacing: 0.2em;
text-transform: uppercase;
font-weight: 500;
color: #1D3045;
transition: color 0.5s;
background: none;
border: none;
cursor: pointer;
font-family: inherit;
}
.menu-label.lg-only { display: none; }
@media (min-width: 1024px) {
.menu-label.sm-only { display: none; }
.menu-label.lg-only { display: inline; cursor: default; }
}
.info-dot {
width: 20px; height: 20px;
border-radius: 50%;
background: #1D3045;
display: flex;
align-items: center;
justify-content: center;
transition: background-color 0.5s;
}
.nav.is-light .nav-link,
.nav.is-light .news-label,
.nav.is-light .menu-label { color: #fff; }
.nav.is-light .info-dot { background: #fff; }
.nav.is-light .hamburger span { background: #fff; }
.nav.is-light .info-dot svg { stroke: #111827; }
/* MOBILE MENU */
.mobile-menu {
position: fixed;
inset: 0;
z-index: 100;
pointer-events: auto;
background: #1D3045;
opacity: 0;
visibility: hidden;
transition: opacity 0.5s cubic-bezier(0.4,0,0.2,1), visibility 0.5s;
}
.mobile-menu.open { opacity: 1; visibility: visible; }
.mobile-inner {
height: 100%;
display: flex;
flex-direction: column;
transform: translateY(-2rem);
transition: transform 0.5s cubic-bezier(0.4,0,0.2,1);
}
.mobile-menu.open .mobile-inner { transform: translateY(0); }
.mobile-close-wrap {
display: flex;
justify-content: flex-end;
padding: 2rem 1.5rem 0;
}
@media (min-width: 640px) { .mobile-close-wrap { padding: 3rem 2rem 0; } }
.close-btn {
width: 40px; height: 40px;
border-radius: 50%;
border: 1px solid rgba(255,255,255,0.3);
background: none;
color: #fff;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: border-color 0.3s;
}
.close-btn:hover { border-color: #fff; }
.mobile-links {
flex: 1;
display: flex;
flex-direction: column;
justify-content: center;
padding: 0 2rem;
gap: 0.25rem;
}
@media (min-width: 640px) { .mobile-links { padding: 0 3rem; } }
.mobile-links a {
display: block;
padding: 0.75rem 0;
text-decoration: none;
opacity: 0;
transform: translateY(20px);
transition: transform 0.3s ease-out, opacity 0.3s ease-out, color 0.3s;
}
.mobile-menu.open .mobile-links a {
opacity: 1;
transform: translateY(0);
}
.mobile-links a span {
font-size: 1.5rem;
font-weight: 300;
letter-spacing: 0.025em;
text-transform: uppercase;
color: rgba(255,255,255,0.6);
}
@media (min-width: 640px) { .mobile-links a span { font-size: 1.875rem; } }
.mobile-links a.active span,
.mobile-links a:hover span { color: #fff; }
.mobile-foot {
padding: 0 2rem 2.5rem;
display: flex;
align-items: center;
gap: 1.5rem;
}
@media (min-width: 640px) { .mobile-foot { padding: 0 3rem 2.5rem; } }
.mobile-foot span {
font-size: 0.75rem;
letter-spacing: 0.2em;
text-transform: uppercase;
color: rgba(255,255,255,0.6);
}
/* SECTIONS */
.section {
position: absolute;
inset: 0;
pointer-events: auto;
opacity: 0;
transition: opacity 0.1s ease-out;
}
.section-1 {
display: flex;
flex-direction: column;
justify-content: center;
padding: 0 1.5rem;
}
@media (min-width: 640px) { .section-1 { padding: 0 2rem; } }
@media (min-width: 768px) { .section-1 { padding: 0 5rem; } }
@media (min-width: 1024px) { .section-1 { padding: 0 8rem; } }
.h1 {
font-size: clamp(2rem, 5vw, 5rem);
font-weight: 300;
text-transform: uppercase;
line-height: 1.2;
color: #1D3045;
}
.sub {
margin-top: 1.5rem;
font-size: 0.875rem;
letter-spacing: 0.3em;
text-transform: uppercase;
color: #1D304590;
}
.circle-btn {
width: 48px; height: 48px;
border-radius: 50%;
border: 1px solid #1D304550;
background: none;
color: #1D3045;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: opacity 0.3s;
}
.circle-btn:hover { opacity: 0.7; }
.s1-btn {
position: absolute;
bottom: 3rem;
right: 1.5rem;
}
@media (min-width: 640px) { .s1-btn { right: 2rem; } }
@media (min-width: 768px) { .s1-btn { right: 3rem; } }
.section-2 {
display: flex;
align-items: center;
justify-content: center;
padding: 0 1.5rem;
}
@media (min-width: 640px) { .section-2 { padding: 0 2rem; } }
.h2-wrap { max-width: 900px; }
.h2 {
font-size: clamp(1.5rem, 4.5vw, 4.5rem);
font-weight: 200;
letter-spacing: 0.025em;
line-height: 1.3;
text-align: center;
text-transform: uppercase;
color: #1D3045;
}
.h2 .mid { color: #1D304580; }
.h2 .dim { color: #1D304550; }
.s2-rail {
position: absolute;
bottom: 4rem;
right: 1.5rem;
display: flex;
flex-direction: column;
align-items: center;
gap: 1rem;
}
@media (min-width: 640px) { .s2-rail { right: 2rem; } }
@media (min-width: 768px) { .s2-rail { right: 3rem; } }
.dots {
display: flex;
flex-direction: column;
align-items: center;
gap: 0.5rem;
margin-top: 1rem;
}
.dot-a { width: 8px; height: 8px; border-radius: 50%; background: #1D3045; }
.dot-b { width: 6px; height: 6px; border-radius: 50%; background: #1D304540; }
.circle-btn.sm {
width: 40px; height: 40px;
border-color: #1D304530;
color: #1D304580;
margin-top: 0.5rem;
}
.section-3 {
display: flex;
align-items: center;
justify-content: flex-end;
padding: 0 1.5rem;
}
@media (min-width: 640px) { .section-3 { padding: 0 2rem; } }
@media (min-width: 768px) { .section-3 { padding: 0 5rem; } }
@media (min-width: 1024px) { .section-3 { padding: 0 8rem; } }
.s3-inner { max-width: 42rem; text-align: left; }
.eyebrow {
color: rgba(255,255,255,0.6);
font-size: 1.125rem;
letter-spacing: 0.025em;
margin-bottom: 1rem;
}
.h2-white {
font-size: clamp(2rem, 4vw, 4rem);
font-weight: 300;
color: #fff;
line-height: 1.2;
text-transform: uppercase;
letter-spacing: 0.025em;
margin-bottom: 2rem;
}
.cta { display: flex; align-items: center; gap: 1rem; }
.cta span {
font-size: 0.875rem;
letter-spacing: 0.3em;
color: rgba(255,255,255,0.8);
text-transform: uppercase;
}
.cta-btn {
width: 40px; height: 40px;
border-radius: 50%;
border: none;
background: #fff;
color: #1f2937;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: transform 0.3s;
}
.cta-btn:hover { transform: scale(1.1); }
.stagger {
opacity: 0;
transform: translateY(24px);
transition: opacity 0.8s cubic-bezier(0.16,1,0.3,1), transform 0.8s cubic-bezier(0.16,1,0.3,1);
}
.stagger.in {
opacity: 1;
transform: translateY(0);
}
</style>
</head>
<body>
<div class="track" id="track">
<div class="sticky">
<video
id="bgVideo"
src="https://meez.design/web/media/ext/ec344d33d55ad7a9.mp4"
muted
playsinline
preload="auto"
class="bg-video"
></video>
<canvas id="bgCanvas" class="bg-canvas" width="1920" height="1080"></canvas>
<div class="overlay">
<nav class="nav" id="nav">
<div class="nav-links" id="navLinks">
<span class="nav-link active enter" data-i="0">VECTRUS ENERGY</span>
<span class="nav-link enter" data-i="1">VECTRUS UPSTREAM</span>
<span class="nav-link enter" data-i="2">VECTRUS MARKETS</span>
<span class="nav-link enter" data-i="3">VECTRUS SYSTEMS</span>
<span class="nav-link enter" data-i="4">VECTRUS+</span>
</div>
<button class="hamburger" id="openMenu" aria-label="Open menu">
<span></span><span></span><span></span>
</button>
<div class="nav-right enter" id="navRight">
<div class="news">
<span class="news-label">NEWS</span>
<div class="info-dot">
<svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
<circle cx="12" cy="12" r="10"/><path d="M12 16v-4"/><path d="M12 8h.01"/>
</svg>
</div>
</div>
<button class="menu-label sm-only" id="openMenuLabel">MENU</button>
<span class="menu-label lg-only">MENU</span>
</div>
</nav>
<section class="section section-1" id="s1">
<div class="stagger" data-d="0">
<h1 class="h1">Advancing resources for a cleaner future</h1>
</div>
<div class="stagger" data-d="150">
<p class="sub">Sustainable power with purpose</p>
</div>
<div class="stagger s1-btn" data-d="300">
<button class="circle-btn" aria-label="Next">
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14"/><path d="m12 5 7 7-7 7"/></svg>
</button>
</div>
</section>
<section class="section section-2" id="s2">
<div class="stagger h2-wrap" data-d="0">
<h2 class="h2">
We build lasting partnerships with vision
<span class="mid">and precision</span>
<span class="dim">across every frontier</span>
</h2>
</div>
<div class="s2-rail">
<div class="stagger" data-d="200">
<button class="circle-btn" aria-label="Scroll down">
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 5v14"/><path d="m19 12-7 7-7-7"/></svg>
</button>
</div>
<div class="stagger dots" data-d="350">
<div class="dot-a"></div>
<div class="dot-b"></div>
<div class="dot-b"></div>
</div>
<div class="stagger" data-d="500">
<button class="circle-btn sm" aria-label="Scroll up">
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m18 15-6-6-6 6"/></svg>
</button>
</div>
</div>
</section>
<section class="section section-3" id="s3">
<div class="s3-inner">
<div class="stagger" data-d="0">
<p class="eyebrow">Halder | Nordvik</p>
</div>
<div class="stagger" data-d="150">
<h2 class="h2-white">Fueling ambition,<br />shaping tomorrow.</h2>
</div>
<div class="stagger" data-d="300">
<div class="cta">
<span>Contact Nordvik</span>
<button class="cta-btn" aria-label="Contact">
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14"/><path d="m12 5 7 7-7 7"/></svg>
</button>
</div>
</div>
</div>
</section>
</div>
</div>
</div>
<div class="mobile-menu" id="mobileMenu">
<div class="mobile-inner">
<div class="mobile-close-wrap">
<button class="close-btn" id="closeMenu" aria-label="Close menu">
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M18 6 6 18"/><path d="m6 6 12 12"/></svg>
</button>
</div>
<div class="mobile-links">
<a href="#" class="active" style="transition-delay:0ms"><span>VECTRUS ENERGY</span></a>
<a href="#" style="transition-delay:60ms"><span>VECTRUS UPSTREAM</span></a>
<a href="#" style="transition-delay:120ms"><span>VECTRUS MARKETS</span></a>
<a href="#" style="transition-delay:180ms"><span>VECTRUS SYSTEMS</span></a>
<a href="#" style="transition-delay:240ms"><span>VECTRUS+</span></a>
</div>
<div class="mobile-foot">
<span>NEWS</span>
<span>CONTACT</span>
</div>
</div>
</div>
<script src="https://unpkg.com/mp4box@0.5.2/dist/mp4box.all.min.js"></script>
<script>
const VIDEO_SRC = 'https://meez.design/web/media/ext/ec344d33d55ad7a9.mp4';
const LERP_TAU = 8;
const SNAP = 0.002;
const LRU_MAX = 24;
const LEAD = 24;
const WATCHDOG = 60000;
const video = document.getElementById('bgVideo');
const canvas = document.getElementById('bgCanvas');
const track = document.getElementById('track');
const nav = document.getElementById('nav');
const s1 = document.getElementById('s1');
const s2 = document.getElementById('s2');
const s3 = document.getElementById('s3');
const mobileMenu = document.getElementById('mobileMenu');
const clip = {
bank: [],
lru: new Map(),
drawnIndex: -1,
ready: false,
reverted: false,
painted: false,
building: false,
buildRun: 0,
dur: 0,
current: 0,
target: 0,
};
let span = 0;
let reducedMotion = false;
try { reducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches; } catch (e) {}
function measure() {
span = track.offsetHeight - window.innerHeight;
}
function getProgress() {
if (span <= 0) return 0;
return Math.min(1, Math.max(0, window.scrollY / span));
}
function nearestIndex(bank, t) {
const us = t * 1e6;
let lo = 0, hi = bank.length - 1;
while (lo < hi) {
const m = (lo + hi) >> 1;
if (bank[m].ts < us) lo = m + 1; else hi = m;
}
return lo;
}
function warmLRU(bank, lru, i) {
for (let k = -1; k <= 2; k++) {
const j = i + k;
if (j < 0 || j >= bank.length || lru.has(j)) continue;
lru.set(j, null);
createImageBitmap(bank[j].blob).then((bm) => {
lru.set(j, bm);
if (lru.size > LRU_MAX) {
const it = lru.keys();
for (let n = 0; n < lru.size - LRU_MAX; n++) {
const key = it.next().value;
const old = lru.get(key);
if (old && old.close) old.close();
lru.delete(key);
}
}
}).catch(() => { lru.delete(j); });
}
}
function drawFromBank(t) {
if (!canvas || !clip.bank.length) return;
const i = nearestIndex(clip.bank, t);
const bm = clip.lru.get(i);
if (bm && i !== clip.drawnIndex) {
const ctx = canvas.getContext('2d', { alpha: false });
if (ctx) {
ctx.drawImage(bm, 0, 0, canvas.width, canvas.height);
clip.drawnIndex = i;
if (!clip.painted && !clip.reverted) {
clip.painted = true;
canvas.classList.add('live');
}
}
}
warmLRU(clip.bank, clip.lru, i);
}
function renderFallback(t) {
if (!video) return;
if (!video.seeking && Math.abs(video.currentTime - t) > 0.01) {
try { video.currentTime = t; } catch (e) {}
}
}
function buildFrameBank(soft) {
if (clip.building || reducedMotion) return;
if (typeof VideoDecoder === 'undefined' || typeof MP4Box === 'undefined') return;
clip.building = true;
let settled = false;
const watchdog = setTimeout(() => { revert(); finish(); }, WATCHDOG);
function finish() { if (settled) return; settled = true; clearTimeout(watchdog); }
function revert() {
clip.reverted = true;
clip.ready = false;
canvas.classList.remove('live');
}
function failDecode() {
if (settled) return;
if (!soft) {
settled = true; clearTimeout(watchdog);
try { decoder.close(); } catch (e) {}
clip.building = false;
clip.bank.length = 0; clip.lru.clear(); clip.drawnIndex = -1;
buildFrameBank(true);
return;
}
revert(); finish();
}
const off = document.createElement('canvas');
let octx = null;
let chain = Promise.resolve();
const samples = [];
const run = ++clip.buildRun;
let cnt = 0;
const waiters = [];
function tickDone() {
cnt++;
for (let i = waiters.length - 1; i >= 0; i--) {
if (cnt >= waiters[i].n) { waiters[i].res(); waiters.splice(i, 1); }
}
}
function until(n) {
if (cnt >= n) return Promise.resolve();
return new Promise(res => { waiters.push({ n, res }); });
}
let file;
try { file = MP4Box.createFile(); } catch (e) { revert(); finish(); return; }
const decoder = new VideoDecoder({
output: (vf) => {
const ts = vf.timestamp;
chain = chain.then(() => {
if (clip.reverted) { vf.close(); tickDone(); return; }
if (!octx) {
off.width = vf.codedWidth || 1280;
off.height = vf.codedHeight || 720;
octx = off.getContext('2d', { alpha: false });
}
octx.drawImage(vf, 0, 0, off.width, off.height);
vf.close();
return new Promise((res) => {
off.toBlob((blob) => {
if (blob && run === clip.buildRun) clip.bank.push({ ts, blob });
tickDone(); res();
}, 'image/webp', 0.82);
});
});
},
error: failDecode,
});
function description(track) {
const trak = file.getTrackById(track.id);
const entries = trak.mdia.minf.stbl.stsd.entries;
for (let i = 0; i < entries.length; i++) {
const box = entries[i].avcC || entries[i].hvcC || entries[i].vpcC || entries[i].av1C;
if (box) {
const s = new MP4Box.DataStream(undefined, 0, MP4Box.DataStream.BIG_ENDIAN);
box.write(s);
return new Uint8Array(s.buffer, 8);
}
}
return null;
}
file.onError = () => { revert(); finish(); };
file.onReady = (info) => {
const track = info.videoTracks && info.videoTracks[0];
if (!track) { revert(); finish(); return; }
const desc = description(track);
const cfg = {
codec: track.codec,
codedWidth: track.video.width,
codedHeight: track.video.height,
};
if (desc) cfg.description = desc;
if (soft) cfg.hardwareAcceleration = 'prefer-software';
try { decoder.configure(cfg); } catch (e) { failDecode(); return; }
file.setExtractionOptions(track.id, null, { nbSamples: Infinity });
file.start();
};
file.onSamples = (_id, _user, list) => {
for (let i = 0; i < list.length; i++) samples.push(list[i]);
};
function pump() {
let i = 0;
function step() {
if (clip.reverted) return Promise.resolve();
while (i < samples.length) {
const s = samples[i];
try {
decoder.decode(new EncodedVideoChunk({
type: s.is_sync ? 'key' : 'delta',
timestamp: s.cts * 1e6 / s.timescale,
duration: s.duration * 1e6 / s.timescale,
data: s.data,
}));
} catch (e) { failDecode(); return Promise.resolve(); }
i++;
if (i - cnt > LEAD) return until(i - LEAD).then(step);
}
return Promise.resolve();
}
return step();
}
fetch(VIDEO_SRC)
.then(r => { if (!r.ok) throw new Error('http ' + r.status); return r.arrayBuffer(); })
.catch(() => { revert(); finish(); })
.then((buf) => {
if (!buf || clip.reverted) return;
try {
buf.fileStart = 0;
file.appendBuffer(buf);
file.flush();
} catch (e) { revert(); finish(); return; }
if (!samples.length) { revert(); finish(); return; }
pump()
.then(() => clip.reverted ? null : decoder.flush())
.then(() => chain)
.then(() => {
if (clip.reverted || !clip.bank.length) { finish(); return; }
clip.bank.sort((a, b) => a.ts - b.ts);
const i0 = nearestIndex(clip.bank, clip.current);
return createImageBitmap(clip.bank[i0].blob).then((bm) => {
if (clip.reverted) return;
clip.lru.set(i0, bm);
clip.ready = true;
drawFromBank(clip.current);
}).then(finish);
})
.catch(() => { failDecode(); });
});
}
function setStagger(section, visible) {
section.querySelectorAll('.stagger').forEach((el) => {
el.style.transitionDelay = visible ? (el.dataset.d || 0) + 'ms' : '0ms';
el.classList.toggle('in', visible);
});
}
function applyUI(p) {
const s1o = p < 0.20 ? 1 : Math.max(0, 1 - (p - 0.20) / 0.08);
const s2o = p < 0.32 ? 0 : p < 0.40 ? (p - 0.32) / 0.08 : p < 0.55 ? 1 : Math.max(0, 1 - (p - 0.55) / 0.08);
const s3o = p < 0.67 ? 0 : p < 0.75 ? (p - 0.67) / 0.08 : 1;
s1.style.opacity = s1o;
s2.style.opacity = s2o;
s3.style.opacity = s3o;
setStagger(s1, s1o > 0.3);
setStagger(s2, s2o > 0.3);
setStagger(s3, s3o > 0.3);
nav.classList.toggle('is-light', p > 0.55);
}
let last = performance.now();
function tick(now) {
const dt = Math.min(0.1, (now - last) / 1000);
last = now;
const p = getProgress();
applyUI(p);
if (clip.dur > 0) {
clip.target = p * clip.dur;
if (reducedMotion) {
clip.current = clip.target;
} else {
clip.current += (clip.target - clip.current) * (1 - Math.exp(-dt * LERP_TAU));
if (Math.abs(clip.target - clip.current) < SNAP) clip.current = clip.target;
}
if (clip.ready) drawFromBank(clip.current);
else renderFallback(clip.current);
}
requestAnimationFrame(tick);
}
function onMeta() {
clip.dur = video.duration || 0;
video.pause();
measure();
}
if (video.readyState >= 1) onMeta();
video.addEventListener('loadedmetadata', onMeta);
window.addEventListener('resize', measure);
window.addEventListener('orientationchange', measure);
measure();
function startBank() { buildFrameBank(false); }
if (document.readyState === 'complete') startBank();
else window.addEventListener('load', startBank, { once: true });
requestAnimationFrame(tick);
setTimeout(() => {
document.querySelectorAll('.nav-link').forEach((el) => {
const i = Number(el.dataset.i);
el.style.transitionDelay = (i * 80 + 100) + 'ms';
el.classList.add('show');
});
const right = document.getElementById('navRight');
right.style.transitionDelay = '500ms';
right.classList.add('show');
}, 200);
function openMenu() {
mobileMenu.classList.add('open');
document.body.style.overflow = 'hidden';
}
function closeMenu() {
mobileMenu.classList.remove('open');
document.body.style.overflow = '';
}
document.getElementById('openMenu').addEventListener('click', openMenu);
document.getElementById('openMenuLabel').addEventListener('click', openMenu);
document.getElementById('closeMenu').addEventListener('click', closeMenu);
mobileMenu.querySelectorAll('a').forEach((a) => {
a.addEventListener('click', (e) => { e.preventDefault(); closeMenu(); });
});
</script>
</body>
</html>
Vela UlFeatures Section · free prompt · copy-paste
Build a single, fully self-contained `index.html` — one file, no build step, no external
requests of any kind (no CDN, no webfonts, no images, no video, no data: URIs). All visuals
must be pure CSS gradients plus inline SVG. Inline all CSS in one <style> in <head> and the
one script in a <script> at the end of <body>.
It is a dark, cinematic hero page for a fictional real-time data platform called "Vela",
built as a FIXED 1690×950 design canvas. The canvas is uniformly scaled to FIT the viewport
at 700px and wider — the composition is preserved verbatim, never re-flowed — and only below
700px does it reflow into a single stacked column.
=== DOCUMENT HEAD ===
<!doctype html>, <html lang="en">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
<meta name="theme-color" content="#16120c">
<title>Vela — Infrastructure that moves like light</title>
=== ROOT TOKENS ===
:root {
--canvas-scale: 1;
--ink: #f7f5f2;
--muted: #aaa7aa;
--panel: #16120c;
--line: rgba(184, 198, 229, .22);
color-scheme: dark;
}
* { box-sizing: border-box; }
html, body { width: 100%; min-height: 100%; margin: 0; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
overflow: hidden;
background: #16120c;
color: var(--ink);
font-family: Arial, Helvetica, sans-serif;
-webkit-font-smoothing: antialiased;
text-rendering: geometricPrecision;
}
=== CANVAS + SHELL ===
.reference-canvas — position fixed; left 50%; top 50%; width 1690px; height 950px;
overflow hidden; transform: translate(-50%,-50%) scale(var(--canvas-scale));
transform-origin 50% 50%; isolation isolate; background #16120c.
.shell — position absolute; z-index 5; left 0; top 0; 1690×950; overflow hidden;
border-radius 0; background var(--panel); box-shadow none.
=== MARKUP STRUCTURE ===
<body>
<div class="reference-canvas">
<main class="shell" aria-labelledby="page-title">
<header class="nav">
<div class="brand" aria-label="Vela home">
<span class="brand-mark" aria-hidden="true"></span><span>Vela</span>
</div>
<nav class="nav-links" aria-label="Primary navigation">
<span>Platform</span><span aria-hidden="true">·</span><span>Features</span>
</nav>
</header>
<section class="intro">
<h1 id="page-title">
<span class="headline-sans">Infrastructure that</span>
<span class="headline-serif">moves like light.</span>
</h1>
<p>The real-time data platform for teams that can’t wait — ingest, transform, and<br class="desktop-break"> act on live signals with latency you can feel.</p>
</section>
<section class="cards" aria-label="Platform features">
… three <article class="card …" tabindex="0"> …
</section>
</main>
</div>
Use the typographic apostrophe ’ in "can’t" and a real em dash — in the paragraph.
=== NAV ===
.nav — absolute; left 168px; right 177px; top 37px; height 28px; flex; align-items center;
justify-content space-between.
.brand — inline-flex; align-items center; gap 9px; color #f9f7f4; 20px/24px; weight 700;
letter-spacing -.45px.
.brand-mark — 24×24; flex 0 0 auto; border-radius 6px; position relative;
background: linear-gradient(145deg, #ff9a71 0%, #ff724c 68%, #e95235 100%);
box-shadow: 0 0 13px rgba(255,112,69,.48), inset 0 1px 0 rgba(255,255,255,.32);
::before and ::after both: content ""; absolute; left 50%; transform translateX(-50%);
border-left 4px solid transparent; border-right 4px solid transparent.
::before { top 5px; border-bottom: 6px solid #17130e; }
::after { bottom 5px; border-top: 6px solid #17130e; }
(This carves two dark triangles out of the orange square — the Vela mark.)
.nav-links — flex; gap 6px; align-items center; color #5d5a5b; 13px/18px; weight 700;
letter-spacing -.15px.
=== INTRO ===
.intro — absolute; left 169px; top 89px; width 620px.
h1 — margin 0; letter-spacing -2.8px; font-weight 300.
.headline-sans — block; color #aaa6a8; 60px/66px; weight 300 (inherits the Arial stack).
.headline-serif — block; color #fffefd; font-family "Times New Roman", Times, serif;
58px/64px; weight 700; letter-spacing -3.15px.
.intro p — width 585px; margin 25px 0 0; color #a29f9e; Times New Roman serif stack;
18px/30px; weight 400; letter-spacing -.52px.
=== CARD GRID ===
.cards — absolute; left 169px; top 322px; display grid;
grid-template-columns: 440px 439px 441px; gap 12px; width 1344px; height 586px;
overflow hidden.
.card — position relative; height 650px (intentionally taller than the 586px grid so the
bottoms are clipped); min-width 0; overflow hidden; contain paint;
border 1px solid rgba(12,18,32,.5); border-top-color rgba(25,35,65,.14);
background #020204.
.card:focus-visible — outline 1px solid rgba(175,198,255,.52); outline-offset -2px.
.card-left, .card-middle, .card-right also get: background-origin border-box;
background-clip border-box; background-repeat no-repeat; background-size 100% 100%.
=== SHARED CHROME ===
.card-icon — absolute; z-index 6; left 25px; top 25px; 25×25; color rgba(255,255,255,.90);
filter drop-shadow(0 0 5px rgba(255,255,255,.1)).
.glass-pill — absolute; z-index 7; inline-flex; center/center; gap 8px; min-height 22px;
padding 0 9px; border 1px solid rgba(137,158,210,.30); border-radius 999px; color #c2cbe6;
background rgba(7,16,39,.68);
box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 4px 13px rgba(0,0,0,.20),
0 0 14px rgba(45,97,255,.10);
backdrop-filter: blur(13px) saturate(150%) (with -webkit- prefix);
white-space nowrap; 12px/20px; weight 600; letter-spacing -.18px.
.dot — 5×5; flex 0 0 auto; border-radius 50%; background #7adcc0;
box-shadow 0 0 3px rgba(122,220,192,.5).
.error .dot — background #d4e8ff; box-shadow 0 0 4px rgba(200,220,255,.5).
.dot.yellow — #ffd462; box-shadow 0 0 5px #ffd462, 0 0 13px rgba(255,197,68,.82).
.dot.violet — #c69ff7; box-shadow 0 0 3px rgba(190,150,240,.4).
.card-title — absolute; z-index 7; margin 0; Times New Roman serif stack; color #c7cfcc;
weight 400; letter-spacing -.95px.
=== CARD 1 — .card-left (aria-label "Planetary-scale streaming") ===
Children in order: <div class="left-surface" aria-hidden="true"></div>, the globe SVG,
four glass pills, the h2 title.
.card-left { background: #000; } .card-left::before { content: none; }
.left-surface — absolute; z-index 0; inset -1px; overflow hidden; background #000;
transform scaleY(1); transform-origin 50% 100%;
transition: transform 720ms cubic-bezier(.22,1,.36,1), filter 720ms cubic-bezier(.22,1,.36,1);
will-change transform, filter.
.left-surface::before — content ""; absolute; left -2.5%; top 32%; width 105%; height 84%;
border-radius: 50% 50% 0 0 / 7% 7% 0 0; /* the planet-limb curve */
background:
radial-gradient(ellipse 58% 16% at 50% 0%,
rgba(16,0,224,.84) 0%, rgba(8,0,181,.58) 43%, rgba(2,0,118,.18) 72%, transparent 100%),
linear-gradient(180deg, #0700a4 0%, #06019f 5%, #06148f 12%, #0a3385 20%, #13517a 30%,
#19646d 42%, #1c6762 53%, #1d5a53 64%, #1d4842 74%, #1a332e 83%, #111d17 93%, #0e140e 100%);
filter: blur(14px);
box-shadow: 0 -9px 24px rgba(0,0,156,.34), inset 0 8px 22px rgba(9,0,178,.22);
Hover/focus: .card-left:hover .left-surface, .card-left:focus-visible .left-surface {
transform: scaleY(1.075);
filter: saturate(1.34) brightness(1.08) contrast(1.04);
}
Globe SVG (viewBox "0 0 32 32", fill none):
<circle cx="16" cy="16" r="12" stroke="currentColor" stroke-width="2.25"/>
<path d="M4 16h24M16 4c4 4.1 5.8 8.2 5.8 12S20 23.9 16 28c-4-4.1-5.8-8.2-5.8-12S12 8.1 16 4Z"
stroke="currentColor" stroke-width="2.05"/>
Pills:
<span class="glass-pill region-left">us-east-1</span>
<span class="glass-pill region-right">eu-west-2</span>
<span class="glass-pill live"><i class="dot"></i><span class="live-copy">Streaming live</span></span>
<span class="glass-pill regions">+28 regions</span>
Shared override for .region-left, .region-right, .regions:
min-height 28px; padding 0 11px; color #d6dced; border-color rgba(125,145,202,.32);
background rgba(4,10,28,.57);
box-shadow inset 0 1px 0 rgba(255,255,255,.055), 0 4px 12px rgba(0,0,0,.17);
backdrop-filter blur(8px) saturate(125%); 11px/26px; weight 600; letter-spacing -.1px.
.region-left { left: 32px; top: 79px; }
.region-right { right: 32px; top: 82px; }
.regions { left: 56px; top: 438px; }
.live — left 150.333px; top 256.333px; width 137px; height 39px; min-height 0; padding 0;
gap 8px; color rgba(211,232,248,.88); border 1px solid transparent; border-radius 20px;
background:
linear-gradient(180deg, rgba(29,62,138,.90) 0%, rgba(23,53,123,.91) 46%,
rgba(14,42,99,.92) 100%) padding-box,
linear-gradient(180deg, rgba(135,155,244,.55) 0%, rgba(104,135,212,.48) 55%,
rgba(86,123,191,.55) 100%) border-box;
box-shadow: inset 0 1px 0 rgba(255,255,255,.08), inset 0 -1px 0 rgba(44,82,155,.25),
0 0 14px rgba(41,74,216,.18);
backdrop-filter blur(7px) saturate(130%); 13px/37px; weight 600; letter-spacing -.18px.
.live .dot — 6×6; background #67dba9;
box-shadow 0 0 5px rgba(103,219,169,.78), 0 0 11px rgba(76,210,157,.45);
animation: live-signal 1.55s ease-in-out infinite.
.live-copy — transform translate(-1px,.5px) scaleY(.92);
text-shadow 0 0 1px rgba(211,232,248,.32).
Title: <h2 class="card-title">The real-time engine for <strong>planetary-scale data.</strong></h2>
.card-left .card-title { left 24px; top 500px; width 385px; font-size 27px; line-height 34px; }
.card-left .card-title strong { font-weight 700; color #f4f8f7; }
=== CARD 2 — .card-middle (aria-label "Real-time observability") ===
Children: eye SVG, .card-site, .orbit (containing .orbit-dot-bottom), .sphere,
three telemetry pills, .card-copy.
.card-middle background — a nine-layer stack, in this exact order:
linear-gradient(90deg, transparent 0%, transparent 99%, rgba(8,14,26,.22) 100%),
radial-gradient(ellipse 156px 164px at 54% 26.2%, rgba(88,120,240,.45) 0%,
rgba(88,120,240,.35) 35%, rgba(88,120,240,.14) 60%, rgba(88,120,240,.04) 80%,
rgba(88,120,240,0) 100%),
radial-gradient(ellipse 220px 95px at 50% 63%, rgba(50,90,210,.24), transparent 75%),
radial-gradient(ellipse 100px 140px at 87% 44%, rgba(30,90,220,.21), transparent 75%),
radial-gradient(ellipse 170px 150px at 20% 36%, rgba(48,88,200,.12), transparent 78%),
radial-gradient(ellipse 158px 118px at 105% 34.5%, rgba(20,138,250,.60) 0%,
rgba(20,138,250,.50) 40%, rgba(20,138,250,.26) 62%, rgba(20,138,250,.10) 80%,
rgba(20,138,250,0) 100%),
radial-gradient(ellipse 268px 184px at 104% 31%, rgba(10,70,235,.48) 0%,
rgba(10,70,235,.30) 50%, rgba(10,70,235,.10) 75%, rgba(10,70,235,0) 100%),
radial-gradient(ellipse 235px 170px at 103% 50%, rgba(22,148,210,.30) 0%,
rgba(22,148,210,.20) 55%, rgba(22,148,210,0) 100%),
radial-gradient(ellipse 160px 120px at 105% 70.8%, rgba(30,130,95,.09), transparent 85%),
linear-gradient(180deg, #0d174d 0%, #061b5f .31%, #071c60 .77%, #082166 3.1%,
#0e2670 6.2%, #132f7c 12.3%, #143281 18.5%, #163588 24.6%, #1c409f 30.8%,
#2044a1 36.9%, #23479b 43.1%, #254691 49.2%, #264387 52.3%, #224076 58.5%,
#203867 64.6%, #1a3059 70.8%, #162545 76.9%, #0b1631 83.1%, #050b1c 88.5%,
#030712 93.8%, #02040c 100%);
Eye SVG (viewBox "0 0 34 26", fill none):
<path d="M2 13S7.8 4 17 4s15 9 15 9-5.8 9-15 9S2 13 2 13Z" stroke="currentColor" stroke-width="2.1"/>
<circle cx="17" cy="13" r="4.2" stroke="currentColor" stroke-width="2.1"/>
.card-site (<span>vela.io</span>) — absolute; z-index 7; right 23px; top 33px;
color rgba(238,244,255,.62); 12px/16px; weight 600; letter-spacing -.1px.
.orbit — absolute; z-index 2; left 30px; top 91px; 379×379; border 1px dashed
rgba(145,184,255,.24); border-radius 50%; transform-origin 50% 50%;
animation: orbit-spin 28s linear infinite; will-change transform.
.orbit::before/::after — content ""; absolute; 5×5; border-radius 50%; background #cfe2ff;
box-shadow 0 0 4px rgba(160,200,255,.6).
.orbit::before { left 45px; top 59px; }
.orbit::after { right 9px; top 92px; background rgba(190,212,255,.55);
box-shadow 0 0 4px rgba(150,190,255,.3); }
.orbit-dot-bottom — absolute; left 54px; bottom 43px; 8×8; border-radius 50%;
background #9db8ea; box-shadow 0 0 5px rgba(150,180,240,.4).
.sphere — absolute; z-index 3; left 95px; top 158px; 249×249; border-radius 50%;
filter blur(1.4px);
background:
radial-gradient(circle closest-side at 50% 50%, transparent 0 80%,
rgba(125,108,112,.11) 93%, rgba(125,108,112,.07) 100%),
radial-gradient(ellipse 36px 150px at 0% 50%, rgba(10,28,40,.62), transparent 70%),
radial-gradient(ellipse 64px 156px at 100% 52%, rgba(64,112,128,.38), transparent 70%),
radial-gradient(ellipse 215px 112px at 52% 106%, rgba(18,158,160,.52), transparent 72%),
linear-gradient(180deg, #163a3e 0%, #163a3e 6%, #124444 26%, #0c5a55 50%, #086e6a 75%,
#0a7876 92%, #0b7c7a 100%);
box-shadow: inset 0 4px 18px rgba(6,26,34,.08), 0 0 26px rgba(70,110,200,.28);
Telemetry pills (note the before each unit):
<span class="glass-pill latency"><i class="dot"></i><span class="telemetry-number" data-baseline="41">41</span> ms · p99</span>
<span class="glass-pill error"><i class="dot"></i><span class="telemetry-number" data-baseline="0.00">0.00</span> % err</span>
<span class="glass-pill requests"><i class="dot violet"></i><span class="telemetry-number" data-baseline="128">128</span> k req/s</span>
.latency { right 38px; top 98px; }
.error { left 41px; top 270px; }
.requests { left 60px; top 447px; }
.telemetry-number — inline-block; font-variant-numeric tabular-nums; text-align right.
.latency .telemetry-number { min-width 17px; }
.error .telemetry-number { min-width 26px; }
.requests .telemetry-number { min-width 22px; }
(These min-widths stop the pills from jittering while the numbers cycle.)
<p class="card-copy">Real-time observability across every service you run.</p>
.card-middle .card-copy — absolute; z-index 7; left 23px; top 514px; width 375px; margin 0;
color #c5cada; 19px/27px; weight 400; letter-spacing -.52px (Arial stack, not serif).
=== CARD 3 — .card-right (aria-label "Adaptive model operations") ===
Children: pulse SVG, <div class="status-band" aria-hidden="true"></div>,
<div class="status-stack"> with two .status rows, and the h2.
.card-right { background: #030408; }
Pulse SVG — class "card-icon pulse", viewBox "0 0 39 29", fill none:
<path d="M1.5 16h8l4.2-11 7.1 23 5.4-17 3.1 5h8.2" stroke="currentColor" stroke-width="2.3"
stroke-linecap="round" stroke-linejoin="round"/>
.pulse { width: 27px; height: 25px; }
.card-right .status-band — absolute; z-index 1; inset 0; overflow hidden;
clip-path: inset(199px 0 calc(100% - 355px) 0); /* collapsed to a horizontal band */
background:
radial-gradient(ellipse 330px 390px at 108% 67%, rgba(255,128,18,.94) 0%,
rgba(225,69,12,.55) 46%, transparent 72%),
radial-gradient(ellipse 360px 330px at 8% 36%, rgba(12,3,224,.98) 0%,
rgba(6,9,145,.74) 48%, transparent 74%),
radial-gradient(ellipse 440px 280px at 44% 108%, rgba(207,29,24,.84) 0%,
rgba(111,20,43,.42) 55%, transparent 80%),
linear-gradient(145deg, #050015 0%, #07052f 35%, #151931 60%, #4d251a 100%);
transition: clip-path 390ms cubic-bezier(.22,1,.36,1); will-change clip-path.
.status-band::before/::after — content ""; absolute; pointer-events none.
.status-band::before (the green "adaptive" bloom, hidden until hover):
inset -12%; opacity 0;
background:
radial-gradient(ellipse 225px 350px at 78% 46%, rgba(45,236,112,.9) 0%,
rgba(43,186,112,.52) 36%, transparent 68%),
radial-gradient(ellipse 260px 300px at 57% 24%, rgba(18,116,255,.64) 0%, transparent 72%),
radial-gradient(ellipse 310px 280px at 42% 84%, rgba(255,167,27,.52) 0%, transparent 72%);
filter blur(10px) saturate(1.13);
transform translate3d(8%,1%,0) scale(1.04);
transition opacity 310ms ease-out;
animation: adaptive-drift 2.8s ease-in-out infinite alternate;
animation-play-state: paused; will-change transform, opacity.
.status-band::after (the crisp resting band, fades out on hover):
left 0; right 0; top 199px; height 156px;
background:
radial-gradient(ellipse 255px 190px at 104% 50%, rgba(255,125,18,.92), transparent 69%),
radial-gradient(ellipse 350px 200px at 5% 48%, rgba(12,2,220,.94), transparent 68%),
radial-gradient(ellipse at 55% 50%, transparent 0%, rgba(3,4,19,.24) 72%),
linear-gradient(90deg, #08008d 0%, #12134d 53%, #9a471b 100%);
box-shadow inset 0 1px 0 rgba(255,255,255,.08), inset 0 -1px 0 rgba(0,0,0,.46);
opacity 1; transition opacity 210ms ease-out.
Hover/focus behaviour (the signature interaction — the band expands to fill the card while
the static strip fades and the animated bloom starts):
.card-right:hover .status-band, .card-right:focus-visible .status-band { clip-path: inset(0); }
.card-right:hover .status-band::before, …:focus-visible … { opacity: .82; animation-play-state: running; }
.card-right:hover .status-band::after, …:focus-visible … { opacity: 0; }
.status-stack — absolute; z-index 4; inset 0; pointer-events none.
.status — absolute; z-index 4; left 34px; right 35px; height 37px; flex; align-items center;
padding 0 13px; border 1px solid rgba(159,164,208,.27); border-radius 11px; color #e3e4f2;
background rgba(10,12,31,.62);
box-shadow inset 0 1px 0 rgba(255,255,255,.06), 0 5px 20px rgba(0,0,0,.16);
backdrop-filter blur(14px) saturate(140%); 12px/16px; weight 600; letter-spacing -.1px.
.status:first-child { top: 242px; } .status:last-child { top: 287px; }
.status .dot { margin-right: 9px; }
.status em { margin-left auto; color #d48aff; font-style normal; font-size 11px; }
.status:last-child em { color: #a9e49f; }
.status:first-child .dot { animation: status-signal 1.85s ease-in-out infinite .15s; }
.status:last-child .dot { animation: status-signal 2.15s ease-in-out infinite .8s; }
Rows:
<div class="status"><i class="dot yellow"></i><span>Retraining model</span><em>working</em></div>
<div class="status"><i class="dot"></i><span>Anomaly guard</span><em>done</em></div>
Title: <h2 class="card-title">Adaptive.</h2>
.card-right .card-title { left 22px; top 502px; font-size 59px; line-height 70px;
weight 700; letter-spacing -3.1px; color #fff; } (still the Times New Roman serif stack)
=== KEYFRAMES ===
@keyframes live-signal {
0%, 18%, 100% { opacity: 1; transform: scale(1); }
42%, 62% { opacity: .22; transform: scale(.72); }
78% { opacity: .95; transform: scale(1.08); }
}
@keyframes status-signal {
0%, 24%, 100% { opacity: 1; transform: scale(1); }
52%, 68% { opacity: .28; transform: scale(.75); }
}
@keyframes orbit-spin { to { transform: rotate(360deg); } }
@keyframes orbit-spin-mobile { /* preserves the mobile centering translate */
from { transform: translateX(-50%) rotate(0deg); }
to { transform: translateX(-50%) rotate(360deg); }
}
@keyframes adaptive-drift {
0% { transform: translate3d(9%, -1%, 0) scale(1.04) rotate(-1deg); }
48% { transform: translate3d(1%, 3%, 0) scale(1.08) rotate(1deg); }
100% { transform: translate3d(-8%, -2%, 0) scale(1.05) rotate(-.5deg); }
}
=== REDUCED MOTION ===
@media (prefers-reduced-motion: reduce) {
.left-surface, .card-right .status-band, .status-band::before, .status-band::after
{ transition-duration: 1ms; }
.live .dot, .status .dot, .orbit, .status-band::before { animation: none; }
}
=== RESPONSIVE — THE ONLY REFLOW BREAKPOINT ===
There is exactly ONE reflow breakpoint, plus one narrow-phone tuning block. Do NOT add a
two-up tablet layout — 700px and above must render the desktop composition verbatim.
/* Below 700px the fixed canvas can no longer scale to a legible size,
so the composition reflows into a single stacked column. At 700px and
above the desktop layout is preserved verbatim and uniformly scaled. */
@media (max-width: 699.98px) {
body { overflow-x hidden; overflow-y auto; background #16120c; }
.reference-canvas { position relative; left 0; top 0; width 100%; height auto;
min-height 100dvh; padding 0; transform none; background #16120c; }
.shell { position relative; left auto; top auto; width 100%; height auto;
min-height 100dvh; padding 0 20px 20px; border-radius 0; box-shadow none; }
.nav { position relative; left auto; right auto; top auto; height 70px; }
.brand { font-size 18px; } .brand-mark { 22×22; border-radius 6px; }
.nav-links { font-size 11px; }
.intro { position relative; left auto; top auto; width 100%; padding 20px 0 37px; }
.headline-sans { font-size clamp(39px, 12vw, 54px); line-height 1.04; letter-spacing -2.4px; }
.headline-serif { font-size clamp(40px, 12.4vw, 56px); line-height 1.04; letter-spacing -2.7px; }
.intro p { width 100%; margin-top 22px; font-size 16px; line-height 26px; letter-spacing -.35px; }
.desktop-break { display: none; } /* kills the hard <br> in the paragraph */
.cards { position relative; left auto; top auto; width 100%; height auto;
overflow visible; grid-template-columns 1fr; gap 14px; }
.card { width 100%; height auto; min-height 565px; border-radius 1px; }
.card-left .card-title, .card-middle .card-copy, .card-right .card-title
{ top: auto; bottom: 18px; }
/* Desktop pins these to fixed pixel widths; track the card instead. */
.card-left .card-title { width: calc(100% - 44px); }
.region-right { right 24px; }
.live { left 50%; transform translateX(-50%); }
.regions { top 406px; }
/* The ring is wider than a narrow card, so cap it to the card and keep
it circular with aspect-ratio rather than a fixed height. */
.orbit {
left: 50%;
transform: translateX(-50%);
animation-name: orbit-spin-mobile;
width: min(379px, calc(100% - 32px));
height: auto;
aspect-ratio: 1;
}
.sphere {
left: 50%;
transform: translateX(-50%);
width: min(249px, calc(100% - 92px));
height: auto;
aspect-ratio: 1;
}
.latency { right 20px; }
.requests { top 414px; }
.card-middle .card-copy { width calc(100% - 46px); }
.status { left 20px; right 20px; }
.card-right .card-title { font-size clamp(48px, 15vw, 59px); }
}
@media (max-width: 410px) {
.shell { padding-inline: 15px; }
.intro { padding-top: 14px; }
.nav-links span:first-child { display: none; } /* drops "Platform" */
.cards { gap: 12px; }
.card { min-height: 540px; }
.region-left { left: 20px; } .region-right { right: 20px; }
.regions { top: 380px; }
.orbit { top: 108px; } /* width comes from the min() rule above */
.sphere { top: 171px; }
.requests { left: 30px; top: 395px; }
.card-left .card-title { font-size: 25px; }
}
=== SCRIPT (one IIFE at end of body) ===
Two jobs.
1) Canvas fit-scaling. Read documentElement. Create
const mobileQuery = matchMedia('(max-width: 699.98px)').
fit(): if mobileQuery.matches, set --canvas-scale to '1' and return; otherwise
// Contain, not cover: the whole 1690x950 composition stays visible at
// every aspect ratio instead of being cropped on tall or ultrawide
// viewports. Letterboxing is invisible because the canvas, the shell
// and the page all share #16120c.
const scale = Math.min(innerWidth / 1690, innerHeight / 950);
and set --canvas-scale to it.
Call fit() immediately, then addEventListener('resize', fit, { passive: true }) and
mobileQuery.addEventListener?.('change', fit).
Use Math.min — NOT Math.max. Math.max (cover) crops the composition: at 700×900 it
returns 0.947, which pushes the nav and the left column off-screen entirely, and on a
2560×1080 ultrawide it slices ~359px off the top and bottom.
2) Telemetry number scramble on the middle card. Query .card-middle, then within it
.latency .telemetry-number, .error .telemetry-number, .requests .telemetry-number.
Frame table (exact order, [latency, error, requests]):
['26','0.17','139'], ['11','0.63','104'], ['18','0.42','147'], ['31','0.21','116'],
['39','0.08','134'], ['22','0.37','112'], ['36','0.14','143'], ['41','0.00','128']
startTelemetry(): bail if a timer is already running OR
matchMedia('(prefers-reduced-motion: reduce)').matches; reset index to 0, render frame 0,
then setInterval advancing (index + 1) % frames.length every 105ms.
stopTelemetry(): clearInterval, zero the timer handle, and restore each number from its
own data-baseline attribute (41 / 0.00 / 128).
Wire startTelemetry to 'pointerenter' and 'focus' on the middle card, stopTelemetry to
'pointerleave' and 'blur', and stopTelemetry on document 'visibilitychange' when
document.hidden.
=== ACCEPTANCE ===
- One file, zero network requests. Fonts are system stacks only — never link Google Fonts.
- At every width ≥700px the three cards stay side by side in the 440/439/441px grid and the
whole canvas is scaled to FIT — nothing cropped, no horizontal scroll, at any aspect ratio
from 4:3 through 21:9. Letterbox bars are invisible (#16120c everywhere).
- Below 700px: single stacked column, no horizontal scroll down to 320px.
- No element may overflow its card at any width. Three specific traps to avoid:
* the 379px orbit ring inside a card narrower than ~411px,
* the 249px sphere on very narrow phones,
* the left card's 385px fixed-width title inside a card narrower than ~409px.
All three are solved by the min()/aspect-ratio and calc() rules above — keep them.
- Card bottoms are deliberately clipped by the 586px-tall grid on desktop — do not "fix" that.
- Three distinct hover states: left card's surface swells vertically and saturates; middle
card's three numbers cycle at 105ms; right card's colour band expands from a thin strip to
the full card with a drifting green/blue/amber bloom.
- Everything degrades correctly under prefers-reduced-motion.
NorthstarAgency · free prompt · copy-paste
Build a single-file standalone HTML page (index.html) that recreates this Nexeus landing page PIXEL-EXACTLY. Do not invent extra sections, nav bars, extra CTAs, or restyle anything. One full-viewport cinematic page: looping background video + left-aligned hero + glass footer. No frameworks. No build step. Inline CSS and JS only.
==================================================
EXACT MEDIA (must use these URLs, no substitutes)
==================================================
Background video (CloudFront):
https://meez.design/web/media/ext/45790b279ed922a2.mp4
Poster (CloudFront WebP, shown before/while video loads):
https://meez.design/web/media/ext/ec27534816f88643.webp
Video attributes: autoplay muted loop playsinline
aria-label: "Painted alpine panorama: a lone hiker with a pink backpack faces a snow-capped peak above a sea of clouds"
Video filter: saturate(0.86)
Fallback page background: #1d8fb8 (sky-blue, matches the painting)
==================================================
FONTS
==================================================
@font-face Instrument Serif (400) — display / headline
@font-face Plus Jakarta Sans (weight range 200–800) — body
Fallbacks: Georgia serif for display; system-ui sans-serif for body.
If local woff2 files are unavailable, load:
- Instrument Serif 400 from Google Fonts
- Plus Jakarta Sans 400 and 500 from Google Fonts
-webkit-font-smoothing: antialiased
Type tokens:
--font-display: 'Instrument Serif', Georgia, serif
--font-body: 'Plus Jakarta Sans', system-ui, sans-serif
--fw-regular: 400 (nav links, column headings, wordmark, CTA label)
--fw-medium: 450 (eyebrow, lede, footer tagline, legal) — if the font has no 450, use 500
--text-primary: #fff
--text-heading: rgba(255,255,255,.86)
--text-muted: rgba(255,255,255,.68)
--text-invert: #000
==================================================
COPY (verbatim)
==================================================
<title>Nexeus — Build your future now</title>
Eyebrow: Ready when you are
H1: Build your future now
Lede: From branding and websites to marketing and growth systems, everything you need to move forward starts right here.
CTA: Take Control (href="#")
Footer wordmark: Nexeus
Footer tagline: Change your future today using marketing and growth systems everything you need starts here.
Column SOLUTIONS:
Revenue Acceleration
Search Visibility
Conversion Optimization
Customer Automation
Column CAPABILITIES:
Web Architecture
Brand Systems
Growth Marketing
E-commerce Infrastructure
Column RESOURCES:
Case Studies
Growth Insights
Playbooks
Industry Reports
Legal: ® 2025 Nexeus all rights reserved.
Socials (href="#"): LinkedIn, GitHub, Medium — with matching SVG icons and aria-labels.
==================================================
LAYOUT SYSTEM (desktop / landscape)
==================================================
html, body: height 100%; overflow hidden; background #1d8fb8
Design frame: 1600 × 780
Unit: --u: min(calc(100vw / 1600), calc(100vh / 780), 1.6px)
Frame width: --fw: calc(1600 * var(--u))
.viewport: position fixed; inset 0; overflow hidden
BACKGROUND VIDEO:
.bg: absolute inset 0; overflow hidden; background #1d8fb8
video: position absolute; right 0; bottom calc(-45 * var(--u));
width calc(1668 * var(--u)); height calc(1037 * var(--u));
min-width 100%; min-height calc(100% + 45 * var(--u));
object-fit cover; object-position right bottom
.scrim: absolute left/right/top 0; height 0 by default; pointer-events none
Aspect-ratio scrims (only these):
- min-aspect-ratio 17/10: height 450u, gradient rgba(4,20,32) .48 → .25 → 0
- min-aspect-ratio 19/10: height 470u, .58 → .31 → 0
- min-aspect-ratio 21/10: video object-position right 76%; height 480u, .56 → .30 → 0
- min-aspect-ratio 5/4 AND max-aspect-ratio 31/20: height 410u, .26 → .13 → 0
.stage: absolute; left 50%; top 0; width var(--fw); height 100%; translateX(-50%); pointer-events none
.stage > * pointer-events auto
.abs: position absolute
HERO (absolute positions in --u units):
.eyebrow: left 46.6u, top 128.2u, font-size 15.0u, weight medium, line-height 1, letter-spacing 0.2163u, color white, uppercase, nowrap
.headline-mask: left 46.0u, top 163.0u
.headline: Instrument Serif, weight 400, font-size 71.2u, line-height 1, letter-spacing 0.5696u, white, nowrap
.lede: left 46.4u, top 245.2u, width 432u, font-size 17.0u, weight medium, line-height 22.9u, letter-spacing -0.15232u, white
.cta: left 46.8u, top 335.0u, width 157.0u, height 40.6u, border-radius 4.2u, background #fff, display block, no underline
.cta:hover: background #eef2f3; translateY(-1.5u); box-shadow 0 8u 22u rgba(0,0,0,.20)
.cta span: absolute left 32.0u, top 13.8u, font-size 15.8u, weight 400, line-height 1, letter-spacing 0.057828u, color #000, nowrap
CTA transition: background/transform/box-shadow .25s ease
==================================================
FOOTER (glass pane, desktop)
==================================================
.footer: absolute left/right/bottom 0; height 342u
backdrop-filter: blur(50u) saturate(0.85)
background (THREE stacked gradients):
1) linear-gradient(90deg, rgba(255,255,255,0.022) 0, rgba(255,255,255,0.072) 20u, rgba(255,255,255,0) 58u)
2) linear-gradient(270deg, rgba(255,255,255,0.02) 0, rgba(255,255,255,0.05) 20u, rgba(255,255,255,0) 58u)
3) linear-gradient(180deg, rgba(34,14,0,0.28) 0%, rgba(70,34,0,0.24) 52%, rgba(160,120,48,0.6) 100%)
--hair: max(1px, 1u)
inset box-shadow hairlines: white 0.145 left, 0.125 right, 0.17 bottom, 0.03 top
overflow hidden
.finner: absolute left 50%; top 0; translateX(-50%); width var(--fw); height 100%
LOGO MARK (white 8-spoke starburst / asterisk, viewBox 0 0 100 100):
left 26.6u, top 36.2u, size 25.4u × 25.4u
Exact SVG paths (fill #fff):
M 45.13 1.28 L 54.87 1.28 L 54.87 42.42 L 45.13 38.09 Z
M 79.47 12.10 L 87.90 20.53 L 58.80 49.62 L 53.45 38.13 Z
M 98.72 45.13 L 98.72 54.87 L 57.58 54.87 L 61.91 45.13 Z
M 87.90 79.47 L 79.47 87.90 L 50.38 58.80 L 61.87 53.45 Z
M 54.87 98.72 L 45.13 98.72 L 45.13 57.58 L 54.87 61.91 Z
M 20.53 87.90 L 12.10 79.47 L 41.20 50.38 L 46.55 61.87 Z
M 1.28 54.87 L 1.28 45.13 L 42.42 45.13 L 38.09 54.87 Z
M 12.10 20.53 L 20.53 12.10 L 49.62 41.20 L 38.13 46.55 Z
.wordmark: left 62.8u, top 36.0u, font-size 23.4u, weight 400, letter-spacing 0.2808u, white, nowrap
.tagline: left 26.6u, top 73.0u, width 274u, font-size 13.5u, weight medium, line-height 17.4u, letter-spacing -0.18576u, muted white
Columns top 37.0u:
.c1 left 938.4u .c2 left 1185.0u .c3 left 1450.6u
h3: 15.84u, weight 400, letter-spacing 0.183744u, color text-heading, nowrap
ul: absolute top 31.0u, no list-style
li line-height 25.27u nowrap
a: 15.55u, weight 400, letter-spacing -0.07775u, white, no underline; hover opacity .6 (transition .2s)
.rule: left 26.6u, width 1546.8u, top 207.5u, height max(1px,1u), background rgba(255,255,255,.42)
.legal: left 26.6u, top 271.2u, font-size 14.0u, weight medium, letter-spacing -0.30422u, muted, nowrap
.socials: left 1375.8u, top 264.4u, flex, gap 47.1u
.socials a: 30u × 30u, color #fff, hover opacity .68
Icons: LinkedIn viewBox 0 0 30 30; GitHub viewBox 0 0 24 24; Medium viewBox 0 0 1043.63 592.71 — use the standard filled-white path icons matching those viewBoxes (LinkedIn square+in, GitHub octocat, Medium three circles).
==================================================
RESPONSIVE — portrait / narrow (max-aspect-ratio: 5/4)
==================================================
--u: calc(100vw / 780)
--pad: clamp(20px, 5.6vw, 56px)
Switch from absolute artboard to stacked flex column.
.viewport: flex column; min-height 100dvh
.stage: relative, width 100%, flex column
.bg video: left 0 right 0 bottom 0; width 100%; height 106%; object-fit cover; object-position 80% bottom
.scrim: fixed; height min(56vh, 560u); gradient rgba(6,22,34) .42 → .26 → 0
.abs becomes static
Hero: left/right padding --pad
eyebrow: margin-top clamp(28px,7vh,72px); font-size clamp(10.5px,2.9vw,15px); letter-spacing .09em; still uppercase
headline: wrap allowed; font-size clamp(34px,9.4vw,72px); line-height 1.04
lede: max-width 38ch; font-size clamp(14.5px,3.9vw,18px); line-height 1.42
cta: inline-flex centered; width auto; min-width clamp(140px,40vw,190px); height clamp(42px,6vh,52px); padding 0 clamp(20px,6vw,34px); radius 4px; span static
Footer: relative; height auto; margin-top auto; padding clamp(22px,3.4vh,40px) --pad clamp(20px,3vh,34px)
footer bg: linear-gradient(180deg, rgba(14,9,4,.58), rgba(26,16,5,.60) 55%, rgba(52,36,12,.66)); blur 28px saturate .9
.brandrow: flex align center; gap clamp(9px,2.6vw,14px)
.nav: 3-column grid; gap clamp(14px,3.4vw,30px)
.footrow: flex space-between wrap
Type uses the clamp() sizes listed in the source (do not improvise)
MOBILE architecture @ max-aspect-ratio 5/4 AND max-width 648px:
html/body overflow visible (so legal/socials are not clipped on short phones)
hero headline: clamp(32px,10.2vw,56px); max-width 15ch; text-wrap balance
lede max-width 34ch
.nav: 2-column grid; .c3 (RESOURCES) grid-column 1 / -1; .c3 ul columns: 2
.col a: inline-block; padding-block clamp(9px,1.1vh,11px) for tap targets
.footrow: nowrap, legal nowrap, socials flex-none
@ max-width 380px: legal wraps; footrow wraps
@ max-height 620px: tighter eyebrow margin-top
==================================================
ENTRANCE ANIMATION (first load only)
==================================================
Head script BEFORE paint:
If prefers-reduced-motion is NOT reduce, add class js-enter on <html>.
If JS fails, never add the class — content must render fully visible.
While html.js-enter:
eyebrow, lede, cta, mark, wordmark, tagline, .col, legal, .socials a { opacity: 0 }
.headline-mask { clip-path: inset(-45% -8% -6px -3%) }
.headline { transform: translate3d(0,118%,0) }
.rule { transform: scaleX(0); transform-origin left center }
prefers-reduced-motion: show everything immediately; disable transitions globally.
Body script: Web Animations API, run once (dataset.entered).
Easings:
EXPO = cubic-bezier(.16,1,.3,1)
SOFT = cubic-bezier(.22,.65,.28,1)
SETTLE = cubic-bezier(.33,1,.68,1)
On max-width 648px: travel scale d=0.62, tempo t=0.85; else d=1, t=1
Timeline (delay * t, duration in ms, Y travel * d):
eyebrow: rise 12px, 560ms, delay 60, SOFT
headline: 118% → 0, 950ms, delay 170, EXPO
lede: rise 14px, 660ms, delay 430, SOFT
cta: opacity 0 + Y12 + scale(.985) → none, 580ms, delay 620, SETTLE
mark + wordmark: rise 10px, 540ms, delay 600, SOFT
tagline: rise 10px, 540ms, delay 670, SOFT
each .col: rise 14px, 580ms, delay 720 + i*70, SOFT
.rule: scaleX 0→1, 720ms, delay 980, EXPO
legal: rise 8px, 500ms, delay 1120, SOFT
each .socials a: rise 8px, 500ms, delay 1170 + i*60, SOFT
On complete: remove js-enter, cancel all animations so no residual transforms remain.
Do NOT animate the background video — it is the stage.
==================================================
HTML STRUCTURE (must match)
==================================================
.viewport
.bg > video
.scrim
.stage
p.eyebrow
.headline-mask > h1.headline
p.lede
a.cta > span
footer.footer > .finner
.brandrow > svg.mark + span.wordmark
p.tagline
nav.nav > .col.c1 / .col.c2 / .col.c3
.rule
.footrow > p.legal + .socials
Viewport meta: width=device-width, initial-scale=1, viewport-fit=cover
lang=en
OUTPUT: one complete index.html with all CSS and JS inlined, matching this spec exactly.
---
## HTML Code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1,viewport-fit=cover">
<title>Nexeus — Build your future now</title>
<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=Instrument+Serif:ital@0;1&family=Plus+Jakarta+Sans:ital,wght@0,200..800;1,200..800&display=block" rel="stylesheet">
<style>
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html,body{height:100%;overflow:hidden;background:#1d8fb8}
body{font-family:var(--font-body);-webkit-font-smoothing:antialiased}
:root{
--font-display:'Instrument Serif',Georgia,serif;
--font-body:'Plus Jakarta Sans',system-ui,sans-serif;
--fw-regular:400;
--fw-medium:450;
--text-primary:#fff;
--text-heading:rgba(255,255,255,.86);
--text-muted:rgba(255,255,255,.68);
--text-invert:#000;
--u:min(calc(100vw / 1600), calc(100vh / 780), 1.6px);--fw:calc(1600 * var(--u))}
.viewport{position:fixed;inset:0;overflow:hidden}
.bg{position:absolute;inset:0;overflow:hidden;background:#1d8fb8}
.scrim{position:absolute;left:0;right:0;top:0;height:0;pointer-events:none}
.bg img,.bg video{position:absolute;right:0;bottom:calc(-45 * var(--u));
width:calc(1668 * var(--u));height:calc(1037 * var(--u));
min-width:100%;min-height:calc(100% + 45 * var(--u));
object-fit:cover;object-position:right bottom;display:block;
filter:saturate(0.86)}
.stage{position:absolute;left:50%;top:0;width:var(--fw);height:100%;transform:translateX(-50%);pointer-events:none}
.stage > *{pointer-events:auto}
.abs{position:absolute}
.eyebrow{left:calc(46.6 * var(--u));top:calc(128.2 * var(--u));font-size:calc(15.0 * var(--u));font-weight:var(--fw-medium);line-height:1;letter-spacing:calc(0.21630000000000002 * var(--u));color:var(--text-primary);text-transform:uppercase;white-space:nowrap}
.headline-mask{left:calc(46.0 * var(--u));top:calc(163.0 * var(--u))}
.headline{font-family:var(--font-display);font-weight:var(--fw-regular);font-size:calc(71.2 * var(--u));line-height:1;letter-spacing:calc(0.5696 * var(--u));color:var(--text-primary);white-space:nowrap}
.lede{left:calc(46.4 * var(--u));top:calc(245.2 * var(--u));width:calc(432 * var(--u));font-size:calc(17.0 * var(--u));font-weight:var(--fw-medium);line-height:calc(22.9 * var(--u));letter-spacing:calc(-0.15231999999999998 * var(--u));color:var(--text-primary)}
.cta{left:calc(46.8 * var(--u));top:calc(335.0 * var(--u));width:calc(157.0 * var(--u));height:calc(40.6 * var(--u));border-radius:calc(4.2 * var(--u));background:#fff;display:block;text-decoration:none;transition:background .25s ease,transform .25s ease,box-shadow .25s ease}
.cta:hover{background:#eef2f3;transform:translateY(calc(-1.5 * var(--u)));box-shadow:0 calc(8 * var(--u)) calc(22 * var(--u)) rgba(0,0,0,.20)}
.cta span{position:absolute;left:calc(32.0 * var(--u));top:calc(13.800000000000011 * var(--u));font-size:calc(15.8 * var(--u));font-weight:var(--fw-regular);line-height:1;letter-spacing:calc(0.057828000000000004 * var(--u));color:var(--text-invert);white-space:nowrap}
.footer{position:absolute;left:0;right:0;bottom:0;height:calc(342 * var(--u));
-webkit-backdrop-filter:blur(calc(50 * var(--u))) saturate(0.85);backdrop-filter:blur(calc(50 * var(--u))) saturate(0.85);
background:linear-gradient(90deg,rgba(255,255,255,0.022) 0,rgba(255,255,255,0.072) calc(20 * var(--u)),rgba(255,255,255,0) calc(58 * var(--u))),linear-gradient(270deg,rgba(255,255,255,0.02) 0,rgba(255,255,255,0.05) calc(20 * var(--u)),rgba(255,255,255,0) calc(58 * var(--u))),linear-gradient(180deg,rgba(34,14,0,0.28) 0%,rgba(70,34,0,0.24) 52%,rgba(160,120,48,0.6) 100%);overflow:hidden;
--hair:max(1px, calc(1 * var(--u)));
box-shadow:inset var(--hair) 0 0 rgba(255,255,255,0.145),
inset calc(-1 * var(--hair)) 0 0 rgba(255,255,255,0.125),
inset 0 calc(-1 * var(--hair)) 0 rgba(255,255,255,0.17),
inset 0 var(--hair) 0 rgba(255,255,255,0.03)}
.finner{position:absolute;left:50%;top:0;transform:translateX(-50%);width:var(--fw);height:100%}
.mark{left:calc(26.6 * var(--u));top:calc(36.200000000000045 * var(--u));width:calc(25.4 * var(--u));height:calc(25.4 * var(--u));display:block}
.wordmark{left:calc(62.8 * var(--u));top:calc(36.0 * var(--u));font-size:calc(23.4 * var(--u));font-weight:var(--fw-regular);line-height:1;letter-spacing:calc(0.2808 * var(--u));color:var(--text-primary);white-space:nowrap}
.tagline{left:calc(26.6 * var(--u));top:calc(73.0 * var(--u));width:calc(274 * var(--u));font-size:calc(13.5 * var(--u));font-weight:var(--fw-medium);line-height:calc(17.4 * var(--u));letter-spacing:calc(-0.18576 * var(--u));color:var(--text-muted)}
.col{top:calc(37.0 * var(--u))}
.col h3{font-size:calc(15.84 * var(--u));font-weight:var(--fw-regular);line-height:1;letter-spacing:calc(0.183744 * var(--u));color:var(--text-heading);white-space:nowrap}
.col ul{position:absolute;top:calc(31.0 * var(--u));left:0;list-style:none}
.col li{line-height:calc(25.27 * var(--u));white-space:nowrap}
.col a{font-size:calc(15.55 * var(--u));font-weight:var(--fw-regular);letter-spacing:calc(-0.07775 * var(--u));color:var(--text-primary);text-decoration:none;transition:opacity .2s ease}
.col a:hover{opacity:.6}
.c1{left:calc(938.4 * var(--u))} .c2{left:calc(1185.0 * var(--u))} .c3{left:calc(1450.6 * var(--u))}
.rule{left:calc(26.6 * var(--u));width:calc(1546.8 * var(--u));top:calc(207.5 * var(--u));height:max(1px,calc(1 * var(--u)));background:rgba(255,255,255,.42)}
.legal{left:calc(26.6 * var(--u));top:calc(271.20000000000005 * var(--u));font-size:calc(14.0 * var(--u));font-weight:var(--fw-medium);line-height:1;letter-spacing:calc(-0.30422 * var(--u));color:var(--text-muted);white-space:nowrap}
.socials{left:calc(1375.8 * var(--u));top:calc(264.4 * var(--u));display:flex;gap:calc(47.1 * var(--u))}
.socials a{display:block;width:calc(30.0 * var(--u));height:calc(30.0 * var(--u));color:#fff;transition:opacity .2s ease}
.socials a:hover{opacity:.68}
.socials svg{width:100%;height:100%;display:block;fill:currentColor}
@media (min-aspect-ratio: 17/10){
.scrim{height:calc(450 * var(--u));
background:linear-gradient(180deg,rgba(4,20,32,.48) 0%,rgba(4,20,32,.25) 46%,rgba(4,20,32,0) 100%)}
}
@media (min-aspect-ratio: 19/10){
.scrim{height:calc(470 * var(--u));
background:linear-gradient(180deg,rgba(4,20,32,.58) 0%,rgba(4,20,32,.31) 48%,rgba(4,20,32,0) 100%)}
}
@media (min-aspect-ratio: 21/10){
.bg img,.bg video{object-position:right 76%}
.scrim{height:calc(480 * var(--u));
background:linear-gradient(180deg,rgba(4,20,32,.56) 0%,rgba(4,20,32,.30) 48%,rgba(4,20,32,0) 100%)}
}
@media (min-aspect-ratio: 5/4) and (max-aspect-ratio: 31/20){
.scrim{height:calc(410 * var(--u));
background:linear-gradient(180deg,rgba(4,20,32,.26) 0%,rgba(4,20,32,.13) 45%,rgba(4,20,32,0) 100%)}
}
@media (max-aspect-ratio: 5/4){
:root{--u:calc(100vw / 780);--pad:clamp(20px, 5.6vw, 56px)}
.scrim{position:fixed;height:min(56vh,calc(560 * var(--u)));background:linear-gradient(180deg,rgba(6,22,34,.42) 0%,rgba(6,22,34,.26) 42%,rgba(6,22,34,0) 100%)}
html,body{overflow:hidden}
.viewport{display:flex;flex-direction:column;min-height:100dvh}
.stage{position:relative;left:auto;top:auto;width:100%;height:auto;transform:none;display:flex;flex-direction:column;pointer-events:auto}
.finner{position:static;left:auto;transform:none;width:auto;height:auto}
.bg{position:fixed;inset:0}
.bg img,.bg video{position:absolute;top:auto;left:0;right:0;bottom:0;width:100%;height:106%;min-width:0;min-height:0;object-fit:cover;object-position:80% bottom}
.abs{position:static}
.eyebrow,.headline-mask,.lede,.cta{margin-left:var(--pad);margin-right:var(--pad)}
.eyebrow{margin-top:clamp(28px,7vh,72px);font-size:clamp(10.5px,2.9vw,15px);letter-spacing:.09em}
.headline-mask{margin-top:clamp(10px,1.6vh,18px)}
.headline{white-space:normal;font-size:clamp(34px,9.4vw,72px);line-height:1.04;letter-spacing:0}
.lede{width:auto;max-width:38ch;font-size:clamp(14.5px,3.9vw,18px);line-height:1.42;letter-spacing:-.006em;margin-top:clamp(12px,1.8vh,20px)}
.cta{display:inline-flex;align-items:center;justify-content:center;align-self:flex-start;
width:auto;min-width:clamp(140px,40vw,190px);height:clamp(42px,6vh,52px);
padding:0 clamp(20px,6vw,34px);border-radius:4px;margin-top:clamp(16px,2.6vh,30px)}
.cta span{position:static;font-size:clamp(14px,3.7vw,16px)}
.footer{position:relative;top:auto;left:auto;right:auto;height:auto;margin-top:auto;
padding:clamp(22px,3.4vh,40px) var(--pad) clamp(20px,3vh,34px);overflow:visible;
background:linear-gradient(180deg,rgba(14,9,4,.58) 0%,rgba(26,16,5,.60) 55%,rgba(52,36,12,.66) 100%);
-webkit-backdrop-filter:blur(28px) saturate(.9);backdrop-filter:blur(28px) saturate(.9)}
.tagline{text-wrap:pretty}
.brandrow{display:flex;align-items:center;gap:clamp(9px,2.6vw,14px)}
.mark{width:clamp(20px,5.4vw,26px);height:clamp(20px,5.4vw,26px);flex:none}
.wordmark{font-size:clamp(18px,5vw,24px);letter-spacing:0}
.tagline{width:auto;max-width:42ch;font-size:clamp(11.5px,3.1vw,14px);line-height:1.32;margin-top:clamp(8px,1.4vh,14px)}
.nav{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(14px,3.4vw,30px);
margin-top:clamp(18px,3vh,34px)}
.col h3{font-size:clamp(10.5px,2.8vw,14px);letter-spacing:.03em;white-space:normal}
.col ul{position:static;margin-top:clamp(9px,1.6vh,16px)}
.col li{line-height:1.55;white-space:normal}
.col a{font-size:clamp(11.5px,3vw,15px);letter-spacing:-.005em}
.rule{width:auto;margin:clamp(16px,2.6vh,30px) 0 clamp(12px,2vh,22px)}
.footrow{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
.legal{font-size:clamp(11px,2.9vw,13.5px);letter-spacing:-.01em;white-space:normal}
.socials{display:flex;gap:clamp(18px,5.4vw,40px)}
.socials a{width:clamp(21px,5.6vw,28px);height:clamp(21px,5.6vw,28px)}
}
@media (max-aspect-ratio: 5/4) and (max-width: 648px){
html,body{overflow:visible}
body{min-height:100dvh}
.viewport{position:relative;min-height:100dvh}
.bg,.scrim{position:fixed}
.stage{padding-bottom:clamp(16px,3.6vh,36px)}
.eyebrow{margin-top:max(clamp(22px,5.6vh,52px),calc(env(safe-area-inset-top) + 14px))}
.headline{font-size:clamp(32px,10.2vw,56px);line-height:1.07;max-width:15ch;text-wrap:balance}
.lede{max-width:34ch;font-size:clamp(14.5px,4.1vw,17px);line-height:1.44;text-wrap:pretty}
.nav{grid-template-columns:repeat(2,minmax(0,1fr));
gap:clamp(15px,4.4vw,26px) clamp(14px,4vw,22px);margin-top:clamp(16px,2.6vh,30px)}
.c3{grid-column:1 / -1}
.c3 ul{columns:2;column-gap:clamp(14px,4vw,22px)}
.c3 li{break-inside:avoid}
.col li{line-height:1.26}
.col a{display:inline-block;padding-block:clamp(9px,1.1vh,11px)}
.footrow{flex-direction:row;align-items:center;justify-content:space-between;
gap:clamp(12px,4vw,20px);flex-wrap:nowrap}
.legal{white-space:nowrap}
.socials{gap:clamp(16px,4.8vw,26px);flex:none}
.rule{margin:clamp(14px,2.2vh,26px) 0 clamp(11px,1.8vh,20px)}
}
@media (max-aspect-ratio: 5/4) and (max-width: 380px){
.legal{white-space:normal}
.footrow{flex-wrap:wrap;gap:clamp(12px,3.4vw,16px)}
}
@media (max-aspect-ratio: 5/4) and (max-height:620px){
.eyebrow{margin-top:clamp(14px,4vh,30px)}
}
html.js-enter .eyebrow,html.js-enter .lede,html.js-enter .cta,
html.js-enter .mark,html.js-enter .wordmark,html.js-enter .tagline,
html.js-enter .col,html.js-enter .legal,html.js-enter .socials a{opacity:0}
html.js-enter .headline-mask{clip-path:inset(-45% -8% -6px -3%)}
html.js-enter .headline{transform:translate3d(0,118%,0)}
html.js-enter .rule{transform:scaleX(0);transform-origin:left center}
html.js-enter .headline,html.js-enter .cta,
html.js-enter .lede,html.js-enter .col{will-change:transform,opacity}
@media (prefers-reduced-motion:reduce){
html.js-enter .eyebrow,html.js-enter .lede,html.js-enter .cta,html.js-enter .mark,
html.js-enter .wordmark,html.js-enter .tagline,html.js-enter .col,html.js-enter .legal,
html.js-enter .socials a{opacity:1}
html.js-enter .headline,html.js-enter .rule{transform:none}
html.js-enter .headline-mask{clip-path:none}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}
</style>
<script>
(function(){try{
if(!window.matchMedia('(prefers-reduced-motion: reduce)').matches)
document.documentElement.classList.add('js-enter');
}catch(e){}})();
</script>
</head>
<body>
<div class="viewport">
<div class="bg"><video src="https://meez.design/web/media/ext/45790b279ed922a2.mp4" poster="https://meez.design/web/media/ext/ec27534816f88643.webp" autoplay muted loop playsinline aria-label="Painted alpine panorama: a lone hiker with a pink backpack faces a snow-capped peak above a sea of clouds"></video></div>
<div class="scrim"></div>
<div class="stage">
<p class="abs eyebrow">Ready when you are</p>
<div class="abs headline-mask"><h1 class="headline">Build your future now</h1></div>
<p class="abs lede">From branding and websites to marketing and growth systems, everything you need to move forward starts right here.</p>
<a class="abs cta" href="#"><span>Take Control</span></a>
</div>
<footer class="footer"><div class="finner">
<div class="brandrow">
<svg class="abs mark" viewBox="0 0 100 100" aria-hidden="true"><g fill="#fff"><path d="M 45.13 1.28 L 54.87 1.28 L 54.87 42.42 L 45.13 38.09 Z"/><path d="M 79.47 12.10 L 87.90 20.53 L 58.80 49.62 L 53.45 38.13 Z"/><path d="M 98.72 45.13 L 98.72 54.87 L 57.58 54.87 L 61.91 45.13 Z"/><path d="M 87.90 79.47 L 79.47 87.90 L 50.38 58.80 L 61.87 53.45 Z"/><path d="M 54.87 98.72 L 45.13 98.72 L 45.13 57.58 L 54.87 61.91 Z"/><path d="M 20.53 87.90 L 12.10 79.47 L 41.20 50.38 L 46.55 61.87 Z"/><path d="M 1.28 54.87 L 1.28 45.13 L 42.42 45.13 L 38.09 54.87 Z"/><path d="M 12.10 20.53 L 20.53 12.10 L 49.62 41.20 L 38.13 46.55 Z"/></g></svg>
<span class="abs wordmark">Nexeus</span>
</div>
<p class="abs tagline">Change your future today using marketing and growth systems everything you need starts here.</p>
<nav class="nav">
<div class="abs col c1"><h3>SOLUTIONS</h3><ul>
<li><a href="#">Revenue Acceleration</a></li><li><a href="#">Search Visibility</a></li>
<li><a href="#">Conversion Optimization</a></li><li><a href="#">Customer Automation</a></li></ul></div>
<div class="abs col c2"><h3>CAPABILITIES</h3><ul>
<li><a href="#">Web Architecture</a></li><li><a href="#">Brand Systems</a></li>
<li><a href="#">Growth Marketing</a></li><li><a href="#">E-commerce Infrastructure</a></li></ul></div>
<div class="abs col c3"><h3>RESOURCES</h3><ul>
<li><a href="#">Case Studies</a></li><li><a href="#">Growth Insights</a></li>
<li><a href="#">Playbooks</a></li><li><a href="#">Industry Reports</a></li></ul></div>
</nav>
<div class="abs rule"></div>
<div class="footrow">
<p class="abs legal">® 2025 Nexeus all rights reserved.</p>
<div class="abs socials">
<a href="#" aria-label="LinkedIn"><svg viewBox="0 0 30 30"><path d="M25.2 0H4.8A4.8 4.8 0 0 0 0 4.8v20.4A4.8 4.8 0 0 0 4.8 30h20.4a4.8 4.8 0 0 0 4.8-4.8V4.8A4.8 4.8 0 0 0 25.2 0Zm0 25.2H4.8V4.8h20.4v20.4Z"/><path d="M10.05 12.3H7.5v9.45h2.55V12.3ZM8.77 11.2a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3ZM18.05 12.06c-1.28 0-2.13.5-2.62 1.18V12.3h-2.5v9.45h2.55v-5.06c0-1.19.6-1.87 1.63-1.87.97 0 1.45.64 1.45 1.87v5.06h2.55v-5.56c0-2.57-1.27-4.13-3.06-4.13Z"/></svg></a>
<a href="#" aria-label="GitHub"><svg viewBox="0 0 24 24"><path d="M12 .3a12 12 0 0 0-3.79 23.4c.6.11.82-.26.82-.58l-.01-2.05c-3.34.73-4.04-1.61-4.04-1.61-.55-1.39-1.34-1.76-1.34-1.76-1.08-.75.09-.73.09-.73 1.2.08 1.83 1.23 1.83 1.23 1.07 1.83 2.81 1.3 3.5.99.11-.78.42-1.31.76-1.61-2.67-.3-5.47-1.33-5.47-5.93 0-1.31.47-2.38 1.24-3.22-.12-.3-.54-1.52.12-3.18 0 0 1-.32 3.3 1.23a11.5 11.5 0 0 1 6 0c2.28-1.55 3.29-1.23 3.29-1.23.66 1.66.24 2.88.12 3.18.77.84 1.23 1.91 1.23 3.22 0 4.61-2.8 5.63-5.48 5.92.43.37.81 1.1.81 2.22l-.01 3.29c0 .32.21.7.82.58A12 12 0 0 0 12 .3Z"/></svg></a>
<a href="#" aria-label="Medium"><svg viewBox="0 0 1043.63 592.71"><path d="M588.67 296.36c0 163.67-131.78 296.35-294.33 296.35S0 460.03 0 296.36 131.78 0 294.34 0s294.33 132.69 294.33 296.36M911.56 296.36c0 154.06-65.89 278.98-147.17 278.98s-147.17-124.92-147.17-278.98S683.1 17.38 764.39 17.38s147.17 124.92 147.17 278.98M1043.63 296.36c0 138-23.17 249.94-51.76 249.94s-51.75-111.93-51.75-249.94 23.17-249.94 51.75-249.94 51.76 111.94 51.76 249.94"/></svg></a>
</div>
</div>
</div></footer>
</div>
<script>
(function(){
var root = document.documentElement;
if (!root.classList.contains('js-enter')) return;
if (root.dataset.entered) return;
root.dataset.entered = '1';
var EXPO = 'cubic-bezier(.16,1,.3,1)',
SOFT = 'cubic-bezier(.22,.65,.28,1)',
SETTLE = 'cubic-bezier(.33,1,.68,1)';
var small = window.matchMedia('(max-width:648px)').matches;
var d = small ? 0.62 : 1,
t = small ? 0.85 : 1;
var anims = [];
function Y(px){ return 'translate3d(0,' + (px * d).toFixed(2) + 'px,0)'; }
function tw(el, frames, dur, delay, ease){
if (!el) return;
anims.push(el.animate(frames, {duration: dur, delay: delay * t, easing: ease, fill: 'both'}));
}
function each(sel, fn){ Array.prototype.forEach.call(document.querySelectorAll(sel), fn); }
var one = function(s){ return document.querySelector(s); };
var rise = function(px){ return [{opacity:0, transform:Y(px)}, {opacity:1, transform:'none'}]; };
tw(one('.eyebrow'), rise(12), 560, 60, SOFT);
tw(one('.headline'), [{transform:'translate3d(0,118%,0)'},{transform:'translate3d(0,0,0)'}],
950, 170, EXPO);
tw(one('.lede'), rise(14), 660, 430, SOFT);
tw(one('.cta'), [{opacity:0, transform:Y(12)+' scale(.985)'},
{opacity:1, transform:'none'}], 580, 620, SETTLE);
tw(one('.mark'), rise(10), 540, 600, SOFT);
tw(one('.wordmark'), rise(10), 540, 600, SOFT);
tw(one('.tagline'), rise(10), 540, 670, SOFT);
each('.col', function(el, i){ tw(el, rise(14), 580, 720 + i * 70, SOFT); });
tw(one('.rule'), [{transform:'scaleX(0)'},{transform:'scaleX(1)'}], 720, 980, EXPO);
tw(one('.legal'), rise(8), 500, 1120, SOFT);
each('.socials a', function(el, i){ tw(el, rise(8), 500, 1170 + i * 60, SOFT); });
var settled = false;
function finish(){
if (settled) return; settled = true;
root.classList.remove('js-enter');
for (var i = 0; i < anims.length; i++){ try { anims[i].cancel(); } catch (e) {} }
anims.length = 0;
}
Promise.all(anims.map(function(a){ return a.finished; })).then(finish, finish);
})();
</script>
</body>
</html>
Browse & preview free Unlock everything — from $49/mo
Frequently asked questions
Are these prompts really free?
Yes — all 62 on this page are free to copy in full, with no account and no card. They are complete build-prompts, identical in structure to the premium library, not samples or teasers.
Can I use what I build with them commercially?
Yes. The websites you build with Meez prompts are yours, including for client work and commercial projects.
What's in the paid library?
The full library is 641 build-prompts across landing pages, SaaS sites, heros, sections and design systems, plus 285 loop-ready motion backgrounds — every one previewable free. Unlimited unlocks all of it from $49/mo ($149/yr, or $299 once for lifetime).
All prompt categories → · Motion backgrounds → · Why AI websites look generic → · Lovable vs v0 vs Bolt vs Cursor →