Free · full text
15 free AI website build-prompts
These are 15 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 478 prompts and 185 motion backgrounds, where everything is free to browse and preview.
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 15 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/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>
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/media/ext/4dfc1a4b05bd693d.webp
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/media/ext/933e27c46b639e84.png
```
- 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/media/ext/014f4c2bed24ce90.png
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/media/ext/8f861b7c00ec34fe.png
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/media/ext/c79bc389cb0bf9d4.png
```
### 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/media/ext/300c2e1eb0264eef.png
```
- 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/media/ext/8f861b7c00ec34fe.png
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/media/ext/4dfc1a4b05bd693d.webp'); 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/media/ext/933e27c46b639e84.png" 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/media/ext/014f4c2bed24ce90.png"
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/media/ext/8f861b7c00ec34fe.png"
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/media/ext/c79bc389cb0bf9d4.png"
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/media/ext/300c2e1eb0264eef.png"
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/media/ext/8f861b7c00ec34fe.png"
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/ext/4c7a17ed464fc641.mp4`
2. `https://meez.design/web/media/ext/c1d7ee2322f50681.mp4`
3. `https://meez.design/web/media/ext/05734ea5698e8780.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@example.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@example.com" class="nav-link-underline">viktor@example.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@example.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@example.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/ext/4c7a17ed464fc641.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/ext/c1d7ee2322f50681.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/ext/05734ea5698e8780.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/ext/4c7a17ed464fc641.mp4',
'https://meez.design/web/media/ext/c1d7ee2322f50681.mp4',
'https://meez.design/web/media/ext/05734ea5698e8780.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/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.
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: `https://db.onlinewebfonts.com/c/e66905e07608167a84e6ad52f638c3c6?family=Helvetica+Now+Var` - 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/media/ext/fc0a3e9b956b6a77.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: `https://db.onlinewebfonts.com/c/08e020de1811ec4489f82d1247a42c09?family=Helvetica+Now+Text`
- 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
```
]
Browse & preview free Unlock everything — from $19/mo
Frequently asked questions
Are these prompts really free?
Yes — all 15 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 478 build-prompts across landing pages, SaaS sites, heros, sections and design systems, plus 185 loop-ready motion backgrounds — every one previewable free. Unlimited unlocks all of it from $19/mo ($99/yr, or $199 once for lifetime).
All prompt categories → · Motion backgrounds → · Why AI websites look generic → · Lovable vs v0 vs Bolt vs Cursor →