Prompts · for Webflow
AI website build-prompts for Webflow
Hand a Meez prompt to Webflow's AI site builder and it scaffolds the structure, styles and content from your spec — a real starting point in the Designer instead of a blank canvas or a stock template. The precise layout, fonts and motion notes carry through, so you spend your time refining rather than describing.
How to use a Meez prompt in Webflow
- Pick a prompt below (4 on this page are free) or browse the full library — every prompt is a complete art-direction spec: fonts, layout, color system, motion and real asset URLs.
- Copy the whole prompt and paste it into Webflow's AI site builder. Don’t trim it — the detail is what stops Webflow from defaulting to a generic layout.
- Let it build, then iterate: swap the copy, point the asset URLs at your own media, and ship. The sites you build are yours, commercially.
Free prompts to try in Webflow right now
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/ext/9e21d3642a50b515.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/media/ext/c5085b098c51af7a.png` (84x84), number "154", label "drinks consumed" - Card 2: sandwich image `https://meez.design/web/media/ext/683693767fd81bd8.png` (84x84), number "36", label "sandwiches eaten" - Card 3: cafe image `https://meez.design/web/media/ext/c6274ffbf93131f6.png` (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/media/ext/ff2382c37f897c16.png` (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.
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/ext/5f14782b86025ef3.mp4`
- RIGHT video: `https://meez.design/web/media/ext/e9b7f55d37be8f40.mp4`
**Gallery Images (10 total, in order):**
1. `https://meez.design/web/media/ext/e64c05f1c0a2fd2a.webp`
2. `https://meez.design/web/media/ext/c4e53b540a38c5ff.webp`
3. `https://meez.design/web/media/ext/58b0aa7ffeff988e.webp`
4. `https://meez.design/web/media/ext/35730fb48d1fb44f.webp`
5. `https://meez.design/web/media/ext/3d5361051fe78cff.webp`
6. `https://meez.design/web/media/ext/69d5bd76b44a4172.webp`
7. `https://meez.design/web/media/ext/42f370af238a13cc.webp`
8. `https://meez.design/web/media/ext/e0c3503865c0922f.webp`
9. `https://meez.design/web/media/ext/387403738430a43f.webp`
10. `https://meez.design/web/media/ext/518026d4eccfb4d3.webp`
---
### 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/ext/5f14782b86025ef3.mp4" muted playsinline preload="auto" style="display:none;"></video>
<video id="video-right" src="https://meez.design/web/media/ext/e9b7f55d37be8f40.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/media/ext/e64c05f1c0a2fd2a.webp",
"https://meez.design/web/media/ext/c4e53b540a38c5ff.webp",
"https://meez.design/web/media/ext/58b0aa7ffeff988e.webp",
"https://meez.design/web/media/ext/35730fb48d1fb44f.webp",
"https://meez.design/web/media/ext/3d5361051fe78cff.webp",
"https://meez.design/web/media/ext/69d5bd76b44a4172.webp",
"https://meez.design/web/media/ext/42f370af238a13cc.webp",
"https://meez.design/web/media/ext/e0c3503865c0922f.webp",
"https://meez.design/web/media/ext/387403738430a43f.webp",
"https://meez.design/web/media/ext/518026d4eccfb4d3.webp",
];
// 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/ext/597d53d9b15f2d2d.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/media/ext/f9ce5f887859208d.png`
- **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/media/ext/0d3cbcc042a65ea1.png`
- Car: `left: 70.8%, top: 15.6%`, delay 2.2, rotate `9.73deg`, URL: `https://meez.design/web/media/ext/457552dcad941164.png`
- Plane: `left: 55.2%, top: 52.1%`, delay 2.3, rotate `180deg scaleY(-1)`, URL: `https://meez.design/web/media/ext/c4fe9416e8e5502f.png`
- 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/media/ext/962814ac70117210.png`
### 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/ext/597d53d9b15f2d2d.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/media/ext/f9ce5f887859208d.png" 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/media/ext/0d3cbcc042a65ea1.png" alt="Ship"/>
</div>
<div class="transport-icon" id="ti1" style="left: 70.8%; top: 15.6%;">
<img src="https://meez.design/web/media/ext/457552dcad941164.png" 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/media/ext/c4fe9416e8e5502f.png" 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/media/ext/962814ac70117210.png" 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>
From the library
Vize Footer
Wanderful Hero
xPortfolio Hero
Zenith Footer
Build With Us
Guardnet Benefits
Solace sign-in
Liquid Glass Features
Liquid Glass CTA
Veloce Cards
Arceage Contact Us
Arceage Testimonial
Arceage Services
Arceage Stats
NexaCore Results
NexaCore Process
NexaCore Control
Guardnet Demo
Vision Reveal
Halo Use Case
Halo Benefits
Projects Catalog
Agency Services
Scroll Marquee
Daisy Wild
Daisy Sweet
Nimbus Ops
Nimbus Security
NimBus Pricing
Nimbus Sticky Cards
Cognitra Offer
Cognitra Feature
Browse & preview free Unlock everything — from $19/mo
Frequently asked questions
Do Meez prompts work with Webflow?
Yes. Every Meez prompt is a complete written spec — fonts, layout, color tokens, motion and asset URLs — so Webflow can build it in one paste. The 32 free prompts on this site work exactly like the premium ones; copy one above and try it.
What does Webflow generate from a prompt?
Webflow builds class-based, production-grade sites you refine in its visual Designer and host on Webflow — with real CMS collections when you need them. An AI-scaffolded start from a Meez spec lands as editable Designer elements, not a flattened template, so the art direction survives your refinements.
How do I use a Meez prompt in Webflow?
Copy the full prompt text and paste it into Webflow's AI site builder. Don't shorten it — the specificity is what keeps Webflow from producing a generic layout. Then iterate: swap the copy and point the asset URLs at your own media.
How many prompts are free?
32 prompts are free to copy in full, no account needed. The other 495 unlock with Unlimited — $19/mo, $99/yr, or $199 once for lifetime — along with all 198 motion backgrounds.
Also for: Lovable · Bolt · v0 · Cursor · Claude · Replit · Windsurf · Framer · ChatGPT · Figma Make · Gemini · GitHub Copilot · Wix
Not sure which tool? Lovable vs v0 vs Bolt vs Cursor, compared → · All free prompts on one page → · All prompt categories →