前端开发类 AI 提示词大全 · 265 条

本页完整收录「前端开发」分类下的全部 265 条 AI 提示词，其中已校准/精选 16 条。所有正文保留源语言原文、逐字收录，绝不做机器翻译；每条标注来源与可信档位。

想按行业、标签、语言自由筛选，或一键复制带出处署名的提示词，请使用交互版：

Mythic Naturecore

No.1406 · 前端开发 · 社区/原生 · 来源：MotionSites (MIT) · EN 原文

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

---

1. Typography & Global Styles

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

---

2. Assets Asset Mapping

Define these exact asset constants at the top of the file:
```typescript
const PORTAL_BG = 'https://res.cloudinary.com/dsdhxhhqh/image/upload/v1779974947/portal_bg_mu60k9.png';
const CURTAIN_LEFT = 'https://res.cloudinary.com/dsdhxhhqh/image/upload/v1779975070/curtain_left_cdht6q.png';
const CURTAIN_RIGHT = 'https://res.cloudinary.com/dsdhxhhqh/image/upload/v1779975071/curtain_right_a9bn3i.png';
const WORLD_BG = 'https://res.cloudinary.com/dsdhxhhqh/image/upload/v1779975077/world_bg_jzzcn1.jpg';

// The cards MUST remain in this exact order (Card 3, Card 1, Card 2)
const CARD_IMAGES = [
'https://res.cloudinary.com/dsdhxhhqh/image/upload/v1779975070/card_3_nbwm25.jpg',
'https://res.cloudinary.com/dsdhxhhqh/image/upload/v1779975070/card_2_wr6al6.jpg', // Representing Card 1
'https://res.cloudinary.com/dsdhxhhqh/image/upload/v1779975070/card_1_jz8otj.jpg', // Representing Card 2
];
```

---

3. State Management & Mathematical Helpers

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

---

4. Animation Timelines (Scroll & Mouse Parallax)

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

---

5. Layout & Components

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

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

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

Email 落地页页面

No.1407 · 前端开发 · 社区/原生 · 来源：MotionSites (MIT) · EN 原文

Build a premium, AI-native email client landing page called "Aura" using **React 18 + TypeScript + Vite + Tailwind CSS + motion/react (framer motion) + lucide-react**. The aesthetic is dark (bg `#0c0c0c`), cinematic, glassy, with a looping fullscreen background video, a shiny gradient headline, a macOS-style menu bar, a realistic inbox mockup, and a custom "liquid-glass" card treatment.

## Stack / setup

- `package.json` dependencies: `react`, `react-dom`, `@supabase/supabase-js`, `motion` (v12+, import from `motion/react`), `lucide-react`.
- Tailwind config extends colors with `brand: '#3D81E3'` and fontFamily sans with `['Inter','system-ui','sans-serif']`.
- Font: Google Fonts Inter weights 400, 500, 600, 700, 800, 900. Import in `index.css` via `@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap');`.
- `html,body { font-family: 'Inter', system-ui, sans-serif; -webkit-font-smoothing: antialiased; }`.
- Background color base `#0c0c0c`, text white, selection `bg-brand/30`.

## Global background video (fixed, behind everything)

Inside the root wrapper (`relative min-h-screen overflow-x-hidden bg-[#0c0c0c] text-white`), render a fixed full-screen video:

```
<div className="fixed inset-0 z-0 pointer-events-none">
<video autoPlay loop muted playsInline
className="w-full h-full object-cover pointer-events-none"
src="https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260508_064122_c4750c0e-7476-4b44-94a2-a85a65c63bf2.mp4" />
</div>
```

Also render two hidden-on-mobile fixed vertical guide lines at the 36rem container edges:
```
<div className="hidden md:block pointer-events-none fixed inset-y-0 left-1/2 -translate-x-[calc(50%+36rem)] w-px bg-white/10 z-[5]" />
<div className="hidden md:block pointer-events-none fixed inset-y-0 left-1/2 translate-x-[calc(-50%+36rem)] w-px bg-white/10 z-[5]" />
```

## Global SVG noise filters (two, both id `c3-noise`)

- One at root level (subtle grain, multiply blend) for the shiny headline.
- One inside the pricing section (fractal noise, overlay blend) for the watermark.

Root filter:
```
<filter id="c3-noise">
<feTurbulence type="fractalNoise" baseFrequency="0.9" numOctaves="2" stitchTiles="stitch" />
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.35 0" />
<feComposite in2="SourceGraphic" operator="in" result="noise" />
<feBlend in="SourceGraphic" in2="noise" mode="multiply" />
</filter>
```

Pricing filter:
```
<filter id="c3-noise">
<feTurbulence type="fractalNoise" baseFrequency="0.5" numOctaves="2" stitchTiles="stitch" />
<feComponentTransfer><feFuncA type="linear" slope="0.075" /></feComponentTransfer>
<feComposite in2="SourceGraphic" operator="in" result="noise" />
<feBlend in="SourceGraphic" in2="noise" mode="overlay" />
</filter>
```

## Shared primitives

**AppleLogo** — inline SVG Apple mark, `viewBox="0 0 384 512"`, `fill="currentColor"`, default `w-4 h-4`. Path:
`M318.7 268.7c-.2-36.7 16.4-64.4 50-84.8-18.8-26.9-47.2-41.7-84.7-44.6-35.5-2.8-74.3 20.7-88.5 20.7-15 0-49.4-19.7-76.4-19.7C63.3 141.2 4 184.8 4 273.5q0 39.3 14.4 81.2c12.8 36.7 59 126.7 107.2 125.2 25.2-.6 43-17.9 75.8-17.9 31.8 0 48.3 17.9 76.4 17.9 48.6-.7 90.4-82.5 102.6-119.3-65.2-30.7-61.7-90-61.7-91.9zm-56.6-164.2c27.3-32.4 24.8-61.9 24-72.5-24.1 1.4-52 16.4-67.9 34.9-17.5 19.8-27.8 44.3-25.6 71.9 26.1 2 49.9-11.4 69.5-34.3z`.

**LogoMark** — abstract 4-quadrant curve mark, `viewBox="0 0 256 256"`, default `w-8 h-8`, white fill. Path:
`M 0 128 C 70.692 128 128 185.308 128 256 L 64 256 C 64 220.654 35.346 192 0 192 Z M 256 192 C 220.654 192 192 220.654 192 256 L 128 256 C 128 185.308 185.308 128 256 128 Z M 128 0 C 128 70.692 70.692 128 0 128 L 0 64 C 35.346 64 64 35.346 64 0 Z M 192 0 C 192 35.346 220.654 64 256 64 L 256 128 C 185.308 128 128 70.692 128 0 Z`.

**AppleButton** — rounded-full white pill, Apple logo + "Download Aura" label + ChevronRight. Chevron translates `+1px` on group hover. Classes: `group inline-flex items-center justify-center gap-2 rounded-full bg-white text-black font-medium text-sm px-5 py-3 transition-all hover:bg-white/90 active:scale-[0.98]`. Accepts `label` and `full` props.

**SectionEyebrow** — `<span className="w-1.5 h-1.5 rounded-full bg-white" />` + label, optional tag pill with `px-2 py-0.5 rounded-full border border-white/10 text-white/50`.

**gradientStyle** used on the headline word "Revitalized":
```
backgroundImage: 'linear-gradient(to right, #091020 0%, #0B2551 12.5%, #A4F4FD 32.5%, #00d2ff 50%, #0B2551 67.5%, #091020 87.5%, #091020 100%)'
backgroundSize: '200% auto'
WebkitBackgroundClip: 'text' (+ backgroundClip text)
color: 'transparent'; WebkitTextFillColor: 'transparent'
filter: 'url(#c3-noise)'
```

Shiny animation (`.animate-shiny`): 6s linear infinite, keyframes shiny `{0%: background-position: -200% center; 100%: 200% center;}`.

## Liquid-glass utility (used across cards)

```
.liquid-glass {
background: rgba(255,255,255,0.01);
background-blend-mode: luminosity;
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;
}
```

## Section 1 — Navbar

Max-width `max-w-6xl mx-auto px-6`. Motion nav fades/slides down (opacity 0 -> 1, y -10 -> 0, 0.6s easeOut). Left: just the `LogoMark` (NO "Aura" word). Center (`hidden md:flex gap-8`): links `['Solutions','Pricing','Blog','Documentation','Careers']` each `text-white/70 text-sm font-medium hover:text-white` with staggered y animation (delay 0.1 + i*0.05). Right desktop: `<AppleButton />` default label "Download Aura". Mobile right: `w-10 h-10 rounded-full border border-white/10 bg-white/5` Menu icon button.

## Section 2 — Hero

Centered section, `pt-16 md:pt-28 pb-20 text-center flex flex-col items-center`.
Motion h1 (delay 0.3, 0.8s cubic-bezier(.22,1,.36,1)), classes `text-4xl md:text-7xl font-semibold tracking-tight leading-[0.9]`:
- Line 1: "Your email." (white)
- Line 2: "Revitalized" — apply `animate-shiny` and the `gradientStyle` inline.

Then motion paragraph (delay 0.5): `mt-8 text-white/60 max-w-md text-base leading-[1.5]`:
> "Aura is the premier inbox platform for the current era. It leverages powerful AI to organize, prioritize, and refine your messages into total clarity."

Then motion div (delay 0.7) with `<AppleButton />` and `text-xs text-white/40` "Download for Intel / Apple Silicon".

## Section 3 — macOS menu bar strip

Full-width bar `h-10 bg-black/40 backdrop-blur-md border-t border-b border-white/10`. Inside `max-w-6xl mx-auto px-6 h-full flex items-center justify-between text-xs`. Left: `AppleLogo w-3.5 h-3.5`, bold white "Aura", then menu items `['File','Edit','View','Go','Window','Help']` (progressive hiding: index>2 `hidden sm:inline`, index>3 `hidden md:inline`). Right: `Search w-3.5 h-3.5` + "Wed May 6 1:09 PM". Enters with delay 0.9.

## Section 4 — Inbox mockup

`max-w-6xl mx-auto px-6 py-16 md:py-24`. Outer container `relative rounded-2xl overflow-hidden border border-white/10 bg-[#0e1014]/90 backdrop-blur-2xl`. Motion enters from y:40 at delay 1.1.

Title bar: three traffic lights `#ff5f57`, `#febc2e`, `#28c840` (each `w-3 h-3 rounded-full`); center label "Aura — Inbox" `text-xs text-white/50`.

Body `grid grid-cols-12 h-[520px]`:

**Sidebar (col-span-3, border-r, bg-black/30, p-4):**
- White "Compose with Aura" button with `Sparkles` icon (`rounded-lg bg-white text-black text-xs font-semibold px-3 py-2`).
- Nav items (icon + label + optional count): Inbox (12, active), Starred (3), Sent, Drafts (2), Archive, Trash. Active uses `bg-white/10 text-white`, others `text-white/60 hover:bg-white/5`.
- Labels section: uppercase tracking "Labels" small title, then 4 color dots: Work `#00d2ff`, Personal `#A4F4FD`, Travel `#f59e0b`, Finance `#10b981`.

**Message list (col-span-4, border-r):**
- Search header: `Search` icon + placeholder "Search mail".
- 6 messages with name, subject, preview, time, unread/active flags:
- Linear — "Weekly product digest" — "Your team shipped 23 issues this week..." — 9:41 AM — unread + active
- Sophia Chen — "Re: Q3 roadmap review" — "Thanks for sending the deck over. I had a few thoughts..." — 8:12 AM — unread
- Figma — "Marcus commented on your file" — "Love the new direction on the landing hero." — Yesterday
- Stripe — "Payout of $12,480.00 sent" — "Your payout is on its way to your bank..." — Yesterday
- Vercel — "Deployment ready for aura-web" — "Preview is live at aura-web-g3f.vercel.app" — Mon
- GitHub — "[aura/core] PR #482 approved" — "david-lim approved your pull request." — Mon

**Reader (col-span-5):**
- Toolbar with Reply, Forward, Archive, Trash2 icon buttons (each `w-7 h-7 rounded-md hover:bg-white/5`) and a MoreHorizontal on the right.
- Header: "Weekly product digest"; sender avatar gradient bubble `w-7 h-7 rounded-full bg-gradient-to-br from-[#00d2ff] to-[#0B2551]` with "L"; "Linear" + "to me · 9:41 AM"; "Work" pill.
- Body:
- Card with `Sparkles` icon (color `#A4F4FD`) labeled "Summary by Aura" and text "Your team closed 23 issues, merged 14 PRs, and shipped 2 features. Top contributor: Marcus. No action needed."
- Paragraphs: "Hi team,", "Here is your weekly digest of everything happening across your projects. This was a strong week with significant progress on the Q3 roadmap.", "Twenty-three issues were closed, fourteen pull requests were merged, and two customer-facing features went out. The velocity trend continues to climb.", "Let me know if you would like a deeper breakdown by project or contributor.", "— The Linear team" (`text-white/50`).
- Attachment pill with `Paperclip` icon: "digest-may-6.pdf".

## Section 5 — FeatureTriage

`max-w-6xl mx-auto px-6 py-20 md:py-28`, two-column grid `grid md:grid-cols-2 gap-10 md:gap-16 items-start`.

Left column motion (y 20 -> 0, 0.7s): `SectionEyebrow label="Triage" tag="AI-native"`, h2 `mt-5 text-3xl md:text-5xl font-semibold tracking-tight leading-[1.02]`: "Clear your inbox" <br/> "in a single pass.". Paragraph `mt-6 text-white/60 text-base leading-[1.6] max-w-md`: "Aura reads every message, understands intent, and routes the noise away from the signal. Focus on what moves your day forward — the rest handles itself." Chips row (`text-xs text-white/70 px-3 py-1.5 rounded-full border border-white/10 bg-white/[0.03]`): "Auto-categorize", "Snooze for later", "Silent newsletters", "One-tap unsubscribe".

Right column: `liquid-glass rounded-2xl p-5` card. Eyebrow text: "Today · 42 messages triaged". Four sub-cards (each `liquid-glass rounded-lg p-3`):
- Priority (4) `#ffffff` — items: "Sophia Chen — Q3 review", "David Lim — contract signoff"
- Follow-up (7) `#e5e5e5` — items: "Marcus — design review", "Figma — comment thread"
- Updates (18) `#a3a3a3` — items: "Vercel — deploy ready", "GitHub — PR #482 merged"
- Archived (13) `#525252` — items: "Stripe payout · Newsletter · Receipts"

## Section 6 — LogoCloud

`max-w-6xl mx-auto px-6 py-16 md:py-20`. Centered kicker `text-xs uppercase tracking-widest text-white/40`: "Trusted by the world's most thoughtful teams". Grid `mt-10 grid grid-cols-2 sm:grid-cols-4 lg:grid-cols-8 gap-6`, each logo name as `text-sm font-semibold tracking-tight text-white/50 hover:text-white`. Names: Linear, Vercel, Figma, Stripe, Ramp, Notion, Loom, Arc. Each fades in with stagger 0.05.

## Section 7 — Testimonials

`max-w-6xl mx-auto px-6 py-20 md:py-28 border-t border-white/10`. 3-col grid of `liquid-glass rounded-2xl p-6` figures. Each: blockquote `text-sm text-white/80 leading-[1.6]` wrapped in quotes, `figcaption mt-6 pt-5 border-t border-white/10` with name `text-sm font-semibold`, role `text-xs text-white/50`, company uppercased `text-xs text-white font-semibold tracking-wide`.
- "Aura gave our leadership team four hours of their week back. It reads like email from the future." — Parker Wilf, Group Product Manager, MERCURY
- "The command palette alone has changed how I process messages. I can't imagine going back to a traditional client." — Andrew von Rosenbach, Senior Engineering Program Manager, COHERE
- "Triage that actually understands context. Our team stopped dreading Monday morning inboxes." — Mathies Christensen, Engineering Manager, LUNAR

## Section 8 — Pricing

Uses custom CSS classes (not Tailwind) for cinematic typography.

Outer `<section className="c3-pricing-section">` with its own `<svg>` defining the `c3-noise` pricing filter described earlier.

Watermark (giant hero headline as backdrop):
```
<div className="c3-watermark-container">
<div className="c3-watermark-main">
<span className="c3-watermark-line-1">Your email.</span>
<span className="c3-watermark-line-2">Revitalized</span>
</div>
</div>
```

State: `yearly` boolean toggle. Three plans:
- **Free** — "Free" — "For creators taking their first steps with Forma." — Up to 3 projects in the cloud / Image export up to 1080p / Basic editing tools / Free templates and icons / Access via web and mobile app.
- **Standard** — monthly "$9,99/m" yearly "$99,99/y" — "For freelancers and small teams who need more freedom and flexibility." — Up to 50 projects in the cloud / Export up to 4K / Advanced editing toolkit / Team collaboration (up to 5 members) / Access to premium template library.
- **Pro** (`c3-card-pro`) — monthly "$19,99/m" yearly "$199,99/y" — "For studios, agencies, and professional creators working with brands." — Unlimited projects / Export up to 8K + animations / AI-powered content generation tools / Unlimited team members / Brand customization.

Each card renders: `c3-tier-small` (tier), `c3-tier-large` (price), `c3-desc`, `c3-list` of checkmark rows (white circle `c3-check` with white SVG check), `c3-btn` "Choose Plan".

Below: `c3-toggle-wrap` with "Yearly" label and a pill toggle (white knob black when off; when `.active`, background `rgba(255,255,255,0.2)`, knob white, translated 24px).

Pricing CSS (key values, include exactly):
- `.c3-pricing-section { position: relative; padding: 40px 20px 80px; display: flex; flex-direction: column; align-items: center; overflow-x: hidden; }`
- `.c3-watermark-container { position: relative; width: 100%; max-width: 1100px; text-align: center; margin-top: 40px; z-index: 2; }`
- `.c3-watermark-main { font-size: 9rem; font-weight: 800; line-height: 0.9; letter-spacing: -0.05em; filter: url(#c3-noise); display: flex; flex-direction: column; align-items: center; }`
- `.c3-watermark-line-1 { color: #fff; }`
- `.c3-watermark-line-2 { background: linear-gradient(to right, #091020 0%, #0B2551 25%, #A4F4FD 65%, #00d2ff 100%); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; }`
- `.c3-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; width: 100%; max-width: 1100px; margin-top: 60px; transform: translateX(20px); position: relative; z-index: 3; }`
- `.c3-card { background: linear-gradient(135deg, rgba(0,0,0,0.7), rgba(0,0,0,0.4)); backdrop-filter: blur(14px) brightness(0.91); border: 1px solid rgba(255,255,255,1); border-radius: 44px; padding: 50px 24px; min-height: 580px; display: flex; flex-direction: column; transition: all 0.6s cubic-bezier(.22,1,.36,1); overflow: hidden; position: relative; }`
- `.c3-card::before { content:''; position:absolute; inset:0; border-radius:inherit; background: linear-gradient(135deg, rgba(255,255,255,0.1) 0%, rgba(255,255,255,0) 50%); pointer-events:none; }`
- `.c3-card:hover { background: rgba(15,15,15,0.6); border-color: rgba(34,211,238,0.7); transform: translateY(-12px) scale(1.01); }`
- `.c3-card-pro { background: linear-gradient(135deg, rgba(0,0,0,0.85), rgba(0,0,0,0.55)); }`
- `.c3-tier-small { font-size: 1.1rem; font-weight: 400; color: rgba(255,255,255,0.6); }`
- `.c3-tier-large { font-size: 2.8rem; font-weight: 500; letter-spacing: -0.02em; color: #fff; margin-top: 8px; }`
- `.c3-desc { font-size: 0.88rem; color: rgba(255,255,255,0.45); min-height: 3.2em; margin-top: 16px; margin-bottom: 40px; line-height: 1.5; }`
- `.c3-list li { display:flex; align-items:flex-start; gap: 14px; font-size: 0.92rem; color: rgba(255,255,255,0.8); margin-bottom: 18px; line-height: 1.4; }`
- `.c3-check { width:28px; height:28px; border-radius:50%; background: rgba(255,255,255,0.15); display:inline-flex; align-items:center; justify-content:center; flex-shrink:0; }`
- `.c3-btn { background:#fff; color:#000; padding: 10px 32px; border-radius: 100px; font-weight:600; font-size: 0.88rem; margin-top:auto; border:none; cursor:pointer; align-self:center; transition: all 0.3s cubic-bezier(.22,1,.36,1); }`
- `.c3-btn:hover { background:#f5f5f5; transform:scale(1.02); box-shadow: 0 8px 24px rgba(255,255,255,0.15); }`
- `.c3-toggle-wrap { display:flex; align-items:center; justify-content:flex-end; gap:12px; width:100%; max-width:1100px; margin-top:32px; padding-right:20px; }`
- `.c3-toggle { width:52px; height:28px; background:#fff; border-radius:100px; position:relative; cursor:pointer; border:none; transition: background 0.3s cubic-bezier(.4,0,.2,1); padding:0; }`
- `.c3-toggle-knob { width:20px; height:20px; background:#000; border-radius:50%; position:absolute; top:4px; left:4px; transition: all 0.3s cubic-bezier(.4,0,.2,1); }`
- `.c3-toggle.active { background: rgba(255,255,255,0.2); }`
- `.c3-toggle.active .c3-toggle-knob { transform: translateX(24px); background:#fff; }`
- Media query `(max-width:1024px)`: `.c3-watermark-main { font-size: 3.5rem; filter:none; }`, `.c3-watermark-line-2 { background:none; -webkit-text-fill-color:#00d2ff; color:#00d2ff; }`, `.c3-grid` becomes horizontal scroll-snap flex (`display:flex; overflow-x:auto; scroll-snap-type:x mandatory; transform:none; width:100vw; padding:0 20px; gap:16px; scrollbar-width:none`), cards `flex: 0 0 320px; scroll-snap-align:center`, `.c3-grid::-webkit-scrollbar{display:none}`, `.c3-toggle-wrap { justify-content:center; padding-right:0; }`.

## Section 9 — FinalCTA

`max-w-6xl mx-auto px-6 py-20 md:py-32`. Motion `liquid-glass relative overflow-hidden rounded-3xl px-8 py-16 md:py-24 text-center`. Radial glow overlay: `radial-gradient(600px circle at 50% 0%, rgba(255,255,255,0.15), transparent 70%)` at opacity 0.3.
- h2 `text-4xl md:text-6xl font-semibold tracking-tight leading-[1.02]`: "Close the tabs." / "Open your day.".
- Paragraph `mt-6 text-white/60 max-w-md mx-auto text-sm leading-[1.6]`: "Join thousands of builders, founders, and operators who treat email like a tool — not an obligation."
- Buttons: `<AppleButton label="Download Aura" />` and `rounded-full border border-white/15 text-white text-sm font-medium px-5 py-3 hover:bg-white/5` "Talk to sales" + ChevronRight.


Reproduce exactly — fonts, gradient stops, noise filters, copy strings, animation delays, and the CloudFront video URL `https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260508_064122_c4750c0e-7476-4b44-94a2-a85a65c63bf2.mp4`.

Acreage Farming 首屏

No.1408 · 前端开发 · 社区/原生 · 来源：MotionSites (MIT) · EN 原文

Build a full-page premium agricultural website called "Acreage Farming
" using React + Tailwind CSS v4.
Use Playfair Display (serif) for headings and DM Sans for body text. Import both from Google Fonts.

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
COLOR SYSTEM
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
- Background: #f5f0e8 (warm cream)
- Primary Dark: #0d1f0e (deep forest green)
- Mid Green: #2d5a30
- Accent: #7dc47f (light green)
- Gold: #c9a84c
- Text Muted: #5a6b5c

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
SECTION 1 — FIXED NAVIGATION
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
Transparent navbar with backdrop-blur. Left: logo "Acreage Farming
" in serif font.
Center: nav links (About, Services, Portfolio, Events, Blog).
Right: green CTA button "Get Started".
On scroll, add dark background with smooth transition.

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
SECTION 2 — HERO (100vh) WITH BACKGROUND VIDEO
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
IMPORTANT: Use a looping MP4 video as the full-screen hero background (NOT a static image).

Video URL:
https://cdn.pixabay.com/video/2025/01/22/254016_large.mp4

HTML structure:
<section style="position:relative; height:100vh; overflow:hidden;">
<video autoplay muted loop playsinline
style="position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;">
<source src="https://cdn.pixabay.com/video/2025/01/22/254016_large.mp4" type="video/mp4" />
</video>
<div class="overlay" style="position:absolute;inset:0;z-index:1;
background:linear-gradient(to top,rgba(13,31,14,0.95) 0%,rgba(13,31,14,0.35) 60%,transparent 100%);" />
<div class="content" style="position:relative;z-index:2; ... ">
<!-- hero text here -->
</div>
</section>

Content layout:
Left side:
- Eyebrow: "// Roots in Sustainability" (small, letter-spacing, accent green #7dc47f)
- Giant serif heading: "Acreage Farming
"
(font-size: clamp(5rem,10vw,9rem), font-weight:900, color:white)

Right side:
- Description text about sustainable agriculture (white, 0.75 opacity)
- Two floating badge pills:
"$14 Billion" → gold pill (#c9a84c background)
"126,000+" → glass pill (rgba white 0.1, backdrop-blur:10px)

Animations (staggered fadeUp on page load):
@keyframes fadeUp {
from { opacity:0; transform:translateY(30px) }
to { opacity:1; transform:translateY(0) }
}
- Eyebrow: animation: fadeUp 0.8s ease 0.2s forwards
- Heading: animation: fadeUp 0.8s ease 0.4s forwards
- Description: animation: fadeUp 0.8s ease 0.6s forwards
- Badges: animation: fadeUp 0.8s ease 0.8s forwards
(All start with opacity:0)

Bottom center: a thin vertical line (1px, 40px tall, green-to-transparent gradient)
with slow pulse animation as scroll indicator.

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
SECTION 3 — STATS BAR
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
Dark green background (#0d1f0e). 4-column grid:
- "40+" | "Harvesting Legacy"
- "190+" | "Topographies"
- "126,000+" | "Farmer Partners"
- "$14 Billion" | "Agricultural Output"

Each stat: large serif number in accent green, small uppercase label in muted white.
Dividers between columns.
Animate numbers counting up when scrolled into view using IntersectionObserver.

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
SECTION 4 — ABOUT
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
Cream background. Two-column layout.
Left: stacked images —
Main: https://images.unsplash.com/photo-1464226184884-fa280b87c399?w=800&q=80
Overlay (bottom-right, 6px cream border):
https://images.unsplash.com/photo-1574323347407-f5e1ad6d020b?w=400&q=80

Right:
- Eyebrow: "// Harvesting Legacy"
- Heading: "Rooted in Tradition, Growing for the Future"
- Body paragraph about sustainable agriculture
- Dark rounded CTA button "Explore Our Story →"

Fade-in-from-left / fade-in-from-right on scroll.

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
SECTION 5 — SERVICES "What We Do"
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
White background. Header row: left heading, right "All Services →" link.
3-column grid of tall image cards (aspect-ratio 3/4):

1. "Crop Consulting"
https://images.unsplash.com/photo-1625246333195-78d9c38ad449?w=600&q=80

2. "Field Management"
https://images.unsplash.com/photo-1592982537447-7440770cbfc9?w=600&q=80

3. "Yield Analysis"
https://images.unsplash.com/photo-1472141521881-95d0e87e2e76?w=600&q=80

Each card: image fills card, dark gradient overlay at bottom, category tag + title in white serif.
On hover: image scale(1.05), reveal short description with smooth opacity transition.

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
SECTION 6 — CINEMATIC VIDEO BREAK
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
Full-width 60vh ambient section using the SAME hero video as a second cinematic moment:
https://cdn.pixabay.com/video/2025/01/22/254016_large.mp4

This is a parallax-style video strip between Portfolio and Event sections.
Video plays silently in the background (no controls).
Darker overlay: rgba(13,31,14,0.65)

Center content (white, serif):
- Large italic quote: "Farming is not just work — it is a way of life."
- Small label below: "// Acreage Farming
Philosophy"

On scroll into viewport: fade in the quote text with a slow 1.2s ease transition.

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
SECTION 7 — PORTFOLIO
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
Background: #e8e0d0. Header: eyebrow + "Portfolio" heading + faded "//2023" serif watermark right.

CSS Grid (3 cols, 2 rows):
Large card (col 1, spans 2 rows):
https://images.unsplash.com/photo-1560493676-04071c5f467b?w=800&q=80
Top-right:
https://images.unsplash.com/photo-1416879595882-3373a0480b5b?w=600&q=80
Bottom-right:
https://images.unsplash.com/photo-1574943320219-553eb213f72d?w=600&q=80

Each item: rounded corners, overflow hidden.
Hover: scale(1.03) + caption overlay (location + project name in white).

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
SECTION 8 — EVENT CARD
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
White background. Single large 2-column card:

Left: https://images.unsplash.com/photo-1542601906990-b4d3fb778b09?w=800&q=80
Right: Dark green (#0d1f0e) panel:
- Eyebrow: "// Event"
- Date badge: "Jan 2024"
- Title: "The Sustainable Agriculture Innovation and Practices Symposium"
- Location + capacity in muted text
- Green CTA button: "Register Now →"

border-radius: 12px, overflow hidden, subtle box-shadow.

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
SECTION 9 — BLOG GRID
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
Cream background. Header: "Our Blog" + "View All →".
2x2 grid of white blog cards (rounded, hover lift shadow):

1. https://images.unsplash.com/photo-1523741543316-beb7fc7023d8?w=600&q=80
"Nurturing the Land for Future Generations"

2. https://images.unsplash.com/photo-1530836369250-ef72a3f5cda8?w=600&q=80
"The Journey to Organic: A Farmer's Perspective"

3. https://images.unsplash.com/photo-1574323347407-f5e1ad6d020b?w=600&q=80
"AgroTech Innovations Revolutionizing Modern Farming"

4. https://images.unsplash.com/photo-1607619056574-7b8d3ee536b2?w=600&q=80
"Breaking Stereotypes, Cultivating Success"

Each card: image top, category tag, serif title, excerpt, date + "Learn More →" footer.

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
SECTION 10 — WHY CHOOSE US
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
Dark green (#0d1f0e) background.
Centered heading: "Why Choose Acreage Farming
for Your Agricultural Journey?"

3-column glassmorphism cards (rgba white 0.05 bg, rgba green border):
🌿 "Quality Assurance" — ISO certified, rigorous quality checks
♻️ "Sustainability Focus" — Carbon neutral by 2030, eco-friendly methods
👤 "Expert Guidance" — 40+ years of agricultural expertise

Hover: card lifts, border brightens, subtle green glow.

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
SECTION 11 — CTA SECTION
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
Full-width with background image at 20% opacity on dark green:
https://images.unsplash.com/photo-1500382017468-9049fed747ef?w=1920&q=80

Center:
- Large serif heading: "Join the Agricultural Revolution"
(italic "Revolution" in accent green #7dc47f)
- Subtext paragraph
- Two buttons: filled "Get Started" + outline "Learn More"
- Floating animated leaf/particle effect using CSS keyframes

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
SECTION 12 — FOOTER
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
Dark green (#0d1f0e). Top accent border line.
4-column grid:
Col 1 (2x wide): Logo "Acreage Farming
" + tagline + social icons
Col 2: Company (About, Services, Portfolio, Careers)
Col 3: Resources (Blog, Events, Case Studies, FAQ)
Col 4: Contact info

Bottom row: copyright + large decorative serif watermark "Acreage Farming
"

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
GLOBAL ANIMATIONS
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
Apply to ALL sections using IntersectionObserver (threshold: 0.15):

CSS:
.fade-up {
opacity: 0;
transform: translateY(40px);
transition: opacity 0.7s ease, transform 0.7s ease;
}
.fade-up.visible {
opacity: 1;
transform: translateY(0);
}

- Stagger children: animation-delay increments of 0.1s
- About section: fade-in-from-left + fade-in-from-right
- Cards: scale-in from 0.95 to 1

RESPONSIVE: Fully mobile-responsive. Hamburger menu on mobile.
Single-column stacking for all grids below 768px.
Smooth scroll behavior on html element.
No placeholder lorem ipsum — use real agricultural copy throughout.

Slam Dunk 首屏

No.1409 · 前端开发 · 社区/原生 · 来源：MotionSites (MIT) · EN 原文

# Reconstructed Working Prompt: Slam Dunk

This is not the original paid prompt. It is a practical reconstruction from the public MotionSites title, category, and preview media metadata.

## Metadata

- Prompt ID: `slam-dunk-hero`
- Category: Hero Section
- Page type: landing
- Source status: paid_only
- Preview video:
- Preview image:

## Prompt

```
Build Prompt: Slam Dunk

Create a premium AI landing page inspired by the public MotionSites preview for "Slam Dunk". This is a reconstruction from public metadata and preview media, not the original paid prompt text.

Reference input
- Prompt ID: slam-dunk-hero
- Category: Hero Section
- Page type: landing
- Visual reference: No public media URL was exposed in the metadata. Reconstruct from the public card title, category, and source visual language.

Core direction
Build a polished, production-grade single-page website for Hero Section. The design should feel like a premium AI website prompt: cinematic composition, large confident typography, high contrast, strong negative space, glassy interface surfaces, careful micro-interactions, and an immediate first-viewport brand signal.

Tech stack
- React 18, Vite-compatible structure, Tailwind CSS, Framer Motion.
- Use lucide-react icons for interface symbols.
- Use CSS variables for the palette and reusable utility classes for glass, glow, grid, and text treatments.
- Keep the implementation responsive from 390px mobile to wide desktop.
- Avoid external paid assets. Use the preview URL above when provided, otherwise generate the background with CSS gradients, canvas particles, or simple CSS/HTML elements.

Visual system
- Brand name: Slam Dunk
- Palette: deep black, soft white, refined accent color, subtle gradients, glass highlights
- Scene/backdrop: cinematic abstract background, floating interface panels, strong editorial typography
- Typography: one expressive display face for headlines and a clean geometric sans for UI/body text.
- Layout language: full-bleed background, translucent nav, rounded glass panels, tight badge chips, precise icon buttons, and strong hierarchy.
- Motion language: blur-in headline words, staggered card entrance, slow parallax on the background, hover lift on cards, and cursor-responsive highlights for desktop only.

Copy
- H1: "Slam Dunk with premium motion and clarity"
- Subheading: "A polished MotionSites-style experience with high contrast, refined layout, and conversion-ready sections."
- Primary CTA: "Start now"
- Secondary CTA: "View preview"
- Badge: "Premium Hero Section"
- Proof labels: "Launch-ready", "Responsive", "Motion-first"

Structure
1. Full-viewport hero with navbar, badge, large editorial headline, subcopy, primary/secondary CTAs, and two proof cards.
2. Feature section with three glass cards, each with icon, tags, title, and short body copy.
3. Showcase section with overlapping product/brand panels and motion-led visual depth.
4. Conversion CTA/footer that repeats the offer with a more compact layout.

Component details
- Navbar: transparent/glass container, left-aligned wordmark "Slam Dunk", center nav links, right CTA button. On mobile collapse into a compact menu button.
- Hero content: max-width text block with badge, oversized H1, supporting paragraph, two CTAs, and a small proof row.
- Main visual: if a video URL is available, place it as a muted autoplay background or framed hero media with object-cover. Add a subtle overlay only when readability needs it. If no media is available, create a CSS/canvas composition matching the theme above.
- Cards: use 8px to 18px radii depending on density, thin borders, inner highlights, and readable contrast. Do not nest cards inside cards.
- Icons: use familiar lucide icons, not decorative SVG blobs.
- Footer/CTA: concise final action, compact brand mark, no marketing essay.

Animation details
- Headline words animate from blur(12px), opacity 0, y 28px to blur(0), opacity 1, y 0 with 70ms stagger.
- Background has slow parallax based on scroll and gentle idle movement.
- Cards enter with opacity/y stagger and hover with transform: translateY(-4px).
- Respect prefers-reduced-motion by disabling parallax and heavy transitions.

Responsive requirements
- Mobile: keep the H1 readable, stack CTAs, reduce decorative media density, and keep all text inside containers.
- Desktop: use a 12-column grid or strong split composition with generous margins.
- Ensure the first viewport clearly communicates the brand, category, offer, and primary action.

Avoid
- Do not make a generic SaaS template.
- Do not use placeholder lorem ipsum.
- Do not use giant purple-only gradients as the whole design.
- Do not obscure text with decorative media.
- Do not add irrelevant characters or random mascots.

Quality bar
The final result should look like a premium AI-generated website prompt: specific, visual, animated, responsive, and ready to paste into an AI website builder.
```

Wisa 太空首屏

No.1410 · 前端开发 · 社区/原生 · 来源：MotionSites (MIT) · EN 原文

# Reconstructed Working Prompt: WISA Space

This is not the original paid prompt. It is a practical reconstruction from the public MotionSites title, category, and preview media metadata.

## Metadata

- Prompt ID: `wisa-space-hero`
- Category: Hero Section
- Page type: hero
- Source status: paid_only
- Preview video:
- Preview image:

## Prompt

```
Build Prompt: WISA Space

Create a premium AI website hero section inspired by the public MotionSites preview for "WISA Space". This is a reconstruction from public metadata and preview media, not the original paid prompt text.

Reference input
- Prompt ID: wisa-space-hero
- Category: Hero Section
- Page type: hero
- Visual reference: No public media URL was exposed in the metadata. Reconstruct from the public card title, category, and source visual language.

Core direction
Build a polished, production-grade hero experience for space technology and future exploration. The design should feel like a premium AI website prompt: cinematic composition, large confident typography, high contrast, strong negative space, glassy interface surfaces, careful micro-interactions, and an immediate first-viewport brand signal.

Tech stack
- React 18, Vite-compatible structure, Tailwind CSS, Framer Motion.
- Use lucide-react icons for interface symbols.
- Use CSS variables for the palette and reusable utility classes for glass, glow, grid, and text treatments.
- Keep the implementation responsive from 390px mobile to wide desktop.
- Avoid external paid assets. Use the preview URL above when provided, otherwise generate the background with CSS gradients, canvas particles, or simple CSS/HTML elements.

Visual system
- Brand name: WISA Space
- Palette: black, starlight white, orbital blue, violet haze, solar orange highlights
- Scene/backdrop: full-bleed space footage, spacecraft silhouettes, orbital paths, nebula-like gradients
- Typography: one expressive display face for headlines and a clean geometric sans for UI/body text.
- Layout language: full-bleed background, translucent nav, rounded glass panels, tight badge chips, precise icon buttons, and strong hierarchy.
- Motion language: blur-in headline words, staggered card entrance, slow parallax on the background, hover lift on cards, and cursor-responsive highlights for desktop only.

Copy
- H1: "WISA Space takes the future beyond orbit"
- Subheading: "A cinematic space-tech landing page with deep contrast, elegant glass controls, and immersive scroll depth."
- Primary CTA: "Start now"
- Secondary CTA: "View preview"
- Badge: "Premium Hero Section"
- Proof labels: "Launch-ready", "Responsive", "Motion-first"

Structure
1. Single full-viewport hero with navbar, badge, large headline, subcopy, CTAs, and one visual proof row.
2. Optional below-fold teaser band visible at the bottom edge so the page does not feel like a static poster.

Component details
- Navbar: transparent/glass container, left-aligned wordmark "WISA Space", center nav links, right CTA button. On mobile collapse into a compact menu button.
- Hero content: max-width text block with badge, oversized H1, supporting paragraph, two CTAs, and a small proof row.
- Main visual: if a video URL is available, place it as a muted autoplay background or framed hero media with object-cover. Add a subtle overlay only when readability needs it. If no media is available, create a CSS/canvas composition matching the theme above.
- Cards: use 8px to 18px radii depending on density, thin borders, inner highlights, and readable contrast. Do not nest cards inside cards.
- Icons: use familiar lucide icons, not decorative SVG blobs.
- Footer/CTA: concise final action, compact brand mark, no marketing essay.

Animation details
- Headline words animate from blur(12px), opacity 0, y 28px to blur(0), opacity 1, y 0 with 70ms stagger.
- Background has slow parallax based on scroll and gentle idle movement.
- Cards enter with opacity/y stagger and hover with transform: translateY(-4px).
- Respect prefers-reduced-motion by disabling parallax and heavy transitions.

Responsive requirements
- Mobile: keep the H1 readable, stack CTAs, reduce decorative media density, and keep all text inside containers.
- Desktop: use a 12-column grid or strong split composition with generous margins.
- Ensure the first viewport clearly communicates the brand, category, offer, and primary action.

Avoid
- Do not make a generic SaaS template.
- Do not use placeholder lorem ipsum.
- Do not use giant purple-only gradients as the whole design.
- Do not obscure text with decorative media.
- Do not add irrelevant characters or random mascots.

Quality bar
The final result should look like a premium AI-generated website prompt: specific, visual, animated, responsive, and ready to paste into an AI website builder.
```

Sup Ledgerline Deep Teal Mint Fintech Startup 仪表盘首屏

No.1411 · 前端开发 · 社区/原生 · 来源：MotionSites (MIT) · EN 原文

{"summary": "A trustworthy fintech-startup landing page in a calm deep-teal world with a mint accent and cream text. Top-down: a sticky blurred teal nav, a split hero (left: a NEW-yield pill, a big 'Finance built for the speed of a startup' headline with the last word in mint, sub-copy, dual CTAs and a trust row; right: a glassy product dashboard mock showing an operating-account balance, a mint area chart and auto-categorized transactions, with a tilted virtual-card chip floating off the corner), a centered 'trusted by' compliance logo strip, a bento feature grid mixing wide and tall cards with inline product mocks (send-money, receipt-matching, per-card controls, accounting sync), a stats / traction band of four big mint figures plus a pull-quote, a security & compliance section with a certifications badge grid (SOC 2 / PCI / GDPR / ISO), a glowing centered CTA, and a four-column footer. A soft mint radial 'grain' glow sits behind the hero, traction band and CTA.", "style": {"description": "Calm, premium fintech aesthetic built on deep teal surfaces, a single mint accent, and warm cream text. The whole page lives on teal-900 #0f3d3e with darker teal-950 #0a2a2b panels and lighter teal-800 #134847 / teal-700 #1b5a58 card fills; the one accent is mint #4fd1c5 (used for the logo mark, primary buttons, the chart line, positive numbers, check marks, eyebrows and tinted icon tiles), and all text is cream #eef5f0 at varying opacities. Surfaces read as soft frosted glass via thin inset cream hairline 'rings' (inset 0 0 0 1px rgba(238,245,240,0.08)) and deep ambient drop shadows rather than hard borders. A reusable mint 'grain' backdrop (layered radial mint glows + a subtle top vertical wash) sits behind the hero, traction band and CTA. Trust, calm, and clarity over flash: lots of breathing room, tabular-numeric figures for money, gentle hover tints, no harsh contrast.", "prompt": "Build a calm, trustworthy fintech look. Background is teal-900 #0f3d3e; panels and the darkest surfaces use teal-950 #0a2a2b, card fills use teal-800 #134847 and the floating card chip uses a teal-700 #1b5a58 -> teal-800 gradient. The single accent is mint #4fd1c5: use it for the logo mark, primary pill buttons (mint fill, teal-950 #0a2a2b text), the area-chart stroke and gradient, positive/credit amounts, check marks, eyebrow labels, tinted icon tiles (mint at ~12-15% opacity behind a mint glyph) and 'Live' status dots. All text is cream #eef5f0: headings at full strength, body at ~65-70% (cream/65-70), muted meta at ~60%. Treat every surface as soft frosted glass: instead of hard borders use a 1px inset cream hairline ring `box-shadow: inset 0 0 0 1px rgba(238,245,240,0.08)` plus deep ambient shadows (cards: 0 24px 60px -28px rgba(0,0,0,0.7); the dashboard mock: 0 40px 90px -40px rgba(0,0,0,0.75)); primary buttons get a soft mint glow `0 10px 30px -10px rgba(79,209,197,0.5)`. Reusable 'grain' backdrop = layered radial gradients: a strong mint bloom rgba(79,209,197,0.18) at 82% -12%, a faint mint bloom rgba(79,209,197,0.07) at 6% 4%, over a subtle top-down teal wash; reuse it behind the hero, the traction band (at ~70% opacity) and the CTA (plus a big mint blur orb). Typography: Inter only (with optical sizing, weights 400-800; enable ss01/cv11), very tight tracking on display headings (letter-spacing ~ -0.045em) and generous line-height on body; money and stats use tabular-nums. Radii: rounded-2xl cards, rounded-xl inner mocks, rounded-full pills. Mood = composed, premium, reassuring; mint is the only color that ever 'pops'."}, "layout_and_structure": {"description": "A single frameless, fully responsive web page (not a fixed-size mockup), centered in a max-w-7xl container with px-6/lg:px-8 gutters. Vertical flow: sticky blurred nav -> split hero (copy left, dashboard mock right) -> centered 'trusted by' compliance strip -> a bento feature grid (wide + tall cards with inline mocks) -> a stats/traction band (4 figures + pull-quote) -> a security & compliance section (copy + certifications badge grid) -> a glowing centered CTA -> a 4-column footer. The hero is the centerpiece: a two-column grid (lg:[1.04fr_1fr]) that stacks on mobile, with the product dashboard mock and a tilted floating virtual-card chip on the right. The nav stays pinned and frosted while the mint grain sections scroll beneath. Responsive: the hero, feature bento and traction grids collapse to one column, the cert grid goes 2->1, the floating card chip and some trust items hide on small screens, and headline sizes clamp down.", "prompts": [{"part": "Sticky nav", "prompt": "A fixed top-0 full-width header with a frosted teal bar: background teal-900/85 (#0f3d3e at 85%), backdrop-blur-md, 1px bottom border via cream/10. Inside a max-w-7xl row (h-16, px-6/lg:px-8): left = a mint rounded-lg logo square (bg mint, teal-950 icon, a ph:wave-sine glyph) + 'Ledgerline' wordmark in bold tight tracking, followed (hidden on mobile) by text links Platform / Security / Customers / Pricing / Docs in 13.5px cream/70 that brighten to cream on hover; right = a ghost 'Sign in' text link (hidden on small) and a mint rounded-full pill button 'Open an account' with a trailing arrow icon (mint fill, teal-950 text)."}, {"part": "Hero (split)", "prompt": "A two-column hero (lg grid-cols-[1.04fr_1fr], gap-12) on the mint 'grain' backdrop, pt-16/lg:pt-24 pb-16/lg:pb-24, stacking on mobile. LEFT copy: a ring-outlined glass pill containing a small mint 'NEW' chip + 'Yield on idle cash, now at 4.18% APY'; a huge Inter-extrabold headline 'Finance built for / the speed of a / startup.' (clamp ~42px mobile -> ~60px desktop, leading ~1.04, tracking -0.045em) where the final word 'startup.' is mint; a ~16px cream/70 sub-paragraph (max-w-md) about corporate cards, banking and spend controls in one account; a button row with a mint pill 'Open an account' (with arrow, mint glow) and a glass ring 'See it in motion' (with a mint play-circle icon); and a trust row of three small cream/70 items with mint icons ('FDIC-insured to $3M', 'Live in 10 minutes', 'No monthly fees', the last hidden on small). RIGHT: the product dashboard mock (see component) with a soft mint blur halo behind it and a tilted floating virtual-card chip off the bottom-left corner."}, {"part": "Trusted-by compliance strip", "prompt": "A full-width band with top+bottom cream/10 borders and a teal-950/40 fill. Centered: a thin cream gradient rule, then 'Trusted by 26,000+ ambitious teams' in 12px uppercase cream/65 with 0.18em tracking, then a wrapped, centered row of ~6 invented company wordmarks at cream/70 (each a Phosphor outline icon — orbit, hexagon, triangle, square, diamonds-four, circle-half — plus a 16px semibold name; the last hidden below md)."}, {"part": "Feature bento grid", "prompt": "A features section (py-20/lg:py-28). Header (max-w-2xl): a mint 13px uppercase eyebrow 'The account that does the busywork', an Inter-extrabold 'One place for every dollar you move.' heading, and a cream/65 intro. Below, a bento grid (md:2 / lg:3, gap-5, items-stretch) of teal-800/60 glass cards (ringline + softcard shadow): (1) a WIDE card (md/lg col-span-2) 'Pay anyone, in seconds' with a mint lightning icon tile and an inline 'outgoing wire' mock (an Approved status row, a To/Amount row with a mint arrow, a mint progress bar at 88%, 'arrives in ~8 seconds'); (2) 'Receipts that catch themselves' with a mint receipt icon and a '412 matched today / 0 needing review' mini-stat with a mint check tile; (3) 'Controls, per card' with a mint sliders icon and two limit rows (SaaS budget $5,000/mo, Travel Auto-approve in mint); (4) a WIDE card (md col-span-2) 'Close the books in a day, not a week' with a mint books icon and a row of four integration chips (QuickBooks, Xero, NetSuite, Slack alerts), each a glass pill with a mint plugs-connected icon."}, {"part": "Stats / traction band", "prompt": "A bordered band (top+bottom cream/10) on teal-950/55 with the mint grain at ~70% opacity behind it. Inside max-w-7xl, a 2-col grid (lg:[0.9fr_1.1fr]): LEFT = a mint eyebrow 'Traction', an extrabold 'Founders move faster on Ledgerline.' heading, a cream/65 line, and a glass ring 'Read the customer stories' link; RIGHT = a 2x2 grid of stat cells separated by cream/10 hairlines (teal-900 cells), each a big tabular-num mint-or-cream figure with a small unit and a cream/65 caption: '$14B' (mint) processed for startups, '11 hrs' saved on close monthly, '4.18%' (mint) APY on idle cash, '99.99%' uptime. Below, a centered max-w-3xl pull-quote: a big Inter-semibold blockquote with mint opening/closing quote marks about switching the whole company over in an afternoon, and a figcaption with a mint avatar chip (initials), a bold name and a cream/70 role."}, {"part": "Security & compliance", "prompt": "A two-column section (lg grid-cols-[1fr_1.05fr], py-20/lg:py-28). LEFT copy: a mint eyebrow 'Security & compliance', an extrabold 'Bank-grade by default, audited continuously.' heading, a cream/65 paragraph, and a 3-item list (mint lock-key / fingerprint / bank icons) covering AES-256 encryption, SSO/SCIM/roles, and FDIC insurance to $3M. RIGHT: a teal-800/50 glass card titled 'Certifications' with a mint 'All current' seal pill, then a 2x2 grid of cert tiles (each a teal-950/60 glass row with a mint tinted icon tile + label + sub): 'SOC 2 Type II / Renewed 2026', 'PCI DSS / Level 1', 'GDPR / EU & UK ready', 'ISO 27001 / Certified', and a full-width 'Trust center' row beneath with a mint file-lock icon and an arrow."}, {"part": "CTA + footer", "prompt": "A full-bleed CTA on teal-950 with the mint grain plus a large mint blur orb glowing from the bottom center. Centered max-w-2xl: a glass ring pill 'Approved in minutes, not weeks' (mint clock icon), an extrabold two-line headline 'Give your money the account it deserves.', a cream/70 paragraph, a button row (mint pill 'Open an account' with arrow + glow, glass ring 'Talk to sales'), and a cream/65 'Member FDIC' disclosure line. Then a footer on teal-950 (top cream/10 border): a 4-column grid (md:[1.4fr_1fr_1fr_1fr]) with a wide brand column (mint logo mark + 'Ledgerline', a short cream/70 description, and X / LinkedIn / GitHub glass icon buttons that turn mint on hover) plus three link columns (Product, Company, Trust) with 12px uppercase cream/65 headings and cream/65 links; a top-bordered bottom bar splits the © + 'Member FDIC' line from Privacy / Terms / Disclosures links."}]}, "special_ui_components": [{"component": "Product dashboard mock", "description": "The hero's right-side product proof: a glassy operating-account dashboard with a balance, a mint area chart and auto-categorized transactions, sitting on a soft mint halo.", "prompt": "Build a rounded-2xl teal-950/80 card with the inset cream hairline ring + a deep dash-shadow, and place a blurred mint glow (-inset-6, bg mint/10, blur-3xl) behind it. Inside, top-down: (1) a top bar (border-b cream/10) with a mint wallet icon tile, an 'Operating account' label + masked number '•••• 4471 · USD', and a mint 'Live' status pill with a dot; (2) a balance block — an uppercase cream/60 'Available balance' label, a big tabular-num '$2,841,205.60' (the cents in cream/40) with a mint '+6.4%' trend chip; (3) a ~68px inline SVG area chart with a mint stroke (#4fd1c5, 2px, round caps) over a vertical mint gradient fill (0.32 -> 0 opacity); (4) three transaction rows (hover tint cream/4) each with a square icon tile, a merchant + auto-category caption, and a right-aligned tabular-num amount — AWS -$8,420.00, a mint Stripe payout +$41,910.18 (credit in mint with a mint down-left arrow tile), United Airlines -$1,204.40."}, {"component": "Floating virtual-card chip", "description": "A tilted mini credit-card that floats off the dashboard mock's bottom-left corner to sell the 'cards' product.", "prompt": "An absolutely-positioned ~214px card (hidden on small) at -bottom-10 -left-7/lg:-left-12, rotated -6deg, z-10, filled with a teal-700 -> teal-800 gradient and the inset cream ring + softcard shadow. Inside: a 'Ledgerline' label + a mint ph:wave-sine glyph on the top row, a spaced masked number '•••• •••• 4471' in tabular-nums, and a bottom row with 'VALID 08/29' and a mint 'VIRTUAL' label."}, {"component": "Frosted teal glass surface", "description": "The repeating card/pill/row treatment — frosted teal with a thin cream inset hairline ring instead of a hard border.", "prompt": "Compose surfaces from a teal fill (teal-800/60 for feature cards, teal-950/60-70 for inner mocks/rows, teal-950/80 for the dashboard) plus `box-shadow: inset 0 0 0 1px rgba(238,245,240,0.08)` as the 'ringline' and a deep ambient drop shadow ('softcard' = 0 1px 0 rgba(238,245,240,0.06) inset, 0 24px 60px -28px rgba(0,0,0,0.7)). Use rounded-2xl for cards, rounded-xl for inner mocks, rounded-lg/full for pills and chips, with gentle cream/4 -> cream/8 hover tints."}, {"component": "Mint grain backdrop", "description": "The soft multi-bloom mint glow field reused behind the hero, traction band and CTA.", "prompt": "A `.grain` layer = background-image of stacked radial-gradients: rgba(79,209,197,0.18) at 82% -12% (size 120% 90%), rgba(79,209,197,0.07) at 6% 4% (90% 70%), over a linear-gradient top wash from rgba(10,42,43,0.55) -> transparent. Reuse it absolutely-positioned behind the hero, at ~70% opacity behind the traction band, and on the CTA together with a large mint/12 blurred orb (h-72 w-[680px], blur-[120px]) glowing up from the bottom center."}, {"component": "Mint pill button + glow", "description": "The signature primary CTA reused in the nav, hero, traction and CTA sections.", "prompt": "A rounded-full button filled with mint #4fd1c5 and teal-950 #0a2a2b text, semibold, with a soft mint glow `box-shadow: 0 10px 30px -10px rgba(79,209,197,0.5)`; brighten slightly (mint/90) on hover, usually with a trailing ph:arrow-right-bold icon. Pair it with a 'glass ring' secondary button: transparent cream/4 fill + the inset cream hairline ring, cream text, cream/8 on hover."}], "special_notes": "Frameless, fully responsive web page (not a fixed-size artboard); dark/teal color-scheme only. Built with Tailwind (CDN) + a small custom-CSS layer for the grain backdrop, the inset-ring 'ringline'/'softcard'/'dash-shadow' shadows, the mint glow and tabular-nums; typography is Inter only (optical-sizing 14..32, ss01/cv11, weights 400-800) from Google Fonts, with Iconify Phosphor icons. There is no JS — every 'interactive' element (status pills, progress bar, togg'd states) is static. Key responsive behavior: the hero and traction grids collapse to one column, the feature bento wide cards drop their col-span, the certifications grid goes 2->1, the floating virtual card and the third hero trust item hide on small screens, and the nav center links collapse on mobile while the bar stays sticky/frosted. To rebrand, keep the frosted-teal-glass + single-mint-accent system and the grain backdrop, and swap the deep-teal surface ramp (#0a2a2b/#0f3d3e/#134847/#1b5a58) and the mint accent #4fd1c5."}

Ms 3D Jack 作品集首屏

No.1412 · 前端开发 · 社区/原生 · 来源：MotionSites (MIT) · EN 原文

Build a 3D Creator portfolio landing page for "Jack" using React, TypeScript, Tailwind CSS, Framer Motion, and Lucide React. The page has a dark theme (#0C0C0C background) with the font Kanit (Google Fonts, weights 300-900). The page title is "Jack -- 3D Creator".

GLOBAL STYLES
Background: #0C0C0C on html, body, #root, and the main wrapper
Font family: 'Kanit', sans-serif
Global reset: box-sizing border-box, margin 0, padding 0
CSS class .hero-heading: gradient text using background: linear-gradient(180deg, #646973 0%, #BBCCD7 100%) with -webkit-background-clip: text and -webkit-text-fill-color: transparent
Main wrapper has overflowX: 'clip'
SECTION ORDER
HeroSection
MarqueeSection
AboutSection
ServicesSection
ProjectsSection
1. HERO SECTION
Full viewport height (h-screen), flex column layout with overflowX: clip.

Navbar: Horizontal nav bar with 4 links -- "About", "Price", "Projects", "Contact" -- evenly spaced with justify-between. Text color #D7E2EA, font-medium, uppercase, tracking-wider. Sizes: text-sm md:text-lg lg:text-[1.4rem]. Padding: px-6 md:px-10 pt-6 md:pt-8. Hover: opacity 70% with 200ms transition.

Hero Heading: Massive h1 with text "Hi, i'm jack" (lowercase "i", curly apostrophe via &apos;). Uses the .hero-heading gradient text class. Font-black, uppercase, tracking-tight, leading-none, whitespace-nowrap, w-full. Font sizes: text-[14vw] sm:text-[15vw] md:text-[16vw] lg:text-[17.5vw]. Margin top: mt-6 sm:mt-4 md:-mt-5. Wrapped in overflow-hidden container.

Bottom bar: Flexbox justify-between items-end with pb-7 sm:pb-8 md:pb-10:

Left: paragraph text "a 3d creator driven by crafting striking and unforgettable projects", color #D7E2EA, font-light, uppercase, tracking-wide, leading-snug. Font size: clamp(0.75rem, 1.4vw, 1.5rem). Max-width: max-w-[160px] sm:max-w-[220px] md:max-w-[260px].
Right: ContactButton component (see below)
Hero Portrait: Centered absolutely. Uses a Magnet component (mouse-following magnetic effect) wrapping an image. Image URL: https://shrug-person-78902957.figma.site/_components/v2/d24c01ad3a56fc65e942a1f501eb73db42d7cf9a/Rectangle_40443.81459862.png. Magnet settings: padding 150, strength 3, activeTransition "transform 0.3s ease-out", inactiveTransition "transform 0.6s ease-in-out". Positioning: absolute left-1/2 -translate-x-1/2 z-10. Width: w-[280px] sm:w-[360px] md:w-[440px] lg:w-[520px]. On mobile: top-1/2 -translate-y-1/2. On sm+: sm:top-auto sm:translate-y-0 sm:bottom-0.

FadeIn animations: Navbar fades in with delay 0, y -20. Heading: delay 0.15, y 40. Left text: delay 0.35, y 20. Contact button: delay 0.5, y 20. Portrait: delay 0.6, y 30.

2. MARQUEE SECTION
Two rows of images that scroll horizontally based on page scroll position. Background #0C0C0C. Padding: pt-24 sm:pt-32 md:pt-40 pb-10.

21 GIF images from motionsites.ai (exact URLs):


https://motionsites.ai/assets/hero-space-voyage-preview-eECLH3Yc.gif
https://motionsites.ai/assets/hero-codenest-preview-Cgppc2qV.gif
https://motionsites.ai/assets/hero-vex-ventures-preview-BczMFIiw.gif
https://motionsites.ai/assets/hero-stellar-ai-v2-preview-DjvxjG3C.gif
https://motionsites.ai/assets/hero-asme-preview-B_nGDnTP.gif
https://motionsites.ai/assets/hero-transform-data-preview-Cx5OU29N.gif
https://motionsites.ai/assets/hero-vitara-preview-Cjz2QYyU.gif
https://motionsites.ai/assets/hero-terra-preview-BFjrCr7T.gif
https://motionsites.ai/assets/hero-skyelite-preview-DHaZIgUv.gif
https://motionsites.ai/assets/hero-aethera-preview-DknSlcTa.gif
https://motionsites.ai/assets/hero-designpro-preview-D8c5_een.gif
https://motionsites.ai/assets/hero-stellar-ai-preview-D3HL6bw1.gif
https://motionsites.ai/assets/hero-xportfolio-preview-D4A8maiC.gif
https://motionsites.ai/assets/hero-orbit-web3-preview-BXt4OttD.gif
https://motionsites.ai/assets/hero-nexora-preview-cx5HmUgo.gif
https://motionsites.ai/assets/hero-evr-ventures-preview-DZxeVFEX.gif
https://motionsites.ai/assets/hero-planet-orbit-preview-DWAP8Z1P.gif
https://motionsites.ai/assets/hero-new-era-preview-CocuDUm9.gif
https://motionsites.ai/assets/hero-wealth-preview-B70idl_u.gif
https://motionsites.ai/assets/hero-luminex-preview-CxOP7ce6.gif
https://motionsites.ai/assets/hero-celestia-preview-0yO3jXO8.gif
Row 1: first 11 images, tripled for seamless scrolling. Moves RIGHT on scroll (translateX(offset - 200)).
Row 2: remaining 10 images, tripled. Moves LEFT on scroll (translateX(-(offset - 200))).
Scroll offset calculated as: (window.scrollY - sectionTop + window.innerHeight) * 0.3
Each image tile: 420px x 270px, rounded-2xl, object-cover, lazy loaded.
Gap between tiles: gap-3. Gap between rows: gap-3.
Uses willChange: 'transform' for performance. Scroll listener is passive.
3. ABOUT SECTION
Full-height centered section with min-h-screen, padding px-5 sm:px-8 md:px-10 py-20.

Four decorative 3D images positioned absolutely in corners:

Top-left: Moon icon -- https://shrug-person-78902957.figma.site/_components/v2/ebb2b8f25d8e24d5f0a5ca8af4c950de81aa2fd7/moon_icon.11395d36.png -- w-[120px] sm:w-[160px] md:w-[210px], positioned top-[4%] left-[1%] sm:left-[2%] md:left-[4%]. FadeIn: delay 0.1, x -80, y 0, duration 0.9.
Bottom-left: 3D object -- https://shrug-person-78902957.figma.site/_components/v2/ebb2b8f25d8e24d5f0a5ca8af4c950de81aa2fd7/p59_1.4659672e.png -- w-[100px] sm:w-[140px] md:w-[180px], positioned bottom-[8%] left-[3%] sm:left-[6%] md:left-[10%]. FadeIn: delay 0.25, x -80, y 0, duration 0.9.
Top-right: Lego icon -- https://shrug-person-78902957.figma.site/_components/v2/ebb2b8f25d8e24d5f0a5ca8af4c950de81aa2fd7/lego_icon-1.703bb594.png -- w-[120px] sm:w-[160px] md:w-[210px], positioned top-[4%] right-[1%] sm:right-[2%] md:right-[4%]. FadeIn: delay 0.15, x 80, y 0, duration 0.9.
Bottom-right: 3D group -- https://shrug-person-78902957.figma.site/_components/v2/ebb2b8f25d8e24d5f0a5ca8af4c950de81aa2fd7/Group_134-1.2e04f3ce.png -- w-[130px] sm:w-[170px] md:w-[220px], positioned bottom-[8%] right-[3%] sm:right-[6%] md:right-[10%]. FadeIn: delay 0.3, x 80, y 0, duration 0.9.
Heading: "About me" using .hero-heading gradient text, font-black, uppercase, leading-none, tracking-tight, centered. Font size: clamp(3rem, 12vw, 160px). FadeIn: delay 0, y 40.

Animated paragraph: Uses a character-by-character scroll-driven opacity animation. Text: "With more than five years of experience in design, i focus on branding, web design, and user experience, i truly enjoy working with businesses that aim to stand out and present their best image. Let's build something incredible together!" -- color #D7E2EA, font-medium, centered, leading-relaxed, max-w-[560px], font size clamp(1rem, 2vw, 1.35rem). Each character animates from opacity 0.2 to 1 based on scroll progress, with scroll offset ['start 0.8', 'end 0.2'].

Contact button below the text block. Gap between heading/text: gap-10 sm:gap-14 md:gap-16. Gap between text block and button: gap-16 sm:gap-20 md:gap-24.

4. SERVICES SECTION
White background (#FFFFFF), with rounded-t-[40px] sm:rounded-t-[50px] md:rounded-t-[60px] top corners. Padding: px-5 sm:px-8 md:px-10 py-20 sm:py-24 md:py-32.

Heading: "Services" in #0C0C0C, font-black, uppercase, centered, font size clamp(3rem, 12vw, 160px). Margin bottom: mb-16 sm:mb-20 md:mb-28.

5 service items in a vertical list, max-w-5xl, centered:

01 - 3D Modeling: "Creation of detailed objects, characters, or environments tailored to specific client needs, ideal for games, products, and visualizations."
02 - Rendering: "High-quality, photorealistic renders that showcase designs with custom lighting, textures, and materials to bring concepts to life."
03 - Motion Design: "Dynamic animations and motion graphics that add energy and storytelling to brands, products, and digital experiences."
04 - Branding: "Crafting cohesive visual identities -- from logos to full brand systems -- that communicate a clear and memorable presence."
05 - Web Design: "Designing clean, modern, and conversion-focused websites with attention to layout, typography, and user experience."
Each item: horizontal layout with number (font-black, font size clamp(3rem, 10vw, 140px), color #0C0C0C) on the left and name + description stacked vertically on the right. Name: font-medium, uppercase, font size clamp(1rem, 2.2vw, 2.1rem). Description: font-light, leading-relaxed, max-w-2xl, font size clamp(0.85rem, 1.6vw, 1.25rem), opacity 0.6. Items separated by 1px borders (rgba(12, 12, 12, 0.15)). Padding: py-8 sm:py-10 md:py-12. Staggered FadeIn: each item delays by i * 0.1.

5. PROJECTS SECTION
Dark background (#0C0C0C), rounded top corners rounded-t-[40px] sm:rounded-t-[50px] md:rounded-t-[60px], pulled up with -mt-10 sm:-mt-12 md:-mt-14, z-10.

Heading: "Project" (singular) using .hero-heading gradient, same styling as other headings.

3 sticky-stacking project cards that scale down as you scroll past them (card stacking effect using Framer Motion useScroll and useTransform). Each card is sticky top-24 md:top-32 inside an h-[85vh] container.

Scale calculation: targetScale = 1 - (totalCards - 1 - index) * 0.03. Each card offset by top: ${index * 28}px.

Each card has: rounded-[40px] sm:rounded-[50px] md:rounded-[60px], border-2 border-[#D7E2EA], background #0C0C0C, padding p-4 sm:p-6 md:p-8.

Card layout:

Top row: Number (huge, same style as services), category label, project name, and a "Live Project" ghost button (rounded-full, border-2 #D7E2EA, uppercase, tracking-widest).
Bottom row: Two-column image grid -- left column (40% width) has 2 stacked images, right column (60%) has 1 tall image. All images have heavy border radius rounded-[40px] sm:rounded-[50px] md:rounded-[60px]. Left top image height: clamp(130px, 16vw, 230px). Left bottom image height: clamp(160px, 22vw, 340px).
Project data with CloudFront image URLs:

Project 01 - "Nextlevel Studio" (Client):

Col1 image 1: https://images.higgs.ai/?default=1&output=webp&url=https%3A%2F%2Fd8j0ntlcm91z4.cloudfront.net%2Fuser_38xzZboKViGWJOttwIXH07lWA1P%2Fhf_20260412_055344_5eff02e0-87a5-41ce-b64f-eb08da8f33db.png&w=1280&q=85
Col1 image 2: https://images.higgs.ai/?default=1&output=webp&url=https%3A%2F%2Fd8j0ntlcm91z4.cloudfront.net%2Fuser_38xzZboKViGWJOttwIXH07lWA1P%2Fhf_20260412_055431_11d841fd-8b41-46a5-82e4-b04f2407a7d8.png&w=1280&q=85
Col2 image: https://images.higgs.ai/?default=1&output=webp&url=https%3A%2F%2Fd8j0ntlcm91z4.cloudfront.net%2Fuser_38xzZboKViGWJOttwIXH07lWA1P%2Fhf_20260412_055451_e317bf2d-28d4-48cc-86b0-6f72f25b6327.png&w=1280&q=85
Project 02 - "Aura Brand Identity" (Personal):

Col1 image 1: https://images.higgs.ai/?default=1&output=webp&url=https%3A%2F%2Fd8j0ntlcm91z4.cloudfront.net%2Fuser_38xzZboKViGWJOttwIXH07lWA1P%2Fhf_20260412_055654_911201c5-36d9-4bc6-bac7-331adfce159f.png&w=1280&q=85
Col1 image 2: https://images.higgs.ai/?default=1&output=webp&url=https%3A%2F%2Fd8j0ntlcm91z4.cloudfront.net%2Fuser_38xzZboKViGWJOttwIXH07lWA1P%2Fhf_20260412_055723_5ceda0b8-d9c2-4665-b2e3-83ba19ba76d1.png&w=1280&q=85
Col2 image: https://images.higgs.ai/?default=1&output=webp&url=https%3A%2F%2Fd8j0ntlcm91z4.cloudfront.net%2Fuser_38xzZboKViGWJOttwIXH07lWA1P%2Fhf_20260412_055753_adc5dcbd-a8e6-49c0-b43a-9b030d835cea.png&w=1280&q=85
Project 03 - "Solaris Digital" (Client):

Col1 image 1: https://images.higgs.ai/?default=1&output=webp&url=https%3A%2F%2Fd8j0ntlcm91z4.cloudfront.net%2Fuser_38xzZboKViGWJOttwIXH07lWA1P%2Fhf_20260412_055759_963cfb0b-4bd1-4b0f-9d0a-09bd6cf95b2f.png&w=1280&q=85
Col1 image 2: https://images.higgs.ai/?default=1&output=webp&url=https%3A%2F%2Fd8j0ntlcm91z4.cloudfront.net%2Fuser_38xzZboKViGWJOttwIXH07lWA1P%2Fhf_20260412_060108_438f781a-9846-4dcc-89ab-c4e6cb830f5b.png&w=1280&q=85
Col2 image: https://images.higgs.ai/?default=1&output=webp&url=https%3A%2F%2Fd8j0ntlcm91z4.cloudfront.net%2Fuser_38xzZboKViGWJOttwIXH07lWA1P%2Fhf_20260412_055818_9d062121-ad7e-46b9-999a-1a6a692ef1ee.png&w=1280&q=85
REUSABLE COMPONENTS
ContactButton: Rounded-full pill button with gradient background linear-gradient(123deg, #18011F 7%, #B600A8 37%, #7621B0 72%, #BE4C00 100%), inner box-shadow 0px 4px 4px rgba(181, 1, 167, 0.25), 4px 4px 12px #7721B1 inset, white 2px outline with -3px offset. Text: white, font-medium, uppercase, tracking-widest. Sizes: px-8 py-3 sm:px-10 sm:py-3.5 md:px-12 md:py-4, text text-xs sm:text-sm md:text-base. Label: "Contact Me".

LiveProjectButton: Ghost/outline pill button. Rounded-full, border-2 border-[#D7E2EA], text color #D7E2EA, font-medium, uppercase, tracking-widest. Sizes: px-8 py-3 sm:px-10 sm:py-3.5, text text-sm sm:text-base. Hover: bg-[#D7E2EA]/10. Label: "Live Project".

FadeIn: Framer Motion wrapper using whileInView with viewport={{ once: true, margin: "50px", amount: 0 }}. Accepts delay, duration (default 0.7), x (default 0), y (default 30). Easing: [0.25, 0.1, 0.25, 1]. Uses motion.create() for dynamic element types.

Magnet: Mouse-following magnetic hover effect. Tracks mouse position relative to element center, applies translate3d transform divided by strength factor. Activates when cursor is within padding distance of element edge. Smooth transition in (0.3s ease-out) and out (0.6s ease-in-out). Uses willChange: 'transform'.

AnimatedText: Character-by-character scroll-reveal text animation. Each character goes from opacity 0.2 to 1 based on its position in the text relative to scroll progress. Uses Framer Motion useScroll targeting the paragraph element with offset ['start 0.8', 'end 0.2']. Each character uses invisible placeholder + absolute positioned animated span.

KEY DEPENDENCIES
react, react-dom (^18.3.1)
framer-motion (^12.38.0)
lucide-react (^0.344.0)
tailwindcss (^3.4.1)
vite, typescript
RESPONSIVE BREAKPOINTS
All sections use Tailwind's default breakpoints (sm: 640px, md: 768px, lg: 1024px) with mobile-first approach. Heavy use of clamp() for fluid typography. The entire design scales gracefully from mobile to ultra-wide screens.

现代 Agency

No.1413 · 前端开发 · 社区/原生 · 来源：MotionSites (MIT) · EN 原文

Build a React + Vite + Tailwind CSS landing page for "Axion Studio" - a design agency site. Use the `shaders` package (npm: `shaders`) for the hero background, `lucide-react` for icons. The page has 3 sections. Match every detail exactly:

---

## SECTION 1: HERO (Full viewport height)

**Background:** Light gray `#EFEFEF` with a full-screen animated shader overlay (positioned absolute, inset-0, z-10, pointer-events-none). The shader stack uses components from `shaders/react`:
- `Swirl` - colorA: `#ffffff`, colorB: `#f0f0f0`, detail: 1.7
- `ChromaFlow` - baseColor: `#ffffff`, downColor/leftColor/rightColor/upColor: `#ff5f03`, momentum: 13, radius: 3.5
- `FlutedGlass` - aberration: 0.61, angle: 31, frequency: 8, highlight: 0.12, highlightSoftness: 0, lightAngle: -90, refraction: 4, shape: "rounded", softness: 1, speed: 0.15
- `FilmGrain` - strength: 0.05

**Navigation (z-20, relative):** A pill-shaped white navbar (`bg-white rounded-full`) with 5px padding, inside a max-w-[1440px] container with p-2 sm:p-3.

- LEFT: Dark circle logo (w-9 h-9 sm:w-10 sm:h-10, bg-gray-900, rounded-full) with white text "AX" (10px/11px, font-bold, tracking-tight). Next to it (hidden on mobile, shown md+): nav links "Projects", "Studio", "Journal", "Connect" - 14px, text-gray-900, hover:text-gray-500, transition-colors duration-300, gap-6.

- RIGHT (hidden on mobile, shown md+):
- Text "Taking on projects for Q1 2026" (13px, text-gray-600, hidden below lg)
- Clock icon (lucide, size 14) + live London time "{HH:MM} in London" (13px, text-gray-600)
- CTA button: bg-gray-900, text-white, 13px font-medium, rounded-full, pl-5 pr-2 py-2. Text "Book a strategy call" with a HOVER TEXT ROLL animation: the text is duplicated inside a flex-col container with overflow-hidden h-[20px], on group-hover it translates -50% vertically (duration-500, ease cubic-bezier(0.25,0.1,0.25,1)). Arrow icon in a white circle (w-6 h-6) that rotates -45deg on hover (same easing).

- MOBILE: A "Menu"/"Close" toggle button (md:hidden), bg-gray-900, rounded-full, with Menu/X icons from lucide-react.

**Mobile Menu Overlay:** Fixed inset-0, z-50. Black/60 backdrop. A white bottom sheet (rounded-2xl, mx-3 mb-3) that slides up (translate-y-full to translate-y-0, duration-500, ease cubic-bezier(0.32,0.72,0,1)). Contains: time badge, nav links (28px/32px font-medium), and a "Start a project" button with arrow.

**Hero Content (z-20):** Positioned at the bottom of the viewport using flexbox (flex-1 spacer above). Max-w-[1440px], px-5 sm:px-8 lg:px-12, pb-14 sm:pb-16 lg:pb-20.

- Small label: "Axion Studio" (13px/14px, text-gray-900, tracking-wide, mb-5 sm:mb-8)
- Headline h1: "We craft digital experiences / for brands ready to dominate / their category online." - clamp(1.75rem,7vw,4.2rem) on mobile, clamp(2.5rem,5vw,4.2rem) on sm+. font-medium, leading-[1.08], tracking-[-0.03em], text-gray-900. Line breaks hidden on mobile (uses `<br className="hidden sm:block" />` with `<span className="sm:hidden"> </span>` fallback spaces).
- CTA row (mt-8 sm:mt-12, flex-col sm:flex-row, gap-4 sm:gap-5):
- Orange button: bg-[#F26522], hover:bg-[#e05a1a], text-white, 13px/14px, rounded-full, pl-5 sm:pl-6 pr-2 py-2. Same text-roll hover animation for "Start a project". White circle (w-7 h-7 sm:w-8 sm:h-8) with orange ArrowRight that rotates -45deg on hover.
- Partner badge: White pill with subtle shadow (0_2px_8px_rgba(0,0,0,0.08)), hover shadow (0_4px_16px_rgba(0,0,0,0.12)), rounded-[4px]. Contains an inline SVG icon (the starburst/compass shape below, w-5 h-5 sm:w-6 sm:h-6, fill-current text-[#E8704E]), text "Certified Partner" (13px/14px font-medium), and a dark badge "Featured" (10px/11px, bg-gray-900, text-white, px-1.5 sm:px-2 py-0.5, rounded).

**SVG Icon for partner badge:**
```svg
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><path d="m19.6 66.5 19.7-11 .3-1-.3-.5h-1l-3.3-.2-11.2-.3L14 53l-9.5-.5-2.4-.5L0 49l.2-1.5 2-1.3 2.9.2 6.3.5 9.5.6 6.9.4L38 49.1h1.6l.2-.7-.5-.4-.4-.4L29 41l-10.6-7-5.6-4.1-3-2-1.5-2-.6-4.2 2.7-3 3.7.3.9.2 3.7 2.9 8 6.1L37 36l1.5 1.2.6-.4.1-.3-.7-1.1L33 25l-6-10.4-2.7-4.3-.7-2.6c-.3-1-.4-2-.4-3l3-4.2L28 0l4.2.6L33.8 2l2.6 6 4.1 9.3L47 29.9l2 3.8 1 3.4.3 1h.7v-.5l.5-7.2 1-8.7 1-11.2.3-3.2 1.6-3.8 3-2L61 2.6l2 2.9-.3 1.8-1.1 7.7L59 27.1l-1.5 8.2h.9l1-1.1 4.1-5.4 6.9-8.6 3-3.5L77 13l2.3-1.8h4.3l3.1 4.7-1.4 4.9-4.4 5.6-3.7 4.7-5.3 7.1-3.2 5.7.3.4h.7l12-2.6 6.4-1.1 7.6-1.3 3.5 1.6.4 1.6-1.4 3.4-8.2 2-9.6 2-14.3 3.3-.2.1.2.3 6.4.6 2.8.2h6.8l12.6 1 3.3 2 1.9 2.7-.3 2-5.1 2.6-6.8-1.6-16-3.8-5.4-1.3h-.8v.4l4.6 4.5 8.3 7.5L89 80.1l.5 2.4-1.3 2-1.4-.2-9.2-7-3.6-3-8-6.8h-.5v.7l1.8 2.7 9.8 14.7.5 4.5-.7 1.4-2.6 1-2.7-.6-5.8-8-6-9-4.7-8.2-.5.4-2.9 30.2-1.3 1.5-3 1.2-2.5-2-1.4-3 1.4-6.2 1.6-8 1.3-6.4 1.2-7.9.7-2.6v-.2H49L43 72l-9 12.3-7.2 7.6-1.7.7-3-1.5.3-2.8L24 86l10-12.8 6-7.9 4-4.6-.1-.5h-.3L17.2 77.4l-4.7.6-2-2 .2-3 1-1 8-5.5Z"/></svg>
```

---

## SECTION 2: ABOUT (White background)

`bg-white`, pt-16 sm:pt-20 lg:pt-32, pb-12 sm:pb-16 lg:pb-24, overflow-hidden. Max-w-[1440px] container.

**Badge row:** px-5 sm:px-8 lg:px-12, flex items-center gap-3, mb-6 sm:mb-8.
- Numbered circle: w-6 h-6 sm:w-7 sm:h-7, rounded-full, bg-gray-900, text-white, 11px/12px font-semibold. Shows "1".
- Pill label: "Introducing Axion" - 12px/13px, font-medium, border border-gray-200, rounded-full, px-3 sm:px-4 py-1 sm:py-1.5.

**Heading h2:** "Strategy-led creatives, delivering / results in digital and beyond." - clamp(1.5rem,4vw,3.2rem), font-medium, leading-[1.12], tracking-[-0.02em], text-gray-900, mb-12 sm:mb-16 lg:mb-28.

**Content area (responsive):**

- MOBILE/TABLET (lg:hidden): Stacked - paragraph + button, then images.
- Paragraph: "Through research, creative thinking and iteration we help growing brands realize their digital full potential." - 15px/17px, leading-[1.6], font-medium, text-gray-900.
- Button: "About our studio" - orange (#F26522), same text-roll animation, white arrow circle rotates -45deg.
- Two images: flex-col sm:flex-row, gap-4 sm:gap-5. First: sm:w-[45%] aspect-[438/346]. Second: sm:w-[55%] aspect-[900/600]. Both rounded-xl sm:rounded-2xl, object-cover.

- DESKTOP (hidden lg:grid): `grid-cols-[26%_1fr_48%] items-end gap-6 xl:gap-8`.
- Left column (self-end): Small image, aspect-[438/346], rounded-2xl.
- Center column (self-start, flex justify-end): Paragraph (16px/18px, leading-[1.65], whitespace-nowrap, with `<br/>` between lines) + orange button.
- Right column (self-end): Large image, aspect-[3/2], rounded-2xl.

**Image URLs:**
- Small image: `https://images.higgs.ai/?default=1&output=webp&url=https%3A%2F%2Fd8j0ntlcm91z4.cloudfront.net%2Fuser_38xzZboKViGWJOttwIXH07lWA1P%2Fhf_20260516_090123_74be96d4-9c1b-40cf-932a-96f4f4babed3.png&w=1280&q=85`
- Large image: `https://images.higgs.ai/?default=1&output=webp&url=https%3A%2F%2Fd8j0ntlcm91z4.cloudfront.net%2Fuser_38xzZboKViGWJOttwIXH07lWA1P%2Fhf_20260516_090133_c157d30b-a99a-4477-bec1-a446149ec3f2.png&w=1280&q=85`

---

## SECTION 3: CASE STUDIES (Light gray background)

`bg-[#F5F5F5]`, pt-16 sm:pt-20 lg:pt-28, pb-16 sm:pb-20 lg:pb-28. Max-w-[1440px] container.

**Badge row:** Same pattern as Section 2, but number is "2", label is "Featured client work", border-gray-300.

**Heading h2:** "Our projects" - same clamp sizing as hero headline (clamp(1.75rem,7vw,4.2rem) / clamp(2.5rem,5vw,4.2rem)), font-medium, leading-[1.08], tracking-[-0.03em], mb-10 sm:mb-14 lg:mb-16.

**Cards Grid:** `grid grid-cols-1 md:grid-cols-2 gap-5 sm:gap-6 lg:gap-7`, px-5 sm:px-8 lg:px-12.

**Card 1 (Narrativ):**
- Video container: aspect-[329/246], rounded-2xl, overflow-hidden, bg-[#1a1d2e], group, cursor-pointer.
- Video: `src="https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260516_122702_390f5305-8719-41d5-ae80-d23ab3796c28.mp4"`, autoPlay, muted, loop, playsInline, w-full h-full object-cover.
- Hover button (absolute bottom-4 left-4): A white circle (h-9 w-9) that expands to w-[148px] on group-hover (transition-all duration-300 ease-in-out). Contains "Learn more" text (13px, font-medium, opacity-0 to opacity-100 on hover with delay-100) and a link/chain SVG icon (14x14, -rotate-45 to rotate-0 on hover). The SVG is the lucide "link" icon drawn manually with two arc paths.
- Description: "Winner of Site of the Month 2025 - an interactive 3D showcase driving record engagement" - 13px/14px, text-gray-600, mt-4, leading-relaxed.
- Title: "Narrativ" - 14px/15px, font-semibold, text-gray-900, mt-1.

**Card 2 (Luminar):**
- Video container: aspect-square, rounded-2xl, overflow-hidden, bg-[#6b6b6b], group, cursor-pointer.
- Video: `src="https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260516_123323_f909c2b8-ff6c-4edf-882b-8ebcdbe389b5.mp4"`, autoPlay, muted, loop, playsInline, w-full h-full object-cover.
- Hover button (absolute bottom-4 left-4): A DARK circle (bg-gray-900, h-9 w-9) that expands to w-[168px] on group-hover. Contains "View case study" text (13px, font-medium, text-white) and a white ArrowRight icon (size 14) that transitions from -rotate-45 to rotate-0 on hover.
- Description: "Transforming a dated platform into a conversion-focused brand experience" - 13px/14px, text-gray-600, mt-4, leading-relaxed.
- Title: "Luminar" - 14px/15px, font-semibold, text-gray-900, mt-1.

---

## GLOBAL STYLES (index.css):

Standard Tailwind directives plus two utility classes (not actively used in current layout but defined):
- `.liquid-glass`: rgba(255,255,255,0.01) bg, backdrop-filter blur(4px), inset box-shadow, pseudo-element gradient border using mask-composite.
- `.liquid-glass-strong`: Same but blur(50px), no pseudo-element.

---

## TECHNICAL DETAILS:
- **Framework:** React 18 + TypeScript + Vite
- **Styling:** Tailwind CSS 3.4 (default config, no custom theme extensions)
- **Packages:** `shaders` (for Shader, ChromaFlow, FilmGrain, FlutedGlass, Swirl from `shaders/react`), `lucide-react` (ArrowRight, Clock, Menu, X)
- **Font:** System default (no custom font loaded)
- **All animations use:** `duration-500 ease-[cubic-bezier(0.25,0.1,0.25,1)]` unless noted otherwise
- **Max content width:** 1440px, centered with mx-auto
- **Responsive breakpoints:** Default Tailwind (sm: 640px, md: 768px, lg: 1024px, xl: 1280px)
- **Live clock:** Updates every second, shows London timezone in HH:MM format

液态玻璃 Agency

No.1414 · 前端开发 · 社区/原生 · 来源：MotionSites (MIT) · EN 原文

Build a single-page landing page for an AI-powered web design agency using React + Vite + TypeScript + Tailwind CSS + shadcn/ui. The aesthetic is dark, premium, Apple-inspired with a custom "liquid glass" morphism effect. Pure black background throughout.

FONTS & DESIGN SYSTEM
Google Fonts import:

Instrument Serif (italic) — headings
Barlow (300, 400, 500, 600) — body text
Tailwind config — extend fontFamily:

heading: ["'Instrument Serif'", "serif"]
body: ["'Barlow'", "sans-serif"]
CSS Variables (:root in index.css):

--background: 213 45% 67%;
--foreground: 0 0% 100%;
--primary: 0 0% 100%;
--primary-foreground: 213 45% 67%;
--border: 0 0% 100% / 0.2;
--radius: 9999px;
--font-heading: 'Instrument Serif', serif;
--font-body: 'Barlow', sans-serif;

All headings use: font-heading italic text-white tracking-tight leading-[0.9]
All body text uses: font-body font-light text-white/60 text-sm
All buttons use: font-body with rounded-full

LIQUID GLASS CSS (in @layer components)
Two variants — .liquid-glass (subtle) and .liquid-glass-strong (more visible):

.liquid-glass:
background: rgba(255, 255, 255, 0.01);
background-blend-mode: luminosity;
backdrop-filter: blur(4px);
border: none;
box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.1);
position: relative;
overflow: hidden;

::before pseudo-element — a gradient border mask:
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;

.liquid-glass-strong: Same but backdrop-filter: blur(50px), stronger box-shadow: 4px 4px 4px rgba(0,0,0,0.05), inset 0 1px 1px rgba(255,255,255,0.15), and slightly higher gradient opacity (0.5 / 0.2).

SECTION 1 — NAVBAR (fixed)
Fixed at top-4, full-width, z-50. Left: logo image (48×48). Center: a liquid-glass rounded-full pill containing nav links ("Home", "Services", "Work", "Process", "Pricing") as text-sm font-medium text-foreground/90 + a solid white bg-white text-black rounded-full "Get Started" button with ArrowUpRight icon.

SECTION 2 — HERO (1000px height)
Container: relative overflow-visible, height 1000px, black background.

Background video:
src: https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260307_083826_e938b29f-a43a-41ec-a153-3d4730578ab8.mp4
Position: absolute, top: 20%, w-full h-auto object-contain z-0
Autoplay, loop, muted, playsInline
Poster fallback image at /images/hero_bg.jpeg

Overlays:
absolute inset-0 bg-black/5 z-0 (light darkening)
Bottom gradient: absolute bottom-0 left-0 right-0 z-[1], height 300px, linear-gradient(to bottom, transparent, black)

Content (z-10, centered, paddingTop 150px):
Badge pill: liquid-glass rounded-full containing a white bg-white text-black rounded-full "New" tag + "Introducing AI-powered web design." text
Heading: Use a BlurText animation component — text: "The Website Your Brand Deserves" — text-6xl md:text-7xl lg:text-[5.5rem] font-heading italic text-foreground leading-[0.8] tracking-[-4px] — animates word-by-word from bottom with blur-to-clear effect (delay 100ms per word)
Subtext (motion.p): "Stunning design. Blazing performance. Built by AI, refined by experts. This is web design, wildly reimagined." — fades in with blur at 0.8s delay
CTA buttons (motion.div, 1.1s delay): liquid-glass-strong rounded-full "Get Started" + ArrowUpRight icon, and a text-only "Watch the Film" + Play icon
Partners bar at bottom (mt-auto pb-8 pt-16)

BlurText component: Uses motion/react (framer-motion). Splits text by words, each word animates via IntersectionObserver with filter: blur(10px) → blur(5px) → blur(0px), opacity: 0 → 0.5 → 1, y: 50 → -5 → 0. Step duration 0.35s.

SECTION 3 — PARTNERS BAR
Centered column. Top: liquid-glass rounded-full badge "Trusted by the teams behind". Below: horizontal row of partner names ("Stripe", "Vercel", "Linear", "Notion", "Figma") rendered as text-2xl md:text-3xl font-heading italic text-white, gap-12.

SECTION 4 — START SECTION ("How It Works")
Full-width section, min-height: 700px, py-32 px-6 md:px-16 lg:px-24.

Background HLS video:
src: https://stream.mux.com/9JXDljEVWYwWu01PUkAemafDugK89o01BR6zqJ3aS9u00A.m3u8
Use hls.js library. Absolute, full cover, z-0. Top + bottom fade gradients (200px each, black ↔ transparent).

Content (z-10, centered, min-height 500px):
Badge: liquid-glass rounded-full — "How It Works"
Heading: "You dream it. We ship it." — text-4xl md:text-5xl lg:text-6xl font-heading italic
Subtext: "Share your vision. Our AI handles the rest—wireframes, design, code, launch. All in days, not quarters."
Button: liquid-glass-strong rounded-full "Get Started" + ArrowUpRight

SECTION 5 — FEATURES CHESS (alternating rows)
py-24 px-6 md:px-16 lg:px-24. Header: badge "Capabilities", heading "Pro features. Zero complexity."

Row 1 (text left, image right):
H3: "Designed to convert. Built to perform."
P: "Every pixel is intentional. Our AI studies what works across thousands of top sites—then builds yours to outperform them all."
Button: liquid-glass-strong rounded-full "Learn more"
Image: GIF in liquid-glass rounded-2xl overflow-hidden container

Row 2 (image left, text right — using lg:flex-row-reverse):
H3: "It gets smarter. Automatically."
P: "Your site evolves on its own. AI monitors every click, scroll, and conversion—then optimizes in real time. No manual updates. Ever."
Button: "See how it works"

SECTION 6 — FEATURES GRID (4 columns)
Badge "Why Us", heading "The difference is everything."

4 cards in grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6. Each card: liquid-glass rounded-2xl p-6. Contains:
Icon in liquid-glass-strong rounded-full w-10 h-10 circle
Title: text-lg font-heading italic text-white
Description: text-white/60 font-body font-light text-sm

Cards:
⚡ Zap — "Days, Not Months" — "Concept to launch at a pace that redefines fast."
🎨 Palette — "Obsessively Crafted" — "Every detail considered. Every element refined."
📊 BarChart3 — "Built to Convert" — "Layouts informed by data. Decisions backed by performance."
🛡️ Shield — "Secure by Default" — "Enterprise-grade protection comes standard."

SECTION 7 — STATS
Background HLS video:
src: https://stream.mux.com/NcU3HlHeF7CUL86azTTzpy3Tlb00d6iF3BmCdFslMJYM.m3u8
Desaturated: style={{ filter: 'saturate(0)' }}. Top + bottom black fades (200px).

Content (z-10): liquid-glass rounded-3xl p-12 md:p-16, grid grid-cols-2 lg:grid-cols-4 gap-8 text-center:
"200+" — "Sites launched"
"98%" — "Client satisfaction"
"3.2x" — "More conversions"
"5 days" — "Average delivery"
Values: text-4xl md:text-5xl lg:text-6xl font-heading italic text-white
Labels: text-white/60 font-body font-light text-sm

SECTION 8 — TESTIMONIALS
Badge "What They Say", heading "Don't take our word for it."

3-column grid. Each: liquid-glass rounded-2xl p-8. Quote in text-white/80 font-body font-light text-sm italic. Name: text-white font-body font-medium text-sm. Role: text-white/50 font-body font-light text-xs.

Testimonials:
Sarah Chen, CEO Luminary — "A complete rebuild in five days..."
Marcus Webb, Head of Growth Arcline — "Conversions up 4x..."
Elena Voss, Brand Director Helix — "They didn't just design our site..."

SECTION 9 — CTA FOOTER
Background HLS video:
src: https://stream.mux.com/8wrHPCX2dC3msyYU9ObwqNdm00u3ViXvOSHUMRYSEe5Q.m3u8
Top + bottom black fades (200px).

Content (z-10, centered):
Heading: "Your next website starts here." — text-5xl md:text-6xl lg:text-7xl
Subtext: "Book a free strategy call. See what AI-powered design can do."
Two buttons: liquid-glass-strong "Book a Call" + solid bg-white text-black "View Pricing"
Footer: mt-32 pt-8 border-t border-white/10, copyright "© 2026 Studio" + links (Privacy, Terms, Contact) in text-white/40 text-xs

DEPENDENCIES
hls.js, motion (framer-motion), lucide-react, tailwindcss-animate

KEY PATTERNS
All section badges use: liquid-glass rounded-full px-3.5 py-1 text-xs font-medium text-white font-body inline-block mb-4
All section headings use: text-4xl md:text-5xl lg:text-6xl font-heading italic text-white tracking-tight leading-[0.9]
All video sections use HLS via hls.js with Safari fallback (canPlayType)
All video fades: 200px height, linear-gradient(to bottom/top, black, transparent)
Outer page wrapper: bg-black overflow-visible

Sky Estate

No.1415 · 前端开发 · 社区/原生 · 来源：MotionSites (MIT) · EN 原文

**Create a luxury real estate landing page called "Galaxy Home" (brand name "Aether Lane") using React, TypeScript, Vite, Tailwind CSS, and Framer Motion. Use the Google Font "Inter Tight" (weights 400, 500, 600, 700). The page has a dark/cosmic aesthetic with parallax scrolling effects and layered imagery.**

---

### Tech Stack & Dependencies
- React 18, TypeScript, Vite
- Tailwind CSS 3.4
- Framer Motion 12
- Lucide React for icons

### Tailwind Config
Custom brand colors:
- `brand-blue`: `#8F9EFF`
- `brand-navy`: `#271C40`
- `brand-dark`: `#020319`

Custom animations:
- `marquee`: translateX 0% to -50%, 30s linear infinite
- `marquee-reverse`: translateX -50% to 0%, 30s linear infinite

Font: `'Inter Tight', system-ui, sans-serif`

### Global CSS
```css
body { font-family: 'Inter Tight', system-ui, sans-serif; overflow-x: hidden; }
* { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
html { scroll-behavior: smooth; }
```

---

### Section 1: Navbar (fixed, centered, floating pill)
- Fixed at top center with `z-[60]`, padding `px-4 pt-4 md:pt-6`
- Pill shape: `rounded-full bg-[#312D7C]/40 backdrop-blur-[15px]`, gaps `gap-4 md:gap-8 lg:gap-20`, padding `px-4 py-3`
- Logo: custom SVG (4-petal/clover shape) at `h-6 w-6 md:h-7 md:w-7`, fill white, viewBox `0 0 256 256`, path: `M 228 0 C 172.772 0 128 44.772 128 100 L 128 0 L 0 0 L 0 28 C 0 83.228 44.772 128 100 128 L 0 128 L 0 256 L 28 256 C 83.228 256 128 211.228 128 156 L 128 256 L 256 256 L 256 228 C 256 172.772 211.228 128 156 128 L 256 128 L 256 0 Z`
- Brand name: "Aether Lane", `text-base md:text-xl font-medium text-white`, gap-2 from logo
- Nav links: `['Home', 'About', 'Estates', 'Projects', 'Inquire']`, hidden on mobile, `gap-6`, `text-sm`, first link white, rest `text-[#B6B8C3] hover:text-white`
- CTA button: "Get in touch", `rounded-full border border-white/80 px-6 py-2 text-[15px] font-medium`, background: `linear-gradient(180deg, rgba(255,255,255,0) 30%, rgba(255,255,255,0.10) 76%), radial-gradient(ellipse at 50% 100%, rgba(255,255,255,0.7) 0%, transparent 100%), #BEC7FF`, text color `text-brand-navy/80 drop-shadow-sm`, hover scale 1.05
- Mobile: Animated hamburger (3 bars that animate to X using Framer Motion), opens fullscreen overlay (`bg-brand-dark/95 backdrop-blur-xl`) with staggered link animations (fade up + blur)

---

### Section 2: Hero (full viewport height, parallax layers)
- Full `h-screen w-full overflow-hidden`, `z-10`
- Uses `useScroll` targeting the section with offset `['start start', 'end start']`
- Parallax `bgY`: transforms scrollYProgress [0,1] to ['0%', '8%']

**Layer 1 (z-0) - Sky background:**
- Image URL: `https://soft-zoom-63098134.figma.site/_assets/v11/7af55796a90a26e2d57c9fa2a48815874023cff0.png`
- `h-[120%] w-full object-cover`, animated with `y: bgY`

**Layer 2 (z-10) - Title text:**
- Positioned with `pt-[22vh] md:pt-32 lg:pt-36`, centered
- Text: "Galaxy Home" (with `&nbsp;&nbsp;` double space between words)
- Font: `text-[clamp(3rem,14vw,14rem)] font-semibold leading-none whitespace-nowrap`
- Gradient text: `bg-clip-text text-transparent`, `backgroundImage: 'linear-gradient(to bottom, #A8B4FF, #FFFFFF)'`
- `mix-blend-lighten` to blend with layers

**Layer 3 (z-20) - Subtexts:**
- Left: "Elegance Above the Skyline" at `left-6 top-[200px] md:left-12 md:top-[320px] lg:left-24`, `text-lg md:text-[22px] md:leading-6 font-medium text-white/70 mix-blend-overlay`, hidden on mobile
- Right: "Your Dream Residence Starts Here" at `right-6 top-[200px] md:right-12 md:top-[320px] lg:right-24`, same styling but `text-white`, hidden on mobile

**Layer 4 (z-30) - Building image (overlaps text):**
- Image URL: `https://soft-zoom-63098134.figma.site/_assets/v11/644aba5492aa8bd5756bc5c6d65255d577b1aaf3.png`
- `h-[120%] w-full object-cover`, same parallax `y: bgY`

---

### Section 3: Mountain Background + Content (overlaps hero by -25vh)
- Wrapper: `relative z-40 -mt-[25vh]`
- Mountain image in background with separate parallax: `useScroll` on entire wrapper (offset `['start start', 'end end']`), transforms to ['0%', '-20%']
- Mountain image URL: `https://soft-zoom-63098134.figma.site/_assets/v11/3d8fdaf726b804c1299840860af873a910ce1571.png`
- `h-[120%] w-full object-cover object-top`, positioned `absolute -top-[10vh] left-0 right-0 bottom-0`

---

### Section 4: Content Section (inside mountain wrapper)
- Padding: `pt-24 sm:pt-32 md:pt-40`

**Description block:**
- Centered column, `px-5 sm:px-6 py-16 md:py-32`
- Text: "Explore distinguished estates, iconic design, and meticulously curated homes across the globe's most sought-after destinations."
- `max-w-[600px] text-sm sm:text-base md:text-lg font-medium text-white/90 leading-relaxed text-center`
- Text shadow: `2px 4px 26px rgba(0, 0, 0, 0.56)`
- CTA button: same style as navbar "Get in touch", `mt-6 sm:mt-7 px-8 sm:px-10 py-2.5 sm:py-3 text-base sm:text-lg`

---

### Section 5: Text Fill Section (scroll-driven character reveal)
- Container: `max-w-[820px]` centered, `px-5 sm:px-6 pb-16 sm:pb-24 pt-8 sm:pt-12 md:px-12`
- Text: "We present refined estates that merge remarkable design, prime surroundings, and relentless craftsmanship. Each residence is chosen for the experience it delivers not merely the footprint it provides."
- Font: `text-xl sm:text-2xl md:text-[40px] md:leading-[48px] text-center leading-snug tracking-tight font-medium text-white`
- Animation: Each character uses `useTransform` on scroll progress. Characters start at `opacity: 0.25` and animate to `opacity: 1` as the user scrolls. Uses `useScroll` with offset `['start 0.8', 'end 0.2']`. Each character calculates its own start/end threshold based on its index relative to total character count (range +/- 0.01 around its position).

---

### Section 6: Logo Marquee (infinite scroll)
- Container: `max-w-[820px]` centered, `py-4 sm:py-6`, overflow hidden
- Row 1 (left to right): Sparkles/"Prism", Waves/"Cascade", Star/"Pinnacle" (repeated), uses `animate-marquee`
- Row 2 (right to left): Zap/"Impulse", Orbit/"Nexus", Gem/"Radiant" (repeated), uses `animate-marquee-reverse`
- Each logo item: Lucide icon (`h-4 w-4 sm:h-5 sm:w-5 text-white/80`) + name (`text-sm sm:text-base font-medium text-white/90 whitespace-nowrap`)
- Double-duplicated arrays for seamless loop, `gap-8 sm:gap-12`

---

### Section 7: Stats Section
- `px-5 sm:px-6 py-16 md:py-32`
- White gradient overlay on top: `absolute -top-[400px] left-0 right-0 bottom-0`, `bg-gradient-to-b from-transparent via-white/60 to-white`
- Heading: "Only the proven results here", `text-2xl md:text-[40px] md:leading-[44px] font-medium text-brand-navy text-center mb-10 sm:mb-16`
- Stats grid: `grid-cols-2 md:flex`, `max-w-5xl` centered
- Stats data:
- "500" / "Estates Delivered"
- "25" / "Exclusive Markets"
- "12" / "Years in the Field"
- "99%" / "Owner Satisfaction"
- Values: `text-4xl sm:text-5xl md:text-[64px] md:leading-[76px] font-semibold text-brand-navy`
- Labels: `text-sm sm:text-base md:text-xl font-medium text-brand-navy/70 text-center`
- Dividers between stats (desktop only): `h-[80px] w-px bg-brand-navy/20 mx-8 lg:mx-12`
- Animate in view with Framer Motion `useInView` (once, margin -100px): fade up (`opacity: 0, y: 30` to `opacity: 1, y: 0`), staggered by 0.15s per stat, duration 0.6s

---

### Image URLs (exact)
1. Sky/hero background: `https://soft-zoom-63098134.figma.site/_assets/v11/7af55796a90a26e2d57c9fa2a48815874023cff0.png`
2. Building (transparent foreground): `https://soft-zoom-63098134.figma.site/_assets/v11/644aba5492aa8bd5756bc5c6d65255d577b1aaf3.png`
3. Mountain/landscape: `https://soft-zoom-63098134.figma.site/_assets/v11/3d8fdaf726b804c1299840860af873a910ce1571.png`

AI Designer Agency

No.1416 · 前端开发 · 社区/原生 · 来源：MotionSites (MIT) · EN 原文

Prompt to recreate this landing page:

Build a dark-themed, single-page landing page for an AI web design agency called "VIRALMEDIA". The design uses a pure black background (#000) with white text, a signature "liquid glass" glassmorphism effect, and two Google Fonts: Barlow (body/UI) and Instrument Serif (italic accent text). Use React, Tailwind CSS, Framer Motion, and hls.js. All buttons are rounded-full.

DESIGN SYSTEM (index.css)

Color tokens (all HSL, dark-only — no light mode):

--background: 0 0% 0% (pure black)
--foreground: 0 0% 100% (pure white)
--card: 0 0% 9%, --card-foreground: 0 0% 100%
--primary: 0 0% 97%, --primary-foreground: 0 0% 9%
--secondary: 0 0% 15%, --secondary-foreground: 0 0% 100%
--muted: 0 0% 15%, --muted-foreground: 0 0% 75%
--accent: 0 0% 15%, --accent-foreground: 0 0% 100%
--border: 0 0% 20%, --input: 0 0% 20%, --ring: 0 0% 100%
--radius: 2px
--font-body: 'Barlow', sans-serif
--font-accent: 'Instrument Serif', serif

Liquid Glass CSS classes:

.liquid-glass — subtle glassmorphism: background: rgba(255,255,255,0.01), background-blend-mode: luminosity, backdrop-filter: blur(4px), no border, box-shadow: inset 0 1px 1px rgba(255,255,255,0.1). Has a ::before pseudo-element for a gradient border effect using linear-gradient(180deg, rgba(255,255,255,0.45) 0%, rgba(255,255,255,0.15) 20%, transparent 40%, transparent 60%, rgba(255,255,255,0.15) 80%, rgba(255,255,255,0.45) 100%) with mask-composite: exclude and padding: 1.4px.

.liquid-glass-strong — stronger variant: same as above but backdrop-filter: blur(50px), box-shadow: 4px 4px 4px rgba(0,0,0,0.05), inset 0 1px 1px rgba(255,255,255,0.15), and slightly higher gradient opacity values (0.5/0.2 instead of 0.45/0.15).

Tailwind config: Set fontFamily: { body: ['Barlow', 'sans-serif'], accent: ['Instrument Serif', 'serif'] } at the theme root level (not in extend).

SECTION 1: NAVBAR (fixed)

Fixed top, full-width, z-50, px-8 py-6, flex row with space-between
Left: Logo text "VIRALMEDIA" — text-xl font-semibold tracking-tight font-body text-foreground
Center (hidden on mobile): Nav links ['Work', 'Services', 'About', 'Blog', 'Contact'] — each px-4 py-2 text-sm font-medium text-foreground rounded-sm hover:bg-white/10
Right: "Get Started" button — liquid-glass-strong rounded-full px-6 py-2.5 text-sm font-medium text-foreground

SECTION 2: HERO (full viewport height)

Container: relative w-full h-screen overflow-hidden
Background video (behind everything): Absolutely positioned, object-cover object-bottom. On mobile: -translate-y-[100px], on md+: no translate. Video URL: https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260326_073936_8dd07fdb-4f6b-4220-a3f0-9dedfaab0c88.mp4 (autoPlay, loop, muted, playsInline)
Bottom gradient overlay: absolute inset-x-0 bottom-0 h-60 bg-gradient-to-t from-background to-transparent
Content (z-10, flex column, justify-end, pb-10 md:pb-20):
Avatar row: 3 overlapping circular avatars (pravatar.cc, w-8 h-8 rounded-full border-2 border-background, -space-x-2) + text "7,000+ brands already transformed" in text-muted-foreground text-sm
Heading: text-3xl sm:text-5xl md:text-6xl lg:text-7xl font-medium tracking-[-1px] md:tracking-[-2px] — "Build Stunning with " + <span className="font-accent italic font-normal">AI Magic</span>
Subtitle: text-sm md:text-lg text-muted-foreground whitespace-normal md:whitespace-nowrap — "AI-powered websites crafted for beauty, speed, and lasting performance."
Email form: liquid-glass rounded-full p-1.5 md:p-2 max-w-lg w-full with transparent input and a solid white bg-foreground text-background rounded-full SUBSCRIBE button. Button uses motion.button with whileHover={{ scale: 1.03 }} and whileTap={{ scale: 0.98 }}

SECTION 3: ABOUT (scroll-reveal text)

bg-background py-32 px-8, max-w-4xl mx-auto text-center
Uses a ScrollRevealText component: splits text into individual words, each wrapped in a motion.span. Uses useScroll with offset: ["start 0.9", "start 0.3"] and useTransform to animate each word's opacity from 0.15 to 1 as user scrolls through
Text: "We blend artificial intelligence with human creativity to craft digital experiences that captivate, convert, and scale — building ambitious brands that truly thrive and lead in the modern web."
Typography: text-3xl md:text-4xl lg:text-5xl font-medium tracking-[-1px] leading-relaxed font-body

SECTION 4: SELECTED WORK (2×2 project grid)

bg-background py-32 pb-16 px-8, max-w-6xl mx-auto
Header: "Selected " + italic accent "Work" — text-4xl md:text-5xl font-medium tracking-[-2px] text-center mb-4
Subtitle: "A curated collection of projects where bold design meets intelligent technology." — text-muted-foreground text-lg text-center max-w-2xl mx-auto mb-16
Grid: grid-cols-1 md:grid-cols-2 gap-6
4 project cards, each with framer-motion fade-up (y: 40→0, staggered by i * 0.1):
Image container: aspect-[4/3] liquid-glass rounded-2xl overflow-hidden
Project title: text-xl font-medium text-foreground font-body
Category: text-sm text-muted-foreground font-body mt-1
Projects data:
"Nova Finance" / "Brand & Web Design" / https://motionsites.ai/assets/hero-grow-ai-preview-BlQ8tAQ-.gif
"Pulse Health" / "AI Web Development" / https://motionsites.ai/assets/hero-evr-ventures-preview-DZxeVFEX.gif
"Drift Studios" / "Website Optimization" / https://motionsites.ai/assets/hero-wealth-preview-B70idl_u.gif
"Arc Commerce" / "Brand & Development" / https://motionsites.ai/assets/hero-neuralyn-preview-Br4FRDQA.gif

SECTION 5: VIDEO SHOWCASE (parallax overlap)

h-[650px] overflow-hidden -mt-[325px] z-0 — overlaps upward into the previous section
Full-bleed autoplay video: https://media.cleanshot.cloud/media/21620/nKosRonaEKSufJVJ4VtouFhOPkqgJ3dPoQ8ZP52S.mp4
Top & bottom gradient fades: h-32 bg-gradient-to-b/t from-background to-transparent z-10

SECTION 6: CTA (full-screen with HLS video background)

w-full h-screen overflow-hidden flex items-center justify-center z-10
HLS video background using hls.js: Stream URL https://stream.mux.com/4IMYGcL01xjs7ek5ANO17JC4VQVUTsojZlnw4fXzwSxc.m3u8 (with Safari native HLS fallback)
Top/bottom gradient fades: h-40, plus a bg-black/30 overlay
Content (z-10, centered, max-w-3xl):
Heading: "Ready to " + italic accent "Transform" + " Your Brand?" — text-4xl md:text-5xl lg:text-6xl font-medium tracking-[-2px] mb-6
Subtitle: "Let's build something extraordinary together." — text-lg text-muted-foreground mb-10
Two buttons side by side: "START A PROJECT" (solid bg-foreground text-background rounded-full px-10 py-4) and "BOOK A CALL" (liquid-glass-strong rounded-full px-10 py-4)
All elements animate in with framer-motion y: 30/20→0 staggered

SECTION 7: FOOTER

bg-background border-t border-border px-8 py-16, max-w-6xl mx-auto
4-column grid (md:grid-cols-4):
Logo "VIRALMEDIA" + description "AI-powered web design agency crafting digital experiences that convert."
Services: Brand Design, AI Web Design, AI Web Development, Optimization
Company: About, Work, Blog, Careers
Connect: Twitter, LinkedIn, Instagram, Dribbble
Bottom bar: copyright "© 2026 VIRALMEDIA. All rights reserved." + Privacy/Terms links
All links: text-muted-foreground text-sm hover:text-foreground transition-colors

KEY DEPENDENCIES

framer-motion (animations)
hls.js (HLS video streaming in CTA)
Google Fonts: Barlow (400, 500, 600) and Instrument Serif (400 italic) — load via <link> in index.html

Lodge Booking App

No.1417 · 前端开发 · 社区/原生 · 来源：MotionSites (MIT) · EN 原文

Create a "WoodNest" luxury cabin booking showcase with 3 phone mockups displayed side-by-side on desktop (stacked on mobile). The design uses a liquid glass / iOS 26 frosted glass aesthetic with a dark background (#030508) and animated organic liquid blobs behind the phones.

**Tech Stack:** React + TypeScript + Vite + Tailwind CSS + lucide-react (Leaf, Menu, Star, X, Calendar, ChevronDown, ChevronLeft, ChevronRight, Pencil icons).

**Fonts:**
- Body: Inter (weights 300, 400, 500, 600) from Google Fonts
- Display headings: General Sans (weights 400, 500, 600, 700) from Fontshare: `https://api.fontshare.com/v2/css?f[]=general-sans@400,500,600,700&display=swap`

**Background:**
- Fixed full-screen layer with 4 animated liquid blobs (organic border-radius shapes, cyan/teal/emerald/white gradients at very low opacity 3-8%, blurred 60-90px, each with unique 18-25s looping morph animation changing position, rotation, scale, and border-radius).
- 3 specular "caustic" highlights (tiny white/cyan circles with blur, animating position/opacity over 8-12s).
- A glass-refraction layer (subtle diagonal gradient with white at 0.5-1% opacity + 0.5px backdrop blur).
- A noise texture overlay (SVG feTurbulence fractalNoise) at 1.5% opacity.

**Phone Frame:**
- Desktop: 380px wide, 780px tall, border-radius 50px, border 8px solid #2a2a3a, outer 2px ring #1a1a2a, heavy box-shadow (40px/80px black shadows + inset 20px). Dynamic Island notch (::before pseudo-element): 120x28px, #1a1a2a, centered at top, border-radius 0 0 16px 16px. Inner .phone-content: 100% size, overflow hidden, border-radius 42px.
- Mobile: `width: calc(100vw - 40px)`, `height: calc((100vw - 40px) * 2.05)`, border-radius 40px, border 6px. Notch shrinks to 100x24px. Inner content border-radius 34px.

**Container layout:** `flex flex-col md:flex-row items-center gap-6 md:gap-[50px] justify-center`, outer wrapper has 20px padding (mobile), 32px padding (desktop).

---

**PHONE 1 (Left) - Featured Lodges listing:**

- Background: looping video `https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260620_140846_aef8cb19-5ec8-4b45-974b-020aed20f297.mp4`
- Content overlay gradient: top rgba(30,60,80,0.4) -> mid rgba(30,60,80,0.2) -> lower rgba(10,30,40,0.6) -> bottom rgba(10,20,30,0.9)
- Header: Leaf icon (amber-400) + "WoodNest" label + hamburger Menu toggle (opens fullscreen frosted nav with staggered fadeIn links: Locations, Rooms, Experiences, Contact)
- Title: "Featured Lodges" (font-display, 2.5rem, font-light, white) + subtitle "This week's most loved retreats" (white/60, sm)
- Card 1 (liquid-glass-dropdown background): video thumbnail `https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260706_193839_c320d45f-58ff-4c65-b4dc-b6afd855f68f.mp4` (h-48, rounded-[16px], autoplay muted loop), title "Spruce Hill Lodge", price "$450/night" (3xl font-light) + "+$25.00 taxes", white "Reserve" button (rounded-[16px])
- Card 2 (bg-blue-400/5 backdrop-blur-sm): video `https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260706_193851_8f42b8d7-c4e2-480f-8c2e-4a8415e67774.mp4`, title "Cedar Valley Cabin", price "$320/night" + "+$18.00 taxes", same Reserve button

---

**PHONE 2 (Center) - Hero / Landing:**

- Background: static image (as background-image on a div): `https://images.higgs.ai/?default=1&output=webp&url=https%3A%2F%2Fd8j0ntlcm91z4.cloudfront.net%2Fuser_38xzZboKViGWJOttwIXH07lWA1P%2Fhf_20260707_141501_77d33995-a443-4890-ad2a-afb0108874ea.png&w=1280&q=85`
- Same header (Leaf + "WoodNest" + menu toggle)
- Hero title: "Nature's Perfect Hideaways" (font-display, 3rem, font-light, "Perfect" is white/50)
- Subtitle paragraph: "Discover handpicked luxury cabins in breathtaking locations. Unplug, unwind, and reconnect with what matters most." (white/70, sm, max-w-[260px])
- Bottom section: Rating badge aligned right (Star icon filled amber-400 + "4.7" bold xl + "from 1,800+ stays"), and a full-width "Book Now" button with white/95 background, rounded-[16px], and an animated pulse-glow box-shadow (amber at 10-25% oscillating)

---

**PHONE 3 (Right) - Reservation / Booking form:**

- Background: same video as Phone 1 (`hf_20260620_140846_...`)
- Same overlay gradient + header + menu
- Title: "Reserve Your Retreat" (font-display, 2.2rem, font-light)
- Main card (liquid-glass-dropdown): static image `https://images.higgs.ai/?default=1&output=webp&url=https%3A%2F%2Fd8j0ntlcm91z4.cloudfront.net%2Fuser_38xzZboKViGWJOttwIXH07lWA1P%2Fhf_20260707_140711_d9bf3815-d23c-4737-9390-2eb93594839a.png&w=1280&q=85` (h-56, rounded-[16px])
- Lodge name: "Evergreen Pine Family Lodge" (xl, font-light) with a pencil edit button (round frosted glass)
- Interactive date pickers: two side-by-side pickers showing Calendar icon + formatted date (default: Feb 11 and Mar 25, 2026). Clicking opens a full inline calendar with: month navigation (ChevronLeft/Right), day headers (Su-Sa), day grid with selected dates highlighted white, in-range dates at white/15, others white/40 hover white/10.
- Check-in/Check-out time selector: split row (border-r divider), showing "After 2:00 PM" / "Until 12:00 PM" by default. Clicking opens a scrollable time picker dropdown (liquid-glass-time-dropdown: rgba(10,18,35,0.95), 40px blur, border 1px white/8).
- Price: "$359/night" (3xl font-light) + "2-5 guests" aligned right
- Full-width white "Reserve" button

---

**Glass effects used throughout:**
- `.liquid-glass-menu`: rgba(15,25,45,0.4), backdrop-filter blur(24px) saturate(1.4), inset top 1px white/6 border, shadow 20px 60px black/40
- `.liquid-glass-dropdown`: rgba(15,25,45,0.4), backdrop-filter blur(20px) saturate(1.3), inset top 1px white/6 border, shadow 12px 40px black/40
- `.liquid-glass-time-dropdown`: rgba(10,18,35,0.95), backdrop-filter blur(40px) saturate(1.5), border 1px white/8, shadow 16px 48px black/60

**Animations:**
- `.animate-fade-in-up`: translateY(24px)->0, 0.8s cubic-bezier(0.16,1,0.3,1)
- `.animate-fade-in-scale`: scale(0.92)->1, 0.9s same easing
- Staggered delays: 0.15s, 0.3s, 0.5s, 0.7s, 0.9s, 1.1s (elements start at opacity:0)
- `.btn-hover`: scale(1.03) + white glow shadow on hover, scale(0.97) on active
- `.card-hover`: translateY(-4px) + deeper shadow on hover
- `.animate-pulse-glow`: 3s infinite amber glow oscillation on Book Now button

Neuralyn

No.1418 · 前端开发 · 社区/原生 · 来源：MotionSites (MIT) · EN 原文

Create a dark landing page for "Neuralyn" — an analytics dashboard SaaS. Use React + Vite + Tailwind CSS + TypeScript + Framer Motion + shadcn/ui.

Fonts
Inter (400, 500, 600, 700) for body/UI via @fontsource/inter
Instrument Serif (400, 400-italic) for the italic accent word via @fontsource/instrument-serif

Color Theme (all HSL, dark mode by default in :root)
Background: 0 0% 0% (pure black)
Foreground: 0 0% 100% (pure white)
Muted foreground: 0 0% 65%
Card: 0 0% 5%
Border: 0 0% 20%
Hero subtitle: 210 17% 95%

Page Structure
Section 1: Hero (full viewport height, overflow-hidden)

Navbar — horizontal, padded px-8 md:px-28 py-4:

Left: Logo image + "Neuralyn" text (text-xl font-bold tracking-tight) + nav links (Home, Services with ChevronDown icon, Reviews, Contact us) — links hidden on mobile, gap-1 between links, gap-12 md:gap-20 between logo and links
Right: "Sign In" button — solid white background (bg-foreground), black text (text-background), rounded-lg text-sm font-semibold, hover opacity transition

Hero Content — centered column, mt-16 md:mt-20 px-4:

Tag pill: A "liquid glass" styled pill (liquid-glass class) with inner "New" badge (white bg, black text, rounded-md text-sm font-medium px-2 py-0.5) + "Say Hello to Corewave v3.2" in text-sm font-medium text-muted-foreground. Pill has px-3 py-2 rounded-lg mb-6.
Title: text-5xl md:text-7xl, tracking-[-2px], font-medium, leading-tight md:leading-[1.15] mb-3. Text: "Your Insights." / "One Clear Overview." — the word "Overview" is in Instrument Serif italic (font-serif italic font-normal)
Subtitle: text-lg font-normal leading-6 opacity-90 mb-8, color uses CSS variable --hero-subtitle. Text: "Neuralyn helps teams track metrics, goals, and progress with precision." with a <br/> after "goals,"
CTA Button: "Get Started for Free" — solid white (bg-foreground text-background), rounded-full px-8 py-3.5 text-base font-medium, whileHover: scale 1.03, whileTap: scale 0.98

Dashboard + Video Area — full viewport width using w-screen with marginLeft: calc(-50vw + 50%) trick, aspect-ratio: 16/9, positioned relative:

Background video: <video>, absolutely positioned inset-0 w-full h-full object-cover. URL: https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260307_083826_e938b29f-a43a-41ec-a153-3d4730578ab8.mp4
Dashboard image: Absolutely positioned, centered, max-w-5xl w-[90%] rounded-2xl, mixBlendMode: "luminosity". Has parallax scroll (y: 0→-250).
Bottom gradient fade: Absolutely positioned at bottom of section, h-40, gradient from background to transparent, z-30, pointer-events-none.

Parallax Scroll Effects (Framer Motion useScroll({ target: sectionRef, offset: ["start start", "end start"] }) + useTransform):

Hero text content group: y: [0, -200] and opacity: [1, 0] (fades over first 50% of scroll)
Dashboard image: y: [0, -250]

Entrance Animations: Staggered initial={{ opacity: 0, y }} / animate={{ opacity: 1, y: 0 }}:

Tag pill: y: 10, duration 0.5s, delay 0
Title: y: 20, duration 0.6s, delay 0.1
Subtitle: y: 20, duration 0.6s, delay 0.2
CTA: y: 20, duration 0.6s, delay 0.3
Dashboard area: y: 40, duration 0.8s, delay 0.4

Liquid Glass CSS

.liquid-glass {
background: rgba(255, 255, 255, 0.01);
background-blend-mode: luminosity;
backdrop-filter: blur(4px);
-webkit-backdrop-filter: blur(4px);
border: none;
box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.1);
position: relative;
overflow: hidden;
}
.liquid-glass::before {
content: '';
position: absolute;
inset: 0;
border-radius: inherit;
padding: 1.4px;
background: linear-gradient(180deg,
rgba(255,255,255,0.45) 0%, rgba(255,255,255,0.15) 20%,
rgba(255,255,255,0) 40%, rgba(255,255,255,0) 60%,
rgba(255,255,255,0.15) 80%, rgba(255,255,255,0.45) 100%);
-webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
-webkit-mask-composite: xor;
mask-composite: exclude;
pointer-events: none;
}

Section 2: Testimonial (min-h-screen, centered, py-24 md:py-32 px-8 md:px-28)

Quote symbol image (w-14 h-10 object-contain)
Testimonial text (text-4xl md:text-5xl font-medium leading-[1.2], wrapped in flex flex-wrap): "Neuralyn revolutionized how we handle financial insights using smart analytics. We are now driving better outcomes quicker than we ever imagined! Neuralyn revolutionized how we handle financial insights using smart analytics."
Scroll-driven word reveal: Each word is a <motion.span> with mr-[0.3em]. Uses useScroll({ target: containerRef, offset: ["start end", "end center"] }). Each word maps to a sequential range [i/total, (i+1)/total] → opacity: [0.2, 1] and color: ["hsl(0 0% 35%)", "hsl(0 0% 100%)"].
Closing " quotation mark in text-muted-foreground ml-2
Author row (flex items-center gap-4): Avatar image (w-14 h-14 rounded-full border-[3px] border-foreground object-cover) + name "Brooklyn Simmons" (text-base font-semibold leading-7 text-foreground) + role "Product Manager" (text-sm font-normal leading-5 text-muted-foreground)
Layout: max-w-3xl mx-auto, content left-aligned (items-start), gap-10 between elements

Assets needed:
logo.png — small logo icon
hero-dashboard.png — dashboard screenshot
quote-symbol.png — decorative quote mark
testimonial-avatar.png — circular headshot

Sup Coverflow Carousels That Turn Heads 深色 Coverflow 极光

No.1419 · 前端开发 · 社区/原生 · 来源：MotionSites (MIT) · EN 原文

{"summary": "A dark, aurora-lit 3D coverflow carousel landing page in a confident, playful product-marketing voice. A sticky frosted-ink top nav (a teal-to-magenta gradient rounded card-stack logo + a 'Coverflow' wordmark, a hidden-on-mobile nav row -- Showcase / Features / Templates / Pricing -- a ghost 'Sign in' link and a solid white 'Start free' pill, plus a mobile hamburger that toggles a slide-down menu) sits above a centered hero: a small 'New: depth-aware coverflow engine' status pill, a big two-line 'Carousels that turn heads, not stomachs.' heading whose 'turn heads' is a teal-to-magenta gradient text, and a muted lead. The hero's centerpiece is a real CSS 3D coverflow: seven absolutely-positioned cards on a 1600px perspective stage, the active card facing front (translated toward the viewer with a teal glow ring) and its neighbours rotated ~42-48deg and pushed back in Z, scaled down and faded by distance, each card a vertical gradient tile with a soft top-left sheen and a bottom gradient label (an uppercase category eyebrow + a Space Grotesk title). Below the stage, a control row of a round glass prev button, a row of pill dots (the active dot a wide teal-to-magenta gradient bar with a glow), and a round glass next button; clicking a card or dot, the arrows, or the left/right arrow keys re-lays out the stage. A CTA pair ('Build your carousel' gradient button + a 'Watch it move' glass button) and a trust line follow. Beneath the hero: a grayscale logo strip, a 3-up glass feature grid (True 3D perspective / 60fps momentum / A11y by default), a split 'From prompt to motion' showcase (copy + checklist + a faux terminal prompt card), a 3-up templates grid of gradient-thumb cards, a dark gradient CTA section, and a social footer. Built on the Tailwind CDN with Inter + Space Grotesk and Iconify Phosphor icons; below ~860px the stage shrinks and drops far cards, and below 480px it shows only the active card plus close neighbours, the nav links collapse into the hamburger menu, and the hero/headings scale down.", "style": {"description": "A premium dark, aurora-lit aesthetic: a near-black blue-ink ground (#0b0f14) lit from the corners by large blurred aurora blobs in a teal-to-magenta family. The two signature accents are aqua/teal (#2dd4bf) and magenta (#e879f9), used together as gradients (logo chip, hero 'turn heads' gradient text, active-card glow, active dot, primary CTA, template thumbs) and individually as section eyebrows and feature-icon tints. Text is light slate (Tailwind slate-200/300/400) on the dark ground; the only light surfaces are the white 'Start free' pill and the white CTA button (with dark #0b0f14 'ink' text on them). Surfaces are 'glass': translucent white panels (linear-gradient of rgba(255,255,255,0.06) to 0.015) with a hairline rgba(255,255,255,0.08) border and a 14px backdrop blur, plus deep drop shadows (0 30px 70px -28px rgba(0,0,0,0.85)); the active coverflow card swaps in a teal glow shadow + teal ring (0 40px 90px -30px rgba(45,212,191,0.35), 0 0 0 1px rgba(45,212,191,0.25)). Depth comes from layered atmosphere: two large corner aurora blobs (teal top-left ~620px, magenta bottom-right ~680px, blur 90px, opacity .5), a central teal-magenta ellipse glow (blur 110px), and a faint 56px grid texture masked to a soft radial vignette around the hero. Corners are generously rounded (rounded-full pills/buttons/dots, rounded-2xl glass cards, 22px coverflow cards, rounded-xl/lg chips). Typography pairs Inter (sans body/UI, weights 400-700) with Space Grotesk (display headings + card titles, weights 500-700), with tight tracking on the big display heading. The overall feel is cinematic and motion-forward: real 3D perspective, smooth cubic-bezier(.22,.61,.36,1) card transitions over .55s, a glowing active slide, and gentle hover scales on the nav buttons.", "prompt": "Use a premium dark, aurora-lit design system on the Tailwind CDN with Inter (body/UI) + Space Grotesk (display) and Iconify Phosphor icons. Extend the Tailwind theme with custom colors `ink` #0b0f14, `ink2` #0e141b, `aqua` #2dd4bf, `magenta` #e879f9, and `fontFamily.sans = ['Inter','system-ui','sans-serif']`, `fontFamily.display = ['Space Grotesk','Inter','sans-serif']`; load Inter (400;500;600;700) + Space Grotesk (500;600;700) from Google Fonts and Iconify 3.1.1 from its CDN. Body is `font-sans text-slate-200 antialiased selection:bg-aqua/30` with `body { background-color:#0b0f14 }` and `html { scroll-behavior:smooth }`. The ground is near-black blue-ink (#0b0f14); the only light surfaces are a white `rounded-full` 'Start free' pill and the white CTA button, both with `text-ink` (#0b0f14) dark text. Use TWO accents as a teal->magenta pair: aqua #2dd4bf and magenta #e879f9, combined as gradients (`bg-gradient-to-br from-aqua to-magenta` logo chip, the hero 'turn heads' `gradient-text` clipped to a `linear-gradient(100deg,#2dd4bf,#7defe0 35%,#e879f9)`, the active coverflow card glow, the active dot `linear-gradient(90deg,#2dd4bf,#e879f9)`, the primary CTA `from-aqua to-magenta`, template thumbs) and individually as section eyebrows (`text-aqua` / `text-magenta` uppercase tracked labels) and feature-icon tints (`bg-aqua/15 text-aqua`, `bg-magenta/15 text-magenta`). Build a reusable `.glass` surface: `background: linear-gradient(160deg, rgba(255,255,255,0.06), rgba(255,255,255,0.015)); border:1px solid rgba(255,255,255,0.08); backdrop-filter: blur(14px)`, used for feature cards, the terminal panel, template cards, nav buttons. Atmosphere: an `.aurora` layer (`absolute inset-0 overflow-hidden pointer-events-none`) whose `::before` is a ~620px teal radial blob top-left and `::after` a ~680px magenta radial blob bottom-right (both `filter: blur(90px); opacity:.5`), an `.aurora-mid` central ~520x320px teal-magenta ellipse (`filter: blur(110px)`), and a `.grid-tex` 56px line grid masked by `radial-gradient(ellipse 90% 62% at 50% 38%, #000 18%, transparent 72%)`. Corners: `rounded-full` pills/buttons/dots, `rounded-2xl` glass cards, `22px` coverflow cards. Shadows: glass cards `0 30px 70px -28px rgba(0,0,0,0.85)`; the active coverflow card `0 40px 90px -30px rgba(45,212,191,0.35), 0 0 0 1px rgba(45,212,191,0.25)`. Type: display headings + coverflow card titles in Space Grotesk (the hero `text-4xl sm:text-6xl font-bold leading-[1.05] tracking-tight`), body/UI in Inter (slate-300/400). Motion: coverflow cards transition `transform .55s cubic-bezier(.22,.61,.36,1), opacity .55s ease, filter .55s ease`; nav buttons scale 1.08 and gain a teal border on hover; the active dot widens to 26px with a teal glow."}, "layout_and_structure": {"description": "A single dark scrolling landing page: sticky nav, a tall hero whose centerpiece is a 3D coverflow stage with controls, then a logo strip, a 3-up feature grid, a 2-col showcase split, a 3-up templates grid, a dark CTA section, and a footer. The `<nav>` is `sticky top-0 z-50 border-b border-white/5 bg-ink/70 backdrop-blur-xl` with a centered `mx-auto max-w-6xl flex items-center justify-between px-6 py-4` row (brand cluster left, `hidden md:flex` link row center, sign-in/Start-free/hamburger right) plus a `hidden md:hidden` slide-down mobile menu. The `<header>` hero is `relative overflow-hidden` and stacks an `.aurora` + `.aurora-mid` + `.grid-tex` backdrop, then a centered `max-w-6xl px-6 pt-16 pb-10 text-center` intro (a glass status pill, the two-line gradient-accent heading, a lead), then a `max-w-5xl px-4 pb-6` coverflow region (a soft teal glow oval behind, the `.coverflow` perspective stage, and a centered control row of prev / dots / next), then a `max-w-6xl px-6 pb-16 text-center` CTA pair + trust line. The coverflow stage is `position:relative; height:440px; perspective:1600px; transform-style:preserve-3d` holding seven `.cf-card` tiles (`position:absolute; top/left 50%; 280x372px; margin offsets to center; border-radius 22px; overflow:hidden`), each JS-injected with a vertical gradient background, a top-left radial sheen, and a bottom `.label` (uppercase category + Space Grotesk title). Sections below share `mx-auto max-w-6xl px-6`: a `border-y border-white/5 bg-ink2/60` logo strip (six Space Grotesk wordmarks), a `py-24` features section (centered eyebrow/heading/lead + a `grid md:grid-cols-3 gap-5` of glass feature cards), a `border-t border-white/5 bg-ink2/50 py-24` showcase split (`grid lg:grid-cols-2` of copy+checklist+CTA vs a glass terminal card), a `py-24` templates section (a header row + a `grid sm:grid-cols-2 lg:grid-cols-3 gap-5` of glass cards with gradient thumbs), a `border-t border-white/5 py-24` CTA section (an `.aurora-mid` glow + a centered `max-w-3xl` heading/lead/button-pair), and a `border-t border-white/5 bg-ink2/60` footer (brand / copyright / social icon row). Responsive: at <=860px the stage is 400px tall with smaller cards and the far cards fade out; at <=480px it is 360px with only the active + immediate neighbours visible; below md the nav links collapse into the hamburger menu and headings/CTAs scale and stack.", "prompts": [{"part": "Sticky frosted-ink top nav + mobile menu", "prompt": "Build `<nav class=\"sticky top-0 z-50 w-full border-b border-white/5 bg-ink/70 backdrop-blur-xl\">` with an inner `mx-auto flex max-w-6xl items-center justify-between px-6 py-4` row. LEFT: a brand anchor `flex items-center gap-2.5` = a `grid h-8 w-8 place-items-center rounded-lg bg-gradient-to-br from-aqua to-magenta shadow-lg shadow-aqua/20` chip holding an 18px `ph:cards-three-fill` Iconify icon colored `text-ink`, plus a `font-display text-lg font-bold tracking-tight text-white` 'Coverflow' wordmark. CENTER: a `hidden md:flex items-center gap-8 text-sm font-medium text-slate-300` link row (Showcase #showcase / Features #features / Templates #templates / Pricing, each `transition hover:text-white`). RIGHT: a `flex items-center gap-3` cluster = a `hidden sm:block text-sm font-medium text-slate-300 hover:text-white` 'Sign in' ghost link, a `rounded-full bg-white px-4 py-2 text-sm font-semibold text-ink transition hover:bg-aqua` 'Start free' pill, and a `md:hidden grid h-9 w-9 place-items-center rounded-lg border border-white/10 bg-white/5` `#menuBtn` hamburger (a `ph:list-bold` icon with `aria-expanded`/`aria-controls`). After the row, a `hidden md:hidden border-t border-white/5 bg-ink/95 backdrop-blur-xl` `#mobileMenu` holding the same links as a stacked `flex flex-col px-6 py-3` list (each `rounded-lg px-2 py-3 hover:bg-white/5 hover:text-white`, plus a `sm:hidden` 'Sign in')."}, {"part": "Hero intro (aurora backdrop + gradient heading)", "prompt": "Build `<header class=\"relative w-full overflow-hidden\">`. Layer the backdrop first: a `.aurora` div, an `.aurora-mid` div, and an `absolute inset-0 grid-tex` div. Then a centered `relative mx-auto max-w-6xl px-6 pt-16 pb-10 text-center sm:pt-20` intro: (1) a status pill `mx-auto mb-6 inline-flex items-center gap-2 rounded-full border border-white/10 bg-white/5 px-4 py-1.5 text-xs font-medium text-slate-300 backdrop-blur` with a tiny `h-1.5 w-1.5 rounded-full bg-aqua shadow-[0_0_8px] shadow-aqua` dot + 'New: depth-aware coverflow engine'; (2) an `<h1 class=\"font-display text-4xl font-bold leading-[1.05] tracking-tight text-white sm:text-6xl\">` reading 'Carousels that' then `<br>` then a `gradient-text` span 'turn heads' then ', not stomachs.'; (3) a `mx-auto mt-5 max-w-xl text-base leading-relaxed text-slate-400 sm:text-lg` lead about generating cinematic 3D coverflow galleries from a single prompt."}, {"part": "3D coverflow stage + controls", "prompt": "Build a `relative mx-auto max-w-5xl px-4 pb-6 sm:px-6` region. Behind the stage place a `pointer-events-none absolute inset-x-0 bottom-16 mx-auto h-24 max-w-2xl rounded-[100%] bg-aqua/10 blur-3xl` glow oval. Then the `<div class=\"coverflow\" id=\"coverflow\">` stage (`position:relative; height:440px; perspective:1600px; transform-style:preserve-3d`) whose `.cf-card` tiles are injected by JS (see special components). Below it, a `mt-7 flex items-center justify-center gap-6` control row: a round `nav-btn glass text-slate-200` `#prev` button (a `ph:caret-left-bold` icon), a `flex items-center gap-2.5` `#dots` container of pill dots, and a round `nav-btn glass` `#next` button (a `ph:caret-right-bold` icon). The `.nav-btn` is `width/height 44px; display:grid; place-items:center; border-radius:9999px` and scales 1.08 with a teal border on hover."}, {"part": "Hero CTA pair + trust line", "prompt": "Below the coverflow, a `relative mx-auto mt-4 max-w-6xl px-6 pb-16 text-center` block: a `flex flex-col items-center justify-center gap-3 sm:flex-row` button row = a primary `group inline-flex items-center gap-2 rounded-full bg-gradient-to-r from-aqua to-magenta px-7 py-3.5 text-sm font-semibold text-ink shadow-xl shadow-aqua/20 hover:shadow-aqua/40` 'Build your carousel' button with a `ph:arrow-right-bold` icon that nudges right on group-hover, plus a glass secondary `inline-flex items-center gap-2 rounded-full border border-white/10 bg-white/5 px-7 py-3.5 text-sm font-semibold text-white backdrop-blur hover:bg-white/10` 'Watch it move' button with a `ph:play-circle` icon. Under it, a `mt-5 text-xs text-slate-400` trust line 'Trusted by 12,000+ product teams · No credit card'."}, {"part": "Logo strip", "prompt": "Build `<section class=\"relative w-full border-y border-white/5 bg-ink2/60\">` with a `mx-auto flex max-w-6xl flex-wrap items-center justify-center gap-x-12 gap-y-5 px-6 py-7` row of six `font-display text-lg font-semibold tracking-tight text-slate-300/90` wordmarks (Lumen, Northwind, Parallax, Halcyon, Vela, Driftwood) reading as a muted trusted-by logo row."}, {"part": "Feature grid (3-up glass cards)", "prompt": "Build `<section id=\"features\" class=\"relative w-full py-24\">` with an `.aurora-mid` glow (`style=\"top:10%;opacity:.4\"`). Center a `mx-auto max-w-2xl text-center` header: a `text-sm font-semibold uppercase tracking-[0.2em] text-aqua` 'The engine' eyebrow, a `mt-3 font-display text-3xl font-bold tracking-tight text-white sm:text-4xl` 'Depth you can feel, motion you can trust' heading, and a `mt-4 text-slate-400` lead. Then a `mt-14 grid gap-5 md:grid-cols-3` of three `glass rounded-2xl p-7` cards, each with a `grid h-11 w-11 place-items-center rounded-xl` icon chip (alternating `bg-aqua/15 text-aqua` / `bg-magenta/15 text-magenta`) holding a 22px Phosphor icon (`ph:cube`, `ph:lightning`, `ph:wheelchair`), a `mt-5 font-display text-lg font-semibold text-white` title (True 3D perspective / 60fps momentum / A11y by default), and a `mt-2 text-sm leading-relaxed text-slate-400` body."}, {"part": "Showcase split (copy + terminal card)", "prompt": "Build `<section id=\"showcase\" class=\"relative w-full border-t border-white/5 bg-ink2/50 py-24\">` with a `mx-auto grid max-w-6xl items-center gap-14 px-6 lg:grid-cols-2`. LEFT column: a `text-sm font-semibold uppercase tracking-[0.2em] text-magenta` 'From prompt to motion' eyebrow, a `mt-3 font-display text-3xl font-bold tracking-tight text-white sm:text-4xl` 'Describe it. Watch it come alive.' heading, a `mt-4 text-slate-400` lead, a `mt-8 space-y-4` checklist of three items (each a `flex items-start gap-3` row with a `grid h-6 w-6 rounded-full bg-aqua/15 text-aqua` (or magenta) `ph:check-bold` chip + a bold-lead sentence: Live theming / Export anywhere / Responsive by design), and a `mt-9 inline-flex items-center gap-2 rounded-full border border-aqua/30 bg-aqua/10 px-6 py-3 text-sm font-semibold text-aqua hover:bg-aqua/20` 'Explore the playground' link with a `ph:arrow-up-right` icon. RIGHT column: a `glass relative rounded-2xl p-1.5` wrapper around a `rounded-xl bg-ink p-5 font-mono text-[13px] leading-relaxed` faux terminal (a `ph:terminal-window` 'prompt' header, a `$ coverflow generate` line, a two-line quoted prompt in slate-500, and a `mt-4 space-y-1.5` result block of teal `✓` lines -- geometry 7 cards 42° tilt / easing cubic-bezier(.22,.61,.36,1) / aurora aqua → magenta -- ending in a magenta `→ rendered in 0.8s`)."}, {"part": "Templates grid (gradient-thumb cards)", "prompt": "Build `<section id=\"templates\" class=\"relative w-full py-24\">` with a `mx-auto max-w-6xl px-6` wrapper. A `flex flex-col items-end justify-between gap-6 sm:flex-row` header row: LEFT a `max-w-xl` block (a `text-sm font-semibold uppercase tracking-[0.2em] text-aqua` 'Starting points' eyebrow + a `mt-3 font-display text-3xl font-bold tracking-tight text-white sm:text-4xl` 'Templates that already move' heading), RIGHT a `text-sm font-semibold text-slate-300 hover:text-aqua` 'Browse all 60+ →' link. Then a `mt-12 grid gap-5 sm:grid-cols-2 lg:grid-cols-3` of three `group glass overflow-hidden rounded-2xl hover:-translate-y-1 hover:border-aqua/30` (or magenta) article cards, each with a `h-40` gradient thumbnail (`bg-gradient-to-br from-aqua/30 via-ink2 to-magenta/20` and variants) and a `p-5` caption (a `font-display text-base font-semibold text-white` title -- Aurora Gallery / Product Reel / Team Faces -- + a `mt-1 text-sm text-slate-400` subtitle)."}, {"part": "Dark CTA section", "prompt": "Build `<section class=\"relative w-full overflow-hidden border-t border-white/5 py-24\">` with an `.aurora-mid` glow (`style=\"top:0;opacity:.55\"`). Center a `relative mx-auto max-w-3xl px-6 text-center` block: a `font-display text-3xl font-bold tracking-tight text-white sm:text-5xl` two-line heading 'Ship a carousel / worth swiping.', a `mx-auto mt-5 max-w-lg text-slate-400` lead, and a `mt-8 flex flex-col items-center justify-center gap-3 sm:flex-row` button pair = a `rounded-full bg-gradient-to-r from-aqua to-magenta px-8 py-3.5 text-sm font-semibold text-ink shadow-xl shadow-magenta/20 hover:shadow-magenta/40` 'Start free' button + a `rounded-full border border-white/10 bg-white/5 px-8 py-3.5 text-sm font-semibold text-white backdrop-blur hover:bg-white/10` 'Book a demo' button."}, {"part": "Social footer", "prompt": "Close with `<footer class=\"relative w-full border-t border-white/5 bg-ink2/60\">` wrapping a `mx-auto flex max-w-6xl flex-col items-center justify-between gap-4 px-6 py-8 sm:flex-row` row. LEFT: a `flex items-center gap-2.5` brand cluster (a `grid h-7 w-7 place-items-center rounded-lg bg-gradient-to-br from-aqua to-magenta` chip with a 15px `ph:cards-three-fill` `text-ink` icon + a `font-display font-bold text-white` 'Coverflow' wordmark). CENTER: a `text-xs text-slate-400` copyright '© 2026 Coverflow Labs. Crafted in the dark.'. RIGHT: a `flex items-center gap-4 text-slate-400` social icon row (`ph:x-logo`, `ph:github-logo`, `ph:dribbble-logo`, each `hover:text-aqua`). Below sm the row stacks to a centered column."}, {"part": "Responsive reflow", "prompt": "Drive the coverflow geometry with breakpoints. At <=860px: `.coverflow` height 400px, `.cf-card` 230x312px with recentred margins, the +/-1 neighbours pull in (`translate3d(±140px,0,-40px) rotateY(∓42deg) scale(.84)`), the +/-2 cards tighten (`±250px,...scale(.66)`), and the +/-3 far cards set `opacity:0`. At <=480px: `.coverflow` height 360px, `.cf-card` 200x272px, only the active and +/-1 cards show (`translate3d(±106px,0,-60px) rotateY(∓40deg) scale(.78); opacity:.7`) while +/-2 and +/-3 are `opacity:0`. In the nav, the link row is `hidden md:flex` (collapsing into the `#menuBtn` hamburger + `#mobileMenu` slide-down below md) and the 'Sign in' link is `hidden sm:block`. The hero heading is `text-4xl sm:text-6xl`, the CTA button rows are `flex-col` then `sm:flex-row`, the templates grid is `sm:grid-cols-2 lg:grid-cols-3`, and the footer is `flex-col` then `sm:flex-row`."}]}, "special_ui_components": [{"name": "CSS 3D coverflow stage (perspective + preserve-3d)", "prompt": "The carousel is a real CSS 3D stage, not a flat slider. `.coverflow` is `position:relative; height:440px; perspective:1600px; transform-style:preserve-3d`. Each `.cf-card` is `position:absolute; top:50%; left:50%; width:280px; height:372px; margin-left:-140px; margin-top:-186px` (so its transform origin is the stage center), `border-radius:22px; overflow:hidden; border:1px solid rgba(255,255,255,0.08); box-shadow:0 30px 70px -28px rgba(0,0,0,0.85); background:#0e141b; will-change:transform`, and transitions `transform .55s cubic-bezier(.22,.61,.36,1), opacity .55s ease, filter .55s ease`. Position classes place each card by its signed distance from the active index: `.cf-pos-0 { transform: translate3d(0,0,140px) rotateY(0) scale(1); opacity:1; z-index:50 }` (active, brought toward the viewer); `.cf-pos-1 { translate3d(168px,0,-40px) rotateY(-42deg) scale(.86); opacity:.92; z-index:40 }` and its mirror `.cf-pos-n1 { translate3d(-168px,0,-40px) rotateY(42deg) scale(.86) }`; `.cf-pos-2`/`-n2` (`±310px,-200px`, rotateY ∓46deg, scale .7, opacity .55); `.cf-pos-3`/`-n3` (`±420px,-360px`, rotateY ∓48deg, scale .56, opacity .22); and `.cf-hidden { translate3d(0,0,-520px) scale(.4); opacity:0 }` for anything farther. So side cards genuinely rotate away and recede in Z while the active card faces front."}, {"name": "Glowing active coverflow card", "prompt": "The active (front) card is visually promoted: in addition to `.cf-pos-0`'s forward translate and full scale/opacity, it overrides its shadow to a teal glow + ring with `.cf-pos-0 { box-shadow: 0 40px 90px -30px rgba(45,212,191,0.35), 0 0 0 1px rgba(45,212,191,0.25) }`, so the centered card reads lit and ringed in aqua against its dimmer, rotated neighbours."}, {"name": "JS-injected gradient cards with sheen + label", "prompt": "Cards are generated in JS from a `slides` array of `{ title, sub, g }` (g = a `linear-gradient(150deg,...)` vertical fill, e.g. 'Dawn Coast'/Landscape teal, the featured 'Moonrise'/Featured true-aqua `linear-gradient(150deg,#2dd4bf 0%,#22a89a 45%,#0c3b45 78%)`, 'Wild Petal'/Macro magenta, 'Aurora Sea'/Abstract teal->purple, 'Night City'/Urban). For each slide, create a `.cf-card` with `card.style.background = s.g`, set `dataset.idx`, and inject innerHTML: a top-left radial sheen (`position:absolute;inset:0;background:radial-gradient(120% 80% at 30% 20%, rgba(255,255,255,0.18), transparent 60%)`) and a bottom `.label` (`position:absolute;left:0;right:0;bottom:0;padding:18px 18px 16px;background:linear-gradient(to top, rgba(7,10,14,0.92), rgba(7,10,14,0.45) 55%, transparent)`) holding an 11px uppercase letter-spaced category in `rgba(255,255,255,0.7)` + a 17px Space Grotesk white title. Each card and dot gets a click handler that sets `active = i` and re-renders. The keyboard listener maps ArrowLeft/ArrowRight to active-1/active+1 (clamped)."}, {"name": "Pill-dot pagination with gradient active bar", "prompt": "Below the stage, a `#dots` row holds one `.dot` per slide: `width/height 8px; border-radius:9999px; background:rgba(255,255,255,0.22); transition: all .35s ease; cursor:pointer`. The active dot is `.dot.active { width:26px; background:linear-gradient(90deg,#2dd4bf,#e879f9); box-shadow:0 0 14px rgba(45,212,191,0.6) }` -- it stretches into a wide teal-to-magenta gradient bar with a teal glow. The render() loop toggles `.active` onto the dot matching the active index; clicking a dot jumps the carousel to that slide."}, {"name": "Coverflow render() layout engine", "prompt": "A single `render()` function lays out the whole stage from one `active` index. It iterates `.cf-card` nodes, computes `d = i - active`, and assigns a position class: `d===0`->cf-pos-0, `d===1`->cf-pos-1, `d===2`->cf-pos-2, `d>=3`->cf-pos-3, `d===-1`->cf-pos-n1, `d===-2`->cf-pos-n2, `d<=-3`->cf-pos-n3 (resetting the className to `'cf-card '+cls` each time). It also toggles the matching `.dot.active`. `#next`/`#prev` clamp `active` to `[0, slides.length-1]` and call render(); ArrowRight/ArrowLeft do the same; clicking a card or dot sets active to that index. `active` starts at 3 so the featured 'Moonrise' card is centered on load."}, {"name": "Glass surface + aurora atmosphere", "prompt": "A reusable `.glass` class gives every panel a frosted look: `background: linear-gradient(160deg, rgba(255,255,255,0.06), rgba(255,255,255,0.015)); border:1px solid rgba(255,255,255,0.08); backdrop-filter: blur(14px)`, used on feature cards, the terminal wrapper, template cards, and the round nav buttons. The dark ground is lit by atmosphere layers: `.aurora` (`absolute inset-0 overflow-hidden pointer-events-none`) whose `::before` is a ~620px teal radial blob top-left and `::after` a ~680px magenta radial blob bottom-right (both `filter: blur(90px); opacity:.5`); `.aurora-mid`, a ~520x320px central teal-magenta ellipse (`filter: blur(110px)`), reused in the features and CTA sections with tweaked top/opacity; and `.grid-tex`, a 56px line grid masked to a soft hero vignette by `mask-image: radial-gradient(ellipse 90% 62% at 50% 38%, #000 18%, transparent 72%)`."}, {"name": "Faux terminal prompt card", "prompt": "The showcase right column is a faux CLI: a `glass relative rounded-2xl p-1.5` wrapper around a `rounded-xl bg-ink p-5 font-mono text-[13px] leading-relaxed` panel. It opens with a slate-600 header (a `ph:terminal-window` icon + a 'prompt' label), a command line `$ coverflow generate` (the `$` in magenta, the command in slate-200), a two-line quoted prompt in slate-500, then a `mt-4 space-y-1.5` result block of teal `✓` lines ('geometry · 7 cards, 42° tilt', 'easing · cubic-bezier(.22,.61,.36,1)', 'aurora · aqua → magenta') closing with a magenta arrow line '→ rendered in 0.8s'. It visually echoes the prompt-to-design product story."}, {"name": "Mobile hamburger slide-down menu", "prompt": "On mobile the nav links collapse behind a `#menuBtn` hamburger (`md:hidden grid h-9 w-9 place-items-center rounded-lg border border-white/10 bg-white/5`, a `ph:list-bold` icon, with `aria-expanded`/`aria-controls=mobileMenu`). A `#mobileMenu` panel (`hidden border-t border-white/5 bg-ink/95 backdrop-blur-xl md:hidden`) holds the same links stacked. JS toggles `#mobileMenu`'s `hidden` class, flips `aria-expanded`, and swaps the icon between `ph:list-bold` and `ph:x-bold`; clicking any menu link closes the menu."}], "special_notes": "Exact tokens (Tailwind config extend): colors `ink` #0b0f14, `ink2` #0e141b, `aqua` #2dd4bf, `magenta` #e879f9; `fontFamily.sans = ['Inter','system-ui','sans-serif']`, `fontFamily.display = ['Space Grotesk','Inter','sans-serif']`. Fonts: Inter (Google Fonts weights 400;500;600;700) + Space Grotesk (500;600;700); Iconify 3.1.1 (Phosphor `ph:` set) from https://code.iconify.design/3/3.1.1/iconify.min.js. Body `font-sans text-slate-200 antialiased selection:bg-aqua/30` with `body { background-color:#0b0f14 }` and `html { scroll-behavior:smooth }`. Two accents only (aqua #2dd4bf + magenta #e879f9), used as gradients and as individual eyebrow/icon tints; the only light surfaces are the white 'Start free' pill and the white CTA button, both `text-ink`. `.glass`: `linear-gradient(160deg, rgba(255,255,255,0.06), rgba(255,255,255,0.015))`, `border:1px solid rgba(255,255,255,0.08)`, `backdrop-filter: blur(14px)`. `.gradient-text`: `linear-gradient(100deg,#2dd4bf 0%,#7defe0 35%,#e879f9 100%)` clipped to text. Atmosphere: `.aurora::before` ~620px teal radial blob top-left, `.aurora::after` ~680px magenta radial blob bottom-right (blur 90px, opacity .5); `.aurora-mid` ~520x320px teal-magenta ellipse (blur 110px); `.grid-tex` 56px line grid masked by `radial-gradient(ellipse 90% 62% at 50% 38%, #000 18%, transparent 72%)`. Coverflow: `.coverflow { height:440px; perspective:1600px; transform-style:preserve-3d }`; `.cf-card { 280x372px; margin-left:-140px; margin-top:-186px; border-radius:22px; background:#0e141b; box-shadow:0 30px 70px -28px rgba(0,0,0,0.85); transition: transform .55s cubic-bezier(.22,.61,.36,1), opacity .55s ease, filter .55s ease }`. Position transforms: pos-0 `translate3d(0,0,140px) rotateY(0) scale(1)` + glow `box-shadow:0 40px 90px -30px rgba(45,212,191,0.35), 0 0 0 1px rgba(45,212,191,0.25)`; pos-1/n1 `±168px,0,-40px rotateY ∓42deg scale .86 opacity .92`; pos-2/n2 `±310px,0,-200px rotateY ∓46deg scale .7 opacity .55`; pos-3/n3 `±420px,0,-360px rotateY ∓48deg scale .56 opacity .22`; cf-hidden `0,0,-520px scale .4 opacity 0`. Dots: `.dot 8px rgba(255,255,255,0.22)`, `.dot.active width:26px; background:linear-gradient(90deg,#2dd4bf,#e879f9); box-shadow:0 0 14px rgba(45,212,191,0.6)`. `.nav-btn 44px round, place-items center`, hover scale 1.08 + teal border. JS: a `slides` array of 7 `{title,sub,g}` objects (featured 'Moonrise' is true-aqua `linear-gradient(150deg,#2dd4bf 0%,#22a89a 45%,#0c3b45 78%)`), each rendered as a `.cf-card` with a top-left radial sheen + a bottom gradient `.label` (uppercase 11px category + 17px Space Grotesk title); `active` starts at 3; a single `render()` maps signed distance->position class and toggles the active dot; `#next`/`#prev` and ArrowRight/Left clamp active to `[0,6]`; card/dot clicks jump. Responsive: <=860px stage 400px, cards 230x312, neighbours pull in, far cards hidden; <=480px stage 360px, cards 200x272, only active+/-1 visible; below md nav links collapse into the hamburger `#mobileMenu`, 'Sign in' is `hidden sm:block`, headings/CTAs scale and stack. This is an original prompt-library product for the placeholder brand 'Coverflow' (faithfully reproducing the build HTML); the library value is the reusable dark aurora-lit CSS-3D coverflow pattern itself -- a perspective stage of rotating, receding gradient cards with a glowing active slide, pill-dot pagination, keyboard + click control, and a responsive geometry that drops far cards on small screens."}

Ms Aurex Finance

No.1420 · 前端开发 · 社区/原生 · 来源：MotionSites (MIT) · EN 原文

Build a **single full-screen hero section** for a DeFi / private-banking landing page called **LŪMEN // ÍNDEX**. Use **React 18 + TypeScript + Vite + Tailwind CSS**, with `lucide-react` for icons. The entire page is ONE component rendering ONE `<section>` that fills the viewport — no scrolling, no other sections.

## 0. Project setup

Dependencies: `react@^18.3.1`, `react-dom@^18.3.1`, `lucide-react@^0.446.0`. Dev: `vite@^5.4.2`, `@vitejs/plugin-react`, `tailwindcss@^3.4.1`, `postcss`, `autoprefixer`, `typescript@^5.5.3`.

`tailwind.config.js` — leave the theme completely unextended. Nearly every value in this design is an arbitrary-value class (`text-[13px]`, `bg-[#AFDDFF]`, `px-[35px]`), so no custom theme tokens are needed:

```js
/** @type {import('tailwindcss').Config} */
export default {
  content: ['./index.html', './src/**/*.{js,ts,jsx,tsx}'],
  theme: { extend: {} },
  plugins: [],
};
```

`src/main.tsx` mounts `<App />` in `<StrictMode>` into `#root` and imports `./index.css`.

## 1. `index.html` — fonts and metadata

The page title is exactly `LŪMEN // ÍNDEX` (macron U, acute I). Load **two** font families in `<head>`, in this order:

```html
<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>LŪMEN // ÍNDEX</title>
    <link href="https://db.onlinewebfonts.com/c/ca3d10781128664daddf89bf2e2d1305?family=Graphik+LCG+Regular+Regular" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css2?family=Manrope:wght@400;500&display=swap" rel="stylesheet">
  </head>
  <body>
    <div id="root"></div>
    <script type="module" src="/src/main.tsx"></script>
  </body>
</html>
```

- **Display font** — `Graphik LCG Regular Regular` (fallback stack `'Graphik LCG', sans-serif`). Used ONLY for the logo wordmark and the H1.
- **UI font** — `Manrope` weights 400 and 500. Used for everything else — nav items, wallet strip, node labels, body copy, CTA.

## 2. Design tokens

| Token | Value | Usage |
|---|---|---|
| Accent (ice blue) | `#AFDDFF` | nav numbers, `[ CONNECTED ]`, badge fills, CTA background, polygon stroke, link text |
| Accent hover | `#c8e8ff` | CTA hover background only |
| Page background | `#000` (pure black) | body + section |
| Primary text | `#FFFFFF` | |
| Muted text | `rgba(255,255,255,0.5)` (`text-white/50`) | node description paragraphs |
| Nav number tint | `#AFDDFF` at 80% (`text-[#AFDDFF]/80`) | the `01.` `02.` prefixes |
| Grid line | `rgba(255,255,255,0.04)` (`bg-white/[0.04]`) | full-bleed grid |
| Plus mark | `rgba(255,255,255,0.7)` (`bg-white/70`) | grid intersections |
| Node border | `rgba(255,255,255,0.8)` (`border-white/80`) | the three squares |
| Connector stroke | `rgba(255,255,255,0.25)` | SVG lines |
| Menu divider | `rgba(255,255,255,0.1)` (`border-white/10`) | mobile menu wallet block top border |
| Menu backdrop | `rgba(0,0,0,0.9)` + `backdrop-blur-md` | mobile overlay |

Two easing curves, used consistently:
- **Entrance animations:** `cubic-bezier(0.16, 1, 0.3, 1)` (expo-out)
- **Interactive transitions (menu, hamburger):** `cubic-bezier(0.76, 0, 0.24, 1)` (expo-in-out)

---

# 3. SPACING SYSTEM — read this before writing any markup

## 3.1 The global reset kills all defaults

```css
* { margin: 0; padding: 0; box-sizing: border-box; }
```

This means **every space visible on the page is explicitly declared.** There are no inherited paragraph margins, no default list spacing, no button padding from the UA stylesheet. If a gap exists, it comes from one of the values in the tables below. `box-sizing: border-box` also means all `w-[…]`/`h-[…]` values *include* padding and border.

## 3.2 The page gutter (most important rule)

The whole composition hangs off a **two-value gutter**: **20px below `md`, 35px at `md` and above.** Four separate elements independently declare this same gutter, and they must match exactly or the layout visibly breaks alignment:

| Element | Mobile | `md`+ (≥768px) |
|---|---|---|
| `<nav>` horizontal padding | `px-5` → 20px | `md:px-[35px]` → 35px |
| `<h1>` left offset | `left-5` → 20px | `md:left-[35px]` → 35px |
| Bottom row left offset | `left-5` → 20px | `md:left-[35px]` → 35px |
| Bottom row right offset | `right-5` → 20px | `md:right-[35px]` → 35px |
| Mobile menu panel padding | `px-5` → 20px | (menu is hidden at `lg`+) |

The nav uses **padding**, while the H1 and bottom row use **absolute `left`/`right` offsets** — different mechanisms, identical result. The wordmark, the H1's first character, and the CTA button's left edge all land on the same vertical line.

**Vertical gutter** is asymmetric — the nav's is 20/27px, the bottom row's is 20/35px:

| Element | Mobile | `md`+ |
|---|---|---|
| `<nav>` vertical padding | `py-5` → 20px | `md:py-[27px]` → 27px |
| Bottom row bottom offset | `bottom-5` → 20px | `md:bottom-[35px]` → 35px |

## 3.3 Complete spacing reference — every value on the page

Tailwind numeric classes used (1 unit = 4px):

| Class | Computed | Where |
|---|---|---|
| `px-5` / `py-5` | 20px | nav padding, menu panel horizontal padding |
| `left-5` / `right-5` / `bottom-5` / `top-5` | 20px | H1 offset, bottom row offsets, menu close button |
| `gap-5` | 20px | bottom row gap (mobile, stacked) |
| `gap-3` | 12px | mobile menu row: number ↔ label |
| `mb-3` | 12px | mobile menu wallet row 1 bottom margin |
| `gap-8` | 32px | mobile menu nav list vertical gap |
| `pt-10` / `pb-10` | 40px | menu wallet block top padding, menu panel bottom padding |
| `pt-24` | 96px | menu panel top padding |
| `mt-auto` | — | pushes menu wallet block to the bottom |
| `ml-auto` | — | pushes nav right group / hamburger to the right |

Arbitrary bracket values used:

| Value | Where |
|---|---|
| `2px` | vertical padding — `PRIME_MEMBER` chip, `NOT A BANK` badge |
| `3px` | gap between nav item number and label; chip border radius |
| `4px` | `mt-[4px]` above every node description paragraph |
| `5px` | horizontal padding — `PRIME_MEMBER` chip |
| `6px` | horizontal padding — `NOT A BANK — AN ECOSYSTEM` badge |
| `8px` | gap in mobile menu wallet row 2 (`STATUS:` ↔ chip) |
| `10px` | CTA button internal gap (star ↔ label); mobile menu wallet row 1 gap; badge bottom margin |
| `12px` | nav right-group gap; CTA vertical padding at `md`+ |
| `16px` | CTA horizontal padding on mobile |
| `18px` | `mb-[18px]` — info card paragraph bottom margin |
| `20px` | gutter; `ml-[20px]` before `STATUS:`; info card body padding `p-[20px]`; CTA horizontal padding at `md`+ |
| `27px` | nav vertical padding at `md`+ |
| `35px` | gutter at `md`+ |
| `40px` | nav left-group gap AND nav links gap; hamburger/close button box size |

## 3.4 Elements with NO padding or margin

Do not add spacing to these — they are positioned purely by absolute coordinates or flex:

- `<section>`, the `<video>`, the content layer `<div>`
- The mobile menu wrapper and backdrop (both `inset-0`)
- `<h1>` (positioned by `top`/`left` only)
- All grid lines and plus marks
- The `CentralNodes` container, all three squares, all connector SVGs
- Node label `<span>`s (only their sibling `<p>` has `mt-[4px]`)
- The info card outer wrapper (padding lives on the inner body div)

---

## 4. `src/index.css` — reset, font classes, keyframes

```css
@tailwind base;
@tailwind components;
@tailwind utilities;

* { margin: 0; padding: 0; box-sizing: border-box; }
body { background: #000; overflow-x: hidden; }

.font-graphik { font-family: 'Graphik LCG Regular Regular', 'Graphik LCG', sans-serif; }
.font-manrope { font-family: 'Manrope', sans-serif; }

@keyframes fadeUp      { from { opacity: 0; transform: translateY(18px); }  to { opacity: 1; transform: translateY(0); } }
@keyframes fadeIn      { from { opacity: 0; }                                to { opacity: 1; } }
@keyframes slideInLeft { from { opacity: 0; transform: translateX(-20px); } to { opacity: 1; transform: translateX(0); } }
@keyframes slideInRight{ from { opacity: 0; transform: translateX(20px); }  to { opacity: 1; transform: translateX(0); } }
@keyframes scaleIn     { from { opacity: 0; transform: scale(0.85); }       to { opacity: 1; transform: scale(1); } }
@keyframes drawLine    { from { opacity: 0; stroke-dashoffset: 100; }       to { opacity: 1; stroke-dashoffset: 0; } }
@keyframes gridReveal  { from { opacity: 0; transform: scaleY(0); }         to { opacity: 1; transform: scaleY(1); } }
@keyframes gridRevealH { from { opacity: 0; transform: scaleX(0); }         to { opacity: 1; transform: scaleX(1); } }

.anim-fade-up     { opacity: 0; animation: fadeUp       0.9s cubic-bezier(0.16,1,0.3,1) forwards; }
.anim-fade-in     { opacity: 0; animation: fadeIn       0.8s cubic-bezier(0.16,1,0.3,1) forwards; }
.anim-slide-left  { opacity: 0; animation: slideInLeft  0.8s cubic-bezier(0.16,1,0.3,1) forwards; }
.anim-slide-right { opacity: 0; animation: slideInRight 0.8s cubic-bezier(0.16,1,0.3,1) forwards; }
.anim-scale-in    { opacity: 0; animation: scaleIn      0.7s cubic-bezier(0.16,1,0.3,1) forwards; }
.anim-grid-v      { opacity: 0; transform-origin: top;  animation: gridReveal  1.2s cubic-bezier(0.16,1,0.3,1) forwards; }
.anim-grid-h      { opacity: 0; transform-origin: left; animation: gridRevealH 1.2s cubic-bezier(0.16,1,0.3,1) forwards; }
.anim-draw-line   { stroke-dasharray: 100; stroke-dashoffset: 100; animation: drawLine 1s cubic-bezier(0.16,1,0.3,1) forwards; }
```

Note the animation transform distances are themselves a spacing decision: `fadeUp` travels **18px** vertically, the slide animations travel **20px** horizontally, and `scaleIn` starts at **0.85**. Every animated element starts at `opacity: 0` and uses `forwards` so it holds its end state. Stagger is driven purely by inline `style={{ animationDelay: 'Xms' }}`.

## 5. Root structure

```
<section class="relative w-full h-screen overflow-hidden bg-black">   ← no padding
  ├── <video>                          ← layer 0, absolute inset-0
  └── <div class="relative z-10 w-full h-full">   ← content layer, no padding
        ├── <nav>                      ← absolute top strip, px-5/35 py-5/27
        ├── mobile menu overlay        ← fixed inset-0 z-50
        ├── <h1>                       ← absolute, no padding
        ├── <GridLines />              ← 4 vertical + 2 horizontal + 8 plus marks
        ├── <CentralNodes />           ← 3 squares + 3 labels + 6 connector lines
        └── bottom row                 ← absolute, inset 20/35px
```

## 6. Background video (layer 0)

Full-bleed autoplaying looped muted video, cover-fitted, fading in on load:

```jsx
<video
  className="absolute inset-0 w-full h-full object-cover anim-fade-in"
  src="https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260813_115057_94c3699b-0fd1-4124-bcf3-3626bb8c1f77.mp4"
  autoPlay
  muted
  loop
  playsInline
/>
```

Use that **exact CloudFront URL**. `muted` + `playsInline` are mandatory or iOS/Chrome will block autoplay. There is **no dark overlay or gradient scrim** over the video — text sits directly on it.

## 7. Top navigation

```jsx
<nav className="absolute top-0 left-0 w-full flex items-center px-5 md:px-[35px] py-5 md:py-[27px]">
```

**Nav spacing map:**

| Property | Mobile | `md`+ |
|---|---|---|
| Horizontal padding | 20px | 35px |
| Vertical padding | 20px | 27px |
| Total nav height | 20 + 21 + 20 = **61px** | 27 + 21 + 27 = **75px** |

(Content height is 21px — the wordmark's `leading-[21px]`, the tallest child.)

**Left group** — `flex items-center gap-[40px]`. The 40px gap separates the wordmark from the nav-links container.

1. **Wordmark** — literal string `LŪMEN // ÍNDEX`, class `font-graphik text-white text-[18px] md:text-[21px] leading-[21px] whitespace-nowrap anim-fade-up`, delay **200ms**. No margin or padding.
2. **Nav links** — `hidden lg:flex items-center gap-[40px]`. Another 40px, this time *between each of the four items*. Four `NavItem` components:

| number | label | delay |
|---|---|---|
| 01 | ECOSYSTEM | 350ms |
| 02 | LIQUIDITY_POOLS | 450ms |
| 03 | LUMEN_INDEX | 550ms |
| 04 | GOVERNANCE | 650ms |

`NavItem({ number, label, delay })` — wrapper `flex items-center gap-[3px] anim-fade-up`. The **3px gap** is deliberately tight so `01.` reads as attached to its label rather than as a separate item. Inside: a number span `font-manrope text-[#AFDDFF]/80 text-[13px] leading-[15.6px]` rendering `{number}.` (trailing period), then a label span `font-manrope text-white text-[13px] leading-[15.6px] cursor-pointer hover:text-[#AFDDFF] transition-colors`.

**Right group** — `hidden lg:flex items-center gap-[12px] ml-auto anim-slide-right`, delay **600ms**. `ml-auto` pushes it to the far right. A uniform **12px** gap separates all five children, with one exception:

| # | Child | Spacing notes |
|---|---|---|
| 1 | `<Wallet>` icon, `w-[15px] h-[15px]`, `strokeWidth={1.5}` | — |
| 2 | `0x71...f4e2` — `font-manrope text-white text-[13px] leading-[15.6px]` | 12px from icon |
| 3 | `[ CONNECTED ]` — same, `text-[#AFDDFF]` | 12px |
| 4 | `STATUS:` — white, **plus `ml-[20px]`** | 12 + 20 = **32px** effective — this breaks the strip into two visual clusters |
| 5 | `PRIME_MEMBER` chip | 12px |

**`PRIME_MEMBER` chip box model:** `bg-[#AFDDFF] rounded-[3px] px-[5px] py-[2px]` with `text-black text-[13px] leading-[15.6px]`. Rendered height = 2 + 15.6 + 2 = **19.6px**. This is the *only* rounded element on the entire page.

**Hamburger button** — `lg:hidden ml-auto relative w-[40px] h-[40px] flex items-center justify-center anim-fade-in`, delay **400ms**, `aria-label="Toggle menu"`, toggles `menuOpen`. **No padding** — it is a fixed 40×40 box centering a 22px icon, giving a 9px optical inset on each side and a comfortable tap target. It contains **two absolutely stacked spans** that cross-fade with rotation:

- Menu icon span: `opacity-100 rotate-0 scale-100` when closed → `opacity-0 rotate-90 scale-50` when open
- X icon span: `opacity-0 -rotate-90 scale-50` when closed → `opacity-100 rotate-0 scale-100` when open
- Both: `absolute transition-all duration-300 ease-[cubic-bezier(0.76,0,0.24,1)]`, icons `w-[22px] h-[22px] text-white` `strokeWidth={1.5}`

## 8. Mobile menu overlay

Wrapper: `fixed inset-0 z-50 lg:hidden transition-all duration-500 ease-[cubic-bezier(0.76,0,0.24,1)]`, toggling `visible` / `invisible` — visibility (not `hidden`) so the exit transition can play. No padding.

**Backdrop:** `absolute inset-0 bg-black/90 backdrop-blur-md transition-opacity duration-500 ease-[cubic-bezier(0.76,0,0.24,1)]`, `opacity-100` ↔ `opacity-0`, click closes the menu. No padding.

**Panel:** `relative h-full flex flex-col px-5 pt-24 pb-10 transition-all duration-500 ease-[...]`, animating `opacity-100 translate-y-0` ↔ `opacity-0 -translate-y-4` (16px).

**Panel spacing map:**

| Side | Value | Reason |
|---|---|---|
| Left / right | `px-5` → 20px | matches the page gutter |
| Top | `pt-24` → **96px** | clears the 61px nav plus the close button, so the first nav item starts well below the header |
| Bottom | `pb-10` → 40px | breathing room under the wallet block |

- **Close button:** `absolute top-5 right-5 w-[40px] h-[40px] flex items-center justify-center`, `aria-label="Close menu"`, containing an `<X>` at `w-[22px] h-[22px] text-white` `strokeWidth={1.5}`. The 20px top/right offsets align it with the hamburger it replaces.
- **Nav list:** `flex flex-col gap-8` → **32px between items**. Each row is `transition-all duration-500 ease-[cubic-bezier(0.76,0,0.24,1)]` animating `opacity-100 translate-x-0` ↔ `opacity-0 -translate-x-6` (24px), with **staggered `transitionDelay` of `${150 + i * 75}ms` when open, `0ms` when closing** (they cascade in, snap out together). Inner row: `flex items-center gap-3` → **12px** between number and label. Number: `font-manrope text-[#AFDDFF]/80 text-[14px] leading-[1]`. Label: `font-manrope text-white text-[28px] leading-[1.2] tracking-tight`.
- **Wallet block, pinned bottom:** `mt-auto pt-10 border-t border-white/10`. `mt-auto` absorbs all free space to push it down; **40px `pt-10`** sits between the divider rule and the first wallet row. Same 500ms transition, animating `opacity-100 translate-y-0` ↔ `opacity-0 translate-y-4` (16px), `transitionDelay` **450ms** open / 0ms closed.
  - Row 1 — `flex items-center gap-[10px] mb-3`: **10px** between children, **12px** below the row. Contains Wallet icon (15px) + `0x71...f4e2` + `[ CONNECTED ]`.
  - Row 2 — `flex items-center gap-[8px]`: **8px** between `STATUS:` and the `PRIME_MEMBER` chip (chip styling identical to desktop).

## 9. Main heading

Exact copy: **`Liquid Assets. Luminous Returns.`**

```
font-graphik text-white font-normal leading-[1em] absolute anim-fade-up
text-[32px]      sm:text-[48px]      md:text-[68px]
top-[140px]      sm:top-[160px]      md:top-[178px]
left-5                               md:left-[35px]
max-w-[300px]    sm:max-w-[420px]    md:max-w-[554px]
```

Delay **400ms**. **No padding or margin** — position comes entirely from `top`/`left`.

**H1 spacing rationale:**

| Breakpoint | `top` | Nav height | Clear space below nav |
|---|---|---|---|
| < 640px | 140px | 61px | 79px |
| 640–767px | 160px | 61px | 99px |
| ≥ 768px | 178px | 75px | 103px |

`left` matches the page gutter exactly (20px → 35px). The tight `leading-[1em]` combined with `max-w` is what forces the wrap into three stacked lines — at `md` the 554px cap breaks it after "Liquid Assets." and again after "Luminous". Do not add letter-spacing.

## 10. Grid lines + plus intersections

A `GridLines` component. **No padding anywhere** — everything is percentage-positioned against the full viewport. Two hard-coded position arrays:

```js
const verticalPositions   = ['12.6%', '37.5%', '61.9%', '86.2%'];
const horizontalPositions = ['32.7%', '71.4%'];
```

- **Vertical lines:** each `absolute top-0 h-full w-px bg-white/[0.04] anim-grid-v`, `style={{ left, animationDelay: `${600 + i * 100}ms` }}` → 600, 700, 800, 900ms. **1px wide, full viewport height, zero margin.** Wipe downward (`transform-origin: top`).
- **Horizontal lines:** each `absolute left-0 w-full h-px bg-white/[0.04] anim-grid-h`, `style={{ top, animationDelay: `${800 + i * 150}ms` }}` → 800, 950ms. **1px tall, full width.** Wipe rightward (`transform-origin: left`).
- **Plus marks:** nest the loops to place a mark at all **8** intersections. Wrapper `absolute anim-scale-in` at `{ top, left }`, delay `${1000 + (hi * 4 + vi) * 80}ms` → 1000, 1080, 1160, 1240, 1320, 1400, 1480, 1560ms. Two bars crossing at the exact point — the **`-translate-x-1/2 -translate-y-1/2` on both bars is what centers the plus on the intersection**; without it the mark hangs down-right of the crossing:
  - horizontal bar: `absolute w-[10px] h-px bg-white/70 -translate-x-1/2 -translate-y-1/2`
  - vertical bar: `absolute w-px h-[10px] bg-white/70 -translate-x-1/2 -translate-y-1/2`

Each plus is a **10×10px** cross. The grid stays visible at all breakpoints.

## 11. Central nodes — squares, labels, connectors

`CentralNodes` component: `absolute inset-0 pointer-events-none hidden md:block` — **the entire node system is hidden below `md` (768px)**, and has no padding.

Every square: `absolute w-[80px] h-[80px] lg:w-[100px] lg:h-[100px] border border-white/80 anim-scale-in`. **Empty — no padding, no content.** Because of `box-sizing: border-box` the 1px border is inside the 80/100px box.

Every label group is an absolutely positioned block with **no padding**, containing:
- title span — `font-manrope text-white text-[13px] leading-[15.6px] whitespace-nowrap`
- description `<p>` — `font-manrope text-white/50 text-[11px] leading-[14px] mt-[4px]` — the **only** spacing inside a label group is that 4px top margin.

| Node | Square pos | Square delay | Label pos | Label anim / delay | Title | Description | Description max-w |
|---|---|---|---|---|---|---|---|
| 1 | `top-[27%] left-[60%]` | 1500ms | `top-[11%] left-[26%]` | `anim-slide-left` / 1100ms | `[ CORE_ENTITY ]` | Neural node processing real-time data streams. | `max-w-[160px]` |
| 2 | `top-[58%] left-[32%]` | 1800ms | `top-[76%] left-[3%]` | `anim-slide-left` / 1400ms | `[ LUMINOUS_INSIGHT ]` | Deep-learning engine synthesizing raw inputs. | `max-w-[160px]` |
| 3 | `top-[63%] left-[50%]` | 2100ms | `top-[50%] left-[78%]` | `anim-slide-right` / 1700ms | `[ CONNECTIVITY ]` | Latency-free transmission across distributed networks. | `max-w-[180px]` |

**Connector lines.** A `ConnectorLine({ x1, y1, x2, y2, delay })` component — each renders its own full-bleed SVG so percentage coordinates resolve against the viewport:

```jsx
<svg className="absolute inset-0 w-full h-full pointer-events-none anim-fade-in"
     style={{ animationDelay: `${delay}ms` }}>
  <line x1={x1} y1={y1} x2={x2} y2={y2}
        stroke="rgba(255,255,255,0.25)" strokeWidth="1" vectorEffect="non-scaling-stroke" />
</svg>
```

Six lines in elbow pairs (one horizontal run, then one diagonal into the square's top-left corner):

| # | x1 | y1 | x2 | y2 | delay |
|---|---|---|---|---|---|
| 1 (CORE_ENTITY, horizontal) | 38% | 14% | 52% | 14% | 1200ms |
| 2 (CORE_ENTITY, diagonal) | 52% | 14% | 60% | 27% | 1400ms |
| 3 (LUMINOUS_INSIGHT, diagonal) | 32% | 58% | 20% | 74% | 1500ms |
| 4 (LUMINOUS_INSIGHT, horizontal) | 20% | 74% | 6% | 74% | 1700ms |
| 5 (CONNECTIVITY, horizontal) | 78% | 53% | 63% | 53% | 1800ms |
| 6 (CONNECTIVITY, diagonal) | 63% | 53% | 50% | 63% | 2000ms |

Each pair's diagonal endpoint matches its square's `top`/`left` exactly (60%/27%, 32%/58%, 50%/63%), so the elbow lands precisely on the square's top-left corner. The horizontal runs start a few percent away from the label text, leaving a small visual gap rather than touching the type.

## 12. Bottom row

```jsx
<div className="absolute bottom-5 md:bottom-[35px] left-5 md:left-[35px] right-5 md:right-[35px]
                flex flex-col md:flex-row items-start md:items-end justify-between gap-5 md:gap-0">
```

**Bottom row spacing map:**

| Property | Mobile | `md`+ |
|---|---|---|
| Bottom offset | 20px | 35px |
| Left / right offset | 20px | 35px |
| Direction | `flex-col` stacked | `flex-row` spread |
| Alignment | `items-start` | `items-end` (baselines the CTA with the card's bottom edge) |
| Gap | `gap-5` → 20px | `md:gap-0` → **0**, because `justify-between` handles separation |

**Left CTA button:**

```jsx
<button className="bg-[#AFDDFF] px-[16px] md:px-[20px] py-[10px] md:py-[12px] flex items-center gap-[10px]
                   hover:bg-[#c8e8ff] transition-colors anim-fade-up"
        style={{ animationDelay: '900ms' }}>
  <span className="text-black text-[16px] leading-none">&#10022;</span>
  <span className="font-manrope text-black text-[12px] md:text-[13px] leading-[15.6px] uppercase tracking-wide">
    Explore Private Banking
  </span>
</button>
```

**CTA box model:**

| Property | Mobile | `md`+ |
|---|---|---|
| Horizontal padding | 16px | 20px |
| Vertical padding | 10px | 12px |
| Internal gap (star ↔ label) | 10px | 10px |
| Label size | 12px | 13px |
| Rendered height | 10 + 16 + 10 = **36px** | 12 + 16 + 12 = **40px** |

The icon is the HTML entity `&#10022;` (✦, four-pointed star) at 16px with `leading-none` — **not** a lucide icon. **Square corners — no border radius.** `tracking-wide` (0.025em) on the uppercase label.

**Right info card:** `relative max-w-[280px] hidden sm:block anim-slide-right`, delay **1100ms**. Hidden below 640px. **The wrapper itself has no padding** — it only caps width at 280px.

1. **Badge above the card:** `font-manrope text-black text-[13px] leading-[15.6px] bg-[#AFDDFF] px-[6px] py-[2px] inline-block mb-[10px]` reading `NOT A BANK — AN ECOSYSTEM` (em dash, not hyphen). Box: **6px horizontal / 2px vertical padding**, rendered height 19.6px, with **10px below** separating it from the card. `inline-block` keeps it hugging its text rather than filling 280px. **Square corners** — unlike the rounded `PRIME_MEMBER` chip.

2. **Card body:** `relative p-[20px]` — a **uniform 20px on all four sides**. It contains, first, an absolutely positioned SVG drawing the **chamfered border** (a rectangle with the bottom-left corner cut off):

```jsx
<svg className="absolute inset-0 w-full h-full pointer-events-none"
     viewBox="0 0 280 168" preserveAspectRatio="none">
  <polygon points="0.5,0.5 279.5,0.5 279.5,167.5 30,167.5 0.5,137.5"
           fill="none" stroke="#AFDDFF" strokeWidth="1" vectorEffect="non-scaling-stroke" />
</svg>
```

The `0.5` offsets keep the 1px stroke crisp on the pixel grid; `vectorEffect="non-scaling-stroke"` with `preserveAspectRatio="none"` holds the stroke at exactly 1px despite non-uniform stretching. The **chamfer is 30px wide × 30px tall** (from `30,167.5` to `0.5,137.5`) — a 45° cut on the bottom-left.

**Why the viewBox is `0 0 280 168`:** it matches the card's natural rendered size, so the polygon isn't distorted. That height is the sum of the box model:

```
20px  padding-top
90px  paragraph (5 lines × 18px leading at 240px content width)
18px  mb-[18px]
15.6px link line
20px  padding-bottom
─────
≈168px
```

Content width is 280 − 20 − 20 = **240px**.

3. **Paragraph:** `relative font-manrope text-white text-[13px] leading-[18px] mb-[18px]` — "Maps the complexity of modern finance with a partner that brings clarity and organic growth to your portfolio." The `relative` is **required** to stack above the absolute SVG.
4. **Link:** `relative font-manrope text-[#AFDDFF] text-[13px] leading-[15.6px] cursor-pointer hover:underline` reading `VIEW_TRANSPARENCY_REPORT`. No margin — the paragraph's 18px bottom margin provides the separation.

## 13. Responsive behavior summary

Tailwind default breakpoints: `sm` 640px, `md` 768px, `lg` 1024px.

| Element | < 640px | 640–767px | 768–1023px | ≥ 1024px |
|---|---|---|---|---|
| Nav padding | `px-5 py-5` (20/20) | 20/20 | `px-[35px] py-[27px]` | 35/27 |
| Wordmark | 18px | 18px | 21px | 21px |
| Nav links / wallet strip | hidden | hidden | hidden | visible |
| Hamburger | visible | visible | visible | hidden |
| H1 size / top / max-w | 32px / 140px / 300px | 48px / 160px / 420px | 68px / 178px / 554px | same as md |
| H1 left | 20px | 20px | 35px | 35px |
| Grid + plus marks | visible | visible | visible | visible |
| Central nodes (all 3) | **hidden** | **hidden** | visible, 80px squares | visible, 100px squares |
| Bottom row inset | 20px | 20px | 35px | 35px |
| Bottom row layout | stacked, `gap-5` | stacked, `gap-5` | row, `items-end`, `gap-0` | row |
| CTA padding / text | 16/10px, 12px | 16/10px, 12px | 20/12px, 13px | same |
| Info card | **hidden** | visible | visible | visible |

Note the deliberate asymmetry: the nav collapses at `lg` (1024px), the node diagram disappears at `md` (768px), and the info card at `sm` (640px). Three different cutoffs, not one uniform mobile breakpoint.

## 14. Full entrance timeline

| Delay | Element |
|---|---|
| 0ms | background video fades in |
| 200ms | `LŪMEN // ÍNDEX` wordmark |
| 350 / 450 / 550 / 650ms | nav items 01–04 |
| 400ms | H1 · hamburger (mobile) |
| 600ms | wallet strip slides in from right |
| 600 / 700 / 800 / 900ms | vertical grid lines wipe down |
| 800 / 950ms | horizontal grid lines wipe right |
| 900ms | CTA button |
| 1000→1560ms (80ms steps) | 8 plus marks pop in |
| 1100ms | `[ CORE_ENTITY ]` label · info card slides in from right |
| 1200 / 1400ms | CORE_ENTITY connector elbow |
| 1400ms | `[ LUMINOUS_INSIGHT ]` label |
| 1500ms | CORE_ENTITY square · LUMINOUS_INSIGHT connector 1 |
| 1700ms | `[ CONNECTIVITY ]` label · LUMINOUS_INSIGHT connector 2 |
| 1800ms | LUMINOUS_INSIGHT square · CONNECTIVITY connector 1 |
| 2000ms | CONNECTIVITY connector 2 |
| 2100ms | CONNECTIVITY square |

Total choreography ≈ 2.8s. The pattern is intentional: labels and connectors arrive *before* the squares they point to.

## 15. Non-negotiables

- Only ONE piece of React state: `const [menuOpen, setMenuOpen] = useState(false)`.
- Section is `h-screen overflow-hidden` — the page never scrolls.
- Keep the global `* { margin: 0; padding: 0; box-sizing: border-box; }` reset. Every spacing value in this spec assumes it.
- The **20px / 35px gutter** must be identical across the nav padding, H1 `left`, and bottom row `left`/`right`. This alignment is the backbone of the layout.
- All spacing/sizing uses Tailwind **arbitrary values** in brackets, not scale steps, except the handful of numeric classes listed in §3.3. `leading-[15.6px]` (13px × 1.2) recurs throughout — keep it exact.
- All bracketed labels keep inner spaces: `[ CONNECTED ]`, `[ CORE_ENTITY ]`, `[ LUMINOUS_INSIGHT ]`, `[ CONNECTIVITY ]`.
- Underscores in labels are literal: `LIQUIDITY_POOLS`, `LUMEN_INDEX`, `PRIME_MEMBER`, `VIEW_TRANSPARENCY_REPORT`.
- Nav numbers render with a trailing period: `01.` not `01`.
- `rounded-[3px]` appears exactly once (the `PRIME_MEMBER` chip). Every other box is square-cornered.
- Node positioning is `top`/`left` percentages with **no centering transform** — the coordinate marks each square's top-left corner, which is what makes the connectors line up. The plus marks are the opposite case: they *require* `-translate-x-1/2 -translate-y-1/2`.
- `pointer-events-none` on all decorative SVG and the node container so nothing blocks the CTA.

Ms 滚动落地页

No.1421 · 前端开发 · 社区/原生 · 来源：MotionSites (MIT) · EN 原文

**Create a React + Vite + Tailwind CSS v4 landing page for "WISA" -- a premium football/soccer organization website. The page has a scroll-driven video background, 3 content sections, and a glassmorphism footer. Use ONLY these dependencies: react 19, motion (framer-motion v12+), gsap, lucide-react, tailwindcss v4 with @tailwindcss/vite plugin. The design is dark, cinematic, minimal, with Manrope (sans) and JetBrains Mono (mono) fonts.**

---

### GLOBAL SETUP

**package.json dependencies (exact):**
```
react, react-dom ^19.0.0
motion ^12.23.24
gsap ^3.14.2
lucide-react ^0.546.0
tailwindcss ^4.1.14
@tailwindcss/vite ^4.1.14
@vitejs/plugin-react ^5.0.4
vite ^6.2.0
```

**vite.config.ts:** Use `@tailwindcss/vite` plugin + `@vitejs/plugin-react`. Alias `@` to project root.

**index.html:** Standard HTML5. Include `<script type="module" src="https://ajax.googleapis.com/ajax/libs/model-viewer/3.4.0/model-viewer.min.js"></script>` in head.

**src/index.css -- EXACT:**
```css
@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600;700&family=Manrope:wght@300;400;500;600;700&display=swap');
@import "tailwindcss";

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

@keyframes flyOutRight {
0% { transform: translateX(0); }
100% { transform: translateX(250%); }
}

@keyframes flyInLeft {
0% { transform: translateX(-250%); }
100% { transform: translateX(0); }
}

.animate-fly-out {
animation: flyOutRight 0.5s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

.animate-fly-in {
animation: flyInLeft 0.5s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

@keyframes flyOutUp {
0% { transform: translateY(0); }
100% { transform: translateY(-150%); }
}

@keyframes flyInUp {
0% { transform: translateY(150%); }
100% { transform: translateY(0); }
}

.animate-fly-out-up {
animation: flyOutUp 0.4s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

.animate-fly-in-up {
animation: flyInUp 0.4s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}
```

These define 4 keyframe animations:
- `flyOutRight / flyInLeft` (250% translateX, 0.5s) -- for the arrow button hover
- `flyOutUp / flyInUp` (150% translateY, 0.4s) -- for nav text hover
- All use `cubic-bezier(0.4, 0, 0.2, 1)` easing with `forwards` fill mode

---

### COMPONENT: ScrollReveal (`src/components/ScrollReveal.tsx` + `ScrollReveal.css`)

**ScrollReveal.css:**
```css
.scroll-reveal { margin: 0; }
.scroll-reveal-text { display: flex; flex-wrap: wrap; margin: 0; }
.word { display: inline-block; white-space: pre; }
```

**ScrollReveal.tsx:** A GSAP-powered word-by-word scroll reveal component.
- Props: `children` (string), `scrollContainerRef?`, `enableBlur` (default true), `baseOpacity` (default 0.1), `baseRotation` (default 3), `blurStrength` (default 4), `containerClassName`, `textClassName`, `rotationEnd` (default "bottom bottom"), `wordAnimationEnd` (default "bottom bottom")
- Splits children text by whitespace into `<span className="word">` elements using `useMemo`
- Three GSAP ScrollTrigger animations:
1. **Rotation**: Container rotates from `baseRotation` degrees to 0, origin "0% 50%", scrub true, trigger start "top bottom", end = `rotationEnd`
2. **Opacity**: Each `.word` fades from `baseOpacity` to 1, stagger 0.05, scrub true, trigger start "top bottom-=20%", end = `wordAnimationEnd`
3. **Blur** (if `enableBlur`): Each `.word` goes from `blur(blurStrength px)` to `blur(0px)`, same stagger/trigger as opacity
- Renders: `<h2 ref={containerRef} className="scroll-reveal {containerClassName}"><p className="scroll-reveal-text {textClassName}">{splitText}</p></h2>`
- Cleanup: kills all ScrollTrigger instances on unmount

---

### COMPONENT: Reveal (inline in App.tsx)

A motion.div wrapper for viewport-triggered fade-in:
```tsx
function Reveal({ children, delay = 0, className = "" }) {
return (
<motion.div
initial={{ opacity: 0, y: 30 }}
whileInView={{ opacity: 1, y: 0 }}
viewport={{ once: true, margin: "-50px" }}
transition={{ duration: 0.8, ease: [0.16, 1, 0.3, 1], delay }}
className={className}
>
{children}
</motion.div>
);
}
```
Easing is `[0.16, 1, 0.3, 1]` (ease-out-expo style).

---

### COMPONENT: NavItem (inline in App.tsx)

A hover-animated navigation link with vertical text fly animation:
- Uses a `cycle` counter state (useState(0))
- On `mouseEnter` and `mouseLeave`: increment cycle
- When `cycle === 0` (initial, no hover yet): render single `<span>` with `text-white/64` and `group-hover:text-white transition-colors duration-300`
- When `cycle > 0`: render TWO spans keyed by cycle -- one with `.animate-fly-out-up` (exits upward), one absolute-positioned with `.animate-fly-in-up` (enters from below)
- Container: `<a>` with `relative overflow-hidden group flex items-center justify-center py-1`

---

### MAIN APP (src/App.tsx) - ARCHITECTURE

**Video URL constant:**
```
const VIDEO_URL = 'https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260521_064421_279656fd-e76f-40a0-8fed-7456d4f7715a.mp4';
```

**State & Refs:**
- `arrowCycle` (useState(0)) -- for arrow button hover animation, same pattern as NavItem
- `videoRef` (useRef HTMLVideoElement)
- `videoContainerRef` (useRef HTMLDivElement)
- `isLoaded` (useState false) -- tracks when video is ready
- `screen3Ref` (useRef HTMLDivElement) -- reference to footer section for scroll calculation
- `scrollY` from motion's `useScroll()`
- `headerY` = `useTransform(scrollY, [0, 500, 800], [0, 0, -150])` -- header slides up and out after scrolling past 500px

---

### SCROLL-DRIVEN VIDEO - CRITICAL IMPLEMENTATION

**Effect 1: Video Loading**
```tsx
useEffect(() => {
const video = videoRef.current;
if (!video) return;
const handleCanPlay = () => setIsLoaded(true);
video.addEventListener('canplaythrough', handleCanPlay);
video.load();
return () => video.removeEventListener('canplaythrough', handleCanPlay);
}, []);
```

**Effect 2: Scroll-to-Video-Scrub (with the `video.seeking` guard)**
```tsx
useEffect(() => {
if (!isLoaded) return;
const video = videoRef.current;
if (!video || !video.duration) return;

const handleScroll = () => {
if (!screen3Ref.current || video.seeking) return;
// ^^ CRITICAL: "video.seeking" check tells the browser: "Only update the video
// frame when you've completely finished rendering the previous one."
// Without this guard, rapid scroll events queue up competing .currentTime assignments,
// causing visible frame tearing, flickering, and dropped frames. The browser's
// internal seek operation is asynchronous -- setting .currentTime while a previous
// seek is still in progress gets silently ignored or causes visual glitches.
// By checking video.seeking, we skip scroll events that arrive before the prior
// frame has been decoded and painted, resulting in smooth, tear-free scrubbing.

const rect = screen3Ref.current.getBoundingClientRect();
const absoluteTop = window.scrollY + rect.top;
const stopScroll = Math.max(1, absoluteTop - (window.innerHeight * 0.2));
const scrollFraction = Math.max(0, Math.min(1, window.scrollY / stopScroll));
video.currentTime = scrollFraction * video.duration;
};

window.addEventListener('scroll', handleScroll, { passive: true });
handleScroll();
return () => window.removeEventListener('scroll', handleScroll);
}, [isLoaded]);
```

The scroll fraction maps from 0 (top of page) to 1 (when the footer section is 20% of viewport height from top). This means the video plays through its full duration as the user scrolls from top to the footer.

---

### SECTION 0: LOADING SCREEN

Shown when `!isLoaded`. Fixed fullscreen, z-50, black bg, centered:
- "LOADING" text: `text-[10px] font-mono tracking-widest mb-4 text-white/50`
- Progress bar below: `w-64 h-[1px] bg-white/10 mt-8 overflow-hidden` with inner `h-full bg-white w-1/3 animate-pulse`

---

### LAYER STRUCTURE

The entire page is layered:
1. **Fixed video background** (`fixed inset-0 z-0 bg-black`) -- video is absolutely centered with cover behavior using `transform: translate(-50%, -50%)`, `minWidth/minHeight: 100%`, `objectFit: cover`
2. **Fixed header** (z-20) -- animated with motion, slides out via `headerY` transform
3. **Scrollable content** (`relative z-10 pointer-events-none`) -- all sections flow here, with `pointer-events-auto` on interactive areas

---

### SECTION 1: HERO (Screen 1)

Container: `w-[90%] mx-auto h-screen flex flex-col py-8 md:py-12 lg:py-16 pb-12`

Inner main: `flex-1 w-full pointer-events-auto flex flex-col md:grid md:grid-cols-12 md:grid-rows-[1fr_auto] gap-y-8 md:gap-y-0 md:gap-x-8`

**Grid layout (desktop 12-col, 2-row):**

1. **Heading** (bottom-left): `md:row-start-2 md:col-start-1 md:col-span-8 flex items-end`
- H1: `text-[clamp(2.5rem,6vw,5rem)] leading-[1.05] font-medium tracking-tight text-white whitespace-nowrap`
- Text: "Championing" `<br/>` "The Pitch Of Legends"
- Wrapped in `<Reveal delay={0.2}>`

2. **Description paragraph** (center-right): `md:row-start-1 md:col-start-8 md:col-span-5 flex flex-col justify-center items-start md:items-end text-left md:text-right`
- Paragraph: `text-[clamp(1rem,1.6vw,1.375rem)] text-white/64 leading-[1.3] font-normal max-w-[460px] relative -top-[90px]`
- Text: "Advanced preparation and training of world-class football teams for leagues, tournaments, and trophies. **We bring the trophy closer to your cabinet.**" (bold part is `font-semibold text-white`)
- Wrapped in `<Reveal delay={0.3}>`

3. **CTA Button** (bottom-right): `md:row-start-2 md:col-start-8 md:col-span-5 flex items-end justify-start md:justify-end`
- Two-part button with 1px gap (`flex items-stretch gap-1 group cursor-pointer`)
- **Text part**: `px-8 py-5 bg-white/8 backdrop-blur-[80px]` -> on group-hover: `bg-white`. Text: "EXPLORE OUR STADIUMS" in `font-mono text-[12px] tracking-[-0.01em] text-white/90` -> hover: `text-black`
- **Arrow part**: `px-6 bg-white/8 backdrop-blur-[80px]` -> hover: `bg-white`. Contains `<ArrowRight>` (lucide, w-5 h-5) with the same fly-out/fly-in animation pattern as NavItem but horizontal (`.animate-fly-out` / `.animate-fly-in`)
- `arrowCycle` state drives the animation, same increment pattern on mouseEnter/mouseLeave
- Wrapped in `<Reveal delay={0.4}>`

---

### SECTION 1.5: SPACER

`<div className="h-[200px] w-full"></div>` -- 200px empty gap

---

### SECTION 2: SCROLL-REVEAL TEXT + 3-COLUMN GRID

Container: `w-[90%] mx-auto min-h-screen flex flex-col justify-center py-8 md:py-12 lg:py-16 pointer-events-auto`

Inner: `max-w-[1200px] w-full`

**ScrollReveal component usage:**
```tsx
<ScrollReveal
baseOpacity={0.1}
enableBlur={true}
baseRotation={3}
blurStrength={4}
textClassName="text-[clamp(2rem,4.5vw,4rem)] leading-[1.1] font-medium tracking-tight text-white w-full"
>
Complete Football Programs For Professional Player Development. We Build The Foundations For Next-Generation Strikers, Midfielders, And Star Defenders.
</ScrollReveal>
```

**3-Column Grid below** (`mt-24 grid grid-cols-1 md:grid-cols-12 gap-12 md:gap-8`):

1. **Col 1 (md:col-span-4)**: Globe SVG (71x43 wireframe globe) + WISA logo SVG (157x25, scaled to h-[18px] w-auto) side by side with `gap-4`. Below: tagline "Winning the future on pitch" in `text-[11px] font-mono tracking-widest text-white/60 uppercase leading-relaxed`. Wrapped in `<Reveal delay={0.1}>`

2. **Col 2 (md:col-span-4)**: H3 "Performance Analytics / Facilities" (`text-xl font-medium text-white`), paragraph below (`text-[15px] text-white/80 leading-relaxed`). Wrapped in `<Reveal delay={0.2}>`

3. **Col 3 (md:col-span-4)**: H3 "Matchday Premium / Fan Experiences!" same styling, paragraph same styling. Wrapped in `<Reveal delay={0.3}>`

---

### SECTION 2.5: SPACER

Another `h-[200px]` spacer

---

### SECTION 3: FOOTER (ref={screen3Ref})

This is the scroll endpoint for the video scrub calculation. Wrapped in `pointer-events-auto`.

**Footer container**: `width: 90%, margin: 0 auto, paddingBottom: 64px` (inline styles)

**Inner card** (glassmorphism): `backgroundColor: rgba(26, 26, 26, 0.6)`, `backdropFilter: blur(80px)`, `WebkitBackdropFilter: blur(80px)`, `border: 1px solid rgba(255, 255, 255, 0.1)`, `padding: clamp(32px, 4vw, 64px)` -- all inline styles

**CTA Section** (top of footer card):
- Flexbox wrap, `alignItems: flex-end`, `justifyContent: space-between`, `gap: 40px`
- Bottom border: `1px solid rgba(255, 255, 255, 0.1)`, `paddingBottom: clamp(48px, 4vw, 80px)`
- H2: "Ready To Score / Your Winning Season?" -- `fontSize: clamp(2rem, 4.5vw, 3.5rem)`, `fontWeight: 500`, `letterSpacing: -0.02em`, `lineHeight: 1.05`
- Button: Same two-part pattern (text + arrow) but with white bg / black text, `padding: 20px 32px` and `20px 24px`. Text: "START YOUR SEASONS" in `font-mono, 12px, -0.01em tracking, bold 700`

**Footer Links Grid** (`paddingTop: clamp(48px, 4vw, 64px)`):
- CSS Grid: `repeat(auto-fit, minmax(160px, 1fr))`, `gap: clamp(32px, 3vw, 48px)`
- 4 columns:
1. **Brand**: WISA logo SVG (h:14px) + tagline paragraph (13px, rgba white 0.4, maxWidth 220)
2. **Company**: Header "COMPANY" (10px mono, 0.1em tracking, rgba white 0.3) + links: About, Rosters, Press, Contact (14px, rgba white 0.6)
3. **Services**: Header "SERVICES" same style + links: Coaching, Training Camp, Fitness, Tryout
4. **Connect**: Header "CONNECT" same style + links: LinkedIn, X / Twitter, YouTube, Newsletter

**Copyright Bar** (`marginTop: 56, paddingTop: 32, borderTop: 1px solid rgba white 0.1`):
- Flex wrap space-between
- Left: "2026 WISA. ALL RIGHTS RESERVED." (11px mono, rgba white 0.25, 0.1em tracking)
- Right: PRIVACY | TERMS links (same styling, gap-24px)

---

### FIXED HEADER

`<motion.header>` with:
- `style={{ y: headerY }}` -- slides out after scroll 500-800px
- `initial={{ opacity: 0, y: 20 }}`, `animate={{ opacity: 1 }}`, easing `[0.16, 1, 0.3, 1]`, duration 0.8
- Classes: `fixed top-0 left-1/2 -translate-x-1/2 z-20 w-[90%] flex items-center justify-between pointer-events-auto py-4 md:py-6 lg:py-8`

**Left: WISA Logo SVG** (157x25, white, 4 paths spelling "WISA")

**Right: Navigation bar** (`hidden lg:flex items-stretch bg-[#1A1A1A]/40 backdrop-blur-[80px]`):
- Nav links container: `flex items-center justify-between px-6 font-mono text-xs tracking-[-0.01em] w-[480px]`
- 5 NavItem components: LEAGUES, STADIUMS, TRAINING, COMPETITIONS, TICKETS
- CTA button: `bg-white text-black px-6 py-5 font-mono text-xs leading-4 font-bold tracking-[-0.01em] hover:bg-gray-200 transition-colors w-[148px]` -- text "BUY MATCH PASS"

---

### SVG ASSETS

**WISA Logo** (used 3 times -- header, section 2, footer): 157x25 viewBox, 4 white paths. The paths spell "W I S A" in a custom typeface.

**Globe icon** (used in section 2 col 1): 71x43 viewBox, wireframe globe with horizontal/vertical/meridian lines, stroke white, no fill.

Both SVGs are inlined directly. They are too detailed to describe -- copy the exact path data from the source code above.

---

### KEY DESIGN TOKENS SUMMARY

| Token | Value |
|-------|-------|
| Font sans | Manrope 300-700 |
| Font mono | JetBrains Mono 400-700 |
| Background | Pure black (#000) |
| Text primary | white |
| Text secondary | white/64 (rgba 255,255,255,0.64) |
| Text muted | white/60, white/50, white/40, white/25 |
| Glass bg | #1A1A1A at 40% opacity |
| Glass blur | 80px |
| Glass border | rgba(255,255,255,0.1) |
| Button bg | white/8 -> white on hover |
| Spacing rhythm | 90% viewport width container, clamp-based responsive values |
| Easing (motion) | [0.16, 1, 0.3, 1] |
| Easing (CSS) | cubic-bezier(0.4, 0, 0.2, 1) |

Growth Marketing SaaS

No.1422 · 前端开发 · 社区/原生 · 来源：MotionSites (MIT) · EN 原文

Build a single landing page with only a fixed Navbar and a full-screen Hero section that contains a parallax dashboard mock and a foreground grass image. Use React + Vite + TypeScript + Tailwind + framer-motion + lucide-react. No backend.

1. Global setup

`index.html` — add fonts in `<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@400;500;600;700;800&display=swap" rel="stylesheet" />
<link href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&display=swap" rel="stylesheet" />
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,400,0..1,0" rel="stylesheet" />
```

Body background must be `#08020e`.

`tailwind.config.ts` — extend
```ts
fontFamily: { inter: ['Inter','ui-sans-serif','system-ui','sans-serif'] },
colors: {
landing: {
surface: "rgba(255,255,255,0.10)",
"surface-hover": "rgba(255,255,255,0.16)",
border: "rgba(255,255,255,0.10)",
"border-strong": "rgba(255,255,255,0.20)",
text: "rgba(255,255,255,0.80)",
"text-muted": "rgba(255,255,255,0.60)",
},
}
```

`src/index.css` — add
```css
body { background-color: #08020e; margin: 0; min-height: 100vh; color: white; }

.landing-root {
--background: 0 0% 0%;
--foreground: 0 0% 98%;
--radius: 0.75rem;
background-color: hsl(var(--background));
color: hsl(var(--foreground));
}

/* Liquid glass utility */
.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;
}

.scrollbar-hide { -ms-overflow-style: none; scrollbar-width: none; }
.scrollbar-hide::-webkit-scrollbar { display: none; }
```

Wrap the page in `<div className="landing-root font-inter min-h-screen relative overflow-x-hidden">`.

2. Asset URLs (all remote — no local files)

- Hero background video: `https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260521_014404_fadafdb1-4df6-4699-be9c-77d25f39a3d0.mp4`
- Dashboard live-preview video: `https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260328_115001_bcdaa3b4-03de-47e7-ad63-ae3e392c32d4.mp4`
- Foreground grass PNG: `https://miptxtnhvjrkpmnjgdhk.supabase.co/storage/v1/object/public/training-assets/landing%2Fhero-bottom-bg.png`

3. Components

`MIcon` (Google Material Symbols)
```tsx
export const MIcon = ({ name, size = 16, className = "", filled = false, weight = 400, style }: {
name: string; size?: number; className?: string; filled?: boolean; weight?: number; style?: React.CSSProperties;
}) => (
<span aria-hidden className={`material-symbols-outlined select-none leading-none inline-flex items-center justify-center ${className}`}
style={{ fontSize: size, width: size, height: size,
fontVariationSettings: `'FILL' ${filled?1:0}, 'wght' ${weight}, 'GRAD' 0, 'opsz' ${Math.min(48,Math.max(20,size))}`,
...style }}>{name}</span>
);
```

`AnimatedText` — text slides up on hover, replacement slides in from below (40px, 0.2s easeInOut). Uses framer-motion `motion.div` parent (`overflow-hidden`) with two stacked `motion.span` children; rest variant `{y:0}` / `{y:40}`, hover variant `{y:-40}` / `{y:0}`.

`FadeUp` — framer-motion wrapper: `initial={{opacity:0, y:24}}`, `whileInView={{opacity:1, y:0}}`, `viewport={{once:true, amount:0.3}}`, `transition={{ duration:0.6, delay, ease:[0.22,1,0.36,1] }}`. Honors `useReducedMotion`. Accepts `delay`, `duration`, `y` props.

`PrimaryButton` — white pill CTA
- Classes: `inline-flex items-center justify-center rounded-full bg-white/80 hover:bg-white text-black leading-none transition-colors h-12 px-9 text-sm font-medium`
- Wraps children in `<AnimatedText>`.

`SecondaryButton` — glass pill
- Classes: `inline-flex items-center justify-center rounded-full bg-landing-surface hover:bg-landing-surface-hover border border-landing-border text-foreground backdrop-blur-[2.5px] font-medium leading-none h-8 px-4 text-sm` (size=sm)
- Wraps children in `<AnimatedText>`.

`HeroBadge`
```tsx
<div className="inline-flex items-center justify-center rounded-full bg-landing-surface border border-landing-border px-4 h-7 text-sm text-landing-text">
{children}
</div>
```

4. Navbar (fixed, transparent)

```tsx
const navItems = [
{ name: "About", href: "#about" },
{ name: "Features", href: "#features" },
{ name: "What you get", href: "#what-you-get" },
{ name: "Pricing", href: "#pricing" },
];
```

- `<nav className="fixed top-0 left-0 right-0 z-50 w-full bg-transparent">`
- Inner: `mx-auto flex h-16 max-w-[1080px] items-center justify-between px-6 lg:px-0`
- Left logo: `<a href="/" className="flex items-center gap-2 text-foreground">` with `<MIcon name="rocket_launch" size={20} />` + `<span className="text-base font-semibold tracking-tight">UI Rocket</span>`
- Center (lg only): `flex items-center gap-8`, each link `text-sm text-landing-text hover:text-foreground transition-colors`, wrap label in `<AnimatedText>`. Smooth-scroll on click via `document.getElementById(id)?.scrollIntoView({behavior:"smooth"})`.
- Right actions (lg only): `flex items-center gap-5` → "Login" link (same style as nav links, wrapped in AnimatedText) + `<SecondaryButton href="/auth" size="sm">Get started</SecondaryButton>`
- Mobile: menu button (`MIcon name="menu" size={24}`) opens a right-side sheet (use shadcn Sheet) with the same items stacked.

5. Hero section

```tsx
const HERO_VIDEO = "https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260521_014404_fadafdb1-4df6-4699-be9c-77d25f39a3d0.mp4";
const GRASS_IMG = "https://miptxtnhvjrkpmnjgdhk.supabase.co/storage/v1/object/public/training-assets/landing%2Fhero-bottom-bg.png";
```

Inside the Hero component, set up scroll-linked parallax:
```ts
const sectionRef = useRef<HTMLElement>(null);
const { scrollYProgress } = useScroll({ target: sectionRef, offset: ["start start", "end start"] });
const dashboardY = useTransform(scrollYProgress, [0, 1], ["0%", "-25%"]);
const grassY = useTransform(scrollYProgress, [0, 1], ["0%", "20%"]);
const contentY = useTransform(scrollYProgress, [0, 1], ["0%", "-60%"]);
const contentOpacity= useTransform(scrollYProgress, [0, 0.6], [1, 0]);
```

Structure:
```tsx
<section ref={sectionRef} id="hero" className="relative w-full min-h-screen">
{/* 1) Background video — full bleed, no overlay */}
<video src={HERO_VIDEO} autoPlay muted loop playsInline
className="absolute inset-0 w-full h-full object-cover z-0" />

{/* 2) Centered copy + CTA, with scroll fade/translate */}
<motion.div style={{ y: contentY, opacity: contentOpacity }}
className="relative z-20 flex flex-col items-center text-center px-4 sm:px-6 pt-28 sm:pt-36 md:pt-44 max-w-[980px] mx-auto">
<FadeUp delay={0}>
<HeroBadge>Founder member sale special</HeroBadge>
</FadeUp>
<FadeUp delay={0.1}>
<h1 className="mt-8 text-foreground text-[38px] sm:text-[52px] md:text-[64px] leading-[1.05] tracking-[-0.03em] max-w-[960px]">
Are you a designer or builder who wants to stay ahead of AI?
</h1>
</FadeUp>
<FadeUp delay={0.2}>
<p className="mt-6 text-landing-text text-base sm:text-lg leading-[1.5] max-w-[520px]">
Learn to turn your ideas into stunning websites with AI
</p>
</FadeUp>
<FadeUp delay={0.3} className="mt-10">
<PrimaryButton as="button">Get course</PrimaryButton>
</FadeUp>
</motion.div>

{/* 3) Dashboard mock — slower parallax (-25%) */}
<motion.div style={{ y: dashboardY }}
className="relative z-10 mt-8 sm:mt-10 md:mt-12 px-4 sm:px-6">
<DashboardMock />
</motion.div>

{/* 4) Foreground grass — in front of dashboard, drifts down 20% */}
<motion.img src={GRASS_IMG} alt="" aria-hidden style={{ y: grassY }}
className="pointer-events-none select-none absolute left-0 right-0 bottom-[-40px] sm:bottom-[-100px] lg:bottom-[-220px] w-full z-30 object-cover" />
</section>
```

6. DashboardMock — liquid-glass wrapper with two-column grid

```tsx
<div className="liquid-glass w-full max-w-[1100px] aspect-[3/4] sm:aspect-[16/10] lg:aspect-[16/9] rounded-2xl mx-auto overflow-hidden p-2 sm:p-3">
<div className="grid h-full grid-cols-1 sm:grid-cols-[minmax(220px,320px)_1fr] gap-2 sm:gap-3">
<div className="min-h-0 hidden sm:block"><ChatPanel animateMessagesIn /></div>
<div className="min-h-0"><LivePreviewHero /></div>
</div>
</div>
```

`ChatPanel` (left column)
- Container: `flex h-full flex-col overflow-hidden rounded-2xl border border-white/10`, inline style `background: rgba(8,8,10,0.6); backdropFilter: blur(24px); WebkitBackdropFilter: blur(24px)`.
- Header: `flex items-center gap-2 px-4 py-3 border-b border-white/5`. Circle `w-7 h-7 rounded-full bg-white/5 flex items-center justify-center` with `<MIcon name="auto_awesome" size={14} className="text-white/80" />`. Text column: `Vibe Design course` (`text-sm font-medium text-white`) + subtitle `Learn how to build website with AI` (`text-[11px] text-white/40`).
- Messages list: `flex-1 overflow-y-auto scrollbar-hide px-4 py-5 space-y-4`. Each row wrapped in `<FadeUp delay={i*0.12} y={16}>`. Layout:
- Row: `flex justify-end` (user) or `flex justify-start` (assistant).
- Bubble: `max-w-[85%] rounded-2xl px-4 py-2.5 text-sm leading-relaxed`; user = `bg-white/15 text-white/90`; assistant = `bg-white/5 text-white/70 border border-white/5`.
- Seed messages (exact text):
1. assistant — "Welcome to the Vibe Design course! I'll guide you through building stunning websites with AI. What would you like to learn first?"
2. user — "I want to learn how to build a hero section with a cinematic video background using AI."
3. assistant — "Great choice! In this course, you'll learn how to create full-screen looping videos, liquid glass nav bars, email signups, and manifesto buttons — all with AI assistance. Let's dive in!"
- Input: outer `p-3 border-t border-white/5`. Inner `liquid-glass rounded-2xl flex items-end gap-2 p-2` with a `<textarea rows={1}>` (`flex-1 resize-none bg-transparent px-3 py-2 text-sm text-white placeholder:text-white/40 focus:outline-none max-h-32`, placeholder "Ask about the course...") and a send button `bg-white text-black rounded-xl p-2 hover:bg-white/90` containing `<MIcon name="arrow_upward" size={16} className="text-black" />`. Enter (no shift) sends; appends a user message then a canned assistant reply. After updates, scroll list to bottom smoothly.

`LivePreviewHero` (right column)
Uses `lucide-react` icons `Globe, ArrowRight, Instagram, Twitter`.

- Outer: `relative w-full h-full min-h-[500px] overflow-hidden rounded-2xl bg-black`.
- Background video (with JS fade-in/out loop):
```tsx
<video ref={videoRef} src={DASHBOARD_VIDEO} muted autoPlay playsInline preload="auto"
className="absolute inset-0 w-full h-full object-cover translate-y-[17%]"
style={{ opacity: 0 }} />
```
Behavior (in `useEffect`):
- On `loadeddata`: set opacity 0, `play()`, fade opacity to 1 over 500ms via `requestAnimationFrame` linear tween.
- On `timeupdate`: when `duration - currentTime < 0.55s` and not already fading out, fade opacity to 0 over 500ms.
- On `ended`: snap opacity to 0, after 100ms reset `currentTime=0`, `play()`, reset fadingOut flag, fade back to 1.
- Cleanup all listeners and cancel RAF on unmount.

- Inner content stack (`relative z-10 flex flex-col min-h-full h-full`):

Mini-nav `relative z-20 px-3 sm:px-4 py-3`, inside a `rounded-full px-2 sm:px-4 py-1.5 flex items-center justify-between max-w-5xl mx-auto`:
- Left group `flex items-center gap-3 sm:gap-5`: `Globe size={14} text-white` + `<span className="text-white font-semibold text-xs sm:text-sm">Asme</span>`. After it, `hidden md:flex items-center gap-5` of links `Features`, `Pricing`, `About` each `text-white/80 hover:text-white text-[11px] font-medium`.
- Right group `flex items-center gap-2 sm:gap-3`: "Sign Up" link (`text-white text-[11px] font-medium hidden sm:inline`) + glass pill `<a className="liquid-glass rounded-full px-3 sm:px-4 py-1 text-white text-[11px] font-medium">Login</a>`.

Hero block `relative z-10 flex-1 flex flex-col items-center justify-center px-4 sm:px-6 py-4 text-center -translate-y-[8%] sm:-translate-y-[15%]`:
- `<h1 className="text-2xl sm:text-3xl md:text-4xl lg:text-5xl text-white mb-4 sm:mb-5 tracking-tight whitespace-nowrap" style={{ fontFamily: "'Instrument Serif', serif" }}>Built for the curious</h1>`
- Inner column `max-w-sm w-full space-y-3`:
- Email pill `liquid-glass rounded-full pl-4 pr-1.5 py-1.5 flex items-center gap-2`: `<input type="email" placeholder="Enter your email" className="flex-1 bg-transparent text-white placeholder:text-white/40 text-xs focus:outline-none" />` + circular submit `bg-white rounded-full p-1.5 text-black` with `<ArrowRight size={14} />`.
- Paragraph `text-white/80 text-[11px] leading-relaxed px-2`: "Stay updated with the latest news and insights. Subscribe to our newsletter today and never miss out on exciting updates."
- Centered glass pill button: `liquid-glass rounded-full px-5 py-1.5 text-white text-[11px] font-medium hover:bg-white/5 transition-colors` → label "Manifesto".

Socials row `relative z-10 flex justify-center gap-2 pb-4 sm:pb-6` — three glass round buttons (`liquid-glass rounded-full p-2 text-white/80 hover:text-white hover:bg-white/5 transition-all`) wrapping `Instagram`, `Twitter`, `Globe` icons at `size={14}`.

7. Page assembly

```tsx
export default function Page() {
return (
<div className="landing-root font-inter min-h-screen relative overflow-x-hidden">
<Navbar />
<Hero />
</div>
);
}
```

8. Behavioral notes (must match)

- Hero video is autoplay/muted/loop/playsInline with no dark overlay.
- Z-index stack: video `z-0`, dashboard `z-10`, copy/CTA `z-20`, grass `z-30`, navbar `z-50`.
- Hero copy fades + translates up to `-60%` during scroll through the section, fully fading by 60% scroll progress.
- Dashboard parallaxes up (`-25%`); grass drifts down (`+20%`) — creates depth.
- All button labels animate with the "text slides up, replacement slides in from below" effect via `AnimatedText`.
- Inter is the global UI font; the dashboard hero `<h1>` "Built for the curious" uses Instrument Serif.

Golden Portal

No.1423 · 前端开发 · 社区/原生 · 来源：MotionSites (MIT) · EN 原文

**Build a React + Vite + TypeScript + Tailwind CSS landing page called "Digital Archive" -- a high-end art gallery/studio showcase website. It should be dark, cinematic, and editorial in style. Use ONLY `lucide-react` for icons. No other UI libraries.**

---

### FONTS

Load two fonts in `index.html`:
1. **Arsenica Trial Light** (serif) from: `https://db.onlinewebfonts.com/c/cbb3cb559d2e4387e139cfb1656e31f5?family=Arsenica+Trial+Light`
2. **Inter** (sans-serif, weights 300, 400, 500, 600) from Google Fonts: `https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600&display=swap`

In CSS, define:
```css
:root {
--font-serif: 'Arsenica Trial Light', serif;
--font-sans: 'Inter', sans-serif;
}
body { font-family: var(--font-sans); }
.font-arsenica { font-family: var(--font-serif); }
.font-inter { font-family: var(--font-sans); }
```

---

### GLOBAL CSS (index.css)

Include these exact custom styles:

**Liquid Glass Effect:**
```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;
}
```

**Hero Fade-Up Animation:**
```css
@keyframes hero-fade-up {
from { opacity: 0; transform: translateY(24px); }
to { opacity: 1; transform: translateY(0); }
}
.hero-fade-up {
opacity: 0;
animation: hero-fade-up 0.9s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
```

**Scroll Reveal Animations:**
```css
@keyframes reveal-up {
from { opacity: 0; transform: translateY(32px); }
to { opacity: 1; transform: translateY(0); }
}
@keyframes reveal-scale {
from { opacity: 0; transform: scale(0.96); }
to { opacity: 1; transform: scale(1); }
}
.reveal { opacity: 0; }
.reveal.revealed {
animation: reveal-up 0.8s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
.reveal-scale { opacity: 0; }
.reveal-scale.revealed {
animation: reveal-scale 1s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
```

---

### CUSTOM HOOK: `useScrollReveal`

A reusable IntersectionObserver hook that finds all `.reveal` and `.reveal-scale` elements within a ref, and adds `.revealed` class when they enter view (threshold default 0.15, rootMargin `0px 0px -40px 0px`). Once revealed, unobserve.

---

### SECTION 1: NAVBAR (fixed, centered, floating)

- Fixed position, centered horizontally (`left-1/2 -translate-x-1/2`), top-4 on mobile, top-6 on sm+
- Uses the `.liquid-glass` class with `rounded-full`
- Padding: `px-4 py-2.5` mobile, `px-10 py-3` on sm+
- 5 items in a row with gap-4 mobile, gap-12 on sm+:
- Text link: "Gallery"
- Text link: "Talents"
- Center: Custom SVG logo (a geometric angular shape, white fill, `h-5 w-5` mobile / `h-7 w-7` sm+, with hover:scale-110 transition)
- Text link: "Journal"
- Text link: "Story"
- Link styles: `text-[10px]` mobile / `text-xs` sm+, uppercase, `font-medium`, `tracking-[0.15em]` mobile / `tracking-[0.2em]` sm+, `text-white/85`, hover `text-white`

**Logo SVG path:**
```
M 64 128 L 64.5 128 L 32 95 L 0 64 L 0 0 L 64 0 L 128 64 L 128 64.5 L 161 32 L 192 0 L 256 0 L 256 64 L 192 128 L 128 128 L 128 192 L 96 223 L 63.5 256 L 0 256 L 0 192 Z M 256 192 L 224 223 L 191.5 256 L 128 256 L 128 192 L 192 128 L 256 128 Z
```
viewBox `0 0 256 256`, fill white.

---

### SECTION 2: HERO (full viewport video background)

- Full `h-screen w-full` section with `overflow-hidden`
- Background: autoplay muted looping video covering the full section (`object-cover`), URL:
`https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260611_130946_e6793cc7-6b6f-4035-9852-44290b781ae6.mp4`
- Content centered vertically and horizontally, z-10, white text:
- **Subtitle line 1** (delay 0.1s): "Studioworks" -- `text-xs` mobile / `text-sm` sm+, `font-medium`, uppercase, `tracking-[0.35em]`, `text-white/90`
- **Subtitle line 2** (delay 0.1s): "Exhibits" -- `text-[10px]` mobile / `text-xs` sm+, `font-light`, uppercase, `tracking-[0.4em]`, `text-white/70`
- **Heading** (delay 0.25s): Two lines:
- "DIGITAL" in Arsenica, `text-5xl` up to `text-[7rem]`, `tracking-wide`
- "ARCHIVE" in Inter, `font-semibold`, `text-5xl` up to `text-[7rem]`, `tracking-tight`
- `leading-[1.05]`, `drop-shadow-[0_2px_24px_rgba(0,0,0,0.25)]`
- **Description** (delay 0.4s): "A showcase honoring the makers, visionaries and creators who turned a hard season into something rare." -- Arsenica font, `text-sm` up to `text-xl`, `max-w-xl`, `text-white/90`
- **CTA Button** (delay 0.55s): "Enter Gallery" -- uses `.liquid-glass` class, `rounded-[50%]` (pill), `px-10 py-5` mobile / `px-12 py-6` sm+, `text-[10px]` mobile / `text-xs` sm+, uppercase, `tracking-[0.25em]`, Inter font, hover effects: `scale-[1.03]`, `shadow-[0_0_30px_rgba(255,255,255,0.15)]`, active `scale-[0.98]`

---

### TRANSITION LAYER (between Hero and Showcase)

In the App layout, after the Hero, add a decorative cloud/fog image that overlaps:
```
<div className="relative z-20 -mt-64 sm:-mt-72 md:-mt-80 lg:-mt-96">
<img src="https://res.cloudinary.com/dy5er7kv5/image/upload/q_auto/f_auto/v1781584857/top-bg_j88wyu.png" className="pointer-events-none w-full" />
</div>
```

---

### SECTION 3: SHOWCASE (full-screen image background with text)

- Wrapped in a container with `relative -mt-40 sm:-mt-48 md:-mt-56 lg:-mt-64` (negative margin to overlap the transition image)
- Full `min-h-screen` section with `overflow-hidden`
- Background image (absolute, object-cover):
`https://images.higgs.ai/?default=1&output=webp&url=https%3A%2F%2Fd8j0ntlcm91z4.cloudfront.net%2Fuser_38xzZboKViGWJOttwIXH07lWA1P%2Fhf_20260616_040223_98d314e9-b8b4-4218-bcbd-18ffc38032ac.png&w=1280&q=85`
- Content (centered, z-10, py-32, using `useScrollReveal`):
- **Heading**: "Still Frame" -- Arsenica, `text-4xl` up to `text-7xl`, `tracking-wide`, `drop-shadow-[0_2px_20px_rgba(0,0,0,0.3)]`, class `.reveal`
- **Subtext** (delay 0.15s): Three lines --
```
gave the world beauty
born from the silence
of empty studios.
```
Arsenica, `text-xl` up to `text-4xl`, `tracking-wide`, `text-white/90`, `drop-shadow-[0_2px_16px_rgba(0,0,0,0.25)]`, class `.reveal`
- **Button** (delay 0.3s): "View Their Archive" -- rounded-[50%] pill, `border border-white/50`, transparent bg, `px-10 py-4` mobile / `px-12 py-5` sm+, Inter, `text-[10px]`/`text-xs`, uppercase, `tracking-[0.25em]`, hover: `border-white bg-white/10 scale-[1.03] shadow-[0_0_30px_rgba(255,255,255,0.1)]`, class `.reveal`
- **Bottom gradient**: absolute bottom div, `h-48 w-full`, gradient from transparent to `#410C01`
- **Dove image**: positioned absolute on the parent wrapper:
`https://res.cloudinary.com/dy5er7kv5/image/upload/q_auto/f_auto/v1781584853/dove_xpaeub.png`
Right-aligned, offset below bottom (`-bottom-12` mobile up to standard positioning), responsive widths (`w-24` up to `w-64`), z-20

---

### SECTION 4: Q&A (dark maroon background with parallax cloud overlay)

- Background: solid `bg-[#410C01]`
- Padding: `px-4 pt-20` mobile, up to `px-28 pt-32` on lg. `paddingBottom: '50vh'` (inline style)
- **Title**: "Q & A" -- Each letter separately, Arsenica font, `text-4xl` up to `text-7xl`, centered with `flex items-baseline justify-center gap-1`. The ampersand is italic, smaller (`text-xl` to `text-4xl`), `text-white/80`. Uses `.reveal` class.
- **Two-column layout** (grid, `md:grid-cols-2`, gap-10 up to gap-20):
- **Left column** -- 3 Q&A items
- **Right column** -- 3 Q&A items, offset `md:mt-24`
- Each item has staggered animation delay (starting at 0.12s, incrementing by 0.12s per item globally across both columns)
- **Question**: Arsenica, `text-xs` up to `text-base`, uppercase, `tracking-wide`, white
- **Answer**: Inter, `text-[11px]` up to `text-sm`, `leading-relaxed`, `text-white/60`

**Q&A Content:**
- Left column:
1. Q: "Welcome Maren. So how did Still Frame begin its journey?" / A: "Less than a year into launching the gallery, everything shut down. I had to close our doors, cancel every exhibit, and rethink it all. But I never stopped curating because I was so determined not to let the artists' momentum die. We hit the ground running to build a digital space, and we've been evolving since."
2. Q: "How did you know where to begin?" / A: "I didn't wait until we had the perfect platform. I saw artists struggling, isolated, uninspired, overwhelmed, and set to the task of creating ways to share their work with the world as quickly as possible."
3. Q: "So what was the first exhibit?" / A: "We were one of the first galleries to launch a virtual exhibition after the shutdown. I think our artists were really grateful for that, they saw how hard we worked to honor their craft, and they trusted us while we continued to refine the digital experience."

- Right column:
1. Q: "What was the initial reaction?" / A: "We had so many people writing and reaching out that the online exhibits and archived works saved them in isolation. The atmosphere was so intimate, and it was really powerful to have people connecting through art, even though we were all in our own rooms, in different cities."
2. Q: "Where did you evolve from there?" / A: "The in-person pop-ups have been really special too, recently, now that enough people feel comfortable to gather. We had our first open-air exhibit in the courtyard last month, and I was basically in tears it was so beautiful."
3. Q: "Do you find there's a new appreciation for art?" / A: "There's a feeling of urgency like -- this is our one life, our one chance, we don't have time to be indifferent anymore. We're gonna create like there's no tomorrow, we're gonna create for a better world, we're gonna create to reclaim our voice in this life, and we're gonna create because we deserve to feel beauty and wonder."

- **Parallax cloud overlay**: The same cloud image from earlier (`top-bg_j88wyu.png`) positioned absolute at `bottom-0 left-0 w-full z-10`. It has a parallax scroll effect: as section scrolls, the image transforms with `translateY(60 - offset%)` where offset is `progress * 30` and progress = `1 - rect.bottom / (vh + rect.height)`.

---

### SECTION 5: QUOTE BANNER (full-screen background with parallax bottom overlay)

- Full viewport height, centered content
- Background image (via inline style `backgroundImage`, with `bg-cover bg-center`):
`https://images.higgs.ai/?default=1&output=webp&url=https%3A%2F%2Fd8j0ntlcm91z4.cloudfront.net%2Fuser_38xzZboKViGWJOttwIXH07lWA1P%2Fhf_20260616_042421_41f4fa0b-770c-4545-a416-73a809366e49.png&w=1280&q=85`
- On lg+, content aligns `items-start pt-[25vh]` instead of center
- **Quote** (uses `.reveal-scale` animation): `"Art, resilience and vision are more important than ever."` where "are more important than ever." is in `font-light italic`. Arsenica, `text-xl` up to `text-5xl`, `leading-snug`/`lg:leading-tight`, white, max-w `xs` up to `2xl`
- **Parallax bottom overlay**: Image positioned absolute `-bottom-16 left-0 w-full z-10`:
`https://res.cloudinary.com/dy5er7kv5/image/upload/q_auto/f_auto/v1781584854/bottom_bg_liw6lc.png`
Parallax: transforms with `translateY(-offset px)` where offset is `progress * 80`.

---

### SECTION 6: FOOTER (fixed bottom bar)

- Fixed at bottom (`fixed bottom-0 left-0 right-0 z-40`)
- `bg-gradient-to-t from-black/40 to-transparent`
- Flex row with `justify-between`, padding `px-3 py-2.5` mobile / `px-10 py-4` sm+
- **Left side**:
- Facebook icon (lucide `Facebook`, `h-3.5 w-3.5` / `h-4 w-4` sm+)
- Twitter icon (lucide `Twitter`)
- LinkedIn icon (lucide `Linkedin`)
- "Privacy Notice" text link (hidden on mobile, shown sm+)
- **Right side**:
- "Terms & Policies" text link (hidden on mobile, shown sm+)
- BarChart3 icon (lucide `BarChart3`)
- Aperture icon (lucide `Aperture`)
- Icon links: `text-white/80`, hover `text-white`
- Text links: `text-[9px]` mobile / `text-[10px]` sm+, uppercase, `font-medium`, `tracking-[0.15em]`/`tracking-[0.25em]`, `text-white/80`, hover `text-white`

---

### APP LAYOUT ORDER

```
<Navbar />
<Hero />
<TransitionCloudImage (overlaps hero with negative margin) />
<div (negative margin wrapper)>
<Showcase />
<DoveImage (absolute positioned) />
</div>
<QAndA />
<QuoteBanner />
<Footer />
```

---

### TAILWIND CONFIG

Default Tailwind v3 config -- no custom theme extensions. Content: `['./index.html', './src/**/*.{js,ts,jsx,tsx}']`.

---

### KEY DESIGN DETAILS

- No background color on body -- sections provide their own
- Negative margins create seamless overlapping transitions between sections
- The "liquid glass" effect creates a frosted-glass look with a subtle gradient border pseudo-element
- All animations use `cubic-bezier(0.22, 1, 0.36, 1)` easing (smooth deceleration)
- Staggered animations via inline `animationDelay` styles
- Responsive scaling uses Tailwind breakpoints: default (mobile) -> sm -> md -> lg -> xl
- Color palette: white text on dark backgrounds, `#410C01` (deep burnt maroon) as the Q&A section background
- Typography hierarchy: Arsenica for display/headings, Inter for body/UI text

Rocket Cta

No.1424 · 前端开发 · 社区/原生 · 来源：MotionSites (MIT) · EN 原文

Build a pixel-faithful recreation of the landing CTA section. Use React 18 + Vite + TypeScript, TailwindCSS, `framer-motion`, `clsx` + `tailwind-merge` as `cn()`. Dark theme background (`#000000`), Inter font, Material Symbols Outlined for icons. Use the white-alpha "landing" palette in `tailwind.config.ts`:

```ts
landing: {
surface: "rgba(255, 255, 255, 0.10)",
"surface-hover": "rgba(255, 255, 255, 0.16)",
border: "rgba(255, 255, 255, 0.10)",
"border-strong": "rgba(255, 255, 255, 0.20)",
text: "rgba(255, 255, 255, 0.80)",
"text-muted": "rgba(255, 255, 255, 0.60)",
}
```

Add a global `.liquid-glass` utility (frosted translucent surface):
```css
.liquid-glass {
background: rgba(255,255,255,0.06);
border: 1px solid rgba(255,255,255,0.10);
backdrop-filter: blur(20px) saturate(140%);
-webkit-backdrop-filter: blur(20px) saturate(140%);
box-shadow: inset 0 1px 0 rgba(255,255,255,0.08), 0 10px 30px rgba(0,0,0,0.25);
}
```

Add keyframes in `index.css` for the inner Velorah hero animation:
```css
@keyframes fade-rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } }
.animate-fade-rise { animation: fade-rise .8s ease-out both; }
.animate-fade-rise-delay { animation: fade-rise .8s ease-out .25s both; }
.animate-fade-rise-delay-2 { animation: fade-rise .8s ease-out .5s both; }
.scrollbar-hide::-webkit-scrollbar { display: none; }
.scrollbar-hide { scrollbar-width: none; }
```

Load fonts in `index.html`: Inter (400/500/600), Instrument Serif (400 + italic), Material Symbols Outlined.

---

## Assets

- Foreground "grass / horizon" PNG that overlays the bottom of the section — load directly from this URL (no local asset):
`https://res.cloudinary.com/dy5er7kv5/image/upload/q_auto/f_auto/v1780586778/cta-bg_mlwy5s.png`
- CloudFront video URL used **inside** the Velorah dashboard preview (exact):
`https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260314_131748_f2ca2a28-fed7-44c8-b9a9-bd9acdd5ec31.mp4`

---

## Helper components (must exist)

### `FadeUp` (`framer-motion`)
```tsx
<motion.div
initial={{ opacity: 0, y: y ?? 24 }}
whileInView={{ opacity: 1, y: 0 }}
viewport={{ once: true, amount: 0.3 }}
transition={{ duration: 0.6, delay, ease: [0.22, 1, 0.36, 1] }}
/>
```

### `MIcon` — Material Symbols Outlined span, supports `name`, `size`, `fill`, `weight`, `grade`, `opticalSize`, applied via `fontVariationSettings: "'FILL' x, 'wght' y, 'GRAD' z, 'opsz' s"`.

### `PrimaryButton` (landing primitive)
- White pill, black text, `rounded-full`, sizes `sm/md/lg` (default `lg`: `h-12 px-9 text-sm font-medium`).
- Class: `inline-flex items-center justify-center rounded-full bg-white/80 hover:bg-white text-black leading-none transition-colors`.
- Wraps children in an `AnimatedText` component that slides current text up and reveals duplicate from below on hover (200–300ms ease).
- Polymorphic via `as="a" | "button"`, default `a`.

### `ChatPanel` (left side of the dashboard mock)
- Vertical flex column inside `rounded-2xl border border-white/10`, background `rgba(8,8,10,0.6)` + `backdrop-filter: blur(24px)`.
- Header row: 28px circular `bg-white/5` with `MIcon name="auto_awesome" size={14}`, then two-line label: **"Vibe Design course"** (text-sm font-medium white) + **"Learn how to build website with AI"** (text-[11px] white/40).
- Messages scroll area (`scrollbar-hide`, `space-y-4`, px-4 py-5). Seed messages:
1. assistant — "Welcome to the Vibe Design course! I'll guide you through building stunning websites with AI. What would you like to learn first?"
2. user — "I want to learn how to build a hero section with a cinematic video background using AI."
3. assistant — "Great choice! In this course, you'll learn how to create full-screen looping videos, liquid glass nav bars, email signups, and manifesto buttons — all with AI assistance. Let's dive in!"
- Message bubbles: `max-w-[85%] rounded-2xl px-4 py-2.5 text-sm leading-relaxed`. User = `bg-white/15 text-white/90` (right-aligned). Assistant = `bg-white/5 text-white/70 border border-white/5` (left).
- Props: `initialScroll?: "top" | "bottom"` (CTA uses `"top"`), `animateMessagesIn?: boolean` (CTA passes `true`, each message wrapped in `FadeUp delay={i * 0.12} y={16}`).
- Input row: `.liquid-glass rounded-2xl` containing a 1-row autosize `<textarea>` (transparent, placeholder "Ask about the course...") + white square send button (`bg-white text-black rounded-xl p-2`) with `MIcon name="arrow_upward" size={16}`. Enter (no shift) sends. Pushing user msg also pushes a canned assistant reply.

### `VelorahHeroPreview` (right side of the dashboard mock)
```tsx
const VIDEO_SRC = "https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260314_131748_f2ca2a28-fed7-44c8-b9a9-bd9acdd5ec31.mp4";
```
- Wrapper: `relative w-full h-full overflow-hidden rounded-2xl`, inline `backgroundColor: "hsl(201 100% 13%)"` (deep teal as the video-loading color).
- `<video autoPlay loop muted playsInline preload="auto">` absolutely positioned, `object-cover`, `z-0`.
- Nav row (`relative z-10 flex items-center justify-between px-3 sm:px-4 md:px-6 py-2 sm:py-3 md:py-4`):
- Left brand: `Velorah®` with `font-family: 'Instrument Serif', serif`, `text-sm sm:text-base md:text-lg`, `tracking-tight`, `®` as `<sup className="text-[0.5em]">`.
- Center (hidden < md): `Home` (white) · `Studio` · `About` · `Journal` · `Reach Us` — `text-[9px] lg:text-[10px] text-white/60` with `hover:text-white` on the inactive items.
- Right: `.liquid-glass rounded-full px-2.5 sm:px-3 py-1 text-[9px] sm:text-[10px] text-white` reading **Begin Journey**.
- Hero block (`flex flex-col items-center text-center px-3 sm:px-4 pt-3 sm:pt-5 md:pt-7 pb-6`):
- `<h1>` Instrument Serif, `font-normal leading-[0.95] tracking-[-0.03em]`, `text-lg sm:text-2xl md:text-3xl lg:text-4xl max-w-[90%]`, class `animate-fade-rise`. Content: `Where <em class="not-italic text-white/55">dreams</em> rise <em class="not-italic text-white/55">through the silence.</em>`
- Paragraph `animate-fade-rise-delay text-white/60 text-[9px] sm:text-[11px] md:text-xs leading-relaxed max-w-[80%] sm:max-w-sm md:max-w-md mt-2 sm:mt-3 md:mt-4`: "We're designing tools for deep thinkers, bold creators, and quiet rebels. Amid the chaos, we build digital spaces for sharp focus and inspired work."
- Pill button `animate-fade-rise-delay-2 liquid-glass rounded-full px-4 sm:px-5 md:px-6 py-1.5 sm:py-2 md:py-2.5 text-[9px] sm:text-[10px] text-white mt-3 sm:mt-4 md:mt-5` reading **Begin Journey**.

### `CtaDashboardMock`
Frame around ChatPanel + VelorahHeroPreview:
```tsx
<div className="liquid-glass w-full max-w-[1100px] aspect-[3/4] sm:aspect-[16/10] lg:aspect-[16/9] rounded-2xl mx-auto overflow-hidden p-2 sm:p-3">
<div className="grid h-full grid-cols-1 sm:grid-cols-[minmax(220px,320px)_1fr] gap-2 sm:gap-3">
<div className="min-h-0 hidden sm:block"><ChatPanel initialScroll="top" animateMessagesIn /></div>
<div className="min-h-0"><VelorahHeroPreview /></div>
</div>
</div>
```

---

## `CtaSection` — exact layout & behavior

```tsx
const sectionRef = useRef<HTMLElement>(null);
const isMobile = useIsMobile(); // tailwind md breakpoint hook
const { scrollYProgress } = useScroll({ target: sectionRef, offset: ["start end", "end start"] });
const dashboardY = useTransform(scrollYProgress, [0, 1], ["120px", "-120px"]);
const grassY = useTransform(scrollYProgress, [0, 1], isMobile ? ["80px", "-40px"] : ["200px", "-200px"]);
```

Markup:
```tsx
<section
ref={sectionRef}
id="cta"
className="relative w-full"
style={{ background: "linear-gradient(to bottom, transparent 0%, #14191E 100%)" }}
>
<div className="relative mx-auto max-w-[1080px] px-4 sm:px-6 pt-24 sm:pt-32 md:pt-40 pb-[440px] sm:pb-[520px] md:pb-[440px]">
<div className="grid grid-cols-1 lg:grid-cols-2 gap-12 lg:gap-8 items-start">
{/* Left column */}
<div className="relative z-20 max-w-[400px]">
<FadeUp delay={1}>
<h2 className="text-3xl sm:text-4xl font-normal tracking-[-0.02em] leading-[1.05] text-foreground">
Learn how can one go from 0 to $11.5k with AI in 60 days.
</h2>
</FadeUp>
<FadeUp delay={0.1}>
<p className="mt-6 text-landing-text text-base sm:text-lg leading-[1.5] max-w-[380px]">
Learn to turn your ideas into stunning websites with AI — the same skills agencies charge $5,000 for. Join the UI Rocket training and start building like a pro today.
</p>
</FadeUp>
<FadeUp delay={0.2} className="mt-10">
<PrimaryButton as="button">Start for free</PrimaryButton>
</FadeUp>
</div>
</div>
</div>

{/* Dashboard pinned to right edge, behind grass, parallax Y */}
<motion.div
style={{ y: dashboardY }}
className="absolute top-[440px] sm:top-[460px] md:top-[500px] lg:top-20 left-4 right-4 sm:left-auto sm:-right-[8%] md:-right-[10%] lg:-right-[12%] z-10 sm:w-[85%] md:w-[80%] lg:w-[68%]"
>
<CtaDashboardMock />
</motion.div>

{/* Foreground grass — in front of dashboard, parallax Y */}
<motion.img
src="https://res.cloudinary.com/dy5er7kv5/image/upload/q_auto/f_auto/v1780586778/cta-bg_mlwy5s.png"
alt=""
aria-hidden
style={{ y: grassY }}
className="pointer-events-none select-none absolute left-0 right-0 bottom-[-40px] sm:bottom-[-80px] lg:bottom-[-140px] w-full z-30 object-cover"
/>
</section>
```

### Behavior summary
- Section fades from transparent → `#14191E` vertically.
- On scroll, the dashboard translates from `+120px` → `-120px` (parallax up). The grass image translates `+200px` → `-200px` desktop, `+80px` → `-40px` mobile, on top of the dashboard (`z-30` over `z-10`).
- Left column stays static, on top of the grass (`z-20` left text container would otherwise be covered — keep grass at `z-30` to overlap the dashboard while the heading visually sits left of it).
- Headline `Learn how can one go from 0 to $11.5k with AI in 60 days.` enters with a delayed FadeUp; paragraph + button stagger in afterward.
- Mobile (< sm): dashboard stacks below the heading (`top-[440px]`), chat panel hides (`hidden sm:block`), only the Velorah preview shows.
- Button is `PrimaryButton as="button"` reading **Start for free**; hover triggers the AnimatedText slide.

---

## Acceptance checklist
- [ ] Section bg: `transparent → #14191E` linear gradient bottom.
- [ ] Inter font globally; Instrument Serif used in Velorah brand + headline; Material Symbols Outlined for icons.
- [ ] Headline copy is exactly: `Learn how can one go from 0 to $11.5k with AI in 60 days.`
- [ ] Subtext copy is exactly the paragraph above; button label exactly `Start for free`.
- [ ] `CtaDashboardMock` uses `.liquid-glass` frame, aspect `3/4 → 16/10 → 16/9`, ChatPanel left (hidden on mobile) + Velorah right.
- [ ] Velorah `<video>` uses the exact CloudFront URL, `autoPlay loop muted playsInline preload="auto"`, fallback bg `hsl(201 100% 13%)`.
- [ ] Velorah inner copy/animation classes match (`animate-fade-rise`, `-delay`, `-delay-2`).
- [ ] `useScroll` + `useTransform` parallax: dashboard `120 → -120`, grass `200 → -200` (desktop) / `80 → -40` (mobile).
- [ ] Grass image loaded from Cloudinary URL (`https://res.cloudinary.com/dy5er7kv5/image/upload/q_auto/f_auto/v1780586778/cta-bg_mlwy5s.png`) sits at `z-30` over dashboard (`z-10`), pointer-events-none, full width.
- [ ] FadeUp entrance order: heading (delay 1) → paragraph (0.1) → button (0.2).
- [ ] PrimaryButton: white pill, black text, AnimatedText hover slide.

Ms Synth 模式

No.1425 · 前端开发 · 社区/原生 · 来源：MotionSites (MIT) · EN 原文

Build a pure-white, minimal, futuristic fashion landing page titled **"LGPSM — Future Forward Fashion"**. Stack: React 19 + Vite + TypeScript + Tailwind CSS v4 + lucide-react. Page title: `LGPSM — Future Forward Fashion`. Description vibe: pure white minimal futuristic fashion website interface. Full-viewport single composition, black text on white, no purple, no cream, no cards-as-decoration, no glow effects.

---

## FONTS (exact Google Fonts)

Load via Google Fonts:

```
https://fonts.googleapis.com/css2?family=Chakra+Petch:wght@500;600;700&family=Michroma&family=Orbitron:wght@600;700;800;900&family=Plus+Jakarta+Sans:wght@400;500;600;700&display=swap
```

Usage:
- **Orbitron** (600/700/800/900): logo `LGPSM`, main headline `FUTURE FORWARD FASHION`, drawer titles, collection titles
- **Plus Jakarta Sans** (400/500/600/700): body UI, nav links, taglines, buttons, drawer content (default page font)
- Michroma and Chakra Petch may be loaded but are unused on the main UI

CSS utilities:
- `.font-orbitron { font-family: 'Orbitron', sans-serif; }`
- `.font-jakarta { font-family: 'Plus Jakarta Sans', sans-serif; }`

Body: `bg-white text-black antialiased`, selection: `selection:bg-black selection:text-white`.

---

## FLUID SIZE SYSTEM (exact CSS variables)

All sizes scale with viewport via `clamp()` — no hard fixed px breakpoints for type/spacing:

```css
:root {
  --pad-x: clamp(1.25rem, 4.5vw, 5rem);
  --pad-y: clamp(1rem, 3vh, 4rem);
  --header-pt: clamp(1.25rem, 2.5vh, 2.5rem);
  --gap-nav: clamp(1rem, 2.2vw, 2.25rem);
  --logo: clamp(1.35rem, 1.2vw + 0.9rem, 2.1rem);
  --logo-deg: clamp(0.65rem, 0.4vw + 0.45rem, 0.9rem);
  --nav: clamp(0.65rem, 0.35vw + 0.5rem, 0.875rem);
  --headline: clamp(2.15rem, 4.5vw + 0.75rem, 5.25rem);
  --body: clamp(0.7rem, 0.35vw + 0.55rem, 0.9rem);
  --micro: clamp(0.55rem, 0.25vw + 0.45rem, 0.7rem);
  --btn-px: clamp(1.15rem, 1.4vw, 1.75rem);
  --btn-py: clamp(0.6rem, 0.9vh, 0.85rem);
  --btn-gap: clamp(0.75rem, 1vw, 1.1rem);
  --feature-pad: clamp(1rem, 1.5vw, 1.75rem);
  --feature-min: clamp(13rem, 18vw, 20rem);
  --globe: clamp(2.25rem, 2.5vw + 1rem, 3.25rem);
  --checker-w: clamp(2.75rem, 4.5vw, 6.5rem);
  --checker-h: clamp(1.35rem, 2.2vw, 3rem);
  --corner: clamp(0.65rem, 0.4vw + 0.4rem, 0.95rem);
  --icon: clamp(1rem, 0.6vw + 0.7rem, 1.35rem);
  --drawer-pad: clamp(1.25rem, 2.5vw, 2.25rem);
  --drawer-max: clamp(18rem, 28vw, 28rem);
  --section-gap: clamp(0.75rem, 1.5vh, 1.5rem);
  --main-py: clamp(1.25rem, 4vh, 4rem);
}
```

---

## EXACT BACKGROUND IMAGE URLS

**Base image (BG_IMAGE_1)** — always visible full-bleed desktop background; also used as the mobile static image:

```
https://images.higgs.ai/?default=1&output=webp&url=https%3A%2F%2Fd8j0ntlcm91z4.cloudfront.net%2Fuser_38xzZboKViGWJOttwIXH07lWA1P%2Fhf_20260802_074534_f0d9d476-3f86-4c67-9b12-dfc63d99da41.png&w=1920&q=85
```

**Reveal image (BG_IMAGE_2)** — second image revealed only inside the mouse spotlight mask:

```
https://images.higgs.ai/?default=1&output=webp&url=https%3A%2F%2Fd8j0ntlcm91z4.cloudfront.net%2Fuser_38xzZboKViGWJOttwIXH07lWA1P%2Fhf_20260802_075145_1b557479-775b-43af-8270-f45d79d97d5a.png&w=1920&q=85
```

Both layers: `absolute inset-0`, `background-size: cover`, `background-position: center`, `background-repeat: no-repeat`.

---

## DESKTOP INTERACTIVE IMAGE REVEAL EFFECT (exact behavior)

Component: `ImageRevealBackground`. Desktop only: `hidden lg:block fixed inset-0 pointer-events-none z-0 overflow-hidden`.

### Layers (bottom → top)
1. Base layer: BG_IMAGE_1 full bleed
2. Reveal layer: BG_IMAGE_2 full bleed, clipped by a CSS/WebKit mask generated from an offscreen canvas
3. Subtle SVG grid overlay at `opacity: 0.10`, stroke `#64748b`, strokeWidth `0.6`

### Spotlight / mask algorithm (exact)
- Track raw mouse (`mousemove` on `window`) into `mouseRef`
- Every animation frame, ease `smoothRef` toward mouse with factor **0.1**:
  - `smooth.x += (mouse.x - smooth.x) * 0.1`
  - `smooth.y += (mouse.y - smooth.y) * 0.1`
- Spotlight radius (fluid): `Math.round(Math.min(420, Math.max(160, window.innerWidth * 0.16)))`
- Draw soft radial gradient circle on offscreen canvas at smoothed cursor:
  - `createRadialGradient(cx, cy, 0, cx, cy, radius)`
  - stops exactly:
    - 0 → `rgba(255,255,255,1)`
    - 0.4 → `rgba(255,255,255,1)`
    - 0.6 → `rgba(255,255,255,0.75)`
    - 0.75 → `rgba(255,255,255,0.4)`
    - 0.88 → `rgba(255,255,255,0.12)`
    - 1 → `rgba(255,255,255,0)`
- Export canvas each frame as `toDataURL()` and apply to BG_IMAGE_2 as:
  - `mask-image: url(dataUrl)` / `-webkit-mask-image: url(dataUrl)`
  - `mask-size: 100% 100%`
- Result: moving the cursor smoothly reveals BG_IMAGE_2 inside a soft circular spotlight while BG_IMAGE_1 remains everywhere else

### Parallax grid
- Grid cell size (fluid): `Math.round(Math.min(64, Math.max(36, window.innerWidth * 0.028)))`, update on resize
- SVG `<pattern>` with path `M {cell} 0 L 0 0 0 {cell}`
- Offset grid with eased parallax: normalize smoothed cursor to container (`cx`, `cy` from −0.5 to 0.5), ease offset toward `cx*16` / `cy*16` with factor **0.06**
- Pattern `x`/`y` = that eased offset

On viewports below `lg`, hide this interactive background and instead show a static bordered image of BG_IMAGE_1 in a section below the hero (`aspect-[4/5]` mobile, `sm:aspect-[16/9]`, border `border-gray-200`).

---

## PAGE STRUCTURE & EXACT COPY

Root: `min-h-screen bg-white text-black font-jakarta flex flex-col justify-between relative overflow-hidden`.

### 1. Header (z-20)
Padding: `paddingInline: var(--pad-x)`, `paddingTop: var(--header-pt)`, `paddingBottom: var(--section-gap)`. Flex space-between.

**Logo (left):** Orbitron black/900, letter-spacing `0.15em`, size `var(--logo)`. Text: `LGPSM` + small degree symbol `˚` (size `var(--logo-deg)`, slightly raised `-mt-0.5 ml-0.5`). Clicking closes any open drawer. Hover opacity 80%.

**Nav (right):** Plus Jakarta Sans, medium, uppercase, tracking `0.2em`, size `var(--nav)`, gap `var(--gap-nav)`.
Links (buttons): `SHOP` | `COLLECTIONS` | `JOURNAL` then gray `|` divider then lucide `ShoppingBag` icon (stroke 1.5, size `var(--icon)`).
Hover: opacity 50%. Cart shows black circular badge with item count when cart has items.

### 2. Main hero (flex-1)
Padding: `paddingInline: var(--pad-x)`, `paddingBlock: var(--main-py)`. Layout: column on mobile, `lg:flex-row` space-between.

**Left block** (vertically centered):
1. Small top-left L-corner bracket SVG (stroke 1.5, size `var(--corner)`)
2. Headline — Orbitron extrabold, uppercase, tracking `0.08em`, leading `1.05`, size `var(--headline)`, three lines:
   - `FUTURE`
   - `FORWARD`
   - `FASHION` + inline **checkerboard grid SVG** (viewBox `0 0 36 18`, 4 rows of 3.8×3.8 black squares; even rows shifted by 2.25; size `var(--checker-w)` × `var(--checker-h)`, slightly translated down 2px)
3. Bottom-left L-corner bracket
4. CTA button: border `border-gray-400`, rounded-md, uppercase `SHOP NOW` + lucide `ArrowUpRight`. Tracking `0.18em`, size `var(--body)`, padding `var(--btn-px)` / `var(--btn-py)`. Hover: fill black, text white, border black; icon nudges up-right.

**Right lower feature block** (`self-end`, bottom-aligned on desktop):
Framed box with four corner bracket SVGs (TL/TR/BL/BR) at absolute corners — no filled card background. Inside:
- Wireframe globe SVG (viewBox `0 0 64 64`, stroke 1.2: outer circle r=28, equator line, 2 horizontal ellipses, meridian line, 2 vertical ellipses), size `var(--globe)`
- Tagline in Plus Jakarta Sans semibold uppercase tracking `0.18em`, size `var(--body)`:
  - `BEYOND TRENDS.`
  - `BUILT FOR TOMORROW.`
min-width `var(--feature-min)`, padding `var(--feature-pad)`.

### 3. Side drawers (exact)
Clicking SHOP / COLLECTIONS / JOURNAL / cart opens a right-side white drawer over dimmed backdrop (`bg-black/20 backdrop-blur-xs`). Max width `var(--drawer-max)`, padding `var(--drawer-pad)`, border-left gray. Header: Orbitron bold uppercase title + lucide `X` close. Click backdrop to close.

**SHOP → title `Catalog`**
Subtitle: `Featured Garments`
Items (exact):
1. CYBER-TEX OVERCOAT — $850 — tag LIMITED EDITION
2. GEO-MESH TECH HOODIE — $320 — tag NEW DROP
3. ORBITAL TAPERED TROUSERS — $290 — tag IN STOCK
4. MODULAR ALL-WEATHER VEST — $410 — tag PRE-ORDER  
Each row: tag (micro gray), title, price, `ADD` button. ADD adds to cart and shows toast: `Added "{title}" to your shopping bag.` (3s, black toast top-right with lucide Check emerald).

**COLLECTIONS → title `Archive 2026`**
Subtitle: `Season Lineup`
1. SERIES 01 — SYNTHETIC HORIZONS — Ultra-durable weather-sealed fabrics with minimalist silhouette architecture.
2. SERIES 02 — KINETIC FORM — Ergonomic streetwear designed for maximum mobility and temperature equilibrium.
3. SERIES 03 — MONOCHROME ZERO — Pure black and white structural tailoring crafted from 100% recycled polymers.

**JOURNAL → title `Editorial`**
Subtitle: `Latest Dispatches`
1. AUG 2026 — THE ARCHITECTURE OF NEXT-GEN TEXTILES — 4 MIN READ
2. JUL 2026 — CIRCULAR DESIGN IN HIGH-END APPAREL — 6 MIN READ
3. JUN 2026 — MINIMALISM AS A FUNCTIONAL STATEMENT — 3 MIN READ

**CART → title `Shopping Bag`**
Empty: ShoppingBag icon + `Your shopping bag is empty.`
With items: list title/price + Remove. Footer: full-width black `CHECKOUT NOW` + ChevronRight → toast `Order submitted successfully!`, clear cart, close drawer.
Non-cart footer: `LGPSM © 2026 — FUTURE FORWARD FASHION` (micro, gray, centered uppercase).

---

## ICONS

lucide-react only: `ShoppingBag`, `ArrowUpRight`, `X`, `ChevronRight`, `Check`. Custom SVGs for: checkerboard, wireframe globe, four L-shaped corner brackets (paths: TL `M0 11.5V0.5H11.5`, TR `M0.5 0.5H11.5V11.5`, BL `M0 0.5V11.5H11.5`, BR `M0.5 11.5H11.5V0.5`, viewBox `0 0 12 12`).

---

## VISUAL RULES

- White page, black ink, gray accents only (`gray-200` / `gray-300` / `gray-400` / `gray-500` / `gray-600` / slate grid `#64748b`)
- No purple, no cream, no glow, no floating badges over hero media, no inset hero cards
- Brand `LGPSM` and headline `FUTURE FORWARD FASHION` dominate first viewport
- First viewport content only: logo/nav, headline + checker, SHOP NOW, globe tagline, and full-bleed dual-image reveal background
- UI text sits above background at z-10/z-20; background is z-0 and non-interactive (`pointer-events-none`)

Recreate this page pixel-faithfully with the exact URLs, exact reveal math (ease 0.1, radius `clamp(160, 16vw, 420)`, gradient stops listed), exact copy, fonts, fluid clamps, and drawer contents above.

---

Ms Intelligent Operations

No.1426 · 前端开发 · 社区/原生 · 来源：MotionSites (MIT) · EN 原文

# Exact recreation prompt — NovaAI landing page

Recreate this page **pixel-faithfully**. Stack: React + TypeScript + Vite + Tailwind CSS + lucide-react. Do not invent alternate copy, layout, fonts, colors, or effects.

---

## Page identity

- **Title:** `NOVA_AI — Today AI Aligns With Bold Dreams`
- **Brand:** lowercase `novaai` with a Lucide `Hexagon` icon (size 24, strokeWidth 1.5) to the left
- **Overall feel:** dark cinematic AI marketing site; full-viewport scroll-scrubbed video background; white typography with drop shadows; frosted glass UI chips; sparse editorial layout; no purple gradients, no cream paper look, no card grids of icons

---

## Assets (use these exact URLs)

**Hero scroll video (CloudFront — required):**
```
https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260729_102822_0e6c87e8-c141-4744-bf32-ad30db296371.mp4
```
Video content: abstract 3D forms (hanging white cables with glowing gold tips → organic white spherical / brain-like folds with warm orange core), soft blue-grey mist / grain background, floating bokeh particles. 1920×1080.

**Optional local mirrors for reliability:** `/hero.mp4` (same file) and `/hero-poster.jpg` (first-frame still). Prefer CloudFront URL in production code; local copy is fine for offline/dev.

**Portrait (“Talk with Mitha”) — exact URL:**
```
https://images.higgs.ai/?default=1&output=webp&url=https%3A%2F%2Fd8j0ntlcm91z4.cloudfront.net%2Fuser_38xzZboKViGWJOttwIXH07lWA1P%2Fhf_20260728_050334_5b076e26-0ce7-4898-b432-d764190e448f.png&w=1280&q=85
```
Display as `h-24 w-20` (`96×80px`), `rounded-lg`, `object-cover`. Alt: `Mitha, co-founder of NovaAI`.

---

## Fonts

- Load Google Fonts Inter weights **400, 500, 600, 700**
- Body: `font-family: 'Inter', system-ui, sans-serif`
- Tailwind: both `font-sans` and `font-mono` map to Inter (mono labels still use `font-mono` class but render Inter)
- Antialiased text; selection color `rgba(255,255,255,0.2)`
- Page bg: `#0a0a0a`; default text white

---

## Global structure

```
relative root
  ScrollVideo (fixed inset-0 z-0, pointer-events-none)
  relative z-10 wrapper
    Navbar (fixed top)
    main
      SectionOne (min-h-screen / 100svh)
      spacer div h-[80vh] (aria-hidden)  ← critical for scroll video length
      SectionTwo (min-h-screen / 100svh)
```

Horizontal padding rhythm everywhere: `px-5 sm:px-8 md:px-12`.  
Section top padding under fixed nav: `pt-24 sm:pt-28`.  
Bottom padding: `pb-12 md:pb-16`.

---

## Scroll-scrubbed video background (exact behavior)

Fixed full-bleed layer `z-0`, bg `#0a0a0a`, `overflow-hidden`, `pointer-events-none`.

**Layers (bottom → top):**
1. Poster `<img>` — full cover; fades out (`opacity-0`, 500ms) once video has a decoded frame or frame cache is ready
2. `<video>` — muted, playsInline, preload=auto, object-cover; visible only while video has a frame and canvas frame-cache is not ready; then fade out
3. `<canvas>` — full cover; draws scrubbed frames; fades in when ready

**Scroll mapping:**
- `progress = scrollY / (scrollHeight - innerHeight)`, clamped 0–1
- Smooth with lerp: `smoothed += (target - smoothed) * 0.12` each `requestAnimationFrame`
- Draw with **object-cover** math (scale max, center crop)

**Frame cache (preferred smooth path):**
- Offscreen video loads same URL
- Extract up to **90** frames (or `duration * 12`, min 24), max width **960px**
- Wait until visible video has `loadeddata` + 300ms yield before extraction starts
- On ready, canvas draws cached `ImageBitmap`s by smoothed progress index

**Fallback:** seek the visible `<video>` to `smoothed * (duration - 0.05)` when frames aren’t ready (seek if delta > 0.04s)

**Canvas DPR:** `min(devicePixelRatio, 2)`

Do **not** autoplay as a normal looping background — motion is **scroll-driven only**.

---

## Reveal animation (every text/UI block)

IntersectionObserver, threshold `0.15`.  
Hidden: `translate-y-8 opacity-0`  
Visible: `translate-y-0 opacity-100`  
Transition: `all 700ms ease-out`, `will-change-transform`  
Per-element `transition-delay` in ms as specified below.

---

## Glass / material system (exact tokens)

Reuse these consistently:

| Token | Classes |
|--------|---------|
| Glass panel | `bg-white/15 backdrop-blur-md` (or `bg-white/10` for larger panels) |
| Glass border | `border border-white/15` or `border-white/20` or `border-white/25` |
| Left-accent badge | `border-l-2 border-white bg-white/15 px-3 py-1.5 backdrop-blur-md` + mono uppercase label |
| Primary CTA | solid white pill/rounded, black text, hover `bg-white/85` |
| Secondary CTA | glass border + `bg-white/10` or `bg-white/15`, white text |
| Text over video | white + `drop-shadow-md` / `drop-shadow-lg` |
| Mono labels | `font-mono text-[10px]` or `text-[11px]` or `text-xs`, `uppercase`, `tracking-[0.15em]` |

---

## Navbar (fixed, z-50)

- Full width, `border-b border-white/15`
- Row: logo left | center nav (md+) | CTA right
- Logo: Hexagon + `novaai` (`text-lg sm:text-xl font-medium tracking-tight`)
- Links (hidden below md): `Projects` with superscript `6` (`font-mono text-[10px] text-white/60`), `About`, `Blog`, `Contact` — `text-sm text-white/85`, hover `text-white`, gap `gap-8 lg:gap-10`
- CTA: `Get Free Consultation` — `rounded-md border border-white/20 bg-white/15 backdrop-blur-md px-4 py-2 text-xs sm:px-5 sm:text-sm`, hover `bg-white/25`
- Reveal delays: logo 0; links `100 + i*100` ms; CTA `500` ms

---

## Section One — Hero

Full viewport flex column `justify-between`.

**Top row** (`flex-col gap-8` → `sm:flex-row justify-between`):

**Left — service list** (gap-2), each reveal delay `150 + i*120`:
```
/ AI AUTOMATION
/ AI INTEGRATION
/ AI AGENT DEVELOPMENT
```
Style: `font-mono text-xs uppercase tracking-[0.15em] text-white/90 drop-shadow-md`

**Right — intro** (`max-w-xs sm:text-right`, delay 300):
> We design automation that brings clarity, precision, and efficiency to the way your company operates.  
`text-lg sm:text-xl leading-relaxed text-white drop-shadow-md`

**Bottom row** (`flex-col gap-8` → `md:flex-row items-end justify-between`):

**Left:**
1. Badge delay 150: `We Automate 100+ Businesses` — left-accent glass badge, `font-mono text-[11px] uppercase tracking-[0.15em]`, `mb-5`
2. H1 delay 280:
```
Clear. Precise.
Automated.
```
`text-5xl sm:text-6xl lg:text-7xl font-normal leading-[1.05] tracking-tight text-white drop-shadow-lg`

**Right — glass contact card** (delay 420):
- Container: `flex items-center gap-4 rounded-xl bg-white/15 p-3 backdrop-blur-md`
- Image: portrait URL above, `h-24 w-20 rounded-lg object-cover`
- Text column (`gap-1.5 pr-2`):
  - `Talk with Mitha` — `text-sm font-medium text-white`
  - `Co-founder of NovaAI` — mono `text-[10px] uppercase tracking-[0.15em] text-white/60`
  - Button: `Book 15-mins call` + Lucide `ChevronRight` size 14 — `rounded-full bg-white px-4 py-2 text-xs font-medium text-black`, hover `bg-white/85`, `mt-1.5`

---

## Mid spacer

`div` with `h-[80vh]` between sections so scroll progress has room to scrub the video between hero and section two.

---

## Section Two — Capability

Same full-viewport flex `justify-between` shell.

**Top row:**

**Left badge** delay 120: `Insight On Demand` — same left-accent glass badge as hero.

**Right copy** delay 220 (`max-w-sm sm:text-right`):
> Our AI doesn't just respond — it interprets, sharpens, and delivers the signal you need.  
`text-lg sm:text-xl leading-relaxed text-white drop-shadow-md`

**Bottom area** (`flex-1 justify-end`, `flex-col gap-12` → `md:flex-row items-end justify-between gap-16`):

**Left column** (`max-w-xl`):
1. H2 delay 180:
```
Learn to see
brilliantly.
```
Same headline scale as H1 (`text-5xl sm:text-6xl lg:text-7xl … drop-shadow-lg`)
2. Body delay 320 (`mt-6 max-w-md text-sm sm:text-base text-white/80 drop-shadow-md`):
> From the first sketch to the final render, Nova turns raw intent into decisions your team can act on — quietly, precisely, at speed.
3. CTAs delay 420 (`mt-8 flex flex-wrap gap-3`):
   - Primary pill: `Run the demo` + ChevronRight 14 — `rounded-full bg-white px-5 py-2.5 text-xs sm:text-sm font-medium text-black`, hover `bg-white/85`
   - Secondary: `Free consultation` — `rounded-full border border-white/25 bg-white/10 backdrop-blur-md px-5 py-2.5 text-xs sm:text-sm`, hover `bg-white/20`

**Right — frosted capability panel**  
`w-full max-w-md rounded-2xl border border-white/15 bg-white/10 backdrop-blur-md px-5 sm:px-6`

Three rows (dividers `border-b border-white/15` except last), each `flex gap-5 py-5`, reveal delay `300 + i*110`:

| # | Title | Body |
|---|--------|------|
| 01 | Real-time vision | Reads context as it happens and surfaces what matters before you ask. |
| 02 | Layered insight | Moves from rough outline to sharp output without losing the thread. |
| 03 | Adaptive speed | Learns your cadence and tightens every pass as you work. |

- Index: `font-mono text-[11px] tracking-[0.15em] text-white/55`
- Title: `text-base sm:text-lg font-medium text-white` + ChevronRight 16 (`text-white/40`, hover: translate-x-0.5 + `text-white`)
- Body: `mt-1.5 text-sm leading-relaxed text-white/70`

---

## Interactions / motion checklist

1. Scroll scrub maps page scroll → video timeline (smoothed)
2. Staggered fade-up reveals on enter viewport (700ms, per-delay)
3. Button / link color transitions `duration-300`
4. Capability chevrons nudge right on hover
5. Poster → video → canvas opacity crossfades `duration-500`
6. No looping autoplay of hero video

---

## Responsive rules

- Nav links hidden below `md`
- Hero/section stacks vertically on mobile; side-by-side from `sm`/`md` as specified
- Prefer `supports-[height:100svh]:min-h-[100svh]` plus `min-h-screen`
- Touch: video `playsInline` + muted

---

## Do not

- Do not replace Inter with another display font
- Do not use a different video URL than the CloudFront URL above
- Do not use the old Pexels portrait
- Do not rebuild section two as icon card stacks
- Do not put opaque solid backgrounds over the video (only glass / transparent wrappers)
- Do not remove the `80vh` spacer

---

## Acceptance

Top of page: fixed glass nav + service list + intro + “Clear. Precise. Automated.” + Mitha glass card over scroll video.  
Scrolling scrubbing advances the CloudFront video smoothly.  
After spacer: “Insight On Demand” + “Learn to see brilliantly.” + dual CTAs + three-item frosted capability panel.  
Visual match to current NovaAI page at `localhost:5199`.

Digital Experiences

No.1427 · 前端开发 · 社区/原生 · 来源：MotionSites (MIT) · EN 原文

## Prompt

Build a single-page React + Vite + TypeScript + Tailwind CSS site with exactly two full-screen sections (Hero and Capabilities). The page is a dark, cinematic web design agency landing page with "liquid glass" morphism UI elements and smooth blur/fade animations using Framer Motion.

---

### Fonts (Google Fonts)

Load via `<link>` in `index.html`:
- **Instrument Serif** (italic) -- used for all headings (`font-heading`)
- **Barlow** (weights 300, 400, 500, 600) -- used for body text (`font-body`)

Tailwind config extends `fontFamily`:
```js
heading: ["'Instrument Serif'", 'serif'],
body: ["'Barlow'", 'sans-serif'],
```

Base CSS: `html, body { background: #000; color: #fff; font-family: 'Barlow', sans-serif; }`

---

### Liquid Glass CSS (in index.css)

Two variants defined as plain CSS classes:

**`.liquid-glass`** (subtle):
- `background: rgba(255, 255, 255, 0.01)` with `background-blend-mode: luminosity`
- `backdrop-filter: blur(4px)` / `-webkit-backdrop-filter: blur(4px)`
- No border; `box-shadow: inset 0 1px 1px rgba(255,255,255,0.1)`
- `position: relative; overflow: hidden`
- `::before` pseudo-element creates a gradient stroke border:
- `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%)`
- Masked with `-webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask-composite: exclude;`
- `pointer-events: none`

**`.liquid-glass-strong`** (bolder):
- Same structure but `backdrop-filter: blur(50px)`
- `box-shadow: 4px 4px 4px rgba(0,0,0,0.05), inset 0 1px 1px rgba(255,255,255,0.15)`
- `::before` gradient uses 0.5 alpha at edges, 0.2 at 20%/80%

---

### FadingVideo Component

A reusable `<video>` component accepting `src` (string or string[]), `className`, and `style`. It:
1. Starts with `opacity: 0`
2. On `loadeddata`, fades in over 500ms using `requestAnimationFrame`
3. On `timeupdate`, when remaining time <= 0.55s, fades out over 550ms
4. On `ended`, if single source: resets `currentTime` to 0, replays, fades back in. If array: advances to next index (cycling).
5. Video is `autoPlay`, `muted`, `playsInline`, `preload="auto"`

---

### BlurText Component

A word-by-word staggered blur-in animation component using Framer Motion:
- Splits `text` prop by spaces
- Each word is a `motion.span` with `display: inline-block`, `marginRight: 0.28em`
- Triggers on IntersectionObserver (threshold 0.1)
- Each word animates: `filter` from `blur(10px)` to `blur(0px)`, `opacity` 0 to 1, `y` from 50 to 0
- Duration 0.7s per word, stagger delay of 100ms per word index
- Container uses `display: flex; flexWrap: wrap; justifyContent: center; rowGap: 0.1em`

---

### Section 1: Hero

- Full viewport height (`h-screen`), `overflow-hidden`, `bg-black`
- **Background video**: Single `<FadingVideo>` with:
- `src="https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260619_191346_9d19d66e-86a4-47f7-8dc6-712c1788c3b2.mp4"`
- Positioned: `absolute left-1/2 top-0 -translate-x-1/2 object-cover object-top z-0`
- Inline style: `width: 120%; height: 120%`

- **Content** (`relative z-10, flex flex-col h-full`):

**Navbar** (fixed, `top-4 left-0 right-0 z-50`, flex between, `px-8 lg:px-16`):
- Left: `liquid-glass` circle (h-12 w-12 rounded-full) with italic "a" in `font-heading text-2xl`
- Center (hidden on mobile, `md:flex`): `liquid-glass rounded-full px-1.5 py-1.5` pill containing links ["Work", "Studio", "Services", "Journal", "Contact"] as `px-3 py-2 text-sm font-medium text-white/90 font-body` + a white CTA button "Start a Project" with ArrowUpRight icon
- Right: empty `h-12 w-12` spacer div

**Main content** (centered, `flex-1 flex flex-col items-center justify-center pt-24 px-4 text-center`):
- **Badge** (motion.div, delay 0.4): `liquid-glass rounded-full` pill with a white "New" badge inside + text "Booking Q3 2026 engagements -- limited capacity"
- **Headline** (mt-6, max-w-3xl): `<BlurText>` with text "Crafted Digital Experiences Built to Outlast Trends", classes: `text-6xl md:text-7xl lg:text-[5.5rem] font-heading italic text-white leading-[0.8] tracking-[-4px]`
- **Subtext** (motion.p, delay 0.8, mt-4): "We are a small studio of designers and engineers shaping brand-defining websites for ambitious companies. Precise typography, cinematic motion, and code you can be proud of." -- `text-sm md:text-base text-white max-w-2xl font-body font-light leading-tight`
- **CTA buttons** (motion.div, delay 1.1, mt-6, flex gap-6): "Start a Project" in `liquid-glass-strong rounded-full px-5 py-2.5` with ArrowUpRight + "Watch Showreel" plain text with Play icon
- **Stats cards** (motion.div, delay 1.3, mt-8, flex gap-4): Two `liquid-glass p-5 w-[220px] rounded-[1.25rem]` cards:
- Card 1: ClockIcon, "6 Weeks", "Average End-to-End Launch Time"
- Card 2: GlobeIcon, "140+", "Brands Shipped Across Four Continents"
- Numbers: `text-4xl font-heading italic tracking-[-1px] leading-none mt-4`

**Bottom trust bar** (motion.div, delay 1.4, flex-col items-center gap-4 pb-8):
- `liquid-glass rounded-full` pill: "Trusted by founders, operators, and creative directors worldwide"
- Logo names in a flex row (gap-12 md:gap-16): ["Aeon", "Vela", "Apex", "Orbit", "Zeno"] each as `font-heading italic text-2xl md:text-3xl tracking-tight`

- **All motion elements** use shared initial/animate: `{ filter: 'blur(10px)', opacity: 0, y: 20 }` -> `{ filter: 'blur(0px)', opacity: 1, y: 0 }`, duration 0.8s, easeOut

---

### Section 2: Capabilities

- `min-h-screen`, `overflow-hidden`, `bg-black`, relative
- **Background video**: `<FadingVideo>` with:
- `src="https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260622_093722_ccfc7ebf-182f-419f-8a62-2dc02db7dd9d.mp4"`
- `absolute inset-0 w-full h-full object-cover z-0`

- **Content** (`relative z-10 px-8 md:px-16 lg:px-20 pt-24 pb-10 flex flex-col min-h-screen`):
- **Header** (mb-auto):
- Label: `text-sm font-body text-white/80 mb-6` -- "// Capabilities"
- Heading: `font-heading italic text-6xl md:text-7xl lg:text-[6rem] leading-[0.9] tracking-[-3px]` -- "Studio craft,\nend to end"

- **Cards grid** (mt-16, `grid grid-cols-1 md:grid-cols-3 gap-6`), three cards:
1. **Design** -- Icon: ImageIcon (filled image icon), Tags: ["Brand Systems", "Art Direction", "Visual Identity", "Motion"], Body: "We shape identities and interfaces that feel unmistakably yours -- typographic systems, component libraries, and art-directed pages that scale without losing soul."
2. **Engineering** -- Icon: MovieIcon (film/clapboard), Tags: ["React", "Next.js", "Headless CMS", "Edge-Ready"], Body: "Production-grade front-ends built on modern stacks. Performant, accessible, and instrumented -- with code your team will enjoy extending long after launch."
3. **Growth** -- Icon: LightbulbIcon, Tags: ["SEO", "Analytics", "A/B Testing", "Retention"], Body: "Launch is the starting line. We partner with your team on conversion, content, and iteration loops that turn a beautiful site into a compounding asset."

- Each card: `liquid-glass rounded-[1.25rem] p-6 min-h-[360px] flex flex-col`
- Top row: icon in a nested `liquid-glass h-11 w-11 rounded-[0.75rem]` square + tags (flex-wrap, gap-1.5) right-aligned, each tag is `liquid-glass rounded-full px-3 py-1 text-[11px] text-white/90 font-body whitespace-nowrap`
- Spacer: `flex-1`
- Bottom: title in `font-heading italic text-3xl md:text-4xl tracking-[-1px] leading-none` + body in `text-sm text-white/90 font-body font-light leading-snug max-w-[32ch]`

---

### Custom SVG Icons (no external icon library needed for these)

- **ArrowUpRight**: 24x24, stroke, paths "M7 17L17 7" and "M7 7h10v10"
- **Play**: 24x24, filled polygon "6 4 20 12 6 20 6 4"
- **ClockIcon**: 24x24, stroke (1.5), circle r=9 + "M12 7v5l3 2"
- **GlobeIcon**: 24x24, stroke (1.5), circle r=9 + horizontal line + two arc paths
- **ImageIcon**: 24x24, filled Material-style image icon
- **MovieIcon**: 24x24, filled Material-style movie icon
- **LightbulbIcon**: 24x24, filled Material-style bulb icon

---

### Dependencies

- react, react-dom
- framer-motion
- tailwindcss, postcss, autoprefixer
- vite, @vitejs/plugin-react
- typescript

---

### Key Design Principles

- Everything is on a pure black (#000) background
- All text is white; subtle text uses `white/80` or `white/90`
- Liquid glass elements have near-invisible fills with gradient-stroke borders via CSS masks
- Videos cover sections as atmospheric backgrounds, fading in/out smoothly
- Typography: heading font is always italic with very tight tracking (negative), body font is light weight
- Responsive: nav links hidden on mobile, grid collapses to single column, text sizes scale with breakpoints
- Animations: staggered blur-in on load for hero content, intersection-triggered for BlurText

Sup 极光玻璃 Sign In To The Canvas

No.1428 · 前端开发 · 社区/原生 · 来源：MotionSites (MIT) · EN 原文

{
  "summary": "A full-bleed dark 'aurora glass' sign-in screen: a split hero where a left product pitch sits beside a frosted-glass auth card floating over a deep ink background scattered with soft blurred aqua/magenta/indigo aurora blobs, a faint masked grid veil and film grain. Sticky translucent nav on top, a trust logo strip and minimal footer below. The signature move is the glassmorphic card with a gradient (aqua->magenta) primary CTA and a glowing aqua focus ring on the active field.",
  "style": {
    "description": "Dark glassmorphism with a vivid aurora gradient system. Near-black ink canvas (#0b0f14), frosted translucent surfaces with heavy backdrop-blur and a 1px white hairline border, neon aqua (#2dd4bf) and magenta (#e879f9) as the only accent hues, applied as soft radial blobs, gradient text, and a multi-stop CTA. Type pairs Space Grotesk (display) with Inter (body). High contrast, calm spacing, subtle inset highlights and deep drop shadows give the glass a real lift.",
    "prompt": "Design a premium dark glassmorphism aesthetic. Background: solid ink #0b0f14 (color-scheme: dark). Scatter 4-5 large soft blurred radial 'aurora' blobs (border-radius:9999px, filter blur ~4px) in three palettes: aqua [radial #ccfbf1->#5eead4->#2dd4bf->#0f766e], magenta [#fbe9ff->#f0abfc->#e879f9->#a21caf], deep [#38bdf8->#6366f1->#312e81], at varied opacities .32-.78. Over them add a masked grid veil (64px lines in rgba(45,212,191,.05) and rgba(232,121,249,.05), radial-ellipse mask fading to transparent) and a fine film grain (3px radial dots, opacity .5), then two darkening overlays so the center stays legible and edges sink to ink. Surfaces are glass: linear-gradient(155deg, rgba(255,255,255,.085), rgba(255,255,255,.025)), backdrop-filter blur(34px) saturate(140%), 1px rgba(255,255,255,.12) border, box-shadow with an inset top highlight (0 1px 0 rgba(255,255,255,.18) inset) plus a 0 30px 80px -20px rgba(0,0,0,.75) drop shadow. Accents only aqua #2dd4bf and magenta #e879f9 (lighter aqua #5eead4 for links/highlights). Gradient text and primary button use linear-gradient(100deg, #2dd4bf 0%, #5eead4 38%, #e879f9 100%). Fonts: 'Space Grotesk' for display/headings (weights 600/700, tight tracking), 'Inter' for body/UI (400-700); body text slate-200/slate-400, muted labels slate-500. Generous radii (cards ~26px, inputs/buttons ~12-14px). Smooth .18-.22s transitions on hover/focus."
  },
  "layout_and_structure": {
    "description": "Single full-height page, max-width 7xl (1280px) centered with px-6/px-8 gutters. A fixed translucent header nav. The hero is a 2-column grid on lg (left pitch / right card), stacking to one column on mobile with the card ordered first. Below the fold: a full-bleed trust logo strip, then a minimal footer. Everything sits over the shared aurora background layer.",
    "prompts": [
      {
        "part": "Sticky nav",
        "prompt": "Fixed top nav (z-50), full width, glass-nav style: background rgba(11,15,20,.62), backdrop-blur(18px) saturate(140%), 1px bottom border rgba(255,255,255,.07). Inner row h-16, max-w-7xl, space-between: left = logo (8x8 rounded-lg gradient aqua->magenta tile with a ph:diamonds-four-bold ink glyph) + 'Lumina' wordmark in Space Grotesk 600; center = nav links Product / Library / Pricing / Docs (Inter 500, slate-300, hover white, hidden on mobile); right = a text 'Sign in' link + a solid white pill 'Start free' button with ink text."
      },
      {
        "part": "Hero / sign-in grid",
        "prompt": "main is min-h-screen, overflow-hidden, with the aurora background as a -z-10 absolute layer. Inside, max-w-7xl flex column, pt-16. A grid that is lg:grid-cols-2, items-center, gap-14 (lg gap-10). On mobile the card section is order-1 (top), the pitch is order-2; on lg the pitch is order-1 (left) and card order-2 right-aligned (lg:justify-self-end)."
      },
      {
        "part": "Left pitch column",
        "prompt": "Top: a small pill badge (rounded-full, glass pill bg rgba(255,255,255,.04) + 1px border, tiny aqua status dot) reading a version/status line. Then a large display headline in Space Grotesk 700, ~3.4rem on lg, leading 1.05, tight tracking, white, with one phrase wrapped in gradient-text (aqua->magenta). A slate-400 subparagraph (max-w-md). A 3-item feature list, each row = a 6x6 rounded-md tinted icon chip (alternating bg-aqua/15 text-aqua and bg-magenta/15 text-magenta, phosphor icons) + slate-300 label. A social-proof row: overlapping avatar stack (h-8 w-8 rounded-full, border-2 border-ink, gradient fills, last chip = '9k+' count) beside a small slate-400 caption."
      },
      {
        "part": "Glass sign-in card",
        "prompt": "A glass card, max-w-md, rounded-[26px], p-8/p-9, with two tiny blurred aurora 'kiss' orbs bleeding off its corners (magenta top-right, aqua bottom-left, -z-10). Header: 'Welcome back' (Space Grotesk 600, 2xl, white) + slate-400 subtitle. Two-up social buttons (grid-cols-2, social-btn glass style: bg rgba(255,255,255,.045), 1px border, hover lifts) for Google (logos:google-icon) and GitHub. An 'or with email' divider = two gradient hairlines flanking uppercase tracked slate-500 label. Form: Email and Password fields built as .field rows (rounded-xl, bg rgba(255,255,255,.04), 1px rgba(255,255,255,.1) border, leading phosphor icon, h-12 input). The PASSWORD field is shown in its focused state to demo the glow: border-color rgba(45,212,191,.7), bg rgba(45,212,191,.06), box-shadow 0 0 0 4px rgba(45,212,191,.14) + 0 0 26px -4px rgba(45,212,191,.55), with a trailing eye toggle. A 'Forgot?' aqua link above the password label. A 'Remember me' row with a custom rounded checkbox (aqua-tinted, ph:check-bold). Primary submit = full-width .cta gradient button (aqua->magenta), ink text, Space Grotesk 700, trailing arrow, glowing colored shadow + hover lift. Footer line: 'New to Lumina? Create an account' (aqua link)."
      },
      {
        "part": "Trust strip",
        "prompt": "Full-bleed band with thin top/bottom white/5 borders and a barely-there bg-white/[.015]. Centered uppercase tracked slate-500 eyebrow ('Powering design teams everywhere'), then a wrapped row of 5 muted (slate-500) faux company logos, each = a phosphor glyph + Space Grotesk 600 name."
      },
      {
        "part": "Footer",
        "prompt": "Minimal footer on solid ink. max-w-7xl row, space-between on sm: left = small logo tile + 'Lumina' + '(c) 2026' in slate-600; right = Privacy / Terms / Status text links (slate-400, hover white) plus two social icon links (X + GitHub, hover aqua)."
      }
    ]
  },
  "special_ui_components": [
    "Aurora background system: layered blurred radial blobs (aqua/magenta/deep-indigo) + masked grid veil + film grain + dual darkening overlays, composited as one -z-10 layer behind all content.",
    "Glassmorphic card: 155deg white translucent gradient fill, backdrop-blur(34px) saturate(140%), hairline border, inset top highlight + deep drop shadow, ~26px radius, with corner aurora 'kiss' orbs.",
    "Glowing focus field: input row whose focus-within state paints an aqua border, aqua-tinted fill, a 4px aqua focus ring and a 26px aqua glow (shown pre-focused on the password field to advertise the interaction).",
    "Gradient CTA: full-width button with an aqua->teal->magenta gradient, ink-colored label, colored double drop shadow and a translateY(-1px)+brightness hover lift.",
    "Glass social buttons (Google + GitHub) in a 2-up grid with subtle hover border/lift.",
    "Gradient divider: 'or with email' separator built from two transparent->white->transparent hairlines around an uppercase tracked label.",
    "Custom checkbox: 18px rounded square, aqua-tinted fill, white hairline border, phosphor check glyph.",
    "Overlapping avatar stack with a '9k+' count chip for social proof.",
    "Translucent glass sticky nav with backdrop blur and a solid white 'Start free' pill CTA."
  ],
  "special_notes": "Color tokens (exact): ink #0b0f14, aqua #2dd4bf (light #5eead4), magenta #e879f9; blob deep stops #38bdf8/#6366f1/#312e81. Fonts: Space Grotesk (display, 400-700) + Inter (body, 400-700), loaded from Google Fonts; phosphor + logos icon sets via Iconify. Built on Tailwind (CDN) with custom utility classes (.aurora/.glass/.glass-nav/.field/.cta/.social-btn/.pill/.gradient-text/.check/.divider-line). Keep accents strictly aqua + magenta. The password field is intentionally rendered focused to showcase the glow ring. Fully responsive: 2-col on lg collapsing to a single stacked column on mobile with the auth card moved to the top. color-scheme: dark, antialiased, smooth scroll."
}

Flowmate 落地页

No.1429 · 前端开发 · 社区/原生 · 来源：MotionSites (MIT) · EN 原文

Create a modern, production-ready landing page for "FlowMate" - an AI workflow automation platform. Use React, TypeScript, Vite, Tailwind CSS, Framer Motion, and Lucide React.

## Design System

**Colors:**
- Background: `#fefffc` (off-white)
- Text Primary: `#2c2c2c` (dark gray)
- Text Secondary: `#444141`
- Text Tertiary: `#646464`
- Text Muted: `#b4b8b4`
- Borders: `#dde3dd`, `#dee2de`, `#e8e8e8`
- Hover Background: `#eef1ed`
- Button Black: `black` with hover `#2c2c2c`

**Typography:**
- Custom Font: PPMondwest (serif) from URL: `https://www.generalintelligencecompany.com/_next/static/media/17330fd087386262-s.p.woff2`
- Font settings: `fontKerning: 'none'`, `letterSpacing: '-0.04em'`
- System fonts as fallback

## Layout Structure

**Desktop (1024px+):**
- Fixed sidebar: 240px width, left side
- Content area: margin-left 240px
- Fixed navbar: positioned at top of content area (left: 240px)

**Mobile/Tablet:**
- No sidebar
- Full-width navbar at top
- Stacked content

## Components

### 1. Sidebar (Desktop Only)
- Fixed position, 240px wide, full height
- Border: 2px solid `#dde3dd`
- Logo image at top: `https://images.higgs.ai/?default=1&output=webp&url=https%3A%2F%2Fd8j0ntlcm91z4.cloudfront.net%2Fuser_38xzZboKViGWJOttwIXH07lWA1P%2Fhf_20260405_072635_e0ca60b6-0b6c-49a3-825d-b2b6a53dd63d.png&w=1280&q=85`
- Navigation items: Home, Video, Features, Cards
- Active state: `bg-[#eef1ed]` with `text-[#2c2c2c]`
- Inactive: `text-[#b4b8b4]` with hover effects
- Smooth scroll with IntersectionObserver tracking

### 2. Navbar
- Fixed at top, semi-transparent background: `bg-[#fefffc]/90` with `backdrop-blur-sm`
- Desktop positioning: `left-0 lg:left-[240px]`
- Logo/Brand: "FlowMate" in PPMondwest, 28px mobile, 32px desktop
- Right side items:
- "Pricing" link (hidden on mobile)
- "Community" link (hidden on mobile)
- "Log in" button: white background, 2px border `#dde3dd`, rounded-full
- "Sign up" button: black background, white text, rounded-full

### 3. Hero Section
- Padding: responsive (pt-12 to pt-20, pb-12 to pb-20)
- Heading: "Transform your workflow using plain English"
- Font: PPMondwest
- Size: 32px mobile → 50px tablet → 70px desktop
- Line height: 0.95
- Max width: 900px (700px on lg)
- Subheading: "FlowMate connects to your current apps, builds smart workflows, and manages operations. Powering the platforms you already know and trust."
- Color: `#444141`
- Max width: 620px (520px on lg)
- CTA button: "View our intro video" with custom arrow SVG icon
- Use TextFade animation (direction: up, stagger: 0.15s)

### 4. Video Section (Liquid Glass Effect)
**Video URL:** `https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260405_073438_071156e5-2a7a-45d8-a8d9-c628d2144e88.mp4`

**Glass morphism overlay card:**
- Centered over video
- Typewriter effect text: "Daily check rival companies and ping me on messenger"
- Speed: 50ms per character
- Styling:
```css
backdrop-filter: blur(16px)
background-image: linear-gradient(in oklab, rgba(255, 255, 255, 0.35) 0px, rgba(255, 255, 255, 0.12) 100%)
border: 6px solid rgba(255, 255, 255, 0.2)
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.5)
```
- Icons: Paperclip (lucide) and circular send button with ArrowUp
- Framer Motion spring animation on scroll

### 5. Features Grid
**Title:** "Discover what FlowMate can accomplish for your team"

**6 Feature Cards (3 columns on desktop, 2 on tablet, 1 on mobile):**

1. **Research this company (FlowMate)**
- Description: "Execute investor-grade business analysis: generate detailed spreadsheets, gather web intel, compare rivals, and build team dossiers."
- Icon: Generic tool icon

2. **Check the dev team's progress**
- Description: "View a quick overview of your developer squad's activity, goals, and blockers."
- Icons: Linear + Slack logos

3. **Build my CV from available information**
- Description: "Generate a shareable PDF curriculum using stored facts and web sources, excluding any private contact info."
- Icon: Generic tool icon

4. **Turn this into retro pixels**
- Description: "Transform any photo into vintage pixelated graphics with custom resolution."
- No icons

5. **Track Industry Sites and Send Weekly Digest Each Monday**
- Description: "Watch leading tech and development sources for fresh content then deliver Monday briefings with main insights and URLs."
- Icon: Generic tool icon

6. **Morning schedule digest**
- Description: "Every AM, outline your agenda with important background and recommended preparation."
- Icons: Gmail + Google Calendar logos

**Card Styling:**
- Border: 2px solid `#dee2de`
- Rounded: 2xl
- Hover: border color changes to `#b8beb8`
- Icons in circular gray backgrounds at bottom

### 6. Cards Carousel
**Auto-rotating carousel (4 second intervals) with 5 cards:**

**Card 1:** For Everyone
- Text: "Unleash your creative vision"
- Image: `https://images.higgs.ai/?default=1&output=webp&url=https%3A%2F%2Fd8j0ntlcm91z4.cloudfront.net%2Fuser_38xzZboKViGWJOttwIXH07lWA1P%2Fhf_20260405_081328_19f48c5b-ea4d-4f23-8f80-7374f31015d4.png&w=1280&q=85`

**Card 2:** For Teams
- Text: "Smart helper supporting each teammate daily"
- Image: `https://images.higgs.ai/?default=1&output=webp&url=https%3A%2F%2Fd8j0ntlcm91z4.cloudfront.net%2Fuser_38xzZboKViGWJOttwIXH07lWA1P%2Fhf_20260405_081342_ad378347-1ebd-4b17-a716-ee895bf739c0.png&w=1280&q=85`

**Card 3:** For Enterprises
- Text: "Elevate your whole organization using business AI"
- Image: `https://images.higgs.ai/?default=1&output=webp&url=https%3A%2F%2Fd8j0ntlcm91z4.cloudfront.net%2Fuser_38xzZboKViGWJOttwIXH07lWA1P%2Fhf_20260405_081415_a6e8a76c-224e-417b-bf99-6b86d6494644.png&w=1280&q=85`

**Card 4:** Platform
- Text: "Enhanced with FlowMate"
- Image: `https://images.higgs.ai/?default=1&output=webp&url=https%3A%2F%2Fd8j0ntlcm91z4.cloudfront.net%2Fuser_38xzZboKViGWJOttwIXH07lWA1P%2Fhf_20260405_081513_cf1cd2c1-2122-4de6-90ed-acae8bfbdb00.png&w=1280&q=85`

**Card 5:** Security
- Text: "Creating trusted and helpful AI"
- Image: `https://images.higgs.ai/?default=1&output=webp&url=https%3A%2F%2Fd8j0ntlcm91z4.cloudfront.net%2Fuser_38xzZboKViGWJOttwIXH07lWA1P%2Fhf_20260405_081541_9d2d28bf-d6a3-4b31-b0bb-cfc5202d4fcd.png&w=1280&q=85`

**Carousel Features:**
- Shows 3 cards at a time (1 on mobile)
- Manual navigation: Previous/Next buttons with ChevronLeft/Right icons
- Framer Motion AnimatePresence with slide animations
- Transition: `duration: 0.7, ease: [0.32, 0.72, 0, 1]`
- Cards: 500px height, gradient overlay, hover scale effect

## Animations

**TextFade Component:**
- Spring animation on scroll into view
- Stagger children with configurable delay
- Direction: up or down
- Default variants: `y: 18` offset, opacity fade

**Video Section:**
- Spring animation: `{ opacity: 1, y: 0 }` from `{ opacity: 0, y: 18 }`

**Carousel:**
- Entry: slide from right/left with scale 0.95
- Exit: slide opposite direction
- Smooth transitions with custom easing

## Technical Requirements

**Dependencies:**
- React 18.3+
- Framer Motion 12.38+
- Lucide React 0.344+
- Tailwind CSS 3.4+
- TypeScript 5.5+

**Build Setup:**
- Vite bundler
- ESLint configuration
- PostCSS with Autoprefixer

**Responsive Breakpoints:**
- Mobile: default
- Tablet: md (768px)
- Desktop: lg (1024px)

All sections have proper border separation (`border-t border-[#e8e8e8]`) and the entire page uses smooth scrolling behavior with section anchors.

Automation Machines 首屏

No.1430 · 前端开发 · 社区/原生 · 来源：MotionSites (MIT) · EN 原文

PROMPT TO RECREATE THIS HERO SECTION

Build a full-screen dark hero section for a futuristic "Automation Machines" landing page using React, Vite, Tailwind CSS v4, Motion (framer-motion), Lucide React icons, and Spline 3D. The page should be a single full-viewport section with a black background, white text, and a 3D Spline scene behind all content.

DEPENDENCIES (exact versions)

react ^19.0.0
react-dom ^19.0.0
vite ^6.2.0
@vitejs/plugin-react ^5.0.4
tailwindcss ^4.1.14 (with @tailwindcss/vite ^4.1.14 plugin)
motion ^12.23.24 (import from motion/react)
lucide-react ^0.546.0
@splinetool/react-spline ^4.1.0
@splinetool/runtime ^1.12.72

FONTS (Google Fonts)

Import this exact Google Fonts URL in your CSS:
https://fonts.googleapis.com/css2?family=Orbitron:wght@400;500;600;700;800;900&family=Space+Grotesk:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500&family=Instrument+Serif:ital@1&display=swap

Font assignments via Tailwind @theme:
--font-sans: "Space Grotesk" (body text default)
--font-display: "Orbitron" (main heading)
--font-mono: "JetBrains Mono" (technical specs values, pill badges)
--font-loader: "Instrument Serif" (defined but not actively used in the hero)

TAILWIND CSS v4 CONFIGURATION (in index.css)

@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;500;600;700;800;900&family=Space+Grotesk:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500&family=Instrument+Serif:ital@1&display=swap');
@import "tailwindcss";

@theme {
--font-sans: "Space Grotesk", ui-sans-serif, system-ui, sans-serif;
--font-display: "Orbitron", sans-serif;
--font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, monospace;
--font-loader: "Instrument Serif", serif;
--color-brand-orange: #F27D26;
--color-bg: #0a0a0a;
--color-text: #f5f5f5;
--color-muted: #888888;
--color-stroke: #1f1f1f;
}

@layer base {
body {
@apply bg-black text-white antialiased;
font-family: var(--font-sans);
}
}

@layer utilities {
.text-glow {
text-shadow: 0 0 10px rgba(255, 255, 255, 0.3);
}
}

VITE CONFIG: Use @tailwindcss/vite plugin alongside @vitejs/plugin-react.

3D SPLINE BACKGROUND

Use @splinetool/react-spline with React lazy loading and Suspense
Scene URL: https://prod.spline.design/PIgTjpRFA03yfLyK/scene.splinecode
The Spline container is position: absolute, inset: 0, z-index: 0
It is shifted 15% to the right using inline style: transform: translateX(15%)
Suspense fallback is a full-size black div

PAGE LAYOUT

The root wrapper is: min-h-screen bg-black text-white overflow-x-hidden relative
Selection styling: selection:bg-white selection:text-black
The content sits above the Spline at z-10 with pointer-events-none (interactive elements get pointer-events-auto):
mx-auto px-4 md:px-6 pt-6 md:pt-10 min-h-screen md:h-screen flex flex-col justify-between pb-6 relative z-10 pointer-events-none

The layout uses a CSS Grid with 12 columns on desktop, 1 column on mobile.

TOP SECTION (upper-left content)

All in a single col-span-12 cell with space-y-6 md:space-y-8:

Main Heading: Font: font-display (Orbitron). Text: "Automation" on line 1, then line break, then "Machines •" (using the HTML bull entity). Size: text-[40px] sm:text-[56px] md:text-[72px]. Line height: leading-[1] md:leading-[0.9]. Weight: font-extralight. Tracking: tracking-tight. Transform: uppercase. Max width: max-w-xl. Gradient text effect: bg-gradient-to-r from-white/20 via-white/70 to-white bg-clip-text text-transparent. Animation: Motion div wrapping it, initial={{ opacity: 0, x: -20 }}, animate={{ opacity: 1, x: 0 }}, transition={{ duration: 0.8, ease: "easeOut" }}

Subtitle paragraph: Text: "Developed with high-end skills and a pixel-perfect frame for those who don't just browse the web—they build it. Code your dreams....". Classes: text-sm text-white max-w-md leading-relaxed font-light. Animation: initial={{ opacity: 0 }}, animate={{ opacity: 1 }}, transition={{ duration: 0.8, delay: 0.2 }}

Three circular icon buttons: Icons from Lucide: Snowflake, Maximize, Zap (in that order). Each in a flex row with gap-4. Each icon container: w-10 h-10 rounded-full border border-white/20 flex items-center justify-center hover:border-white/60 transition-colors cursor-pointer pointer-events-auto. Icon: size={16}, className="text-white/80". Animation: initial={{ opacity: 0 }}, animate={{ opacity: 1 }}, transition={{ duration: 0.8, delay: 0.4 }}

BOTTOM SECTION (footer area, pinned to bottom via flex justify-between)

Wrapper: flex flex-col md:flex-row justify-between items-start md:items-end gap-12 md:gap-0 mt-16 md:mt-0

Left side -- Technical Specs card: Animation: initial={{ opacity: 0, y: 40 }}, animate={{ opacity: 1, y: 0 }}, transition={{ duration: 0.8, delay: 0.8 }}. Container: p-6 md:p-8 w-full md:max-w-md pointer-events-auto. Header: text "Technical Specs", classes: text-[10px] font-mono tracking-[0.3em] uppercase text-white/60 mb-5. Four spec rows in a space-y-4 div, each row is: flex justify-between items-end border-b border-white/10 pb-3 group cursor-default. Label (left): text-xs text-white/70 group-hover:text-white transition-colors. Value (right): text-xs font-mono tracking-tight text-white. Data: Stack: "React + Node + SQL", Logic: "V8 - Runtime Logic", Uptime: "99.9% High-Avail", Scale: "Responsive Modern Layout"

Right side -- Pill badge bar: Animation: initial={{ opacity: 0 }}, animate={{ opacity: 1 }}, transition={{ duration: 1, delay: 1 }}. Outer wrapper: flex items-center w-full md:w-auto. Pill container: flex flex-wrap gap-2 bg-white/10 backdrop-blur-md rounded-2xl md:rounded-full p-2 border border-white/5 w-full md:w-auto pointer-events-auto. Four pill badges: "TS/JS" -- ACTIVE/highlighted: px-4 py-2 text-[10px] font-mono tracking-widest bg-white text-black rounded-full. "V1" -- outline: px-3 py-2 text-[10px] font-mono tracking-widest border border-white/20 rounded-full. "Full-Stack" -- outline: px-4 py-2 text-[10px] font-mono tracking-widest border border-white/20 rounded-full. "Cloud-Ready" -- outline: px-4 py-2 text-[10px] font-mono tracking-widest border border-white/20 rounded-full

ANIMATION STAGGER SEQUENCE (Motion from motion/react)

All animations use initial + animate (not scroll-triggered):
Heading: delay 0s, slides in from left (x: -20), 0.8s duration, easeOut
Subtitle: delay 0.2s, fades in, 0.8s duration
Icon buttons: delay 0.4s, fade in, 0.8s duration
Technical specs card: delay 0.8s, slides up from y: 40, 0.8s duration
Pill badge bar: delay 1.0s, fades in, 1.0s duration

KEY DESIGN DETAILS

Color palette: Pure black (#000) background, white text with various opacity levels (white/80, white/70, white/60, white/20, white/10, white/5). No navigation bar -- the hero IS the full page. The 3D scene fills the entire viewport behind the content, offset 15% to the right. All text content is left-aligned on the upper-left. The technical specs and pill badges anchor to the bottom of the viewport. On mobile, layout stacks vertically; on desktop (md breakpoint), it stretches edge-to-edge. The gradient on the heading goes from nearly invisible white (20% opacity) on the left to full white on the right, creating a reveal/fade effect. The text selection color is inverted (white background, black text). pointer-events-none on main prevents accidental interaction with the Spline scene; individual interactive elements opt back in with pointer-events-auto

Celestial Renewal

No.1431 · 前端开发 · 社区/原生 · 来源：MotionSites (MIT) · EN 原文

**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://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260613_180732_a54afbf6-b30d-470e-861f-669871f09f67.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://soft-zoom-63098134.figma.site/_assets/v11/8d520a7515d06cbfc403d0125e3d05b1a7ccd29c.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://soft-zoom-63098134.figma.site/_assets/v11/0d6dfd3f90b930f21726f2ed56a3320d79b7a797.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.

Ms Wellness Device

No.1432 · 前端开发 · 社区/原生 · 来源：MotionSites (MIT) · EN 原文

Build a single-page hero section for a product called "Measured" — a health/wellness wearable device landing page. The page is fullscreen (100vh), dark/moody aesthetic with layered imagery, a cursor-following spotlight reveal effect, and a frosted-glass navigation. Use React + Vite + Tailwind CSS + TypeScript.

---

## Fonts

1. **Google Fonts — Inter** (weights 300-700): Used as the global default font on all elements (`* { font-family: 'Inter', sans-serif; }`)
2. **Google Fonts — Instrument Serif** (regular + italic): Used for the hero heading "Measured". Load via `<link>` in index.html: `https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&display=swap`
3. **Helvetica Neue Roman** (self-hosted woff2/woff in `/public/fonts/`): Applied via a `.font-helvetica-neue` class on the hero section wrapper. Declare with `@font-face`.

---

## Asset URLs (exact)

- **Background Image (BG_IMAGE_1):** `https://images.higgs.ai/?default=1&output=webp&url=https%3A%2F%2Fd8j0ntlcm91z4.cloudfront.net%2Fuser_38xzZboKViGWJOttwIXH07lWA1P%2Fhf_20260713_140344_79e1296a-86d7-43fd-9b5f-63ffe560f291.png&w=1280&q=85`
- **Front Video (FRONT_VIDEO):** `https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260713_162101_0d7498c5-29bb-47bf-a99f-2773c0a880a9.mp4`
- **Overlay Image (OVERLAY_IMAGE):** `https://soft-zoom-63098134.figma.site/_assets/v11/3f10f1876e118f72a396e05a6c2d099569478272.png`

---

## Page Structure & Layers (z-index order)

### Navigation (z-50, fixed)
- **Logo (top-left):** Custom SVG geometric logo (white, 28x28), resembling angular interlocking shapes. The exact SVG path: `M 256 64 L 256 128 L 192.5 128 L 160 95 L 128 64 L 96 95 L 63.5 128 L 64 128 L 128 192 L 128 256 L 64.5 256 L 32 223 L 0 192 L 0 64 L 64 0 L 192 0 Z M 256 192 L 256 256 L 192.5 256 L 160 223 L 128 192 L 128 128 L 192 128 Z` (viewBox 0 0 256 256, fill white)
- **Desktop center pill nav (hidden on mobile):** Fixed horizontally centered, contains buttons: "Device", "Real Stories", "Science", "Plans", "Reach Us". Uses `.liquid-glass` styling (frosted glass). Buttons are `text-white/70`, `text-sm`, `font-medium`, rounded-full, hover to white.
- **Desktop CTA (top-right, hidden on mobile):** `.liquid-glass` pill button with a small green dot (w-2 h-2 rounded-full bg-green-400) and text "Reserve Yours", white text-sm font-medium.
- **Mobile hamburger (top-right, hidden md+):** `.liquid-glass` rounded-full pill, contains two white lines (w-5 h-[1.5px] and w-3.5 h-[1.5px]).

### Mobile Fullscreen Menu (z-55)
- Background: `#0a0a0a` solid
- Close button: top-right, `.liquid-glass` rounded-full with X made of two rotated white lines (+45deg, -45deg)
- Nav items stacked vertically, centered, `text-3xl sm:text-4xl`, white/90, font-medium
- "Reserve Yours" CTA at bottom with green dot, `.liquid-glass` pill
- Staggered entry animations: each item slides up from 24px with opacity 0->1, delays incremented by 60ms starting at 100ms. Uses `cubic-bezier(0.77, 0, 0.18, 1)` easing. Close button rotates in from -90deg with scale 0.8.

### Hero Section (100vh, overflow hidden)

**Layer 1 — Grid Background (z-0, opacity 0.1):**
- SVG with a repeating pattern of 48px cells. Pattern draws an L-shaped path (`M 48 0 L 0 0 0 48`), stroke `#64748b`, strokeWidth 0.6, no fill.
- The grid subtly parallax-shifts based on cursor position (offset calculated as cursor position relative to section center * 16, eased at 0.06 factor).

**Layer 2 — Background Image (z-10):**
- `BG_IMAGE_1` displayed as `background-image`, `bg-center bg-cover bg-no-repeat`, absolutely positioned inset-0.

**Layer 3 — Hero Text (z-20):**
- The word "Measured" in huge uppercase text
- Font: `'Instrument Serif', serif`
- Sizes: `text-[4.5rem]` default, `xs:text-[5.5rem]`, `sm:text-[10rem]`, `md:text-[13rem]`, `lg:text-[16rem]`
- `leading-[0.9]`, white, centered, positioned `top-20 sm:top-28 md:top-32`

**Layer 4 — Overlay Image (z-25):**
- `OVERLAY_IMAGE` as an `<img>` tag, absolutely positioned inset-0, `w-full h-full object-cover`, pointer-events-none. This is a semi-transparent PNG that sits on top of the background to add depth/atmosphere.

**Layer 5 — Spotlight Reveal (z-30):**
- A cursor-following radial reveal mask that shows a video underneath only where the cursor hovers.
- **Radius:** 260px
- **Mask gradient stops:** center full white (0-40%), then feathers out: 60% at 0.75 alpha, 75% at 0.4, 88% at 0.12, 100% at 0 (fully transparent).
- **Implementation:** A hidden `<canvas>` draws the radial gradient at the smoothed cursor position. The canvas is exported as a dataURL and applied as a CSS mask (`-webkit-mask-image` / `mask-image`) on a div that contains the video.
- **Cursor smoothing:** Uses `requestAnimationFrame` loop with lerp factor 0.1 (`smooth += (target - smooth) * 0.1`).
- **Video placement:** The video (`FRONT_VIDEO`) is clipped to the bottom 60% of the viewport using `clipPath: 'inset(40% 0 0 0)'`. It autoplays, loops, is muted, and uses playsInline.

---

## Liquid Glass CSS Effect (`.liquid-glass`)

```css
.liquid-glass {
  background: rgba(255, 255, 255, 0.01);
  background-blend-mode: luminosity;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  border: none;
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.1);
  position: relative;
  overflow: hidden;
}
.liquid-glass::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1.4px;
  background: linear-gradient(180deg,
    rgba(255,255,255,0.45) 0%, rgba(255,255,255,0.15) 20%,
    rgba(255,255,255,0) 40%, rgba(255,255,255,0) 60%,
    rgba(255,255,255,0.15) 80%, rgba(255,255,255,0.45) 100%);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}
```

This creates a near-invisible frosted glass background with a subtle gradient border using the mask-composite trick (border-only gradient).

---

## Key Behaviors

1. **Body overflow locks** when mobile menu is open
2. **No scrolling** — single viewport hero only
3. **Background is white** on the root container (`bg-white`), but the hero section fills the entire viewport with dark imagery
4. **The reveal effect only shows video in the bottom 60%** of the screen (the top 40% is masked out via clipPath), so hovering over the top portion shows nothing extra — just the base layers

---

## Summary of the Visual Effect

The user sees a dark, atmospheric product shot (wearable device on a wrist) with "Measured" in giant serif text overlaid. A semi-transparent overlay adds haze/depth. As the user moves their cursor, a soft spotlight circle reveals an underlying looping video (showing the product in motion) — but only in the lower portion of the screen. The grid background subtly shifts with parallax. Navigation uses an elegant frosted-glass pill aesthetic.

Yacht Club 首屏

No.1433 · 前端开发 · 社区/原生 · 来源：MotionSites (MIT) · EN 原文

Core Instruction
Act as an elite, award-winning creative frontend developer. Your task is to perfectly recreate a luxury Yacht Club landing page experience with highly advanced WebGL-like DOM animations, a custom GSAP staggered menu, a Framer Motion video fleet overlay, and an interactive liquid distortion cursor trail.
Tech Stack
Framework: React 19, Vite, TypeScript
Styling: Tailwind CSS v4
Animation: motion/react (Framer Motion) and gsap
Fonts: @fontsource-variable/geist and Google Fonts (Instrument Serif)
1. Global CSS & Theming (src/index.css)
Configure the global CSS exactly as follows using Tailwind v4 syntax:
Import Instrument Serif from Google Fonts and tw-animate-css.
Define the base theme with OKLCH colors for a dark luxury aesthetic.
Set --background: oklch(0.145 0 0); and --foreground: oklch(0.985 0 0);.
Use --font-sans: "Instrument Serif", ui-serif, serif; and map --font-heading to it to force the serif font on headers. Force @layer base to have body { @apply bg-background text-foreground; }.
Ensure all text throughout the app default to font-serif uppercase unless specified otherwise.
2. Global State & App Structure (src/App.tsx)
Create a single-page app utilizing AnimatePresence. Manage two main states:
isMenuOpen: Boolean linked to the custom GSAP menu.
isFleetOpen: Boolean triggered by clicking "Our Fleet" in the menu.
Background Video:
Implement an absolute, z-0 background wrapper using <motion.div>.
Frame the following Vimeo iframe exactly:
<iframe src="https://player.vimeo.com/video/1184061018?background=1&autoplay=1&loop=1&byline=0&title=0" className="absolute top-1/2 left-1/2 w-[100vw] h-[56.25vw] min-h-[100vh] min-w-[177.77vh] -translate-x-1/2 -translate-y-1/2" />
Use motion.div to apply a dynamic CSS blur. When isFleetOpen is true, animate the filter to blur(100px) (duration 1.56s). When false, animate to blur(0px) (duration 1.3s).
3. The Interactive Liquid Cursor Trail
Build an interactive liquid ripple system inside App.tsx utilizing a hidden SVG filter and a DOM pool of 80 div elements.
The SVG Filter:
Place this SVG at the top of the app container:
<svg className="hidden"><filter id="liquid-trail"><feTurbulence type="fractalNoise" baseFrequency="0.02" numOctaves="2" result="noise" /><feDisplacementMap in="SourceGraphic" in2="noise" scale="30" xChannelSelector="R" yChannelSelector="G" /></filter></svg>
The Ripple Logic:
Create an array of 80 objects with { x: 0, y: 0, age: 0, active: false } managed via useRef.
On window mousemove, calculate the distance since the last mouse position. If distance > 25px, spawn a new ripple by setting active = true, writing the X/Y coords, and incrementing a rotating current index (idx + 1) % 80.
Use requestAnimationFrame to step the rings. For each active ring, increment age += 0.012.
Ring Math: size = 20 + (age * 280). opacity = 1 - Math.pow(age, 1.2).
If age >= 1, set opacity to 0 and scale to 0.
The React DOM nodes for the ripples should be absolute empty divs with inline styles: backdropFilter: 'url(#liquid-trail) blur(1px)', WebkitBackdropFilter: 'url(#liquid-trail) blur(1px)', boxShadow: 'inset 0 0 30px rgba(255,255,255,0.1), 0 0 15px rgba(147,197,253,0.15)', willChange: 'transform, opacity, width, height, left, top'
4. Hero Content (!isFleetOpen state)
Wrap this inside <AnimatePresence> to mount/unmount seamlessly when the fleet viewer opens.
Main Heading: Positioned absolute top-[96px] left-[20px] md:left-[96px].
Use motion.div with staggered children variants mapping to: hidden: { opacity: 0, y: 40, transition: { duration: 0.48 } } and visible: { opacity: 1, y: 0, transition: { duration: 0.96 } }.
The text is: "MASTER THE" > "ELEMENTS." (italicized) > "EMBRACE THE" > "OCEAN" (italicized).
Styling: text-[64px] md:text-[140px] font-normal leading-none drop-shadow-2xl.
Subtext:
Text: "JOIN AN EXCLUSIVE COMMUNITY OF SAILORS. WHETHER YOU CRAVE THE THRILL OF THE OPEN SEA OR THE SERENITY OF A SUNSET CRUISE, YOUR NEXT GREAT ADVENTURE STARTS HERE."
Position: Pushed over slightly on desktop md:translate-x-[100px], text-[10px] md:text-xs, strictly w-[260px], tracking-widest.
Floating CTA Button: Positioned bottom-8 right-8 z-50.
Button text: "JOIN THE [italicized: CLUB]"
On desktop, if the menu is open, translate the button to the left using transform: translateX(calc(-1 * clamp(260px, 38vw, 420px))).
5. Fleet Video Overlay Modal (isFleetOpen state)
When opened, display a fixed flex container taking up the full screen (flex-col md:flex-row).
The Data: Use this exact JSON array:
code
JSON
[
{
"src": "https://app-uploads.krea.ai/wan-videos/08006647-1c55-4823-b35d-e40d57c66bf8.mp4",
"title": "OCEAN\nECLIPSE",
"specs": [
{ "label": "LENGTH", "value": "28 M (92 FT)" },
{ "label": "CRUISING SPEED", "value": "22 KNOTS" },
{ "label": "GUESTS", "value": "UP TO 12 GUESTS" },
{ "label": "CABINS", "value": "4 EN-SUITE CABINS" },
{ "label": "SPECIAL FEATURE", "value": "ADVANCED GYRO STABILIZATION" }
]
},
{
"src": "https://app-uploads.krea.ai/wan-videos/91fd9932-6194-4d58-ada0-955692853019.mp4",
"title": "BLACK\nSOVEREIGN",
"specs": [
{ "label": "LENGTH", "value": "24 M (78 FT)" },
{ "label": "TOP SPEED", "value": "45 KNOTS" },
{ "label": "HULL", "value": "CARBON FIBER & KEVLAR" },
{ "label": "ENGINES", "value": "TWIN V12 2000 HP" },
{ "label": "SPECIAL FEATURE", "value": "BESPOKE DESIGN WITH GOLD DETAILING" }
]
},
{
"src": "https://app-uploads.krea.ai/wan-videos/95fb3282-d7cf-448e-9202-ef0662541c83.mp4",
"title": "AZURE\nHORIZON",
"specs": [
{ "label": "LENGTH", "value": "32 M (105 FT)" },
{ "label": "RANGE", "value": "1,500 NAUTICAL MILES" },
{ "label": "GUESTS", "value": "14 GUESTS + 5 CREW" },
{ "label": "DECK", "value": "SPACIOUS SUN DECK WITH JACUZZI" },
{ "label": "SPECIAL FEATURE", "value": "FULL WATER TOYS GARAGE" }
]
}
]
FleetVideo Component:
Each column maps out a <video> taking up w-full h-[85vh] md:h-full md:flex-1. Include borders (border-r-2 border-white).
Animate columns coming in from the right (x: '100vw' to x: 0) using Framer Motion with delays staggering by i * 0.1 and a duration of 1.56.
Add onMouseEnter / onMouseLeave state to trigger video .play() and .pause() wrapped safely in a promise resolver to avoid interruptions.
On hover, scale the video up to 105% with duration-700.
Show a black overlay (bg-black/20).
Hover Content: Inside <AnimatePresence>, render the title (e.g., text-5xl md:text-7xl mb-12), the mapped specs (uppercase tracking-widest text-white/70), and a "VIEW" button (bg-white/5 backdrop-blur-[120px]). Apply the specific y stagger text variants so they gracefully shift up from a clipped mask.
6. The GSAP Custom Staggered Menu (StaggeredMenu.jsx)
Create an off-canvas navigation sidebar triggered from the right using GSAP.
The Wrapper & Icon: The hamburger icon consists of a div wrapper containing two spans forming a "Plus" shape. When open, GSAP controls it: rotate the wrapper by 225deg to form an X.
Slot Machine Text Link: Next to the hamburger, display the text "MENU". When clicked, use a slot-machine-style vertical transition, cycling the words "MENU" and "CLOSE" three times before settling on the correct target word. Shift the interior wrapper yPercent: -finalShift rapidly over 0.5s easing power4 out.
Menu Colors: Set the GSAP configuration to use colors ['#1a1a1a', '#93c5fd']. On open, the menu button's color changes automatically from #ffffff to #000000.
The Panel Animation:
Utilize "prelayers", an array of div masking layers that slide in from 100vw. GSAP should .fromTo their xPercent to 0 using power4.out staggered by 0.07s.
The main panel follows right after taking 0.65 seconds.
Menu Items: The menu items MUST contain: Home, Our Fleet (triggers setIsFleetOpen(true) and closes the menu), Membership, Regattas & Events, Academy, Contact. Animate their entrance using yPercent and a 10deg rotation rotating back to flat using .stagger: { each: 0.1 } mapped directly against the items NodeList.
Wrap the StaggeredMenu over the app context, providing the right position, colors, and social handles (Instagram, Facebook, Twitter).
Ensure all component names, class names, file structures, and specific math equations are strictly ported to perfectly mimic the reference logic.

Ecovolta 首屏

No.1434 · 前端开发 · 社区/原生 · 来源：MotionSites (MIT) · EN 原文

PROMPT:

Build a single-page hero section for a renewable energy company called "EcoVolta" using React, TypeScript, Vite, Tailwind CSS, Framer Motion, and Lucide React icons. The page should be a full-viewport height (h-screen) layout with no scrolling (overflow-hidden).

TECH STACK:

React 18 + TypeScript
Vite
Tailwind CSS 3
Framer Motion (for animations)
Lucide React (for icons)
clsx + tailwind-merge (for className utility)
Font: Google Fonts Inter (weights 300-900)
BACKGROUND:

The entire page background color is #F5F3EE (warm off-white/cream)
A full-page background video plays on loop, autoplaying, muted, with playsInline. It is fixed, inset-0, w-full h-full object-cover at z-0
Video URL: https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260402_161801_19c1f902-b569-4d42-87b0-4de571a14399.mp4
NAVBAR (z-10, relative):

Flex row, space-between, padding px-4 md:px-8 py-4 md:py-6
Left side: Text logo "EcoVolta" (text-lg md:text-xl font-semibold), followed by a language selector showing a Globe icon (lucide Globe, 16x16) and "En" text
Center (hidden on smaller than lg): Navigation links -- "Renewables", "Strategies", "Photovoltaic", "Wind Systems", "Packages" -- each text-sm text-gray-700 hover:text-gray-900, spaced gap-8
Right side: "Sign In" link (hidden below sm) with a rounded-full border (border border-black/20) and padding px-4 md:px-6 py-2 md:py-2.5; "Clean Energy" button with bg-black text-white rounded-full same padding
HERO CONTENT (z-10, centered, flex-col items-center):

Container: flex-1 flex flex-col items-center px-4 md:px-8 pt-4 md:pt-8
Badge/Pill: Rounded-full pill with border border-black/20, containing emojis and text: sun -> planet earth -> "Delivering power innovate" -> seedling (exact: <span>sun emoji</span> <span>arrow</span> <span>earth globe emoji</span> <span>Delivering power innovate</span> <span>arrow</span> <span>seedling emoji</span>). On mobile, shorter text "Power innovate". Font size text-xs md:text-sm.

Main Heading: Uses a custom StaggeredFade animation component. Text: "Renewable Power For Tomorrow, Infinite Clean Solutions". Styling: text-3xl sm:text-4xl md:text-5xl lg:text-6xl leading-tight font-normal text-center max-w-5xl mb-3 md:mb-4. Color: #31463B (dark forest green). The animation reveals each letter individually with a staggered 0.03s delay per letter, 0.3s duration fade-in, triggered once when in view.

Subheading: Wrapped in FadeDown component (delay 0.5s). Text: "Sustainable Energy Platform. Engineering, deploying, and servicing solar arrays for homes, businesses, and large-scale operations worldwide." Styling: text-center text-gray-600 max-w-3xl mb-4 md:mb-5 text-sm md:text-base lg:text-lg.

CTA Buttons (FadeDown delay 0.7s): Two buttons side by side (column on mobile, row on sm+):

Primary "Explore Options": bg-gradient-to-r from-[#3C684D] to-[#4A7144] (green gradient), white text, rounded-full, contains a Leaf icon (16x16) on left, text, and a circular icon button on right (w-7 h-7 md:w-8 md:h-8) with gradient background linear-gradient(59deg, #567A5E 0%, #78A873 100%) containing a filled Play icon
Secondary "Start Network": White bg, text-gray-700, rounded-full, text on left, circular icon on right with gradient linear-gradient(59deg, #EEEEEE 0%, #CBCBCB 100%) containing a black ArrowRight icon
BOTTOM-LEFT ELEMENT (hidden below md, absolute bottom-24 left-8, z-10):

White rounded-lg box (40x40) with a MapPin icon in text-[#4A7C5A]
Below it: "4521 Sunvalley," (font-medium text-gray-900) and "Rd7, USA" (text-gray-600)
BOTTOM-CENTER ELEMENT (absolute bottom-20 md:bottom-24, z-10):

A "liquid glass" play button: 36x36 md:40x40 circle with glassmorphism effect (see CSS below), containing a filled white Play icon
Next to it: "Clean Power System" text in text-xs md:text-sm font-medium text-white
BOTTOM-RIGHT ELEMENT (hidden below lg, absolute bottom-48 right-8, z-10):

Three overlapping avatar circles (profile images):
Left: 40x40 circle, z-0, positioned left-0
Center: 64x64 circle with 4px white border, z-10, centered via left-1/2 -translate-x-1/2
Right: 40x40 circle, z-0, positioned right-0
Container: h-16 w-28 relative
Avatar image URLs:
Left: https://images.higgs.ai/?default=1&output=webp&url=https%3A%2F%2Fd8j0ntlcm91z4.cloudfront.net%2Fuser_38xzZboKViGWJOttwIXH07lWA1P%2Fhf_20260404_181959_c031059f-0b95-4099-89ca-105c74073dd7.png&w=1280&q=85
Center: https://images.higgs.ai/?default=1&output=webp&url=https%3A%2F%2Fd8j0ntlcm91z4.cloudfront.net%2Fuser_38xzZboKViGWJOttwIXH07lWA1P%2Fhf_20260404_181856_0904710c-03e6-460d-86ac-9acc0958001f.png&w=1280&q=85
Right: https://images.higgs.ai/?default=1&output=webp&url=https%3A%2F%2Fd8j0ntlcm91z4.cloudfront.net%2Fuser_38xzZboKViGWJOttwIXH07lWA1P%2Fhf_20260404_182114_826e4e5d-c7c6-425f-a72b-0410be243f72.png&w=1280&q=85
Text: "+ 37k Deployments" (text-sm font-medium)
Row of 5 icons below: RefreshCw, Square, PlusCircle, Grid2X2, Sparkles (all 20x20, text-black)
LOGO MARQUEE (bottom of page, z-10):

Padding pb-6 md:pb-8, overflow hidden
Infinitely scrolling list of company names: Retool, remote, ARC, Raycast, runway, ramp, HEX, Vercel, descript (duplicated for seamless loop)
Each name: text-gray-400 text-base md:text-xl font-medium whitespace-nowrap, gap gap-8 md:gap-16
CSS keyframe animation scroll translating from 0 to -50% on X axis, duration 15s on mobile / 30s on desktop, linear infinite
Left and right gradient fade overlays: w-16 md:w-32, gradient from #F5F3EE to transparent
LIQUID GLASS CSS (custom utility class .liquid-glass):


.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;
}
SCROLL KEYFRAME:


@keyframes scroll {
0% { transform: translateX(0); }
100% { transform: translateX(-50%); }
}
ANIMATION COMPONENTS:

StaggeredFade: Renders an <h1> using Framer Motion. Splits the text into individual letters. Each letter fades in (opacity: 0 -> 1) with a staggered delay of i * 0.03s and duration 0.3s. Triggered once when the element enters the viewport (useInView with once: true).

FadeDown: A Framer Motion wrapper div that animates from opacity: 0, y: -20 to opacity: 1, y: 0 with duration: 0.6s and a configurable delay. Triggered once when in view.

RESPONSIVE BREAKPOINTS:

Mobile-first design
sm (640px): CTA buttons go horizontal, "Sign In" visible, badge shows full text
md (768px): Larger text sizes, bottom-left address visible, spacing increases
lg (1024px): Desktop nav links visible, bottom-right avatars/deployments visible, heading reaches text-6xl

Sup 霓虹 Velocity Countdown

No.1435 · 前端开发 · 社区/原生 · 来源：MotionSites (MIT) · EN 原文

{
  "summary": "The 'Neon Velocity' style guide is a minimalist yet aggressive design system that blends brutalist structure (heavy borders, massive type) with futuristic glass effects. It focuses on high contrast, uppercase technical labels, and immersive background glows to create a premium, 'elite' software atmosphere.",
  "style": {
    "description": "The style is built on a high-contrast foundation of deep blacks (#050505) and vibrant neon lime (#BFFF00). It employs 'Plus Jakarta Sans' (800 weight) for heavy, tightly-tracked headlines and 'Geist Mono' for technical, wide-tracked labels. Key visual techniques include 3D perspective transforms, grain/noise overlays for texture, and luminosity-based hover states that make components feel light-emitting.",
    "prompt": "### Core Aesthetics\n- **Color Palette**: Primary Background: `#050505`; Accent Green: `#BFFF00`; Text Primary: `#FFFFFF`; Text Secondary: `rgba(255, 255, 255, 0.4)`; Borders: `rgba(255, 255, 255, 0.1)`.\n- **Typography**:\n  - **Headlines**: 'Plus Jakarta Sans', weight 800, tracking -0.05em, uppercase. Fluid sizing: `clamp(2.6rem, 10vw, 8.75rem)`.\n  - **Technical Meta**: 'Geist Mono', weight 400-600, tracking 0.2em to 0.5em, uppercase, font-size: 10px-12px.\n  - **Body**: 'Inter', weight 300-400, leading-relaxed.\n- **Visual Effects**:\n  - **Noise Overlay**: Subtle SVG fractal noise at 3% opacity fixed to the viewport.\n  - **Refraction Glow**: Large, blurred radial gradients (`#BFFF00` at 15% opacity) acting as background ambiance.\n  - **Glassmorphism**: `backdrop-filter: blur(12px)` with 1px solid white borders at 8% opacity.\n- **Animations**: Use `cubic-bezier(0.16, 1, 0.3, 1)` for all transitions. Implement scroll-reveal effects where elements translate 40px Y-axis while fading in."
  },
  "layout_and_structure": {
    "description": "The layout is a single-column flow with wide containers (max-width 1600px). It uses a '3D Glass' background to anchor the hero and a modular bento-grid for feature sections.",
    "prompts": [
      {
        "part": "Header",
        "prompt": "Full-width container (max 1600px). Left: Logo in 'Plus Jakarta Sans' bold uppercase. Right: Navigation links using 'Geist Mono' 10px, tracking 0.3em. Include a primary 'Laser Button' with rounded-full shape for the CTA."
      },
      {
        "part": "Hero Section",
        "prompt": "A central stacked layout. Background: A '3D Glass' card tilted at 15deg using `perspective(1000px) rotateX(15deg)`. Foreground: A massive headline wrapped in a white border box (border-width: 12px). Below the headline, a split-row metadata section: left side contains a location/status tag; right side contains a large countdown timer in 'Plus Jakarta Sans' using `font-variant-numeric: tabular-nums`."
      },
      {
        "part": "Feature Bento Grid",
        "prompt": "3-column grid (collapsing to 1 on mobile). Each card (Luminosity Card) should have a 2rem border-radius, minimum height of 450px, and use a radial-gradient top-left glow. Content: Top-aligned mono index (e.g., 01/ETHOS), middle-aligned large headline, bottom-aligned description."
      },
      {
        "part": "Social Proof & Form",
        "prompt": "Avatar stack with 5 overlapping images, each having a 2px `#BFFF00` border and neon shadow. Horizontal form: A pill-shaped container with `rgba(255,255,255,0.05)` background and blur, containing a borderless mono input and a rounded-full 'Laser Button'."
      },
      {
        "part": "Mobile Navigation",
        "prompt": "A fixed bottom navigation pill. `background: rgba(10, 10, 10, 0.8)`, `backdrop-filter: blur(20px)`, 1px border. Icons should be centered with high-contrast hover states to `#BFFF00`."
      }
    ]
  },
  "special_ui_components": [
    {
      "component": "Laser Button",
      "description": "A high-energy interactive button with a sweeping light effect.",
      "prompt": "Background color: `#BFFF00`; Color: `#000000`; Border-radius: 9999px; Box-shadow: `0 0 20px rgba(191, 255, 0, 0.3)`. On hover: An absolute-positioned pseudo-element with a linear-gradient (transparent, white 40%, transparent) translates across the button at a 45-degree angle over 0.6s."
    },
    {
      "component": "Luminosity Card",
      "description": "A responsive container that reacts to mouse proximity with light.",
      "prompt": "Background: `radial-gradient(circle at top left, rgba(255, 255, 255, 0.03), transparent)`. Border: 1px solid `rgba(255, 255, 255, 0.05)`. Transition: 0.5s ease. Hover state: Change border-color to `rgba(191, 255, 0, 0.3)` and background to a radial-gradient using the accent green `#BFFF00` at 5% opacity."
    }
  ],
  "special_notes": "MUST: Use uppercase for all technical labels and headlines to maintain the brutalist feel. MUST: Use `tabular-nums` for the countdown to prevent horizontal layout shift during ticks. MUST: Maintain a minimum touch target of 48px for the mobile bottom nav buttons. DO NOT: Use standard rounded corners on the large Hero border-box; keep them sharp (0px) to contrast with the rounded cards below. DO NOT: Use pure black (#000) for backgrounds; stick to the slightly lighter `#050505` to allow the noise texture to be visible."
}

Ms Apex Saa S

No.1436 · 前端开发 · 社区/原生 · 来源：MotionSites (MIT) · EN 原文

Build a dark SaaS landing page with three sections: a floating glassmorphic navbar, a hero section, and a social proof section with a background video. Use React + Tailwind CSS + TypeScript.

Font: Install @fontsource/geist-sans (weights 400, 500, 600, 700). Set body font to 'Geist Sans', 'Inter', system-ui, sans-serif.

Color System (HSL, CSS variables in :root):

--background: 260 87% 3%
--foreground: 40 6% 95%
--primary: 262 83% 58%
--primary-foreground: 0 0% 100%
--secondary: 240 4% 16%
--secondary-foreground: 40 6% 95%
--muted: 240 4% 16%
--muted-foreground: 240 5% 65%
--border: 240 4% 20%
--hero-heading: 40 10% 96%
--hero-sub: 40 6% 82%
--card: 240 6% 9%
--ring: 262 83% 58%
--radius: 0.75rem
Register hero.heading and hero.sub as Tailwind colors mapped to these variables.

Liquid Glass Utility Class (.liquid-glass):

.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;
}

Section 1 — Navbar: A horizontally centered nav with py-5. Inside, a liquid-glass rounded-3xl p-2 container, max-w-[850px] w-full, using flex items-center justify-between gap-6. Contains:

Logo (left): A w-7 h-7 rounded-lg div with bg-gradient-to-b from-secondary to-muted border border-border, containing an inline SVG (circle + 4 crosshair lines, white strokes). Next to it, the text "APEX" styled text-foreground text-xl font-semibold tracking-tight.
Nav links (center): Four buttons — "Features" (with ChevronDown icon), "Solutions", "Plans", "Learning" (with ChevronDown icon). Each: px-3 py-2 text-foreground/90 text-base hover:text-foreground transition-colors.
CTA (right): A rounded-xl px-4 py-2 button using bg-primary text-primary-foreground, size sm, text "Sign Up".

Section 2 — Hero: A section with bg-background relative overflow-hidden. Contains the Navbar, then a flex flex-col items-center pt-20 px-4 div with:

Badge: A liquid-glass rounded-full pl-3 pr-1 py-1 flex items-center gap-2 mb-8 pill. Left text: "Nova+ Launched!" (text-foreground text-xs). Right: a nested rounded-full bg-white/5 px-3 py-0.5 span with "Explore" + a ChevronRight icon (w-3 h-3).
Heading: h1 with text-hero-heading text-center text-4xl sm:text-6xl lg:text-7xl font-semibold leading-[1.05] tracking-tight max-w-5xl. Text: "Accelerate Your" + br + "Revenue Growth Now".
Subheading: p with text-hero-sub text-center text-lg leading-8 max-w-md mt-4 opacity-80. Text: "Drive your funnel forward with clever workflows, analytics, and seamless lead management."
CTA Buttons: flex items-center gap-4 mt-8. Two buttons:
Primary: bg-primary text-primary-foreground rounded-full px-6 py-3 text-base font-medium — "Start Free Right Now"
Secondary: liquid-glass text-foreground rounded-full px-6 py-3 text-base font-normal hover:bg-white/5 — "Schedule a Consult"

Section 3 — Social Proof: A section with relative w-full overflow-hidden. Contains:

Background Video: <video> element: autoPlay muted playsInline, absolute inset-0 w-full h-full object-cover, initial style={{ opacity: 0 }}. Source URL: https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260308_114720_3dabeb9e-2c39-4907-b747-bc3544e2d5b7.mp4
Gradient overlay: absolute inset-0 bg-gradient-to-b from-background via-transparent to-background.
Content: relative z-10 flex flex-col items-center pt-16 pb-24 px-4 gap-20:
Stats row: flex items-center gap-8 flex-wrap justify-center. Three items: Clock/"3-5 week turnround", DollarSign/"Upfront cost clarity", ShieldCheck/"Full refund assurance". Each: flex items-center gap-3 text-foreground/80 text-sm with icon in a liquid-glass w-8 h-8 rounded-lg container, icon w-4 h-4 text-foreground/70, label font-medium.
Spacer: div for video visibility.
Logo Marquee: w-full max-w-5xl. Layout: flex items-center gap-12. Left: text-foreground/50 text-sm paragraph "Relied on by brands / across the globe" (with br), whitespace-nowrap shrink-0. Right: relative overflow-hidden flex-1 div containing a flex animate-marquee gap-16 items-center div. Logos: Vortex, Nimbus, Prysma, Cirrus, Kynder, Halcyn — duplicated for seamless loop. Each logo: shrink-0 flex items-center gap-2 with a liquid-glass w-6 h-6 rounded-lg icon showing the first letter (text-xs font-bold text-foreground/70), and the name (text-base font-semibold whitespace-nowrap text-foreground).

Marquee Animation (Tailwind config):

keyframes: {
marquee: {
"0%": { transform: "translateX(0%)" },
"100%": { transform: "translateX(-50%)" },
},
},
animation: {
marquee: "marquee 20s linear infinite",
},

Icons: All from lucide-react — ChevronRight, ChevronDown, Clock, DollarSign, ShieldCheck.

Sup Hyper Saturated Fluid

No.1437 · 前端开发 · 社区/原生 · 来源：MotionSites (MIT) · EN 原文

<design-system>

Design Style: Hyper-Saturated Fluid\
Design Philosophy\
Core Concept: High-Contrast Fluidity This style merges the aggressive energy of high-saturation palettes with the soft, modern sophistication of glassmorphism and organic "liquid" geometry. It is designed to feel high-end, technologically advanced, and instantly memorable. Unlike standard flat design, it uses massive, asymmetrical "blob" sectioning to guide the eye.

Core Tenets:

Liquid Sectioning: Ditch straight horizontal divisions. Sections are divided by large-scale, organic "waves" or "liquid" cutouts. One primary color (usually a vibrant yellow or neon) dominates the hero area, bleeding into dark "void" sections.

Aggressive Saturation: Use one "shout" color that takes up 60% of the viewport. This color must be highly saturated (Cyber Yellow, Neon Green, or Electric Blue) to create an immediate psychological impact.

Glassmorphic Overlays: Primary interactive data (like credit cards or stat panels) are rendered as "frosted glass." They use high backdrop-blur and thin, white inner-strokes to simulate depth without breaking the clean aesthetic.

Massive Minimalist Typography: Headlines are oversized and bold, serving as the primary visual anchor. Body text is kept tiny and functional to maximize the impact of the hero scale.

The Dark Void: High-saturation areas are always balanced by deep black or charcoal "void" sections. This contrast ensures that the vibrant colors don't overwhelm the user and maintains a "premium" feel.

The Vibe:

Premium Fintech: Feels like a next-generation bank or a high-end luxury tech product.

Modern & Bold: Unapologetically loud but structurally disciplined.

Fluid Tech: Suggests movement, ease of use, and "frictionless" transactions.

Design Token System (The DNA)\
Colors (The "High-Impact" Palette)\
The Shout Color:

Primary (Cyber Yellow): #FDE047 (Vibrant, high-vis yellow). This is the "Hero" color. The Void:

Background (Deep Onyx): #0A0A0A (Rich black-gray).

Surface (Charcoal): #171717 (For secondary dark panels). Accents:

Pure White: #FFFFFF (For primary text on dark backgrounds and glass borders).

Deep Gray: #262626 (For UI elements inside the dark void).

Typography\
Font Family: "Inter" (Google Fonts) or "General Sans" (Fontshare). A clean, geometric sans-serif is mandatory.

Hierarchy:

Hero Headline: text-6xl to text-8xl, font-bold, tracking-tight.

Sub-headers: text-xl, font-medium, opacity-80.

Body: text-sm, font-normal, leading-relaxed.

Labels: text-[10px], uppercase, tracking-widest.

Shapes & Radii\
The "Liquid" Cut: Section containers use rounded-[100px] or custom clip-path waves to create asymmetrical, organic edges.

Component Radii: Pill-shapes (rounded-full) for buttons and badges. rounded-[32px] for glass containers.

Glass Depth: backdrop-blur-xl, bg-white/10, and a 1px white border at 20% opacity.

Component Stylings

1. The "Liquid" Hero Section\
   Base Styles: bg-cyber-yellow with a large rounded-b-[120px] (bottom-right) and rounded-bl-[40px] (bottom-left) to create an asymmetrical wave.

Content: Text is strictly left-aligned. Massive headlines in black.

1. The "Glassmorphic" Data Card\
   Base Styles: bg-white/10 with backdrop-blur-2xl and border border-white/20.

Interaction: A "Pill" badge in the top-right (bg-cyber-yellow) for actions like "Add Money."

Shadow: A very soft, large-radius black shadow (shadow-2xl) to lift the glass off the "liquid" surface.

1. The "Pill" CTA Button\
   Solid State: bg-black with text-white or bg-cyber-yellow with text-black.

Outline State: border-2 border-black/20 with a clean, centered label.

Hover: scale-105 and shadow-lg.

Animation & Motion\
Fluid Entrance: Sections slide up with a "liquid" elastic ease (cubic-bezier(0.22, 1, 0.36, 1)).

Glass Drift: Glassmorphic cards have a very subtle, slow floating animation (animate-float).

Micro-interactions: Buttons should use a smooth "squish" effect on click (active:scale-95).

Non-Genericness (The "Bold" Factor)\
Asymmetrical Sectioning: The page shouldn't be a stack of blocks; it should be a flow of organic shapes where the yellow "bleeds" into the black at different depths.

Logo Ticker in the Void: Partner logos (dbt, Tableau, etc.) are placed in the black "void" section at the bottom, styled in monochromatic white/gray to maintain focus on the hero.

High-Vis Trust Badges: Use pill-shaped badges with gold/yellow icons to showcase awards (e.g., "The world's best digital bank") inside the transition areas.

Dos and Don'ts\
DO use one dominant, saturated color to anchor the brand identity.

DO use heavy backdrop-blur for all floating UI elements.

DO prioritize massive typography for the main value proposition.

DON'T use standard 8px or 12px border radii; go extreme with pill shapes or huge organic curves.

DON'T clutter the high-saturation area; let the color and the type breathe.

DON'T use gradients on the "shout" color; keep it a flat, vibrant punch.

</design-system>

Ms Motionz 高级落地页页面

No.1438 · 前端开发 · 社区/原生 · 来源：MotionSites (MIT) · EN 原文

## Design Aesthetic
- **Color Palette**: Sleek dark modes (Black, Deep Violet, Charcoal) contrasted with vibrant accents (Electric Blue, Radiant Yellow, Soft Lavender).
- **Typography**: Modern, bold sans-serif for headings (e.g., General Sans, Zentry Custom) and clean, readable fonts for body text (e.g., Circular Web, Robert).
- **Visual Elements**:
- Video backgrounds with smooth transitions.
- Glassmorphism effects (blurred backgrounds, subtle borders).
- Bento-style grids for feature showcases.
- Floating 3D-like elements and interactive scroll-driven animations.
- **Micro-animations**: Hover effects with radial gradients, tilting cards, and smooth GSAP-powered transitions.

## Key Sections
1. **Hero**: A cinematic entrance with a video-switching interaction. Clicking a preview mini-video should transition to the next full-screen video with a scale and clip-path animation.
2. **About**: A scroll-triggered clip-path animation that expands an image/video to full screen as the user scrolls, introducing the "Design Layer".
3. **Features (Bento Grid)**: A collection of interactive cards with tilting effects and radial gradient hover states. Each card showcases a unique product or feature in the ecosystem.
4. **Story**: A floating image section with a magnetic mouse-follow effect, creating a sense of depth and mystery.
5. **The Symbiotic World**: An accordion-style section showcasing governance, opportunity, and value sharing within the ecosystem, accompanied by a rotating 3D token visualization.
6. **Metrics & Backers**: High-impact statistics displayed in a modern grid, followed by a list of world-class partners and backers.
7. **Contact & Footer**: A final call to action with a "sword-man" clip-path design and a comprehensive footer with social links.

## Technical Requirements
- Use **React** for component-based structure.
- Use **GSAP** (GreenSock) for all complex animations and scroll-triggered effects.
- Use **Tailwind CSS** for responsive styling and layout.
- Ensure all videos are muted, looped, and optimized for web performance.
- Implement a floating navbar that transitions from transparent to solid on scroll.

## Tone & Voice
The copy should be epic, visionary, and forward-looking. Use terms like "The Future of Design", "Design Economy", "Universal Design Layer", and "Symbiotic World".

故障风 Pulse

No.1439 · 前端开发 · 社区/原生 · 来源：MotionSites (MIT) · EN 原文

## Overview

Build a single-page React + TypeScript + Vite + Tailwind CSS v4 landing page. The page is extremely tall (1200vh) but all visual content is position-fixed to the viewport. Scrolling drives two scroll-scrubbed HLS videos, a typewriter text deletion effect, a vertically-scrolling manifesto, mouse-trail stickers, and a scroll-triggered feedback form. The aesthetic is brutalist/retro-digital with a pixel font, lime green on near-black with electric blue accents.

---

## TECH STACK (exact versions)

```json
{
"dependencies": {
"@tailwindcss/vite": "^4.1.14",
"@vitejs/plugin-react": "^5.0.4",
"express": "^4.21.2",
"hls.js": "^1.6.16",
"react": "^19.0.1",
"react-dom": "^19.0.1",
"vite": "^6.2.3"
},
"devDependencies": {
"@types/express": "^4.17.21",
"@types/node": "^22.14.0",
"esbuild": "^0.25.0",
"tailwindcss": "^4.1.14",
"tsx": "^4.21.0",
"typescript": "~5.8.2"
}
}
```

---

## ALL ASSET URLs

### HLS Videos (Mux streams):
```
VIDEO_URL_1 = "https://stream.mux.com/W2NRcV6MrewS7QyWWqAWZvJR9jrnPU5rxymlPg01gRzk.m3u8"
VIDEO_URL_2 = "https://stream.mux.com/aypDi1exkKgYKEbWme9Csi47zxIim0101hw3ghmSzQIyw.m3u8"
```

### Static Stickers (Figma CDN):
```
STICKER1 = "https://crow-peanut-06457083.figma.site/_components/v2/4c2b061456bbff22b92923348791b501874ded3f/d9a6de619b1e7bf4b31b22e6d29324306ee68ad9.d9a6de61.png"
STICKER2 = "https://crow-peanut-06457083.figma.site/_components/v2/4c2b061456bbff22b92923348791b501874ded3f/7d1d8f4421fc4780ec85b4153ca6605a4b90dd65.7d1d8f44.png"
STICKER3 = "https://crow-peanut-06457083.figma.site/_components/v2/4c2b061456bbff22b92923348791b501874ded3f/80809d23ccb460d0db21f77bb3afef67d3ad1d9a.80809d23.png"
STICKER4 = "https://crow-peanut-06457083.figma.site/_components/v2/4c2b061456bbff22b92923348791b501874ded3f/50d6c27f67bc10d6859cf37d2f017bc406ad3a0d.50d6c27f.png"
```

### Mouse Trail Stickers (Figma CDN):
```
TRAIL_STICKER1 = "https://crow-peanut-06457083.figma.site/_components/v2/4c2b061456bbff22b92923348791b501874ded3f/b77ef81dabfca9ce4a4d1af5d553e17019a0d229.b77ef81d.png"
TRAIL_STICKER2 = "https://crow-peanut-06457083.figma.site/_components/v2/4c2b061456bbff22b92923348791b501874ded3f/9ece3a6bf6c5cecf6c0078d022a171bc93baf9c5.9ece3a6b.png"
TRAIL_STICKER3 = "https://crow-peanut-06457083.figma.site/_components/v2/4c2b061456bbff22b92923348791b501874ded3f/41b9f0bffb2c0b2e1d3fbe26c124ed1378970c35.41b9f0bf.png"
TRAIL_STICKER4 = "https://crow-peanut-06457083.figma.site/_components/v2/4c2b061456bbff22b92923348791b501874ded3f/0edc0785a3e3bf26be7a494886999c4a6f1dc14c.0edc0785.png"
TRAIL_STICKER5 = "https://crow-peanut-06457083.figma.site/_components/v2/4c2b061456bbff22b92923348791b501874ded3f/d12ddf42fe4c8437df4414c883fe60fb77b20cbe.d12ddf42.png"
```

---

## FONT

Google Font: **"Press Start 2P"** -- imported via CSS `@import url(...)`. Registered as a Tailwind v4 theme token:

```css
@theme {
--font-press-start: "Press Start 2P", system-ui, sans-serif;
}
```

Applied everywhere via class `font-press-start`.

---

## COLOR SYSTEM

| Token | Value | Usage |
|-------|-------|-------|
| Background | `slate-950` | Page bg, form bg |
| Primary text/accent | `#85D743` | All headings, buttons, cursor, manifesto text |
| Secondary accent | `#0033FF` | Marquee bg, form border, button shadows |
| Button hover | `#9eff5c` / `#9bfb4e` | Submit/reset button hover states |
| Form bg | `slate-950/95` | 95% opacity dark overlay |
| Input bg | `slate-900` | Form input fields |
| Input border | `slate-700` | Default border, `#85D743` on focus |
| Nav text | white | Navigation links |
| Selection | `emerald-500/20` | Text selection highlight |

---

## HTML SHELL (`index.html`)

```html
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Scroll Video</title>
</head>
<body class="bg-slate-950 overflow-x-hidden m-0 p-0 selection:bg-emerald-500/20">
<div id="root"></div>
<script type="module" src="/src/main.tsx"></script>
</body>
</html>
```

---

## CSS (`src/index.css`) -- EXACT

```css
@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap');
@import "tailwindcss";

@theme {
--font-press-start: "Press Start 2P", system-ui, sans-serif;
}

@keyframes marquee {
0% { transform: translate3d(0, 0, 0); }
100% { transform: translate3d(-50%, 0, 0); }
}

@keyframes sticker-fade-out {
0% {
opacity: 0;
transform: translate(-50%, -50%) rotate(var(--rot)) scale(0);
}
20% {
opacity: 1;
transform: translate(-50%, -50%) rotate(var(--rot)) scale(1.05);
}
30% {
opacity: 1;
transform: translate(-50%, -50%) rotate(var(--rot)) scale(1.0);
}
85% {
opacity: 1;
transform: translate(-50%, -50%) rotate(var(--rot)) scale(1.0);
}
100% {
opacity: 0;
transform: translate(-50%, -50%) rotate(var(--rot)) scale(0.8);
}
}

.animate-marquee {
display: flex;
width: max-content;
animation: marquee 10s linear infinite;
}
```

---

## PAGE LAYOUT

Root container: `relative w-full bg-slate-950 min-h-[1200vh] select-none`

All visual content is `position: fixed`. The 1200vh height exists solely to create scroll distance that drives the animations.

---

## ELEMENT-BY-ELEMENT BREAKDOWN

### 1. FULL-SCREEN VIDEO BACKGROUND (fixed, z-auto)

Container: `fixed inset-0 w-full h-full overflow-hidden`

Two `<video>` elements stacked:
- Both: `absolute inset-0 w-full h-full object-cover pointer-events-none transition-opacity duration-300`
- Both: `muted playsInline autoPlay={false} preload="auto" crossOrigin="anonymous"`
- Video 1 starts at `opacity: 1`, Video 2 starts at `opacity: 0`

**HLS Setup:**
- Use `hls.js` with `{ maxBufferLength: 60 }`
- On `MANIFEST_PARSED`: call `video.play().then(() => video.pause())` to warm decoder
- Fallback: native HLS for Safari via `canPlayType("application/vnd.apple.mpegurl")`

**Scroll-Scrub Logic (requestAnimationFrame lerp loop):**
- Calculate `progress = scrollY / (documentHeight - windowHeight)` [0 to 1]
- Video 1 maps progress [0, 0.5] to its full duration
- Video 2 maps progress [0.5, 1.0] to its full duration
- Lerp factor: 0.3 (smooth interpolation per frame)
- Guard: Only update `video.currentTime` when `!video.seeking`
- Snap immediately at scroll boundaries (scrollY <= 10 for v1, at bottom for v2)

**Crossfade (no dim):**
- Progress 0-0.45: v1 opacity 1, v2 opacity 0
- Progress 0.45-0.5: v1 stays at opacity 1, v2 fades from 0 to 1 (overlaid on top)
- Progress 0.5+: v1 opacity 0 (GPU savings), v2 opacity 1

---

### 2. DIAGONAL MARQUEE BANNER (fixed, z-50)

Container: `fixed top-14 left-[-170px] w-[650px] -rotate-[30deg] z-50 bg-[#0033FF] py-[18px] overflow-hidden select-none pointer-events-none shadow-2xl`

Inner: `.animate-marquee flex whitespace-nowrap`

Two identical `<span>` elements for seamless loop:
```
font-press-start text-[16px] text-[#85D743] tracking-widest px-4
```
Content: `WARNING! WARNING! WARNING! WARNING! WARNING! WARNING! WARNING! WARNING!&nbsp;` (repeated twice)

Animation: `marquee 10s linear infinite` (translates X from 0 to -50%)

---

### 3. FLOATING STICKER - TOP LEFT (fixed, z-40)

Container: `fixed z-40 select-none pointer-events-none transition-transform duration-300`
- Inline style: `top: 232px`, `left: 120px`, `transform: rotate(32deg)`
- Image: STICKER1, `w-[100px] h-auto object-contain`, `referrerPolicy="no-referrer"`

---

### 4. FLOATING STICKER - BOTTOM RIGHT (fixed, z-40)

Container: `fixed bottom-8 right-8 z-40 select-none pointer-events-none transition-transform duration-300`
- Image: STICKER2, `w-[110px] sm:w-[150px] h-auto object-contain`, `referrerPolicy="no-referrer"`

---

### 5. NAVIGATION (fixed, z-50)

```
fixed top-10 right-8 md:right-16 z-50 flex gap-6 md:gap-10 font-press-start text-[10px] sm:text-xs md:text-sm text-white select-auto
```

Links: Projects, Expertise, About, Contact
- Each: `hover:text-[#85D743] transition-colors duration-200`
- Contact link: `onClick` prevents default, calls `window.scrollTo({ top: documentElement.scrollHeight, behavior: "smooth" })`

---

### 6. HERO TEXT - TYPEWRITER DELETION (fixed, z-30)

Container: `fixed top-0 left-0 w-full h-screen z-30 pointer-events-none flex flex-col justify-end p-8 md:p-16 pb-16 sm:pb-24`

H1: `font-press-start text-[#85D743] text-3xl sm:text-5xl md:text-6xl lg:text-7xl xl:text-8xl leading-[1.2] tracking-tight uppercase select-none max-w-5xl`

**Three lines:**

**Line 1: "PROBLEM"** -- 7 individual `<span className="inline-block relative">` characters (indices 1-7)

**Line 2: "WITH" + 2 stickers** -- wrapped in `inline-flex items-center gap-3 sm:gap-5 md:gap-7 align-middle`
- Letters W-I-T-H in nested `inline-flex items-center gap-[0.06em] sm:gap-[0.08em] md:gap-[0.1em]` (indices 8-11)
- STICKER4 image at index 12: `h-[0.85em] w-auto object-contain`, rotated `-8deg`
- STICKER3 image at index 13: `h-[0.85em] w-auto object-contain`, rotated `6deg`

**Line 3: "CREATIVE?"** -- 9 characters (indices 14-22)

**Total character count: 22**

**Cursor:** After the last visible character: `inline-block w-[0.14em] h-[0.8em] bg-[#85D743] ml-1 select-none animate-pulse align-middle`

**Deletion logic:**
- During scroll progress 0 to 0.25, characters are removed right-to-left
- `visibleCount = Math.round((1 - activeProgress) * 22)` where `activeProgress = min(progress, 0.25) / 0.25`

---

### 7. MANIFESTO - ROLLING CREDITS (fixed, z-25)

Container: `fixed top-0 left-0 w-full md:w-[70%] h-screen z-25 pointer-events-none flex flex-col justify-start p-8 md:p-16 pt-[12vh] pb-16 select-none`
- Initial inline style: `opacity: 0`, `transform: translateY(100vh)`

Text div: `font-press-start text-[#85D743] text-[20px] sm:text-[26px] md:text-[32px] leading-[1.35] tracking-tight uppercase text-left whitespace-pre-line select-none`

**Scroll behavior:**
- Begins after progress 0.25 + (200px / maxScroll) delay
- `alpha = (progress - startProgress) / (1 - startProgress)` [0 to 1]
- `opacity = min(1, alpha / 0.05)` (fast fade-in)
- `translateY = 100 - (alpha * 450)` in vh (scrolls from +100vh to -350vh)

**Exact manifesto text:**
```
LIMITLESS INPUTS OR
STANDARD LAYOUT
TEMPLATE
CONSUMERS. THIS IS
A HIGHLY SELECTIVE
ENVIRONMENT
ENGINEERED FOR
HYPER-PRODUCTIVE
CREATORS, UI/UX
VISIONARIES, AND
AI PROMPT
ARCHITECTS WHO
OPERATE AT THE
ABSOLUTE LIMITS OF
DIGITAL PRODUCT
CREATION. OUR
FRAMEWORK IS

---

WHY CHOOSE US?
1. ZERO MOCKUPS,
ONLY REAL CODE.
2. SPEED RUNS -
ZERO WASTED TIME.
3. DIGITAL EDGE -
AESTHETIC
DOMINANCE.
4. SYSTEM STATE -
INTELLIGENT
INTERACTION.

---

WE REJECT
THE BORING.
WE REJECT
THE STANDARD.

CHOOSE ABSOLUTE
CREATIVE EDGE.

THE FUTURE IS
NOW SECURED.
```

---

### 8. MOUSE TRAIL STICKERS (fixed, z-[60])

Container: `fixed inset-0 pointer-events-none z-[60] overflow-hidden`

**Behavior:**
- Track mouse position via `window.addEventListener("mousemove", ..., { passive: true })`
- Spawn new sticker when cursor moves > 150px from last spawn point
- 5 sticker types cycle sequentially (not randomly): trail_sticker1 through trail_sticker5
- Random rotation: `Math.random() * 40 - 20` degrees
- Max 4 stickers visible: `[...prev.slice(-3), newSticker]`
- Auto-remove after 2200ms via `setTimeout`

**Each sticker element:**
- `absolute select-none pointer-events-none flex items-center justify-center -translate-x-1/2 -translate-y-1/2`
- Inline style: `left: x`, `top: y`, `transform: translate(-50%, -50%) rotate(Xdeg)`, `--rot: Xdeg`
- `animation: sticker-fade-out 2.2s forwards cubic-bezier(0.16, 1, 0.3, 1)`
- Images: `w-[110px] sm:w-[150px] md:w-[180px] h-auto object-contain`, `referrerPolicy="no-referrer"`

---

### 9. FEEDBACK FORM (fixed, z-[55])

Container: `fixed left-1/2 z-[55] w-[92%] max-w-[460px] p-6 sm:p-8 bg-slate-950/95 border-4 border-[#0033FF] shadow-[10px_10px_0px_#85D743] select-auto transition-all duration-[900ms] pointer-events-auto`

**Position/Animation:**
- `bottom: 50%`
- When visible: `transform: translate(-50%, 50%) rotate(0deg)`
- When hidden: `transform: translate(-50%, 150vh) rotate(15deg)`
- `transitionTimingFunction: cubic-bezier(0.16, 1, 0.3, 1)`

**Triggers at:** scroll progress >= 0.95

**Close button:** `absolute top-4 right-4 font-press-start text-[14px] text-slate-500 hover:text-red-500 hover:scale-110 active:scale-95 transition-all cursor-pointer select-none border-none bg-transparent` -- content: `[X]`

**Form (default state):**
- Title: "FEEDBACK SYSTEM" -- `font-press-start text-xs sm:text-sm text-[#85D743] tracking-widest uppercase text-center mb-1`
- Name input: `type="text" required placeholder="YOUR NAME"` -- `font-mono text-xs text-white bg-slate-900 border-2 border-slate-700 focus:border-[#85D743] hover:border-slate-500 focus:outline-none p-2.5 w-full uppercase transition-all placeholder-slate-600`
- Email input: `type="email" required placeholder="NAME@DOMAIN.COM"` -- same styles minus `uppercase`
- Textarea: `required rows={3} placeholder="FEEDBACK / ARCHITECTURE IDEAS..."` -- same styles plus `resize-none`
- Submit button: "LAUNCH TRANSMISSION" -- `font-press-start text-[8px] sm:text-[9px] text-black bg-[#85D743] hover:bg-[#9bfb4e] active:translate-y-0.5 active:shadow-none border-2 border-black py-3 px-6 shadow-[4px_4px_0px_#0033FF] w-full font-bold uppercase tracking-widest cursor-pointer select-none transition-all mt-1`
- Form gap: `flex flex-col gap-4 sm:gap-5`

**Success state:**
- Symbol: `font-press-start text-[32px] text-[#85D743] mb-4 animate-bounce` -- content: `✦`
- Heading: "TRANSMISSION SUCCESS" -- `font-press-start text-xs sm:text-sm text-[#85D743] mb-3 tracking-widest uppercase`
- Subtext: "Your feedback is secured in our neural network database." -- `font-mono text-[10px] sm:text-xs text-slate-400 max-w-sm mb-6 uppercase leading-relaxed`
- Reset button: "[ NEW TRANSMISSION ]" -- `font-press-start text-[8px] sm:text-[10px] text-black bg-[#85D743] hover:bg-[#9eff5c] border-2 border-black py-2.5 px-5 font-bold uppercase tracking-wider shadow-[3px_3px_0px_#0033FF] active:translate-y-0.5 active:shadow-none transition-all cursor-pointer`

---

## SERVER (`server.ts`)

Express server on port 3000. In development: Vite middleware mode (SPA). In production: serves static `dist/` directory.

```typescript
import express from "express";
import path from "path";
import fs from "fs";
import { createServer as createViteServer } from "vite";

async function startServer() {
const app = express();
const PORT = 3000;
const publicDir = path.join(process.cwd(), "public");
if (!fs.existsSync(publicDir)) fs.mkdirSync(publicDir, { recursive: true });

if (process.env.NODE_ENV !== "production") {
const vite = await createViteServer({ server: { middlewareMode: true }, appType: "spa" });
app.use(vite.middlewares);
} else {
const distPath = path.join(process.cwd(), "dist");
app.use(express.static(distPath));
app.get("*", (req, res) => res.sendFile(path.join(distPath, "index.html")));
}

app.listen(PORT, "0.0.0.0", () => console.log(`Server running on http://localhost:${PORT}`));
}
startServer();
```

---

## VITE CONFIG (`vite.config.ts`)

```typescript
import tailwindcss from '@tailwindcss/vite';
import react from '@vitejs/plugin-react';
import path from 'path';
import { defineConfig } from 'vite';

export default defineConfig(() => ({
plugins: [react(), tailwindcss()],
resolve: { alias: { '@': path.resolve(__dirname, '.') } },
}));
```

---

## CRITICAL IMPLEMENTATION DETAILS

1. **No auto-play videos** -- videos are paused immediately after a play() call to warm up the decoder. Scroll scrubbing sets `currentTime` directly.
2. **Seeking guard** -- `if (!video.seeking)` prevents setting new frames while browser is still rendering the previous seek.
3. **No dim on crossfade** -- Video 1 stays at full opacity while video 2 fades in on top. Only after transition completes does video 1 go to opacity 0.
4. **All images use `referrerPolicy="no-referrer"`** to avoid Figma CDN blocking.
5. **State updates use equality check** -- `setX((prev) => prev !== newVal ? newVal : prev)` to avoid unnecessary re-renders during scroll.
6. **The manifesto translates a total of 450vh** (from +100vh to -350vh) to ensure it fully scrolls off screen.
7. **Mouse trail uses sequential cycling** (`typeCounter % 5`), not random selection.

Dreamcore 落地页

No.1440 · 前端开发 · 社区/原生 · 来源：MotionSites (MIT) · EN 原文

Build a single-page immersive parallax landing page in React + TypeScript + Tailwind CSS using Vite. The page has two scroll-driven scenes inside a sticky viewport. Everything lives in a single `src/App.tsx` file. Use Google Fonts: **Viaoda Libre** (serif headings) and **Imprima** (sans-serif body). No external UI libraries. Use `lucide-react` only as a dependency (it is not used in this page). Use Tailwind for responsive layout breakpoints only; all other styling is inline React `CSSProperties`.

---

### GLOBAL SETUP

**`tailwind.config.js`** -- Override the `xl` breakpoint to `1100px`:
```js
screens: { xl: '1100px' }
```

**`index.css`** -- Include Tailwind directives, global reset, dark background `#0a0608`, `font-family: 'Imprima', sans-serif`, `scrollbar-gutter: stable`, and a `@keyframes bobUp` animation that translates Y by `-6px` at 50%.

**`index.html`** -- Load Google Fonts via `<link>`:
```
https://fonts.googleapis.com/css2?family=Viaoda+Libre&family=Imprima&display=swap
```
Title: "Step Into Wonder"

---

### IMAGE ASSETS (use these exact URLs)

```
PORTAL_BG = "https://res.cloudinary.com/dy5er7kv5/image/upload/q_auto/f_auto/v1779707217/image_1_vdzwae.png"
CURTAIN_LEFT = "https://res.cloudinary.com/dy5er7kv5/image/upload/q_auto/f_auto/v1779706559/curtain_left_znkmva.png"
CURTAIN_RIGHT= "https://res.cloudinary.com/dy5er7kv5/image/upload/q_auto/f_auto/v1779706564/curtain_right_paeyym.png"
WORLD_BG = "https://res.cloudinary.com/dy5er7kv5/image/upload/q_auto/f_auto/v1779706392/image_2_gkcdlx.png"
BOTTOM_CLOUDS= "https://res.cloudinary.com/dy5er7kv5/image/upload/q_auto/f_auto/v1779706555/bottom_clouds_xskut6.png"

CARD_IMAGES[0] = "https://images.higgs.ai/?default=1&output=webp&url=https%3A%2F%2Fd8j0ntlcm91z4.cloudfront.net%2Fuser_38xzZboKViGWJOttwIXH07lWA1P%2Fhf_20260525_160507_2ccbb4eb-1469-484f-af25-59168ad9a233.png&w=1280&q=85"
CARD_IMAGES[1] = "https://images.higgs.ai/?default=1&output=webp&url=https%3A%2F%2Fd8j0ntlcm91z4.cloudfront.net%2Fuser_38xzZboKViGWJOttwIXH07lWA1P%2Fhf_20260525_160644_072a7f68-a101-4ded-a332-7d37707dbdd1.png&w=1280&q=85"
CARD_IMAGES[2] = "https://images.higgs.ai/?default=1&output=webp&url=https%3A%2F%2Fd8j0ntlcm91z4.cloudfront.net%2Fuser_38xzZboKViGWJOttwIXH07lWA1P%2Fhf_20260525_160706_1c153d04-0dfb-4ac9-a4ef-e74f301c329c.png&w=1280&q=85"
```

---

### SCENE 2 CARD DATA (9 cards for the arc slider)

```
{ title: 'Hidden Realms', desc: 'Luminous sanctuaries unseen by wandering eyes', color: '#f3cdd6' }
{ title: 'Wild Solitudes', desc: 'Dissolve into untamed horizons and deep calm', color: '#dcedc2' }
{ title: 'Silent Havens', desc: 'Remote escapes far beyond ordinary reach', color: '#c3e3f4' }
{ title: 'Bespoke Quests', desc: 'Journeys shaped around your vision and soul', color: '#f0e4c0' }
{ title: 'Vivid Drifts', desc: 'Surreal passages through breathtaking terrain', color: '#dcd2f2' }
{ title: 'Mystic Crests', desc: 'Timeless ridgelines wrapped in cloud and myth', color: '#f3cdd6' }
{ title: 'Deep Currents', desc: 'Glowing depths alive with uncharted wonder', color: '#c3e3f4' }
{ title: 'Gilded Dusk', desc: 'Amber horizons that stretch past all reason', color: '#f0e4c0' }
{ title: 'Glassy Tides', desc: 'Calm waters holding skies of pure stillness', color: '#dcedc2' }
```

---

### ARCHITECTURE

The outer container is `height: 480vh; position: relative`. Inside it is a `position: sticky; top: 0; height: 100vh; overflow: hidden; background: #0a0608` viewport. All layers stack via absolute positioning and z-index.

**Scroll progress** = `window.scrollY / (container.scrollHeight - window.innerHeight)`, clamped 0-1.

**Helper functions:**
- `easeInOut(t)`: quadratic ease `t < 0.5 ? 2*t*t : -1 + (4 - 2*t)*t`
- `lerp(a, b, t)`: linear interpolation
- `clamp(val, min, max)`

**`useIsMobile()`** hook: `matchMedia('(max-width: 767px)')` -- returns boolean.

---

### LAYER STACK (bottom to top by z-index)

#### Layer 1: World Background (z-index: auto/0)
- `ref={worldRef}`, absolute inset 0, `transformOrigin: '50% 50%'`
- `WORLD_BG` image, `object-fit: cover`
- Parallax: `scale(lerp(1, 1.18, ep))`, mouse offset `MAG.world = 6`

#### Layer 2: Bottom Clouds (z-index: 10)
- `ref={cloudsRef}`, absolute bottom:0, left:0, right:0, `transformOrigin: '50% 100%'`
- `BOTTOM_CLOUDS` image, `width: 100%, height: auto`
- Parallax: `scale(lerp(1, 1.4, ep))`, mouse offset `MAG.clouds = 9` (Y dampened to `0.4x`)
- Opacity: fades from 0.7 to 1 in the first 5% of scroll

#### Layer 2.5: Arc Card Slider (z-index: 9)
- Absolute, `bottom: 60px (mobile) / 80px (desktop)`, centered horizontally
- Opacity = `scene2Opacity`
- Contains `<ArcCardSlider>` component (details below)

#### Layer 3: Portal Frame (z-index: 15)
- `ref={portalRef}`, absolute inset 0, `transformOrigin: '52% 38%'`
- `PORTAL_BG` image, `object-fit: cover`
- Parallax: `scale(lerp(1, 7.5, ep))`, mouse offset `MAG.portal = 7`
- Opacity: 1 until scroll 0.65, then fades to 0 by scroll 0.85

#### Layer 3.5: Bottom Fade (z-index: 16)
- Absolute bottom, `height: 40%`, `linear-gradient(to top, rgba(0,0,0,0.45) 0%, transparent 100%)`, `pointer-events: none`

#### Layer 4L: Curtain Left (z-index: 16)
- `ref={curtainLRef}`, absolute inset 0, `transformOrigin: 'left center'`
- `CURTAIN_LEFT` image, `object-fit: cover`, `object-position: right center`
- On mount (after 100ms), shifts left by `translateX(-62%)` with `transition: transform 1.8s cubic-bezier(0.16, 1, 0.3, 1)`
- On scroll: additional `translateX` via `lerp(0, 150, ep)%`, scale `lerp(1, 1.3, ep)`
- Mouse offset: `MAG.curtainL = 14` (Y dampened to `0.3x`)
- After entrance animation (2200ms), transition switches to `none` for responsive parallax

#### Layer 4R: Curtain Right (z-index: 16)
- Mirror of Layer 4L but `transformOrigin: 'right center'`, `object-position: left center`
- Shifts right instead of left, `MAG.curtainR = 14`

#### Top Fade Gradient (z-index: 45)
- Absolute top, `height: 42vh`, `linear-gradient(to bottom, rgba(0,0,0,0.45) 0%, transparent 100%)`, `pointer-events: none`

---

### NAVIGATION (z-index: 50)

Absolute top, full width, `display: flex, justify-content: space-between, align-items: center`.

**Nav link style:** `font-family: 'Imprima', sans-serif`, `font-size: 12px`, `letter-spacing: 0.12em`, `text-transform: uppercase`, `color: #fff`, `opacity: 0.9`, no text decoration.

**Mobile** (`padding: 18px 20px`): Three items -- "Explore" (11px) | StarLogo SVG | "Connect" (11px)

**Desktop** (`padding: 22px 48px`): Left group ["Worlds", "Atelier", "Immersions"] with `gap: 36px` | StarLogo SVG center | Right group ["Craft", "Codex", "Connect"] with `gap: 36px`

**StarLogo** -- inline SVG, 28x28, white star path + 3 small circles:
```
<path d="M14 2l2.09 6.42H23l-5.45 3.96 2.09 6.42L14 14.84l-5.64 4.06 2.09-6.42L4.96 8.42h6.95L14 2z" fill="white" opacity="0.9" />
<circle cx="14" cy="24" r="1.5" fill="white" opacity="0.6" />
<circle cx="6" cy="6" r="1" fill="white" opacity="0.4" />
<circle cx="22" cy="6" r="1" fill="white" opacity="0.4" />
```

---

### SCENE 1 UI (z-index: 20)

Opacity = `clamp(1 - scrollProgress / 0.22, 0, 1)`. Fades out in first ~22% of scroll.

Uses **three separate Tailwind-responsive layout blocks** (not JS branching for layout):

#### Mobile layout (`md:hidden`)
- Centered column, `padding: 80px 24px 100px`
- Fade-in: `opacity 0.9s ease, transform 0.9s ease`, delay `0.3s`, triggers on `uiVisible`
- **Heading** (Viaoda Libre): "FALL > INTO" line (`clamp(26px, 7vw, 42px)`, `tracking-widest`, color `#3b1a0a`) then "REVERIE" (`clamp(52px, 16vw, 80px)`, `tracking-tight`, `leading-none`, color `#3b1a0a`). The ">" is a `›` character in color `#6b2e0e` at `0.8em`. "INTO" is italic.
- **Subtext** (Imprima): "Crafting boundless digital worlds where the edge between AI, vision, and living myth dissolves." -- `15px`, `leading-relaxed`, color `#5c2d0e`, `max-width: 280px`
- **Single card**: 140x140px, `border-radius: 22px`, `CARD_IMAGES[0]` as background-cover, `box-shadow: 0 8px 32px rgba(0,0,0,0.5)`. Bottom gradient overlay (60% height). Bottom-left overlay: white circle (26px) with play triangle SVG + "View Reel" text (13px, white).

#### Tablet layout (`hidden md:flex xl:hidden`)
- Centered column, `gap: 28px`, `padding: 80px 32px 96px`
- Same fade-in animation as mobile
- **Heading**: same structure as mobile but dark brown text (`#3b1a0a`), sizes `clamp(28px, 5vw, 44px)` / `clamp(60px, 12vw, 86px)`
- **Subtext**: same text, `16px`, color `#5c2d0e`, `max-width: 400px`
- **Three cards in a row** (`flex gap-3.5`): each 140x140px, `border-radius: 22px`. Each has:
- Background gradient overlay (60% height, multi-stop)
- Backdrop blur layer (44% height, masked gradient)
- Card 1: play button + "View Reel"
- Card 2: number "32" (Viaoda Libre, 28px, white) + "World Patrons"
- Card 3: play button + "View Reel"

#### Desktop layout (`hidden xl:block` / `hidden xl:flex`)
- **Heading block**: absolute, `top: 46%`, `left: 60px`, `maxWidth: 440px`, `translateY(-50%)` centered
- White text with heavy `text-shadow: 0 2px 24px rgba(0,0,0,0.7), 0 1px 4px rgba(0,0,0,0.9)`
- "FALL > INTO": `clamp(32px, 4.5vw, 54px)`, `line-height: 1.1`, `letter-spacing: 0.04em`. The `>` is `rgba(255,220,180,0.7)`.
- "REVERIE": `clamp(50px, 7.5vw, 88px)`, `line-height: 0.9`, `letter-spacing: -0.02em`
- Subtext: `18px`, `line-height: 1.7`, color `rgba(255,245,235,0.88)`, `max-width: 300px`, `text-shadow: 0 1px 12px rgba(0,0,0,0.8)`
- Fade-in: opacity+transform, delay `0.3s`

- **Cards block**: absolute, `right: 40px`, `top: 50%`, `translateY(-50%)`, `flex gap: 12px`
- Three cards, each 158x158px, `border-radius: 28px`, `box-shadow: 0 8px 32px rgba(0,0,0,0.45)`
- Each has: gradient overlay, backdrop blur layer (same as tablet), bottom content area at 12px inset
- Play cards: 30px white circle + 18px "View Reel"
- Number card: "32" at 36px Viaoda Libre + 18px "World Patrons"
- Fade-in delay: `0.55s`

#### Slider Dots (bottom of Scene 1)
- Absolute, bottom `28px (mobile, centered)` / `40px (desktop, left: 60px)`
- 4 dots: first is `28px wide`, rest `14px`, all `4px tall`, `border-radius: 2px`
- Active dot: `rgba(255,255,255,0.9)`, inactive: `rgba(255,255,255,0.35)`
- Fade-in delay: `0.8s`

#### Scroll Cue (desktop only)
- Absolute `bottom: 36px`, centered
- "DESCEND" text: `10px`, `letter-spacing: 0.22em`, uppercase, `rgba(255,255,255,0.6)`
- Below: `ScrollChevron` -- 34px circle with 1.5px border `rgba(255,255,255,0.5)`, chevron SVG inside, `animation: bobUp 1.8s ease-in-out infinite`
- Fade-in delay: `0.9s`

---

### SCENE 2 UI (z-index: 46)

Opacity = `clamp((scrollProgress - 0.68) / 0.16, 0, 1)`. Fades in between scroll 68%-84%.

- Centered column
- **Heading** (Viaoda Libre): "FORGE BEYOND THE REAL" -- `clamp(28px, 8vw, 44px) mobile / clamp(38px, 6.5vw, 78px) desktop`, white, `letter-spacing: 0.03em`, `line-height: 1.05`, `text-shadow: 0 2px 20px rgba(0,0,0,0.4)`
- **Subtext** (Imprima): "Singular voyages to astonishing destinations, shaped for those who seek beauty beyond the ordinary and the known." -- `14px mobile / 20px desktop`, `line-height: 1.6`, `letter-spacing: -0.01em`, `max-width: 260px mobile / 480px desktop`, color `rgba(255,255,255,0.82)`
- Margin-top: `8vh mobile / 12vh desktop`

---

### ARC CARD SLIDER COMPONENT

Props: `cards[]`, `rotationOffset: number`, `isMobile: boolean`

**Layout math:**
- `cardSpacingDeg`: 12 (mobile) / 9 (desktop) degrees between cards
- `centerIndex`: `Math.floor(totalCards / 2)`
- `arcRadius`: 700 (mobile) / 1100 (desktop) px
- `cardW`: 160 (mobile) / 220 (desktop) px
- `cardH`: 175 (mobile) / 230 (desktop) px
- `sliderH`: 260 (mobile) / 360 (desktop) px

**`rotationOffset`** is driven by scroll: `lerp(0, arcSweepDeg, clamp((scrollProgress - 0.70) / 0.30, 0, 1))` where `arcSweepDeg = (totalCards - 1) * 10`.

**Per card positioning:**
```
baseDeg = (i - centerIndex) * cardSpacingDeg
deg = baseDeg - rotationOffset + (centerIndex * cardSpacingDeg)
rad = deg * PI / 180
x = sin(rad) * arcRadius
y = arcRadius - cos(rad) * arcRadius
```
Each card is absolutely positioned at `bottom: -y + (140 mobile / 200 desktop)px`, `left: calc(50% + x - halfW)`, `transform: rotate(deg)`, `transformOrigin: halfW arcRadius`.

**Card appearance:**
- Rounded rect (`18px mobile / 26px desktop`), background = `card.color` (pastel)
- `box-shadow: 0 8px 40px rgba(80,40,60,0.18)`
- Top-right: numbered circle (24px, `1.5px border rgba(80,50,60,0.3)`, text `rgba(80,50,60,0.6)`, 10px Imprima) showing zero-padded index
- Bottom: card title in Viaoda Libre (`22px mobile / 30px`, color `#3a2530`) + description in Imprima (`12px mobile / 15px`, color `rgba(58,37,48,0.65)`)

---

### ENTRANCE ANIMATION SEQUENCE

1. **t=100ms**: Curtains open -- `curtainsOpenRef` flips to true, causing 62% horizontal shift on each curtain with `1.8s cubic-bezier(0.16, 1, 0.3, 1)` transition
2. **t=600ms**: `uiVisible` = true -- all Scene 1 UI elements fade/slide in with staggered delays (0.3s heading, 0.55s cards, 0.8s dots, 0.9s scroll cue)
3. **t=2200ms**: `entranceDone` = true -- curtain CSS transition switches to `none` so parallax is instant

---

### MOUSE PARALLAX (desktop)

`requestAnimationFrame` loop smooths raw mouse position at `speed = 0.07` (lerp). Each layer is offset by its `MAG` value in the reverse direction of the mouse. The transforms combine mouse offset with scroll-driven scale/translate.

**MAG values:** world=6, clouds=9, portal=7, curtainL=14, curtainR=14

Urban Jungle 首屏

No.1441 · 前端开发 · 社区/原生 · 来源：MotionSites (MIT) · EN 原文

Build a scroll-driven hero section landing page using React 19, Vite, Tailwind CSS v4 (using @tailwindcss/vite plugin), GSAP (with ScrollTrigger + ScrollToPlugin), hls.js, and react-router-dom (BrowserRouter). The page body is black with white text. The root container is 500vh tall.

SETUP
Dependencies (package.json):

react, react-dom, react-router-dom, gsap, hls.js, lucide-react, motion, tailwindcss v4, @tailwindcss/vite, @vitejs/plugin-react, vite
Vite config: Use @tailwindcss/vite and @vitejs/plugin-react plugins.

Entry point (main.tsx): Wrap <App /> in <StrictMode> and <BrowserRouter>.

Custom headline font: Download the font file from https://dirtylinestudio.com/wp-content/uploads/2022/05/Dirtyline-36daysoftype-2022.woff2 and save it to the public/ directory as Dirtyline-36daysoftype-2022.woff2. Then register it via @font-face in CSS.

Google Fonts (loaded via CSS @import): Manrope:wght@400;500;600;700 and Instrument+Serif:ital@0;1

Tailwind v4 theme (index.css):

@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700&family=Instrument+Serif:ital@0;1&display=swap');
@import "tailwindcss";

@theme {
--font-sans: "Manrope", ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
--font-serif: "Instrument Serif", ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
--font-dirtyline: "Dirtyline36Daysoftype2022", sans-serif;
--animate-marquee: marquee 20s linear infinite;
@keyframes marquee {
100% { transform: translateX(-50%); }
}
}

@font-face {
font-family: 'Dirtyline36Daysoftype2022';
src: url('/Dirtyline-36daysoftype-2022.woff2') format('woff2');
font-style: normal;
font-weight: normal;
text-rendering: optimizeLegibility;
font-display: swap;
}

body {
background-color: black;
color: white;
}

LAYER 1: BACKGROUND -- ScrollVideo Component
A full-screen fixed video background that scrubs its playback position based on scroll progress (scroll at top = frame 0, scroll at bottom = last frame).

Video source :
https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260709_080129_da34b00e-a5db-47dd-81a1-cccad79ac1ac.mp4

Props: src (string), className (string)

Implementation:

Use hls.js. On MANIFEST_PARSED, force the highest quality level: hls.currentLevel = maxLevel; hls.startLevel = maxLevel. Config: maxBufferLength: 120, maxMaxBufferLength: 600, maxBufferSize: 200 * 1024 * 1024, startPosition: 0, capLevelToPlayerSize: false, startLevel: -1, autoStartLoad: true.
For Safari (native HLS), set video.src = src directly.
Track buffer progress via FRAG_BUFFERED event, calculating (bufferedEnd / duration) * 100.
The <video> element is rendered directly (no canvas). Classes: w-full h-full object-cover scale-[1.35]. Attributes: muted, playsInline, crossOrigin="anonymous".
Scroll-to-seek: Use GSAP ScrollTrigger.create with trigger: document.documentElement, start: 'top top', end: 'bottom bottom', scrub: true. On onUpdate, calculate targetTime = self.progress * duration. Throttle seeking: track a currentTarget variable. If video.seeking is true, set seekPending = true. On the seeked event, if seekPending, call doSeek() again with the latest currentTarget. This prevents hammering the decoder.
if (!video.seeking).
Тепер ми кажемо браузеру: "Оновлюй кадр відео ТІЛЬКИ тоді, коли ти повністю закінчив малювати попередній"."
Mouse parallax on video wrapper: On mousemove, GSAP tweens the wrapper's x/y by moveX * -30 and moveY * -30, where moveX/moveY are normalized mouse offset from center (-1 to 1). Duration: 1.5, ease: power2.out.
Loading overlay: Show a fixed, z-50, centered black overlay with "Loading... {progress}%" in white, text-2xl font-sans. Hide once canplay fires.
Wrapper div classes: fixed top-0 left-0 w-full h-full z-0 scale-[1.05] origin-center

LAYER 2: HERO TEXT -- ScrollFloat Component
A fixed overlay at z-10, positioned at the bottom of the viewport: fixed inset-0 flex flex-col justify-end p-4 md:p-8 pointer-events-none.

Text content: "Unleash The\nFull Power" (literal newline between the two lines).

ScrollFloat component implementation:

Splits the text string by \n into lines, then by spaces into words, then into individual characters.
Each line is wrapped in <span style="display: block">.
Each word is wrapped in <span style="display: inline-block; white-space: nowrap">.
Each character is wrapped in <span class="char">.
Word separators: &nbsp; between words.
Animation: Uses gsap.fromTo on all .char elements. FROM: {opacity: 1, yPercent: 0, scaleY: 1, scaleX: 1, transformOrigin: '50% 0%'}. TO: {opacity: 0, yPercent: 250, scaleY: 1.2, scaleX: 0.9}. So the text starts fully visible and animates away as you scroll down.
ScrollTrigger config: trigger: document.body, start: 'top top', end: '+=1000', scrub: 1.5.
Stagger: 0.05, ease: power2.inOut, duration: 1.
Typography: Font family: font-dirtyline (the Dirtyline custom font). Font size: clamp(4rem, 15vw, 317px). Line height: 0.85. Letter spacing: 0%. Color: white.

ScrollFloat.css:
.scroll-float-text { display: inline-block; }
.char { display: inline-block; }

LAYER 3: GLASS PANEL -- GlassPanel Component (About Us section)
Positioned absolutely at the bottom of the 500vh container: absolute bottom-0 left-0 w-full h-screen. It slides up from below as you scroll to the bottom.

Slide-up animation: gsap.fromTo on the panel wrapper: from {y: '100%'} to {y: '0%'}, ease: none. ScrollTrigger: trigger is the container div, start: 'top bottom', end: 'bottom bottom', scrub: 1.5.

Panel wrapper: w-full max-w-[1250px] h-[900px] max-h-[85vh] pointer-events-auto with perspective: 1000px inline style.

Panel itself: w-full h-full flex flex-col justify-between rounded-3xl relative overflow-hidden with inline styles:
backgroundColor: 'rgba(0, 0, 0, 0.16)'
backdropFilter: 'blur(160px)'
WebkitBackdropFilter: 'blur(160px)'
border: '1px solid rgba(255, 255, 255, 0.1)'
transformStyle: 'preserve-3d'
willChange: 'transform'

3D mouse parallax on panel: On mousemove, GSAP tweens: x: moveX * 20, y: moveY * 20, rotationY: moveX * 4, rotationX: -moveY * 4. Ease: power3.out, duration: 1.

Content (all centered text):
Subtitle: <p> with font-serif italic text-white/70 text-base md:text-lg mb-4 md:mb-6 -- text: "About Us"
Main heading: <h2> with font-serif text-white text-4xl md:text-6xl lg:text-[96px] leading-[1.1] lg:leading-[92.6px] tracking-tight w-full max-w-[1000px] mx-auto -- text: "We transform sterile concrete into thriving urban jungles. Our innovative designs bring wild nature back to modern cities. Experience the bloom" where the italic words (urban, nature, bloom) are wrapped in <span className="italic">.
All text is centered: the content area uses flex flex-col items-center justify-center px-6 md:px-12 text-center.

Bottom marquee (text-based logos, not images):
Instead of image logos, use text brand names as the marquee items. Use names like "VOICEFLOW", "ZENDESK", "PENDO", "GLIDE", "CANVA". Each name is rendered as white text, opacity-40 hover:opacity-100 transition-opacity duration-300, uppercase, font-sans font-semibold text-sm tracking-widest. The marquee row is duplicated 4x for seamless infinite scroll, using the CSS animate-marquee keyframe (translateX(-50%) over 20s linear infinite). The marquee sits at the bottom of the glass panel, separated by a border-t border-white/10 py-6.

LAYER 4: PILL NAVIGATION -- PillNav Component
Fixed at top center of viewport (position: fixed; top: 24px; left: 50%; transform: translateX(-50%); z-index: 100). Font: Manrope, 600 weight, 14px, uppercase, 0.05em letter-spacing.

Structure:
A circular black logo button (48x48px, border-radius: 50%) containing a 4-petal SVG icon (white fill, 24x24). The SVG paths:
m50,50c0,18.2,14.77,32.98,32.97,32.98,0-18.2-14.77-32.98-32.97-32.98Z
m17.02,82.98c18.2,0,32.98-14.77,32.98-32.98-18.2,0-32.98,14.77-32.98,32.98Z
m82.98,17.02c-18.2,0-32.97,14.77-32.97,32.97,18.2,0,32.97-14.77,32.97-32.97Z
m17.02,17.02c0,18.2,14.77,32.97,32.98,32.97,0-18.2-14.77-32.97-32.98-32.97Z
viewBox: 0 0 100 100. On hover, the SVG container rotates 360deg via GSAP (duration: 0.2).

Nav items container: black background, border-radius: 50px, padding: 4px, border: 2px solid #000. Contains a <ul> with flex layout, gap: 4px.

Each nav pill: padding: 8px 24px, border-radius: 50px, background-color: #f0f0f0, color: #000, font-weight: 600, font-size: 14px, letter-spacing: 0.05em, text-transform: uppercase, overflow: hidden, position: relative.

Pill hover effect (GSAP-powered liquid fill):
Each pill contains a hidden .hover-circle element (absolute, black, border-radius: 50%, scale: 0).
The circle's size is calculated dynamically: R = (w*w/4 + h*h) / (2*h), D = 2*R + 2, positioned at bottom: -delta where delta = R - sqrt(R*R - w*w/4) + 1. Transform origin: 50% ${D - delta}px.
A .label-stack contains two labels: .pill-label (dark text, visible) and .pill-label-hover (white text, hidden below).
On hover enter: a GSAP timeline plays forward -- circle scales to 3, pill-label slides up out of view, pill-label-hover slides up into view (white text over black circle). Timeline tweened to end in 0.3s.
On hover leave: timeline tweened back to 0 in 0.2s.

Nav items: HOME, ABOUT, SERVICES, CONTACT.
HOME onClick: gsap.to(window, { duration: 3, scrollTo: 0, ease: 'power3.inOut' })
ABOUT onClick: gsap.to(window, { duration: 3, scrollTo: document.body.scrollHeight, ease: 'power3.inOut' })

Initial load animation: Logo scales from 0 to 1 (duration 0.6). Nav items container width animates from 0 to auto (duration 0.6).

Responsive: At 768px breakpoint, desktop nav items are hidden and replaced with a hamburger button (two 24x2px lines, gap 4px). On toggle, lines animate to X shape (rotation +/-45deg, y +/-3px). A popover menu appears below with fade+slide animation.

PillNav.css (full):
.pill-nav-container { position: fixed; top: 24px; left: 50%; transform: translateX(-50%); z-index: 100; font-family: 'Manrope', sans-serif; }
.pill-nav { display: flex; align-items: center; background-color: transparent; padding: 0; gap: 0; }
.pill-logo { display: flex; align-items: center; justify-content: center; border-radius: 50%; background-color: #000; width: 48px; height: 48px; flex-shrink: 0; }
.logo-svg-container { display: flex; align-items: center; justify-content: center; }
.pill-nav-items { background-color: #000; border-radius: 50px; padding: 4px; border: 2px solid #000; }
.pill-list { display: flex; align-items: center; gap: 4px; list-style: none; margin: 0; padding: 0; }
.pill { position: relative; display: block; padding: 8px 24px; border-radius: 50px; text-decoration: none; color: #000; font-weight: 600; font-size: 14px; letter-spacing: 0.05em; text-transform: uppercase; overflow: hidden; background-color: #f0f0f0; transition: background-color 0.3s ease; }
.pill.is-active { background-color: #e0e0e0; }
.hover-circle { position: absolute; background-color: #000; border-radius: 50%; pointer-events: none; z-index: 0; transform: scale(0); }
.label-stack { position: relative; display: block; z-index: 1; overflow: hidden; height: 1.2em; }
.pill-label, .pill-label-hover { display: block; line-height: 1.2em; text-align: center; }
.pill-label-hover { position: absolute; top: 0; left: 0; width: 100%; color: #fff; }
.mobile-menu-button { background: none; border: none; cursor: pointer; display: flex; flex-direction: column; gap: 4px; padding: 8px; }
.hamburger-line { width: 24px; height: 2px; background-color: var(--pill-text); display: block; }
.mobile-menu-popover { position: absolute; top: 100%; left: 0; right: 0; margin-top: 8px; background-color: var(--pill-bg); border-radius: 16px; padding: 16px; visibility: hidden; }
.mobile-menu-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.mobile-menu-link { color: var(--pill-text); text-decoration: none; font-size: 1.1rem; display: block; text-align: center; }
@media (min-width: 769px) { .mobile-only { display: none !important; } }
@media (max-width: 768px) { .desktop-only { display: none !important; } }

APP COMPONENT ASSEMBLY
<ScrollVideo src="https://stream.mux.com/43NlHXsaMrmyzWamMk87m01fNyxSTekAD669BBAPBNm00.m3u8" />
<PillNav />
<div style={{ position: "relative", height: "500vh" }}>
<ScrollFloat>{`Unleash The\nFull Power`}</ScrollFloat>
<GlassPanel />
</div>

Layered Depth

No.1442 · 前端开发 · 社区/原生 · 来源：MotionSites (MIT) · EN 原文

Create a React + Vite + TypeScript + Tailwind CSS landing page for an architecture studio called "Qelora". The page has exactly two sections: a Hero and a Section 2. The entire site uses inline styles (no Tailwind utility classes in JSX -- Tailwind is only used for base reset). Use only `react`, `react-dom`, and `lucide-react` as dependencies (icons are all inline SVGs here, lucide is not actually used in this page).

---

FONTS

Load these three custom fonts in `index.html` `<head>`:

```html
<link href="https://db.onlinewebfonts.com/c/076f8c5b3b67616658dd1e4e9bac62ec?family=Zimula+Trial+Med" rel="stylesheet">
<link href="https://db.onlinewebfonts.com/c/08d8ca53f66ab5b48659912fa0136b78?family=Zimula+Trial+Bd" rel="stylesheet">
```

Also import in `index.css`:
```css
@import url('https://db.onlinewebfonts.com/c/46024824a3dd3309c3a7f46f4f1283ba?family=Zimula+Trial+Reg');
```

Font usage:
- Body / default: `'Zimula Trial Med', sans-serif`
- Bold / logo / hero text: `'Zimula Trial Bd', sans-serif`
- The `Reg` import is available but Med is the primary weight used everywhere

---

GLOBAL CSS (`index.css`)

```css
@import url('https://db.onlinewebfonts.com/c/46024824a3dd3309c3a7f46f4f1283ba?family=Zimula+Trial+Reg');

@tailwind base;
@tailwind components;
@tailwind utilities;

*, *::before, *::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}

html {
scroll-behavior: smooth;
}

body {
font-family: 'Zimula Trial Med', sans-serif;
background: #0e0c0a;
overflow-x: hidden;
}

::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: #0e0c0a; }
::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.15); border-radius: 3px; }
```

---

COLOR PALETTE

- Dark background: `#0e0c0a`
- Primary text: `#241f21`, `#282425`, `#2a2420`
- White: `#fff`
- Dark accent: `#100e0c`
- Warm transparent overlays: `rgba(235, 230, 218, 0.12)`, `rgba(242, 238, 230, 0.38)`
- Frosted glass backgrounds: `rgba(248,245,240,0.72)`, `rgba(248,245,240,0.88)`, `rgba(248,245,240,0.92)`, `rgba(248,245,240,0.96)`

---

ASSET URLs (Cloudinary, not CloudFront)

Videos:
- Background video (Hero): `https://res.cloudinary.com/dy5er7kv5/video/upload/q_auto/f_auto/v1779808200/bg-video_xsmysw.mp4`
- Bird enter animation: `https://res.cloudinary.com/dy5er7kv5/video/upload/q_auto/v1779808206/bird-entrada_e72qt7.webm`
- Bird idle 1: `https://res.cloudinary.com/dy5er7kv5/video/upload/q_auto/v1779808282/bird-idle_fzjami.webm`
- Bird idle 2: `https://res.cloudinary.com/dy5er7kv5/video/upload/q_auto/v1779808284/bird-idle2_rajmgo.webm`
- Bird leave animation: `https://res.cloudinary.com/dy5er7kv5/video/upload/q_auto/v1779808286/bird-saida_ifroz1.webm`
- Background video (Section 2): `https://res.cloudinary.com/dy5er7kv5/video/upload/q_auto/f_auto/v1779835701/bg-2-video_sgbpqt.mp4`

Images:
- Q logo (unused but declared): `https://res.cloudinary.com/dy5er7kv5/image/upload/q_auto/f_auto/v1779808187/q-logo_isvugc.png`
- Center sculpture/slab: `https://res.cloudinary.com/dy5er7kv5/image/upload/q_auto/f_auto/v1779854565/slab_v1_kb4vqk.png`
- CTA card photo (Pexels): `https://images.pexels.com/photos/3184465/pexels-photo-3184465.jpeg?auto=compress&cs=tinysrgb&w=400`

---

APP STRUCTURE

```
src/
main.tsx -> StrictMode, renders
App.tsx -> then , no routing
Hero.tsx -> Hero section component
Section2.tsx -> Second section component
index.css -> Global styles
```

---

SECTION 1: HERO (`Hero.tsx`)

Container: `position: relative`, `width: 100%`, `minHeight: 100vh`, `overflow: visible`, `fontFamily: 'Zimula Trial Med', sans-serif`.

Responsive breakpoint: `isMobile = window.innerWidth < 768`, checked on mount and resize.

Layer 1 -- Background Video (z-index: 0)
- `` with `autoPlay muted loop playsInline`
- `position: absolute`, `inset: 0`, `width: 100%`, `height: 100vh`, `objectFit: cover`
- Source: `BG_VIDEO` URL

#### Layer 2 -- Warm Overlay (z-index: 1)
- A div covering the hero with `background: rgba(235, 230, 218, 0.12)`, `height: 100vh`, `pointerEvents: none`

#### Layer 3 -- Bird Animation System (z-index: 8)
- Container: `position: absolute`, `top: 0`, `left: 0`, `width: 100%`, `height: 100vh`, `pointerEvents: none`, `aria-hidden`
- Contains 4 `` elements (enter, idle1, idle2, leave), each toggled visible/hidden via `display` property
- **Desktop:** Each video is `position: absolute`, `inset: 0`, `width: 100%`, `height: 100%`, `objectFit: cover`
- **Mobile:** Each video is `position: absolute`, `top: 50%`, `left: 0`, `transform: translateY(-50%)`, `width: 100%`, `height: auto` (full width, auto height, vertically centered)
- **State machine:** Type `'enter' | 'idle1' | 'idle2' | 'leave' | 'hidden'`
- On page load: play `enter` video
- When `enter` ends: transition to `idle1`
- When `idle1` ends: transition to `idle2`
- When `idle2` ends: transition back to `idle1` (infinite loop)
- **On scroll down** (past 10px threshold): pause all idle/enter videos, reset their `currentTime` to 0, play `leave` video
- **On scroll back to top** (below 10px): pause leave video, reset, play `enter` video again
- Uses both React state and refs (`birdStateRef`) to avoid stale closures in scroll handlers
- All videos are preloaded with `.load()` on mount
- The `playVideo` helper sets `currentTime = 0`, checks `readyState >= 2`, then plays (or waits for `canplay` event)

#### Layer 4 -- Center Brand Text "Qelora" (z-index: 5)
- Absolutely positioned container filling `100vh`, `display: flex`, `alignItems: center`, `justifyContent: center`, `pointerEvents: none`
- Text: `"Qelora"` in `'Zimula Trial Bd', sans-serif`
- Font size: mobile `26vw`, desktop `22vw`
- `letterSpacing: -0.05em`, `color: #241f21`, `lineHeight: 1`
- `marginBottom`: mobile `8vh`, desktop `12vh`

#### Layer 5 -- Sculpture Image (z-index: 5)
- `` with `position: absolute`, `top: 50%`, `left: 50%`
- `transform: translateX(-50%) translateY(${-heroScroll 0.3}px)` -- parallax that moves UP as user scrolls down
- Width: mobile `220vw`, desktop `160vw`; `height: auto`
- `pointerEvents: none`, `willChange: transform`

#### Layer 6 -- Fixed Navbar (z-index: 100)
- `position: fixed`, `top: 0`, full width
- Padding: mobile `16px 20px`, desktop `20px 36px`
- **Left:** Brand name "Qelora" with registered trademark superscript. Font: `'Zimula Trial Bd'`, size: mobile `20px`, desktop `24px`, `letterSpacing: -0.03em`, `color: #241f21`. The `(R)` sup has `fontSize: 0.4em`, `verticalAlign: super`
- **Right (desktop):** `NavPills` component -- a row of pill buttons for `['Projects', 'Studio', 'Responsibility', 'Archive']` plus an `EN` language selector
- Each pill: `background: rgba(248,245,240,0.92)`, `borderRadius: 12px`, `padding: 13px 22px 8px`, `height: 40px`, `fontSize: 13px`, `textTransform: uppercase`, `letterSpacing: 0.07em`, `color: #241f21`
- Active pill has `fontWeight: 700` and a 3px round dot at `bottom: 3px`, centered
- Non-active: `fontWeight: 500`
- Language pill: separate rounded capsule (`borderRadius: 100px`), `padding: 8px 14px`, `background: rgba(248,245,240,0.88)`, `backdropFilter: blur(12px)`, `boxShadow: 0 2px 20px rgba(0,0,0,0.1)`, contains "EN" text and a chevron-down SVG
- **Right (mobile):** Hamburger button, `42x42px`, `borderRadius: 100px`, same frosted glass style. Shows X icon when open, 3-line hamburger when closed

#### Layer 7 -- Mobile Dropdown Menu (z-index: 99)
- `position: fixed`, `top: 70px`, `left: 16px`, `right: 16px`
- `background: rgba(248,245,240,0.96)`, `backdropFilter: blur(16px)`, `borderRadius: 18px`, `padding: 8px`, `boxShadow: 0 8px 40px rgba(0,0,0,0.14)`
- Each menu item: full-width button, `padding: 14px 20px`, `fontSize: 13px`, uppercase, `letterSpacing: 0.07em`, `borderBottom: 1px solid rgba(40,36,37,0.08)`
- Bottom: EN language selector row

#### Layer 8 -- Bottom Panels (z-index: 20)
- `bottom` is calculated as: `bottomOffset + heroScroll 0.5` where `bottomOffset` is 24px on mobile, 36px on desktop. This creates a parallax push-down effect as user scrolls.

**Desktop layout (side-by-side):**

- **Bottom-left panel:** `position: absolute`, `left: 36px`, `borderRadius: 18px`, `padding: 22px 28px`, `maxWidth: 270px`
- Headline: `"Designing places\nbeyond\nwhat's expected"` -- `fontSize: clamp(17px, 2vw, 24px)`, `lineHeight: 1.28`, `color: #282425`, `letterSpacing: -0.01em`
- Below: 1px border-top divider (`rgba(40,36,37,0.2)`), then "EXPLORE OUR APPROACH" link with down-arrow SVG. `fontSize: 11px`, uppercase, `letterSpacing: 0.1em`

- **Bottom-right panel:** `position: absolute`, `right: 36px`, `borderRadius: 18px`, `width: clamp(210px, 21vw, 290px)`, `height: 180px`, `overflow: hidden`
- Background: Pexels photo covering the entire card
- Dark gradient overlay: `linear-gradient(to bottom, rgba(16,14,12,0.55) 0%, transparent 60%)`
- Top text: `"Every lasting space begins\nwith a quiet dialogue."` -- `color: #fff`, `fontSize: 13px`, `lineHeight: 1.35`
- Bottom: inline flex with a white circle (envelope SVG icon, 36x36px, `borderRadius: 12px`) and a white "START A PROJECT" button (`fontSize: 11px`, uppercase, `letterSpacing: 0.07em`, `fontWeight: 700`, `borderRadius: 12px`, `height: 36px`)

**Mobile layout (stacked):**
- Single flex column container, `left: 20px`, `right: 20px`, `gap: 12px`
- **Top card:** Tagline panel with `background: rgba(248,245,240,0.72)`, `backdropFilter: blur(8px)`, `borderRadius: 16px`, `padding: 18px 20px`. Same text as desktop but single line: "Designing places beyond what's expected", `fontSize: 17px`. Same divider + "Explore our approach" link below.
- **Bottom card:** CTA card, `borderRadius: 16px`, `height: 120px`. Same structure as desktop right panel but adapted for mobile (text `fontSize: 12px`, same button row).

---

### SECTION 2 (`Section2.tsx`)

**Container:** `position: relative`, `width: 100%`, `minHeight: 100vh`, `display: flex`, `flexDirection: column`, `alignItems: center`, `justifyContent: center`, `overflow: hidden`, `fontFamily: 'Zimula Trial Med', sans-serif`

#### Layer 1 -- Background Video (z-index: 0)
- `` with `autoPlay muted loop playsInline`, `position: absolute`, `inset: 0`, `width: 100%`, `height: 100%`, `objectFit: cover`
- Source: `BG_VIDEO_2` URL

#### Layer 2 -- Warm Overlay (z-index: 1)
- `background: rgba(242, 238, 230, 0.38)`, `position: absolute`, `inset: 0`, `pointerEvents: none`

#### Layer 3 -- Center Headline (z-index: 2)
- Absolutely positioned, `inset: 0`, flex centered, `pointerEvents: none`, `textAlign: center`, `padding: 0 24px`
- Text: `"What stands the\ntest of time is all\nthat guides the\nwork."` using `
` tags
- `fontSize: clamp(32px, 5.5vw, 80px)`, `lineHeight: 1.18`, `color: #2a2420`, `maxWidth: 780px`, `letterSpacing: -0.025em`, `fontWeight: 400`

#### Layer 4 -- Bottom Element (z-index: 2)
- `position: absolute`, `bottom: clamp(24px, 4vh, 48px)`, full width, flex column centered, `padding: 0 24px`
- **Vertical line:** `width: 1px`, `height: 56px`, `background: rgba(42,36,32,0.25)`
- **Below (margin-top: 22px):** flex column centered, `gap: 14px`
- **Map pin SVG:** 24x28px outline pin icon, `stroke: #2a2420`, `strokeWidth: 1.4`
- **Subtext:** `"Civic bodies and private clients trust us to shape resilient communities and purposeful places."` -- `fontSize: clamp(11px, 1.4vw, 13px)`, `color: #2a2420`, `letterSpacing: 0.04em`, `lineHeight: 1.6`, `maxWidth: 340px`, `opacity: 0.75`

---

### KEY BEHAVIORS SUMMARY

1. **Bird animation state machine:** enter -> idle1 <-> idle2 loop; scroll triggers leave; scroll back triggers re-enter
2. **Parallax effects:** Sculpture image moves up with `translateY(-scrollY 0.3)`. Bottom panels push down with `bottom = offset + scrollY 0.5`
3. Responsive at 768px breakpoint: Nav collapses to hamburger, panels stack vertically, bird videos switch from cover-fill to width-100%/height-auto/vertically-centered, sculpture grows from 160vw to 220vw, brand text grows from 22vw to 26vw
4. All styling is inline -- no CSS classes in JSX, no Tailwind utility classes on elements
5. No third-party animation libraries -- all animations are native video playback + scroll-driven inline style changes via React state

Apex Program 手风琴

No.1443 · 前端开发 · 社区/原生 · 来源：MotionSites (MIT) · EN 原文

# Recreate the "Course Curriculum" Section — Exact Prompt

Build a React + TypeScript + TailwindCSS section called `CurriculumSection` that exactly matches the spec below.

## Stack & Global Setup

- React 18 + Vite + TypeScript
- TailwindCSS with HSL semantic tokens
- `framer-motion` for animations
- `clsx` + `tailwind-merge` exposed as `cn()` helper in `@/lib/utils`
- Dark theme background: `#000000` (or whatever the page bg is; section uses `bg-background`)
- Body font: **Inter** (loaded globally)
- Icon font: **Material Symbols Outlined** (loaded globally via Google Fonts link, with variable axes FILL, wght, GRAD, opsz)
- Tailwind token: `colors.landing.surface = "rgba(255,255,255,0.10)"`
- Foreground text token resolves to white/near-white via HSL

```html
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet" />
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200" rel="stylesheet" />
```

## Helper Components (exact code)

### `cn` helper — `@/lib/utils.ts`
```ts
import { clsx, type ClassValue } from "clsx";
import { twMerge } from "tailwind-merge";
export function cn(...inputs: ClassValue[]) { return twMerge(clsx(inputs)); }
```

### `MIcon` — Material Symbols icon (`@/components/landing/icons/MIcon.tsx`)
```tsx
import { CSSProperties } from "react";
interface MIconProps { name: string; size?: number; className?: string; filled?: boolean; weight?: number; style?: CSSProperties; }
export const MIcon = ({ name, size = 16, className = "", filled = false, weight = 400, style }: MIconProps) => (
<span aria-hidden="true"
className={`material-symbols-outlined select-none leading-none inline-flex items-center justify-center ${className}`}
style={{
fontSize: size, width: size, height: size,
fontVariationSettings: `'FILL' ${filled ? 1 : 0}, 'wght' ${weight}, 'GRAD' 0, 'opsz' ${Math.min(48, Math.max(20, size))}`,
...style,
}}>{name}</span>
);
```

### `FadeUp` — scroll reveal (`@/components/landing/primitives/FadeUp.tsx`)
- Uses `framer-motion` `motion.div` with `initial={{opacity:0, y:24}}`, `whileInView={{opacity:1, y:0}}`, `viewport={{ once:true, amount:0.3 }}`, transition `{ duration:0.6, delay, ease:[0.22,1,0.36,1] }`
- Honors `prefers-reduced-motion` (skip the y translate)
- Props: `delay`, `duration=0.6`, `y=24`, `once=true`, `amount=0.3`, `className`, children

### `SpotlightBorder` — mouse-tracked 1px gradient border (`@/components/landing/effects/SpotlightBorder.tsx`)
- A wrapper with `padding: 1px` whose background is a radial gradient following the cursor.
- Uses CSS masks (`linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0)` with `mask-composite: exclude` / `-webkit-mask-composite: xor`) so only the 1px border ring is visible.
- A global `window` `mousemove` listener writes `--spot-x` / `--spot-y` CSS variables on the element via `getBoundingClientRect()`.
- Background style:
```
radial-gradient(${size}px circle at var(--spot-x,-200px) var(--spot-y,-200px), rgba(255,255,255,${intensity}), rgba(255,255,255,0) 60%)
```
- Props: `radius` ('xl'|'2xl'|'3xl'|'full', default '3xl'), `size` (default 300), `intensity` (default 0.35), `as` ('div'|'button'|'section'), `className`, children.
- Renders the parent `Tag` with `relative` + `rounded-*`, and an absolutely-positioned `<span aria-hidden>` filling `inset-0` with the mask style above.

## Section: `CurriculumSection`

File: `src/components/landing/curriculum/CurriculumSection.tsx`

### Data (verbatim)
```ts
const modules = [
{ title: "Module 1", subtitle: "Foundations of AI Design",
lessons: [
"Intro to The Future of Design and Building, how it started and where it's going.",
"AI Design Philosophy / Why and what makes good AI design",
"What is Claude and 10+ other best AI tools for design",
"Setting up Claude",
]},
{ title: "Module 2", subtitle: "Building with AI",
lessons: [
"Creating the Branding/Logo with AI",
"Pitch Deck Build",
"Landing Page wireframes",
"Design a Landing Page with AI",
"Building High-end web app",
"GitHub & Vercel Deploy",
"Creating social media design with AI",
]},
{ title: "Module 3", subtitle: "Launch & Growth",
lessons: [
"Getting Seen, Launch Videos",
"Building a portfolio",
"X (Twitter) Strategy for Designers",
"Making money selling digital products as a designer",
]},
{ title: "Module 4", subtitle: "Making Money as an AI Designer",
lessons: [
"Finding Clients + Making Money",
"How to Make Clients Find You",
"Selling AI Powered templates",
]},
];
```

### Layout & Structure

- `<section>` root: `relative w-full bg-background py-12 sm:py-16`
- Inner container: `mx-auto max-w-[1080px] px-4 sm:px-6`

**Header (centered, mb-12):**
- Pill badge wrapped in `<FadeUp delay={0}>`:
- `inline-flex items-center gap-2 rounded-full bg-landing-surface border border-white/10 px-3 py-1 text-xs text-foreground/80 backdrop-blur`
- Inside: `<span class="h-1.5 w-1.5 rounded-full bg-foreground/70" />` then text `"Course Curriculum"`
- `mb-6`
- Heading in `<FadeUp delay={0.1}>`:
- `<h2 class="text-3xl sm:text-4xl font-normal tracking-[-0.02em] leading-[1.05] text-foreground">A fully modern curriculum.</h2>`

**Accordion container:**
- `<SpotlightBorder radius="2xl" size={520} intensity={0.5} className="mx-auto w-full p-2 sm:p-3">`
- Inside: a div `rounded-2xl border border-white/10 px-6 sm:px-8` with inline style `backgroundColor: "#161616"`
- Map `modules`, each wrapped in `<FadeUp delay={0.15 * i} className="border-b border-white/10 last:border-b-0">` containing the `ModuleAccordion`.

### `ModuleAccordion` component (inside same file)

State: `openIndex` (number|null) controlled by parent; initial value `0` (Module 1 open on mount). Click toggles: open if closed, close if same index.

**Header button** (`<button>` full width):
- Class: `flex w-full items-center justify-between gap-4 py-6 text-left`
- Left content (div):
- Eyebrow: `<div class="text-[11px] uppercase tracking-[0.2em] text-foreground/50">{title}</div>`
- Subtitle: `<div class="mt-2 text-lg sm:text-xl font-normal text-foreground">{subtitle}</div>`
- Right icon container:
- `flex h-9 w-9 flex-shrink-0 items-center justify-center rounded-full border border-white/15 bg-white/[0.04] transition-transform duration-300`
- When open: add `rotate-180`
- Icon: `<MIcon name="expand_more" size={16} className="text-foreground/80" />`

**Collapse body:**
- Wrap in `<AnimatePresence initial={false}>`
- When open, render `motion.div` with:
- `initial={{ height: 0, opacity: 0 }}`
- `animate={{ height: "auto", opacity: 1 }}`
- `exit={{ height: 0, opacity: 0 }}`
- `transition={{ duration: 0.3, ease: "easeInOut" }}`
- `className="overflow-hidden"`
- Inside: `<ul class="pb-6">` mapping each lesson:
- `<li class="flex items-center gap-3 border-t border-white/10 py-4 text-sm text-foreground/85">`
- Check bullet: `<span class="flex h-5 w-5 flex-shrink-0 items-center justify-center rounded-full border border-white/20 bg-white/[0.06]"><MIcon name="check" size={12} className="text-foreground" /></span>`
- Lesson text follows the bullet.

### Behavior Specs
- Module 1 starts open on first render.
- Only one module open at a time. Clicking the open module closes it (openIndex set to null).
- The chevron rotates 180° smoothly (300ms) when its module opens.
- Collapse animates height + opacity over 300ms easeInOut.
- The whole accordion card has a 1px border that picks up a soft white glow following the cursor anywhere on the page (SpotlightBorder, size=520, intensity=0.5).
- Pill, heading, and each module row fade up on scroll (intersection ≥30%, fires once). Modules stagger by 0.15s per index.

### Tailwind config additions
```ts
// tailwind.config.ts theme.extend.colors
landing: { surface: "rgba(255, 255, 255, 0.10)" }
```
Background tokens (`bg-background`, `text-foreground`) come from your HSL CSS variables in `index.css`.

## Full Component Source (drop-in)

```tsx
import { useState } from "react";
import { motion, AnimatePresence } from "framer-motion";
import { cn } from "@/lib/utils";
import { MIcon } from "@/components/landing/icons/MIcon";
import { SpotlightBorder } from "@/components/landing/effects/SpotlightBorder";
import { FadeUp } from "@/components/landing/primitives/FadeUp";

type Module = { title: string; subtitle: string; lessons: string[] };

const modules: Module[] = [ /* ...data above verbatim... */ ];

const ModuleAccordion = ({ module, isOpen, onToggle }:{
module: Module; isOpen: boolean; onToggle: () => void;
}) => (
<div>
<button onClick={onToggle} className="flex w-full items-center justify-between gap-4 py-6 text-left">
<div>
<div className="text-[11px] uppercase tracking-[0.2em] text-foreground/50">{module.title}</div>
<div className="mt-2 text-lg sm:text-xl font-normal text-foreground">{module.subtitle}</div>
</div>
<div className={cn("flex h-9 w-9 flex-shrink-0 items-center justify-center rounded-full border border-white/15 bg-white/[0.04] transition-transform duration-300", isOpen && "rotate-180")}>
<MIcon name="expand_more" size={16} className="text-foreground/80" />
</div>
</button>
<AnimatePresence initial={false}>
{isOpen && (
<motion.div initial={{ height: 0, opacity: 0 }} animate={{ height: "auto", opacity: 1 }} exit={{ height: 0, opacity: 0 }} transition={{ duration: 0.3, ease: "easeInOut" }} className="overflow-hidden">
<ul className="pb-6">
{module.lessons.map((lesson, i) => (
<li key={i} className="flex items-center gap-3 border-t border-white/10 py-4 text-sm text-foreground/85">
<span className="flex h-5 w-5 flex-shrink-0 items-center justify-center rounded-full border border-white/20 bg-white/[0.06]">
<MIcon name="check" size={12} className="text-foreground" />
</span>
{lesson}
</li>
))}
</ul>
</motion.div>
)}
</AnimatePresence>
</div>
);

export const CurriculumSection = () => {
const [openIndex, setOpenIndex] = useState<number | null>(0);
return (
<section className="relative w-full bg-background py-12 sm:py-16">
<div className="mx-auto max-w-[1080px] px-4 sm:px-6">
<div className="mb-12 flex flex-col items-center text-center">
<FadeUp delay={0}>
<span className="mb-6 inline-flex items-center gap-2 rounded-full bg-landing-surface border border-white/10 px-3 py-1 text-xs text-foreground/80 backdrop-blur">
<span className="h-1.5 w-1.5 rounded-full bg-foreground/70" />
Course Curriculum
</span>
</FadeUp>
<FadeUp delay={0.1}>
<h2 className="text-3xl sm:text-4xl font-normal tracking-[-0.02em] leading-[1.05] text-foreground">
A fully modern curriculum.
</h2>
</FadeUp>
</div>
<SpotlightBorder radius="2xl" size={520} intensity={0.5} className="mx-auto w-full p-2 sm:p-3">
<div className="rounded-2xl border border-white/10 px-6 sm:px-8" style={{ backgroundColor: "#161616" }}>
{modules.map((m, i) => (
<FadeUp key={m.title} delay={0.15 * i} className="border-b border-white/10 last:border-b-0">
<ModuleAccordion module={m} isOpen={openIndex === i} onToggle={() => setOpenIndex(openIndex === i ? null : i)} />
</FadeUp>
))}
</div>
</SpotlightBorder>
</div>
</section>
);
};
```

## Acceptance Checklist
- [ ] Centered pill "● Course Curriculum" + heading "A fully modern curriculum." (Inter, normal weight, tight tracking)
- [ ] Card bg `#161616`, 1px white/10 border, rounded-2xl, mouse-tracked spotlight glow on border (size 520, intensity 0.5)
- [ ] 4 module rows separated by `border-white/10`, last row no border
- [ ] Each row: tiny uppercase eyebrow "Module N" (tracking 0.2em, foreground/50) + subtitle (text-lg sm:text-xl)
- [ ] Right-side 36px circular chevron button, rotates 180° on open (300ms)
- [ ] Module 1 open by default; only one open at a time; click open module to close
- [ ] Lessons list inside collapse: each lesson row separated by top border, 20px circular check bullet, text-sm foreground/85
- [ ] Collapse animates height + opacity 300ms easeInOut
- [ ] Pill, heading, and each module fade up on scroll (once, amount 0.3), modules stagger 0.15s
- [ ] Respects `prefers-reduced-motion`

Ms Intelligence Layer

No.1444 · 前端开发 · 社区/原生 · 来源：MotionSites (MIT) · EN 原文

Recreate a single-file dark cinematic AI-infrastructure landing page EXACTLY as specified. Deliver one self-contained index.html (inline CSS + JS, no build step). Pixel-faithful to a measured Figma-style comp. No cards, no purple, no glow orbs, no decorative abstract gradients as the main visual — the hero visual is a full-bleed looping video.

════════════════════════════════════════
PAGE META / IDENTITY
════════════════════════════════════════
- Document title: "The Next Layer of Intelligence"
- Brand: abstract geometric S-like mark (lightning/bolt geometry), NOT a wordmark in the header.
- Product vibe: premium AI infrastructure / “next layer of intelligence”; black void stage; restrained silver/white type; white pill CTAs.
- Viewport: fixed full-screen stage; html/body height 100%; overflow hidden; background #050505.
- Antialiased Manrope UI; text-rendering: geometricPrecision.

════════════════════════════════════════
FONTS (REQUIRED)
════════════════════════════════════════
1) Primary UI type: Manrope (variable / range font-weight 200–800), normal style.
   - Load via @font-face woff2 OR Google Fonts equivalent:
     https://fonts.google.com/specimen/Manrope
     weights covering 400, 500, 700 (variable 200–800 preferred).
   - body font-family: 'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif

2) Partner logo wordmark type: custom display face named "IpsumMark", weight 700.
   - Used ONLY on the four bottom “logoipsum” wordmarks.
   - If IpsumMark binary is unavailable, approximate with a bold geometric sans close to logoipsum marks (still set font-family stack: 'IpsumMark','Manrope',sans-serif) — do NOT use Inter/Roboto/Arial as primary.

════════════════════════════════════════
COLOR TOKENS (CSS VARIABLES)
════════════════════════════════════════
--ink: #fafafa          /* headline / primary text */
--muted: #a7a6a6        /* subcopy */
--nav: #b6b5b5          /* header links */
--strip: #8b8a8a        /* partner logos */
--pill: #ffffff         /* CTA fill */
--pill-ink: #050505     /* CTA text */
Stage / page black: #050505

════════════════════════════════════════
RESPONSIVE UNIT SYSTEM (CRITICAL — MATCH EXACTLY)
════════════════════════════════════════
Reference canvas: 1487 × 1058.

:root {
  --u: calc(100vh / 1058);                 /* 1 design px locked to HEIGHT */
  --uw: calc(100vw / 1487);
  --h: clamp(var(--u), calc(var(--u) * .65 + var(--uw) * .35), calc(var(--u) * 1.16));
}
@supports (height: 100dvh) { :root { --u: calc(100dvh / 1058); } }

Meaning:
- Vertical rhythm always fills the screen (nav ~27u, headline top ~230.5u, logos ~995u, baseline 1058u).
- Left column anchored ~75u from left; header CTA ~75–76u from right; nav + logo strip centered.
- --h grows type slightly on ultra-wide (max +16%), never shrinks below height-locked --u.

Portrait / narrow (max-aspect-ratio: 11/10):
- Switch to flow layout (flex column), unit --m: min(100vw/430, 1.34px); --u: var(--m)
- Tablet band (≥600px AND max-aspect-ratio 11/10):
  --m: min(100vw/860, 100vh/760, 1.25px)

════════════════════════════════════════
BACKGROUND — CLOUDFRONT VIDEO (MANDATORY URL)
════════════════════════════════════════
Exact video URL (must use this, not a substitute):
https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260808_112712_da9d53df-6d27-4b12-bdf6-aa9dc2622bdf.mp4

Markup inside absolute .plate covering the stage:
<video class="plate-video" autoplay muted loop playsinline preload="auto" aria-hidden="true">
  <source src="[URL ABOVE]" type="video/mp4">
</video>

Desktop video geometry (match photo-plate sizing):
- position absolute
- left: 50%; top: calc(1 * var(--u))
- width: calc(1492 * var(--u)); height: calc(1054 * var(--u))
- transform: translateX(calc(-50% - calc(0.5 * var(--u))))
- object-fit: cover; pointer-events: none

Portrait: inset 0; full width/height; transform none; object-fit cover; object-position 43% center
Tablet portrait: object-position 44% center

Video subject (for art direction fidelity): dark cinematic scene — silhouetted figure walking toward a tall glowing white vertical portal/door of light on misty ground, smoke/fog at base, pure black surroundings. Loop seamlessly.

FADE OVERLAYS on .plate::after (keep BOTH gradients):
Desktop:
1) Bottom fade:
linear-gradient(to bottom,
  rgba(5,5,5,0) 78.8%, rgba(5,5,5,.23) 79.6%, rgba(5,5,5,.45) 81.4%,
  rgba(5,5,5,.75) 83.3%, rgba(5,5,5,.84) 85.2%, rgba(5,5,5,.888) 88%,
  rgba(5,5,5,.905) 91%, rgba(5,5,5,.96) 95%, #050505 100%)
2) Side letterbox:
linear-gradient(to right,
  #050505 calc(50% - 746u),
  transparent calc(50% - 676u),
  transparent calc(50% + 676u),
  #050505 calc(50% + 746u))
  where u = var(--u)

Portrait overlays (replace desktop):
- to-right: rgba(5,5,5,.86)→.66@42%→.20@78%→.10@100%
- to-bottom: .72@0%→.34@24%→.34@56%→.80@82%→.97@94%→#050505
Tablet portrait slightly lighter side/top values (.84/.60/.16/.06 and .66/.28/.30/.78/.96).

════════════════════════════════════════
STRUCTURE (DOM ORDER)
════════════════════════════════════════
.stage
  .plate > video.plate-video
  header.topbar
    a.brand (aria-label Home) > brand SVG
    nav.links (aria-label Primary): About | Features | FAQ | Contact
    a.pill.pill-nav > span “Get Started”
    button.burger#burger (two <i> bars) — portrait only visually
  nav.menu#menu (mobile overlay)
    .menu-inner
      p.menu-eyebrow “Menu”
      ul.menu-list: About, Features, FAQ, Contact
      .menu-foot: pill “Get Started” + ghost “View Architecture”
  main.hero
    h1.headline: <span>The Next Layer</span> <span>of Intelligence</span>
    p.sub: <span>A unified infrastructure platform to help teams build,</span>
           <span>ship, and scale AI systems with confidence.</span>
    .actions
      a.pill.pill-cta > span “Get Started”
      a.ghost “View Architecture”
  .logos
    .lg.lg1 … .lg.lg4  (icon SVG + word “logoipsum”; lg2 has a tiny raised dot after the word)

════════════════════════════════════════
DESKTOP ABSOLUTE LAYOUT (in --u / --h units)
════════════════════════════════════════
Brand mark:
- left 75u, top 27u, size 31.5u × 48.5u

Nav links (.links):
- left 50%, top 51u, transform translate(-50%, -50%)
- font 19.0u / weight 400 / color --nav
- gaps between links ≈ 24.5u, 23.5u (3rd), 26.0u (4th)
- items: About, Features, FAQ, Contact — plain text links, no underlines

Header pill (.pill-nav):
- right 75.4u, top 27u, 175u × 49u
- white pill, radius 999px, text #050505, font 20.6u weight 500
- inner span translateY(1u) for optical centering
- label: “Get Started”

Headline (.headline):
- left 75.5u, top 230.5u
- font-size 71.6h, line-height 80.5h, weight 400, letter-spacing 0.3h
- color --ink; white-space nowrap; each span display:block (two lines):
  Line1: “The Next Layer”
  Line2: “of Intelligence”

Subcopy (.sub):
- left 75.5u
- top: 230.5u + 189.0h
- font 20.7h / lh 23.5h / weight 400 / word-spacing 1.8h / color --muted
- two nowrap lines as spans:
  “A unified infrastructure platform to help teams build,”
  “ship, and scale AI systems with confidence.”

Primary CTA (.pill-cta):
- left 74.9u
- top: 230.5u + 264.5h
- size 175.6h × 50h, font 20.6h
- label “Get Started”

Ghost link (.ghost):
- left: 74.9u + 220.6h
- top: 230.5u + 279.5h
- font 20.6h weight 500 letter-spacing 0.12h color #fff
- label “View Architecture” (no underline)

Partner strip (.logos):
- width 741u, left 50%, transform translateX(-50% + 20u)
- color --strip (#8b8a8a)
- Four marks, absolute positions:
  lg1: left -0.5u, top 994.7u; mark 30.5×31u; word left 37u top ~5.6u size 18.1u “logoipsum”
  lg2: left 206.5u, top 995.7u; mark 24.5×30u; word left 31u top ~7.3u size 18.5u “logoipsum” + .dot (inline 0.09em circle, vertical-align 0.62em, margin-left 0.06em)
  lg3: left 416.5u, top 996.7u; mark 28.5×28u; word left 35u top ~7.3u size 16.15u “logoipsum”
  lg4: left 620.5u, top 998.7u; mark 28.5×25.5u; word left 37u top ~8.3u size 15.3u “logoipsum”
- Wordmarks use font-family IpsumMark, weight 700

════════════════════════════════════════
BRAND SVG (exact geometry)
════════════════════════════════════════
viewBox="0 0 31.5 48.5"
- LinearGradient id bg1 from (8,0)→(34.1,28.9) stops:
  0 #9e9e9e, .28 #a6a6a6, .34 #a3a3a3, .40 #3a3a3a, .55 #414141,
  .60 #7a7a7a, .68 #8e8e8e, .80 #a9a9a9, .95 #c4c4c4, 1 #cccccc
- Path: M21.5 0 L21.5 19.5 L31.5 19.5 L31.5 29 L10 48.5 L10 28.5 L0.5 28.5 L0.5 18.5 Z fill url(#bg1)
- Rect 0.5,18.5 9×10 fill #fdfdfd
- Rect 22,19.5 9.5×9.5 fill #fdfdfd
Shape reads as a stylized angular “S” / bolt with two bright rectangular notches.

════════════════════════════════════════
PARTNER ICON SVGs (currentColor = --strip)
════════════════════════════════════════
1) viewBox 0 0 30 31 — square frame with circular bite (mask circle at 19.5,10.5 r5.1) + circle path
2) viewBox 0 0 25 30 — vertical bar + circle yin-yang mask split (classic logoipsum dual form)
3) viewBox 0 0 28 28 — circle stroke r12.35 sw 3.1 + two curved stroke paths (swirls)
4) viewBox 0 0 28 25.5 — filled wavy “mound” path + two stroked wave lines beneath (sw ~3.05)

(Use the exact path data from the source page if available; otherwise match these logoipsum silhouettes precisely.)

════════════════════════════════════════
ANIMATIONS (prefers-reduced-motion: no-preference ONLY)
════════════════════════════════════════
Easing: cubic-bezier(.22, 1, .36, 1)

@keyframes rise:
  from { opacity:0; transform: translateY(14u) }

@keyframes riseNav: (for centered nav — preserve translate(-50%,-50%) end state)
  from { opacity:0; transform: translate(-50% + 0u, -50% + 14u) }
  to   { opacity:1; transform: translate(-50% + 0u, -50%) }

@keyframes fade:
  from { opacity:0 }

Stagger on load:
- .brand, .links, .pill-nav → rise / riseNav, 0.8s, both
- .headline → rise 0.9s, delay 0.06s
- .sub → rise 0.9s, delay 0.14s
- .pill-cta, .ghost → rise 0.9s, delay 0.22s
- .lg → fade 1.1s, delay 0.34s, ease

Reduced motion: collapse menu/burger transitions to ~0.001s; skip entrance animations.

════════════════════════════════════════
PORTRAIT / MOBILE BEHAVIOR
════════════════════════════════════════
- Hide .links and .pill-nav; show frosted-glass pill burger (rgba white .06 / border .14, backdrop blur).
- Burger bars morph to X when .stage.is-open (rotate ±45deg with translateY ±4.3m).
- Overlay .menu: full-screen dark gradient blur, opacity/visibility transition 0.42s.
- Staggered menu reveal (eyebrow, each li, foot) opacity+translateY with delays .06/.10/.16/.22/.28/.34s.
- Menu links large (~31m, min 25px) with small chevron ::after.
- Headline wraps inline on phone; returns to two-line spans on tablet band.
- Logos: 2×2 grid on phone; single row of 4 on tablet ≥600px.
- Safe-area padding on stage.

════════════════════════════════════════
JS (minimal)
════════════════════════════════════════
Toggle .is-open on .stage via burger click; sync aria-expanded / aria-hidden / aria-label.
Close on Escape, on menu link click, and when resized to landscape aspect > 1.1.

════════════════════════════════════════
COMPOSITION RULES (DO NOT VIOLATE)
════════════════════════════════════════
- First viewport = ONE composition: brand mark + nav + one headline + one sub + CTA pair + full-bleed video + bottom partner strip. No stats, cards, badge chips, or secondary marketing blocks.
- Brand mark is a hero-level left signal, not tiny nav decoration only.
- Video is edge-to-edge background plane (not inset card/media).
- No overlays/stickers on the video except the measured edge/bottom fades.
- White fully-rounded pills for primary CTAs only; ghost text for secondary.
- Single HTML file; works desktop + mobile.

Build it so a 1487×1058 desktop screenshot matches this layout to the pixel, with the CloudFront MP4 looping behind the left typography column and the four gray logoipsum marks sitting in the bottom fade.
```

---

Sup Forge Launch Waitlist 深色 Warm Ember

No.1445 · 前端开发 · 社区/原生 · 来源：MotionSites (MIT) · EN 原文

{"summary": "A dark, warm-ember startup launch / waitlist landing page. Near-black ink base (#0a0a0f) with a single coral accent (#ff5a4d), large Space Grotesk display headline, and a centered single-column hero whose copy ends with a coral emphasis word. Behind the hero sit soft blurred warm-ember radial 'streak' glows plus a faint dot grain. A glassy waitlist card (email + coral 'Reserve spot' pill) is the primary conversion surface, followed by a social icon row, an uppercase 'backed by' logo row, a sticky-titled editorial 3-step feature spread on a 12-col grid, and a quiet split footer. A floating glass pill nav sits at the top.", "style": {"description": "Dark warm-ember minimal launch page. Near-black ink base (#0a0a0f) with warm off-white text (#f4f3ef), one hot coral accent (#ff5a4d) used for the logo mark, ping dot, emphasis word, feature numerals/icons, focus ring and the primary CTA. Space Grotesk for all display headings (weights 600-700, tight -0.03em tracking) and Inter for body/UI (slightly negative -0.01em letter-spacing, antialiased). Mood: confident, fast, indie-founder. Atmosphere comes from large blurred coral/amber radial 'streak' glows behind the hero, a subtle white-dot grain overlay, glassmorphism (blurred translucent dark panels with hairline white borders) on the nav pill and waitlist card, fully-rounded pill controls, and a soft coral box-shadow glow on the brand mark and CTA. Headlines use a white-to-grey vertical gradient text clip.", "prompt": "Design in a dark, warm-ember, minimal startup-launch style. Palette: near-black ink base #0a0a0f, warm off-white text #f4f3ef, a single hot coral accent #ff5a4d (with warmer amber #ff8c3c / #ffaa5a only inside the ambient glows). Headings use Space Grotesk (weights 600-700, tracking -0.03em, leading ~0.98); body and UI use Inter (weights 400-600, letter-spacing -0.01em, -webkit-font-smoothing antialiased). Use glassmorphism for floating panels: linear-gradient dark fill (rgba(22,22,28,0.92)->rgba(13,13,18,0.92)), backdrop-blur ~16px, 1px rgba(255,255,255,0.07) border; the nav pill uses rgba(20,20,26,0.7) + blur 14px. Behind the hero place 3 large blurred (filter: blur(90px)) coral/amber radial 'streak' ellipses at ~0.55 opacity, plus a faint white radial-dot grain (rgba(255,255,255,0.025) 1px dots on a 3px grid). All buttons, the badge, the input shell and social icons are fully-rounded pills. The primary CTA and the logo mark carry a soft coral glow box-shadow (0 8px 30px rgba(255,90,77,0.35)). Headline text uses a white->grey (#ffffff 35% -> #b9b8b3 100%) vertical gradient clipped to text, with one trailing word in solid coral. Feature icon tiles are coral-tinted (bg rgba(255,90,77,0.10), border rgba(255,90,77,0.22)). Keep it spacious, centered, dark and warm, never cold blue or neon."}, "layout_and_structure": {"description": "Single-column, centered, long-scroll launch page in a max-w-6xl (72rem) container with px-5 / sm:px-8 gutters. Top-down order: a floating sticky glass pill nav, a centered hero (badge -> gradient headline -> one-line statement -> glass waitlist card -> social icon row) over blurred warm-ember glows + grain, an uppercase 'backed by' logo row, an editorial feature spread (12-col grid: a sticky 4-col title column + an offset, staggered 3-item numbered feature list), and a quiet split footer. Responsive: nav links hide below md, the waitlist form stacks vertically below sm, the feature grid collapses from 12 cols to a single stacked column on mobile and the second feature row loses its sm:pl-10 offset.", "prompts": [{"part": "Sticky pill nav", "prompt": "A sticky top header (z-50, top-0) holding a floating 'nav pill' centered in a max-w-6xl row with top padding. The pill is fully rounded, glassy (rgba(20,20,26,0.7), backdrop-blur 14px, 1px white/7 border) with small px-3 py-2 padding. Left: the logo = an 8x8 rounded-lg coral square with a soft coral glow containing a black ph:lightning-fill icon, next to the 'Forge' wordmark in Space Grotesk 600. Center (hidden below md): four pill text links (How it works, Features, Backed by, FAQ) in white/75 at 13.5px that brighten to white on hover. Right: a solid white fully-rounded pill CTA 'Get early access' in black 13px 600."}, {"part": "Hero", "prompt": "A centered single-column hero in a relative max-w-6xl container with pt-20/sm:pt-28 top padding, over an absolutely-positioned ambient layer (3 large blurred coral/amber radial 'streak' ellipses) and a faint white dot grain. Stack centered: (1) a small rounded-full badge with a 1px white/10 border and white/4 fill containing an animated coral ping dot and the label 'Private beta - Waitlist open' in 12.5px white/80; (2) a huge Space Grotesk 700 headline at clamp(2.7rem,8.5vw,5.5rem), leading 0.98, tracking -0.03em reading 'Launch the site / before the idea cools.' where the first two lines use a white->grey gradient text clip and the final word 'cools.' is solid coral; (3) a max-w-xl white/75 sub-paragraph at ~16px ('Forge turns a one-line prompt into a launch-ready startup website. Hero, pricing, waitlist, the lot. Pick a starter, describe the vibe, ship today.'); (4) the glass waitlist card; (5) a social icon row."}, {"part": "Waitlist card (primary CTA)", "prompt": "A glassmorphic card (the 'glass' style: dark gradient fill, backdrop-blur 16px, 1px white/7 border) max-w-lg, rounded-3xl, p-7/sm:p-8, left-aligned text, mt-12. Header: a coral ph:paper-plane-tilt-fill icon beside a Space Grotesk 600 'Join the waitlist' at 20px. Sub-line in white/75 13.5px ('We onboard a new batch every Friday. Drop your email and we'll save you a seat plus 5 free site generations.'). Form (stacks vertically below sm, row on sm+): a fully-rounded 'input shell' (white/4 fill, 1px white/10 border) wrapping a white/55 ph:envelope-simple icon + an email input with placeholder 'you@startup.com'; on focus-within the shell border turns coral/55 with a 4px coral/10 ring. Beside it a solid coral fully-rounded 'Reserve spot' pill button (black text, coral glow shadow, ph:arrow-right-bold icon) that brightens on hover. Below: a reassurance line with a ph:shield-check icon in white/72 12px ('No spam. One launch email, then quiet until your batch.')."}, {"part": "Social row", "prompt": "A centered horizontal row (mt-8, gap-3) of three 9x9 fully-rounded icon buttons (1px white/10 border, white/3 fill, white/55 icons) for X (ph:x-logo-bold), GitHub (ph:github-logo-bold) and Discord (ph:discord-logo-bold). On hover each gets a coral/40 border and coral icon."}, {"part": "Backed-by logo row", "prompt": "A section with a thin top border (white/6). Centered uppercase eyebrow at 11.5px, white/72, letter-spacing 0.22em: 'Backed by founders & funds who ship fast'. Below, a centered flex-wrap row (gap-x-10/14, gap-y-6) of five placeholder backer logos, each a ph:* outline icon (rocket-launch, diamond, hexagon, circles-three, mountains) at 20px beside a Space Grotesk 600 16px wordmark (Liftoff, Northpeak, Hexa, Trio Capital, Basecamp) in white/72, brightening to white on hover."}, {"part": "Editorial feature spread", "prompt": "A features section in max-w-6xl with a 12-col grid (gap-x-14 gap-y-10). Left 4 cols = a sticky (md:top-28) editorial title block: a coral eyebrow row (a 10px-wide coral/60 hairline + uppercase 0.28em-tracked coral 'The kit'), a Space Grotesk 700 heading at clamp(1.9rem,4.4vw,2.9rem) ('Everything between the idea and the' + a white->grey gradient 'first signup.'), a max-w-xs white/75 intro paragraph, and a white text link 'Reserve your spot' with a ph:arrow-right-bold icon that turns coral on hover. Right ~7 cols (lg:col-start-6) = a vertically divided (divide-white/8) list of 3 numbered feature articles; the 2nd article is offset with sm:pl-10 for a staggered rhythm. Each article: a coral/80 Space Grotesk tabular two-digit number (01-03), a 12x12 coral-tinted rounded-xl 'feature-icon' tile (ph:magic-wand / ph:squares-four / ph:export coral icons) that gains a coral/40 border on group-hover, then a Space Grotesk 600 18px title and a max-w-md white/75 14px description (Prompt to page / Starter library / Ship anywhere)."}, {"part": "Footer", "prompt": "A quiet footer with a thin top border (white/6). In a max-w-6xl row that is column-stacked on mobile and a 3-part space-between row on sm+: left = a 7x7 rounded-md coral square with a black ph:lightning-fill icon beside the 'Forge' Space Grotesk 600 wordmark; center = a white/72 12.5px copyright line '\u00a9 2026 Forge Labs. Built for founders in a hurry.'; right = three white/72 12.5px text links (Privacy, Terms, Changelog) that brighten to white on hover."}]}, "special_ui_components": ["Floating glass pill nav: a fully-rounded, backdrop-blurred translucent dark pill (rgba(20,20,26,0.7), blur 14px, 1px white/7 border) that sticks to the top", "Ambient warm-ember glows: 3 large absolutely-positioned blurred (blur 90px, ~0.55 opacity) coral/amber radial 'streak' ellipses rotated behind the hero, plus a faint white radial-dot grain (rgba(255,255,255,0.025) 1px dots on a 3px grid)", "Glassmorphic waitlist card: dark linear-gradient fill, backdrop-blur 16px, hairline white/7 border, rounded-3xl, holding the primary email-capture form", "Animated coral ping dot in the status badge (an animate-ping coral halo over a solid coral dot)", "Gradient text headline: white->grey (#ffffff 35% -> #b9b8b3) vertical gradient clipped to text, with one trailing word in solid coral", "Fully-rounded 'input shell' with a coral focus state: white/4 fill + white/10 border that switches to a coral/55 border and a 4px coral/10 focus ring on focus-within", "Coral-glow buttons/mark: a 0 8px 30px rgba(255,90,77,0.35) box-shadow on the primary CTA and the lightning logo square", "Coral-tinted feature icon tiles: rounded-xl tiles with rgba(255,90,77,0.10) fill and rgba(255,90,77,0.22) border, brightening on group-hover", "Sticky editorial title column with an offset, staggered, divided numbered feature list (the middle row indented via sm:pl-10)", "Phosphor (Iconify ph:*) icons throughout: lightning-fill, paper-plane-tilt-fill, envelope-simple, arrow-right-bold, shield-check, social logos, rocket-launch/diamond/hexagon/circles-three/mountains, magic-wand/squares-four/export"], "special_notes": "Fonts loaded from Google Fonts: Space Grotesk (weights 400-700, display) and Inter (weights 400-600, body/UI). Styled with Tailwind via CDN using a custom theme (colors ink #0a0a0f and coral #ff5a4d; fontFamily display = Space Grotesk, sans = Inter); icons via the Iconify iconify-icon web component (Phosphor 'ph:*' set). Body background #0a0a0f, text #f4f3ef, html scroll-behavior smooth. The mood must stay dark, warm and ember-toned (coral/amber on near-black), never cold blue, purple or neon. Copy and brand 'Forge' are placeholders; the transferable value is the dark warm-ember launch/waitlist STYLE + the centered-hero + glass-card + editorial-feature LAYOUT."}

Gateway Portal

No.1446 · 前端开发 · 社区/原生 · 来源：MotionSites (MIT) · EN 原文

Build a React + TypeScript (Vite) single-page hero called Auragate — an immersive, scroll-driven landing experience with a portal zoom-in effect, parallax mouse motion, and an arc-shaped testimonial card carousel. Use inline `style` objects (not CSS modules); Tailwind is only used for a few layout utility classes on one element. No UI libraries.

Fonts & `index.html`
In `index.html`, set `<title>Step Into Wonder</title>` and load these exact fonts in `<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=Viaoda+Libre&family=Imprima&family=Inter:wght@400;500;600;700;800&display=swap" rel="stylesheet" />
<link href="https://db.onlinewebfonts.com/c/e2bba9cf49b298d6be781c2274694ea3?family=Mr+Dafoe+Regular" rel="stylesheet" />
<link href="https://db.onlinewebfonts.com/c/0976a2619014c5855690b7509fab4c6e?family=Helvetica+Now+Display" rel="stylesheet" />
```
Two font families are used throughout:
- `'Helvetica Now Display', sans-serif` — all UI text, headings, body, buttons.
- `'Mr Dafoe Regular', cursive` — decorative script accents ("Discover", "Aura" in the wordmark, the large "A.").

Global CSS (`index.css`)
Tailwind directives at top. Then: universal `box-sizing: border-box`; `html, body` with `margin/padding: 0`, `background: #0a0608`, `scroll-behavior: auto`, `overflow-x: clip`; `body` font-family `'Helvetica Now Display', 'Inter', sans-serif` with `-webkit-font-smoothing: antialiased`. Add `html { scrollbar-gutter: stable; }` to prevent scrollbar layout shift. Include a `@keyframes bobUp` (0/100% translateY(0), 50% translateY(-6px)).

Assets (use these exact URLs)
```js
const PORTAL_BG = 'https://res.cloudinary.com/dy5er7kv5/image/upload/q_auto/f_auto/v1781046673/image_1_ksxfzb.png';
const WORLD_BG = 'https://images.higgs.ai/?default=1&output=webp&url=https%3A%2F%2Fd8j0ntlcm91z4.cloudfront.net%2Fuser_38xzZboKViGWJOttwIXH07lWA1P%2Fhf_20260609_231253_53c0854c-d13c-42c1-9fc0-17e87cd34091.png&w=1280&q=85';
```
`PORTAL_BG` is the foreground "portal" image you zoom into; `WORLD_BG` is the cloud/world background revealed behind it.

Layout structure (z-index stack on `#0a0608` root)
1. Fixed world background (`zIndex 0`): `position: fixed; inset: 0; overflow: hidden`. Inner `worldRef` div (`transformOrigin: 50% 50%`, `willChange: transform`) holding `WORLD_BG` `` at `width/height 100%`, `objectFit: cover`. Never scrolls.
2. **Fixed nav** (`zIndex 50`): see below.
3. **Intro track** (`zIndex 5`): `height: 160vh`, contains a `position: sticky; top: 0; height: 100vh; overflow: hidden` stage holding the portal + Scene 1 UI.
4. **Section 2** (`zIndex 10`): scrollable testimonial content + footer, rendered over the fixed world bg.

### Scroll & motion engine
- `useIsMobile()` hook: matchMedia `(max-width: 767px)`, initial `window.innerWidth < 768`.
- Track scroll progress 0→1 across the pinned intro: `progress = clamp(window.scrollY / (introRef.offsetHeight - innerHeight), 0, 1)`. Store in both state and a ref. Listen on `scroll` (passive) and `resize`.
- Helper math: `easeInOut(t) = t<0.5 ? 2t² : -1+(4-2t)t`, `lerp(a,b,t)`, `clamp`.
- **Mouse parallax** via `requestAnimationFrame`: read raw mouse as `(clientX/innerWidth - 0.5)2` (same for Y). Smooth toward it with `lerp(..., 0.07)` each frame. Invert (`rx=-mx, ry=-my`). Magnitudes `MAG = { world: 6, portal: 7 }`.
- Each frame, with `ep = easeInOut(scrollProgress)`:
- World: `scale = lerp(1, 1.18, ep)`, `transform: scale(s) translate(rx6px, ry6px)`.
- Portal: `scale = lerp(1, 7.5, ep)`, `transform: scale(s) translate(rx7px, ry*7px)`, `transformOrigin: '52% 38%'`.
- **Opacity transitions** driven by scrollProgress:
- `portalOpacity` = 1 until 0.66, then fades to 0 over the next 0.22 of scroll.
- `scene1Opacity` = `clamp(1 - scrollProgress/0.22, 0, 1)` (Scene 1 UI fades out in the first 22% of scroll). When `< 0.05`, set `pointerEvents: none`.
- `uiVisible` state flips true 600ms after mount; Scene 1 UI fades/slides up (`translateY(24px)→0`, `opacity 0→1`, `transition: opacity 1s ease, transform 1s ease`, `transitionDelay: 0.3s`).

### Navigation (fixed, top)
Flex row, space-between, padding `26px 40px` desktop / `18px 20px` mobile.
- **Left:** `` — inline-flex baseline-aligned: "Aura" in Mr Dafoe (36px / 30px mobile) + "gate" in Helvetica Now Display weight 500 (24px / 20px), `letterSpacing: -0.02em`, white.
- **Right:** a pill **"Watch Demo"** button (white bg, `#161616` text, weight 600, `borderRadius: 999px`, padding `11px 22px` / `9px 16px`, hover bg `#e6e6e6`) immediately followed by a round 42px (38px mobile) white hamburger button containing an SVG of two rounded horizontal lines (`stroke #161616`, width 1.6). Both transition bg `0.25s`.

### Scene 1 hero copy (bottom-anchored, fades out on scroll)
A bottom-aligned container with Tailwind classes `absolute inset-x-0 bottom-0 flex flex-col md:flex-row md:items-end md:justify-between gap-12 md:gap-20`, padding `0 44px 52px` (`0 22px 40px` mobile).
- **Column 1** (`maxWidth 560px`, left aligned): `

` Helvetica Now Display weight 500, white, `lineHeight 1.04`, `letterSpacing -0.02em`, `fontSize clamp(40px,4vw,58px)` (mobile `clamp(30px,9vw,44px)`). The word **"Discover"** is a leading span in Mr Dafoe, color `#9a9a9a`, `fontSize 1.15em`, `marginRight 0.12em`. Full text:
> *Discover* Living \
Digital Worlds \
Vivid, Alive, Endless

Below it a `

` (weight 400, `13–14px`, `lineHeight 1.6`, `color rgba(255,255,255,0.5)`, `maxWidth 340px`, `marginTop 18px`): "Experience immersive worlds with stories that blur the line between imagination, AI and living reality made for you."
- **Column 2** (hidden on mobile, flex, `gap 14px`): a large "A." in Mr Dafoe (64px, white, `lineHeight 0.8`) next to a `

` (weight 400, 11px, `color rgba(255,255,255,0.5)`, `maxWidth 150px`): "A studio is a trusted partner in your journey through wonderland."

### Section 2 — "Real wonders" + arc carousel
Centered column, `paddingTop 14vh` (12vh mobile), `paddingBottom 60px`.
- Centered `

` (weight 500, `clamp(34px,4vw,52px)`, white, `letterSpacing -0.02em`, `lineHeight 1.1`, `textShadow 0 2px 20px rgba(0,0,0,0.35)`): "Real wonders.\
Real worlds."
- Centered `

` (weight 500, 17px, `maxWidth 420px`, white, `textShadow 0 2px 16px rgba(0,0,0,0.3)`, `marginTop 16px`): "See how Auragate helps others, and find out what it can do for you."
- Below: `` with these 7 testimonial quotes (in order):
1. "It is amazing to see and feel the worlds I am stepping into each day."
2. "I have been feeling much more alive inside these living worlds, even on the long days."
3. "My wonder has been growing so fast that it is hard to believe the difference. Auragate gave me exactly the vision I needed."
4. "The first two scenes felt alive. I tried everything we dreamed up and it worked."
5. "The wonder of it all really moved me, it even brought a tear to my eyes every time."
6. "I finally feel immersed, like the worlds were built just for me."
7. "Stepping into it was effortless and the worlds have been unlike anything I dreamt."

### ArcCardCarousel (the signature component)
A fanned arc of cards centered on screen. State `active` starts at `floor(total/2)`. Constants (desktop / mobile): `cardW 300/230`, `cardH 420/320`, `stepX 295/170`, `dropY 52/34`, `tilt 8/7`, `containerH 560/460`. Container `position: relative; width: 100%; height: containerH`.

For each card compute signed position `pos` relative to `active` wrapped into `[-half, +half]`; `abs = |pos|`; `isCenter = pos===0`.
- **Transform:** `translateX(posstepX) translateY(absdropY + (isCenter ? 30 : 0)) rotate(postilt deg)` — this creates the downward-curving arc with outer cards dropped and rotated. (mobile center bump = 22.)
- `opacity`: center `1`, else `max(0, 0.6 - (abs-1)0.2)`. `zIndex: 100 - abs`. `pointerEvents: isCenter ? 'auto' : 'none'`. `transition: transform 0.55s cubic-bezier(0.22,1,0.36,1), opacity 0.55s ease`.
- **Card face:** `borderRadius 28px` (22 mobile).
- **Center card:** solid `background: rgb(247,251,255)`, `border 1px solid rgba(255,255,255,0.6)`, no backdrop filter, and `boxShadow: '0 8px 24px rgba(0,0,0,0.08), 0 0 50px rgba(255,255,255,0.55), 0 0 90px rgba(255,255,255,0.35)'` (soft dark + layered white glow). Quote text color `#2c2420`.
- **Inactive cards:** frosted glass — `background: linear-gradient(135deg, rgba(255,255,255,0.42) 0%, rgba(255,255,255,0.24) 100%)`, `backdropFilter: blur(18px) saturate(140%)` (+ `-webkit-`), `border 1px solid rgba(255,255,255,0.28)`, `boxShadow: 'inset 0 1px 1px rgba(255,255,255,0.45)'` (inset highlight only, no drop shadow). Quote text `rgba(255,255,255,0.85)`.
- Quote `

`: Helvetica Now Display weight 500, 17px (15 mobile), `lineHeight 1.5`, `letterSpacing -0.01em`, wrapped in typographic quotes `“…”`, centered, card uses flex center.
- **Nav buttons** (absolute, `bottom: -40px`, centered, `gap 10px`): two round 46px (42px mobile) buttons. Prev (`dir -1`): `background rgba(255,255,255,0.2)`, no shadow, white chevron-left SVG with a glowing `drop-shadow` filter (`rgba(255,255,255,0.7) 0 0 6px` + `rgba(255,255,255,0.4) 0 0 14px`). Next (`dir 1`): `background rgba(255,255,255,0.9)`, `boxShadow 0 6px 18px rgba(0,0,0,0.18)`, dark `#2c2420` chevron-right. Clicking advances `active` by `±1` with modulo wrap.

### Footer
`position: relative`, padding `160px 44px 52px` (`120px 22px 40px` mobile). CSS grid: desktop `1.4fr 1fr 1fr 1fr`, mobile `1fr 1fr` (`gap 40px` / `32px 20px`), `maxWidth 1280px`, centered. First cell (full-width on mobile) = `` + a `rgba(255,255,255,0.55)` 12px line "© 2026 Auragate". Then three columns:
- **Explore:** How it works, Features
- **Contact:** X (Twitter), hello@auragate.com
- **Legal:** Privacy Policy, Terms of Service

Each column: a `rgba(255,255,255,0.55)` weight-500 13px title (`marginBottom 18px`), then a `gap 12px` list of white weight-500 14px links (`textDecoration none`, hover `opacity 0.65`).

### Responsiveness
Everything keys off the `isMobile` boolean (767px breakpoint): reduced paddings, font clamps, smaller carousel constants, Column 2 of the hero hidden, footer grid collapses to 2 columns with the brand cell spanning full width.

Behavior summary
On load, the user sees the portal image full-screen with the hero copy at the bottom. Mouse movement gently parallaxes both layers in opposite directions. Scrolling through the 160vh pinned track zooms the portal in to 7.5× while the world background scales to 1.18×; the hero copy fades out first (by 22%), then the portal fades out (66%→88%), revealing the cloud world and the "Real wonders" testimonial carousel section, ending in the footer.

Focus AI 落地页

No.1447 · 前端开发 · 社区/原生 · 来源：MotionSites (MIT) · EN 原文

Build a Velorah landing page -- a premium, dark-themed single-page site for an electric RV/camper brand. Use React, TypeScript, Tailwind CSS, and the hls.js library. The page has 6 sections stacked vertically. The entire page background is pure black (hsl(0,0%,0%)). Use the font Instrument Serif (loaded from Google Fonts via <link> in index.html) for all headings and display text, and Inter for body text.

GLOBAL STYLES (index.css):

Import Google Fonts at the top:

@import
url('https://fonts.googleapis.com/css2?family=Instrumental+Serif&family=Inter:wght@400;500&display=swap');
CSS custom properties (dark-only, no light mode):

--background: 201 100% 13%
--foreground: 0 0% 100% (white)
--card: 0 0% 6%
--card-foreground: 0 0% 100%
--primary: 0 0% 100%
--primary-foreground: 0 0% 4%
--secondary: 0 0% 10%
--secondary-foreground: 0 0% 100%
--muted: 0 0% 10%
--muted-foreground: 240 4% 66%
--accent: 0 0% 10%
--accent-foreground: 0 0% 100%
--destructive: 0 84.2% 60.2%
--destructive-foreground: 0 0% 100%
--border: 0 0% 18%
--input: 0 0% 18%
--ring: 0 0% 100%
--radius: 0.5rem
Body uses font-family: var(--font-body) which maps to Inter.

Liquid Glass CSS class (.liquid-glass):

background: rgba(255, 255, 255, 0.01) with background-blend-mode: luminosity
backdrop-filter: blur(4px) and -webkit-backdrop-filter: blur(4px)
border: none
box-shadow: inset 0 1px 1px rgba(255,255,255,0.1)
position: relative; overflow: hidden
::before pseudo-element creates a gradient border effect:
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%)
Uses -webkit-mask with xor composite and mask-composite: exclude to create the border-only effect
Animations:

@keyframes
fade-rise: from opacity:0; translateY(24px) to opacity:1; translateY(0)
.animate-fade-rise: animation: fade-rise 0.8s ease-out both
.animate-fade-rise-delay: same with 0.2s delay
.animate-fade-rise-delay-2: same with 0.4s delay
index.html:
Load Instrument Serif from Google Fonts via <link> tags:

<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" />
HLS VIDEO COMPONENT:
Create an HlsVideo component that accepts a src prop. It uses hls.js -- if Hls.isSupported(), create an HLS instance, load the source, and attach to a <video> element. Otherwise fall back to native HLS if the browser supports application/vnd.apple.mpegurl. The video element has classes: absolute inset-0 w-full h-full object-cover z-0 and attributes: autoPlay loop muted playsInline.

VIDEO URLS (use these exact URLs):

Hero background: https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260324_151826_c7218672-6e92-402c-9e45-f1e0f454bdc4.mp4
Feature section right card: https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260314_131748_f2ca2a28-fed7-44c8-b9a9-bd9acdd5ec31.mp4
Big Statement section (HLS stream): https://stream.mux.com/9njY8qDfS02Uvbll018C8CK39p5EksK7mn02DDC1zYvppI.m3u8
CTA/Join section: https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260306_074215_04640ca7-042c-45d6-bb56-58b1e8a42489.mp4
SECTION 1 -- HERO:

Full-screen section (min-h-screen, relative, overflow-hidden)
Background: <video> tag (not HLS component) using Hero URL, with autoPlay loop muted playsInline, classes absolute inset-0 w-full h-full object-cover z-0
Bottom gradient overlay: absolute inset-x-0 bottom-0 h-[40%] bg-gradient-to-t from-black via-black/60 to-transparent z-[1]
Navbar (relative z-10, flex items-center justify-between, px-8 py-6, max-w-7xl mx-auto):
Left: Brand name "Velorah" with registered trademark superscript, text-foreground text-3xl tracking-tight, font-family 'Instrument Serif', serif
Center: Nav links (Home, Studio, About, Journal, Reach Us) -- hidden md:flex items-center gap-10 text-sm text-white. All links are text-white with hover:text-white/80 transition-colors
Right: "Begin Journey" button with liquid-glass rounded-full px-6 py-2.5 text-sm text-foreground transition-transform hover:scale-[1.03]
Hero content (relative z-10 flex flex-col items-center justify-center text-center px-6 pt-[28px] pb-40):
Heading: animate-fade-rise text-foreground text-5xl sm:text-7xl md:text-8xl leading-[0.95] tracking-[-2.46px] max-w-7xl font-normal, font-family 'Instrument Serif', serif. Text: Where dreams rise through the silence. -- the words "dreams" and "through the silence." are wrapped in <em className="not-italic text-white">
Paragraph: animate-fade-rise-delay text-white text-base sm:text-lg max-w-2xl mt-8 leading-relaxed. Text: "We're designing tools for deep thinkers, bold creators, and quiet rebels. Amid the chaos, we build digital spaces for sharp focus and inspired work."
Button: animate-fade-rise-delay-2 liquid-glass rounded-full px-14 py-5 text-base text-foreground mt-12 transition-transform hover:scale-[1.03] cursor-pointer. Text: "Begin Journey"
SECTION 2 -- TAGLINE:

flex items-center justify-center min-h-[70vh] px-6 bg-[hsl(0,0%,0%)]
Heading: text-foreground text-4xl sm:text-6xl md:text-7xl leading-[1.05] tracking-[-1.5px] text-center max-w-4xl, font-family 'Instrument Serif', serif. Text: "So you can feel at home,
anywhere."
SECTION 3 -- FEATURE SPLIT:

px-6 md:px-12 max-w-7xl mx-auto py-0
Grid: grid md:grid-cols-2 gap-4 rounded-2xl overflow-hidden min-h-[520px]
Left card (bg-card rounded-2xl p-10 md:p-14 flex flex-col justify-between):
Top: Small circle icon (inline-block w-8 h-8 rounded-full border border-border mb-8), heading "100% Electric" (text-foreground text-3xl sm:text-5xl tracking-[-1px] mb-6, Instrument Serif), paragraph "No more fossil fuels, buzzing generators, and propane tanks. Velorah has power for days." (text-muted-foreground text-sm sm:text-base leading-relaxed max-w-sm)
Bottom: Feature tabs array: [{label:"Living Electric",id:"electric"},{label:"Charge Faster",id:"charge"},{label:"Sleep Well",id:"sleep"},{label:"Acoustic Comfort",id:"acoustic"},{label:"5+ Seasons",id:"seasons"}]. Each tab is a <button> with text-xs px-4 py-2 rounded-full border transition-colors. Active state: bg-foreground text-primary-foreground border-foreground. Inactive: border-border text-muted-foreground hover:text-foreground. Use useState("electric") for active tab.
Progress bar: w-full h-0.5 bg-border rounded-full mb-6 with inner div h-full bg-foreground rounded-full at width: 35%
Button: liquid-glass rounded-full px-8 py-3 text-sm text-foreground transition-transform hover:scale-[1.03]. Text: "Explore the Velorah Flow"
Right card (relative rounded-2xl overflow-hidden min-h-[400px]): <video> using Feature section URL, absolute inset-0 w-full h-full object-cover, autoPlay loop muted playsInline
SECTION 4 -- BIG STATEMENT:

relative flex flex-col items-center justify-center min-h-[90vh] px-6 overflow-hidden
Background: <HlsVideo> component using the Mux HLS URL
Content (relative z-10 flex flex-col items-center text-center max-w-5xl):
Label: text-muted-foreground text-xs sm:text-sm tracking-[0.3em] uppercase mb-6. Text: "Intelligent Companion"
Heading: text-foreground text-4xl sm:text-6xl md:text-7xl leading-[1.05] tracking-[-1.5px], Instrument Serif. Text: "Adventure inspired.
App driven."
Paragraph: text-muted-foreground text-base sm:text-lg max-w-2xl mt-8 leading-relaxed. Text: "One app to control climate, lighting, navigation, and energy. Monitor every system in real time, automate your routines, and let Velorah learn how you live on the road."
Stats grid: grid grid-cols-2 sm:grid-cols-4 gap-8 sm:gap-12 mt-14. Four items (OTA / "Over-the-air updates", 360 degrees / "System visibility", AI / "Adaptive routines", 24/7 / "Remote monitoring"). Each stat value is text-foreground text-3xl sm:text-4xl font-light in Instrument Serif, label is text-muted-foreground text-xs sm:text-sm
Button: liquid-glass rounded-full px-10 py-4 text-sm text-foreground mt-12 transition-transform hover:scale-[1.03]. Text: "Discover the App"
SECTION 5 -- CTA / JOIN:

relative min-h-[90vh] flex flex-col items-center justify-center text-center px-6 overflow-hidden
Background: <video> using CTA URL, absolute inset-0 w-full h-full object-cover z-0, autoPlay loop muted playsInline
Content (relative z-10 flex flex-col items-center max-w-4xl):
Price label: text-muted-foreground text-xs sm:text-sm tracking-[0.3em] uppercase mb-4. Text: "Starting at $99,000"
Heading: text-foreground text-5xl sm:text-7xl md:text-8xl leading-[0.95] tracking-[-2px], Instrument Serif. Text: "Join the ride"
Paragraph: text-muted-foreground text-base sm:text-lg max-w-xl mt-6 leading-relaxed. Text: "Reserve your Velorah today with a fully refundable $500 deposit. Early adopters receive priority delivery and exclusive founding-member benefits."
Two buttons in a flex flex-col sm:flex-row items-center gap-4 mt-10:
"Preorder Now": liquid-glass rounded-full px-10 py-4 text-sm text-foreground transition-transform hover:scale-[1.03]
"Schedule a Tour": rounded-full px-10 py-4 text-sm text-muted-foreground border border-border hover:text-foreground hover:border-foreground/30 transition-colors
SECTION 6 -- FOOTER:

bg-[hsl(0,0%,0%)] border-t border-border px-6 md:px-12 py-16 max-w-7xl mx-auto
Grid: grid grid-cols-1 md:grid-cols-3 gap-12 mb-16
Col 1: Heading "Where home
meets the road." (text-foreground text-2xl sm:text-3xl leading-tight, Instrument Serif)
Col 2: Links list -- product, app, company, community, press, preorder. Each is text-sm text-muted-foreground hover:text-foreground transition-colors capitalize
Col 3: Text "Subscribe for the latest
Velorah updates." (text-sm text-muted-foreground mb-4) and a "Subscribe" button (liquid-glass rounded-full px-6 py-2.5 text-sm text-foreground transition-transform hover:scale-[1.03])
Bottom bar: flex flex-col md:flex-row items-center justify-between gap-4 pt-8 border-t border-border text-xs text-muted-foreground. Left: "Velorah" with registered trademark (text-foreground text-xl tracking-tight, Instrument Serif, <sup className="text-[8px]">). Right: "Privacy Policy" and "Terms & Conditions" links (hover:text-foreground transition-colors)
TAILWIND CONFIG: Standard shadcn/ui Tailwind config with all the HSL color variables mapped, darkMode: ["class"], tailwindcss-animate plugin, and accordion keyframes/animations.

DEPENDENCIES: React 18, react-router-dom, Tailwind CSS, shadcn/ui primitives, hls.js, lucide-react, @tanstack/react-query, tailwindcss-animate.

Yoga Coach

No.1448 · 前端开发 · 社区/原生 · 来源：MotionSites (MIT) · EN 原文

Build a full-screen, two-section yoga coach landing page using React + TypeScript + Vite + Tailwind CSS v4 + Motion (framer-motion successor) + hls.js. The page has NO scrolling -- it is exactly viewport-sized with two states: a hero video screen and a second "collection" screen that slides up after the video ends.

---

### TECH STACK & SETUP

- **Framework:** React 19 with TypeScript
- **Bundler:** Vite 6 with `@vitejs/plugin-react` and `@tailwindcss/vite`
- **Styling:** Tailwind CSS v4 (imported via `@import "tailwindcss"` in CSS)
- **Animation:** `motion` package (the `motion/react` import path)
- **Video Streaming:** `hls.js` for HLS (.m3u8) stream playback
- **Font:** Google Fonts "Anton" (display sans-serif, all-caps condensed)

---

### FONT & THEME CONFIGURATION

**index.css:**
```css
@import url('https://fonts.googleapis.com/css2?family=Anton&display=swap');
@import "tailwindcss";

@theme {
--font-anton: "Anton", sans-serif;
}
```

Use `font-anton` class throughout. All text is UPPERCASE.

---

### MEDIA ASSETS (EXACT URLS)

**Poster/Background Image (first screen, before video plays):**
```
https://images.higgs.ai/?default=1&output=webp&url=https%3A%2F%2Fd8j0ntlcm91z4.cloudfront.net%2Fuser_38xzZboKViGWJOttwIXH07lWA1P%2Fhf_20260624_053103_a6c6fd5c-8f43-4942-a487-e81c8f3cd0c1.png&w=1920&q=85
```

**Main Background Video (HLS stream, plays on button click):**
```
https://stream.mux.com/YyFgoUXUTVMiVMMLeQoq49tP00joMyEzoRmnEnk02H5rA.m3u8
```

**Three Card Videos (HLS streams, second section, play on hover):**
```
Card 1 (Left): https://stream.mux.com/S9BmS8DLYYowz7jr1BkN2PbAQm4bjEwijllpwmEB4xA.m3u8
Card 2 (Center): https://stream.mux.com/83kMTSKA4Xy01RTddNwDdt7OjCocQTCdKHY7AsD02Dlgc.m3u8
Card 3 (Right): https://stream.mux.com/c4KUkE6NHGljcc4M8458iMEdHAbUvsG5MTpqefzBYvo.m3u8
```

---

### SECTION 1: HERO VIDEO SCREEN (Full Viewport)

**Container:** `w-screen h-screen bg-black overflow-hidden select-none` with `onMouseMove` handler for parallax.

#### Background Video Layer
- A `<video>` element with the poster image URL as the `poster` attribute.
- HLS initialized via hls.js: create `new Hls({ enableWorker: false })`, call `hls.loadSource(url)` and `hls.attachMedia(video)`. Set `isLoaded=true` on `Hls.Events.MANIFEST_PARSED`. Fallback for Safari: set `video.src` directly (native HLS support).
- Video attributes: `muted`, `playsInline`, `preload="auto"`, no `controls`, `onEnded` triggers second screen.
- Inline style: `transform: scale(1.08) translate(${parallax.x}px, ${parallax.y}px)` -- parallax moves max 20px in each direction based on mouse position relative to window center.
- CSS: `w-full h-full object-cover transition-opacity duration-1000 ease-in-out origin-center`. Starts at `opacity-0`, transitions to `opacity-100` when loaded.
- An overlay div on top: `absolute inset-0 bg-black/10 pointer-events-none`.

#### Parallax Logic
- On mousemove, compute `x = (clientX - innerWidth/2) / (innerWidth/2)` (range -1 to 1), same for y.
- Set parallax state to `{ x: x * 20, y: y * 20 }`.

#### UI Overlay (absolute, full viewport, z-10, pointer-events-none)
- Padding: `p-6 sm:p-12 md:p-16`
- Layout: `flex flex-col justify-between`

#### Top-Left Slogan
- Container: `max-w-xs sm:max-w-sm md:max-w-md pointer-events-auto overflow-hidden`
- Animated with Motion: when `isPlaying` is true, animates `{ y: 250, opacity: 0 }`. When false: `{ y: 0, opacity: 1 }`.
- Transition: `duration: 1, ease: [0.16, 1, 0.3, 1]` (custom cubic bezier).
- Text: `font-anton text-white text-xl sm:text-2xl md:text-3xl lg:text-[2.2rem] leading-[0.95] tracking-wide uppercase`
- Content:
```
FIND YOUR FOCUS,
ARRANGE PRIVATE
YOGA SESSIONS, AND LIVE
THE MINDFUL WAY
```

#### Bottom Bar (w-full, flex col on mobile, flex row items-end justify-between on md+)

**Bottom-Left Title:**
- Container: `pointer-events-auto overflow-hidden`
- Animated: when `isPlaying`, `{ y: "150%", opacity: 0 }` else `{ y: 0, opacity: 1 }`.
- Transition: `duration: 1.1, ease: [0.16, 1, 0.3, 1]`
- Text: `font-anton text-white text-5xl sm:text-7xl md:text-8xl lg:text-[10rem] xl:text-[11rem] leading-none tracking-tight uppercase`
- Content:
```
HEY, I AM
JESSICA
```

**Bottom-Right Title:**
- Same animation/transition as bottom-left.
- Container: `text-left md:text-right pointer-events-auto overflow-hidden`
- Same text sizing.
- Content:
```
YOGA
COACH
```

**Center Circular "LET'S START" Button:**
- Position: `absolute left-1/2 bottom-[15%] md:bottom-2 -translate-x-1/2 z-20 pointer-events-auto`
- Wrapped in `<AnimatePresence>`. Only renders when `!isPlaying`.
- Exit animation: `{ scale: 0, opacity: 0 }` with `duration: 0.8, ease: [0.34, 1.56, 0.64, 1]` (bouncy overshoot bezier).
- Button classes: `w-28 h-28 sm:w-32 sm:h-32 md:w-36 md:h-36 rounded-full bg-black/90 hover:bg-black text-white font-anton text-xs sm:text-sm tracking-widest flex flex-col items-center justify-center gap-1 cursor-pointer transition-all duration-300 border border-white/20 hover:border-white/40 shadow-[0_0_50px_rgba(0,0,0,0.8)] backdrop-blur-sm relative overflow-hidden group`
- Inner radial glow: `absolute inset-0 bg-radial from-white/10 to-transparent opacity-60 group-hover:opacity-100 transition-opacity duration-300`
- Label: `relative z-10 font-bold tracking-wider` text "LET'S START"
- onClick: plays the video and sets `isPlaying=true`.

#### Play/Pause Logic
- Clicking button calls `video.play()`, sets `isPlaying=true`.
- When video ends (`onEnded`): sets `isPlaying=false`, `showSecondScreen=true`.

---

### SECTION 2: COLLECTION SCREEN (Slides Up Over Hero)

**Container:** A `motion.div` that covers the full viewport.
- `initial={{ y: "100%" }}`
- `animate={showSecondScreen ? { y: 0 } : { y: "100%" }}`
- `transition={{ type: "spring", damping: 32, stiffness: 220 }}`
- Classes: `absolute inset-0 w-full h-full z-30 flex flex-col items-center justify-start p-6 pt-24 sm:p-12 md:p-16`
- Background: `bg-gradient-to-b from-[#d5effd] via-[#aedcf9] to-[#8cd0f7]` (light blue gradient)

#### "BACK TO START" Button
- Position: `absolute top-[56px] left-1/2 -translate-x-1/2 z-40`
- Classes: `flex items-center font-anton text-black hover:text-black/70 text-lg sm:text-xl border border-black/20 hover:border-black/40 px-8 py-3 rounded-full bg-white/40 backdrop-blur-md transition-all duration-300 hover:scale-105 active:scale-95 cursor-pointer`
- onClick: pauses video, resets `currentTime=0`, hides second screen, resets `isPlaying`.

#### Content Body
- Container: `w-full flex-1 flex flex-col items-center justify-center relative select-none mt-20 sm:mt-16`

**Background Giant Text (behind cards):**
- `font-anton select-none pointer-events-none uppercase text-[13.5vw] sm:text-[16.9vw] leading-none text-center w-full absolute z-10 whitespace-nowrap`
- Gradient text effect: `bg-gradient-to-b from-white via-white/70 to-white/0 bg-clip-text text-transparent`
- Additional: `transform translate-y-4 filter drop-shadow-[0_2px_15px_rgba(255,255,255,0.1)]`
- Content: `COLLECTION #451`

#### Overlapping Card Deck
- Container: `flex items-center justify-center relative z-20 w-full max-w-5xl mt-6`
- Three `<YogaCard>` components overlapping with negative margins.

**Left Card:**
- `src`: Card 1 URL
- `initialRotation={-8}`
- `hoverOffset={{ x: -60, y: -25, rotate: -12, scale: 1.04 }}`
- `zIndexClass="z-20 hover:z-40"`
- `className="-mr-14 sm:-mr-22 md:-mr-28 lg:-mr-32"`

**Center Card:**
- `src`: Card 2 URL
- `initialRotation={0}`
- `hoverOffset={{ x: 0, y: -15, rotate: 0, scale: 1.08 }}`
- `zIndexClass="z-30 hover:z-40"`
- `className="scale-105"`

**Right Card:**
- `src`: Card 3 URL
- `initialRotation={8}`
- `hoverOffset={{ x: 60, y: -25, rotate: 12, scale: 1.04 }}`
- `zIndexClass="z-20 hover:z-40"`
- `className="-ml-14 sm:-ml-22 md:-ml-28 lg:-ml-32"`

---

### YOGACARD COMPONENT (src/components/YogaCard.tsx)

**Props:** `src: string`, `initialRotation: number`, `hoverOffset: { x, y, rotate, scale }`, `zIndexClass: string`, `className?: string`

**HLS Setup:**
- On mount, if `src.endsWith(".m3u8") && Hls.isSupported()`: create `new Hls({ enableWorker: false })`, `loadSource`, `attachMedia`. Destroy on unmount.
- Safari fallback: set `video.src` directly.

**Hover Behavior:**
- Track `isHovered` state via `onMouseEnter`/`onMouseLeave`.
- When hovered: `video.play()`. When unhovered: `video.pause()` and `video.currentTime = 0`.

**Card Styling:**
- `motion.div` with classes: `relative rounded-3xl overflow-hidden aspect-[9/16] w-72 sm:w-[21rem] md:w-[24rem] bg-white border-[6px] sm:border-[8px] border-white shadow-[0_15px_40px_rgba(0,0,0,0.22)] cursor-pointer origin-bottom select-none`
- `initial={{ rotate: initialRotation, x: 0, y: 0, scale: 1 }}`
- `whileHover` animates to `hoverOffset` values with `transition: { type: "spring", stiffness: 200, damping: 20 }`

**Video element:** `w-full h-full object-cover rounded-2xl pointer-events-none`, `muted`, `loop`, `playsInline`, `preload="auto"`.

**Inner ring overlay:** `absolute inset-0 rounded-2xl ring-1 ring-black/10 pointer-events-none`

---

### KEY ANIMATION SUMMARY

| Element | Trigger | Animation | Transition |
|---------|---------|-----------|------------|
| Top slogan | isPlaying | y: 0 to 250, opacity 1 to 0 | 1s, ease [0.16, 1, 0.3, 1] |
| Bottom titles (both) | isPlaying | y: 0 to "150%", opacity 1 to 0 | 1.1s, ease [0.16, 1, 0.3, 1] |
| Play button | isPlaying (exit) | scale 1 to 0, opacity 1 to 0 | 0.8s, ease [0.34, 1.56, 0.64, 1] |
| Second screen | showSecondScreen | y: "100%" to 0 | spring, damping 32, stiffness 220 |
| Cards hover | mouse enter/leave | rotate/x/y/scale to hoverOffset | spring, stiffness 200, damping 20 |
| Background video parallax | mousemove | translate up to 20px each axis | inline style (no transition) |
| Video opacity | loaded state | opacity 0 to 1 | CSS transition 1000ms ease-in-out |

---

### DEPENDENCIES (package.json)

```json
"dependencies": {
"@tailwindcss/vite": "^4.1.14",
"@vitejs/plugin-react": "^5.0.4",
"hls.js": "^1.6.16",
"motion": "^12.23.24",
"react": "^19.0.1",
"react-dom": "^19.0.1",
"vite": "^6.2.3"
}
```

---

### VITE CONFIG

Uses `@tailwindcss/vite` plugin and `@vitejs/plugin-react`. Path alias `@` resolves to project root.

Sup Neumorphism

No.1449 · 前端开发 · 社区/原生 · 来源：MotionSites (MIT) · EN 原文

<design-system>

# Neumorphism (Soft UI) Design System

## Design Philosophy

**Core Principles**: Neumorphism creates the illusion of physical depth through carefully balanced dual shadows—one light source from the top-left, one dark shadow falling bottom-right—on monochromatic backgrounds. Elements appear to either extrude from the surface (convex/raised) or be pressed into it (concave/inset). The effect mimics soft, pillowed physical objects with realistic lighting, creating a "molded from the same material" aesthetic. Every element feels like it's part of the same continuous surface, either raised or pressed, never flat.

**Vibe**: Tactile, calm, modern, and physically grounded. This is UI that feels like cooler matte plastic or soft ceramic. It is satisfying and tangible. The aesthetic is deliberately restrained, utilizing a cooler grey palette to feel fresh and distinct from "warm" legacy neumorphism. The design prioritizes accessibility with WCAG AA compliant contrast ratios while maintaining the soft aesthetic.

**Unique Visual Signatures**:

- **Dual opposing RGB shadows** (top-left light, bottom-right dark) using alpha transparency for smoother, more realistic blending than solid hex shadows.

- **Monochromatic "Cool Grey" discipline** `#E0E5EC`) where shadows and highlights do all the visual heavy lifting. No flat backgrounds.

- **Same-surface illusion**: Elements appear to be part of the same material as the background—molded, not placed.

- **Deep Inset States**: Wells for icons and inputs that feel significantly deeper `insetDeep`) than standard pressed states, creating true 3D depth.

- **Soft, Hyper-Rounded Corners**: `32px` for containers and `16px` for smaller elements, reinforcing the pillowed, organic aesthetic.

- **Complex Nested Depth**: Visuals formed by nesting elements (Extruded → Inset → Extruded) to showcase the physics of the system.

- **Smooth Micro-interactions**: 300ms transitions with scale, rotation, and shadow depth changes. Floating animations for ambient motion.

- **Mobile-First Responsive**: Fully responsive with touch-friendly targets (44px minimum), hamburger menu, and maintained neumorphic aesthetic on all screen sizes.

---

## Design Token System (The DNA)

### Colors (Light Mode - Cool Monochromatic)

The entire palette is built around a single base cool grey. **All visual interest comes from shadow play, not color variety.**

- **Background**: `#E0E5EC` — The base "cool clay" surface. Everything is molded from this.

- **Foreground**: `#3D4852` — Dark blue-grey for primary text. Excellent contrast (7.5:1 ratio) for optimal readability.

- **Muted**: `#6B7280` — Cool grey for secondary text with WCAG AA compliant contrast (4.6:1 ratio on the background).

- **Accent**: `#6C63FF` — Soft violet for interactive highlights. Used sparingly for CTAs and focus states.

- **Accent Light**: `#8B84FF` — Lighter violet for gradients and hover states.

- **Accent Secondary**: `#38B2AC` — Teal for success states, checkmarks, and positive indicators.

- **Border**: `transparent` — Neumorphism **never** uses borders; shadows define all edges.

**Shadow Colors** (CRITICAL - RGBA for Smoothness):

- **Shadow Light**: `rgba(255, 255, 255, 0.5-0.6)` — Pure white with transparency for the light-source shadow (top-left).

- **Shadow Dark**: `rgb(163, 177, 198, 0.6-0.7)` — A specific cool blue-grey shadow color that matches the background tone perfectly (bottom-right).

### Typography

- **Display Font**: **"Plus Jakarta Sans"** (500, 600, 700, 800) — Modern geometric sans for headlines. Applied via `.font-display` class.

- **Body Font**: **"DM Sans"** (400, 500, 700) — Clean, highly legible sans-serif for all body text and UI elements.

- **Weights**:

- Display Headings: `font-extrabold` (800) with `tracking-tight`

- Headings: `font-bold` (700) with `tracking-tight`

- Body: `font-normal` (400) to `font-medium` (500)

- **Colors**:

- Primary: `#3D4852` (excellent contrast)

- Secondary/Muted: `#6B7280` (WCAG AA compliant)

- **Scale**: Responsive scale from `text-sm` (14px) to `text-7xl` (72px) for hero headlines

### Radius

- **Container / Card**: `32px` `rounded-[32px]`) — Very soft, friendly corners.

- **Base / Button**: `16px` `rounded-2xl`).

- **Inner Elements**: `12px` `rounded-xl`) or `9999px` `rounded-full`).

### Shadows & Effects (The Physics)

Shadows are defined using `rgba` for a premium, smooth finish.

**Extruded (Standard)** — The default resting state:

~~~css

box-shadow: 9px 9px 16px rgb(163,177,198,0.6), -9px -9px 16px rgba(255,255,255,0.5);
~~~

- **Tailwind**: `shadow-[9px_9px_16px_rgb(163,177,198,0.6),-9px_-9px_16px_rgba(255,255,255,0.5)]`

**Extruded Hover (Lifted)** — For hover states:

~~~css

box-shadow: 12px 12px 20px rgb(163,177,198,0.7), -12px -12px 20px rgba(255,255,255,0.6);
~~~

- **Tailwind**: `shadow-[12px_12px_20px_rgb(163,177,198,0.7),-12px_-12px_20px_rgba(255,255,255,0.6)]`

**Extruded Small** — For smaller elements:

~~~css

box-shadow: 5px 5px 10px rgb(163,177,198,0.6), -5px -5px 10px rgba(255,255,255,0.5);
~~~

**Inset (Pressed)** — For standard pressed states or shallow wells:

~~~css

box-shadow: inset 6px 6px 10px rgb(163,177,198,0.6), inset -6px -6px 10px rgba(255,255,255,0.5);
~~~

**Inset Deep** — For inputs, active wells, and deep "carved" elements:

~~~css

box-shadow: inset 10px 10px 20px rgb(163,177,198,0.7), inset -10px -10px 20px rgba(255,255,255,0.6);
~~~

- **Tailwind**: `shadow-[inset_10px_10px_20px_rgb(163,177,198,0.7),inset_-10px_-10px_20px_rgba(255,255,255,0.6)]`

**Inset Small** — For subtle tracks or pills:

~~~css

box-shadow: inset 3px 3px 6px rgb(163,177,198,0.6), inset -3px -3px 6px rgba(255,255,255,0.5);
~~~

---

## Component Styling

### Buttons

- **Shape**: `rounded-2xl`

- **Transition**: `duration-300 ease-out`

- **Default State**: Extruded shadow.

- **Hover State**: `translate-y-[-1px]` (slight lift) + `Extruded Hover` shadow.

- **Active/Pressed State**: `translate-y-[0.5px]` (physical press) + `Inset Small` shadow (or standard inset depending on size).

- **Primary**: Accent background `#6C63FF`. Active state uses specific rgba inset shadows to work on color.

- **Secondary**: Background `#E0E5EC` (match page).

### Cards

- **Shape**: `rounded-[32px]` (Significant rounding).

- **Background**: `#E0E5EC`.

- **Padding**: `p-8` to `p-20` depending on prominence.

- **Hover**: `translate-y-[-2px]` + `Extruded Hover` shadow.

- **Feature**: Use nested depth. Card is Extruded -> Icon well inside is Inset Deep -> Icon inside is distinct.

### Inputs

- **Shape**: `rounded-2xl`.

- **Background**: `#E0E5EC`.

- **Default**: `Inset` shadow.

- **Focus**: `Inset Deep` shadow + Accent color Ring (offset by 2px with background color).

- **Placeholder**: `#A0AEC0`.

### Visual Decorations

- **Icon Wells**: Always use `Inset Deep` or `Inset` shadows for icon containers. This makes them look "drilled" into the card.

- **Decorations**: Use concentric circles of alternating Extruded and Inset shadows to create abstract, tactile background art.

---

## Layout Principles

- **Spacing**: Open and airy. Use `py-32` for hero sections to let the shadows breathe. `gap-12` for grids.

- **Container**: `max-w-7xl` for a wide, modern feel.

- **Background**: The page background must be `#E0E5EC` globally. No gradients on the root background.

## Animation & Micro-interactions

- **Duration**: `300ms` for UI elements, `500ms` for nested depth circles (weightier, physics-based feel).

- **Easing**: `ease-out` for natural deceleration.

- **Properties**: `transform` (scale, translateY, rotate), `box-shadow` (depth changes).

- **Hover Effects**:

- Cards: `-translate-y-1` (1px lift) + enhanced shadow depth

- Buttons: `-translate-y-1` on hover, `translate-y-0.5` on active (press down)

- Nested circles: `scale-105` (5% scale up) + `rotate-180` on inner element

- **Floating Animation**: Custom `@keyframes float` with 3s ease-in-out infinite loop for ambient motion on decorative elements.

- **Smooth Scrolling**: `scroll-behavior: smooth` for anchor navigation.

## Accessibility

- **Contrast**:

- Primary text `#3D4852` on `#E0E5EC`: 7.5:1 (WCAG AAA)

- Muted text `#6B7280` on `#E0E5EC`: 4.6:1 (WCAG AA)

- **Focus States**: Visible 2px accent rings `ring-2 ring-[#6C63FF]`) with 2px offset on `#E0E5EC` background. Mandatory on all interactive elements.

- **Touch Targets**: Minimum 44x44px for mobile (buttons use `h-12 w-12` = 48px minimum).

- **Mobile Navigation**: Hamburger menu with clear open/close states (Menu/X icons).

- **Keyboard Navigation**: Full keyboard support with visible focus indicators on all links and buttons.

## Responsive Design

- **Mobile First**: Design starts with mobile view and enhances upward.

- **Breakpoints**: `md:` (768px) for tablet, `lg:` (1024px) for desktop.

- **Mobile Adaptations**:

- Hero visual shows on all screens with `max-w-md` constraint on mobile

- Hamburger menu replaces desktop navigation below `md:` breakpoint

- Grid layouts collapse: 3-column → 1-column, 2-column → 1-column

- Font sizes scale down: `text-7xl` → `text-5xl` on mobile

- Padding reduces: `p-16` → `p-8` on cards

- **Navigation**: Sticky header with backdrop blur. Mobile menu slides down from header with extruded shadow.

---

## Anti-Patterns (Do Not Do)

- **Hard Hex Shadows**: Do not use opaque hex codes for shadows (e.g., `#A3B1C6`). Use `rgb(... 0.6)` for transparency and blending.

- **White Backgrounds**: Never use `bg-white` for cards. They must match the body background `#E0E5EC`.

- **Flat Buttons**: Buttons must have depth (shadows). No flat designs.

- **Sharp Corners**: `rounded-lg` is too sharp. Use `rounded-2xl` (16px) or `rounded-3xl` (24px) minimum.

- **Poor Contrast**: Never use `#8B95A5` or `#A0AEC0` for body text. Use `#6B7280` or darker for WCAG compliance.

- **Missing Focus States**: All interactive elements must have visible focus indicators.

- **Block Display for Fonts**: Use `display=swap` in Google Fonts URL, not `display=block`.

</design-system>

Ms Digital Director

No.1450 · 前端开发 · 社区/原生 · 来源：MotionSites (MIT) · EN 原文

Recreate this exact full-viewport portfolio landing page — pixel-perfect match.

═══════════════════════════════════════
TECH / STACK
═══════════════════════════════════════
- React + TypeScript + Tailwind CSS + Vite
- Icons: lucide-react (`Play`, `Menu`, `X`)
- Single full-screen page: `h-screen w-full overflow-hidden`
- Root: `relative h-screen w-full overflow-hidden bg-black text-white`

═══════════════════════════════════════
FONTS (exact)
═══════════════════════════════════════
Load in <head>:

1) Inter (Google Fonts) — body/default:
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap" rel="stylesheet">

2) basis33 (pixel/bitmap monospace) — for `.font-pixel`:
<link href="https://db.onlinewebfonts.com/c/d08bafd725a4cfc309efb5a88e0b63a5?family=basis33" rel="stylesheet">

CSS:
- body { font-family: 'Inter', sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
- .font-pixel { font-family: 'basis33', monospace; }

Where basis33 (font-pixel) is used:
- "ROBERTS" under ADAM
- "ENGINEERING" under DESIGN &
- Brand blurb under name
- Labels "What I Do" and "Services"
- Words "UNEXPECTED" and "EXPERIENCES" inside the hero headline (1.25em size)

Where Inter is used:
- Everything else (nav, ADAM, DESIGN &, body copy, showreel button, awards, footer)

Page title: "Adam Roberts - Design & Engineering"

═══════════════════════════════════════
BACKGROUND VIDEO (exact URL — do not substitute)
═══════════════════════════════════════
Full-bleed background <video>:
src="https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260725_114042_d2ed2a89-f2fa-449b-9609-da456344257b.mp4"

Attributes: autoPlay muted loop playsInline
Classes: absolute inset-0 h-full w-full object-cover lg:scale-[1.2]
(On large screens, video is scaled 120% for a slight crop/zoom)

All UI sits above video at z-10. No dark overlay — white text over the video.

═══════════════════════════════════════
LOGO (exact SVG)
═══════════════════════════════════════
White geometric “GP / Grilled Pixels” mark, 28×28, viewBox="0 0 256 256":
<svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" viewBox="0 0 256 256" fill="none">
  <path d="M 160 88 L 194 34 L 216 0 L 256 0 L 256 40 L 221.5 93.5 L 200 128 L 256 128 L 256 256 L 96 256 L 96 168 L 64.246 220 L 40 256 L 0 256 L 0 216 L 34 162 L 56 128 L 0 128 L 0 0 L 160 0 Z" fill="white" />
</svg>
Used in top-left navbar AND inside the mobile menu header.

═══════════════════════════════════════
LAYOUT STRUCTURE (top → bottom)
═══════════════════════════════════════
Outer content wrapper (above video):
relative z-10 flex h-full flex-col px-5 sm:px-6 md:px-10 lg:px-14

── 1. NAVBAR ──
flex items-center justify-between py-6

Left: logo SVG
Right desktop (md+): horizontal links, gap-8, text-sm tracking-wide
  ABOUT | PROCESS | PROJECTS | CATALOG | D.O.T | TALK
  Each: href="#", hover:opacity-70 transition-opacity
Right mobile (<md): hamburger button (Menu icon size 24), p-2 hover:opacity-70

── 2. FOUR-COLUMN META GRID ──
mt-4 grid grid-cols-2 lg:grid-cols-4 gap-4 sm:gap-6 lg:gap-8

COL 1 (left):
  h2 text-lg md:text-xl tracking-wide leading-tight
    Line1: "ADAM" (font-normal Inter)
    Line2: "ROBERTS" (font-pixel text-2xl md:text-3xl)
  Then: * asterisk at text-[10px] text-white/50 mt-3
  Then brand blurb font-pixel mt-1 text-xs text-white/60 leading-relaxed, line breaks EXACTLY:
    Grilled Pixels is my
    personal brand - I came up
    with it in 2004 based on
    "cooking up ideas"

COL 2 (text-right on mobile 2-col, text-left on lg):
  h2 same sizing
    Line1: "DESIGN &" (Inter font-normal)
    Line2: "ENGINEERING" (font-pixel text-2xl md:text-3xl)

COL 3:
  Label: "What I Do" — text-base tracking-widest text-white/50 uppercase mb-3 font-pixel
  Body: text-sm text-white/90 leading-relaxed max-w-[220px]
    "I create the top 1% of experiences for brands and digital products"

COL 4 (text-right on mobile 2-col, text-left on lg):
  Label: "Services" — same label styles as What I Do
  ul text-sm text-white/90 leading-relaxed space-y-0.5:
    - Branding
    - Creative Direction & Strategy
    - UX/UI Design
    - Web Development (React/Nextjs)
    - 3D, WebGL / Photography
    - Video & Animation

── 3. FLEX SPACER ──
<div className="flex-1" />  ← pushes bottom block to viewport bottom

── 4. BOTTOM SECTION (pb-4) ──

ROW A — grid grid-cols-1 lg:grid-cols-2 gap-4 sm:gap-6 items-end

LEFT — Hero headline:
  h1: text-3xl sm:text-4xl md:text-5xl lg:text-[3.75rem] xl:text-[4.25rem]
      tracking-wide uppercase font-normal
      inline style: lineHeight: 0.72
  Exact line breaks:
    I BRING THE
    UNEXPECTED TO     ← "UNEXPECTED" is font-pixel font-normal text-[1.25em] inline-block leading-none align-baseline
    BRAND & DIGITAL
    EXPERIENCES       ← "EXPERIENCES" same pixel treatment as UNEXPECTED

RIGHT — column flex flex-col gap-4 sm:gap-6 justify-end:
  A) PLAY SHOWREEL button (self-start):
     flex items-center gap-3
     border border-white/30 px-6 py-3
     backdrop-blur-sm bg-white/5
     hover:bg-white/10 transition-colors
     Play icon: lucide Play size={14} fill="white"
     Label: text-sm tracking-wider "PLAY SHOWREEL"

  B) Awards row (self-start on mobile, lg:self-end):
     flex flex-wrap items-stretch gap-2 sm:gap-3 text-sm text-white/80
     Three dark chips, each: bg-[#0B0B0B] px-3 sm:px-4 py-2, flex items-center gap-2
       1) "FWA" font-bold text-sm sm:text-base tracking-tight + "x1" text-white/50 text-xs
       2) "W." font-bold text-lg sm:text-xl + "x7" text-white/50 text-xs
       3) "CSSDesignAwards" font-bold text-[10px] sm:text-xs tracking-tight + "x22" text-white/50 text-xs

ROW B — footer strip:
  mt-4 sm:mt-5 grid grid-cols-1 sm:grid-cols-2 gap-2 sm:gap-4 pt-4
  Left: text-xs text-white/60
    "Open to freelance, contract or full-time. "
    then link "Schedule a call" — text-red-500 hover:text-red-400 transition-colors href="#"
  Right: text-xs text-white/60 sm:text-right
    "5 full cases • 82 archive fragments • 22 catalog items"
    (use &bull; or • between parts)

═══════════════════════════════════════
MOBILE FULLSCREEN MENU
═══════════════════════════════════════
State: menuOpen boolean

Overlay: fixed inset-0 z-50 bg-black/95 backdrop-blur-md flex flex-col
Transition: transition-all duration-500 ease-[cubic-bezier(0.16,1,0.3,1)]
  open:  opacity-100 pointer-events-auto
  closed: opacity-0 pointer-events-none

Header: flex items-center justify-between px-6 py-6
  Left: same logo SVG
  Right: X button (size 24) closes menu — p-2 hover:opacity-70

Nav: flex flex-col items-center justify-center flex-1 gap-8
  Same 6 links as desktop, text-2xl tracking-widest
  Staggered entrance when opening:
    transition-all duration-500 ease-[cubic-bezier(0.16,1,0.3,1)]
    open:  opacity-100 translate-y-0
    closed: opacity-0 translate-y-4
    transitionDelay when open: `${100 + i * 60}ms` (i = 0..5) → 100,160,220,280,340,400ms
    when closed: delay 0ms
  Clicking a link closes the menu

═══════════════════════════════════════
ANIMATIONS / INTERACTIONS SUMMARY
═══════════════════════════════════════
1. Background video: continuous autoplay loop, muted
2. Nav link hover: opacity → 70%
3. Showreel button hover: bg white/5 → white/10
4. Schedule a call hover: red-500 → red-400
5. Mobile menu overlay: 500ms cubic-bezier(0.16,1,0.3,1) fade
6. Mobile menu links: staggered fade+slide-up (60ms steps, start 100ms)
7. Hamburger / close icon hover: opacity 70%
8. NO scroll (overflow-hidden, h-screen) — single locked viewport composition
9. NO page load entrance animation on desktop content (static on paint)
10. Video scales to 1.2× at lg breakpoint

═══════════════════════════════════════
COLOR TOKENS
═══════════════════════════════════════
- Page bg: #000000 (black)
- Primary text: #ffffff
- Muted: white/90, white/80, white/60, white/50
- Accent link: Tailwind red-500 (Schedule a call)
- Award chips: #0B0B0B
- Showreel button: border white/30, fill white/5, blur
- Mobile overlay: black/95 + backdrop blur

═══════════════════════════════════════
RESPONSIVE BREAKPOINTS (Tailwind defaults)
═══════════════════════════════════════
- < md: hamburger + 2-col meta grid; awards/showreel stack under headline
- md+: desktop nav links
- lg+: 4-col meta grid; 2-col bottom (headline | showreel+awards); video scale 1.2
- sm/md/lg/xl: progressive padding and headline size as listed above

═══════════════════════════════════════
DO NOT
═══════════════════════════════════════
- Do not add cards, purple gradients, cream backgrounds, or extra sections
- Do not change copy, award counts, or line breaks
- Do not replace the CloudFront video URL
- Do not use Inter for pixel words — must be basis33
- Do not add scrolling or a second viewport section
```

Ms Prisma 落地页

No.1451 · 前端开发 · 社区/原生 · 来源：MotionSites (MIT) · EN 原文

Create a React + Vite + TypeScript + Tailwind CSS landing page for a creative studio called "Prisma". The page has 3 sections: Hero, About, and Features. Use framer-motion for animations and lucide-react for icons. The design is dark, moody, and cinematic with a warm cream color palette.

FONTS

Load two Google Fonts in index.html:

Almarai (weights: 300, 400, 700, 800) -- used as the global default font
Instrument Serif (italic only) -- used for italic accent text in the About section
In index.css, set the global font family:


* { font-family: 'Almarai', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', sans-serif; }
In tailwind.config.js, extend:

colors.primary: #DEDBC8 (warm cream, used for all primary text and accents)
fontFamily.serif: ['"Instrument Serif"', 'serif']
COLOR SYSTEM

Background: black (#000000) globally, #101010 for the About card, #212121 for Features cards
Primary text color: #E1E0CC (applied via inline style, slightly different from Tailwind primary)
Tailwind primary: #DEDBC8 (used for utility classes like text-primary, text-primary/70)
Gray text: text-gray-400, text-gray-500
Navbar link color: rgba(225, 224, 204, 0.8) with hover: #E1E0CC
CUSTOM CSS UTILITIES (index.css)

Two SVG noise texture utilities:

.noise-overlay: fractal noise (baseFrequency: 0.85, numOctaves: 3) used as overlay on hero video
.bg-noise: fractal noise (baseFrequency: 0.9, numOctaves: 4) used as subtle background in Features section
Both use inline SVG data URIs with feTurbulence filter.

SECTION 1: HERO

Full viewport height (h-screen). The entire section has p-4 md:p-6 padding creating an inset effect. Inside is a container with rounded-2xl md:rounded-[2rem] and overflow-hidden.

Background video:

URL: https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260405_170732_8a9ccda6-5cff-4628-b164-059c500a2b41.mp4
autoPlay loop muted playsInline, object-cover, fills entire container
Noise overlay on top: .noise-overlay with opacity-[0.7] mix-blend-overlay pointer-events-none
Gradient overlay: bg-gradient-to-b from-black/30 via-transparent to-black/60
Navbar:

Absolutely positioned at top center
Black background pill that hangs from top edge: bg-black rounded-b-2xl md:rounded-b-3xl px-4 py-2 md:px-8
5 nav items: "Our story", "Collective", "Workshops", "Programs", "Inquiries"
Text size: text-[10px] sm:text-xs md:text-sm
Gap between items: gap-3 sm:gap-6 md:gap-12 lg:gap-14
Link color: rgba(225, 224, 204, 0.8), hover: #E1E0CC (inline styles)
Hero Content (bottom-aligned):

Absolutely positioned at bottom: absolute bottom-0 left-0 right-0
12-column grid: left 8 columns for heading, right 4 columns for text + button
Giant heading "Prisma" using WordsPullUp component:
Responsive sizes: text-[26vw] sm:text-[24vw] md:text-[22vw] lg:text-[20vw] xl:text-[19vw] 2xl:text-[20vw]
font-medium leading-[0.85] tracking-[-0.07em]
Color: #E1E0CC
Has a superscript asterisk (*) on the final "a" of "Prisma": positioned with absolute top-[0.65em] -right-[0.3em] text-[0.31em]
Pull-up animation: each word slides up from y:20 with staggered delay of 0.08s, triggered by useInView
Description paragraph (right column):
"Prisma is a worldwide network of visual artists, filmmakers and storytellers bound not by place, status or labels but by passion and hunger to unlock potential through our unique perspectives."
text-primary/70 text-xs sm:text-sm md:text-base, line-height: 1.2
Framer motion: fade up from y:20, delay 0.5s, custom ease [0.16, 1, 0.3, 1]
CTA Button "Join the lab":
Pill shape: bg-primary rounded-full
Black text, font-medium, text-sm sm:text-base
Right side has a black circle (bg-black rounded-full w-9 h-9 sm:w-10 sm:h-10) containing a white/cream ArrowRight icon
Hover: gap increases (hover:gap-3), circle scales up (group-hover:scale-110)
Framer motion: fade up from y:20, delay 0.7s, same custom ease
SECTION 2: ABOUT

bg-black, padded section with centered content
Inner card: bg-[#101010], centered text, max-w-6xl
Top: small label "Visual arts" in text-primary, text-[10px] sm:text-xs
Main heading uses WordsPullUpMultiStyle component with 3 segments:
"I am Marcus Chen," -- font-normal (Almarai)
"a self-taught director." -- italic font-serif (Instrument Serif italic)
"I have skills in color grading, visual effects, and narrative design." -- font-normal
Container: text-3xl sm:text-4xl md:text-5xl lg:text-6xl xl:text-7xl max-w-3xl mx-auto leading-[0.95] sm:leading-[0.9]
Each word animates in with pull-up effect (y:20 to y:0), staggered at 0.08s delay
Body paragraph below with scroll-linked character opacity animation:
Text: "Over the last seven years, I have worked with Parallax, a Berlin-based production house that crafts cinema, series, and Noir Studio in Paris. Together, we have created work that has earned international acclaim at several major festivals."
text-[#DEDBC8], text-xs sm:text-sm md:text-base
Each character is individually wrapped in an AnimatedLetter component
Uses useScroll with target offset ['start 0.8', 'end 0.2']
Each character's opacity transitions from 0.2 to 1 based on scroll position, creating a progressive text reveal effect
Character staggering: charProgress = index / totalChars, range [charProgress - 0.1, charProgress + 0.05]
SECTION 3: FEATURES

min-h-screen bg-black, with subtle .bg-noise overlay at opacity-[0.15]
Header text uses WordsPullUpMultiStyle:
Line 1: "Studio-grade workflows for visionary creators." in cream
Line 2: "Built for pure vision. Powered by art." in text-gray-500
Both: text-xl sm:text-2xl md:text-3xl lg:text-4xl font-normal
4-column card grid (lg:h-[480px], gap-3 sm:gap-2 md:gap-1):

Each card has staggered entrance animation: scale from 0.95 + fade in, triggered by useInView (once, margin "-100px"), staggered at 0.15s intervals with ease [0.22, 1, 0.36, 1].

Card 1 - Video card: Full video background (URL: https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260406_133058_0504132a-0cf3-4450-a370-8ea3b05c95d4.mp4), autoPlay loop muted playsInline, object-cover. Bottom text: "Your creative canvas." in #E1E0CC.

Card 2 - "Project Storyboard." (01): bg-[#212121], small image icon at top (https://images.higgs.ai/?default=1&output=webp&url=https%3A%2F%2Fd8j0ntlcm91z4.cloudfront.net%2Fuser_38xzZboKViGWJOttwIXH07lWA1P%2Fhf_20260405_171918_4a5edc79-d78f-4637-ac8b-53c43c220606.png&w=1280&q=85, 10x10 sm:12x12 rounded), title with number, 4 checklist items with green Check icons, "Learn more" link with rotated arrow (-45deg).

Card 3 - "Smart Critiques." (02): Same layout as Card 2. Icon: https://images.higgs.ai/?default=1&output=webp&url=https%3A%2F%2Fd8j0ntlcm91z4.cloudfront.net%2Fuser_38xzZboKViGWJOttwIXH07lWA1P%2Fhf_20260405_171741_ed9845ab-f5b2-4018-8ce7-07cc01823522.png&w=1280&q=85. 3 checklist items about AI analysis, creative notes, tool integrations.

Card 4 - "Immersion Capsule." (03): Same layout. Icon: https://images.higgs.ai/?default=1&output=webp&url=https%3A%2F%2Fd8j0ntlcm91z4.cloudfront.net%2Fuser_38xzZboKViGWJOttwIXH07lWA1P%2Fhf_20260405_171809_f56666dc-c099-4778-ad82-9ad4f209567b.png&w=1280&q=85. 3 checklist items about notification silencing, ambient soundscapes, schedule syncing.

All feature card checklist items use Check icon from lucide-react in text-primary color, with text-gray-400 description text. "Learn more" buttons use ArrowRight rotated -45deg.

SHARED ANIMATION COMPONENTS

WordsPullUp: Splits text by spaces, each word is a motion.span that slides up (y:20 to 0) with staggered delay. Uses useInView (once: true). Supports showAsterisk prop that adds a superscript * after the last character "a" of the final word.

WordsPullUpMultiStyle: Takes an array of {text, className} segments, splits all into individual words preserving per-word className. Same pull-up animation. Words are wrapped in inline-flex flex-wrap justify-center.

RESPONSIVE BREAKPOINTS

The page is fully responsive across mobile, tablet, and desktop. Cards in Features switch from 1-col (mobile) to 2-col (md) to 4-col (lg). Hero text scales from 26vw down to 19vw. Navbar items compress with smaller gaps on mobile. All padding, font sizes, and spacing use Tailwind responsive prefixes (sm/md/lg/xl/2xl).

TECH STACK

Vite + React 18 + TypeScript
Tailwind CSS 3
framer-motion (for all animations: pull-up text, fade-in, scroll-linked opacity, card entrances)
lucide-react (ArrowRight, Check icons)

Naturecore SaaS

No.1452 · 前端开发 · 社区/原生 · 来源：MotionSites (MIT) · EN 原文

Build a full-screen hero landing page for a renewable energy company using React, Vite, TypeScript, Tailwind CSS, Framer Motion, and Lucide React icons. Use the Inter font from Google Fonts (weights 300-900). The page background is `#F7F7F7`.

## Dependencies

```
react, react-dom, framer-motion, lucide-react, clsx, tailwind-merge
```

## Global CSS (`index.css`)

Import Inter from Google Fonts: `https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap`

Set `font-family: 'Inter', sans-serif` on the body.

Add a `.liquid-glass` utility class:
- `background: rgba(255, 255, 255, 0.01)` with `background-blend-mode: luminosity`
- `backdrop-filter: blur(4px)` and `-webkit-backdrop-filter: blur(4px)`
- No border, `box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.1)`, `position: relative`, `overflow: hidden`
- A `::before` pseudo-element with `position: absolute; inset: 0; border-radius: inherit; padding: 1.4px` and a vertical linear gradient of white at varying opacities (`rgba(255,255,255,0.45)` at 0%/100%, `rgba(255,255,255,0.15)` at 20%/80%, `rgba(255,255,255,0)` at 40%/60%`), masked with `-webkit-mask-composite: xor` / `mask-composite: exclude` to create a glass border effect.

Add a `.tracking-tight-custom` utility with `letter-spacing: -0.06em`.

Add a `@keyframes scroll` animation: `0% { transform: translateX(0) }` to `100% { transform: translateX(-50%) }`.

## Utility: `cn()` helper

A small utility combining `clsx` and `tailwind-merge`:

```ts
import { type ClassValue, clsx } from 'clsx';
import { twMerge } from 'tailwind-merge';
export function cn(...inputs: ClassValue[]) {
return twMerge(clsx(inputs));
}
```

## Component: `<StaggeredFade>`

Props: `text: string`, `className?: string`, `style?: React.CSSProperties`.

Renders a `<motion.h1>` that splits the `text` into individual characters. Each character is a `<motion.span>` with a staggered fade-in animation: each letter delays by `i * 0.03` seconds with `0.3s` duration, transitioning from `opacity: 0` to `opacity: 1`. Uses `useInView` with `once: true` to trigger on scroll into view. The base className merges `'text-xl text-center sm:text-4xl font-bold tracking-tighter md:text-6xl md:leading-[4rem]'` with the passed `className` using the `cn()` helper.

## Component: `<FadeDown>`

Props: `children: React.ReactNode`, `delay?: number` (default `0`), `className?: string`.

A `<motion.div>` wrapper that animates from `{ opacity: 0, y: -20 }` to `{ opacity: 1, y: 0 }` over `0.6s` with the specified delay. Triggers once on entering the viewport via `useInView({ once: true })`.

## Component: `<BoomerangVideoBg>`

This is the key background video component that creates a forward/reverse boomerang loop effect.

**Video URL:** `https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260527_061033_0f369854-8849-4214-8787-9181479c8121.mp4`

**How it works:**

1. Renders a `<video>` element (autoPlay, muted, playsInline, crossOrigin="anonymous") that plays through once (NOT looped).
2. While the video plays, it captures every frame into offscreen `<canvas>` elements using `requestVideoFrameCallback` (with a `setInterval` at 60fps fallback for unsupported browsers). Each captured frame is scaled to a max width of 960px maintaining aspect ratio.
3. When the video `ended` event fires, it sets a `ready` state to `true`.
4. Once ready, hides the `<video>` and shows a visible `<canvas>`. A `requestAnimationFrame` loop plays back the captured frames at 30fps in a boomerang pattern: forward through all frames, then reverse back to the start, repeating infinitely.
5. The outer wrapper div has classes: `absolute inset-0 w-full h-full`.
6. Both the `<video>` and `<canvas>` have classes: `w-full h-full object-cover`.
7. Visibility is toggled via `style={{ display: ready ? 'none' : 'block' }}` on the video and the inverse on the canvas.

## Main Layout (`App.tsx`)

The root is `<div className="h-screen flex flex-col bg-[#F7F7F7] relative overflow-hidden">`.

### Video Background

The `<BoomerangVideoBg>` is placed inside a container: `<div className="fixed inset-0 z-0" style={{ top: 200 }}>`. This pushes the video 200px down from the top of the viewport so it sits behind the lower portion of the hero.

### Navigation Bar

A `<nav>` with classes `flex items-center justify-between px-4 md:px-8 py-4 md:py-6 relative z-10`.

**Left side:**
- A logo image: `<img src="/image.png" alt="LGPSM" className="h-6 md:h-7" />` (user's own logo PNG)
- A language selector: `<Globe>` icon (lucide-react, `w-4 h-4`) + "En" text, `text-sm text-black`

**Center (hidden on mobile, `hidden lg:flex items-center gap-8`):**
- Nav links: "Renewables", "Strategies", "Photovoltaic", "Wind Systems", "Packages"
- Each link: `text-sm text-gray-700 hover:text-gray-900`

**Right side:**
- "Sign In" link (hidden on mobile `hidden sm:block`): `text-sm text-gray-700 hover:text-gray-900 border border-black/20 px-4 md:px-6 py-2 md:py-2.5 rounded-full transition-colors`
- "Clean Energy" button: `px-4 md:px-6 py-2 md:py-2.5 bg-black text-white text-sm rounded-full hover:bg-gray-900 transition-colors`

### Hero Content

Wrapper: `<div className="flex-1 flex flex-col items-center px-4 md:px-8 relative pt-4 md:pt-8">` with an inner `<div className="relative z-10 flex flex-col items-center">`.

**Badge pill** (top, centered):
- Classes: `mb-3 px-3 md:px-4 py-1.5 md:py-2 border border-black/20 rounded-full flex items-center gap-1.5 md:gap-2 text-xs md:text-sm`
- Content: sun emoji, arrow, globe emoji, text "Delivering power innovate" (hidden on mobile, shortened to "Power innovate" on small screens), arrow, plant emoji

**Main Heading** (using `<StaggeredFade>`):
- Text: `"Renewable Power For Tomorrow, Infinite Clean Solutions"`
- Classes: `text-3xl sm:text-4xl md:text-5xl lg:text-6xl leading-tight font-normal text-center max-w-5xl mb-3 md:mb-4 px-4`
- Color: `#31463B` (dark green) via inline style

**Subheading** (wrapped in `<FadeDown delay={0.5}>`):
- `<p>` with classes: `text-center text-gray-600 max-w-3xl mb-4 md:mb-5 text-sm md:text-base lg:text-lg px-4`
- Text: `"Sustainable Energy Platform. Engineering, deploying, and servicing solar arrays for homes, businesses, and large-scale operations worldwide."`

**CTA Buttons** (wrapped in `<FadeDown delay={0.7}>`):
- Wrapper classes: `flex flex-col sm:flex-row items-center gap-3 md:gap-4 px-4`
- **Primary button** ("Explore Options"):
- Classes: `pl-4 md:pl-6 pr-2 py-2 bg-gradient-to-r from-[#3C684D] to-[#4A7144] text-white rounded-full flex items-center gap-2 hover:opacity-90 transition-opacity text-sm md:text-base`
- Contains a `<Leaf>` icon (`w-4 h-4`), the text, and a circular icon container (`w-7 h-7 md:w-8 md:h-8 rounded-full`) with inline style `background: linear-gradient(59deg, #567A5E 0%, #78A873 100%)` containing a `<Play>` icon (`w-3 h-3 md:w-4 md:h-4 fill-white text-white`)
- **Secondary button** ("Start Network"):
- Classes: `pl-4 md:pl-6 pr-2 py-2 bg-white text-gray-700 rounded-full flex items-center gap-2 hover:bg-gray-50 transition-colors text-sm md:text-base`
- Contains the text and a circular icon container with inline style `background: linear-gradient(59deg, #EEEEEE 0%, #CBCBCB 100%)` containing an `<ArrowRight>` icon (`w-3 h-3 md:w-4 md:h-4 fill-black text-black`)

## Color Palette Summary

| Token | Value |
|---|---|
| Page background | `#F7F7F7` |
| Heading text | `#31463B` |
| Body text | Tailwind `gray-600` |
| Nav text | Tailwind `gray-700` |
| Primary CTA gradient | `#3C684D` to `#4A7144` |
| Primary CTA icon gradient | 59deg, `#567A5E` to `#78A873` |
| Secondary CTA icon gradient | 59deg, `#EEEEEE` to `#CBCBCB` |
| Nav button | `bg-black` / `text-white` |
| Sign-in border | `border-black/20` |

## Responsive Breakpoints

All elements use Tailwind's default breakpoints (`sm:`, `md:`, `lg:`). Nav links are hidden below `lg`. Sign-in button hidden below `sm`. CTA buttons stack vertically below `sm`. Font sizes scale from `text-3xl` to `lg:text-6xl`. Padding scales from `px-4` to `md:px-8`.

Mindloop 落地页

No.1453 · 前端开发 · 社区/原生 · 来源：MotionSites (MIT) · EN 原文

Build a dark monochrome landing page called Mindloop — a newsletter/content platform. Use React + Vite + TypeScript + Tailwind CSS + shadcn/ui + Framer Motion. Fonts: Inter (sans) and Instrument Serif (serif, used for italic accent words). The entire theme is pure black (#000) background with white foreground — no colors or gradients beyond monochrome. Install hls.js and framer-motion.

Design System (index.css)
All CSS variables in HSL (no hsl() wrapper in the variable, just the values):

--background: 0 0% 0%
--foreground: 0 0% 100%
--card: 0 0% 5%
--card-foreground: 0 0% 100%
--primary: 0 0% 100%
--primary-foreground: 0 0% 0%
--secondary: 0 0% 12%
--secondary-foreground: 0 0% 85%
--muted: 0 0% 15%
--muted-foreground: 0 0% 65%
--accent: 170 15% 45%
--accent-foreground: 0 0% 100%
--border: 0 0% 20%
--input: 0 0% 18%
--ring: 0 0% 40%
--hero-subtitle: 210 17% 95%
Liquid Glass Effect (global CSS class .liquid-glass)

.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;
}
Animation Pattern
All sections use a reusable fadeUp helper with staggered delays:

const fadeUp = (delay: number) => ({
initial: { opacity: 0, y: 20 },
whileInView: { opacity: 1, y: 0 },
viewport: { once: true, margin: "-100px" },
transition: { duration: 0.6, delay, ease: "easeOut" },
});

Page Structure (top to bottom)
1. Navbar (fixed, transparent)
Left: Logo (concentric circles icon — outer w-7 h-7 with border-2 border-foreground/60, inner w-3 h-3 with border border-foreground/60) + "Mindloop" bold text.
Center-left: Nav links ["Home", "How It Works", "Philosophy", "Use Cases"] separated by • dots. Links are text-muted-foreground hover:text-foreground.
Right: 3 social icons (Instagram, Linkedin, Twitter from lucide-react) in liquid-glass circular buttons (w-10 h-10 rounded-full).
No background — fully transparent, fixed top-0 z-50, padding px-8 md:px-28 py-4.

2. Hero Section (full viewport height)
Background: autoplaying looping muted MP4 video covering the entire section.
Video URL: https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260325_120549_0cd82c36-56b3-4dd9-b190-069cfc3a623f.mp4
Bottom gradient: h-64 bg-gradient-to-t from-background to-transparent for smooth fade to black.
Content (centered, z-10, pt-28 md:pt-32):
Avatar row: 3 overlapping circular avatars (-space-x-2, w-8 h-8 rounded-full border-2 border-background) + "7,000+ people already subscribed" in text-muted-foreground text-sm.
Heading: text-5xl md:text-7xl lg:text-8xl font-medium tracking-[-2px] — "Get Inspired with Us" where "Inspired" is font-serif italic font-normal.
Subtitle: text-lg in hsl(var(--hero-subtitle)) color — "Join our feed for meaningful updates, news around technology and a shared journey toward depth and direction."
Email form: liquid-glass rounded-full p-2 max-w-lg container with email input and a white bg-foreground text-background rounded-full px-8 py-3 "SUBSCRIBE" button with whileHover scale 1.03 and whileTap scale 0.98.

3. "Search has changed" Section
Top padding pt-52 md:pt-64, bottom padding pb-6 md:pb-9.
Heading: text-5xl md:text-7xl lg:text-8xl — "Search has changed. Have you?" with "changed." in serif italic.
Subtitle: text-muted-foreground text-lg max-w-2xl mx-auto mb-24.
3 platform cards (grid md:grid-cols-3 gap-12 md:gap-8 mb-20): Each card has a 200x200 icon image centered, platform name (font-semibold text-base), and description (text-muted-foreground text-sm).
ChatGPT icon: local asset icon-chatgpt.png
Perplexity icon: local asset icon-perplexity.png
Google AI icon: local asset icon-google.png
Bottom tagline: "If you don't answer the questions, someone else will." in text-muted-foreground text-sm text-center.

4. Mission Section
Padding pt-0 pb-32 md:pb-44.
Video: Large 800x800 looping autoplaying muted video centered.
Video URL: https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260325_132944_a0d124bb-eaa1-4082-aa30-2310efb42b4b.mp4
Scroll-driven word-by-word reveal using useScroll and useTransform from framer-motion:
Paragraph 1 (text-2xl md:text-4xl lg:text-5xl font-medium tracking-[-1px]): "We're building a space where curiosity meets clarity — where readers find depth, writers find reach, and every newsletter becomes a conversation worth having." Words "curiosity", "meets", "clarity" are highlighted in --foreground, rest in --hero-subtitle.
Paragraph 2 (text-xl md:text-2xl lg:text-3xl font-medium mt-10): "A platform where content, community, and insight flow together — with less noise, less friction, and more meaning for everyone involved."
Each word transitions opacity from 0.15 to 1 based on scroll progress.

5. Solution Section
Padding py-32 md:py-44, border-t border-border/30.
Label: "SOLUTION" in text-xs tracking-[3px] uppercase text-muted-foreground.
Heading: text-4xl md:text-6xl — "The platform for meaningful content" (serif italic on "meaningful").
Video: Rounded rounded-2xl, aspect-[3/1] object-cover.
Video URL: https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260325_125119_8e5ae31c-0021-4396-bc08-f7aebeb877a2.mp4
4-column feature grid (md:grid-cols-4 gap-8): Curated Feed, Writer Tools, Community, Distribution — each with title (font-semibold text-base) and description (text-muted-foreground text-sm).

6. CTA Section
Padding py-32 md:py-44, border-t border-border/30, overflow-hidden.
Background video (HLS via hls.js): absolute inset-0 object-cover z-0.
HLS URL: https://stream.mux.com/8wrHPCX2dC3msyYU9ObwqNdm00u3ViXvOSHUMRYSEe5Q.m3u8
Uses Hls.isSupported() check with fallback to native HLS for Safari.
Overlay: absolute inset-0 bg-background/45 z-[1].
Content (z-10, centered):
Concentric circles logo icon (w-10 h-10 outer, w-5 h-5 inner).
Heading: "Start Your Journey" (serif italic).
Subtitle in text-muted-foreground.
Two buttons: "Subscribe Now" (bg-foreground text-background rounded-lg px-8 py-3.5) and "Start Writing" (liquid-glass rounded-lg).

7. Footer
Simple py-12 px-8 md:px-28 footer.
Left: "© 2026 Mindloop. All rights reserved." in text-muted-foreground text-sm.
Right: Privacy, Terms, Contact links in text-muted-foreground text-sm hover:text-foreground.

Key Dependencies
framer-motion for all animations
hls.js for the CTA background video streaming
@fontsource/inter (400, 500, 600, 700)
@fontsource/instrument-serif (400, 400-italic)
lucide-react for icons
tailwindcss-animate plugin

Assets Needed
3 avatar images (avatar-1.png, avatar-2.png, avatar-3.png)
3 platform icons (icon-chatgpt.png, icon-perplexity.png, icon-google.png)

首屏

No.1454 · 前端开发 · 社区/原生 · 来源：MotionSites (MIT) · EN 原文

**PROMPT:**

Build a dark, premium SaaS landing page hero section for a product called "Xero" — a data encryption service. Use React + TypeScript + Vite + Tailwind CSS + the `shaders` package (`shaders/react`) + `lucide-react`. Font: Inter (weights 300, 400, 500, 600, 700, 800) from Google Fonts.

---

**PAGE STRUCTURE:**

The page has a dark background (`#0a0a0f`) with 14px body padding. Everything is centered in a flex column. The structure is: Navbar > Hero Card > Brand Logos row.

---

**NAVBAR:**

- Full-width, max-width 1600px, using CSS Grid with 3 columns: `1fr auto 1fr`
- Left: Logo text "Xero" — font-size 1.05rem, weight 700, letter-spacing -0.01em, white
- Center: 3 navigation links ("Method", "Pricing", "Docs") — font-size 0.85rem, weight 400, color `#8888a8`, hover to white, 32px gap between links
- Right: Two buttons — "Login" (ghost pill: `rgba(255,255,255,0.06)` background, 1px border `rgba(255,255,255,0.08)`, white text, font-size 0.82rem, weight 500, border-radius 999px, padding 7px 18px) and "Sign Up" (solid white pill: white background, dark text `#0a0a0f`, font-size 0.82rem, weight 600, border-radius 999px, padding 7px 18px)
- Mobile (768px): Hamburger menu toggle (2 spans that animate into an X via translateY/rotate). Full-screen overlay menu slides in from right with `transition: right 0.4s cubic-bezier(0.4, 0, 0.2, 1)`. Links become 1.2rem centered vertically. Buttons become full-width stacked.

---

**HERO CARD:**

- Container: max-width 1600px, border-radius 20px, 1px border `rgba(255,255,255,0.07)`, `overflow: hidden`, position relative, background `#0d0b12`, padding `80px 40px 70px`, flex column centered, min-height 640px, text-align center.

**Layer 1 — Shader Background (z-index 0):**
Position absolute, inset 0, overflow hidden, border-radius 20px, pointer-events none, 100% width/height. Inner div and canvas forced to 100% width/height, position absolute inset 0.

Shader composition (from `shaders/react`):
```jsx
<Shader>
<SolidColor color="#08071a" />
<SineWave amplitude={0.36} blendMode="normal-oklch" color="#0582e8" frequency={0.2} position={{ x: 0.65, y: 0.67 }} softness={0.55} speed={0.3} thickness={0.72} />
<SineWave amplitude={0.17} blendMode="normal-oklch" color="#f00e94" frequency={0.2} position={{ x: 0.6, y: 0.51 }} softness={0.54} speed={0.5} thickness={0.35} />
<WaveDistortion angle={299} frequency={0.3} speed={0.2} strength={1} />
<FilmGrain strength={0.07} />
</Shader>
```

**Layer 2 — Radial Gradient Arc (::before pseudo-element, z-index 0):**
A radial-gradient positioned at `circle at 50% -70%`:
- Transparent from 0-60%
- Gradually builds pink/magenta (`rgba(176, 48, 136, ...)`) from 63% to 79% with increasing opacity (0.03 to 0.82)
- Transitions to lighter pink at 85-87% (`rgba(210,70,175,0.92)`, `rgba(240,110,210,0.88)`)
- Near-white at 91-93% (`rgba(255,205,250,0.92)`, `rgba(255,240,255,0.98)`)
- Pure white at 95%
- Second radial gradient: `circle at 50% 35%`, `rgba(120, 40, 180, 0.08)` center, transparent at 50%

**Layer 3 — Grid Overlay (z-index 0):**
Position absolute inset 0. Background: two linear-gradients creating a 40px grid with `rgba(255,255,255,0.07)` 1px lines. Masked with `radial-gradient(circle at 50% -70%, transparent 60%, black 78%)` so the grid only shows where the arc glows.

---

**ICON PIPELINE (z-index 1, margin-bottom 52px):**

A horizontal row of 3 icon nodes connected by lines, with an animated beam traveling between them.

- **Left node** (46px circle, background `#1a1a24`): SVG layers/stack icon (polygon + 2 polylines). Neumorphic box-shadow. Dotted border ring (7px outset). Class `node-light-right` — has a `::before` pseudo with a radial-gradient highlight on the right side that fades in/out (opacity transition 0.3s) when `.active` class is toggled.

- **Center node** (64px circle, background `#1e1e2c`): Custom Xero "X" SVG logo (a circular pinwheel shape, white fill). Larger neumorphic shadows. Wrapped in a container with a `.splash` element — a 100px radial gradient circle (`rgba(255, 77, 200, 0.6)`) that animates scale 0.4 to 1.4 while fading out over 0.8s.

- **Right node** (46px circle): Shield icon with checkmark. Class `node-light-left` — same as left but highlight on the left side with a purple tint (`rgba(200, 100, 255, 0.5)`).

- **Connecting lines**: 160px wide, 1px height, gradient from `rgba(255,255,255,0.15)` to `rgba(255,255,255,0.07)` (reversed for right line).

- **Beam Animation** (requestAnimationFrame loop):
- SVG overlay with a linearGradient (`#beam-gradient`): 5-stop gradient from transparent pink to white center to transparent purple.
- Two `<path>` elements use refs — one for glow (strokeWidth 2, filter blur, opacity 0.6) and one crisp (strokeWidth 0.8).
- Path coordinates computed dynamically from node positions via `getBoundingClientRect()`.
- Animation states: `p1` (800ms, beam travels 0-50%, left node pulses active at 0-40%), `splash` (800ms pause, beam hidden, center splash animates), `p2` (800ms, beam travels 50-100%, right node activates at 60-100%), `idle` (1000ms pause). Loop repeats.
- Beam position is controlled by shifting linearGradient x1/x2 attributes.

---

**HERO CONTENT (z-index 1, max-width 620px):**

- **Heading**: `<h1>` with text "The simple way" (weight 300, white) and `<strong>` block "encryption your data" (weight 400, gradient text: `linear-gradient(to right, rgba(255,255,255,1), rgba(255,255,255,0.6))` with background-clip text). Font-size: `clamp(2.4rem, 5.5vw, 4rem)`, line-height 1.1, letter-spacing -0.02em, margin-bottom 24px.

- **Subtitle**: "Fully managed data encrypting service and annotation platform for teams of all industries." — font-size 0.9rem, weight 400, line-height 1.6, color `rgba(255,255,255,0.4)`, max-width 440px, centered, margin-bottom 36px. Has a `<br>` after "annotation".

- **CTA Button**: "Get Started" — white background, dark text, font-size 0.88rem, weight 600, padding 12px 32px, border-radius 999px. Hover: opacity 0.9, translateY(-1px).

---

**BRAND LOGOS ROW (below hero card):**

- Flex row, centered, gap 64px, padding 32px 24px 10px, flex-wrap.
- 5 brand items: Expedia, asana, zenefits, HubSpot (with a superscript dot replacing the "o"), loom.
- Each: flex row, gap 10px, color `rgba(255,255,255,0.35)`, font-size 1.1rem, weight 500.
- Each has a simple 22px SVG icon in matching muted color (geometric/abstract representations, not actual brand logos).

---

**CSS VARIABLES:**
```
--bg: #0a0a0f
--surface: #111118
--text: #f0f0f5
--text-muted: #8888a8
--accent: #c8a0e0
--accent-pink: #b04090
--border: rgba(255, 255, 255, 0.08)
```

---

**RESPONSIVE BREAKPOINTS:**
- 860px: Pipeline lines shrink to 80px
- 768px: Body padding 10px, hamburger menu activates, hero card padding 60px 20px, pipeline margin-bottom 32px, nodes shrink (38px/52px), `<br>` tags hidden, brands gap 32px
- 480px: Hero card border-radius 16px, brands gap 24px

---

**DEPENDENCIES:**
```json
"shaders": "^2.5.124",
"lucide-react": "^0.344.0",
"react": "^18.3.1",
"react-dom": "^18.3.1",
"@supabase/supabase-js": "^2.57.4"
```

Tailwind CSS 3.4, Vite 5.4, TypeScript 5.5.

Grow AI Talent Platform

No.1455 · 前端开发 · 社区/原生 · 来源：MotionSites (MIT) · EN 原文

Build a dark-themed landing page hero section with a navbar, headline, CTA button, background video with fade-in/out loop, and a logo marquee. Use React + Vite + Tailwind CSS + TypeScript with shadcn/ui. Install @fontsource/geist-sans.

1. Theme & Design Tokens (index.css)
Set up a single dark theme (no light mode toggle). All colors in HSL:
:root {
--background: 260 87% 3%;
--foreground: 40 6% 95%;
--card: 240 6% 9%;
--card-foreground: 40 6% 95%;
--popover: 240 6% 9%;
--popover-foreground: 40 6% 95%;
--primary: 262 83% 58%;
--primary-foreground: 0 0% 100%;
--secondary: 240 4% 16%;
--secondary-foreground: 40 6% 95%;
--muted: 240 4% 16%;
--muted-foreground: 240 5% 65%;
--accent: 262 83% 58%;
--accent-foreground: 0 0% 100%;
--destructive: 0 84.2% 60.2%;
--destructive-foreground: 0 0% 100%;
--border: 240 4% 20%;
--input: 240 4% 20%;
--ring: 262 83% 58%;
--radius: 0.75rem;
--hero-heading: 40 10% 96%;
--hero-sub: 40 6% 82%;
}

Body font: 'Geist Sans', 'Inter', system-ui, sans-serif
Import these font weights:
@import "@fontsource/geist-sans/400.css";
@import "@fontsource/geist-sans/500.css";
@import "@fontsource/geist-sans/600.css";
@import "@fontsource/geist-sans/700.css";

2. Liquid Glass Utility (index.css)
Add a .liquid-glass utility class in @layer utilities:
.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;
}

3. Tailwind Config
Add these to tailwind.config.ts:
All the semantic color tokens mapped to hsl(var(--token))
A hero color group: hero.heading and hero.sub
A marquee keyframe: 0% { transform: translateX(0%) } → 100% { transform: translateX(-50%) }
Animation: marquee: "marquee 20s linear infinite"

4. Button Variants
In the shadcn button.tsx, add two custom variants:
hero: "bg-primary text-primary-foreground rounded-full px-6 py-3 text-base font-medium hover:bg-primary/90"
heroSecondary: "liquid-glass text-foreground rounded-full px-6 py-3 text-base font-normal hover:bg-white/5"

5. Navbar Component
Full-width, py-5 px-8, flex row, justify-between
Left: A logo image (32px height). Use a logo.png from src/assets/logo.png
Center: Nav items as plain buttons: "Features" (with ChevronDown icon), "Solutions", "Plans", "Learning" (with ChevronDown icon). Text is text-foreground/90 text-base, gap-1 between items
Right: "Sign Up" button using heroSecondary variant, size="sm", rounded-full px-4 py-2
Below the navbar, add a full-width 1px gradient divider: mt-[3px] w-full h-px bg-gradient-to-r from-transparent via-foreground/20 to-transparent

6. Hero Section
Section with bg-background relative overflow-hidden
Contains the Navbar at the top
Below navbar + divider, centered content with pt-20 px-4
Headline "Grow": text-[230px] font-normal leading-[1.02] tracking-[-0.024em], font-family 'General Sans', sans-serif, bg-clip-text text-transparent with background-image: linear-gradient(223deg, #E8E8E9 0%, #3A7BBF 104.15%)
Subtext: text-hero-sub text-center text-lg leading-8 max-w-md mt-4 opacity-80, two lines: "The most powerful AI ever deployed" / "in talent acquisition" (split with <br/>)
CTA Button: heroSecondary variant, text "Schedule a Consult", px-[29px] py-[24px], wrapped in a div with mt-8 mb-[66px]

7. Social Proof / Video Section
Immediately below the hero, a separate <section> with relative w-full overflow-hidden.
Background Video: <video> element: autoPlay muted playsInline, absolute inset-0 w-full h-full object-cover, initial style={{ opacity: 0 }}
Source URL: https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260308_114720_3dabeb9e-2c39-4907-b747-bc3544e2d5b7.mp4
Fade logic (JavaScript): Use requestAnimationFrame to continuously read currentTime and duration. Fade in over 0.5s at the start, fade out over 0.5s at the end. On ended, set opacity to 0, wait 100ms, reset currentTime = 0, and play() again. This creates a seamless manual loop with fade transitions.
Gradient overlays: absolute inset-0 bg-gradient-to-b from-background via-transparent to-background
Content (z-10): flex flex-col items-center pt-16 pb-24 px-4 gap-20
A h-40 spacer div for video visibility

Logo Marquee at max-w-5xl:
Left side: text "Relied on by brands / across the globe" in text-foreground/50 text-sm, with <br/>, whitespace-nowrap shrink-0
Right side: horizontally scrolling marquee using animate-marquee (the 20s infinite animation)
Logos are placeholder brands: Vortex, Nimbus, Prysma, Cirrus, Kynder, Halcyn — duplicated for seamless loop
Each logo: a small liquid-glass w-6 h-6 rounded-lg square with the first letter, plus the brand name in text-base font-semibold text-foreground
Gap between logos: gap-16

8. Page Composition
The Index page simply renders <HeroSection /> then <SocialProofSection /> sequentially with no wrapper styling.

Max Reed 作品集

No.1456 · 前端开发 · 社区/原生 · 来源：MotionSites (MIT) · EN 原文

Build a full-viewport dark personal portfolio Features section using React + TypeScript + Tailwind CSS + lucide-react.

**Layout & Structure:**
- Full screen dark background `#0a0a0a`, white text, Inter font with antialiased smoothing
- Top header row: left side has a heading "Hi, I'm Max Reed!" (size `text-[28px] sm:text-3xl md:text-4xl lg:text-[44px]`, leading `1.15`, font-normal, tracking-tight) followed by a paragraph "A London-based independent creator shaping sharp visual systems, web-ready products, and story-first campaigns. With a decade of craft behind me, I help ideas move with focus and intention." (text-sm md:text-[15px], leading-[1.6], text-white/60, max-w-3xl). Header container has `max-w-3xl`.
- Right side of header: a liquid-glass rounded-full button "Let's Team Up Today" (px-5 sm:px-6, py-2.5 sm:py-3)
- Overall section padding: `px-4 sm:px-6 md:px-10 lg:px-14 py-6 sm:py-8 md:py-10`, full screen `lg:h-screen`

**Grid (3 columns on lg, 2 on md, 1 on mobile, gap-4 md:gap-5):**

**Column 1 - Background card (rounded-2xl, bg-black):**
- Background video: `https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260507_150203_44a5bd32-516a-47ce-a077-8acbf9aa8991.mp4` (autoPlay loop muted playsInline, absolute inset-0 object-cover)
- Top: centered "BACKGROUND" section label (uppercase, tracking-[0.22em], text-[11px], text-white/70) with Sparkle icons on each side (h-3 w-3, strokeWidth 1.5)
- Bottom: career timeline as a 4-col grid `[auto_auto_1fr_auto]`:
- 2023-Now · Freelance Creative · Solo Studio
- 2020-2023 · Head of Brand Design · Rove Studio
- 2017-2020 · Visual Stylist · Ember Works
- Separator between year and role is a Sparkle icon (h-3 w-3, text-white/60)

**Column 2 (stacked rows, md:grid-rows-[auto_1fr]):**

Top - Client Voice card (rounded-2xl, bg-[#324444], p-5 md:p-6, with noise-overlay):
- Left-aligned "CLIENT VOICE" label with Sparkle icons (justify-start)
- Quote: "Max reshaped our image with a degree of finesse and vision that surpassed what we'd hoped for. The process felt graceful, and the outcomes speak for themselves." (text-[13px] sm:text-[13.5px], leading-[1.6], text-white/85)
- Attribution: **Elena Brooks**, Creative Director — Halcyon

Bottom - 10M+ card (rounded-2xl, bg-black):
- Background video: `https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260507_154543_d5b83fc1-9cea-44f3-b5e8-8f325935211a.mp4`
- Centered huge text "10M+" (text-5xl sm:text-6xl md:text-7xl lg:text-[88px], font-light, tracking-tight, drop-shadow)
- Bottom caption "Raised for startups" (centered, text-white/85)

**Column 3 (stacked):**

Top - Daily Software card (rounded-2xl, bg-black):
- Background video: `https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260507_153148_d7a3e1dd-e5d0-4ce6-8306-00d7522ecc44.mp4`
- Top: "DAILY SOFTWARE" section label
- Bottom: two scrolling marquee rows of liquid-glass icon tiles (h-14 w-14 md:h-16 md:w-16, rounded-xl). Row 1 scrolls left with icons [Figma, Framer, Palette, PenTool, Layers, Type, Aperture, Chrome]. Row 2 scrolls right with icons [Camera, Brush, Box, Wand2, Figma, Framer, Type, Layers]. Each row duplicated for seamless loop. Mask fade on both edges with `[mask-image:linear-gradient(to_right,transparent,black_8%,black_92%,transparent)]`.

Bottom - Reach Me card (rounded-2xl, bg-[#324444], p-5 md:p-6, noise-overlay):
- "REACH ME" section label
- Email: hi@maxreed.com
- Phone: +44 207 81 63
- Top-right ArrowUpRight icon button (h-9 w-9 rounded-full)

**Custom CSS in index.css:**

```css
.liquid-glass {
background: rgba(255, 255, 255, 0.01);
background-blend-mode: luminosity;
backdrop-filter: blur(4px);
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;
}

@keyframes marquee-left { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes marquee-right { from { transform: translateX(-50%); } to { transform: translateX(0); } }
.animate-marquee-left { animation: marquee-left 22s linear infinite; }
.animate-marquee-right { animation: marquee-right 26s linear infinite; }

.noise-overlay::after {
content: '';
position: absolute;
inset: 0;
pointer-events: none;
opacity: 0.55;
mix-blend-mode: soft-light;
background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/><feColorMatrix type='matrix' values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 1 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
background-size: 240px 240px;
}
```

Font: Inter (system fallback). Icons from lucide-react: ArrowUpRight, Sparkle, Figma, Framer, Palette, PenTool, Layers, Type, Aperture, Chrome, Camera, Brush, Box, Wand2. All icons use strokeWidth 1.5.

Sup Cinematic Style

No.1457 · 前端开发 · 社区/原生 · 来源：MotionSites (MIT) · EN 原文

{
  "summary": "The 'Cinematic Style' is an immersive, dark-mode design system using 3D spatial depth and high-contrast typography to create a theatrical user experience. It blends brutalist layout structures (heavy borders, massive text) with fluid, high-tech motion.",
  "style": {
    "description": "The style utilizes a base of #050505 for depth. Typography is centered around 'Aspekta' (weights 300, 500, 700, 900), prioritizing font-weight: 900 for hero headings and font-weight: 700 with wide tracking (0.2em) for secondary labels. Color accents are minimal but punchy: a gradient from cyan (#06B6D4) to pink (#EC4899) for primary buttons, and a purple glow (#7C3AED) for functional sections. Interactive elements use backdrop-filter: blur(8px) and border: 1px solid rgba(255, 255, 255, 0.1).",
    "prompt": "Theme: Cinematic Dark Mode.\n- Colors: Background: #050505; Card Surface: #111111; Text Primary: #FFFFFF; Text Secondary: #999999; Accent Gradient: linear-gradient(to right, #06B6D4, #EC4899).\n- Typography: Primary font 'Aspekta'. Hero Headings: size 12vw, weight 900, tracking-tighter. Section Headers: size 10vw, weight 900. Body: size 1.125rem, weight 300.\n- Effects: Perspective: 2000px; Backdrop Blur: 8px; Glassmorphism borders: 1px solid rgba(255,255,255,0.1).\n- Interactions: Button scale 1.02 on hover; Link transition 0.2s duration; Image grayscale 100% to 0% on hover."
  },
  "layout_and_structure": {
    "description": "The layout follows a modular vertical stack with a fixed, blend-mode-enabled navigation. It transitions from a 3D immersive hero to a bento-style project grid, then into a high-contrast pricing section with deep glow effects, concluding with a massive-scale editorial footer.",
    "prompts": [
      {
        "part": "Sticky Navigation",
        "prompt": "Fixed header at top-0. padding: 1.5rem 2rem. Elements: Logo (left), Nav Links (center, hidden on mobile), CTA Button (right). Essential: Apply 'mix-blend-difference' to the entire nav container. Use a red-500 pulsing dot next to the logo for 'live' status feel."
      },
      {
        "part": "3D Rolodex Hero",
        "prompt": "Full viewport height (100vh). Background: Massive background text (#FFFFFF, opacity 0.3 on scroll) centered. Foreground: A 3D Cube wrapper using 'transform-style: preserve-3d'. Dimensions: 50vh x 50vh. Four faces (Front, Bottom, Back, Top) each rotated 90 degrees on X-axis and translated 30vh (Z-axis). Each face contains a high-quality object-fit image and centered uppercase title (tracking 0.2em). Smooth infinite rotation animation on X-axis."
      },
      {
        "part": "Case Studies Grid",
        "prompt": "Container max-width 90rem. Header: Large 10vw tracking-tighter text. Layout: Featured project spans full width (aspect-video) with macOS-style traffic light window controls (Red, Yellow, Green dots). Sub-projects follow in a 2-column grid (aspect-4/3). Styling: Images start at grayscale(1) and transition to color on hover. Borders: 1px solid rgba(255,255,255,0.1)."
      },
      {
        "part": "Pricing Section",
        "prompt": "Background: #0B0216 with a central purple glow (#7C3AED blur 100px). Feature: Three-tier card system. Growth card (center) should be scaled 1.05 with a white background and dark text (#111111). Side cards use glassmorphism (#FFFFFF/5 opacity, backdrop-blur). Footer: A calculator component with a dark purple container (#1A0B2E) and a white custom range slider."
      }
    ]
  },
  "special_ui_components": [
    {
      "component": "3D Transform Cube",
      "description": "A rotating 4-sided prism used for feature displays.",
      "prompt": "Create a container with perspective: 2000px. Inner 'cube-wrapper' must have transform-style: preserve-3d. Define four 'cube-face' elements. Front: rotateX(0deg) translateZ(30vh). Bottom: rotateX(-90deg) translateZ(30vh). Back: rotateX(-180deg) translateZ(30vh). Top: rotateX(90deg) translateZ(30vh). Apply a constant GSAP or CSS animation: to { transform: rotateX(360deg); }."
    },
    {
      "component": "Glass-morphism Price Calculator",
      "description": "A custom range input for interactive price estimation.",
      "prompt": "Container: #1A0B2E background, 32px border-radius. Slider: appearance-none, height 8px, background #374151. Thumb: 24px diameter, solid white, shadow 0 0 0 4px rgba(124, 58, 237, 0.5). Display: Large text ($ price) that updates dynamically via JavaScript based on slider value (e.g., value * 125)."
    }
  ],
  "special_notes": "MUST maintain the perspective: 2000px on the hero container for 3D depth. DO NOT use standard shadows; use border-white/10 and backdrop-blur for depth. MUST use 'mix-blend-difference' on the header to ensure visibility over shifting background colors. Typography must be uppercase for all headings to maintain the cinematic editorial feel."
}

动效卡片

No.1458 · 前端开发 · 社区/原生 · 来源：MotionSites (MIT) · EN 原文

Create a high-performance, interactive 3D horizontal cylinder carousel showing premium animated bank cards.
Core Features & Interactions:
Use React (useState, useEffect, useRef), Tailwind CSS v4, and standard requestAnimationFrame for a smooth 60fps render loop. No external animation libraries needed.
The scene should behave like a continuous circular scroll/carousel, updating a continuous progress variable.
Add interactive 3D parallax tilt to the cards that smoothly responds to mouse cursor movement (mousemove), using inertia damping to lag slightly behind the cursor.
The cards should have real volumetric 3D thickness (achieved by stacking multiple div layers close together, simulating 3D depth).
The carousel math should push cards to the sides (using smoothstep interpolation) and hide them gracefully using perspective formulas as they move completely off-screen.
Each card must have a front and back face. The front face includes an autoplaying video background, a silver metallic chip (SVG), an embedded JWT logo top-right, and intersecting circles bottom-right. The back face should blur the same video background, have a dark magnetic stripe across the top, and feature the cardholder name, number, and CVV in JetBrains Mono.
Visual Styling:
Use a pure black background (#000000).
The application relies exclusively on the interactive 3D card layout (no text layers over the background).
Make sure the scene's wrapper uses CSS perspective: 1350px; and standard transformStyle: preserve-3d.
Please use the exact code below for src/App.tsx and src/index.css to build this exactly as requested.

import React, { useState, useEffect, useRef } from 'react';

const CARD_VIDEOS = [
'https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260506_030111_a9e15665-d379-4a7f-8116-695bbe452ad1.mp4',
'https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260429_171347_f640c30d-ec21-426a-98bc-77e07c2c60cb.mp4',
'https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260503_104800_bc43ae09-f494-43e3-97d7-2f8c1692cfd7.mp4',
'https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260423_161253_c72b1869-400f-45ed-ac0c-52f68c2ed5bd.mp4',
'https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260418_115655_b4d9cd77-feed-43cd-a198-af78ebdf1f7a.mp4',
'https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260324_024928_1efd0b0d-6c02-45a8-8847-1030900c4f63.mp4',
'https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260324_024928_1efd0b0d-6c02-45a8-8847-1030900c4f63.mp4'
];

// Nine beautiful premium solid colors to clearly track the cards
const CARD_COLORS = [
'#FF3B30', // Apple Red
'#FF9500', // Apple Orange
'#FFCC00', // Apple Yellow
'#34C759', // Apple Green
'#007AFF', // Apple Blue
'#5856D6', // Apple Purple
'#FF2D55', // Apple Pink
'#AF52DE', // Apple Violet
'#00C7BE', // Apple Teal
];

// Different card details for each of the cards
const CARD_DETAILS = [
{ number: '4232 8908 1121 4892', name: 'ZACHARY MERCER', cvv: '382' },
{ number: '4154 7831 9904 5124', name: 'SOPHIA MARTINEZ', cvv: '109' },
{ number: '5457 4120 7733 9035', name: 'BENJAMIN CARTER', cvv: '764' },
{ number: '4441 5567 1223 2468', name: 'EMILY MORRISON', cvv: '491' },
{ number: '5375 8891 2234 7713', name: 'JACKSON REID', cvv: '255' },
];


export default function App() {
const cardCount = 5;
const cardsRefs = useRef<(HTMLDivElement | null)[]>([]);
const frameId = useRef<number>(0);

// Continuous scroll progress
const progress = useRef<number>(0);

// Track mouse coordinates for interactive 3D parallax tilt with inertia damping
const mouse = useRef({ x: 0, y: 0, targetX: 0, targetY: 0 });

// Responsive state containing card dimensions
const [metrics, setMetrics] = useState({
cardW: 336,
cardH: 211, // 1.59 standard credit card ratio
});

// Typography metrics to prevent collisions beautifully across all viewports
const [fontMetrics, setFontMetrics] = useState({
titleFontSize: '1.5rem',
sigFontSize: '2.5rem',
descFontSize: '14px',
titleGap: '40px',
pl: '0px'
});

useEffect(() => {
const handleMouseMove = (e: MouseEvent) => {
// Screen-space cursor offset relative to window center, clamped to [-1.0, 1.0] range
const rx = (e.clientX - window.innerWidth / 2) / (window.innerWidth / 2);
const ry = (e.clientY - window.innerHeight / 2) / (window.innerHeight / 2);
mouse.current.targetX = Math.max(-1, Math.min(1, rx));
mouse.current.targetY = Math.max(-1, Math.min(1, ry));
};

const handleMouseLeave = () => {
// Return gently to center orientation when mouse focus is lost or moves away
mouse.current.targetX = 0;
mouse.current.targetY = 0;
};

window.addEventListener('mousemove', handleMouseMove);
document.addEventListener('mouseleave', handleMouseLeave);

return () => {
window.removeEventListener('mousemove', handleMouseMove);
document.removeEventListener('mouseleave', handleMouseLeave);
};
}, []);

useEffect(() => {
const handleResize = () => {
const w = window.innerWidth;
const h = window.innerHeight;

// 1. Calculate Card Metrics (shrink cards if height is small to save vertical space)
let cardW = Math.round(w * 0.16 + 130);

const heightFactor = Math.min(1.0, Math.max(0.65, h / 850));
cardW = Math.round(cardW * heightFactor);

cardW = Math.min(336, Math.max(150, cardW));
const cardH = Math.round(cardW / 1.5925); // Standard credit card ratio

setMetrics({ cardW, cardH });

// 2. Calculate Typography Metrics (shrink font sizes aggressively if height or width is small)
const isMobile = w < 640;

let titleSize = '';
let sigSize = '';
let descSize = '';
let titleGap = '40px';
let plVal = '0px';

if (isMobile) {
// Mobile style: centered, text size increased by 30% for high legibility
titleSize = 'clamp(1.8rem, 5.2vw + 0.4rem, 2.2rem)';
sigSize = 'clamp(2.86rem, 7.8vw + 0.6rem, 3.5rem)';
descSize = 'clamp(0.72rem, 1.4vw + 0.35rem, 0.95rem)';
titleGap = '24px';
plVal = '0px';
} else {
// Desktop / Tablet style: aligned bottom-left
// Scale factor depends on width and height to shrink before hitting cards
const scale = Math.min(1.0, Math.max(0.48, (w * 0.45 + h * 0.55) / 1300));

titleSize = `${Math.max(1.15, 3.5 * scale).toFixed(3)}rem`;
sigSize = `${Math.max(1.5, 4.5 * scale).toFixed(3)}rem`;
descSize = `${Math.max(11, 16 * scale).toFixed(1)}px`;
titleGap = `${Math.max(16, Math.round(40 * scale))}px`;
plVal = `${Math.min(6, Math.max(2.8, 3.5 * scale + 2.2)).toFixed(2)}rem`;
}

setFontMetrics({
titleFontSize: titleSize,
sigFontSize: sigSize,
descFontSize: descSize,
titleGap,
pl: plVal
});
};

handleResize();
window.addEventListener('resize', handleResize);
return () => window.removeEventListener('resize', handleResize);
}, []);

// Compute positions, rotations, and visual rules at 60fps
const renderLoop = () => {
// Upward flow speed of continuous transition - decreased speed by more than half for slower, premium, and calmer transitions
progress.current += 0.0016;

// Smoothly interpolate current mouse variables towards their target positions (damping/inertia logic)
mouse.current.x += (mouse.current.targetX - mouse.current.x) * 0.08;
mouse.current.y += (mouse.current.targetY - mouse.current.y) * 0.08;

const cards = cardsRefs.current;
const h = window.innerHeight;
const { cardH } = metrics;

const continuousProgress = progress.current;
const roundedIndex = Math.round(continuousProgress);
const diffFromRound = continuousProgress - roundedIndex; // ranges between [-0.5, 0.5]

// Custom non-linear magnetic step logic
// It creates a gorgeous brief "dwell/pause" at front center before accelerating to the next card
const easedDiff = Math.sign(diffFromRound) * Math.pow(Math.abs(diffFromRound) * 2, 4.2) / 2;
const virtualActiveIndex = roundedIndex + easedDiff;

for (let i = 0; i < cardCount; i++) {
const card = cards[i];
if (!card) continue;

// Solve circular wrapping to get closest representation in [-cardCount/2, cardCount/2]
let offset = i - virtualActiveIndex;
const halfCount = cardCount / 2;
while (offset > halfCount) offset -= cardCount;
while (offset < -halfCount) offset += cardCount;

const absOffset = Math.abs(offset);
const sign = Math.sign(offset);

// Allow cards to render completely off-screen smoothly up to offset 3.0. This prevents any clipping or sudden pop-outs.
if (absOffset > 3.0) {
card.style.visibility = 'hidden';
continue;
} else {
card.style.visibility = 'visible';
}

// Spacing gap between center card and adjacent cards
const gap = 36;
const peekAmount = -55; // Push the card's edge 55px past the screen boundary to hide a premium portion of it!
const D = 1350; // Perspective distance

let y = 0;
let z = 0;
let rot = 0;

if (absOffset <= 1) {
// Smoothstep interpolation from 0 to 1 (Center card to first adjacent card)
const t = absOffset;
const easedT = t * t * (3 - 2 * t);

// Y moves from 0 to (cardH + gap)
const targetY = cardH + gap;
y = -sign * (easedT * targetY);

// Z moves from 400 (center) to 220 (adjacent)
z = 400 + easedT * (220 - 400);

// Rotation moves from 0 to 132 degrees (beautiful tilted back face)
rot = easedT * 132;
} else if (absOffset <= 2) {
// Smoothstep interpolation from 1 to 2 (Adjacent card to peeking screen-edge card)
const t = absOffset - 1;
const easedT = t * t * (3 - 2 * t);

const yStart = cardH + gap;
const zStart = 220;
const rotStart = 132;

const zEnd = -60;
const rotEnd = 175;

// Perspective-aware formula for exact edge alignment at the screen boundary (peekAmount = 26px inside)
const sEnd = D / (D - zEnd);
const yEnd = (h / 2 - peekAmount) / sEnd - (cardH / 2);

const currentY = yStart + easedT * (yEnd - yStart);
y = -sign * currentY;

z = zStart + easedT * (zEnd - zStart);
rot = rotStart + easedT * (rotEnd - rotStart);
} else {
// Smoothstep interpolation from 2 to 3 (Peeking card to completely off-screen card)
const t = Math.min(absOffset - 2, 1);
const easedT = t * t * (3 - 2 * t);

const zStart = -60;
const rotStart = 175;

const zEnd3 = -250;
const rotEnd3 = 195;

const sEnd2 = D / (D - zStart);
const yEnd2 = (h / 2 - peekAmount) / sEnd2 - (cardH / 2);

// Calculate yEnd3 dynamically so that the card's edge is completely 100px past the screen boundary
const sEnd3 = D / (D - zEnd3);
const yEnd3 = (h / 2 + 100) / sEnd3 + (cardH / 2);

const currentY = yEnd2 + easedT * (yEnd3 - yEnd2);
y = -sign * currentY;

z = zStart + easedT * (zEnd3 - zStart);
rot = rotStart + easedT * (rotEnd3 - rotStart);
}

const localCardRotation = -sign * rot;

// Determine how close this card is to the exact center (1.0 = center, 0.0 = adjacent/offscreen)
const centerFactor = Math.max(0, 1 - absOffset);

// Vertical tilt (around X-axis) and horizontal tilt (around Y-axis) driven by mouse coordinates
const maxTiltY = 15; // Max angle tilt left-to-right (degrees)
const maxTiltX = 12; // Max angle tilt up-and-down (degrees)

const activeTiltX = -mouse.current.y * maxTiltX * centerFactor;
const activeTiltY = mouse.current.x * maxTiltY * centerFactor;

const totalRotX = localCardRotation + activeTiltX;
const totalRotY = activeTiltY;

// Depth z-index layer
card.style.zIndex = Math.round(z).toString();
card.style.opacity = '1';

// Inject translation matrix with the premium -3deg tilt combined with dynamic mouse-interactive 3D tilt
card.style.transform = `translateY(${y.toFixed(2)}px) translateZ(${z.toFixed(2)}px) rotateX(${totalRotX.toFixed(2)}deg) rotateY(${totalRotY.toFixed(2)}deg) rotateZ(-3deg)`;
}
};

useEffect(() => {
const tick = () => {
renderLoop();
frameId.current = requestAnimationFrame(tick);
};

frameId.current = requestAnimationFrame(tick);
return () => cancelAnimationFrame(frameId.current);
}, [metrics]);

// Slices for 3D volumetric depth with 30% reduced thickness
// Span from -1.47px to 1.47px creates an extremely premium real 3D volume feel
const thicknessLayers = [-1.47, -0.73, 0, 0.73, 1.47];

return (
<div className="absolute inset-0 bg-[#000000] text-white flex items-center justify-center overflow-hidden select-none">

{/* 3D perspective camera space */}
<div
className="relative w-full h-full flex items-center justify-center pointer-events-none"
style={{
perspective: '1350px',
}}
>
{/* Dynamic 3D coordinate viewport */}
<div
className="absolute"
style={{
width: `${metrics.cardW}px`,
height: `${metrics.cardH}px`,
transformStyle: 'preserve-3d',
}}
>
{Array.from({ length: cardCount }).map((_, i) => (
<div
key={i}
ref={(el) => { cardsRefs.current[i] = el; }}
className="absolute inset-0"
style={{
width: `${metrics.cardW}px`,
height: `${metrics.cardH}px`,
transformStyle: 'preserve-3d',
backfaceVisibility: 'visible',
}}
>
{/* Build physical 3D volumetric thickness by dense parallel layering */}
{thicknessLayers.map((zOffset, layerIdx) => {
const isFrontFace = layerIdx === thicknessLayers.length - 1;
const isBackFace = layerIdx === 0;

const videoSrc = CARD_VIDEOS[i % CARD_VIDEOS.length];
const baseBgColor = '#0f0f0f';

// Middle structural slice
if (!isFrontFace && !isBackFace) {
return (
<div
key={layerIdx}
className="absolute inset-0 rounded-[16px] border border-[#808080] pointer-events-none overflow-hidden"
style={{
backgroundColor: '#808080',
transform: `translateZ(${zOffset}px)`,
}}
/>
);
}

// Front face slice
if (isFrontFace) {
const frontBorderStyle = "border border-white/15";
return (
<div
key={layerIdx}
className={`absolute inset-0 rounded-[16px] ${frontBorderStyle} pointer-events-none overflow-hidden`}
style={{
backgroundColor: baseBgColor,
transform: `translateZ(${zOffset}px)`,
backfaceVisibility: 'hidden',
boxShadow: 'inset 0 1px 1px rgba(255,255,255,0.15)',
}}
>
<video
src={videoSrc}
autoPlay
loop
muted
playsInline
className="absolute inset-0 w-full h-full object-cover rounded-[16px]"
/>

<div className="absolute inset-0 p-5 sm:p-6 text-white h-full w-full font-sans z-10 bg-black/15">
{/* Golden/Silver Metallic Contact Chip - positioned mid-left (vertically centered on the card) with custom user vectors */}
<div className="absolute left-5 sm:left-6 top-1/2 -translate-y-1/2">
<svg
className="w-6 h-6 sm:w-[29px] sm:h-[29px]"
viewBox="0 0 60 60"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
fillRule="evenodd"
clipRule="evenodd"
d="M20 8H40V14C40.0016 14.5299 40.2128 15.0377 40.5875 15.4125C40.9623 15.7872 41.4701 15.9984 42 16H59V24H42C41.4701 24.0016 40.9623 24.2128 40.5875 24.5875C40.2128 24.9623 40.0016 25.4701 40 26V52H20V8ZM18 8H8.00039C4.47435 8 1.56576 10.6083 1.08 14H18V8ZM1 16V24V26V34V36V44H18V36H1V34H18V26H1V24H18V16H1ZM1.08 46C1.56576 49.3917 4.47435 52 8.00039 52H18V46H1.08ZM42 14V8H52.0004C55.5264 8 58.4342 10.6084 58.92 14H42ZM59 26H42V34H59V26ZM59 36H42V44H59V36ZM52.0004 52H42V46H58.92C58.4342 49.3916 55.5264 52 52.0004 52Z"
fill={`url(#paint0_linear_1032_4_${i})`}
/>
<path
fillRule="evenodd"
clipRule="evenodd"
d="M1.02453 14.4146C1.00608 14.609 0.998061 14.8045 1.00039 15C1.00039 14.8028 1.00854 14.6076 1.02453 14.4146ZM1.00039 45C0.998061 45.1955 1.00608 45.391 1.02453 45.5854C1.00854 45.3924 1.00039 45.1972 1.00039 45ZM59.0004 15C59.0026 14.8176 58.9955 14.6353 58.9794 14.4538C58.9933 14.634 59.0004 14.8162 59.0004 15ZM59.0004 45C59.0004 45.1838 58.9933 45.366 58.9794 45.5462C58.9955 45.3647 59.0026 45.1824 59.0004 45Z"
fill="#B7B7B7"
/>
<defs>
<linearGradient
id={`paint0_linear_1032_4_${i}`}
x1="30"
y1="8"
x2="30"
y2="52"
gradientUnits="userSpaceOnUse"
>
<stop stopColor="white" />
<stop offset="1" stopColor="#999999" />
</linearGradient>
</defs>
</svg>
</div>

{/* JWT Brand Logo - positioned at top-right */}
<div className="absolute right-5 sm:right-6 top-5 sm:top-6 opacity-95">
<svg
className="w-[84px] xs:w-[101px] sm:w-[120px] h-auto"
viewBox="0 0 341 49"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M8.75294 47.68C6.10761 47.68 4.10227 47.04 2.73694 45.76C1.41427 44.48 0.582275 42.7733 0.240941 40.64C-0.100392 38.464 -0.0790588 36.0747 0.304941 33.472C0.731608 30.8267 1.37161 28.1813 2.22494 25.536C3.07827 22.848 3.99561 20.3307 4.97694 17.984C6.00094 15.5947 6.93961 13.5893 7.79294 11.968C8.26227 11.072 8.88094 10.56 9.64894 10.432C10.4169 10.2613 11.1423 10.368 11.8249 10.752C12.5503 11.136 13.0623 11.6907 13.3609 12.416C13.7023 13.1413 13.6383 13.9307 13.1689 14.784C11.2916 18.368 9.79828 21.7813 8.68894 25.024C7.57961 28.2667 6.85427 31.1467 6.51294 33.664C6.21427 36.1387 6.23561 38.1013 6.57694 39.552C6.96094 40.96 7.68628 41.664 8.75294 41.664C9.73428 41.664 10.8009 41.3013 11.9529 40.576C13.1049 39.8507 14.3423 38.5493 15.6649 36.672C17.0303 34.6667 18.3529 32.064 19.6329 28.864C20.9556 25.6213 22.1289 21.8667 23.1529 17.6C23.4089 16.6187 23.8783 15.9573 24.5609 15.616C25.2863 15.2747 26.0329 15.2107 26.8009 15.424C27.5689 15.6373 28.1876 16.064 28.6569 16.704C29.1263 17.3013 29.2543 18.0693 29.0409 19.008C27.9316 23.616 27.3769 27.5627 27.3769 30.848C27.4196 34.1333 27.7609 36.5227 28.4009 38.016C28.8703 39.0827 29.4249 39.8507 30.0649 40.32C30.7476 40.7893 31.4943 41.024 32.3049 41.024C33.1156 41.024 33.9689 40.7253 34.8649 40.128C35.8036 39.488 36.7209 38.4 37.6169 36.864C38.5556 35.328 39.3876 33.216 40.1129 30.528C37.6809 28.48 35.6756 25.7707 34.0969 22.4C32.5183 19.0293 31.7289 15.168 31.7289 10.816C31.7289 8.93867 31.9423 7.21067 32.3689 5.632C32.7956 4.05333 33.5209 2.79467 34.5449 1.856C35.5689 0.874666 36.9769 0.383999 38.7689 0.383999C40.9449 0.383999 42.7156 1.17333 44.0809 2.752C45.4463 4.288 46.4489 6.37867 47.0889 9.024C47.7289 11.6267 48.0063 14.5493 47.9209 17.792C47.8783 21.0347 47.5369 24.3413 46.8969 27.712C47.5369 28.0107 48.2196 28.2453 48.9449 28.416C49.7129 28.5867 50.4809 28.672 51.2489 28.672C52.9983 28.672 54.7903 28.416 56.6249 27.904C58.5023 27.3493 60.1023 26.6453 61.4249 25.792C62.2783 25.2373 63.0676 25.088 63.7929 25.344C64.5183 25.5573 65.0943 26.0053 65.521 26.688C65.9476 27.328 66.1183 28.0533 66.0329 28.864C65.9903 29.632 65.5636 30.272 64.7529 30.784C62.8756 32.0213 60.7423 33.0027 58.3529 33.728C56.0063 34.4533 53.6383 34.816 51.2489 34.816C49.2863 34.816 47.3449 34.4533 45.4249 33.728C44.1876 37.7387 42.5023 40.96 40.3689 43.392C38.2356 45.824 35.5476 47.04 32.3049 47.04C30.2569 47.04 28.3583 46.4427 26.6089 45.248C24.9023 44.0107 23.6223 42.4107 22.7689 40.448C22.5983 40.064 22.4276 39.6587 22.2569 39.232C22.1289 38.8053 22.0223 38.4 21.9369 38.016C21.7236 38.4 21.4889 38.7627 21.2329 39.104C21.0196 39.4453 20.7849 39.7867 20.5289 40.128C18.9503 42.3467 17.1796 44.16 15.2169 45.568C13.2969 46.976 11.1423 47.68 8.75294 47.68ZM41.5849 23.104C42.0116 19.9893 42.1183 17.3653 41.9049 15.232C41.6916 13.0987 41.3503 11.392 40.8809 10.112C40.4116 8.78933 39.9423 7.85067 39.4729 7.296C39.0463 6.69867 38.8116 6.4 38.7689 6.4C38.7689 6.4 38.6836 6.42133 38.5129 6.464C38.3849 6.464 38.2356 6.76267 38.0649 7.36C37.9369 7.91467 37.8729 9.06667 37.8729 10.816C37.8729 12.992 38.1929 15.168 38.8329 17.344C39.4729 19.4773 40.3903 21.3973 41.5849 23.104Z"
439: fill="white"
440: />
441: <path
442: d="M91.5429 48.768C89.5376 48.768 87.9163 48.3627 86.6789 47.552C85.4843 46.784 84.6096 45.76 84.0549 44.48C83.5003 43.1573 83.2016 41.7493 83.1589 40.256C81.3243 42.4747 79.2763 44.224 77.0149 45.504C74.7963 46.7413 72.4709 47.36 70.0389 47.36C68.1189 47.36 66.3056 46.912 64.5989 46.016C62.8923 45.0773 61.5056 43.6907 60.4389 41.856C59.4149 39.9787 58.9029 37.6107 58.9029 34.752C58.9029 31.7653 59.5216 28.8427 60.7589 25.984C62.0389 23.0827 63.7669 20.48 65.9429 18.176C68.1616 15.8293 70.6789 13.9733 73.4949 12.608C76.3536 11.2 79.3403 10.496 82.4549 10.496C84.5029 10.496 86.5296 10.752 88.5349 11.264C90.5403 11.776 92.2896 12.5227 93.7829 13.504C94.6363 14.0587 95.1056 14.72 95.1909 15.488C95.2763 16.256 95.0843 16.9813 94.6149 17.664C94.1883 18.304 93.6123 18.752 92.8869 19.008C92.1616 19.264 91.3936 19.136 90.5829 18.624C89.7723 18.112 88.5563 17.6427 86.9349 17.216C85.3563 16.7467 83.8629 16.512 82.4549 16.512C80.0229 16.512 77.7616 17.0667 75.6709 18.176C73.5803 19.2853 71.7243 20.736 70.1029 22.528C68.5243 24.32 67.2869 26.2827 66.3909 28.416C65.4949 30.5493 65.0469 32.6613 65.0469 34.752C65.0469 35.8187 65.1749 36.864 65.4309 37.888C65.7296 38.8693 66.2416 39.7013 66.9669 40.384C67.6923 41.024 68.7163 41.344 70.0389 41.344C71.3189 41.344 72.7483 40.9173 74.3269 40.064C75.9483 39.168 77.4843 37.76 78.9349 35.84C79.8309 34.6453 80.7696 33.216 81.7509 31.552C82.7323 29.8453 83.6283 28.16 84.4389 26.496C85.2923 24.7893 85.9749 23.3387 86.4869 22.144C86.8283 21.2907 87.3403 20.736 88.0229 20.48C88.7483 20.224 89.4736 20.224 90.1989 20.48C90.9243 20.6933 91.5003 21.0987 91.9269 21.696C92.3536 22.2933 92.4816 23.04 92.3109 23.936L89.4949 37.632C89.1963 39.1253 89.1963 40.2347 89.4949 40.96C89.7936 41.6853 90.1776 42.176 90.6469 42.432C91.1163 42.6453 91.4149 42.752 91.5429 42.752C92.2256 42.752 93.1003 42.432 94.1669 41.792C95.2336 41.1093 96.5563 39.8507 98.1349 38.016C99.4576 36.5227 100.823 34.7733 102.231 32.768C103.682 30.72 105.068 28.6293 106.391 26.496C107.756 24.32 108.972 22.272 110.039 20.352C111.148 18.3893 112.023 16.768 112.663 15.488C113.09 14.592 113.687 14.0587 114.455 13.888C115.223 13.7173 115.948 13.824 116.631 14.208C117.356 14.5493 117.868 15.0827 118.167 15.808C118.508 16.4907 118.466 17.28 118.039 18.176C117.356 19.584 116.439 21.2907 115.287 23.296C114.178 25.3013 112.919 27.4347 111.511 29.696C110.146 31.9147 108.695 34.0907 107.159 36.224C105.666 38.3573 104.194 40.2773 102.743 41.984C101.036 43.9467 99.2869 45.568 97.4949 46.848C95.7456 48.128 93.7616 48.768 91.5429 48.768Z"
443: fill="white"
444: />
445: <path
446: d="M118.45 48.448C115.549 48.448 113.351 47.6373 111.858 46.016C110.407 44.352 109.533 42.0267 109.234 39.04C108.978 36.0533 109.17 32.5547 109.81 28.544C110.493 24.5333 111.517 20.16 112.882 15.424C113.181 14.4427 113.693 13.8027 114.418 13.504C115.143 13.1627 115.89 13.12 116.658 13.376C117.426 13.632 118.023 14.08 118.45 14.72C118.919 15.36 119.026 16.1493 118.77 17.088C117.191 22.464 116.146 26.8373 115.634 30.208C115.165 33.536 115.037 36.096 115.25 37.888C115.463 39.6373 115.869 40.832 116.466 41.472C117.106 42.112 117.767 42.432 118.45 42.432C119.303 42.432 120.413 41.9413 121.778 40.96C123.143 39.936 124.594 38.5067 126.13 36.672C127.666 34.8373 129.138 32.7253 130.546 30.336C129.778 27.904 129.394 25.152 129.394 22.08C129.394 20.2027 129.501 18.176 129.714 16C129.97 13.7813 130.397 11.6907 130.994 9.728C131.634 7.76533 132.509 6.18667 133.618 4.992C134.77 3.79733 136.242 3.264 138.034 3.392C139.485 3.52 140.573 4.032 141.298 4.928C142.066 5.824 142.535 6.95467 142.706 8.32C142.919 9.68533 142.941 11.1573 142.77 12.736C142.599 14.272 142.343 15.808 142.002 17.344C141.661 18.8373 141.319 20.16 140.978 21.312C139.954 24.8107 138.781 28.032 137.458 30.976C138.61 33.024 140.061 34.432 141.81 35.2C143.559 35.968 145.33 36.2453 147.122 36.032C148.914 35.776 150.45 35.2427 151.73 34.432C152.583 33.8773 153.373 33.728 154.098 33.984C154.823 34.1973 155.399 34.6453 155.826 35.328C156.295 35.968 156.487 36.6933 156.402 37.504C156.317 38.272 155.869 38.912 155.058 39.424C152.967 40.7893 150.642 41.6427 148.082 41.984C145.565 42.3253 143.09 42.0907 140.658 41.28C138.226 40.4693 136.093 39.04 134.258 36.992C132.039 40.576 129.586 43.392 126.898 45.44C124.253 47.4453 121.437 48.448 118.45 48.448ZM135.666 18.112C136.391 15.5947 136.882 13.7173 137.138 12.48C137.394 11.2427 137.522 10.432 137.522 10.048C137.522 9.62133 137.522 9.408 137.522 9.408C137.522 9.408 137.394 9.68533 137.138 10.24C136.882 10.752 136.605 11.648 136.306 12.928C136.007 14.1653 135.794 15.8933 135.666 18.112Z"
447: fill="white"
448: />
449: <path
450: d="M164.834 48.512C161.762 48.512 159.117 47.808 156.898 46.4C154.68 44.9493 152.973 43.008 151.778 40.576C150.584 38.1013 149.986 35.328 149.986 32.256C149.986 29.2267 150.562 26.3893 151.714 23.744C152.866 21.056 154.36 18.7093 156.194 16.704C158.072 14.656 160.056 13.0773 162.146 11.968C164.28 10.816 166.306 10.24 168.226 10.24C169.762 10.24 171.17 10.5387 172.45 11.136C173.73 11.7333 174.754 12.5867 175.522 13.696C176.333 14.8053 176.738 16.1493 176.738 17.728C176.738 20.0747 176.034 22.1227 174.626 23.872C173.261 25.5787 171.384 27.4773 168.994 29.568C167.202 31.1467 165.325 32.64 163.362 34.048C161.4 35.456 159.352 36.8427 157.218 38.208C158.584 41.0667 161.122 42.496 164.834 42.496C165.858 42.496 166.946 42.3467 168.098 42.048C169.25 41.7067 170.552 41.024 172.002 40C173.453 38.976 175.16 37.376 177.122 35.2C177.762 34.4747 178.466 34.1333 179.234 34.176C180.045 34.2187 180.749 34.5173 181.346 35.072C181.944 35.584 182.285 36.2453 182.37 37.056C182.498 37.824 182.242 38.5707 181.602 39.296C178.445 42.7947 175.458 45.2053 172.642 46.528C169.869 47.8507 167.266 48.512 164.834 48.512ZM156.13 31.744C157.752 30.6773 159.309 29.6107 160.802 28.544C162.296 27.4347 163.704 26.2827 165.026 25.088C167.245 23.1253 168.738 21.504 169.506 20.224C170.317 18.9013 170.722 18.0693 170.722 17.728C170.722 17.5573 170.594 17.28 170.338 16.896C170.082 16.4693 169.378 16.256 168.226 16.256C167.16 16.256 165.944 16.6613 164.578 17.472C163.256 18.24 161.954 19.328 160.674 20.736C159.437 22.144 158.392 23.7867 157.538 25.664C156.685 27.5413 156.216 29.568 156.13 31.744Z"
451: fill="white"
452: />
453: <path
454: d="M201.487 13.248C204.773 13.248 207.717 13.9733 210.319 15.424C212.922 16.8747 214.949 18.9013 216.399 21.504C217.893 24.1067 218.639 27.1147 218.639 30.528C218.639 33.9413 217.893 36.9707 216.399 39.616C214.949 42.2187 212.922 44.2453 210.319 45.696C207.717 47.1467 204.773 47.872 201.487 47.872C198.97 47.872 196.666 47.3813 194.575 46.4C192.485 45.4187 190.757 43.9893 189.391 42.112V47.488H183.503V0H189.647V18.688C191.013 16.896 192.719 15.552 194.767 14.656C196.815 13.7173 199.055 13.248 201.487 13.248ZM200.975 42.496C203.151 42.496 205.093 42.0053 206.799 41.024C208.549 40 209.914 38.592 210.895 36.8C211.919 34.9653 212.431 32.8747 212.431 30.528C212.431 28.1813 211.919 26.112 210.895 24.32C209.914 22.4853 208.549 21.0773 206.799 20.096C205.093 19.1147 203.151 18.624 200.975 18.624C198.842 18.624 196.901 19.1147 195.151 20.096C193.402 21.0773 192.037 22.4853 191.055 24.32C190.074 26.112 189.583 28.1813 189.583 30.528C189.583 32.8747 190.074 34.9653 191.055 36.8C192.037 38.592 193.402 40 195.151 41.024C196.901 42.0053 198.842 42.496 200.975 42.496Z"
455: fill="white"
456: />
457: <path
458: d="M256.568 13.568V47.488H250.68V42.112C249.315 43.9893 247.587 45.4187 245.496 46.4C243.406 47.3813 241.102 47.872 238.584 47.872C235.299 47.872 232.355 47.1467 229.752 45.696C227.15 44.2453 225.102 42.2187 223.608 39.616C222.158 36.9707 221.432 33.9413 221.432 30.528C221.432 27.1147 222.158 24.1067 223.608 21.504C225.102 18.9013 227.15 16.8747 229.752 15.424C232.355 13.9733 235.299 13.248 238.584 13.248C241.016 13.248 243.256 13.7173 245.304 14.656C247.352 15.552 249.059 16.896 250.424 18.688V13.568H256.568ZM239.096 42.496C241.23 42.496 243.171 42.0053 244.92 41.024C246.67 40 248.035 38.592 249.016 36.8C249.998 34.9653 250.488 32.8747 250.488 30.528C250.488 28.1813 249.998 26.112 249.016 24.32C248.035 22.4853 246.67 21.0773 244.92 20.096C243.171 19.1147 241.23 18.624 239.096 18.624C236.92 18.624 234.958 19.1147 233.208 20.096C231.502 21.0773 230.136 22.4853 229.112 24.32C228.131 26.112 227.64 28.1813 227.64 30.528C227.64 32.8747 228.131 34.9653 229.112 36.8C230.136 38.592 231.502 40 233.208 41.024C234.958 42.0053 236.92 42.496 239.096 42.496Z"
459: fill="white"
460: />
461: <path
462: d="M283.745 13.248C288.055 13.248 291.468 14.5067 293.985 17.024C296.545 19.4987 297.825 23.1467 297.825 27.968V47.488H291.681V28.672C291.681 25.3867 290.892 22.912 289.313 21.248C287.735 19.584 285.473 18.752 282.529 18.752C279.201 18.752 276.577 19.7333 274.657 21.696C272.737 23.616 271.777 26.3893 271.777 30.016V47.488H265.633V13.568H271.521V18.688C272.759 16.9387 274.423 15.5947 276.513 14.656C278.647 13.7173 281.057 13.248 283.745 13.248ZM319.82 31.68L312.78 38.208V47.488H306.636V0H312.78V30.464L331.276 13.568H338.7L324.428 27.584L340.108 47.488H332.556L319.82 31.68Z"
463: fill="white"
464: />
465: </svg>
466: </div>
467:
468: {/* Double intersecting circle Brand Logo - bottom right corner */}
469: <div className="absolute right-5 sm:right-6 bottom-5 sm:bottom-6 flex -space-x-3 items-center opacity-90">
470: <div className="w-5 h-5 sm:w-6 sm:h-6 rounded-full bg-white/20 backdrop-blur-[1px] border border-white/10" />
471: <div className="w-5 h-5 sm:w-6 sm:h-6 rounded-full bg-white/35 backdrop-blur-[1px] border border-white/10" />
472: </div>
473: </div>
474: </div>
475: );
476: }
477:
478: // Back face slice
479: if (isBackFace) {
480: const backBorderStyle = "border border-white/15";
481: const details = CARD_DETAILS[i % CARD_DETAILS.length];
482: return (
483: <div
484: key={layerIdx}
485: className={`absolute inset-0 rounded-[16px] ${backBorderStyle} pointer-events-none overflow-hidden`}
486: style={{
487: backgroundColor: baseBgColor,
488: transform: `translateZ(${zOffset}px) rotateX(180deg)`,
489: backfaceVisibility: 'hidden',
490: boxShadow: 'inset 0 1px 1px rgba(255,255,255,0.15)',
491: }}
492: >
493: {/* Render Video with premium 16px blur on the back face of the card */}
494: <div className="absolute inset-0 pointer-events-none" style={{ filter: 'blur(16px)', transform: 'scale(1.15)' }}>
495: <video
496: src={videoSrc}
497: autoPlay
498: loop
499: muted
500: playsInline
501: className="absolute inset-0 w-full h-full object-cover"
502: />
503: </div>
504:
505: {/* Premium Real Magnetic stripe */}
506: <div className="absolute left-0 right-0 top-4 sm:top-5 h-7 sm:h-9 bg-black/85 backdrop-blur-md z-10" />
507:
508: {/* Card holder info and details on the bottom-left */}
509: <div
510: className="absolute left-4 sm:left-6 bottom-4 sm:bottom-5 z-20 flex flex-col gap-0.5 sm:gap-1 text-left"
511: style={{ fontFamily: '"JetBrains Mono", monospace' }}
512: >
513: {/* Card Number */}
514: <div className="font-mono text-[10px] sm:text-[12px] font-medium tracking-[0.14em] text-white select-none">
515: {details.number}
516: </div>
517: {/* Owner & CVV */}
518: <div className="font-mono text-[7px] sm:text-[9px] font-medium text-white/70 tracking-wide flex items-center gap-2 select-none">
519: <span className="uppercase">{details.name}</span>
520: <span className="text-white/40 font-light">•</span>
521: <span>CVV: {details.cvv}</span>
522: </div>
523: </div>
524: </div>
525: );
526: }
527:
528: return null;
529: })}
530: </div>
531: ))}
532: </div>
533: </div>
534: </div>
535: );
536: }

Sup Verdance Agency 网站 Design Studio 深色 Emerald

No.1459 · 前端开发 · 社区/原生 · 来源：MotionSites (MIT) · EN 原文

{"summary": "A dark-emerald 'design studio / agency website' single page with an editorial, award-show feel. A fixed glassy forest-green nav (brass leaf wordmark + Start a project pill) sits above a hero whose signature move is a giant cream sans display headline ('AGENCY / WEBSITES') with an italic emerald-soft serif script accent ('that win') tucked at the baseline, a two-column studio statement, and a full-bleed feature photo capped with brass hairlines and a script caption. Below: an infinite-scroll trust marquee of award names separated by brass diamonds; a serif studio statement with a 4-up stat grid built from 1px brass gridlines; an asymmetric work grid (one tall card + two square cards + one wide editorial card) with photos tinted into the emerald palette and brass uppercase category labels; a thin numbered services list (4 rows, hairline-divided, no cards) with phosphor icons and a sliding brass arrow on hover; a recognition strip of three award cards plus a centered press-logo row; a centered closing CTA with a brass email pill + ghost 'Book a call'; and a 4-column footer. The whole thing is built from two surfaces (forest #0d1f17 and a deeper forestDeep #0a1711), cream #f1ede3 text, a muted creamDim #b8b3a6, an emerald/emeraldSoft green accent, and a single brass #c9a227 metallic for hairlines, labels, and primary buttons. Inter for display + UI, Fraunces italic serif for the script accents and editorial type.", "style": {"description": "Premium, calm, editorial dark mode in a deep emerald 'forest' palette with a brass metallic accent. The page is built from just two near-black green surfaces (forest #0d1f17 as the warmer base and forestDeep #0a1711 as the deeper alternating band) separated by 1px brass hairlines (rgba(201,162,39,0.32)) rather than by hard color blocks. Text is cream #f1ede3 for primary and a soft muted creamDim #b8b3a6 for secondary/eyebrows. There are two accents working together: a green pair (emerald #1f6f4f and the lighter emeraldSoft #2c8a63) used for glows, washes, the script-italic headline accents, and service icons; and a single brass/gold #c9a227 metallic used for ALL hairlines, the bracketed uppercase section labels, award diamonds, primary pill buttons, and link underlines. The signature contrast is typographic: a tight, heavy Inter display face (font-weight 700, letter-spacing -0.045em, line-height 0.92) for the GIANT uppercase headlines, set against an italic Fraunces serif ('script') used for small lyrical accents ('that win', 'considered', 'projects', 'in mind?') and for editorial stat numbers and pull-quotes. Atmosphere comes from craft, not noise: a faint fractal-noise grain overlay (opacity 0.05) on the hero and CTA, large soft emerald radial blur glows, photos pushed into the palette with a desaturate+sepia 'work-img' filter plus an emerald multiply 'tint', a centered brass-line gradient hairline (transparent -> brass -> transparent), and an infinite CSS marquee. Restrained, high-craft, Awwwards-studio energy.", "prompt": "Dark-emerald editorial design-studio / agency website with a single brass metallic accent. Exact palette via tailwind.config custom colors: forest #0d1f17 (warmer base surface + body bg), forestDeep #0a1711 (deeper alternating band / footer / marquee), emerald #1f6f4f and emeraldSoft #2c8a63 (green accent pair for glows/washes/script accents/service icons), cream #f1ede3 (primary text), creamDim #b8b3a6 (secondary text + uppercase eyebrows), brass #c9a227 (the ONE metallic accent: all hairlines, bracketed labels, award diamonds, primary buttons, link underlines). Body is bg-forest text-cream font-sans antialiased with selection:bg-emerald selection:text-cream. Two font families: sans = Inter (system-ui fallback), serif = Fraunces (Georgia fallback). Define .display { font-family: Inter; font-weight: 700; letter-spacing: -0.045em; line-height: 0.92 } for the giant uppercase headlines, and .script { font-family: Fraunces; font-style: italic; font-weight: 400; letter-spacing: -0.01em } for the lyrical accents (usually colored text-emeraldSoft). Hairlines use .hairline { border-color: rgba(201,162,39,0.32) }. A brass gradient divider .brass-line { background: linear-gradient(90deg, rgba(201,162,39,0) 0%, rgba(201,162,39,0.55) 18%, rgba(201,162,39,0.55) 82%, rgba(201,162,39,0) 100%) }. Grain texture .grain::before is an absolutely-positioned inset-0 fractalNoise SVG data-URI at opacity 0.05. Imagery is forced into the palette: .work-img { filter: saturate(0.55) brightness(0.82) contrast(1.02) sepia(0.12); transition transform .7s + filter .7s } that eases to saturate(0.78) brightness(0.95) on .work-card:hover, plus a .tint::after emerald multiply overlay (linear-gradient(150deg, rgba(13,31,23,0.32), rgba(31,111,79,0.30)); mix-blend-mode multiply). Nav links use a .nav-link::after brass underline that grows from width 0 to 100% on hover. The trust strip uses .marquee { animation: marquee 32s linear infinite } translating -50%. Soft emerald glows are pointer-events-none absolute rounded-full bg-emerald/10-/20 with blur-[140px]+. Honor prefers-reduced-motion (disable marquee + smooth scroll). Icons are Iconify Phosphor (ph:) glyphs. html { scroll-behavior: smooth }.", "prompt_typography": "Two families only. Inter (Google Fonts weights 400;500;600;700) as font-sans with system-ui fallback, antialiased; Fraunces italic (opsz 9..144, weights 400;500, italic) as font-serif with Georgia fallback. Giant hero display: .display (Inter 700, -0.045em, line-height 0.92) at text-[clamp(3.2rem,13.5vw,12rem)] in cream, with an inline .script accent at text-[clamp(2.6rem,12vw,11rem)] leading-[0.8] in emeraldSoft. Section H2 display: text-[clamp(2.2rem,5.5vw,4.2rem)] -> [clamp(2.4rem,6vw,4.6rem)] .display cream with a normal-weight .script emeraldSoft accent word. CTA H2: text-[clamp(2.6rem,8vw,6.5rem)]. Editorial body: Fraunces serif at text-[clamp(1.6rem,3.4vw,2.7rem)] leading-[1.28] cream for the studio statement; stat numbers in font-serif text-[34px] cream with a brass +/%/0 suffix; award titles font-serif text-[26px]->[30px]. UI eyebrows: bracketed text-[12px] uppercase tracking-[0.22em] in brass (e.g. '[ The Studio ]'); other eyebrows text-[12px] tracking-[0.2em] uppercase creamDim. Nav links text-[13px] tracking-wide creamDim uppercase. Body copy text-[15px]->[18px] leading-relaxed creamDim with key phrases promoted to cream."}, "layout_and_structure": {"description": "A single-column, vertically stacked, frameless responsive marketing page that alternates between the two forest surfaces. Almost every section centers inside mx-auto max-w-[1240px] with px-6 -> lg:px-10 padding. Order top to bottom: a fixed glassy nav; a hero (a small meta row, a giant two-line display headline with an italic script accent, a 2-column studio-statement + scroll-cue row, then a full-bleed feature photo capped by a brass hairline with a script caption); an infinite-scroll trust marquee of award names on the deeper surface; a serif studio statement section (a 3/9 label + paragraph split, with a 4-up stat grid built from 1px brass gridlines); an asymmetric work grid (a tall col-span row + two square cards in a 2-col grid, then a full-width wide editorial card) with bottom-gradient captions; a thin numbered services list (4 hairline-divided rows on a 12-col grid, no cards); a recognition strip (a 3-up award-card grid built from brass gridlines + a centered wrapping press-logo row) on the deeper surface; a centered closing CTA over a grain wash with two pill CTAs + a social-icon row; and a dark 4-column footer with a hairline divider and a bottom legal row. Reflow: the hero statement row is lg:grid-cols-12 (paragraph col-span-6 + right-aligned scroll cue col-span-6) -> stacked; the studio split is lg:grid-cols-12 (3/9) and its stat grid grid-cols-2 -> md:grid-cols-4; the work grid is md:grid-cols-2 with the first card md:row-span-2 (tall) and the wide card full-width below; the services rows are grid-cols-12 with the description hidden below lg; the recognition cards are md:grid-cols-3; the footer is md:grid-cols-12 (5 / 3-at-7 / 3); the nav links + the desktop CTA hide below md and swap to a brass-bordered hamburger that opens a full-width mobile menu panel; everything collapses to one column on mobile.", "prompts": [{"part": "Sticky glass nav", "prompt": "A fixed top-0 inset-x-0 z-50 header. Inner bar = backdrop-blur-md bg-forestDeep/70 with a 1px bottom .hairline border. Inside: a nav mx-auto max-w-[1240px] px-6 -> lg:px-10 h-[68px] flex items-center justify-between. Left = brand lockup: an h-8 w-8 rounded-full border border-brass/60 circle holding a brass ph:leaf-fill (18px) + the wordmark 'Verdance' (text-[17px] font-semibold cream) with a tiny brass superscript registered mark. Center (hidden md:flex gap-9, text-[13px] tracking-wide creamDim uppercase): WORK / SERVICES / RECOGNITION / STUDIO, each a .nav-link that grows a brass underline on hover and goes text-cream. Right: a 'Start a project' pill (hidden sm:inline-flex, rounded-full border border-brass/60 px-5 py-2 text-[13px] cream + a ph:arrow-up-right, hover:bg-brass hover:text-forestDeep) and a md:hidden hamburger button (h-10 w-10 rounded-full border border-brass/60, ph:list icon) that toggles a mobile menu. Mobile menu panel = md:hidden hidden border-b .hairline backdrop-blur-md bg-forestDeep/95: a px-6 py-6 flex-col of the four nav links (each py-3 text-[15px] cream with a brass ph:arrow-up-right and a faint brass bottom border) + a solid brass 'Start a project' pill. JS toggles .hidden, swaps the ph:list/ph:x icon + aria-expanded, closes on link click / Escape / >=768px."}, {"part": "Hero", "prompt": "A relative .grain overflow-hidden bg-forest section, pt-[68px], with two pointer-events-none absolute emerald radial glows (bg-emerald/20 and /10, blur-[140px]+, top-right and left). Content z-10 mx-auto max-w-[1240px] px-6 -> lg:px-10. Top meta row (pt-8, flex justify-between, text-[12px] tracking-[0.2em] uppercase creamDim): left = an emeraldSoft dot + 'Studio est. 2019'; right (hidden sm) = 'Design - Strategy - Build'. Headline block (pt-10 -> lg:pt-16): an .display cream H1 'AGENCY' at text-[clamp(3.2rem,13.5vw,12rem)], then a second .display H1 'WEBSITES' (flex flex-wrap items-end) with an inline .script emeraldSoft accent 'that win' at text-[clamp(2.6rem,12vw,11rem)] leading-[0.8] tucked at the baseline (ml-1 -mb-2). Statement row (mt-12 -> lg:mt-16, grid lg:grid-cols-12 gap-8 items-end pb-16 -> lg:pb-24): a col-span-6 max-w-xl text-[16px]->[18px] leading-relaxed creamDim paragraph ('We are a design studio crafting grounded, high-craft websites for agencies and ambitious brands...') with the key phrase promoted to cream; a col-span-6 lg:justify-end scroll cue = an h-14 w-14 rounded-full border border-brass/60 circle with a ph:arrow-down (group-hover:bg-emerald + arrow nudges) beside a 'View selected work' text-[13px] tracking-[0.18em] uppercase label."}, {"part": "Hero feature image (full-bleed)", "prompt": "Directly under the hero copy, a relative z-10 w-full block. First a .brass-line h-px w-full divider, then a relative h-[340px] -> sm:h-[440px] -> lg:h-[560px] overflow-hidden image band: a full-cover .work-img Unsplash workspace photo with an inline filter:saturate(0.7) brightness(0.62), an absolute bg-gradient-to-t from-forest via-forest/20 to-forest/40 to anchor it into the page, plus an absolute bg-emerald/10 mix-blend-multiply tonal wash. Caption row absolute bottom-8 inset-x (left/right 6 -> lg:10), flex items-end justify-between: a .script cream/90 line 'Designed in the open.' at text-[22px]->[34px] on the left, and a 'No. 001 - The Workspace' text-[12px] tracking-[0.2em] uppercase creamDim label on the right."}, {"part": "Trust marquee", "prompt": "A border-y .hairline bg-forestDeep overflow-hidden strip. Inside a flex whitespace-nowrap py-5: a .marquee (animation: marquee 32s linear infinite, translateX -> -50%) flex gap-12 of award names at text-[13px] tracking-[0.22em] uppercase creamDim, each separated by a text-brass diamond glyph: Awwwards Honors / CSS Design Awards / FWA of the Day / Webby Nominee / Site Inspire Featured. Duplicate the run (aria-hidden) so the loop is seamless. Disable the animation under prefers-reduced-motion."}, {"part": "Studio statement + stat grid", "prompt": "Section id=studio, relative bg-forest py-24 -> lg:py-36. Content mx-auto max-w-[1240px] px-6 -> lg:px-10, grid lg:grid-cols-12 gap-10 -> lg:gap-16. Left col-span-3 = a bracketed brass eyebrow '[ The Studio ]' (text-[12px] tracking-[0.22em] uppercase). Right col-span-9 = a font-serif statement at text-[clamp(1.6rem,3.4vw,2.7rem)] leading-[1.28] cream with an inline .script emeraldSoft accent word ('considered'). Below it a stat grid (mt-12): grid grid-cols-2 -> md:grid-cols-4 gap-px on a bg-brass/20 base with a bounding border .hairline (so the 1px gaps read as brass gridlines), each cell bg-forest p-6 with a font-serif text-[34px] cream number carrying a brass + / % suffix and a text-[12px] tracking-[0.14em] uppercase creamDim label: 120+ Sites shipped / 7 Awards won / 14 Countries served / 98% Client return rate."}, {"part": "Work grid (asymmetric)", "prompt": "Section id=work, relative bg-forestDeep py-20 -> lg:py-28. Header (flex-col -> md:flex-row md:items-end justify-between, mb-12 -> lg:mb-16): a bracketed brass eyebrow '[ Selected Work ]' + a .display cream H2 'Recent' at text-[clamp(2.4rem,6vw,4.6rem)] with a normal-weight .script emeraldSoft accent 'projects'; and a md:max-w-xs creamDim sub-paragraph. Grid = grid md:grid-cols-2 gap-5 -> lg:gap-6: card 1 is a tall md:row-span-2 .work-card (a .tint aspect-[4/5]->md:h-full image), cards 2 and 3 are square .work-cards (aspect-[16/10] images). Each card = a group relative overflow-hidden rounded-2xl border .hairline bg-forest <a>, a .tint-wrapped .work-img photo, and an absolute inset-x-0 bottom-0 caption over a bg-gradient-to-t from-forestDeep: a brass text-[12px] tracking-[0.18em] uppercase category ('Brand - Web' / 'E-commerce' / 'SaaS - Marketing'), a font-serif cream title (Marrow Studio / Atlas Goods Co. / Fernway Labs), and a round border-cream/30 ph:arrow-up-right button that flips to bg-brass text-forestDeep on group-hover. Then a full-width wide editorial card (mt-5 -> lg:mt-6): a .work-card with a .tint .tint-soft h-[260px]->[360px] image, an absolute bg-forestDeep/45 floor + a bg-gradient-to-r from-forestDeep directional reinforcement, and a relative z-2 flex items-center justify-between p-8->p-12 row holding a max-w-md rounded-xl bg-forestDeep/55 backdrop-blur ring-1 ring-brass/15 caption card (brass category, a font-serif text-[32px]->[48px] title 'Heron & Field' with a .script emeraldSoft 'journal', a small cream/90 line) beside a large round arrow button (hidden sm)."}, {"part": "Services list (thin, numbered)", "prompt": "Section id=services, relative bg-forest py-20 -> lg:py-28. Header (grid lg:grid-cols-12 gap-10, mb-10 -> lg:mb-14): left col-span-5 = a bracketed brass eyebrow '[ What we do ]' + a .display cream H2 'Services,' at text-[clamp(2.2rem,5.5vw,4.2rem)] with a normal .script emeraldSoft 'end to end'; right col-span-7 lg:pt-12 = a creamDim sub-paragraph (lg:max-w-md lg:ml-auto). List = a border-t .hairline wrapper of four .svc-row rows, each a group grid grid-cols-12 items-center gap-4 px-2->lg:px-6 py-7->lg:py-9 border-b .hairline that lightens to bg-[rgba(31,111,79,0.10)] on hover: a col-span-2->lg:col-span-1 creamDim font-serif index (01-04); a col-span-8->lg:col-span-3 group of an emeraldSoft phosphor icon (ph:compass-tool / ph:pen-nib / ph:code / ph:cursor-click, 26px->30px) + a text-[20px]->[26px] font-semibold cream title (Strategy & Brand / Web Design / Development / Motion & Care); a hidden lg:block col-span-6 text-[14px] creamDim description; and a col-span-2 justify-end .svc-arrow brass ph:arrow-right (text-[24px], opacity .4) that slides translateX(6px) + goes opacity 1 on row hover."}, {"part": "Recognition strip", "prompt": "Section id=recognition, relative bg-forestDeep py-20 -> lg:py-28 border-y .hairline. Header (flex items-center gap-4 mb-12): a bracketed brass eyebrow '[ Recognition ]' + a .brass-line h-px flex-1 divider. Award cards = grid md:grid-cols-3 gap-px on a bg-brass/20 base with a bounding border .hairline (brass gridlines), each cell bg-forest p-8->lg:p-10: a brass phosphor icon (ph:trophy / ph:medal / ph:star, 28px), a font-serif text-[26px]->[30px] cream title (Site of the Day / Best UI, Gold / FWA of the Day), a text-[13px] tracking-[0.14em] uppercase creamDim attribution line (Awwwards - 2025 / CSS Design Awards - 2025 / The FWA - 2024), and a text-[14px] creamDim body line. Below (mt-12): a flex flex-wrap justify-center gap-x-10 gap-y-6 press-logo row in creamDim/70, mixing font-serif italic and tracked uppercase wordmarks (Communication Arts / SITEINSPIRE / The Webby Awards / LANDBOOK) separated by faint brass slashes."}, {"part": "Closing CTA", "prompt": "Section id=contact, relative .grain overflow-hidden bg-forest py-24 -> lg:py-36, with a large bottom-centered emerald radial glow (bg-emerald/15 blur-[150px]). Centered content z-10 mx-auto max-w-[1240px] px-6 -> lg:px-10 text-center: a bracketed brass eyebrow '[ Let's begin ]'; a .display cream H2 'Have a project' at text-[clamp(2.6rem,8vw,6.5rem)] with a normal .script emeraldSoft 'in mind?' on its own line; a mx-auto max-w-lg creamDim sub-paragraph; a CTA row (mt-11, flex-col -> sm:flex-row justify-center gap-4): a solid brass email pill (rounded-full bg-brass px-8 py-4 text-[15px] font-semibold text-forestDeep + a ph:paper-plane-tilt, hover:bg-emeraldSoft hover:text-cream) and a ghost 'Book a call' pill (rounded-full border border-brass/60 cream + a ph:calendar-blank, hover:bg-emerald); then a row of four social icon links (ph:x-logo / ph:instagram-logo / ph:linkedin-logo / ph:dribbble-logo, creamDim hover:text-brass)."}, {"part": "Footer (dark, 4-column)", "prompt": "A footer bg-forestDeep with a border-t .hairline. Inside mx-auto max-w-[1240px] px-6 -> lg:px-10 py-14: a grid md:grid-cols-12 gap-10. First block md:col-span-5 = the brand lockup (brass leaf circle + 'Verdance' cream wordmark with brass superscript mark), a max-w-sm creamDim blurb, and a 'Lisbon - Remote worldwide' line. Then md:col-span-3 md:col-start-7 'Navigate' column and md:col-span-3 'Elsewhere' column, each a text-[12px] tracking-[0.2em] uppercase brass heading + a space-y-2.5 list of text-[15px] creamDim links that hover:text-cream. Bottom: a mt-12 pt-7 border-t .hairline row, flex-col -> sm:flex-row justify-between, text-[13px] creamDim: a copyright line and a 'Crafted with care' line with an emeraldSoft ph:leaf."}]}, "special_ui_components": [{"component": "Giant display headline with italic serif script accent", "description": "The brand signature: a huge, tight, uppercase Inter display headline (AGENCY / WEBSITES) with a small italic Fraunces serif accent in emerald-soft green ('that win') tucked at the baseline, and the same display-vs-script pairing reused for every section H2 ('Recent projects', 'Services, end to end', 'Have a project in mind?').", "prompt": "Define .display { font-family: Inter; font-weight: 700; letter-spacing: -0.045em; line-height: 0.92 } and .script { font-family: Fraunces; font-style: italic; font-weight: 400; letter-spacing: -0.01em }. Hero H1 = two .display lines in cream at text-[clamp(3.2rem,13.5vw,12rem)], the second line flex flex-wrap items-end with an inline .script text-emeraldSoft accent at text-[clamp(2.6rem,12vw,11rem)] leading-[0.8] ml-1 -mb-2 so it sits on the baseline of the caps. Reuse the pattern on each section H2 (a .display cream phrase + a normal-tracking .script emeraldSoft accent word). Add a tiny text-shadow on .script.text-emeraldSoft for AA-large headroom on forest."}, {"component": "Brass-hairline grid system + brass-line divider", "description": "Instead of color blocks, the page is structured by a single brass metallic at low opacity: hairline section borders, the stat/award grids built as gap-px on a brass/20 base, and a centered transparent->brass->transparent gradient rule.", "prompt": "Use .hairline { border-color: rgba(201,162,39,0.32) } for nav/section/footer borders. Build the stat grid and the recognition cards as grid gap-px on a bg-brass/20 base wrapped in a border .hairline, each cell bg-forest, so the 1px gutters read as fine brass gridlines. Use .brass-line { background: linear-gradient(90deg, rgba(201,162,39,0) 0%, rgba(201,162,39,0.55) 18%, rgba(201,162,39,0.55) 82%, rgba(201,162,39,0) 100%) } as an h-px divider under the hero and beside the Recognition eyebrow. The brass #c9a227 is the ONLY metallic and also fills the bracketed eyebrows, award diamonds, primary pill buttons, and the .nav-link hover underline."}, {"component": "Palette-tinted work photography (.work-img + .tint)", "description": "All portfolio imagery is pushed into the emerald palette so photos never break the dark-green mood: a desaturate + sepia + dim filter that warms on hover, plus an emerald multiply overlay, with extra forest floors on the text-bearing wide card so captions stay legible.", "prompt": "Define .work-img { filter: saturate(0.55) brightness(0.82) contrast(1.02) sepia(0.12); transition: transform .7s cubic-bezier(.16,1,.3,1), filter .7s ease } and ease it to saturate(0.78) brightness(0.95) sepia(0.06) + transform scale(1.05) on .work-card:hover. Wrap images in a .tint container whose ::after is an emerald multiply overlay (linear-gradient(150deg, rgba(13,31,23,0.32), rgba(31,111,79,0.30)); mix-blend-mode multiply). For cards that carry body copy over the image, add .tint-soft (a lighter work-img filter) plus an absolute bg-forestDeep/45 floor and a bg-gradient-to-r from-forestDeep directional gradient so text never relies on a bright region of the photo."}, {"component": "Infinite award marquee", "description": "A seamless horizontally-scrolling strip of award/press names separated by brass diamonds, sitting on the deeper forestDeep band as a quiet credibility bar.", "prompt": "A border-y .hairline bg-forestDeep overflow-hidden strip; inside, a .marquee { animation: marquee 32s linear infinite } where @keyframes marquee translates from translateX(0) to translateX(-50%). Render the award list twice (the second copy aria-hidden) so the loop is seamless, items at text-[13px] tracking-[0.22em] uppercase creamDim separated by a text-brass diamond. Respect prefers-reduced-motion by setting .marquee { animation: none }."}, {"component": "Numbered hairline services list with sliding brass arrow", "description": "A thin, card-less services list where each discipline is a full-width row (index + icon + title + description + arrow) divided by brass hairlines, with a green wash and a sliding brass arrow on hover.", "prompt": "A border-t .hairline wrapper of .svc-row rows, each a grid grid-cols-12 items-center border-b .hairline with a .svc-row:hover { background-color: rgba(31,111,79,0.10) }. Columns: a font-serif index (01-04) in creamDim, an emeraldSoft phosphor icon + a font-semibold cream title, a hidden-below-lg creamDim description, and a justify-end .svc-arrow { transition: transform .4s, opacity .4s; opacity:.4 } brass ph:arrow-right that on .svc-row:hover goes transform: translateX(6px) + opacity 1."}], "special_notes": "Frameless, fully responsive editorial design-studio / agency website (no browser chrome / no device frame): every section centers in mx-auto max-w-[1240px] with px-6 -> lg:px-10 and alternates between the two forest surfaces (forest #0d1f17 and forestDeep #0a1711). Reflow: the hero statement row is lg:grid-cols-12 (paragraph col-span-6 + scroll cue col-span-6); the studio split is lg:grid-cols-12 (3/9) with a grid-cols-2 -> md:grid-cols-4 stat grid; the work grid is md:grid-cols-2 with the first card md:row-span-2 (tall) and a full-width wide editorial card below; services are grid-cols-12 rows with the description hidden below lg; recognition is md:grid-cols-3; the footer is md:grid-cols-12 (5 / 3-at-7 / 3); below md the nav links + desktop CTA hide and a brass hamburger opens a full-width backdrop-blur mobile menu (JS toggles .hidden, swaps ph:list/ph:x, closes on link/Escape/>=768px); everything collapses to one column on mobile. Built with Tailwind via CDN plus a small tailwind.config registering the custom colors (forest #0d1f17, forestDeep #0a1711, emerald #1f6f4f, emeraldSoft #2c8a63, cream #f1ede3, creamDim #b8b3a6, brass #c9a227) and two font families (sans: Inter, serif: Fraunces). Google Fonts loads Inter 400-700 and Fraunces italic (opsz 9..144, 400;500); icons are Iconify Phosphor (ph:) glyphs. All copy and the 'Verdance' brand are placeholders meant to be swapped: the transferable value is (1) the dark-emerald two-surface palette with a SINGLE brass metallic accent and a cream/creamDim text scale, (2) the Inter-display-vs-italic-Fraunces-script typographic signature (giant tight uppercase headline + lyrical serif accent words), and (3) the high-craft editorial agency LAYOUT (glass nav -> giant-headline hero with full-bleed tinted feature photo -> award marquee -> serif studio statement with a brass-gridline stat grid -> asymmetric work grid with palette-tinted photography -> thin numbered services list -> recognition cards + press row -> grain CTA -> 4-column footer), NOT the specific studio. Strictly keep the palette: emerald greens + a single brass gold on deep forest; no other accent hue."}

Sup Prism Frosted 玻璃 Pastel Agency Studio

No.1460 · 前端开发 · 社区/原生 · 来源：MotionSites (MIT) · EN 原文

{"summary": "A light, airy agency studio homepage built on soft-pastel glassmorphism: a #fbfcff mesh-gradient canvas blooming with peach #ffd8c2, sky #cfe3ff and mint #d3f5e3 radial clouds, layered with frosted-glass surfaces (translucent white sheets, backdrop-blur, 1px white borders, soft colored shadows, faint grain). A floating pill-shaped glass sticky nav sits above a centered hero (three glass pill badges, a huge near-black Inter-black headline 'Websites that make brands look inevitable', a slate lead, a dark pill CTA + a glass secondary pill) staged over a band of three fanned, overlapping translucent UI mock cards (mint -6deg, sky +6deg, and an upright frosted browser card on top). Below: a faded trust logo strip; a frosted bento WORK grid (a 4x2 feature, a dark +240% stat tile, and tinted small/wide cards); a large glass-deep SERVICES panel with three cards (one dark 'Most loved'); a three-up testimonial row with a dark feature quote; a frosted closing CONTACT CTA; and a glass-divided footer. The signature is the contrast of soft pastel frosted glass against a single near-black #15161b ink accent on CTAs and one card per section, all in tight Inter black type.", "style": {"description": "Soft, premium, light-mode glassmorphism. The page floats on a #fbfcff canvas washed by four overlapping pastel radial glows (peach #ffd8c2, sky #cfe3ff, mint #d3f5e3) so the background is always softly colored, never flat white. On top sit translucent frosted-glass surfaces: a lighter .glass (rgba(255,255,255,0.55) + blur(22px) saturate(140%)) for the nav, pills and bento tiles, and a heavier .glass-deep (rgba(255,255,255,0.42) + blur(28px) saturate(150%)) for the big hero cards and services/CTA panels, each ringed by a bright 1px white border. Depth is soft and colored: shadow-soft and shadow-float use blue-violet-tinted, heavily-feathered drop shadows (rgba(60,70,110,..) / rgba(50,60,105,..)), and a faint dotted .grain overlay (mix-blend overlay, opacity .18) gives the glass a frosted, photographic texture. The single high-contrast accent is near-black ink #15161b: it fills the primary pill CTAs, the logo square, and exactly one dark card per section (the +240% stat tile, the 'Most loved' service card, the feature testimonial). Pastel tints (peach/sky/mint) appear only as gentle gradient washes on glass cards, traffic-light dots, status dots, avatars, mini-chart bars and icon chips. Everything is heavily rounded (rounded-full pills + rounded-[26-40px] cards) and the type is tight Inter black, which keeps the whole thing premium, friendly and engineered rather than toy-like.", "prompt": "Light, premium glassmorphism agency site on a soft pastel mesh-gradient canvas. Load Tailwind via CDN and register exact custom colors in tailwind.config theme.extend.colors: ink '#15161b', slate2 '#5c606e', peach '#ffd8c2', sky '#cfe3ff', mint '#d3f5e3'; fontFamily.sans = ['Inter','system-ui','sans-serif']; letterSpacing.tightest '-0.045em'. Body is class 'mesh font-sans text-ink antialiased overflow-x-hidden'. The .mesh background = background-color:#fbfcff with four layered radial-gradients of the pastel tints: radial-gradient(58% 52% at 12% 8%, rgba(255,216,194,0.9) 0%, transparent 60%), radial-gradient(55% 50% at 88% 14%, rgba(207,227,255,0.95) 0%, transparent 62%), radial-gradient(60% 55% at 78% 72%, rgba(211,245,227,0.9) 0%, transparent 60%), radial-gradient(48% 44% at 30% 88%, rgba(255,216,194,0.55) 0%, transparent 60%). A .mesh-band variant (mint-left / sky-right / peach-bottom radials) tints the large panels. The signature surface is frosted glass: .glass = background rgba(255,255,255,0.55) + backdrop-filter blur(22px) saturate(140%) + 1px border rgba(255,255,255,0.75); .glass-deep = rgba(255,255,255,0.42) + blur(28px) saturate(150%) + 1px border rgba(255,255,255,0.7). Depth is soft and colored, never harsh: .shadow-soft = 0 24px 60px -28px rgba(60,70,110,0.35), 0 4px 16px -8px rgba(60,70,110,0.12); .shadow-float = 0 40px 90px -36px rgba(50,60,105,0.45). The one solid control is .btn-dark = background #15161b + box-shadow 0 10px 26px -10px rgba(21,22,27,0.5) with white text. A faint .grain overlay (::after radial-gradient(rgba(255,255,255,0.6) 1px, transparent 1px) background-size 4px 4px, opacity .18, mix-blend overlay) sits on glass cards. ::selection is background #ffd8c2 / color #15161b. html { scroll-behavior:smooth }. Icons are Iconify Phosphor (ph:) fill glyphs; accent icon tints are peach-orange #e88a5a/#d9743f, sky-blue #4f8cd6/#3f72c4, mint-green #3fae7a. Everything rounded heavily (rounded-full nav/pills/buttons, rounded-[26px]/[28px]/[36px]/[40px] cards/panels).", "prompt_typography": "Inter only (Google Fonts, weights 400;500;600;700;800;900) as font-sans with system-ui fallback, antialiased + optimizeLegibility. Display headings are Inter black (font-black, 800-900) with tracking-tightest (-0.045em) and tight leading: hero H1 text-[52px] -> sm:text-[68px] -> md:text-[88px] leading-[0.96]; section H2s text-[34px]/[36px] -> md:text-[48px]/[52px] leading-[1.02-1.04]; the closing CTA H2 text-[40px] -> md:text-[64px] leading-[0.98]. Body/lead copy is text-[16-19px] leading-relaxed in slate2 #5c606e, with key phrases bumped to font-semibold text-ink. Eyebrows/labels are text-[12-13px] font-semibold uppercase tracking-[0.14em-0.18em] in slate2. Card titles font-extrabold tracking-tight; pill badges/buttons text-[13.5-15.5px] font-semibold. Big stat number (+240%) text-[46px] font-black tracking-tightest."}, "layout_and_structure": {"description": "A single-column, vertically stacked, frameless responsive marketing page on the pastel mesh canvas. Almost every section centers in mx-auto max-w-6xl with px-5. Order top to bottom: a floating pill-shaped sticky glass nav (header sticky top-0 z-50, the nav itself a rounded-full glass bar inset by px-5 pt-4); a centered hero (three glass pill badges, a huge Inter-black headline, a slate lead paragraph, a dark pill primary CTA + a glass secondary pill) sitting above a band of three fanned, overlapping translucent glass UI cards (a left mint-tinted card rotated -6deg, a right sky-tinted card rotated +6deg, and a centered frosted browser-style card on top); a faded centered trust logo strip (5 Phosphor-glyph wordmarks); a frosted bento WORK grid; a large glass-deep SERVICES panel (mesh-band tinted) holding three service cards; a centered three-up testimonial/clients row; a frosted closing CONTACT CTA panel; and a footer divided by white hairline borders. Reflow: the nav center links hide below md (logo + CTA remain); the hero headline drops its <br> below sm; the floating-card band scales height 300px -> sm:380px -> md:440px and cards shift inward (md:left-[8%]/right-[8%]); the bento grid is grid-cols-1 -> md:grid-cols-6 with md:auto-rows-[230px] and explicit col-span/row-span (a 4x2 feature, a 2-col dark stat, a 2-col small, two 3-col wides); the services grid is grid-cols-1 -> md:grid-cols-3; testimonials grid-cols-1 -> md:grid-cols-3; the footer is a flex-col -> md:flex-row with a 2 -> sm:3 col link grid; everything collapses to one column on mobile with no horizontal overflow (body overflow-x-hidden).", "prompts": [{"part": "Floating glass sticky nav", "prompt": "A header sticky top-0 z-50 w-full with px-5 pt-4 so the bar floats off the top edge. Inside: a nav mx-auto max-w-6xl flex items-center justify-between rounded-full .glass .shadow-soft px-3 py-2.5. Left = brand lockup: a 9x9 rounded-xl .btn-dark square holding a white ph:triangle-fill (15px) rotated 180deg, beside the wordmark 'Prism' (text-[17px] font-extrabold tracking-tightest). Center (hidden md:flex) = a rounded-full bg-white/45 px-1.5 py-1 segmented group of links Work / Services / Clients / Contact, each rounded-full px-4 py-2 text-[14px] font-medium text-slate2 that on hover gets bg-white + text-ink. Right = a .btn-dark rounded-full px-5 py-2.5 text-[14px] font-semibold text-white 'Start a project' pill with a trailing 1.5x1.5 rounded-full bg-mint dot; hover:opacity-90."}, {"part": "Hero (centered, pastel)", "prompt": "A centered section mx-auto max-w-6xl px-5 pt-24 -> md:pt-32 pb-8 text-center. Top: a flex-wrap justify-center gap-2.5 row of three .glass .shadow-soft rounded-full px-4 py-2 text-[13.5px] font-semibold pill badges, each a ph: fill icon + label: ph:sparkle-fill in #e88a5a 'Brand-first', ph:lightning-fill in #4f8cd6 'Ships in weeks', ph:check-circle-fill in #3fae7a 'Conversion-built'. Then an H1 mx-auto max-w-4xl text-[52px] -> sm:text-[68px] -> md:text-[88px] font-black leading-[0.96] tracking-tightest: 'Websites that make' <br hidden sm:block> 'brands look inevitable'. Below (mt-7) a mx-auto max-w-xl text-[17px] -> md:text-[19px] leading-relaxed text-slate2 lead with the phrase 'convert, scale, and feel premium' bumped to font-semibold text-ink. CTA row mt-9 flex-col -> sm:flex-row gap-3 justify-center: a .btn-dark rounded-full px-7 py-3.5 text-[15px] font-semibold text-white 'Book a kickoff call' + ph:arrow-up-right-bold; and a .glass .shadow-soft rounded-full px-7 py-3.5 text-[15px] font-semibold text-ink 'See the work' pill with a trailing 1.5x1.5 bg-ink dot (hover:bg-white)."}, {"part": "Fanned floating glass cards", "prompt": "Directly under the hero copy, a relative mx-auto max-w-6xl px-5 mt-2 band h-[300px] -> sm:h-[380px] -> md:h-[440px] holding three absolutely-positioned translucent UI cards that fan and overlap. Left card: absolute left-[3%] -> md:left-[8%] top-[18%] w-[40%] -rotate-6 rounded-[26px] .glass-deep .shadow-float .grain overflow-hidden, inline style background linear-gradient(160deg, rgba(211,245,227,0.85), rgba(255,255,255,0.35)) (mint tint); inside p-5 -> md:p-7 = skeleton bars (rounded-full bg-white/80,/55,/45) + a 2-col grid of two h-14 rounded-xl white/65,/45 blocks. Right card: mirror it (right-[3%] -> md:right-[8%], +rotate-6, sky tint linear-gradient(200deg, rgba(207,227,255,0.85), rgba(255,255,255,0.35))) with an icon+label header, two skeleton bars, and an h-16 block. Center card (on top): absolute left-1/2 top-0 -translate-x-1/2 w-[46%] max-w-[420px] rounded-[28px] .glass-deep .shadow-float .grain overflow-hidden, faking a browser window: a border-b border-white/50 header row with three traffic-light dots (bg-peach, bg-sky, bg-mint) + a white/70 url bar, then a grid grid-cols-5 gap-4 p-6 with a col-span-2 h-24 white/75 thumb and a col-span-3 stack of skeleton bars ending in an h-7 w-2/5 rounded-full bg-ink/85 faux button."}, {"part": "Trust logo strip", "prompt": "A section mx-auto max-w-6xl px-5 py-12. A centered eyebrow text-[13px] font-semibold uppercase tracking-[0.18em] text-slate2/80 'Trusted by teams shipping fast'. Below, a flex-wrap items-center justify-center gap-x-10 -> md:gap-x-16 gap-y-6 opacity-70 row of five faux company lockups, each text-[20px] font-extrabold tracking-tight = a Phosphor glyph + wordmark: ph:planet-fill Northwind, ph:hexagon-fill Lumen, ph:circles-three-fill Cadence, ph:cube-fill Vellum, ph:flower-lotus-fill Orchid."}, {"part": "Bento work grid", "prompt": "Section id=work, mx-auto max-w-6xl px-5 py-16 -> md:py-24. Header row (mb-12 flex-col -> md:flex-row items-end justify-between): left = a .glass .shadow-soft rounded-full px-4 py-1.5 eyebrow pill (a 1.5x1.5 bg-peach dot + 'Selected work', uppercase tracking-[0.14em] text-slate2) above an H2 text-[36px] -> md:text-[52px] font-black leading-[1.02] tracking-tightest 'Every detail engineered around your goals'; right = a .glass .shadow-soft rounded-full px-5 py-3 'View all projects' + ph:arrow-right-bold pill. Grid = grid-cols-1 -> md:grid-cols-6 gap-5 md:auto-rows-[230px]. Tiles: (1) a md:col-span-4 md:row-span-2 .glass .shadow-soft .grain rounded-[28px] feature card with a sky->white->mint diagonal gradient, a 'Fintech . Full site' white/70 chip + a bg-ink white circle ph:arrow-up-right-bold that rotates 45deg on group-hover, a small mini-browser mock + a 5-bar mini bar chart (peach/sky/mint/ink/peach), and a title 'Northwind, a banking site people trust' + slate caption. (2) a md:col-span-2 dark stat card (gradient #15161b->#2a2c38, .grain, white text) with a mint ph:trend-up-bold and a text-[46px] font-black '+240%' over 'avg. lift in lead conversion across launches'. (3) a md:col-span-2 peach-tinted small card 'SaaS . Brand' / 'Lumen Analytics'. (4) a md:col-span-3 mint-tinted wide card 'E-commerce' / 'Orchid storefront' with a small white/75 product thumbnail. (5) a md:col-span-3 sky-tinted wide card 'Web app' / 'Cadence scheduling' with a small calendar-grid thumbnail. All glass tiles share .glass .shadow-soft .grain rounded-[28px] with white/70 category chips and font-extrabold tracking-tight titles."}, {"part": "Glass services panel", "prompt": "Section id=services, mx-auto max-w-6xl px-5 py-16 -> md:py-24. One big panel: relative overflow-hidden rounded-[36px] .glass-deep .shadow-float .grain .mesh-band p-8 -> md:p-14. Header (mb-12 max-w-2xl): a bg-white/70 rounded-full eyebrow pill (1.5x1.5 bg-sky dot + 'What we do') + an H2 text-[34px] -> md:text-[48px] font-black leading-[1.02] tracking-tightest 'One studio, the whole journey from idea to launch'. Then a grid grid-cols-1 -> md:grid-cols-3 gap-4 of three service cards, each rounded-3xl p-7 transition hover:-translate-y-1. Card 1 & 3 are .glass .shadow-soft: a 12x12 rounded-2xl tinted icon chip (peach bg rgba(255,216,194,0.7) / color #d9743f with ph:compass-tool-fill; sky bg rgba(207,227,255,0.7) / color #3f72c4 with ph:code-fill), an H3 (Brand & identity / Build & ship), a slate paragraph, and a 2-item check list (ph:check-bold in #3fae7a). Card 2 is the highlighted dark card: linear-gradient(165deg,#15161b,#2c2e3b), .grain, white text, an absolute bg-mint px-3 py-1 text-ink 'Most loved' badge top-right, a bg-white/15 icon chip with a text-sky ph:browsers-fill, H3 'Website design', a white/65 paragraph, and a check list with text-mint ph:check-bold."}, {"part": "Testimonials / clients row", "prompt": "Section id=clients, mx-auto max-w-6xl px-5 py-16 -> md:py-24. Centered header: a .glass .shadow-soft rounded-full eyebrow pill (1.5x1.5 bg-mint dot + 'Founders on Prism') + an H2 mx-auto max-w-2xl text-[34px] -> md:text-[48px] font-black leading-[1.04] tracking-tightest 'What teams say after we ship'. Grid grid-cols-1 -> md:grid-cols-3 gap-5 of three cards. Cards 1 & 3 are .glass .shadow-soft rounded-[26px] p-7 figures: a row of five text-peach ph:star-fill, a text-[15.5px] leading-relaxed blockquote, and a figcaption with a 11x11 rounded-full tinted-initials avatar (bg-sky / bg-mint, text-ink font-bold) + name + slate role. Card 2 is the dark feature: rounded-[26px] .grain .shadow-float p-8 white, gradient #15161b->#2a2c38, a text-mint ph:quotes-fill, an text-[18px] font-semibold leading-snug quote, and a bg-mint avatar + white/55 role."}, {"part": "Closing contact CTA", "prompt": "Section id=contact, mx-auto max-w-6xl px-5 pb-20 pt-4. One panel: relative overflow-hidden rounded-[40px] .glass-deep .shadow-float .grain .mesh-band p-10 -> md:p-20 text-center. A bg-white/70 rounded-full eyebrow pill (1.5x1.5 bg-peach dot + 'Booking Q3 now'), an H2 mx-auto max-w-3xl text-[40px] -> md:text-[64px] font-black leading-[0.98] tracking-tightest 'Let’s build something' <br hidden sm:block> 'worth staring at', a mx-auto max-w-lg text-[16px] -> md:text-[18px] leading-relaxed text-slate2 subline, and a CTA row mt-9 flex-col -> sm:flex-row gap-3 justify-center: a .btn-dark rounded-full px-8 py-4 text-[15.5px] font-semibold text-white 'Start a project' + ph:arrow-up-right-bold, plus a .glass .shadow-soft rounded-full px-8 py-4 text-ink secondary pill with ph:envelope-simple-bold + 'hello@prism.studio'."}, {"part": "Footer (glass-divided)", "prompt": "A footer relative border-t border-white/60. Inside mx-auto max-w-6xl px-5 py-14: a flex-col -> md:flex-row items-start justify-between gap-10. Left (max-w-xs): the brand lockup (9x9 rounded-xl .btn-dark square + white rotated ph:triangle-fill, 'Prism' text-[17px] font-extrabold tracking-tightest) + a text-[14px] leading-relaxed text-slate2 blurb. Right: a grid grid-cols-2 -> sm:grid-cols-3 gap-x-14 gap-y-8 of three link columns (Studio / Company / Social), each a text-[12.5px] font-bold uppercase tracking-[0.14em] text-ink heading + a space-y-2.5 text-[14px] text-slate2 list whose links hover:text-ink. Bottom: a mt-12 border-t border-white/60 pt-7 flex-col -> sm:flex-row items-center justify-between text-[13px] text-slate2 row: a copyright line and a 'Crafted with care' line trailed by three 1.5x1.5 rounded-full dots in bg-peach / bg-sky / bg-mint."}]}, "special_ui_components": [{"component": "Frosted-glass surface system (.glass / .glass-deep)", "description": "The signature material: every nav, pill, badge, card and panel is translucent frosted glass that lets the pastel mesh bleed through, with a bright 1px white inner border so each shape reads as a sheet of glass.", "prompt": "Define .glass { background: rgba(255,255,255,0.55); backdrop-filter: blur(22px) saturate(140%); -webkit-backdrop-filter: blur(22px) saturate(140%); border: 1px solid rgba(255,255,255,0.75) } and a heavier .glass-deep { background: rgba(255,255,255,0.42); backdrop-filter: blur(28px) saturate(150%); border: 1px solid rgba(255,255,255,0.7) }. Use .glass for the nav, all pill badges/buttons, eyebrow pills, and bento tiles; use .glass-deep for the large hero floating cards and the big services/CTA panels. Always pair with rounded-full (pills/nav) or rounded-[26px]/[28px]/[36px]/[40px] (cards/panels) so the glass edges curve."}, {"component": "Pastel mesh-gradient canvas (.mesh / .mesh-band)", "description": "The whole page floats on a soft off-white canvas blooming with overlapping peach, sky and mint radial-gradient clouds; a tighter .mesh-band variant re-tints the large glass panels so they glow from within.", "prompt": ".mesh { background-color:#fbfcff; background-image: radial-gradient(58% 52% at 12% 8%, rgba(255,216,194,0.9), transparent 60%), radial-gradient(55% 50% at 88% 14%, rgba(207,227,255,0.95), transparent 62%), radial-gradient(60% 55% at 78% 72%, rgba(211,245,227,0.9), transparent 60%), radial-gradient(48% 44% at 30% 88%, rgba(255,216,194,0.55), transparent 60%) }. .mesh-band { background-image: radial-gradient(50% 80% at 8% 50%, rgba(211,245,227,0.85), transparent 60%), radial-gradient(50% 80% at 95% 30%, rgba(207,227,255,0.9), transparent 60%), radial-gradient(45% 70% at 60% 95%, rgba(255,216,194,0.7), transparent 60%) }. Apply .mesh to body and .mesh-band to the services and contact panels."}, {"component": "Fanned, overlapping translucent UI cards (hero)", "description": "In place of a single product hero shot, three frosted UI mock cards fan out and overlap under the headline (a -6deg mint card, a +6deg sky card, and an upright centered browser-style card on top), each a tinted gradient glass-deep sheet with a soft floating shadow and grain.", "prompt": "A relative band whose three children are absolutely positioned: left card left-[3%]/md:left-[8%] top-[18%] w-[40%] -rotate-6, right card right-[3%]/md:right-[8%] top-[18%] w-[40%] rotate-6, center card left-1/2 top-0 -translate-x-1/2 w-[46%] max-w-[420px]. All are rounded-[26px]/[28px] .glass-deep .shadow-float .grain overflow-hidden. The left/right cards carry an inline linear-gradient tint (mint 160deg / sky 200deg into rgba(255,255,255,0.35)); the center card fakes a browser (header with peach/sky/mint traffic-light dots + a 5-col content grid). Fill cards only with rounded skeleton bars/blocks in varying white opacities (bg-white/45..80) so they read as abstract UI."}, {"component": "Dark accent card on glass (.btn-dark / near-black ink #15161b)", "description": "Near-black #15161b is the single high-contrast accent against all the pastel glass: it fills the primary CTA pills, the brand logo square, the bento +240% stat card, the highlighted 'Most loved' service card, and the dark feature testimonial, giving the airy page weight and a clear visual hierarchy.", "prompt": "Define .btn-dark { background:#15161b; box-shadow: 0 10px 26px -10px rgba(21,22,27,0.5) } with white text for primary pill buttons and the rounded-xl logo square (white rotated ph:triangle-fill). Reuse the ink as full dark cards via inline linear-gradient(#15161b -> #2a2c38 / #2c2e3b) plus the .grain overlay and white/65 secondary text: the +240% bento stat tile, the featured 'Most loved' service card (with a bg-mint 'Most loved' badge + text-sky/text-mint icons), and the center feature testimonial. The ink is the only non-pastel color; keep it for emphasis, CTAs and exactly one accent tile per section."}], "special_notes": "Frameless, fully responsive light glassmorphism agency homepage (no browser chrome / device frame around the page itself; the only 'browser' is the decorative center hero mock card): every section centers in mx-auto max-w-6xl with px-5 and the nav floats as a rounded-full glass bar inset by px-5 pt-4. Built with Tailwind via CDN plus a small tailwind.config registering the exact custom colors (ink #15161b, slate2 #5c606e, peach #ffd8c2, sky #cfe3ff, mint #d3f5e3), the Inter font family, and letterSpacing.tightest -0.045em; Google Fonts loads Inter 400-900; icons are Iconify Phosphor (ph:) fill glyphs. Reflow: the nav center links hide below md; the hero <br> drops below sm; the floating-card band is h-300/sm:380/md:440 and the side cards shift to md:left-8%/right-8%; the bento grid is grid-cols-1 -> md:grid-cols-6 with md:auto-rows-[230px] and explicit col-span/row-span; services + testimonials are grid-cols-1 -> md:grid-cols-3; the footer is flex-col -> md:flex-row with a 2 -> sm:3 col link grid; body has overflow-x-hidden so nothing scrolls sideways on mobile. All copy and the 'Prism' brand are placeholders meant to be swapped: the transferable value is the soft-pastel glassmorphism SYSTEM (a #fbfcff mesh-gradient canvas blooming peach #ffd8c2 / sky #cfe3ff / mint #d3f5e3, frosted .glass rgba(255,255,255,0.55)+blur(22px) and .glass-deep rgba(255,255,255,0.42)+blur(28px) surfaces with 1px white borders, soft colored drop-shadows, faint grain, and near-black #15161b ink as the single accent on CTAs/stat/feature cards) plus the full agency-site LAYOUT (floating pill glass nav -> centered black-on-pastel hero over fanned translucent UI cards -> faded logo strip -> frosted bento work grid with a dark stat tile -> big glass services panel with a dark featured card -> three-up testimonial row with a dark feature quote -> frosted closing CTA -> glass-divided footer), NOT the specific studio. Keep the palette light and pastel; the ONLY dark surface is the #15161b ink used sparingly for contrast."}

Pulse 3D

No.1461 · 前端开发 · 社区/原生 · 来源：MotionSites (MIT) · EN 原文

## PROJECT OVERVIEW

Build a **single-screen, scroll-driven, custom-gesture landing page** called **"Inner Circle"**. There is **no native browser scrolling** — `document.body` and `html` both have `overflow: hidden`. A wheel/touch gesture controller drives a single `scrollProgress` numeric state from `0` to `3.5`. All animations (video scrubbing, text exits, rising panel, cylindrical drum) are derived from this single value.

### Stack
- **Vite + React 19 + TypeScript**
- **Tailwind CSS v4** (via `@tailwindcss/vite`)
- **GSAP 3.15** for char-level split-text and parallax wiggle
- **lucide-react** for menu icons (`Menu`, `X`)
- `motion`, `@google/genai`, `express`, `dotenv` installed (the page itself only needs GSAP + Tailwind + React)

### Fonts (loaded in `src/index.css`)
```css
@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@300;400;500;600;700;800&family=Michroma&display=swap');
@import "tailwindcss";

@theme {
--font-manrope: "Manrope", sans-serif;
--font-michroma: "Michroma", sans-serif;
}
```
- Use `font-manrope` for body, paragraph drum text, header subtitle, nav.
- Use `font-michroma` for the giant hero title and tile labels.

### Global CSS (also in `index.css`)
```css
::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: #11010a; }
::-webkit-scrollbar-thumb { background: #ea1f63; border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: #ff5c93; }

html, body {
background-color: #11010a;
color: #ffffff;
overflow-x: hidden;
font-family: var(--font-manrope);
}

@keyframes marquee-scroll {
from { transform: translateX(0); }
to { transform: translateX(-50%); }
}
.marquee-container {
display: flex; overflow: hidden; width: 100%; position: relative;
mask-image: linear-gradient(to right, transparent, white 20%, white 80%, transparent);
-webkit-mask-image: linear-gradient(to right, transparent, white 20%, white 80%, transparent);
}
.marquee-track {
display: flex; width: max-content; flex-wrap: nowrap;
animation: marquee-scroll linear infinite;
will-change: transform;
}
```

### Color palette
- Hero background magenta: `#FF005E`
- Second screen near-black/wine: `#11010a`
- Loader accents: `#ea1f63`, `pink-500` (`#ec4899`), `#ff5c93`
- Text: white (`#ffffff`) and `text-white/60` for low-emphasis drum copy
- **No purple/indigo anywhere.**

### Data files

`src/types.ts`:
```ts
export interface NavigationItem { id: string; label: string; scrollRatio: number; }
export interface Project { title: string; category: string; description: string; tags: string[]; }
export interface ExpertiseItem { title: string; percentage: number; description: string; }
```

`src/data.ts`:
```ts
export const NAVIGATION_ITEMS: NavigationItem[] = [
{ id: "projects", label: "Projects", scrollRatio: 0.25 },
{ id: "expertise", label: "Expertise", scrollRatio: 0.50 },
{ id: "about", label: "About", scrollRatio: 0.95 },
{ id: "contact", label: "Manifesto", scrollRatio: 3.50 },
];
```
(Keep `PROJECTS_DATA` and `EXPERTISE_DATA` as defined — unused on this page but kept for parity.)

---

## ROOT LAYOUT (`src/App.tsx`)

### State
- `scrollProgress: number` (0 → 3.5)
- `lerpedScrollProgress: number` — smoothed copy of `scrollProgress`, updated each rAF tick with `currentLerp += (target - currentLerp) * 0.08`. Threshold `0.0001`.
- `activeSectionId: string` — derived via `updateActiveSection(progress)`:
- `< 0.18` → "hero"
- `0.18–0.45` → "projects"
- `0.45–0.68` → "expertise"
- `0.68–1.15` → "about"
- else → "contact"

### Gesture controller (runs once on mount)
- Sets `document.body.style.overflow = "hidden"` and same on `documentElement`.
- `wheel` listener (passive: false, `preventDefault()`): `scaleFactor = 0.0006`, new value = `clamp(prev + deltaY * 0.0006, 0, 3.5)`.
- `touchstart` saves `lastTouchY`. `touchmove`: `deltaTouchY = lastTouchY - currentTouchY`, `scaleFactor = 0.0015`, clamp same range.
- If a programmatic nav animation is in flight, cancel it on any user input.

### Programmatic navigation (`handleNavigateToSection`)
- Duration: `1200ms`, easeInOutCubic:
```
ease = p < 0.5 ? 4p³ : 1 - (-2p + 2)³ / 2
```
- Lerps `scrollProgress` from current to `item.scrollRatio` while calling `updateActiveSection` each frame.

### Derived values
```ts
const secondScreenProgress = clamp01((lerped - 1.15) / 0.50);
const easedRisingProgress = 1 - Math.pow(1 - secondScreenProgress, 3);
const smoothBlurAmount = Math.sin(secondScreenProgress * Math.PI / 2) * 64;
```

### Markup skeleton
```tsx
<main className="relative w-screen h-screen overflow-hidden bg-[#FF005E] text-white">
<div className="relative w-full h-full overflow-hidden">

{/* FIRST SCREEN — gets blurred as second screen rises */}
<div
className="absolute inset-0 w-full h-full z-10 transition-transform duration-[100ms] ease-out"
style={{ filter: secondScreenProgress > 0 ? `blur(${smoothBlurAmount}px)` : "none" }}
>
<VideoScrubber scrollProgress={Math.min(1, lerpedScrollProgress)} />

{/* Hero title strip pinned to bottom */}
<div className="absolute bottom-[40px] left-[1%] right-[1%] w-[98%] pointer-events-none z-20 select-none flex justify-center items-center">
<ScrollExitSplitText
scrollProgress={Math.min(1, lerpedScrollProgress)}
containerClassName="w-full text-[10.4vw] leading-none font-michroma font-normal uppercase text-white whitespace-nowrap text-center transition-all duration-300 will-change-transform"
style={{ letterSpacing: "-0.07em" }}
>
INNER CIRCLE
</ScrollExitSplitText>
</div>

<SoapTiles scrollProgress={lerpedScrollProgress} />
</div>

<Header activeSectionId={activeSectionId} onNavigate={handleNavigateToSection} />

{/* SECOND SCREEN — rises from below, rounded top */}
<div
className="absolute bottom-0 left-0 w-full h-full bg-[#11010a] rounded-t-[48px] overflow-hidden z-40"
style={{
transform: `translateY(${(1 - easedRisingProgress) * 100}%)`,
visibility: secondScreenProgress > 0 ? "visible" : "hidden",
willChange: "transform",
}}
>
<div className="absolute top-5 left-1/2 -translate-x-1/2 w-16 h-[5px] bg-white rounded-full z-50 pointer-events-none" />
<SecondVideoScrubber scrollProgress={lerpedScrollProgress} />
<CylindricalTextDrum scrollProgress={lerpedScrollProgress} />

<div className="absolute bottom-8 sm:bottom-12 md:bottom-16 left-0 w-full sm:w-[65%] md:w-[60%] pl-6 sm:pl-12 md:pl-20 pr-6 sm:pr-12 md:pr-16 z-50 pointer-events-auto">
<div className="w-full border-t border-white/[0.08] pt-6">
<Marquee gap="80px" speed={25} fade>
<GoogleWordmark size={100} />
<GithubWordmark size={100} />
<img src="https://raw.githubusercontent.com/dsMagnatov/Acreage-landing-assets/refs/heads/main/voiceflow-logo-svg-150px.svg" alt="Voiceflow" className="h-6 w-auto object-contain brightness-0 invert opacity-80 hover:opacity-100 transition-opacity" referrerPolicy="no-referrer" />
<img src="https://raw.githubusercontent.com/dsMagnatov/Acreage-landing-assets/refs/heads/main/zendesk-logo-svg-150px.svg" alt="Zendesk" className="h-6 w-auto object-contain brightness-0 invert opacity-80 hover:opacity-100 transition-opacity" referrerPolicy="no-referrer" />
<img src="https://raw.githubusercontent.com/dsMagnatov/Acreage-landing-assets/refs/heads/main/pendo-logo-svg-150px.svg" alt="Pendo" className="h-6 w-auto object-contain brightness-0 invert opacity-80 hover:opacity-100 transition-opacity" referrerPolicy="no-referrer" />
<img src="https://raw.githubusercontent.com/dsMagnatov/Acreage-landing-assets/refs/heads/main/glide-logo-svg-150px.svg" alt="Glide" className="h-6 w-auto object-contain brightness-0 invert opacity-80 hover:opacity-100 transition-opacity" referrerPolicy="no-referrer" />
<img src="https://raw.githubusercontent.com/dsMagnatov/Acreage-landing-assets/refs/heads/main/canva-logo-svg-150px.svg" alt="Canva" className="h-6 w-auto object-contain brightness-0 invert opacity-80 hover:opacity-100 transition-opacity" referrerPolicy="no-referrer" />
</Marquee>
</div>
</div>
</div>
</div>
</main>
```

---

## SECTION 1 — HERO (First Screen)

### 1a. Background video — `VideoScrubber`
- **Video URL (exact):**
`https://pub-86dc5b5484314368ac5436a674b0d919.r2.dev/cloudinarry%20to%20cloudflare/202606021731-e_hqa6sn.mp4`
- `<video>` is `playsInline muted preload="auto"`, `object-cover`, full size, `pointer-events-none`.
- Wrapped in a `style={{ scale: "1.05" }}` div with `will-change-transform`. Container background is `bg-[#FF005E]`.
- **Scrub algorithm:** On every rAF tick:
- `targetTime = clamp(scrollProgress * duration, 0, duration)` (fallback duration `4.2`).
- `current += (target - current) * 0.15` (lerp).
- Seek only when `!video.seeking && Math.abs(video.currentTime - current) > 0.01` → `video.currentTime = current`.
- **GSAP mouse parallax** on the container: on `mousemove`, compute `mx = e.clientX/innerWidth - 0.5`, `my = ...`. Animate `x: -mx*40, y: -my*40, duration: 1.2, ease: "power2.out", overwrite: "auto"`.
- **Loader overlay** (while `!isLoaded`): full-bleed `bg-[#FF005Ef4]`, centered: a 64×64 wrapper with `animate-ping` pink-500/20 ring + a 40×40 spinner ring (`border-4 border-[#ea1f63]/20 border-t-[#ea1f63] animate-spin`), label "LOADING SCROLL STREAM..." in `font-manrope font-semibold text-[12px] uppercase tracking-[0.25em] text-pink-500 drop-shadow-[0_0_8px_rgba(234,31,99,0.4)]`.

### 1b. Hero title — `ScrollExitSplitText`
- Text: `INNER CIRCLE`
- Class on outer container (from App): `text-[10.4vw] leading-none font-michroma font-normal uppercase text-white whitespace-nowrap text-center`, `letterSpacing: -0.07em`.
- Positioned: `absolute bottom-[40px] left-[1%] right-[1%] w-[98%]`, `z-20`, `pointer-events-none`.
- **Split-text mechanic:** split into lines → words → characters. Each char is a `span.char inline-block will-change-transform`. Words separated by a literal `&nbsp;` span.
- **GSAP timeline** (paused, controlled by scroll):
```ts
tl.fromTo(chars,
{ opacity: 1, yPercent: 0, y: 0, scaleY: 1, scaleX: 1, transformOrigin: "50% 0%" },
{ opacity: 0, yPercent: 300, y: "25vh", scaleY: 1.2, scaleX: 0.9, stagger: 0.03, ease: "power2.inOut" }
);
```
- On every `scrollProgress` change: `gsap.to(timeline, { progress: scrollProgress, duration: 0.6, ease: "power1.out", overwrite: "auto" })`. This produces a smooth lag/scrub.

### 1c. Reveal tiles — `SoapTiles`
- Three white pill-cards stacked vertically on the left:
1. `Private Discord & Networking` — baseXOffset `120`, delay `0ms`
2. `Weekly Market Alpha Drops` — baseXOffset `180`, delay `100ms`
3. `Exclusive Web3 Tooling Access` — baseXOffset `240`, delay `200ms`
- Container: `absolute left-4 right-4 md:left-[64px] top-[38%] md:top-1/2 -translate-y-1/2 flex flex-col gap-2 md:gap-[10px] z-40 pointer-events-auto transition-all duration-[800ms] ease-out`. Hidden state: `opacity-0 -translate-x-6 md:-translate-x-12 pointer-events-none`. Visible when `scrollProgress > 0.75`.
- Each tile class: `group relative h-[52px] sm:h-[72px] md:h-[138px] text-black bg-white rounded-xl sm:rounded-2xl md:rounded-[34px] flex items-center justify-center px-4 sm:px-8 md:px-14 w-full md:w-auto md:self-start cursor-pointer origin-left transition-all duration-[400ms] cubic-bezier(0.16, 1, 0.3, 1) whitespace-nowrap`.
- **Entry animation:** `easeProgress = clamp01((scrollProgress - 0.75) / 0.22)`. Each tile:
- `translateX = (easeProgress - 1) * responsiveOffset` (on mobile, offset is `× 0.25`)
- `opacity = easeProgress`
- `filter = blur(${(1 - easeProgress) * 12}px)`
- **Hover behavior (desktop only):** hovered tile scales `1.2`. Non-hovered tiles shift vertically by `±13.8px` (`baseHeight * 0.1`, with `baseHeight` 138/52) — up if above hovered, down if below. On mobile, hover scale stays `1.0`.
- Label inside each tile: `font-michroma font-medium text-[11px] sm:text-[14px] md:text-[23px] leading-[16px] sm:leading-[22px] md:leading-[34px] tracking-tight`, `letter-spacing: -0.03em`.

### 1d. Header — `Header`
- Container: `absolute top-4 left-4 right-4 sm:top-8 sm:left-8 sm:right-8 md:top-[64px] md:left-[64px] md:right-[64px] flex items-center justify-between z-40`.
- **Logo group (left):** clicking navigates to scrollRatio `0`. Contains:
- `Logo` — 48×48 SVG with this exact path: a stylized "M" mark (`viewBox="0 0 80 80"`, single `<path>`, see code snippet below).
- Subtitle (hidden < sm): three lines `Full Workflow Automation.` / `We Manage Everything. You` / `Unwind.` in `font-manrope font-normal tracking-wide text-[12px] leading-[16px] text-white`.
- **Desktop nav (≥ md):** the 4 NAVIGATION_ITEMS as buttons: `font-manrope font-medium text-[12px] leading-[16px] tracking-wider text-white px-4 py-2 rounded-full hover:bg-white hover:text-black transition-all duration-300`.
- **Mobile burger:** circular `w-10 h-10 rounded-full border border-white/10 bg-white/5`. Toggles a full-screen overlay `fixed inset-0 bg-[#11010a]/98 backdrop-blur-xl z-30` with each item in `font-michroma text-[16px] uppercase tracking-widest py-4 px-6 border-b border-white/5`; active item: `text-[#FF005E] font-semibold`.

Logo path (exact):
```
M40 80C17.9086 80 0 62.0914 0 40V0C15.0436 0 28.1476 8.30466 34.9776 20.5796C25.6529 22.8063 18.7198 31.1937 18.7198 41.2004V42.0962C18.7198 53.3099 27.8104 62.4004 39.0242 62.4004H39.9199L39.9197 41.2004C39.9197 52.9088 49.4113 62.4004 61.1198 62.4004L61.1198 41.2004C61.1198 29.5187 51.6717 20.0437 40 20.0005L40 0H41.6902C62.8481 0 80 17.1519 80 38.3099V40C80 62.0914 62.0914 80 40 80Z
```

---

## SECTION 2 — SECOND SCREEN (Rising Panel)

### Reveal mechanics
- Triggered when `lerpedScrollProgress > 1.15`. Becomes fully on-screen at `1.65`.
- Panel: `absolute bottom-0 left-0 w-full h-full bg-[#11010a] rounded-t-[48px] overflow-hidden z-40`.
- `transform: translateY((1 - easedRisingProgress) * 100%)` where `easedRisingProgress = 1 - (1 - secondScreenProgress)^3`.
- `visibility: hidden` when `secondScreenProgress === 0`.
- While rising, the **first screen blurs** up to `64px` via `Math.sin(p * π/2) * 64`.
- **iOS grab-handle pill:** `absolute top-5 left-1/2 -translate-x-1/2 w-16 h-[5px] bg-white rounded-full z-50 pointer-events-none`.

### 2a. Background video — `SecondVideoScrubber`
- **Video URL (exact):**
`https://pub-86dc5b5484314368ac5436a674b0d919.r2.dev/cloudinarry%20to%20cloudflare/2026060218225-v_kcy5rl.mp4`
- Same component skeleton as `VideoScrubber` but with these differences:
- Background color of the loader bg: `bg-[#11010af4]`.
- `DRUM_START = 1.45`, `DRUM_END = 3.50`.
- `drumProgress = clamp01((scrollProgress - 1.45) / (3.50 - 1.45))`, `target = drumProgress * duration`.
- Same lerp `0.15`, same `!video.seeking && diff > 0.01` guard.
- Same GSAP mouse parallax `x/y: ±40px, duration 1.2, ease "power2.out"`.
- Loader label: `LOADING DRUM STREAM...` with `border-pink-500/20 border-t-pink-500`.

### 2b. Cylindrical text drum — `CylindricalTextDrum`
- Container: `absolute inset-y-0 left-0 w-full sm:w-[65%] md:w-[60%] z-30 flex flex-col items-start justify-center pointer-events-none select-none text-left pl-6 sm:pl-12 md:pl-20 py-16`, with `perspective: 1000px; perspectiveOrigin: 25% 50%`.
- Inner: `relative w-full h-[85vh] flex flex-col justify-center items-start overflow-visible` with `transformStyle: "preserve-3d"`.
- **Geometry:** `R = 380`, `lineHeight = 32`.
- `targetIndex = clamp01((scrollProgress - 1.45) / 2.05) * (LINES.length - 1)`.
- For each line `idx`:
- `indexDiff = idx - targetIndex`
- `translateY = indexDiff * 32`
- `angleRad = translateY / 380`, `angleDeg = angleRad * 180/π`
- `translateZ = cos(angleRad) * 380 - 380`
- `baseScale = 0.78 + cos(angleRad) * 0.22`
- `opacity = max(0, (cos(angleRad) - 0.2) / 0.8)`
- `depthBlur = min(8, max(0, (|indexDiff| - 1.5) * 0.75))`
- Apply `transform: translateY(${ty}px) translateZ(${tz}px) rotateX(${-angleDeg * 0.8}deg) scale(${baseScale})`, `transformOrigin: "left center"`, plus blur when > 0.1.
- Each line `<p>`: `font-manrope text-[18px] sm:text-[24px] md:text-[28px] lg:text-[32px] font-semibold leading-[0.90] tracking-tight whitespace-nowrap`, `letter-spacing: -0.035em`.
- Text segments: if `highlight === true` use `text-white font-bold opacity-100`; else `text-white/60`. Empty `""` line renders a sized spacer at `opacity * 0.3`.
- **Use the exact `LINES` array below — 32 entries (one empty string at index 15):**

```
1. Welcome to the [ultimate convergence]
2. of [digital rebels], [underground creators],
3. and [top-tier product builders] who
4. refuse to follow [guidelines].
5. This is where [high-end design principles]
6. meet [pure technical execution],
7. without the [corporate bureaucracy] and
8. meaningless [standard aesthetics].
9. We [gather in the shadows] to build
10. the [next generation] of [scalable interfaces],
11. [automated workflows], and [decentralized assets]
12. that move the [cultural needle forward].
13. Experience [zero-bullshit networking],
14. weekly [alpha allocations], and [unreleased]
15. [toolkits] to shape the [internet's landscape].
16. (empty line)
17. This is [not another social club]
18. for casual enthusiasts or [template consumers].
19. This is a [highly selective environment]
20. engineered for [hyper-productive creators],
21. [UI/UX visionaries], and [AI prompt architects]
22. who operate at the [absolute limits]
23. of [digital product creation].
24. Our [framework is simple]:
25. [eliminate intermediate noise],
26. [automate the execution layer],
27. and [deploy elite digital products]
28. while others are still [scheduling meetings].
29. We loop through [complex design systems],
30. [break conventional grids], and
31. [execute fluid interactions] that
32. [redefine digital environments].
```
(Words in `[brackets]` are `highlight: true`.)

### 2c. Logo marquee — `Marquee`
- Position: `absolute bottom-8 sm:bottom-12 md:bottom-16 left-0 w-full sm:w-[65%] md:w-[60%] pl-6 sm:pl-12 md:pl-20 pr-6 sm:pr-12 md:pr-16 z-50`.
- Inside a wrapper `border-t border-white/[0.08] pt-6`.
- `<Marquee gap="80px" speed={25} fade>` produces two duplicated tracks animated infinitely with the keyframe `marquee-scroll` (0% → -50%) over `25s` linear infinite, masked with a left/right transparent fade at 15%/85%.
- Children in order: `<GoogleWordmark size={100} />`, `<GithubWordmark size={100} />`, then `<img>` tags for these exact URLs, each styled `h-6 w-auto object-contain brightness-0 invert opacity-80 hover:opacity-100 transition-opacity`, `referrerPolicy="no-referrer"`:
- `https://raw.githubusercontent.com/dsMagnatov/Acreage-landing-assets/refs/heads/main/voiceflow-logo-svg-150px.svg`
- `.../zendesk-logo-svg-150px.svg`
- `.../pendo-logo-svg-150px.svg`
- `.../glide-logo-svg-150px.svg`
- `.../canva-logo-svg-150px.svg`
- `GoogleWordmark` and `GithubWordmark` are inline `<svg>` wordmarks at `viewBox="0 0 115 30"` / `0 0 110 30` — see file for exact text/paths.

---

## INTERACTIONS — Summary table

| Trigger | Effect |
|---|---|
| Mouse wheel | `scrollProgress += deltaY * 0.0006`, clamp `[0, 3.5]` |
| Touch drag | `scrollProgress += (lastY - currentY) * 0.0015` |
| Nav click | 1200ms easeInOutCubic lerp to target ratio |
| `scrollProgress` 0 → 1 | Hero video scrubs forward, "INNER CIRCLE" chars fall (300% y, 25vh) with 0.03 stagger |
| `scrollProgress` > 0.75 | Soap tiles fade/slide in (over a 0.22 range), with 12px → 0 blur |
| Hover tile (desktop) | Hovered tile scales 1.2, neighbors shift ±13.8px |
| `scrollProgress` > 1.15 | Second screen rises (ease-out cubic), first screen blurs to 64px |
| `scrollProgress` 1.45 → 3.50 | Second video scrubs; cylindrical drum rotates; line at center is at scale 1.0/opacity 1.0 |
| Mouse move (anywhere) | Both videos parallax-translate ±40px via GSAP `power2.out`, 1.2s |

---

## DATA PERSISTENCE

Supabase is available. This page is presentational and does not persist user state, so no database tables are required for the recreation. If extending with capture forms, waitlist sign-ups, or analytics events, create a Supabase table with RLS enabled and `auth.uid()`-based policies (one INSERT policy for `authenticated`, restrictive SELECT).

---

## FILE STRUCTURE

```
src/
App.tsx
main.tsx
index.css
types.ts
data.ts
components/
Header.tsx
Logo.tsx
Logos.tsx (GoogleWordmark, GithubWordmark exported)
Marquee.tsx
VideoScrubber.tsx
SecondVideoScrubber.tsx
ScrollExitSplitText.tsx
SoapTiles.tsx
CylindricalTextDrum.tsx
```

Pro AI Deck

No.1462 · 前端开发 · 社区/原生 · 来源：MotionSites (MIT) · EN 原文

PROMPT TO RECREATE STUDIO PITCH DECK SLIDES

Create a full-screen slide deck presentation app using React, TypeScript, Vite, Tailwind CSS, Motion (framer-motion), hls.js, and Lucide React icons. The presentation has 7 slides with horizontal swipe/scroll/keyboard navigation and animated transitions.

GLOBAL SETUP

Dependencies (package.json):

react ^18.3.1, react-dom ^18.3.1
motion ^12.38.0 (import from "motion/react")
hls.js ^1.6.15
lucide-react ^0.344.0
tailwindcss ^3.4.1, autoprefixer, postcss
vite ^5.4.2, @vitejs/plugin-react ^4.3.1
typescript ^5.5.3
Fonts (loaded via Google Fonts in index.html):
Instrument Serif (italic) -- used as font-heading for all headings
Barlow (weights 300, 400, 500, 600) -- used as font-body for all body text
Material Symbols Rounded (opsz 24, wght 400, FILL 1, GRAD 0) -- used for icons on slide 2
Load via these exact <link> tags in <head>:
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Barlow:wght@300;400;500;600&display=swap" rel="stylesheet" />
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL,GRAD@24,400,1,0" rel="stylesheet" />
Tailwind Config:
fontFamily.heading: ["'Instrument Serif'", 'serif']
fontFamily.body: ["'Barlow'", 'sans-serif']
Custom CSS color variables for background, foreground, card, primary, secondary, muted, accent, destructive, border, input, ring

borderRadius.full: var(--radius) where --radius: 9999px
CSS Variables (index.css :root):
--background: 213 45% 67%;
--foreground: 0 0% 100%;
--card: 213 45% 62%;
--card-foreground: 0 0% 100%;
--primary: 0 0% 100%;
--primary-foreground: 213 45% 67%;
--secondary: 213 45% 72%;
--secondary-foreground: 0 0% 100%;
--muted: 213 35% 60%;
--muted-foreground: 0 0% 100% / 0.7;
--accent: 213 45% 72%;
--accent-foreground: 0 0% 100%;
--destructive: 0 84.2% 60.2%;
--border: 0 0% 100% / 0.2;
--input: 0 0% 100% / 0.2;
--ring: 0 0% 100% / 0.3;
--radius: 9999px;
--glass-bg: rgba(255, 255, 255, 0.12);
--glass-border: rgba(255, 255, 255, 0.25);
--glass-shadow: 0 4px 30px rgba(0, 0, 0, 0.08);
--glass-blur: 16px;
Glassmorphism CSS classes (defined in
@layer
components in index.css):

.liquid-glass:
background: rgba(255, 255, 255, 0.01)
background-blend-mode: luminosity
backdrop-filter: blur(4px)
No border

box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.1)
position: relative, overflow: hidden
::before pseudo-element creates a gradient border effect using mask-composite: exclude. The gradient goes 180deg from rgba(255,255,255,0.45) at 0% -> 0.15 at 20% -> 0 at 40% -> 0 at 60% -> 0.15 at 80% -> 0.45 at 100%, with 1.4px padding
.liquid-glass-strong:
Same as above but backdrop-filter: blur(50px)

box-shadow: 4px 4px 4px rgba(0,0,0,0.05), inset 0 1px 1px rgba(255,255,255,0.15)
::before gradient slightly stronger: 0.5 at 0%/100%, 0.2 at 20%/80%
Body styles: font-family: 'Barlow', sans-serif; background: #000; color: #fff; overflow-x: hidden;
SHARED COMPONENTS
HlsVideo component (src/components/HlsVideo.tsx):
Props: src: string, className?: string, style?: React.CSSProperties
Uses a <video> element with autoPlay, loop, muted, playsInline
On mount: if src ends with .m3u8 and Hls.isSupported(), creates an Hls instance, calls loadSource and attachMedia; returns cleanup that calls hls.destroy(). Otherwise sets video.src directly.
BlurText component (src/components/BlurText.tsx):
Props: text: string, className?: string, delay?: number (default 100)
Splits text into words. Uses IntersectionObserver (threshold 0.2) to trigger animation on visibility.
Each word is a motion.span with initial={{ filter: 'blur(10px)', opacity: 0, y: 50 }}, animates through keyframes: [{ filter: 'blur(5px)', opacity: 0.5, y: -5 }, { filter: 'blur(0px)', opacity: 1, y: 0 }]
Duration 0.7s per word, staggered by (i * delay) / 1000, easeOut
Each word has class inline-block mr-[0.25em]
SlideControls component (src/components/SlideControls.tsx):
Fixed to bottom of screen: fixed bottom-0 left-0 right-0 z-50 px-8 lg:px-12 pb-6
Left side: slide counter 01 / 07 format (text-white/30, text-xs, tracking-[0.2em], uppercase) | divider (w-px h-4 bg-white/15) | animated slide label (text-white/50, text-xs)
Right side: dot indicators (h-1 rounded-full, active dot is w-24 bg-white, inactive is w-8 bg-white/20 hover:bg-white/40, transition-all duration-500) | divider | prev/next buttons using ChevronLeft/ChevronRight from lucide-react (w-8 h-8 rounded-full, text-white/50 hover:text-white hover:bg-white/10, disabled:opacity-20)
APP COMPONENT (src/App.tsx):
7 slides in order: TitleSlide ("Introduction"), ProblemSlide ("The Process"), CapabilitiesSlide ("Capabilities"), WhyUsSlide ("Differentiators"), StatsSlide ("Traction"), TestimonialsSlide ("Social Proof"), CtaSlide ("Next Steps")
AnimatePresence mode="wait" with custom direction
Slide transition variants:enter: { x: dir > 0 ? '100%' : '-100%', opacity: 0, scale: 0.95 }
center: { x: 0, opacity: 1, scale: 1 }
exit: { x: dir > 0 ? '-30%' : '30%', opacity: 0, scale: 0.95 }
transition: duration 0.65, ease [0.4, 0, 0.2, 1]

Navigation: mouse wheel (threshold 30px delta), keyboard (ArrowRight/ArrowDown/Space = next, ArrowLeft/ArrowUp = prev), touch swipe (threshold 60px)

Animation lock: 800ms cooldown between navigations using useRef
SLIDE 1 -- TitleSlide (src/slides/TitleSlide.tsx):
Background: Full-screen <video> (autoPlay, loop, muted, playsInline, object-cover) with NO overlay. Video URL: https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260411_104229_49794008-3d16-4cb6-9a8c-73d7751b0e79.mp4
Layout: relative z-10, full height, flex column, justify-between, px-10 lg:px-20 py-12 pb-20
Top bar (motion.div, fade from y:-10, delay 0.1):Logo: w-8 h-8 rounded-full bg-white with "S" in black font-heading italic text-sm
"Studio" in font-heading italic text-white/80 text-lg
Divider: w-px h-5 bg-white/20 mx-2
"Pitch Deck 2026" in text-white/30 font-body text-[10px] tracking-[0.2em] uppercase

Center content (flex-1, flex column, justify-center, max-w-3xl):Pill badge (motion.div, scale from 0.95, delay 0.2): liquid-glass rounded-full, contains "New" badge (bg-white text-black rounded-full px-3 py-1 text-[10px] font-semibold uppercase tracking-wider) and "AI-powered web design" (text-white/70 text-xs font-light)
H1: text-5xl md:text-7xl lg:text-8xl xl:text-[6.5rem] font-heading italic text-white leading-[0.85] tracking-[-3px] mb-8 using BlurText component with text "The Website Your Brand Deserves" delay={80}
Subtitle (motion.p, slide from x:-20, delay 0.9): "Stunning design. Blazing performance. Built by AI, refined by experts." -- text-base md:text-lg text-white/50 font-body font-light leading-relaxed max-w-xl mb-10
CTA button (motion.div, slide from x:-20, delay 1.1): liquid-glass-strong rounded-full px-6 py-3, "Get Started" with ArrowUpRight icon (w-4 h-4)

Bottom trusted-by bar (motion.div, fade delay 1.4): "Trusted by" label + ['Stripe', 'Vercel', 'Linear', 'Notion', 'Figma'] in text-lg md:text-xl font-heading italic text-white/20
SLIDE 2 -- ProblemSlide (src/slides/ProblemSlide.tsx):

Background: HlsVideo component with src https://stream.mux.com/9JXDljEVWYwWu01PUkAemafDugK89o01BR6zqJ3aS9u00A.m3u8 (absolute inset-0, object-cover)
Overlay: <div className="absolute inset-0 bg-black/60 z-[1]" /> -- 60% black overlay
Layout: relative z-10, full height, flex, px-10 lg:px-20 py-12 pb-20. Inner div: flex-col lg:flex-row, items-start, gap-12 lg:gap-20, w-full, my-auto
Left column (flex-1):Section label (motion.span, slide from x:-15, delay 0.1): "The Process" -- text-white/30 font-body text-[10px] tracking-[0.3em] uppercase, mb-6
Headline (motion.h2, slide from x:-20, delay 0.2): "Our AI simplifies data analysis, eliminates decision bottlenecks, and seamlessly integrates" -- text-4xl md:text-5xl lg:text-6xl xl:text-7xl font-heading italic text-white tracking-tight leading-[0.9] mb-8
Body (motion.p, slide from x:-15, delay 0.4): "Our AI algorithms strategically address industry challenges, enhancing efficiency and facilitating optimal decision-making, providing a definitive solution for businesses in the AI era." -- text-white/40 font-body font-light text-sm md:text-base leading-relaxed max-w-xl

Right column (w-full lg:w-[420px], flex-col gap-4, shrink-0): 3 cards, each staggered (delay 0.3 + i*0.12, slide from x:30):Card container: liquid-glass rounded-2xl p-6 lg:p-7

Icon + title row: flex items-center gap-3 mb-3Icon container: w-10 h-10 rounded-xl bg-gradient-to-br from-white/15 to-white/5
Icon: <span className="material-symbols-rounded text-white/80 text-xl">{iconName}</span>
Title: text-base font-body font-semibold text-white
Description: text-sm font-body font-light text-white/40 leading-relaxed pl-[52px]

Card data:icon: "query_stats", title: "Streamlined Analytics", desc: "Our AI simplifies intricate data analysis, providing businesses with quick and accurate insights."
icon: "psychology", title: "Decision Optimization", desc: "Eliminate decision-making bottlenecks for timely and informed choices, enhancing overall operational efficiency."
icon: "integration_instructions", title: "Effortless Integration", desc: "Our algorithms seamlessly integrate AI with plug-and-play ease, empowering businesses without disruption."

SLIDE 3 -- CapabilitiesSlide (src/slides/CapabilitiesSlide.tsx):

Background: HlsVideo component with src https://stream.mux.com/s8pMcOvMQXc4GD6AX4e1o01xFogFxipmuKltNfSYza0200.m3u8 (absolute inset-0, object-cover, style={{ opacity: 0.5 }})
Base: bg-black behind the video
Layout: relative z-10, full height, flex column, px-10 lg:px-20 py-12 pb-20
Section label (motion.span, slide from x:-15, delay 0.1): "Capabilities" -- text-white/30 font-body text-[10px] tracking-[0.3em] uppercase, mb-4

Headline (motion.h2, slide from x:-20, delay 0.2): "Pro features.\nZero complexity." (line break with <br />) -- text-6xl md:text-8xl lg:text-9xl xl:text-[10rem] font-heading italic text-white tracking-tight leading-[0.85] mb-8 lg:mb-auto
Cards grid: grid-cols-1 lg:grid-cols-2 gap-6 lg:gap-8. Two cards, staggered (delay 0.35 + i*0.15, slide from y:30):Card container: liquid-glass rounded-2xl overflow-hidden flex flex-col

Video area: h-44 lg:h-56, overflow-hidden, relative. Contains either:MP4 video (<video> with autoPlay, loop, muted, playsInline, object-cover)
HLS video (HlsVideo component, object-cover)

Text area: p-6 lg:p-8Title: text-lg md:text-xl font-heading italic text-white mb-2 leading-tight
Body: text-sm font-body font-light text-white/40 leading-relaxed

Card data:title: "Designed to convert. Built to perform.", body: "Every pixel is intentional. Our AI studies what works across thousands of top sites -- then builds yours to outperform them all.", videoSrc: https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260302_085844_21a8f4b3-dea5-4ede-be16-d53f6973bb14.mp4 (MP4)
title: "It gets smarter. Automatically.", body: "Your site evolves on its own. AI monitors every click, scroll, and conversion -- then optimizes in real time.", videoSrc: https://stream.mux.com/T6oQJQ02cQ6N01TR6iHwZkKFkbepS34dkkIc9iukgy400g.m3u8 (HLS)

SLIDE 4 -- WhyUsSlide (src/slides/WhyUsSlide.tsx):
Background: Full-screen <video> (autoPlay, loop, muted, playsInline, object-cover) with NO opacity reduction. Video URL: https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260411_104032_69319010-2458-492b-b04d-b40a5dfa4482.mp4
Gradient overlay: <div className="absolute bottom-0 left-0 right-0 h-[50%] z-[1] pointer-events-none" style={{ background: 'linear-gradient(to top, black, transparent)' }} /> -- black-to-transparent gradient from bottom to middle
Layout: relative z-10, full height, flex column, px-10 lg:px-20 py-12 pb-20

Top section (flex-col lg:flex-row lg:items-end lg:justify-between, mb-auto):Left: section label "Why Us" (text-white/30, text-[10px], tracking-[0.3em], uppercase, mb-4) + headline "The difference\nis everything." (text-3xl md:text-4xl lg:text-5xl font-heading italic text-white tracking-tight leading-[0.9])
Right: subtitle (motion.p, slide from x:20, delay 0.3): "We do not just build websites. We engineer competitive advantages that compound over time." -- text-white/35 font-body font-light text-sm max-w-sm

Bottom cards (flex-1 flex items-end): grid-cols-2 lg:grid-cols-4, gap-4 lg:gap-6, w-full. 4 cards staggered (delay 0.3 + i*0.1, slide from y:30):Card: liquid-glass rounded-2xl p-6 lg:p-8 flex flex-col
Icon: liquid-glass-strong rounded-full w-10 h-10 containing Lucide icon (w-4 h-4 text-white), mb-6
Title: text-sm md:text-base font-body font-semibold text-white mb-2
Desc: text-xs font-body font-light text-white/40 leading-relaxed

Card data (icons from lucide-react):Zap, "Days, Not Months", "Concept to launch at a pace that redefines fast. Because waiting is not a strategy."
Palette, "Obsessively Crafted", "Every detail considered. Every element refined. Design so precise, it feels inevitable."
BarChart3, "Built to Convert", "Layouts informed by data. Decisions backed by performance. Results you can measure."
Shield, "Secure by Default", "Enterprise-grade protection comes standard. SSL, DDoS mitigation, compliance. All included."

SLIDE 5 -- StatsSlide (src/slides/StatsSlide.tsx):
Background: HlsVideo component with src https://stream.mux.com/NcU3HlHeF7CUL86azTTzpy3Tlb00d6iF3BmCdFslMJYM.m3u8 (absolute inset-0, object-cover, style={{ filter: 'saturate(0)' }} -- desaturated/grayscale). NO overlay.
Layout: relative z-10, full height, flex column, px-10 lg:px-20 py-12 pb-20
Top section (mb-auto):Section label "Traction" (text-white/30, text-[10px], tracking-[0.3em], uppercase, mb-6)
Headline: "Numbers that speak for themselves" -- text-4xl md:text-5xl lg:text-7xl font-heading italic text-white tracking-tight leading-[0.9] max-w-4xl

Stats grid: flex-col gap-6, containing two rows of grid-cols-1 lg:grid-cols-2 gap-4First row: stats[0] and stats[1], staggered delay 0.35 + i*0.1
Second row: stats[2] and stats[3], staggered delay 0.55 + i*0.1

Each stat: flex-col gap-8Top divider: <div className="h-px bg-white/20" />

Content: flex items-start gap-10 lg:gap-14Number: text-7xl md:text-8xl lg:text-[9.5rem] font-heading italic text-white leading-none shrink-0 (WHITE color, not blue)
Description: pt-3 lg:pt-4 pr-8 lg:pr-20 flex-1, text-white text-base md:text-lg lg:text-2xl font-body font-normal leading-relaxed

Stat data:"200+" -- "Sites launched and generating measurable results for brands across industries"
"98%" -- "Client satisfaction rate across all projects delivered in the last two years"
"3.2x" -- "Average conversion uplift compared to previous client sites and industry benchmarks"
"5 days" -- "Average delivery from concept to production-ready launch across all project types"

SLIDE 6 -- TestimonialsSlide (src/slides/TestimonialsSlide.tsx):

Background: Full-screen <video> (autoPlay, loop, muted, playsInline, object-cover) with NO overlay. Video URL: https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260406_094145_4a271a6c-3869-4f1c-8aa7-aeb0cb227994.mp4
Layout: relative z-10, full height, flex column, px-10 lg:px-20 py-12 pb-20
Section label: "Social Proof" (text-white/30, text-[10px], tracking-[0.3em], uppercase, mb-4)
Headline: "Don't take our\nword for it." -- text-3xl md:text-4xl lg:text-5xl font-heading italic text-white tracking-tight leading-[0.9] mb-auto
Testimonial cards grid: grid-cols-1 lg:grid-cols-3 gap-5 lg:gap-6. 3 cards staggered (delay 0.3 + i*0.12, slide from y:25):Card: liquid-glass rounded-2xl p-8 lg:p-10 flex flex-col justify-between
Quote section (mb-8): opening curly quote in text-3xl font-heading italic text-white/15 block mb-4, then quote text in text-white/70 font-body font-light text-sm lg:text-base italic leading-relaxed

Attribution (flex items-center gap-3, pt-4 border-t border-white/10):Avatar: w-8 h-8 rounded-full bg-white/10, initials in text-white/60 font-body text-xs font-medium
Name: text-white font-body font-medium text-sm
Role: text-white/40 font-body font-light text-xs

Testimonial data:"A complete rebuild in five days. The result outperformed everything we had spent months building before." -- Sarah Chen, CEO, Luminary
"Conversions up 4x. That is not a typo. The design just works differently when it is built on real data." -- Marcus Webb, Head of Growth, Arcline
"They did not just design our site. They defined our brand. World-class does not begin to cover it." -- Elena Voss, Brand Director, Helix

SLIDE 7 -- CtaSlide (src/slides/CtaSlide.tsx):
Background: Full-screen <video> (autoPlay, loop, muted, playsInline, object-cover) with NO overlay. Video URL: https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260324_024928_1efd0b0d-6c02-45a8-8847-1030900c4f63.mp4
Layout: relative z-10, full height, flex column, px-10 lg:px-20 py-12 pb-20
Section label: "Next Steps" (text-white/30, text-[10px], tracking-[0.3em], uppercase, mb-4)
Main content (flex-1, flex-col lg:flex-row, items-start lg:items-center, gap-12 lg:gap-20):
Left column (flex-1, max-w-2xl):Headline (motion.h2, slide from x:-25, delay 0.2): "Your next website\nstarts here." -- text-5xl md:text-6xl lg:text-7xl xl:text-8xl font-heading italic text-white leading-[0.85] tracking-tight mb-6
Body (motion.p, slide from x:-20, delay 0.5): "Book a free strategy call. See what AI-powered design can do. No commitment, no pressure. Just possibilities." -- text-white/40 font-body font-light text-sm md:text-base leading-relaxed max-w-md mb-10

Buttons (motion.div, slide from x:-15, delay 0.7): flex items-center gap-4Primary: bg-white text-black rounded-full px-6 py-3 text-sm font-body font-semibold with "Book a Call" + ArrowUpRight icon
Secondary: liquid-glass-strong rounded-full px-6 py-3 text-sm font-body font-medium text-white with "View Pricing"

Right column (motion.div, slide from x:30, delay 0.6): liquid-glass rounded-2xl p-8 lg:p-10 w-full max-w-xsHeader: Mail icon in liquid-glass-strong rounded-full w-10 h-10 + "Get in touch" label
Contact info: hello@studio.ai, +1 (555) 000-0000
Locations (pt-4 border-t border-white/10): San Francisco, CA and London, UK in text-white/30 text-xs

Footer (motion.div, fade delay 1.0): flex justify-between, border-t border-white/10 pt-4Left: "(c) 2026 Studio. All rights reserved." in text-white/30 text-xs
Right: Privacy, Terms, Contact links in text-white/30 text-xs hover:text-white/60

VIDEO URL REFERENCE:
Slide 1 BG: https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260411_104229_49794008-3d16-4cb6-9a8c-73d7751b0e79.mp4
Slide 2 BG: https://stream.mux.com/9JXDljEVWYwWu01PUkAemafDugK89o01BR6zqJ3aS9u00A.m3u8 (HLS)
Slide 3 BG: https://stream.mux.com/s8pMcOvMQXc4GD6AX4e1o01xFogFxipmuKltNfSYza0200.m3u8 (HLS, 50% opacity)
Slide 3 Card 1 video: https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260302_085844_21a8f4b3-dea5-4ede-be16-d53f6973bb14.mp4
Slide 3 Card 2 video: https://stream.mux.com/T6oQJQ02cQ6N01TR6iHwZkKFkbepS34dkkIc9iukgy400g.m3u8 (HLS)
Slide 4 BG: https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260411_104032_69319010-2458-492b-b04d-b40a5dfa4482.mp4
Slide 5 BG: https://stream.mux.com/NcU3HlHeF7CUL86azTTzpy3Tlb00d6iF3BmCdFslMJYM.m3u8 (HLS, desaturated)
Slide 6 BG: https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260406_094145_4a271a6c-3869-4f1c-8aa7-aeb0cb227994.mp4
Slide 7 BG: https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260324_024928_1efd0b0d-6c02-45a8-8847-1030900c4f63.mp4
FILE STRUCTURE:
index.html
package.json
tailwind.config.js
postcss.config.js
vite.config.ts
tsconfig.json / http://tsconfig.app.json / tsconfig.node.json
src/
main.tsx
App.tsx
index.css
vite-env.d.ts
components/
BlurText.tsx
HlsVideo.tsx
SlideControls.tsx
slides/
TitleSlide.tsx
ProblemSlide.tsx
CapabilitiesSlide.tsx
WhyUsSlide.tsx
StatsSlide.tsx
TestimonialsSlide.tsx
CtaSlide.tsx

Nimbus 网格

No.1463 · 前端开发 · 社区/原生 · 来源：MotionSites (MIT) · EN 原文

Build a single-page marketing site called **Nimbus Grid** — a fictional secure cloud storage capacity platform. Use plain HTML, CSS, and vanilla JS (Vite project). Match every detail below exactly.

---

## Global Setup

**Fonts (Google Fonts, preconnect both gstatic + googleapis):**
- `IBM Plex Sans` weights 400, 500 — body/headings
- `IBM Plex Mono` weights 400, 500 — labels, code, nav, CTAs

**CSS variables (`:root`):**
```
--bg: #17130d
--ink: #fff4d5
--muted: #dacaa1
--line: rgba(255,240,199,0.28)
--glass: rgba(255,239,199,0.16)
--glass-strong: rgba(255,239,199,0.24)
--accent: #ead09a
--accent-2: #ffd879
--deep: #4d3f24
--radius: 8px
color-scheme: dark
```

**Body:** dark warm background `radial-gradient(circle at top left, rgba(255,216,121,0.18), transparent 28rem) + var(--bg)`, ink color `#fff4d5`, IBM Plex Sans, font-size 1rem, line-height 1.375, letter-spacing 0.0175rem, antialiased. `<meta name="theme-color" content="#17130d">`.

**Smooth scroll** on `html`. Universal `box-sizing: border-box`. Anchor links inherit color, no underline.

---

## Section 1 — Hero

Full-viewport (`min-height: 100svh`) section with:

- **Animated shader background** as an `<iframe class="shader-bg" src="https://fragcoord.xyz/embed/c6zisyc6?viewport=1422x800" allow="autoplay; fullscreen" referrerpolicy="no-referrer">` absolutely positioned, centered with `transform: translate(-50%,-50%) scale(var(--shader-scale,5))`, `z-index:-3`, pointer-events none.
- **Fallback layer** `.shader-fallback` behind it (`z-index:-4`) — radial+linear warm-gold gradient (`#846f43 → #f0d27c → #fff2be`) so the page still looks intentional if the shader fails.
- JS: on load + debounced resize (180ms), recompute viewport so shader iframe matches window aspect, capped at 1422×800, scale = max(window.innerWidth/width, (window.innerHeight+110)/height).

**Site header (`.site-header`)** — flex row, `min-height: 42px`:
- Brand `NIMBUS GRID` in a glass pill (`padding: 9px 12px`, 1px ink-translucent border, `backdrop-filter: blur(18px) saturate(1.35)`, IBM Plex Mono 12px uppercase, inset highlight + soft shadow).
- Right side: nav (`Technology`, `Security`, `Capacity`, `Operations`) — Plex Mono 12px uppercase, 0.04rem letter-spacing, ink-translucent color, hover brightens.
- `.header-cta` button "Get Started" — same glass pill style, hover lifts 1px and brightens.

**Hero layout (grid, two rows):**
- **Top-left console card (`.console-card`)** width `min(396px, 42vw)`, dark `rgba(13,16,19,0.88)` panel, 5px radius, blurred backdrop:
- Tabs row (`grid-template-columns: repeat(3,minmax(0,77px)) 1fr auto`): `CLI`, `API`, `Console`, plus two fake window controls (small square + a wide bar). Active tab gets accent color and a 2px accent underline.
- Three panes (only one shown):
- **CLI:** `<pre>` showing `$ nimbus storage create \ --workspace prod-web \ --tier encrypted-fast \ --region eu-central` with `$` in accent color, then a typing-output line `storage pool web-db-test queued` in accent.
- **API:** `POST /v1/storage/pools` JSON body `{name:"web-db-test", tier:"encrypted-fast", quota:"8 TiB"}`, output `202 accepted: provisioning policy attached`.
- **Console:** mock form fields — `Instance name = web-db-test` (typed), `Image = ubuntu-24.04-noble`, two-column row `Memory = 8 GiB` / `CPUs = 2`. Each `console-input` is a 33px high outlined dark slot, the two select-style ones get a `▾` glyph appended.
- Pane size `min-height:153px`, Plex Mono 11px text.
- JS typewriter: per active pane, find `[data-typed]`, type one char every 42ms, blinking `::after` cursor (1px wide bar, `cursor-blink` 1s steps animation).

- **Hero copy** at bottom-left:
- H1: "Cloud space that scales with your business systems." — Plex Sans 400, `clamp(29px,3.5vw,56px)`, line-height 1, max-width 18ch.
- Paragraph: "Nimbus Grid sells secure cloud storage capacity for companies that need fast onboarding, predictable throughput, encrypted collaboration, and modern data residency controls." — `clamp(12px,1.125vw,16.5px)`, ink color, max-width 720px.
- Add a soft dark radial blur behind the text (`::before` with blurred ellipse, filter blur 26px) so copy stays readable over the shader.

---

## Section 2 — Platform accordion (scroll-driven)

`#platform`, `min-height: 420svh`, near-black `#050604` background with subtle gold radial top-right.

- `position: sticky` inner panel (`.accordion-inner`) at `top:0`, full viewport height, two-column grid `0.22fr | 0.78fr`.
- **Left nav** (`.accordion-nav`): four pill labels in Plex Mono 11px uppercase, each prefixed by a 7px square dot:
1. `Programmable infra`
2. `Data residency`
3. `Elastic scaling`
4. `Unified visibility`
Active tab uses accent color and shifts right 2px.
- **Right stack** (`.accordion-stack`, height `min(80svh, 820px)`): four `.accordion-card` panels stacked with `position:absolute; inset:0`. Each card is a two-column grid (copy + visual) on a black background with a 1px ink top border.
- **Card 1 — Programmable infra:** copy + a code window:
`01 storage_pool = { 02 name = "client-vault" 03 region = "eu-central" 04 quota = "24 TiB" 05 policy = encrypted_fast 06 }`
- **Card 2 — Data residency:** code window with `Region policy / EU Central locked / US East allowed / AP Southeast review / Retention 7 years`.
- **Card 3 — Elastic scaling:** `Capacity forecast / Used 18.4 TiB / Reserved 24 TiB / Burst ready / Next tier approved`.
- **Card 4 — Unified visibility:** `Operations view / Sync health stable / Cold data 14% / Policy drift 0 / Audit export live`.
- Each visual: warm gold gradient backdrop (`linear-gradient(135deg, rgba(234,208,154,0.92), rgba(106,91,52,0.68))` + radial highlight), centered dark code window with 3 dot-spans, 8px radius, deep shadow.

**Scroll behavior (JS):**
- Track section's `getBoundingClientRect()` → progress 0..1 over `(height - viewport)`.
- Map to active card index (rounded). Card N's translateY animates from `stackHeight + collapsedHeight` (off-bottom) up to `index * collapsedHeight` (collapsed=84px desktop / 96px mobile), clamped per segment.
- Each card sets `--card-y` (transform) and `--card-clip-bottom` (clip-path inset) so the active card fully reveals while previous cards stay as visible header strips.
- Clicking a tab smooth-scrolls window to that card's segment.

---

## Section 3 — Pricing

`#pricing`, dark olive `#11120f` with light top wash and a soft cyan radial blur (`rgba(151,211,235,0.14)`) bleeding from the top-left.

**Top grid** (max-width 1320px, two columns ~`0.38 | 0.62`):
- **Left copy:**
- Eyebrow `Pricing` (accent, Plex Mono 16px uppercase).
- H2: "Only pay for cloud storage your teams actually use." `clamp(34px,4vw,68px)`, line-height 1.
- Paragraph: "Scale capacity up for active projects and cool it down when workspaces go quiet. Nimbus Grid keeps storage, transfer, and policy costs visible before they become invoices."
- **Right pricing table** (`.pricing-table`): header row "Storage costs" + a billing toggle pill (`Per month` muted, `Per GiB` active = accent pill with `#241d0f` text). Then 5 rows separated by 1px ink lines, each `1fr | auto`:
- Encrypted active storage — `$0.021 / GiB / month`
- Warm collaboration tier — `$0.012 / GiB / month`
- Cold retained archive — `$0.004 / GiB / month`
- Regional accelerated transfer — `$0.018 / GiB moved`
- Customer-managed key vault — `included`
Right values use Plex Mono.

**Pricing bars** — full-bleed (`width: 100vw; margin-left: calc(50% - 50vw)`), 12-column grid, `height: 480px`, bars aligned to bottom. Each bar height = `var(--bar-height) + var(--bar-morph,0px)`, min-height 120px, gold gradient (alternating "muted" variant). Heights start at 12 fixed values (66/58/50/62/45/54/48/64/72/70/78/82%). Top edge fades into the section via gradient overlay.

**JS** ties bar height to scroll position: `progress = (viewport - rect.top) / (viewport + rect.height)`, then per-bar `morph = sin(progress*2π + i*0.72)*34 + cos(progress*π + i*0.34)*14` px, written to `--bar-morph`. Transitions `height 80ms linear`.

**Plan row** below — 3 columns (Starter / Team / Enterprise), each card max 300px:
- Starter: "For small teams consolidating shared project files." CTA `Start small`.
- Team: "For departments scaling collaboration and regional transfer." CTA `Build team plan`.
- Enterprise: "For organizations prioritizing governance, residency, and support." CTA `Talk to sales`.
CTAs: 42px tall pill, Plex Mono 12px uppercase, 1px ink translucent border, glass background, hover brightens.

---

## Section 4 — Security

`#security`, `#120f0a` background with two soft radial highlights (gold top-right, warm orange bottom-left), 1320px max-width.

**Heading row** (two columns `0.58 | 0.42`):
- Left: eyebrow `Security` + H2 "Modern encryption and compliance controls without slowing the team down."
- Right paragraph: "Role-based access, customer-managed keys, immutable retention, and regional storage policies give business clients a cloud layer that can satisfy procurement, IT, and legal from the first deployment."

**Three security cards** (`grid-template-columns: repeat(3, 1fr)`, gap `clamp(16px,2vw,22px)`, each `min-height: 464px`, square corners, 1px ink border, `#0f0c08` with subtle top wash):

1. **API card — "Full policy control"** + copy "First-class API access for storage pools, keys, regions, and retention rules. No vendor lock-in to proprietary workflows."
- Visual: a black `.api-window` (bottom-left, ~58% width, 184px tall) with three dots and pre-text:
```
-> nimbus auth login
Enter code
VAULT-9AMP

-> policy attach
workspace/client-vault
```
- An overlapping `.api-spec` (top-right, gold-tinted dark `rgba(64,52,30,0.86)`, accent border) showing:
```
openapi: 3.0.0
info:
title: Nimbus API
paths:
/storage/pools:
/keys:
/regions:
/retention:
```

2. **Compliance card — "Full compliance"** + copy "SOC 2, ISO 27001, and GDPR-ready controls help teams satisfy audits, procurement reviews, and data residency requirements." Below: three rows, each a 24px circular accent badge with a checkmark drawn via `::before` (rotated bottom+left borders), small label, accent strong line:
- SOC 2 — Type II controls
- ISO 27001 — Security management
- GDPR — Regional data policy
Rows are `rgba(48,39,23,0.84)` with accent-translucent borders.

3. **Economics card — "Ownership and predictable economics"** + copy "Reserved capacity, clear transfer lanes, and audit-ready billing make storage spend easy to forecast across business units."
- Visual: `<pre class="binary-map">` of 1s and 0s drawing a small graphic (10 rows, 28 columns, see the exact pattern in the original — a small icon shape carved out of 1s).
- Below: 3-row asset table — `Reserved tier | 24 TiB`, `Transfer lane | EU Central`, `Revision | Q603`. Mono 11px uppercase labels, mixed-case values.

---

## Section 5 — Console showcase

`#plans`, dark teal-leaning `#070a0b` with cyan radial accent. Includes a faint repeating-stripe block (decorative `::after`, top-right).

**Heading row:** H2 "The biggest forward leap in business cloud storage operations." (`clamp(25px,4vw,52px)`, color `#dff5ff`) + right paragraph "A single control plane for provisioning storage pools, reviewing policy, watching growth, and shipping audit-ready reports without asking teams to change how they work."

**Figure label:** small Plex Mono pill `Fig. 2 Nimbus Grid web console`.

**Dashboard shell** (`.dashboard-shell`):
- Full-width, 8px radius, cyan-translucent border, `rgba(5,8,10,0.9)` background, deep shadow, perspective transform.
- Topbar: 3 dots + a placeholder title bar.
- Body grid `240px | 1fr`:
- **Sidebar** "Client Vault" + nav items: Workspaces, **Storage Pools** (active, cyan tint), Retention, Access, Transfers, Reports.
- **Main:** title row "Storage Pools" (cyan `#97d3eb`) + `New pool` cyan-outlined button. Then a 5-column table:
| Name | Region | Used | Policy | State |
| finance-vault | EU Central | 18.4 TiB | 7 years | Healthy |
| design-assets | US East | 9.8 TiB | Versioned | Syncing |
| legal-archive | EU Central | 42.1 TiB | Immutable | Healthy |
| migration-lane | AP South | 6.2 TiB | Temporary | Queued |
Headers in Plex Mono uppercase, States in cyan Plex Mono uppercase.
- **Toast** absolutely positioned bottom-right: "Pool created / finance-vault ready" (cyan, dark background).
- Hover effect: shell tilts subtly (`rotateX(1deg) rotateY(-1.2deg) translateY(-8px)`), border brightens, a sheen pseudo-element sweeps left→right (`transform: translateX(-34%) → 34%`, opacity 0→1).

---

## Section 6 — Operations cube

`#operations`, `#0c0d0a` with cyan + gold radial accents; left-to-right dark gradient overlay so the copy reads cleanly.

**Two columns** `0.44 | 0.56`:

- **Left copy:** eyebrow `Operations`, H2 "A control layer for every storage move your business makes." (`clamp(34px,4.4vw,72px)`, line-height 0.98), paragraph "Route migrations, active workspaces, archives, and compliance exports through one operational grid. Nimbus Grid keeps capacity, policy, and transfer status visible before teams hit a limit." CTA button `Plan operations` — solid accent gold pill, dark `#1b160d` text, hover swaps to `--accent-2` and lifts 2px.

- **Right visual:** a 3D cube with explode-on-click animation.
- `.modal-cube-shell` button, perspective 1000px, `transform-style: preserve-3d`.
- `.operations-core-cube` size `clamp(142px,18vw,250px)` with 6 `.cube-face` divs (front/back/right/left/top/bottom). Each face: 18px radius, gold-blue radial gradient (`radial-gradient(circle at 48% 44%, rgba(255,216,121,0.98)…) + linear 135deg cyan→gold→dark`), inset highlights and shadows.
- Idle: floats with `core-cube-float` 6s ease-in-out infinite (small Y bob and rotation drift).
- On click (toggle `is-exploded`): core cube scales to 0.72; ~14 `.cube-particle` shards (10 cube fragments + 4 small `.dot` spheres) translate to randomized `--tx/--ty/--tz` offsets with `--s`, `--r`, staggered `--d` delays. Particles use `cubic-bezier(0.17,0.78,0.18,1)` 760ms transform + 420ms opacity; start blurred + dim, end sharp. Use the exact 14 particle definitions from the original (see hero-section markup pattern, ranges roughly tx: -310..330, ty: -250..225, tz: 30..210, s: 0.09..0.58).
- JS: on `click` (also Enter/Space when focused), toggle the `is-exploded` class. Focus outline 1px ink-translucent, offset 10px.

---

## Responsive Behavior

**`@media (max-width: 820px)`:**
- Header collapses to single column, nav wraps full-width, CTA full-width.
- Hero layout stacks; console card becomes full width; the diagonal `.console-line` decoration hides.
- Console tabs become 3 equal columns (48px tall). Window controls hide. Pane min-height 200px.
- Pricing top + plan row + security grid stack to single column.
- Accordion: nav 2-column grid above the stack, stack height 78svh, cards become 1-column.
- Console showcase: heading stacks; dashboard body single column; sidebar nav 2-cols; table drops Policy + State columns; toast becomes inline at bottom.
- Operations: stacks; cube `--spread: 0.72`.

**`@media (max-width: 520px)`:**
- Hero padding 22px 18px 0; H1 `clamp(28px,10vw,48px)`; copy 15px.
- Accordion nav 1-column.
- Operations cube `--spread: 0.48`; visual min-height 360px.
- Dashboard title row stacks vertically.

---

## Animations Summary

- `cursor-blink` — 1s infinite blinking caret in console (steps(2,start)).
- `core-cube-float` — 6s infinite gentle Y bob + tiny rotation drift on idle cube.
- Bar heights — JS-driven `--bar-morph` updates on scroll, eased to height with `transition: height 80ms linear`.
- Accordion cards — JS-driven `--card-y` translate + `--card-clip-bottom` clip-path follow scroll progress.
- Dashboard shell hover — 220ms ease 3D tilt + sheen sweep (520ms ease).
- Operations CTA hover — 160ms color/transform.
- Operations cube — click toggles `.is-exploded`: core 620ms cubic-bezier transform; shards 760ms cubic-bezier transform + 420ms opacity, staggered delays.
- Header CTA / accordion-tab / nav links — 160–200ms hover transitions.
- Smooth scroll on tab → section navigation.

---

## Project structure

```
index.html (full markup)
styles.css (all styles + media queries)
script.js (shader resize, console tabs typing, accordion scroll, bars, cube)
package.json (vite ^5.4.2, type:module, scripts: dev/build/preview)
vite.config.js (default)
```

Build with `npm run build`. The site uses no frameworks, no images — every visual is CSS/SVG/text.

Nimbus Ops

No.1464 · 前端开发 · 社区/原生 · 来源：MotionSites (MIT) · EN 原文

---

# Prompt to Recreate the Nimbus Grid Operations Section (Standalone)

Build a standalone single-section page: the "Operations" section from Nimbus Grid — the one with the eyebrow "Operations", heading "A control layer for every storage move your business makes.", and the interactive 3D exploding cube. Use plain HTML, CSS, and vanilla JS (Vite project, no frameworks). Match every detail below exactly.

---

## Global Setup

**Fonts (Google Fonts, preconnect both `fonts.googleapis.com` and `fonts.gstatic.com`):**
- `IBM Plex Sans` weights 400, 500
- `IBM Plex Mono` weights 400, 500

**CSS variables on `:root`:**
```css
:root {
color-scheme: dark;
--bg: #17130d;
--ink: #fff4d5;
--muted: #dacaa1;
--line: rgba(255, 240, 199, 0.28);
--glass: rgba(255, 239, 199, 0.16);
--glass-strong: rgba(255, 239, 199, 0.24);
--accent: #ead09a;
--accent-2: #ffd879;
--deep: #4d3f24;
--radius: 8px;
--font-sans: "IBM Plex Sans", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
--font-mono: "IBM Plex Mono", "SF Mono", ui-monospace, monospace;
}
```

**Resets:** Universal `box-sizing: border-box`. `html { scroll-behavior: smooth; }`. Body: `margin: 0`, background `var(--bg)`, color `var(--ink)`, `font-family: var(--font-sans)`, `font-size: 1rem`, `font-weight: 400`, `line-height: 1.375`, `letter-spacing: 0.0175rem`, antialiased. Anchors: `color: inherit; text-decoration: none;`. All headings/paragraphs: `margin-top: 0`.

---

## Color Theme Note

This section uses a **dual-palette**: the left copy column uses the warm gold theme (`var(--accent)`, `var(--ink)`), while the right visual area blends gold and cyan (`rgba(151, 211, 235, ...)`, `rgba(234, 208, 154, ...)`). The background itself mixes both palettes.

---

## Section: `.operations-cubes`

`<section class="operations-cubes" id="operations" aria-labelledby="operations-title">`

**Outer container:**
```css
.operations-cubes {
position: relative;
min-height: 96svh;
padding: clamp(84px, 9vw, 132px) clamp(20px, 5vw, 72px);
overflow: hidden;
border-top: 1px solid rgba(255, 240, 199, 0.1);
background:
radial-gradient(circle at 74% 42%, rgba(151, 211, 235, 0.16), transparent 25rem),
radial-gradient(circle at 22% 78%, rgba(255, 216, 121, 0.13), transparent 24rem),
#0c0d0a;
}
```

Background is a dark olive-black (`#0c0d0a`) with a cyan radial glow at upper-right and a warm gold glow at lower-left.

**Overlay gradient (`::before`) — fogs the left side to make copy readable over the visual:**
```css
.operations-cubes::before {
content: "";
position: absolute;
inset: 0;
pointer-events: none;
background:
linear-gradient(90deg, rgba(12, 13, 10, 0.94) 0%, rgba(12, 13, 10, 0.68) 42%, rgba(12, 13, 10, 0.08) 100%),
linear-gradient(180deg, rgba(255, 247, 222, 0.05), transparent 34%);
}
```

This is a left-to-right fog: nearly opaque on the left (where the copy sits), fading to nearly transparent on the right (where the cube visual lives). Plus a very subtle top-to-bottom warm glow.

---

### Layout: `.operations-inner`

```html
<div class="operations-inner">
<div class="operations-copy">...</div>
<div class="operations-visual">...</div>
</div>
```

```css
.operations-inner {
position: relative;
z-index: 1;
display: grid;
grid-template-columns: minmax(280px, 0.44fr) minmax(420px, 0.56fr);
gap: clamp(44px, 7vw, 108px);
align-items: center;
width: min(100%, 1320px);
min-height: calc(96svh - clamp(168px, 18vw, 264px));
margin-inline: auto;
}
```

Two-column grid: 44% copy on the left, 56% visual on the right. Vertically centered.

---

### Left: `.operations-copy`

```html
<div class="operations-copy">
<p class="eyebrow">Operations</p>
<h2 id="operations-title">A control layer for every storage move your business makes.</h2>
<p>
Route migrations, active workspaces, archives, and compliance exports through one operational grid.
Nimbus Grid keeps capacity, policy, and transfer status visible before teams hit a limit.
</p>
<a class="operations-cta" href="#plans">Plan operations</a>
</div>
```

```css
.operations-copy h2 {
max-width: 740px;
margin-bottom: 26px;
font-size: clamp(34px, 4.4vw, 72px);
line-height: 0.98;
}

.operations-copy p:not(.eyebrow) {
max-width: 560px;
margin-bottom: 34px;
color: rgba(255, 244, 213, 0.76);
font-size: clamp(16px, 1.25vw, 20px);
line-height: 1.58;
}
```

**CTA button (`.operations-cta`) — gold filled button, dark text:**
```css
.operations-cta {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 46px;
padding: 0 20px;
border: 1px solid rgba(255, 247, 222, 0.32);
border-radius: var(--radius);
color: #1b160d;
background: var(--accent);
font-family: var(--font-mono);
font-size: 12px;
line-height: 1rem;
letter-spacing: 0.04rem;
text-transform: uppercase;
transition: background 160ms ease, transform 160ms ease;
}

.operations-cta:hover {
background: var(--accent-2);
transform: translateY(-2px);
}
```

This is the only filled/solid CTA on the page — gold background with dark text. On hover it brightens to `--accent-2` and lifts 2px.

---

### Right: `.operations-visual` (the 3D exploding cube)

This is the most complex visual element: a CSS 3D cube with 6 faces, surrounded by particle fragments that explode outward on click.

```html
<div class="operations-visual">
<button class="modal-cube-shell" type="button" aria-label="Explode storage operations cube">
<!-- 10 rectangular particles -->
<span class="cube-particle" style="--tx: -210px; --ty: -132px; --tz: 80px; --s: 0.42; --r: -18deg; --d: 0ms;"></span>
<span class="cube-particle" style="--tx: -122px; --ty: -188px; --tz: 140px; --s: 0.34; --r: 12deg; --d: 28ms;"></span>
<span class="cube-particle" style="--tx: 156px; --ty: -170px; --tz: 120px; --s: 0.38; --r: -8deg; --d: 46ms;"></span>
<span class="cube-particle" style="--tx: 252px; --ty: -88px; --tz: 50px; --s: 0.52; --r: 18deg; --d: 72ms;"></span>
<span class="cube-particle" style="--tx: -262px; --ty: 4px; --tz: 100px; --s: 0.5; --r: 22deg; --d: 98ms;"></span>
<span class="cube-particle" style="--tx: -174px; --ty: 104px; --tz: 40px; --s: 0.36; --r: -32deg; --d: 118ms;"></span>
<span class="cube-particle" style="--tx: 188px; --ty: 86px; --tz: 150px; --s: 0.44; --r: 28deg; --d: 140ms;"></span>
<span class="cube-particle" style="--tx: 280px; --ty: 162px; --tz: 78px; --s: 0.58; --r: -16deg; --d: 168ms;"></span>
<span class="cube-particle" style="--tx: -42px; --ty: -228px; --tz: 210px; --s: 0.26; --r: 34deg; --d: 188ms;"></span>
<span class="cube-particle" style="--tx: 62px; --ty: 224px; --tz: 175px; --s: 0.32; --r: -24deg; --d: 210ms;"></span>

<!-- 4 dot (circular) particles -->
<span class="cube-particle dot" style="--tx: -308px; --ty: -92px; --tz: 40px; --s: 0.12; --d: 24ms;"></span>
<span class="cube-particle dot" style="--tx: 326px; --ty: -8px; --tz: 90px; --s: 0.1; --d: 84ms;"></span>
<span class="cube-particle dot" style="--tx: -238px; --ty: 198px; --tz: 30px; --s: 0.11; --d: 126ms;"></span>
<span class="cube-particle dot" style="--tx: 142px; --ty: -246px; --tz: 70px; --s: 0.09; --d: 164ms;"></span>

<!-- The main cube -->
<span class="operations-core-cube">
<span class="cube-face cube-face-front"></span>
<span class="cube-face cube-face-back"></span>
<span class="cube-face cube-face-right"></span>
<span class="cube-face cube-face-left"></span>
<span class="cube-face cube-face-top"></span>
<span class="cube-face cube-face-bottom"></span>
</span>
</button>
</div>
```

**Custom properties per particle (set via inline style):**
- `--tx`, `--ty`, `--tz`: 3D translation offset when exploded
- `--s`: scale factor when exploded
- `--r`: rotation angle when exploded (rectangular particles only)
- `--d`: stagger delay for the explosion transition

#### Visual container

```css
.operations-visual {
position: relative;
min-height: min(58vw, 620px);
}

.operations-visual::before {
content: "";
position: absolute;
inset: 8% -14% 0;
background: radial-gradient(ellipse at center, rgba(234, 208, 154, 0.18), rgba(151, 211, 235, 0.08) 34%, transparent 68%);
filter: blur(24px);
}
```

A diffuse glow behind the cube — gold at center, fading to cyan, then transparent. Blurred for a soft halo.

#### Button shell

```css
.modal-cube-shell {
position: absolute;
inset: 0;
width: 100%;
min-height: inherit;
border: 0;
padding: 0;
color: inherit;
background: transparent;
cursor: pointer;
perspective: 1000px;
transform-style: preserve-3d;
touch-action: manipulation;
-webkit-tap-highlight-color: transparent;
}

.modal-cube-shell:focus-visible {
outline: 1px solid rgba(255, 247, 222, 0.72);
outline-offset: 10px;
}
```

The entire visual area is a `<button>` so the cube is clickable. `perspective: 1000px` enables 3D rendering for children.

#### Core cube (6-face CSS cube)

```css
.operations-core-cube,
.cube-particle {
--cube-size: clamp(142px, 18vw, 250px);
position: absolute;
top: 50%;
left: 50%;
width: var(--cube-size);
height: var(--cube-size);
transform-style: preserve-3d;
}

.operations-core-cube {
transform: translate(-50%, -48%) rotateX(-16deg) rotateY(34deg) rotateZ(0deg);
animation: core-cube-float 6s ease-in-out infinite;
transition: transform 620ms cubic-bezier(0.2, 0.8, 0.2, 1), filter 620ms ease;
filter: drop-shadow(0 34px 62px rgba(0, 0, 0, 0.48));
}
```

The cube is centered in the visual area and rotated to show 3 faces (front, right, top) via `rotateX(-16deg) rotateY(34deg)`. It gently floats via the `core-cube-float` animation.

**Float animation:**
```css
@keyframes core-cube-float {
0%, 100% {
transform: translate(-50%, -48%) rotateX(-16deg) rotateY(34deg) translateY(0);
}
50% {
transform: translate(-50%, -52%) rotateX(-14deg) rotateY(38deg) translateY(-10px);
}
}
```

Subtle breathing: the cube drifts 10px upward and rotates slightly at midpoint, then returns. 6-second cycle.

**Exploded state (when `.is-exploded` class is on the shell):**
```css
.modal-cube-shell.is-exploded .operations-core-cube {
transform: translate(-50%, -46%) rotateX(-14deg) rotateY(42deg) rotateZ(0deg) scale(0.72);
filter: drop-shadow(0 18px 44px rgba(0, 0, 0, 0.38));
animation: none;
}
```

On click, the core cube shrinks to 72%, rotates slightly further, and stops floating.

#### Cube faces

```css
.cube-face {
position: absolute;
inset: 0;
border: 1px solid rgba(255, 247, 222, 0.18);
border-radius: 18px;
background:
radial-gradient(circle at 48% 44%, rgba(255, 216, 121, 0.98) 0 11%, rgba(255, 216, 121, 0.32) 22%, transparent 48%),
radial-gradient(circle at 18% 15%, rgba(255, 247, 222, 0.92), transparent 30%),
linear-gradient(135deg, rgba(151, 211, 235, 0.46), rgba(234, 208, 154, 0.78) 38%, rgba(43, 35, 19, 0.92) 100%);
box-shadow:
inset 0 2px 6px rgba(255, 247, 222, 0.38),
inset -22px -28px 36px rgba(0, 0, 0, 0.34),
inset 18px 12px 28px rgba(151, 211, 235, 0.18);
opacity: 0.98;
backface-visibility: hidden;
}
```

Each face has rounded corners (18px), a complex layered background (gold hotspot center, bright highlight top-left, cyan-to-gold-to-dark diagonal gradient), and multiple inset shadows for depth. `backface-visibility: hidden` prevents rendering the back side.

**Face transforms (standard CSS cube):**
```css
.cube-face-front { transform: translateZ(calc(var(--cube-size) / 2)); }
.cube-face-back { transform: rotateY(180deg) translateZ(calc(var(--cube-size) / 2)); }
.cube-face-right { transform: rotateY(90deg) translateZ(calc(var(--cube-size) / 2)); }
.cube-face-left { transform: rotateY(-90deg) translateZ(calc(var(--cube-size) / 2)); }
.cube-face-top { transform: rotateX(90deg) translateZ(calc(var(--cube-size) / 2)); }
.cube-face-bottom { transform: rotateX(-90deg) translateZ(calc(var(--cube-size) / 2)); }
```

#### Particles (scattered fragments)

There are 14 particles total: 10 rectangular (`cube-particle`) and 4 circular (`cube-particle dot`).

**Default state (collapsed — hidden inside/behind the cube):**
```css
.cube-particle {
--cube-size: clamp(72px, 8vw, 116px);
opacity: 0;
transform: translate(-50%, -48%) rotateX(-16deg) rotateY(34deg) scale(0.12);
transition:
opacity 420ms ease var(--d),
transform 760ms cubic-bezier(0.17, 0.78, 0.18, 1) var(--d),
filter 760ms ease var(--d);
filter: blur(4px) brightness(0.7);
}
```

Particles start invisible, tiny (scale 0.12), blurred, and dimmed. Each transition is staggered by `--d` (0ms to 210ms).

**Particle appearance (two pseudo-elements create a layered shard):**
```css
.cube-particle::before,
.cube-particle::after {
content: "";
position: absolute;
width: 100%;
height: 100%;
border-radius: 9px;
}

.cube-particle::before {
background:
radial-gradient(circle at 48% 44%, rgba(255, 216, 121, 0.9), transparent 36%),
linear-gradient(135deg, rgba(255, 247, 222, 0.42), rgba(234, 208, 154, 0.76) 42%, rgba(26, 28, 20, 0.88));
box-shadow: inset 0 1px 4px rgba(255, 247, 222, 0.4), 0 20px 44px rgba(0, 0, 0, 0.36);
}

.cube-particle::after {
inset: 10%;
border: 1px solid rgba(255, 247, 222, 0.14);
background:
linear-gradient(90deg, rgba(151, 211, 235, 0.28), transparent 42%),
linear-gradient(180deg, rgba(255, 247, 222, 0.26), transparent 48%);
}
```

`::before` is the main body (gold-highlighted shard). `::after` is a smaller inset overlay (10% padding) with a cyan-to-transparent gradient and a faint border — adding a glass-like inner surface.

**Dot particles (circular):**
```css
.cube-particle.dot {
--cube-size: clamp(48px, 5vw, 74px);
}

.cube-particle.dot::before,
.cube-particle.dot::after {
border-radius: 50%;
}
```

Same as rectangular particles but smaller and fully round.

**Exploded state:**
```css
.modal-cube-shell.is-exploded .cube-particle {
opacity: 1;
transform:
translate(-50%, -48%)
translate3d(calc(var(--tx) * var(--spread, 1)), calc(var(--ty) * var(--spread, 1)), calc(var(--tz) * var(--spread, 1)))
rotateX(-16deg)
rotateY(34deg)
rotateZ(var(--r, 0deg))
scale(var(--s));
filter: blur(0) brightness(1);
}
```

On explosion: each particle flies to its `--tx/--ty/--tz` position (multiplied by `--spread` for responsive scaling), rotates by `--r`, scales to `--s`, becomes fully visible, and unblurs. The staggered `--d` delay creates a cascading burst effect.

---

## JavaScript: Toggle explode on click

```js
const operationsCube = document.querySelector(".modal-cube-shell");

if (operationsCube) {
const toggleCube = () => operationsCube.classList.toggle("is-exploded");

operationsCube.addEventListener("click", toggleCube);
operationsCube.addEventListener("keydown", (event) => {
if (event.key === " " || event.key === "Enter") {
event.preventDefault();
toggleCube();
}
});
}
```

Click or press Enter/Space toggles the `.is-exploded` class. All animation is CSS transition-driven — JS just toggles the class. First click explodes, second click implodes (particles fly back to center).

---

## Responsive Breakpoints

### `@media (max-width: 820px)`

```css
.operations-cubes {
min-height: auto;
padding-block: 76px;
}

.operations-inner {
grid-template-columns: 1fr;
gap: 42px;
min-height: 0;
}

.operations-cubes::before {
background:
linear-gradient(180deg, rgba(12, 13, 10, 0.9) 0%, rgba(12, 13, 10, 0.62) 54%, rgba(12, 13, 10, 0.18) 100%),
linear-gradient(180deg, rgba(255, 247, 222, 0.05), transparent 34%);
}

.operations-visual {
min-height: 460px;
}

.modal-cube-shell {
--spread: 0.72;
}
```

At 820px: Stacks to single column (copy above visual). The overlay gradient changes from left-to-right to top-to-bottom. Particles spread at 72% of their desktop distance. Visual min-height reduces.

### `@media (max-width: 520px)`

```css
.operations-cubes {
padding: 64px 18px;
}

.operations-copy h2 {
font-size: clamp(32px, 9vw, 48px);
}

.operations-copy p:not(.eyebrow) {
font-size: 15px;
}

.operations-visual {
min-height: 360px;
}

.modal-cube-shell {
--spread: 0.48;
}
```

At 520px: Even tighter padding. Heading scales down. Particles spread at 48% distance. Visual shrinks to 360px.

---

## Project structure

```
index.html (section markup + font links)
styles.css (all styles + media queries + keyframes)
script.js (click-to-explode toggle)
package.json (vite ^5.4.2, "type": "module", scripts: dev/build/preview)
vite.config.js (default export)
```

No images, no frameworks, no 3D libraries. The entire cube is pure CSS `transform-style: preserve-3d` with 6 positioned faces. Particles are CSS pseudo-elements with staggered transitions. The only JS is a single class toggle.

Financial Suite

No.1465 · 前端开发 · 社区/原生 · 来源：MotionSites (MIT) · EN 原文

Build a single-page premium credit card landing page called **"Infinite"** using **React + Vite + TypeScript + Tailwind CSS + lucide-react**. The page background is `#0A0B11`. The page title is "Infinite - Premium Credit Card".

**Tech Stack:**
- Vite + React 18 + TypeScript
- Tailwind CSS 3.4
- lucide-react (icons: `Play`, `Menu`, `X`, `User`, `Plus`)
- No other dependencies

**Fonts:**
- Primary: **Geist** from Google Fonts (`https://fonts.googleapis.com/css2?family=Geist:wght@300;400;500;600;700&display=swap`), applied globally via `* { font-family: 'Geist', sans-serif; }`
- Secondary: **Helvetica Neue Roman** loaded locally via `@font-face` from `/fonts/HelveticaNeue-Roman.woff2` and `.woff`. Applied via a utility class `.font-helvetica-neue` (and all children) used on the hero section only.

**Tailwind config extension:**
```js
transitionDuration: { '400': '400ms' }
```

---

### GLOBAL CSS (index.css)

```css
@import url('https://fonts.googleapis.com/css2?family=Geist:wght@300;400;500;600;700&display=swap');

@tailwind base;
@tailwind components;
@tailwind utilities;

@font-face {
font-family: 'Helvetica Neue Roman';
src: url('/fonts/HelveticaNeue-Roman.woff2') format('woff2'),
url('/fonts/HelveticaNeue-Roman.woff') format('woff');
font-weight: 400;
font-style: normal;
font-display: swap;
}

* {
font-family: 'Geist', sans-serif;
}

.font-helvetica-neue,
.font-helvetica-neue * {
font-family: 'Helvetica Neue Roman', 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

@keyframes fadeSlideUp {
0% { opacity: 0; transform: translateY(24px); }
100% { opacity: 1; transform: translateY(0); }
}

@keyframes fadeIn {
0% { opacity: 0; }
100% { opacity: 1; }
}

.anim-stagger {
opacity: 0;
transform: translateY(24px);
animation: fadeSlideUp 0.9s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.anim-fade {
opacity: 0;
animation: fadeIn 1s cubic-bezier(0.16, 1, 0.3, 1) both;
}
```

---

### CONSTANTS

```
SCROLL_DISTANCE = 1800 (pixels of scroll to scrub through full video)
SPOTLIGHT_R = 260 (radius of cursor spotlight reveal effect in pixels)
GRID_CELL = 48 (grid pattern cell size in pixels)
```

---

### IMAGE & VIDEO URLS

```
BG_IMAGE_1 (hero base): https://images.higgs.ai/?default=1&output=webp&url=https%3A%2F%2Fd8j0ntlcm91z4.cloudfront.net%2Fuser_38xzZboKViGWJOttwIXH07lWA1P%2Fhf_20260629_235011_7a23734e-7fe9-4491-ac28-e46133f980c2.png&w=1280&q=85

BG_IMAGE_2 (hero spotlight reveal): https://images.higgs.ai/?default=1&output=webp&url=https%3A%2F%2Fd8j0ntlcm91z4.cloudfront.net%2Fuser_38xzZboKViGWJOttwIXH07lWA1P%2Fhf_20260630_011539_f0e4cacc-143c-4bec-9db3-d3415e656a83.png&w=1280&q=85

CARD_IMAGE_1 (card section base): https://soft-zoom-63098134.figma.site/_assets/v11/47ffd9fae3c79a54bef0ff41737f6ad654c92213.png?w=1024

CARD_IMAGE_2 (card section spotlight reveal): https://soft-zoom-63098134.figma.site/_assets/v11/400e1612d64f65aee1c05735530d6f7a86ae3b8d.png?w=1024

VIDEO_1 (scroll-scrubbed video): https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260630_060707_72cd8ca2-3e4b-460c-9293-575573810866.mp4
```

---

### Z-INDEX HIERARCHY

```
z-0: scroll spacer div
z-2: fixed video layer
z-3: sticky hero section
z-4: fixed card section
z-5: content overlays within card section
z-10: "+ More" button in card section
z-30: spotlight reveal layers
z-40: bottom gradient overlays
z-50: hero bottom content
z-54: mobile menu backdrop overlay
z-55: mobile dropdown menu
z-60: fixed navigation bar
```

---

### NAVIGATION BAR (fixed, z-60, all sections)

A `position: fixed; top: 0; left: 0; right: 0` nav with `z-[60]`, flex row, items centered, justify-between. Padding: `px-5 sm:px-8 md:px-10 py-4 sm:py-5`.

**Left: Logo + Wordmark**
- Custom SVG logo (24x24, white, viewBox 0 0 256 256) — a geometric 4-quadrant shape with cut corners:
```
M 128 192 L 128 256 L 64.5 256 L 32 223 L 0 192 L 0 128 L 64 128 Z
M 256 192 L 256 256 L 192.5 256 L 160 223 L 128 192 L 128 128 L 192 128 Z
M 128 64 L 128 128 L 64.5 128 L 32 95 L 0 64 L 0 0 L 64 0 Z
M 256 64 L 256 128 L 192.5 128 L 160 95 L 128 64 L 128 0 L 192 0 Z
```
- "INFINITE" text: `text-sm font-medium tracking-wide uppercase text-white`

**Center (hidden on mobile, `hidden md:flex`):** Pill navigation
- Container: `absolute left-1/2 -translate-x-1/2 bg-white/10 backdrop-blur-md rounded-full px-1.5 py-1.5 items-center gap-0.5`
- Active tab "Card": `bg-white text-gray-900 text-sm font-medium px-4 py-1.5 rounded-full`
- Inactive tabs ("Rewards", "Travel", "Plans", "Support"): `text-white/70 text-sm font-medium px-4 py-1.5 rounded-full hover:text-white transition-colors`

**Right (hidden on mobile, `hidden md:flex`):**
- Account button: pill with embedded avatar circle. `flex items-center gap-2 bg-white/10 backdrop-blur-md text-white/80 text-sm font-medium pl-1.5 pr-4 py-1.5 rounded-full hover:text-white hover:bg-white/15 transition-colors`. Inner circle: `w-7 h-7 rounded-full bg-white/20` with `User` icon (size 14, strokeWidth 1.8).
- "Get Started" button: `bg-white text-gray-900 text-sm font-medium px-5 py-2 rounded-full hover:bg-white/90 transition-colors`

**Mobile hamburger (md:hidden):**
- Button: `text-white p-2 relative w-8 h-8 flex items-center justify-center`
- Two overlapping icon spans (X and Menu) with crossfade + rotation animation: the active icon is `opacity-100 rotate-0`, the inactive is `opacity-0 rotate-90` (or `-rotate-90`). Both have `absolute transition-all duration-300`.

**Mobile menu overlay (z-54):**
- `fixed inset-0 bg-black/60 backdrop-blur-sm md:hidden transition-opacity duration-300`
- Visible when menuOpen, otherwise `opacity-0 pointer-events-none`
- Clicking closes menu

**Mobile dropdown menu (z-55):**
- `fixed top-0 left-0 right-0 bg-[#0A0B11]/98 backdrop-blur-xl pt-20 pb-8 px-6 border-b border-white/10 flex flex-col gap-0 md:hidden`
- Transform animation: `transition-all duration-400 ease-[cubic-bezier(0.16,1,0.3,1)] origin-top`
- Open state: `translate-y-0 opacity-100 scale-y-100`
- Closed state: `-translate-y-4 opacity-0 scale-y-95 pointer-events-none`
- Menu items: ['Card', 'Rewards', 'Travel', 'Plans', 'Support'] — each is `text-white/80 text-[17px] font-medium py-4 border-b border-white/[0.06] text-left hover:text-white transition-all duration-300`
- Staggered entrance: each item gets `transitionDelay: ${80 + i * 40}ms` when open, `0ms` when closed
- Bottom buttons group (Account + Get Started) with `transitionDelay: 300ms`

---

### SECTION 1: HERO SECTION (sticky, z-3)

Component: `HeroSection({ faded: boolean })`

A full-viewport section with:
- `position: sticky; top: 0; height: 100vh; overflow: clip; z-index: 3`
- Class: `font-helvetica-neue relative w-full`
- The entire inner content wrapper has `transition-opacity duration-500` and fades to `opacity: 0` when `faded` is true (when scroll begins).

**Mouse tracking system:**
- Raw mouse position tracked via `mousemove` listener
- Smoothed position via lerp in a `requestAnimationFrame` loop: `smooth += (raw - smooth) * 0.1`
- Grid offset calculated: cursor position relative to section center * 16, eased at 0.06 factor

**Layer 1: SVG Grid Pattern (z-0, opacity 8%)**
- Full absolute inset-0 SVG with a `<pattern>` element
- Cell size: 48px x 48px, `patternUnits="userSpaceOnUse"`
- Pattern x/y offset driven by the smoothed grid offset (parallax)
- Path draws an L-shape: `M 48 0 L 0 0 0 48` (top and left edges of each cell)
- Stroke: `#94a3b8`, strokeWidth: 0.5, fill: none
- A full `<rect width="100%" height="100%">` fills with the pattern

**Layer 2: Base Background Image (z-10)**
- `absolute inset-0 bg-center bg-cover bg-no-repeat`
- Uses `BG_IMAGE_1` as background-image
- Has class `anim-fade` with `animationDelay: '0.1s'`

**Layer 3: Spotlight Reveal Layer (z-30)**
- Component: `RevealLayer({ image, cursorX, cursorY })`
- A hidden `<canvas>` sized to window dimensions (resized on window resize)
- On every render (no dependency array on the useEffect), draws a radial gradient at cursor position:
- `createRadialGradient(cursorX, cursorY, 0, cursorX, cursorY, 260)`
- Stops: 0 -> white 100%, 0.4 -> white 100%, 0.6 -> white 75%, 0.75 -> white 40%, 0.88 -> white 12%, 1.0 -> white 0%
- Draws filled arc circle
- Canvas is converted to `toDataURL()` and applied as CSS mask (`maskImage` + `webkitMaskImage`) to the image div
- Image div: `absolute inset-0 bg-center bg-cover bg-no-repeat z-30 pointer-events-none` with `BG_IMAGE_2`

**Layer 4: Bottom Gradient (z-40)**
- `absolute bottom-0 left-0 right-0 h-72 pointer-events-none`
- `bg-gradient-to-t from-[#0A0B11] via-[#0A0B11]/60 to-transparent`

**Layer 5: Hero Content (z-50)**
- `absolute bottom-0 left-0 right-0 px-6 sm:px-10 md:px-14 pb-12 sm:pb-16 md:pb-20`
- 12-column grid: `grid grid-cols-1 md:grid-cols-12 gap-8 md:gap-12 items-end`

**Left column (md:col-span-7 lg:col-span-8):**

1. Badge line (animationDelay: 0.3s, class: anim-stagger):
- White circle: `w-2.5 h-2.5 rounded-full bg-white/80`
- Text: "Best digital banking card 2026" — `text-sm sm:text-[15px] text-white/80 font-normal tracking-wide`

2. Heading (animationDelay: 0.5s, class: anim-stagger):
- `"One Card, Zero\nLimits. Worldwide."` (line break after "Zero")
- `text-[clamp(2.2rem,6.5vw,5rem)] font-light text-white leading-[0.95] tracking-[-0.03em] mb-8 sm:mb-10`

3. Buttons row (animationDelay: 0.7s, class: anim-stagger):
- "See Features": `bg-white text-gray-900 text-sm font-medium px-6 sm:px-7 py-3 sm:py-3.5 rounded-full hover:bg-white/90 transition-all`
- "How It Works": `flex items-center gap-2.5 bg-white/5 backdrop-blur-sm border border-white/10 text-white/90 text-sm font-medium px-6 sm:px-7 py-3 sm:py-3.5 rounded-full hover:bg-white/15 transition-all` with `Play` icon (size 13, `fill-white/90`)

**Right column (md:col-span-5 lg:col-span-4, animationDelay: 0.85s, class: anim-stagger):**
- Paragraph: "Infinite is a premium metal credit card built for those who move fast and spend globally. Tap anywhere, earn instantly, skip foreign fees entirely, and travel already rewarded."
- `text-[15px] sm:text-base text-white/75 leading-relaxed font-normal`

---

### SECTION 2: SCROLL-DRIVEN VIDEO LAYER (fixed, z-2)

A `position: fixed; inset: 0; z-index: 2` div containing:

- `transition-opacity duration-500 pointer-events-none`
- Opacity: 1 when videoPhase is not 'idle', 0 when 'idle'

**Video element:**
- `src={VIDEO_1}`, `muted`, `playsInline`, `preload="auto"`
- `className="w-full h-full object-cover"`
- Does NOT autoplay — `currentTime` is set programmatically

**Bottom gradient overlay:**
- `absolute bottom-0 left-0 right-0 h-72 bg-gradient-to-t from-[#0A0B11] via-[#0A0B11]/60 to-transparent`

**Scroll spacer:**
- A div with `height: 1800px; position: relative; z-index: 0` placed in the document flow after the hero section

**Video scrubbing logic (in App component useEffect with rAF loop):**
```
progress = Math.min(window.scrollY / 1800, 1)
video.currentTime = progress * video.duration
```
- Phase state machine:
- scrollY === 0 -> 'idle' (reset currentTime to 0)
- 0 < progress < 0.99 -> 'playing'
- progress >= 0.99 -> 'done'
- Only sets currentTime when `!video.seeking`
- Uses a ref (`phaseRef`) to avoid unnecessary re-renders

---

### SECTION 3: CARD SECTION (fixed, z-4)

Component: `CardSection({ imagesVisible: boolean })`

A `position: fixed; inset: 0; width: 100%; height: 100%; z-index: 4` section.
- `transition-opacity duration-1000 ease-out`
- opacity: 1 when `imagesVisible` (videoPhase === 'done'), 0 otherwise
- pointerEvents: 'auto' when visible, 'none' when hidden

**Has its own independent mouse tracking + spotlight system** (same lerp technique as hero, factor 0.1, using local coordinates relative to section bounds).

**Layer 1: Base Card Image (z-1)**
- `absolute inset-0 bg-center bg-cover bg-no-repeat`
- backgroundImage: `CARD_IMAGE_1`

**Layer 2: Spotlight Reveal Card Image (z-3)**
- Hidden canvas + masked div, same technique as hero RevealLayer
- Local coordinates: `smooth.x - sectionRect.left`, `smooth.y - sectionRect.top`
- Same gradient stops (260px radius)
- backgroundImage: `CARD_IMAGE_2`

**Layer 3: Giant Background Text (z-0)**
- `absolute inset-0 flex items-center justify-center pointer-events-none select-none overflow-hidden`
- Text: "INFINITE"
- Styles: `font-medium tracking-[-0.05em] text-white/[0.04] whitespace-nowrap uppercase` with inline `fontSize: '26vw'`
- This text fills the full width of the viewport

**Content Overlays:**

**Top-left heading (z-5):**
- `relative pt-16 sm:pt-28 md:pt-32 px-5 sm:px-10 md:px-14`
- "Instantly Active" — `text-[clamp(2rem,7vw,5.5rem)] font-light text-white leading-[0.95] tracking-[-0.03em]`

**Top-right "+ More" button (z-10):**
- `absolute top-16 sm:top-28 md:top-32 right-5 sm:right-10 md:right-14`
- Button: `flex items-center gap-2 bg-white/10 backdrop-blur-sm border border-white/15 text-white/80 text-sm font-medium px-4 sm:px-5 py-2 sm:py-2.5 rounded-full hover:bg-white/15 transition-all`
- lucide `Plus` icon (size 15) + "More" text

**Bottom-right heading (z-5):**
- `absolute bottom-44 sm:bottom-40 md:bottom-44 right-5 sm:right-10 md:right-14`
- "Before You Swipe" — same typography as top-left heading, with `text-right`

**Bottom-left content (z-5):**
- `absolute bottom-6 sm:bottom-14 md:bottom-16 left-5 sm:left-10 md:left-14 right-5 sm:right-auto`
- Inner `max-w-md`:
- Paragraph: "Get approved in seconds, receive your virtual card instantly, and arrive with cashback, travel perks, and spending insights already active." — `text-sm sm:text-[15px] md:text-base text-white/65 leading-relaxed mb-5 sm:mb-6`
- Button "Apply now for free": `bg-white text-gray-900 text-sm font-medium px-5 sm:px-6 py-2.5 sm:py-3 rounded-full hover:bg-white/90 transition-all`

---

### KEY INTERACTION BEHAVIORS

1. **On load:** Hero is visible with staggered entrance animations (fadeSlideUp with incremental delays: 0.3s, 0.5s, 0.7s, 0.85s). Base image fades in (0.1s delay).

2. **Scrolling (0 to 1800px):** Video layer fades in (opacity 0 -> 1, 500ms transition). Video currentTime is scrubbed proportionally to scroll position. Hero content fades out simultaneously (500ms opacity transition to 0).

3. **Scroll reaches 99%+:** Video phase becomes "done". Card section fades in over 1000ms (ease-out). Video layer remains visible underneath.

4. **Spotlight reveal effect (both sections):** A 260px-radius radial spotlight follows the cursor with smooth lerp tracking (factor 0.1). The spotlight masks a second image layer, creating a reveal effect. The gradient feathers from full opacity at center to transparent at edges.

5. **Grid parallax (hero only):** The SVG grid pattern subtly shifts position based on cursor location (max offset ~16px, eased at 0.06 factor).

6. **Mobile menu:** Hamburger toggles with crossfade rotation. Menu slides down with scale-y transform, items stagger in with 40ms incremental delays.

---

### DOCUMENT STRUCTURE (render order in App)

```
<div min-h-screen bg-[#0A0B11]>
<div fixed video layer z-2 />
<nav fixed z-60 />
<div mobile overlay z-54 />
<div mobile menu z-55 />
<HeroSection sticky z-3 />
<div scroll-spacer 1800px z-0 />
<CardSection fixed z-4 />
</div>
```

Nexacore 首屏

No.1466 · 前端开发 · 社区/原生 · 来源：MotionSites (MIT) · EN 原文

Build a React + TypeScript + Vite + Tailwind CSS landing page for "NexaCore" — an enterprise infrastructure operations platform. Use lucide-react for icons, hls.js for HLS video streaming, and @supabase/Bolt Database-js (available but not yet wired). No other UI libraries.

Global Setup
Fonts (src/index.css)
Load "Mazzard H" custom font via @font-face before Tailwind directives:

Weight 400: https://db.onlinewebfonts.com/t/eb5b5ee332420add9a40ee988cb6ac37.woff2 (+ .woff, .ttf fallbacks same hash)
Weight 500: https://db.onlinewebfonts.com/t/875fffdfa62169a0f131e90f37f1faf4.woff2 (+ .woff, .ttf fallbacks)
Apply globally:


@layer base {
html, body, * { font-family: 'Mazzard H', sans-serif; }
}
App Structure (src/App.tsx)

<main>
<Navbar />
<Hero />
<TrustedSection />
<FreedomSection />
<PrecisionSection />
</main>
Brand Colors (use consistently)
Deep navy text: rgb(26, 11, 84)
Muted lavender text: rgb(169, 151, 206) / rgb(189, 174, 231) / rgb(131, 121, 158)
Accent purple: rgb(200, 111, 255) (also #c86fff)
Primary solid blue: rgb(28, 78, 255)
Gradient A (logos/buttons): linear-gradient(90deg, rgb(28,78,255), rgb(172,36,255) 50%, rgb(254,136,27))
Gradient B (headline highlights): linear-gradient(90deg, rgb(43,167,255), rgb(202,69,255) 50%, rgb(254,136,27))
Off-white chip bg: rgb(249, 249, 249)
Dark card bg: rgba(10, 5, 20, 0.88) with backdrop-filter: blur(36px)
Never use purple/indigo outside these exact gradient stops. Heading font-weight is always 500, body 400.

1. Navbar (src/components/Navbar.tsx)
Fixed floating pill-shaped navbar.

Container: fixed top-4 left-0 right-0 z-50 flex justify-center pl-4 pr-1.5
Inner <nav>: white background, rounded-2xl, shadow-lg, width transitions from max-w-6xl → max-w-3xl on scroll > 20px (transition-all duration-500 ease-in-out).
Inner row: flex items-center justify-between gap-6, padding pl-5 pr-2 py-1.5 → pl-4 pr-2 py-1.5 on scroll.
Logo: 28x28 SVG circle stroked with logoGradient linear gradient (stops: rgb(28,78,255) → rgb(172,36,255) → rgb(254,136,27)), strokeWidth 2.5. Text "NexaCore" next to it, size 22, letter-spacing -0.02em, color rgb(26,11,84), font-weight 500.
Nav links (desktop, hidden on mobile): "What We Build", "Our Method", "Who We Are", "Thinking". Links: text-sm, rounded-xl, hover:bg-gray-100, padding shrinks on scroll (px-4 py-2 → px-2 py-1.5), gap from 1 to 0.
Right cluster: Search icon button (lucide Search size 20) in a 40x40 rounded-xl hover:bg-gray-100, plus <ContactButton />.
Mobile: Menu/X toggle (lucide) reveals stacked nav links centered + search icon + ContactButton (with flex-1).
ContactButton (src/components/ContactButton.tsx)
Gradient-border pill button.

Outer <a>: relative inline-flex items-center justify-center rounded-xl p-px, background = Gradient A.
Inner <span>: rounded-[11px] px-7 py-3 text-base text-white, background = solid rgb(28,78,255) by default, switches to Gradient A on hover with transition-colors duration-300. Text: "Contact".
2. Hero (src/components/Hero.tsx)
Full-screen looping background video with centered text.

Section: relative min-h-screen flex items-center justify-center px-4 overflow-hidden
<video> with exact src: https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260418_115655_b4d9cd77-feed-43cd-a198-af78ebdf1f7a.mp4 Attributes: autoPlay muted loop playsInline, absolute inset-0 w-full h-full object-cover.
Bottom fade overlay: absolute bottom-0 left-0 right-0 h-48 z-10 pointer-events-none, background linear-gradient(to bottom, transparent, #000201).
Content (z-10, max-w-2xl, centered, gap 6):
Eyebrow <span> text "Infrastructure Built to Last" — gradient text using Gradient B (background-clip: text; -webkit-text-fill-color: transparent), text-lg font-medium.
H1: "Engineer and scale with clarity." — white, font-medium leading-tight md:whitespace-nowrap, font-size: clamp(32px, 4vw, 56px).
Paragraph, color rgb(169, 151, 206), clamp(15px, 1.2vw, 20px): "NexaCore helps infrastructure owner, operator and supplier teams enforce global build standards for mission-critical systems. Align teams, regions and programs without the heavy lifting."
3. TrustedSection (src/components/TrustedSection.tsx)
Dark background-image section with four ServiceCards.

Background image (exact): https://images.higgs.ai/?default=1&output=webp&url=https%3A%2F%2Fd8j0ntlcm91z4.cloudfront.net%2Fuser_38xzZboKViGWJOttwIXH07lWA1P%2Fhf_20260418_120332_3b24257a-afe6-48ca-875f-78147370f403.png&w=1280&q=85 background-size: cover; background-position: center.
Section padding: clamp(100px, 12vw, 180px) clamp(16px, 4vw, 40px) clamp(100px, 12vw, 160px), gap: 110.
Header block max-width 1200, gap 20, centered:
H2 white font-medium, clamp(32px, 4vw, 56px), line-height 1.2: "Relied on by enterprise teams" <br/> then a span with Gradient B text: "from groundbreak to go-live."
Paragraph color rgb(189, 174, 231), clamp(14px, 1.25vw, 18px): "Built for operational clarity through constant change. Proven across 530+ MW of critical infrastructure."
Grid: grid-cols-1 sm:grid-cols-2 lg:grid-cols-4, gap 12.
Bottom fade: absolute 180px tall linear-gradient(to bottom, transparent, rgb(255,255,255)).
The 4 cards (label, title, bullets, icon):
All icons are 16x16 SVGs with a base circle path + a progressively larger filled <circle> (radius 2, 3, 4) placed mirrored via transform: matrix(-1 0 0 1 x y), all filled rgb(200,111,255). Card 1 uses only the base circle path.

Planning — "Turn new programs
into structured plans without the noise." Bullets: "Embedded program leads", "Decision-ready roadmaps".
Procurement — "Source and qualify
vendors with far
less friction." Bullets: "Cross-org scope alignment", "End-to-end accountability".
Logistics — "Move the right
materials on time
without surprises." Bullets: "Spec and fit validations", "Change order ownership".
Commissioning — "Activate systems with complete context, not guesswork." Bullets: "Uninterrupted workflows", "Verified clean handoffs".
ServiceCard (src/components/ServiceCard.tsx)
Props: label, icon, title, bullets[]. useState for hover.

Container: relative flex flex-col overflow-hidden rounded-[36px] cursor-pointer, bg rgba(10,5,20,0.88), backdrop-filter: blur(36px), height clamp(320px, 32vw, 500px).
Top image layer: absolute top, height 55%, z-index 1. Image src: https://cdn.prod.website-files.com/6720dd1ab6df0da205830ab1/682c7cb62b8800a7594c5abd_hover_card_img.png, object-fit: cover; object-position: top. Default translateY(-30%) opacity 0.7; on hover translateY(0) opacity 1, transition-all duration-500.
Bottom overlay: absolute bottom, height 55%, linear-gradient(to top, rgba(10,5,20,0.95) 60%, transparent). Default hidden (translateY(100%) opacity 0), slides up on hover.
Content (z-2, padding clamp(16px, 1.94vw, 32px) clamp(18px, 2.36vw, 36px)):
Badge: rgb(41,31,57) bg, rounded-full, padding clamp(6px,0.7vw,12px) clamp(10px,1.25vw,20px), white text + icon (icon sized 1.11vw / min 14px, height 17). Label text inside.
Flex-grow spacer.
Title: white font-medium, clamp(16px, 1.7vw, 24px), leading-snug. Shifts up by -8px on hover.
Bullets <ul> gap 10. Each <li> color rgb(189,174,231), clamp(12px,1vw,15px), padding-left clamp(22px,1.8vw,28px), background-image the bullet SVG at https://cdn.prod.website-files.com/6720dd1ab6df0da205830ab1/683ef70a24657b10be91ef49_bullet-list.svg, size 18px, position 0% 50%.
"Learn more" button: hidden by default (max-height 0, opacity 0, translateY 20px), on hover (max-height 80, opacity 1, translateY 0). Background = Gradient A, white text, rounded-xl, padding clamp(10px,0.9vw,14px) 0, font clamp(13px,1.1vw,16px).
4. FreedomSection (src/components/FreedomSection.tsx)
White section. 3-column grid (negatives | HLS circular video | positives).

Section: bg #ffffff, padding clamp(48px,6vw,80px) clamp(16px,3vw,40px), gap 36.
Header: centered gap-9.
Chip: bg rgb(249,249,249), rounded-full, padding 0.9vw 1.25vw, color rgb(26,11,84), text-lg font-medium. Inline SVG (19x18, viewBox 0 0 17 16) of two-heart/cloud shape filled rgb(200,111,255) (exact path in code). Text: "Control".
H2 font-medium clamp(32px,4vw,56px) color rgb(26,11,84) line-height 1.15: "Stop absorbing the chaos." <br/> gradient span (Gradient B with paddingBottom: 0.3vw; display: inline-block): "Run with confidence."
Grid: flex flex-col lg:grid, grid-template-columns: 26vw 1fr 26vw, column gap 36, row gap 24, align-items start, padding 0 clamp(0px,2.92vw,40px).
Left column — negatives
Font clamp(13px,1.15vw,17px), color rgb(131,121,158), gap 12. Each row: white bg, rounded 18, padding clamp(12px,0.97vw,16px) clamp(14px,1.25vw,20px), box-shadow 0 3px 9.1px #3f4a7e0d, 0 1px 29px #3f4a7e1a. Icon (cross) src: https://cdn.prod.website-files.com/6720dd1ab6df0da205830ab1/686cc0f520a992816d8b15dc_bullet-list-cross.svg width clamp(16px,1.25vw,20px).
Texts (in order):

"Reactive firefighting when foundational issues surface too late"
"Bloated coordination overhead drains bandwidth from core teams"
"Constant re-verification because source data can't be trusted"
"Fragmented vendor relations produce mismatched deliverables"
"Scattered specs and decisions buried across siloed systems"
Center column — circular HLS video
Wrapper: borderRadius: 50%; overflow: hidden; width/height: clamp(200px,22vw,400px).
<HlsVideo /> component: uses hls.js. On mount, create new Hls({ startLevel: -1, capLevelToPlayerSize: false, maxMaxBufferLength: 60, enableWorker: true }), load https://stream.mux.com/bnYL6x5cAX6WiJv2pOKpITehZd3NVdXpj3ylJFpX5Lk.m3u8, attachMedia, on MANIFEST_PARSED set hls.currentLevel = hls.levels.length - 1 and play. Native Safari HLS fallback via canPlayType('application/vnd.apple.mpegurl').
Video style: width:160%; height:160%; object-fit:cover; absolute top:50% left:50%; transform: translate(-50%,-50%). Attrs autoPlay loop muted playsInline.
Right column — positives
Same card styling as negatives, but icon (check) src: https://cdn.prod.website-files.com/6720dd1ab6df0da205830ab1/686cc068490683bbb3377d04_bullet-list.svg. Inner text color rgb(26,11,84).
Texts:

"Layered dependency maps eliminate costly surprises at every phase"
"Streamlined team handoffs deliver production-ready outcomes fast"
"Live validation loops keep requirements locked across all stages"
"Unified vendor management through a single accountable contact"
"Centralized context and clear records accelerate every decision"
Center column has class order-first lg:order-none so it appears first on mobile.

5. PrecisionSection (src/components/PrecisionSection.tsx)
Light background-image section with a 4-pillar "staircase".

Background image (exact):
https://images.higgs.ai/?default=1&output=webp&url=https%3A%2F%2Fd8j0ntlcm91z4.cloudfront.net%2Fuser_38xzZboKViGWJOttwIXH07lWA1P%2Fhf_20260418_125638_553b96dc-a1fd-4b2b-81a9-ed7daa80006e.png&w=1280&q=85
cover / center / no-repeat. Padding clamp(48px,8vw,120px) clamp(16px,4vw,60px) clamp(48px,5.56vw,80px), gap clamp(32px,4vw,56px), centered column, text-align center.

Header:

Chip: bg rgb(249,249,249), radius 36, padding clamp(8px,0.9vw,14px) clamp(12px,1.25vw,20px), font clamp(14px,1.1vw,18px) weight 500, color rgb(26,11,84). Inline SVG (19x18, viewBox 0 0 17 16): circle stroke #c86fff at (8.5, 8) r=7, plus four tick marks at top/bottom/left/right, all filled rgb(200,111,255). Text: "Structured Delivery".
H2 max-width clamp(700px,60vw,900px), gap 22 from chip.
Block 1 (display:block, sm:whitespace-nowrap): "One integrated, end-to-end system."
Block 2 (display:block, Gradient B text, paddingBottom: 0.3vw): "Compounding operational value."
Style: clamp(28px,4vw,56px), weight 500, rgb(26,11,84), line-height 1.15.
Paragraph: clamp(15px,1.2vw,20px), rgb(169,151,206): "NexaCore teams capture, align, validate and deliver exactly what keeps your programs on track."
Desktop staircase (hidden on sm and below)
Wrapper max-width: 82.292vw. Relative block width: 82.292vw; height: 31.94vw, text color rgb(26,11,84).

Four pillars, each absolutely positioned via left: Xvw; bottom: Yvw:

Label left bottom Items
Scopes 2.8vw 7vw conditions, capacity, specs, timelines
Integrates 22.4vw 9.08vw civil, mechanical, electrical, controls
Certifies 41.2vw 11.16vw redundancy, testing, compliance, sign-offs
Activates 61.1vw 13.24vw cutover, runbooks, handoff, SLAs
Each pillar = column (align center):

Chip: linear-gradient(135deg, rgb(255,255,255), rgba(255,255,255,0.6)), fontSize 18, weight 500, radius 20, padding 0.972vw 1.736vw, gap 8. Inside: logo image src https://cdn.prod.website-files.com/6720dd1ab6df0da205830ab1/6870f623cf3df417ce45df05_icon%20logo%20eternacloud.png width 1.111vw + label text.
Vertical line: 1px wide, height: 14.24vw, background = linear-gradient(rgb(28,78,255), rgb(254,136,27) 0%, rgb(172,36,255) 25%, rgb(247,159,255) 50%, rgb(255,214,0) 66%, rgb(254,136,27) 84%, rgba(254,136,27,0) 102%).
Items absolutely positioned top: 0.56vw; left: 1.94vw (right of the line), gap 4, fontSize 16. Each item padding 0.69vw 1.04vw.
Mobile layout (sm:hidden)
Same 4 pillars in a vertical column, alternating alignment: index 0,2 left-aligned; 1,3 right-aligned. Chip (smaller: fontSize 15, padding 10px 18px, logo 16px). Below chip a row flex-direction: row (or row-reverse when right): 1px gradient line (min-height 120) adjacent to items. Items fontSize 14, color rgb(100,80,160), padding 8px 0.

Build config
Vite + React 18.3 + TS 5.5. Tailwind 3.4, PostCSS, Autoprefixer.
package.json deps: @supabase/Bolt Database-js, hls.js, lucide-react, react, react-dom.
Scripts: dev, build (vite build), preview, lint, typecheck.

霓虹 Logic

No.1467 · 前端开发 · 社区/原生 · 来源：MotionSites (MIT) · EN 原文

Build a single-page landing site for "SynapseX" -- a futuristic neural-AI interface product. The entire site uses a black background with white text and full-viewport video backgrounds. The primary font is "Space Mono" (monospace) for all text. Use React + TypeScript + Vite + Tailwind CSS + Framer Motion.

### Fonts & External Assets

- **Primary font:** "Space Mono" (all weights: 400, 700, italic) from Google Fonts
- **Display font (background watermark only):** "Anton SC" from Google Fonts
- **Icons:** Bootstrap Icons CDN (`https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css`) -- used only for the Apple icon (`bi bi-apple`) in the download button
- **All Tailwind `fontFamily` keys** (`sans`, `serif`, `mono`) are overridden to `"Space Mono", monospace`

### Video URLs (CloudFront -- use exactly these)

1. **Hero (mouse-scrubbed, NOT autoplay):**
`https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260622_083515_290e5a10-0b95-41af-a5e2-32b6389baa4d.mp4`

2. **Second Section (autoplay, muted, loop):**
`https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260622_092455_089c54f8-3b03-4966-9df1-e9746063d0ef.mp4`

3. **Metrics Section (autoplay, muted, loop):**
`https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260622_095810_ecea3dd2-fc5e-4e41-8696-4219290b6589.mp4`

4. **Technology Section (autoplay, muted, loop):**
`https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260622_095750_32a52ce0-2005-45c9-9093-41f03fde9530.mp4`

5. **Footer (autoplay, muted, loop):**
`https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260622_080203_fd7f4f85-3a86-4837-8192-85e7bfe68e75.mp4`

### Dependencies

```json
"framer-motion": "^12.40.0",
"lucide-react": "^0.344.0",
"react": "^18.3.1",
"react-dom": "^18.3.1"
```

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

- Import Space Mono from Google Fonts
- Import Bootstrap Icons CSS
- Tailwind directives (`@tailwind base/components/utilities`)
- CSS variables: all `--font-*` set to `"Space Mono", monospace`
- Global reset: `* { margin: 0; padding: 0; box-sizing: border-box; }`
- `html, body`: `background: #000; color: #fff; overflow-x: hidden; overflow-y: auto; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;`
- Lenis smooth scroll utility classes (`.lenis.lenis-smooth`, `.lenis.lenis-stopped`, `.lenis.lenis-scrolling iframe`)

### Custom Text Animation Components

#### 1. `ScrambleIn` -- entrance reveal animation
- Props: `text: string`, `delay: number` (ms before start), `triggered: boolean`
- Character set: `ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789!@#$%^&*()_+~|}{[]:;?><`
- On trigger (after delay): runs interval every 25ms, revealing characters left-to-right at 0.5 chars/frame
- Characters not yet revealed show random chars (up to 3 ahead of the reveal cursor); characters beyond that are empty
- Spaces always show as spaces
- Before triggered: renders `&nbsp;`

#### 2. `ScrambleText` -- hover-driven scramble
- Props: `text: string`, `isHovered: boolean`, `className?: string`
- On hover: scrambles all chars with random chars, then reveals left-to-right at 4 frames/char, interval 25ms
- On unhover: immediately resets to original text

### Custom SVG Logo (`SynapseXLogo`)

A 4-fold rotationally symmetric abstract shape rendered in an SVG with `viewBox="-50 -50 100 100"`. Each quadrant is the same path rotated 0/90/180/270 degrees:

```
M 1.5,23 L 1.5,33 C 1.5,38.5 6,43 11.5,43 L 16.5,43 C 22,43 26.5,38.5 26.5,33 Q 28,28 33,26.5 C 38.5,26.5 43,22 43,16.5 L 43,11.5 C 43,6 38.5,1.5 33,1.5 L 23,1.5 Q 12,12 1.5,23 Z
```

### Animated Hamburger (`SquashHamburger`)

- 3 horizontal bars (absolute positioned spans)
- Desktop: container 18x12px, bar height 1.5px
- Mobile: container 15x10px, bar height 1.2px
- On open: top bar rotates 45deg + translates down to center; middle bar fades/scales out; bottom bar rotates -45deg + translates up to center
- Spring animation: stiffness 300, damping 20

---

### Page Sections (in order)

---

#### SECTION 1: Hero (full viewport height)

- **Background:** Video #1, `object-cover`, paused on load. Controlled by mouse-scrub: horizontal mouse movement across viewport scrubs the video timeline forward/backward. Sensitivity factor: `0.8`. Uses `seeked` event to chain seeks without dropping frames.
- **Entrance animation:** After 800ms delay, `entranceComplete` state becomes true -- all hero content fades in (opacity 0 -> 1, duration 1s).
- **Dot grid overlay:** `radial-gradient(#ffffff 1px, transparent 1px)` with 24x24px grid, opacity 0.05, pointer-events-none
- **Large background watermark text:** The word "TRANSCENDENCE" in "Anton SC" font, centered vertically (offset +50px from center), `clamp(120px, 30vw, 521px)` font size, uppercase, letter-spacing -4px. Opacity 0.10. Color achieved via `radial-gradient(circle, rgba(142,127,148,0) 0%, #8E7F94 70%)` as `background-clip: text` with transparent fill.
- **Layout:** Flexbox column, padding `px-4 sm:px-6 md:px-8 pt-20 sm:pt-24 pb-8 sm:pb-12`. Content is pushed to the bottom using `flex-1` spacer.
- **Bottom row:** `flex-col gap-6 md:flex-row md:items-end md:justify-between`
- **Left column** (`flex flex-col gap-4`):
- **h1** "Brain" / "And Body" (two lines via `<br>`): `text-white font-light leading-[0.95] tracking-[-0.03em] text-[clamp(40px,10vw,100px)]`. Each line uses `ScrambleIn` with delays 200ms and 500ms.
- **Description paragraph** (motion.p): fade-up animation (y:25->0, opacity 0->1, duration 0.9s, cubic-bezier ease `[0.215, 0.610, 0.355, 1.000]`, delay 0.2s). Text: "Built at the intersection of neuroscience and artificial intelligence. SynapseX continuously maps neural pathways, cognitive load, and physiological states into a single adaptive intelligence layer." Style: `max-w-sm text-[13px] sm:text-[15px] text-white/60 leading-relaxed`
- **Right h1** "One" / "Network": Same styling as left h1 but with `text-left md:text-right`. ScrambleIn delays: 700ms and 1000ms.

---

#### NAVBAR (fixed, z-50)

- Fixed to top, height 80px (h-20), transparent background, full width
- Fades in with `entranceComplete` (opacity 0->1, duration 0.8s)

**Desktop (hidden below `sm`):**
- Left group: two pills side by side with gap-2
- **Logo pill:** h-12, px-5, `bg-white/15 backdrop-blur-md rounded-[14px]`. Contains SynapseXLogo (18x18px white) + "SynapseX" text (16px font-medium tracking-tight white). WhileHover: scale 1.02 + bg rgba(255,255,255,0.22). WhileTap: scale 0.98. Hides on `sm` when menu open (`hidden md:flex`), shows normally otherwise.
- **Expanding menu pill:** Animates width from 48px (closed) to 290px (open) with spring (stiffness 350, damping 28). h-12, `rounded-[14px]`, `bg-white/15 backdrop-blur-md`. Contains:
- Hamburger button: when closed = 48x48px rounded-[14px]; when open = 36x36px rounded-[11px] with `bg-white/10 hover:bg-white/20 ml-1.5`
- Nav links (fade in when open, offset x:15->0): "About" and "Metrics" with ScrambleText on hover. 16px font-normal text-white/85 hover:text-white. Smooth-scroll to `window.innerHeight` and `window.innerHeight * 2` respectively.
- Right: **Download button** -- `h-12 px-6 bg-white rounded-full`, black text. Apple icon + "Download" with ScrambleText on hover. WhileHover: scale 1.03 + bg #e2e2e6. WhileTap: scale 0.97.

**Mobile (visible below `sm`):**
- Scaled-down version: h-9 pills, rounded-[10px], smaller text (13px), logo pill animates to width 0 when menu open (spring stiffness 350, damping 28). Menu capsule expands to 100% width when open. Download button: h-9 px-3.5 rounded-full.

---

#### SECTION 2: Cinematic Text (full viewport height)

- **Background:** Video #2, autoplay muted loop, object-cover
- **Top gradient overlay:** 180px height, linear-gradient from `#010103` to transparent, z-10
- **Content:** Centered large paragraph in a `max-w-5xl` container with 3D perspective (400px)
- Framer Motion: `rotateX(24deg) translateY(${yScaleValue}px) translateZ(15px)` where `yScaleValue` transforms from 60 to -120 based on smooth scroll progress (spring: stiffness 15, damping 32, mass 1.8). Opacity fades in from 0 to 1 between scroll progress 0.3-0.5.
- Text: "A neural-AI interface built on the architecture of the human nervous system. SynapseX translates synaptic activity into computational intelligence. Every signal becomes measurable, structured, and visible. It continuously reconstructs internal state as a dynamic neural map. Biological noise is filtered into actionable cognitive patterns."
- Style: `font-sans font-normal text-[22px] sm:text-[30px] md:text-[36px] lg:text-[42px] text-white leading-[1.35] tracking-[-0.02em] select-none px-6 sm:px-12 text-center`

---

#### SECTION 3: Metrics (min-h-screen)

- **Background:** Video #3, autoplay muted loop, object-cover
- **Layout:** Centered content, `pt-32 pb-32 px-6`, max-w-6xl
- **Subtitle:** "Performance Metrics" -- `text-white/40 text-[13px] sm:text-[14px] tracking-[0.2em] uppercase mb-20 text-center`. Fades in on scroll (whileInView, duration 1.2s, once, amount 0.3).
- **Metrics grid:** 3 columns on md, 1 on mobile, gap-16 md:gap-8. Each metric fades up (y:30->0, opacity, duration 0.8s, staggered 0.15s delay per item):
- "2.4ms" -- Synaptic Latency
- "99.7%" -- Signal Accuracy
- "140B" -- Neural Parameters
- Value: `text-white text-[clamp(48px,10vw,96px)] font-light tracking-[-0.04em] leading-none`
- Label: `text-white/40 text-[13px] sm:text-[15px] mt-4 tracking-wide`

---

#### SECTION 4: Technology / Adaptive Intelligence (full viewport height)

- **Background:** Video #4, autoplay muted loop, object-cover
- **Layout:** Flexbox column, `px-8 sm:px-12 md:px-16 py-12 sm:py-16`
- **Top area:** flex-col md:flex-row md:justify-between md:items-start gap-6
- **Left heading:** "Adaptive / Intelligence" (two lines), `text-white font-light text-[clamp(36px,8vw,72px)] leading-[0.95] tracking-[-0.03em]`. Fades up (y:40->0, duration 1.0s, whileInView once amount 0.3).
- **Right paragraph:** "The system learns your neural baseline within 72 hours. From there, every cognitive state is mapped, predicted, and optimized in real time." `text-white/50 text-[13px] sm:text-[15px] leading-relaxed max-w-xs md:text-right md:pt-2`. Fades up (y:20->0, duration 1.0s, delay 0.2s).
- **Spacer** (`flex-1`)
- **Bottom grid:** 2 cols on mobile, 4 cols on md, gap-8 md:gap-6. Fades in on scroll (duration 1.0s, delay 0.3s). Each item staggered (y:20->0, duration 0.7s, delay i*0.1):
1. "Cortical Mapping" -- "Real-time spatial reconstruction of active neural regions."
2. "Signal Isolation" -- "Separates cognitive intent from biological noise."
3. "State Prediction" -- "Anticipates cognitive transitions before they occur."
4. "Loop Feedback" -- "Closed-loop adjustment based on outcome correlation."
- Title: `text-white text-[14px] sm:text-[16px] font-normal mb-2`
- Desc: `text-white/40 text-[12px] sm:text-[14px] leading-relaxed`

---

#### SECTION 5: Architecture (min-h-screen, pure black background, no video)

- Centered content, max-w-3xl, `px-6 py-32`
- **Heading block** (fades up y:30->0, duration 1.0s, whileInView once amount 0.4):
- Subtitle: "Architecture" -- `text-white/40 text-[13px] sm:text-[14px] tracking-[0.2em] uppercase mb-8`
- Heading: "Three layers. Zero friction." -- `text-white font-light text-[clamp(28px,6vw,56px)] leading-[1.15] tracking-[-0.02em] mb-10`
- Description: "Sensor layer captures raw bioelectric signals. Processing layer isolates intent. Interface layer delivers structured output to any connected system." -- `text-white/45 text-[15px] sm:text-[17px] leading-relaxed max-w-xl mx-auto`
- **Layer cards** (fade in, duration 1.2s, delay 0.4s, whileInView once amount 0.4): 3 stacked cards, `mt-20 flex-col items-center gap-4`. Each card: `max-w-md h-[72px] border border-white/10 rounded-lg flex items-center justify-between px-6`
- Left: "Layer 1/2/3" -- `text-white/30 text-[12px] tracking-[0.15em] uppercase`
- Right: "Capture" / "Process" / "Interface" -- `text-white text-[16px] sm:text-[18px] font-light`

---

#### FOOTER

- Black background, overflow hidden
- Two-column layout (stacked on mobile): `flex-col md:flex-row min-h-[400px]`
- **Left:** Video #5, `object-cover`, fills half width (h-[300px] on mobile, auto height on md)
- **Right:** Flex column justify-between, `p-10 sm:p-16`
- Top: SynapseXLogo (18x18px, text-white/70) + "SynapseX" text (15px font-medium text-white/70 tracking-tight), mb-8. Below: "The next evolution of human-machine interaction. Built for those who refuse to be limited by biology alone." `text-white/40 text-[14px] sm:text-[15px] leading-relaxed max-w-sm`
- Bottom: "(c) 2026 SynapseX Labs. All rights reserved." `text-white/25 text-[12px] mt-12`

---

### Key Technical Details

- The entire app wrapper has inline style: `fontFamily: '"Space Mono", monospace'`
- All `h-screen` elements also have `h-[100dvh]` for mobile viewport compatibility
- The hero video is NOT autoplay -- it starts paused at time 0 and is scrubbed by horizontal mouse movement (delta-based, not absolute position). The seek logic chains via `seeked` event to avoid frame-dropping.
- Framer Motion `useScroll` tracks the second section with offset `["start end", "end start"]`, piped through `useSpring` (stiffness 15, damping 32, mass 1.8) then `useTransform` and `useMotionTemplate` for the 3D text rotation effect.
- No external state management, no routing, no database -- pure single-page React app.

---

Luxury Real Estate

No.1468 · 前端开发 · 社区/原生 · 来源：MotionSites (MIT) · EN 原文

Build a single-page React + TypeScript + Tailwind CSS + Vite landing page for a luxury real estate brand named "Velar.". Use only `lucide-react` for icons. The app is in `src/App.tsx`. Use the exact specifications below.

Global Setup

- Page background: `#f5f0ea` (warm off-white).
- Body wrapper: `overflow-x: clip`.
- Fonts (loaded via `@import` inside an inline `<style>` block):
- Primary: `Syne` weights 400, 700, 800, 900 from Google Fonts.
- Secondary: `Inter` weights 300, 400, 500, 600 from Google Fonts.
- Constants:
- `GRASS_GREEN = '#213138'` (deep teal — used for preloader background and default logo color).
- `FULL_TEXT = 'Velar.'`
- `HOUSE_IMG = 'https://res.cloudinary.com/dsdhxhhqh/image/upload/v1780471903/building_bzziky.png'`
- `BG_IMG = 'https://images.higgs.ai/?default=1&output=webp&url=https%3A%2F%2Fd8j0ntlcm91z4.cloudfront.net%2Fuser_38xzZboKViGWJOttwIXH07lWA1P%2Fhf_20260603_073200_7082add5-f1f8-4873-8696-d6f78a44089b.png&w=1920&q=85`
- Gallery videos (5, in order):
1. `https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260528_154759_4cdc8175-8261-497c-b688-9477c76545d4.mp4`
2. `https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260528_154751_39b1b9bb-2708-4211-b6a2-d39f93309e52.mp4`
3. `https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260528_154737_eba7900c-0313-483c-a30a-632c747ccc42.mp4`
4. `https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260602_144009_4348fe33-f885-4345-8e92-3fe1c2625d32.mp4`
5. `https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260602_145337_e44eaa8c-6bb1-4a6e-a70f-ed0231cbaccb.mp4`

Section 1 — Preloader / Intro Overlay

- Fixed full-viewport overlay (`z-index: 100`) filled with `#213138`, centered flex.
- Renders an animated typewriter of the word `Velar.` in Syne, font-size `2.6rem`, color white, letter-spacing `-0.02em`. Letters use weight 700 except `.` which is weight 900.
- A blinking white cursor (3px × 1.1em rounded bar, animation `blink 0.7s step-end infinite` toggling opacity 0/1) follows the last typed letter.
- Timings (using `setTimeout`):
- `CHAR_INTERVAL = 140ms`, `TYPE_START = 600ms`.
- Reveal letters one at a time at `TYPE_START + i * CHAR_INTERVAL`.
- `LIFT_AT = TYPE_START + 6 * CHAR_INTERVAL + 700ms`.
- Hide cursor at `LIFT_AT − 150ms`.
- Start "lifting" the overlay upward at `LIFT_AT`: `transform: translateY(-100%)` with transition `transform 1.5s cubic-bezier(0.45, 0, 0.15, 1)`.
- At `LIFT_AT + 1300ms`, fade in the hero text (`opacity 0 → 1`, `translateY(-28px) → 0`, transition `0.7s cubic-bezier(0.22, 1, 0.36, 1) 0.1s`).
- At `LIFT_AT + 2100ms`, set `liftDone` true and disable the overlay's transition (so it stays parked off-screen).

Section 2 — Fixed Navigation

- Fixed top nav `z-50`, padding `px-6 md:px-10 lg:px-16`, `py-5 md:py-6`, flex justify-between.
- Left: word `Velar.` in Syne, `text-xl`, weight 700 for letters and 900 for `.`. Color = `navColor` (see scroll behavior).
- Right: hamburger toggle button. Two stacked 28px-wide × 1px lines, top one shrinks to `w-5` on hover. When open, swap to a Lucide `X` icon, size 24.
- Scroll behavior: track whether any "dark section" (refs to Section 4 and Section 5) currently overlaps the viewport top (`rect.top <= 0 && rect.bottom > 0`). If so, `navOnDark = true` and `navColor = '#ffffff'`. Otherwise `navColor = '#213138'`. Color transitions: `color 0.35s ease`.
- Mobile menu: when open, full-screen `#f5f0ea` overlay (`z-40`) centered with 4 vertically stacked links: `Residences`, `Story`, `Listings`, `Inquire`. Each link is Syne, `text-4xl`, `font-light`, `tracking-widest`, uppercase, black with hover `text-gray-500`. Click closes menu.

Section 3 — Hero

- `<section>` `position: relative`, `min-height: 100vh`, `overflow: visible`.
- Background: `BG_IMG` as `background-image`, `background-size: cover`, `background-position: center center`, `background-repeat: no-repeat`.
- Hero text block (`.hero-text-block`) inside, `z-index: 10`, hidden initially, fades+slides in (see preloader timings).
- Top row (`.hero-heading-top`, padded `px-6 md:px-10 lg:px-16`, flex `items-end justify-between`, `margin-bottom: -0.04em`):
- Left: `LIVE IN` — Syne 800, uppercase, black, `letter-spacing: -0.03em`, `line-height: 1`. Size via CSS class `.hero-own-the`.
- Right (desktop only ≥1024px, `.hero-subtitle-desktop`): two-line right-aligned paragraph in Syne 700, `clamp(10px, 0.95vw, 14px)`, max-width 300px, opacity 0.7, line-height 1.6, margin-bottom `0.2em`, letter-spacing `0.02em`:
> Stately homes built with vision,
> scope, and architectural finesse.
- Headline row (wrapped in `overflow: hidden`):
- `IRREPLACEABLE` — Syne 800, uppercase, black, `letter-spacing: -0.03em`, padded `px-6 md:px-10 lg:px-16`. Size via `.hero-extraordinary`.
- Mobile/tablet subtitle (`.hero-subtitle-mobile`, padded `px-6`), Syne 600, `clamp(12px, 3vw, 15px)`, opacity 0.65, margin-top `0.9em`:
> Premium real estate with vision,
> depth, and architectural clarity.

Hero Responsive Type Sizes

```css
@media (max-width: 639px) {
.hero-subtitle-desktop { display: none !important; }
.hero-subtitle-mobile { display: block !important; }
.hero-text-block { padding-top: 90px !important; }
.hero-heading-top { justify-content: flex-start !important; }
.hero-own-the { font-size: 7.5vw !important; }
.hero-extraordinary { font-size: 14.5vw !important; white-space: normal !important; word-break: break-word !important; line-height: 0.9 !important; }
}
@media (min-width: 640px) and (max-width: 1023px) {
.hero-subtitle-desktop { display: none !important; }
.hero-subtitle-mobile { display: block !important; }
.hero-text-block { padding-top: 110px !important; }
.hero-heading-top { justify-content: flex-start !important; }
.hero-own-the { font-size: 5.5vw !important; }
.hero-extraordinary { font-size: 11vw !important; white-space: normal !important; word-break: break-word !important; line-height: 0.9 !important; }
}
@media (min-width: 1024px) {
.hero-subtitle-desktop { display: block !important; }
.hero-subtitle-mobile { display: none !important; }
.hero-text-block { padding-top: calc(28vh - 50px) !important; }
.hero-own-the { font-size: 3vw !important; }
.hero-extraordinary { font-size: clamp(52px, 6.5vw, 9vw) !important; white-space: nowrap !important; line-height: 0.88 !important; }
}
```

Section 4 — Scroll-Driven House Animation (the centerpiece)

- A `position: fixed` wrapper at `z-index: 22`, `pointer-events: none`, `will-change: transform`, default `bottom: 0; left: 50%; transform: translateX(-50%); width: 100%; min-width: 1400px;`.
- Inside, an inner div performs the initial "rise from below" entrance: starts at `translateY(102vh)`, transitions to `translateY(0)` with `transform 1.5s cubic-bezier(0.45, 0, 0.15, 1) 0.4s`, triggered when `lifting` becomes true. Once `liftDone` true the transition is removed so the scroll handler can take over.
- Renders `` at width 100%, aria-hidden.
- After `liftDone`, a scroll/resize listener (`updateHousePosition`) computes:
- `baseW = max(window.innerWidth, 1400)`.
- `triggerPoint = -(heroH 0.30)` — animation starts when 30% of hero has scrolled off.
- `endPoint = heroRect.top - (darkRect.bottom - vh)` — ends when the bottom of Section 5 reaches viewport bottom.
- `progress = clamp((heroRect.top − triggerPoint) / (endPoint − triggerPoint), 0, 1)`.
- `t = smoothstep(smoothstep(progress))` where `smoothstep(t) = tt(3−2t)` (applied twice).
- `startX = (vw − baseW) / 2`, `startY = vh − imgH` (bottom-centered).
- `finalScale = 1.45`, `finalX = (vw − baseW finalScale) / 2` (bottom-centered), `mobileOffset = vw < 1024 ? −250 : 4`, `finalY = darkRect.bottom − imgH * finalScale + 500 + mobileOffset`.
- Interpolates `currentX`, `currentY`, `currentScale` linearly via `t`.
- At `progress <= 0` resets to resting (bottom-centered, scale 1). Otherwise sets `top: 0; left: 0; transform: translate(currentX, currentY) scale(currentScale); transform-origin: top left;`.

## Section 5 — Dark Statement + Stats (sticky)

- Outer wrapper: `position: relative; height: 200vh; z-index: 20`.
- Inner `

` (`s2-section`): `position: sticky; top: 0; height: 100vh; background: #1a1a1a; overflow: hidden`. Above it is a tiny `4vh` `#1a1a1a` scroll spacer.
- Content wrapper `.s2-content`: flex column, padding `px-6 md:px-10 lg:px-16`, `padding-top: clamp(30px, 4vw, 60px)`, `padding-bottom: clamp(60px, 8vw, 120px)`.
- Statement text (`.s2-statement`), Inter 300, color `#e8e4df`, letter-spacing `-0.02em`, `line-height: 1.35`, `white-space: nowrap`, font-size `clamp(22px, 2.6vw, 42px)`. Wrapper has `max-width: 1200px`, centered, `padding-left: 25%`. Lines (with hard `
`s):
> Every estate we present is hand-chosen
> through a frame of permanence, refinement,
> and timeless detail. Standards are not
> a flourish. It is our discipline.
- Stats row (`.s2-stats-row`): same max-width/centered/padding-left 25%, `margin-top: clamp(48px, 6vw, 80px)`. Three columns in a flex row, each `flex:1`, with a left border (`1px solid rgba(255,255,255,0.2)`) between items and `padding-left: clamp(20px, 2.5vw, 40px)` on items 2–3:
1. `120+` — `Portfolio Holdings`
2. `12` — `Global Locations`
3. `98%` — `Patron Loyalty Rate`
- Numbers: Inter 300, white, font-size `clamp(36px, 4.5vw, 72px)`, line-height 1.1. Use a `CountUp` component that, when the element first crosses 30% into the viewport (IntersectionObserver), animates from 0 to `end` over 2000ms with easing `1 - (1 - t)^3`, rendering `Math.round(eased * end) + suffix`.
- Labels: Inter 400, `rgba(255,255,255,0.6)`, font-size `clamp(12px, 1.1vw, 16px)`, `margin-top: clamp(4px, 0.5vw, 8px)`, letter-spacing `0.01em`.
- Tablet/mobile rules:
- `≤767px`: remove the 25% left padding entirely (set to 0).
- `768–1023px`: reduce padding-left to 15%, set `min-height: 70vh` and adjust paddings.

## Section 6 — Hover-Expand Gallery (slides over Section 5)

- `

` (`s3-gallery-section`) `position: relative; z-index: 25; margin-top: -100vh; background: #1a1a1a; height: 100vh; overflow: hidden`. This makes it slide up over Section 5 as the user scrolls.
- Background ticker (`.s3-ticker-wrap`): absolutely positioned `inset:0`, flex center, `overflow: hidden`, `z-index: 0`, `pointer-events: none`. Contains a `.ticker-track` with two copies of a giant repeating string:
> `Velar. Velar. Velar. Velar. Velar. Velar. Velar. Velar. ` (with ` ` separators)
- Each span: Syne 800, `clamp(100px, 14vw, 220px)`, white, `white-space: nowrap`, letter-spacing `-0.02em`, `user-select: none`, `padding-right: 0.3em`. (The ticker can also be animated with a horizontal scroll keyframe — left as a static layered word-mark behind the gallery here.)
- Gallery content (`.s3-gallery-content`): z-index 1, flex center, full height, padding `clamp(24px, 4vw, 60px)`.
- Row (`.gallery-expand-row`): flex with `gap:6px`, height 70%, max-width 1200px. Each item (`.gallery-expand-item`): `flex:1 1 0%`, full height, `border-radius:12px`, `overflow:hidden`, `cursor:pointer`, transition `flex 0.5s cubic-bezier(0.4, 0, 0.2, 1)`. On hover, the hovered item grows to `flex: 4`, others shrink — classic accordion expand.
- Each item contains the corresponding video (autoplay, loop, muted, playsInline) covering the tile (`object-fit: cover`).

### Gallery Mobile/Tablet Rules (≤1023px)

```css
.s3-gallery-section { height: auto; min-height: 100vh; overflow: visible; }
.s3-ticker-wrap { position: sticky; top: 0; height: 100vh; width: 100%; margin-bottom: -100vh; }
.s3-gallery-content { height: auto; align-items: flex-start; padding: 80px 16px 60px; }
.gallery-expand-row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; height: auto; width: 100%; max-width: 700px; }
.gallery-expand-item { flex: none; height: auto; aspect-ratio: 4/5; border-radius: 10px; transition: transform 0.3s ease; }
.gallery-expand-item:hover { flex: none; transform: scale(1.02); }
.gallery-expand-item:last-child:nth-child(odd) { grid-column: 1 / -1; max-width: calc(50% - 4px); justify-self: center; }
@media (max-width: 479px) {
.s3-gallery-content { padding: 60px 12px 48px; }
.gallery-expand-row { gap: 6px; }
}
```

## Behavior Recap

- Preloader types `Velar.` then slides up out of view, simultaneously revealing the hero text and rising the house image from below the viewport.
- The house image stays bottom-centered behind the hero text on initial load.
- As the user scrolls past 30% of the hero, the house begins drifting upward and scaling up to 1.45×, remaining horizontally centered, while pinning toward the bottom of the dark statement section.
- The nav logo color cross-fades to white whenever a dark section sits at the viewport top.
- Section 5 stays sticky as Section 6 (gallery) slides up over it thanks to negative `margin-top: -100vh` and higher `z-index`.
- Stat numbers count up once on scroll into view.
- Gallery tiles accordion-expand on hover (desktop) or 2-column grid (mobile/tablet).

## Tech Notes

- Use only `react`, `react-dom`, `lucide-react`, Tailwind, and Vite. No additional libraries.
- All animation logic lives inside a single `App.tsx` using `useState`, `useEffect`, `useRef`, `useCallback`, and `IntersectionObserver`.
- Use Supabase if any persistence is later needed; this page itself has no data layer.

Prompt 首屏

No.1469 · 前端开发 · 社区/原生 · 来源：MotionSites (MIT) · EN 原文

### 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://d8j0ntlcm91z4.cloudfront.net/user_39ca84eAE1ODL9hbR5VhoEj8tBf/hf_20260625_154433_532a85d3-dabf-4265-b8bd-19ac6af31842.mp4`
- RIGHT video: `https://d8j0ntlcm91z4.cloudfront.net/user_39ca84eAE1ODL9hbR5VhoEj8tBf/hf_20260625_154401_a664f076-b971-4557-8728-40ef9ea4c49b.mp4`

**Gallery Images (10 total, in order):**
1. `https://images.higgs.ai/?default=1&output=webp&url=https%3A%2F%2Fd8j0ntlcm91z4.cloudfront.net%2Fuser_38xzZboKViGWJOttwIXH07lWA1P%2Fhf_20260629_104530_521b2f85-c0f3-4d0e-9704-b578315b4cb9.png&w=1920&q=85`
2. `https://images.higgs.ai/?default=1&output=webp&url=https%3A%2F%2Fd8j0ntlcm91z4.cloudfront.net%2Fuser_38xzZboKViGWJOttwIXH07lWA1P%2Fhf_20260629_103711_76ccdb8b-5043-4f47-9c54-4379713393ea.png&w=1920&q=85`
3. `https://images.higgs.ai/?default=1&output=webp&url=https%3A%2F%2Fd8j0ntlcm91z4.cloudfront.net%2Fuser_38xzZboKViGWJOttwIXH07lWA1P%2Fhf_20260629_103728_394f6a1b-85e2-4386-a4f6-408472a0a5b7.png&w=1920&q=85`
4. `https://images.higgs.ai/?default=1&output=webp&url=https%3A%2F%2Fd8j0ntlcm91z4.cloudfront.net%2Fuser_38xzZboKViGWJOttwIXH07lWA1P%2Fhf_20260629_103739_86743e0e-16a7-4bee-bf38-dd67985344dc.png&w=1920&q=85`
5. `https://images.higgs.ai/?default=1&output=webp&url=https%3A%2F%2Fd8j0ntlcm91z4.cloudfront.net%2Fuser_38xzZboKViGWJOttwIXH07lWA1P%2Fhf_20260629_103748_b2215dc8-a3a7-470d-b19a-5b87fa7d0c37.png&w=1920&q=85`
6. `https://images.higgs.ai/?default=1&output=webp&url=https%3A%2F%2Fd8j0ntlcm91z4.cloudfront.net%2Fuser_38xzZboKViGWJOttwIXH07lWA1P%2Fhf_20260629_103758_e919ce72-5c9d-4b87-9be6-d7647b34825c.png&w=1920&q=85`
7. `https://images.higgs.ai/?default=1&output=webp&url=https%3A%2F%2Fd8j0ntlcm91z4.cloudfront.net%2Fuser_38xzZboKViGWJOttwIXH07lWA1P%2Fhf_20260629_103808_013583d0-3386-4547-9832-37c7d8edb3ac.png&w=1920&q=85`
8. `https://images.higgs.ai/?default=1&output=webp&url=https%3A%2F%2Fd8j0ntlcm91z4.cloudfront.net%2Fuser_38xzZboKViGWJOttwIXH07lWA1P%2Fhf_20260629_103937_a0c49d0a-33eb-4ead-aea6-c1baf241acbc.png&w=1920&q=85`
9. `https://images.higgs.ai/?default=1&output=webp&url=https%3A%2F%2Fd8j0ntlcm91z4.cloudfront.net%2Fuser_38xzZboKViGWJOttwIXH07lWA1P%2Fhf_20260629_103956_d18ed8fd-7b6f-4b86-91f9-20010fe38670.png&w=1920&q=85`
10. `https://images.higgs.ai/?default=1&output=webp&url=https%3A%2F%2Fd8j0ntlcm91z4.cloudfront.net%2Fuser_38xzZboKViGWJOttwIXH07lWA1P%2Fhf_20260629_104034_ba5a9963-87ff-4008-a545-6bd686c088b5.png&w=1920&q=85`

---

### 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)

Cinematic 落地页页面

No.1470 · 前端开发 · 社区/原生 · 来源：MotionSites (MIT) · EN 原文

Create a single-page landing website for "Bakery Facilities" — a premium B2B bakery solutions company. The site uses React 18, Vite, TypeScript, Tailwind CSS, GSAP (with ScrollTrigger and SplitText plugins), and Lottie animations. No Framer Motion is used — all animations are GSAP-powered.

---

### Tech Stack & Dependencies

```json
{
"dependencies": {
"@gsap/react": "^2.1.2",
"@tanstack/react-query": "^5.83.0",
"class-variance-authority": "^0.7.1",
"clsx": "^2.1.1",
"gsap": "^3.14.2",
"lottie-react": "^2.4.1",
"lucide-react": "^0.462.0",
"react": "^18.3.1",
"react-dom": "^18.3.1",
"react-router-dom": "^6.30.1",
"sonner": "^1.7.4",
"tailwind-merge": "^2.6.0",
"tailwindcss-animate": "^1.0.7"
},
"devDependencies": {
"@vitejs/plugin-react-swc": "^3.11.0",
"autoprefixer": "^10.4.21",
"postcss": "^8.5.6",
"tailwindcss": "^3.4.17",
"typescript": "^5.8.3",
"vite": "^5.4.19"
}
}
```

---

### Fonts (Google Fonts)

Import URL: `https://fonts.googleapis.com/css2?family=Luxurious+Script&family=Manrope:wght@500&family=Open+Sans:wght@300;400;500;600;700&family=Instrument+Serif:ital@0;1&display=swap`

Font families:
- `font-body`: 'Open Sans', sans-serif (body text, nav, buttons)
- `font-accent`: 'Instrument Serif', serif (hero h1, section titles)
- `font-manrope`: 'Manrope', sans-serif (labels, card text)
- `font-luxurious`: 'Luxurious Script', cursive ("for Professionals" subtitle)

---

### Color System (CSS Variables)

```css
:root {
--background: 0 0% 9%;
--foreground: 0 0% 100%;
--primary: 0 0% 100%;
--primary-foreground: 0 0% 9%;
--secondary: 0 0% 97%;
--muted: 0 0% 20%;
--muted-foreground: 0 0% 75%;
--accent: 0 0% 15%;
--border: 0 0% 20%;
--radius: 2px;
--hero-cta-bg: 0 0% 97.3%;
--hero-cta-text: 0 0% 9%;
}
```

Gold accent color: `#CB9D06` (used on hover states for nav, buttons, links)

---

### Tailwind Config Specifics

- Border radius: 2px base
- Container padding: 5%
- Custom keyframes: `marquee` (translateX(0) to translateX(-50%), 60s linear infinite)
- `tailwindcss-animate` plugin

---

### SECTION 1: Hero (Full-Screen Scroll-Driven Video Slider)

**Structure:**
- Outer wrapper: `height: calc(100vh + 300vh)` (3 slides x 150vh per slide transition)
- Inner sticky section: `sticky top-0 w-full h-screen overflow-visible`
- Slides transition via scroll-driven `clip-path: ellipse()` animation

**Video URLs (CloudFront):**
1. `https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260515_113235_88e0d62e-8103-40c1-948e-f0a4f886ffd1.mp4`
2. `https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260515_114315_ee3663e6-bd79-41b4-9e5b-0fae62827eb9.mp4`
3. `https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260515_114559_dca18b14-90f5-47c4-8a84-3cbae9bd8a0c.mp4`

**Video element:** `<video className="w-full h-full object-cover" autoPlay loop muted playsInline />`

**Clip-path transition logic:**
- `SCROLL_PER_SLIDE_VH = 150`
- Easing: cubic ease-in-out `localProgress < 0.5 ? 4*p*p*p : 1 - Math.pow(-2*p + 2, 3) / 2`
- Clip function: `ellipse(${5 + progress * 150}% ${8 + progress * 150}% at 50% 50%)`

**H1 Text:** "THE SMART BAKERY SOLUTION"
- Desktop: `font-accent text-[9.7vw] leading-[1] whitespace-nowrap tracking-[-0.04em]`, positioned `bottom-[-26px]`
- Mobile: `text-[40px] leading-[1.1] whitespace-normal text-center`, positioned `bottom-[48px]` with `px-4`
- Animation: GSAP SplitText per-char, `from: {opacity:0, y:40}`, `to: {opacity:1, y:0}`, duration: 0.8s, delay between chars: 30ms, ease: "power3.out", autoStart: true

**Subtitle:** "for Professionals" (appears after h1 animation completes)
- Font: Luxurious Script cursive
- Desktop: `text-[3vw]`
- Mobile: `text-[12vw]`
- Position: `absolute inset-x-0 top-0`, paddingTop: `calc(80px + 60px)`
- Same GSAP SplitText animation params as h1

---

### SECTION 1 NAVBAR (Fixed, transparent -> black on scroll)

**Scroll behavior:** `scrollY > 50` triggers `bg-black/90 backdrop-blur-[80px] shadow-md py-2`, else `bg-transparent py-4`

**Layout:** `fixed top-0 left-0 right-0 z-20 flex items-center px-4 md:px-10`

**Left:** Region dropdown (Globe icon + "Hong Kong / Macau" text), regions: ["Mainland China", "Hong Kong / Macau", "Taiwan"]

**Center:** Logo (SVG) flanked by nav dropdowns

**Logo SVG (4 leaf-clover shape):**
```svg
<svg viewBox="0 0 305 304" fill="none">
<path d="M157.135 303.572C157.135 222.53 223.131 156.832 304.174 156.832V303.572H157.135Z" fill="white"/>
<path d="M147.039 303.572C147.039 222.53 81.0425 156.832 0 156.832V303.572H147.039Z" fill="white"/>
<path d="M157.135 0C157.135 81.0426 223.131 146.74 304.174 146.74C304.174 65.698 238.178 0 157.135 0Z" fill="white"/>
<path d="M147.039 0C147.039 81.0426 81.0425 146.74 0 146.74C0 65.698 65.9962 0 147.039 0Z" fill="white"/>
</svg>
```
Logo size: `h-[32px] md:h-[48px]` normal, `h-[24px] md:h-[32px]` scrolled

**Left menu items:** "About Us" (submenu: Our History, Food Service Experts, Creating unforgettable culinary experiences), "Partnering With Us" (submenu: Sourcing from trusted suppliers..., Empowering Customer Operations, Our Experts)

**Right menu items:** "Our Products" (submenu: Viennese Pastry, Bread, Dessert, Savory, Speciality Pastry, Culinary Aid, Ingredient), "Let's Connect!" (submenu: Contact, LinkedIn, WhatsApp, Newsletter, Brochure, Join Us)

**Right:** Language switcher EN/繁, active gets `bg-[#CB9D06] text-white`

**Dropdown styling:** `bg-white shadow-lg py-2`, items `px-4 py-2.5 text-[13px]`, hover: `bg-[#CB9D06] text-white`

**Mobile:** Hamburger icon opens full-screen overlay `bg-black/95 backdrop-blur-md`, accordion-style menu

---

### FLOATING NAV (Right side, desktop only)

Position: `fixed right-4 md:right-6 top-1/2 -translate-y-1/2 z-50 hidden md:flex flex-col gap-4`

3 circular buttons (48px height, rounded-full, bg-black, expand on hover to show labels):
1. Download icon + "Download Brochure"
2. LinkedIn SVG icon + "LinkedIn"
3. MessageCircle icon + "Chat With Us"

LinkedIn SVG paths:
```svg
<svg viewBox="0 0 32 32">
<path d="M12.6186 9.69215C12.6186 10.6267 11.8085 11.3843 10.8093 11.3843C9.81004 11.3843 9 10.6267 9 9.69215C9 8.7576 9.81004 8 10.8093 8C11.8085 8 12.6186 8.7576 12.6186 9.69215Z" fill="currentColor"/>
<path d="M9.24742 12.6281H12.3402V22H9.24742V12.6281Z" fill="currentColor"/>
<path d="M17.3196 12.6281H14.2268V22H17.3196C17.3196 22 17.3196 19.0496 17.3196 17.2049C17.3196 16.0976 17.6977 14.9855 19.2062 14.9855C20.911 14.9855 20.9008 16.4345 20.8928 17.5571C20.8824 19.0244 20.9072 20.5219 20.9072 22H24V17.0537C23.9738 13.8954 23.1508 12.4401 20.4433 12.4401C18.8354 12.4401 17.8387 13.1701 17.3196 13.8305V12.6281Z" fill="currentColor"/>
</svg>
```

Hover: `bg-[#CB9D06]`, label slides in with max-width transition 300ms

---

### SECTION 2: Product Gallery (Masonry Grid)

Container: `bg-white py-8 md:py-16 flex justify-center`, inner: `w-[90%] md:w-[65%]`

**Grid layout:**
- Desktop (>=1000px): 4 columns. Row 1: 4 equal cards. Row 2: 3 cards where middle spans 2 columns
- Mobile: 2 columns
- Aspect ratio: 3:4 (columnWidth * 4/3)
- Row gap: 40px
- Item padding: 4px

**7 items** with labels: Viennese Pastry, Bread, Dessert, Savory, Sweet Treats, Culinary Aid, Ingredient

**Animations:**
- Entry: GSAP ScrollTrigger, start "top 85%", once: true
- Initial: `opacity:0, y: item.y+120, filter: blur(10px)`
- Animate to: `opacity:1, correct position, filter: blur(0px)`, duration: 0.8s, ease: "power3.out", stagger: 0.05s per item
- Hover: CSS `transform: scale(1.2)` on the background image with `transition: transform 6s cubic-bezier(0.22, 0.61, 0.36, 1)`

**Labels:** `text-left text-black text-sm mt-2 font-manrope font-medium`

---

### SECTION 3: About Us (Scroll Reveal Text)

Container: `bg-white py-16 md:py-32 flex flex-col items-center justify-center px-6 md:px-[18%]`

**Title:** "About us" — `font-luxurious text-[32px] text-center text-black mb-[20px]`

**Body text:** "In 1976, Mr Louis Le Duff Opened The First French Casual Food Restaurant..." (full text in code above)
- `font-accent uppercase text-[24px] leading-[36px] md:text-[40px] md:leading-[56px] text-center text-black`

**Scroll Reveal Animation (GSAP ScrollTrigger scrub):**
- Container rotation: from `baseRotation: 3` to `0`, scrub, start "top bottom", end "bottom bottom"
- Word opacity: from `0.1` to `1`, stagger 0.05, scrub, start "top bottom-=20%", end "bottom bottom"
- Word blur: from `blur(4px)` to `blur(0px)`, same trigger

**Button:** "Read more" — `px-8 py-3 bg-black text-white font-manrope text-sm tracking-wide hover:bg-[#CB9D06] transition-colors duration-300`

**Partners Logo Loop (below button, mt-16 md:mt-[140px]):**
- Infinite horizontal scroll marquee, speed: 80px/s, direction: left, gap: 48px, pauseOnHover, fadeOut with white gradient edges (80px wide)
- 12 partner names rendered as: `font-body text-[14px] tracking-[0.2em] uppercase text-black/40 whitespace-nowrap`
- Partners: Bridor de France, Traiteur de Paris, Panidor, Boncolac, Mademoiselle Desserts, Mountry, Pfalzgraf, Dolceria Alba, St Michel, Poppies Bakeries, Alysse Food, Les Delices du Chef

---

### SECTION 4: Partnering With Us

Full-width background image with overlay content.

**Title:** "Partnering With Us" — `font-accent uppercase text-[28px] md:text-[40px] leading-[1.4] text-primary`
- GSAP SplitText chars animation same params as hero

**4 cards** in a grid (`grid-cols-2 md:grid-cols-4 gap-2 md:gap-[8px]`, container `w-[90%] md:w-[64%]`):
- Each card: `bg-black px-4 md:px-6 py-6 md:py-8 flex flex-col items-center text-center gap-3 md:gap-4`
- Lottie animation icon (w-10 h-10 md:w-12 md:h-12, loop)
- Label: `text-primary font-body text-[12px] md:text-[14px] tracking-wide capitalize`
- Cards: "Trusted Sourcing", "Food Safety Standards", "Operational Efficiency", "Expert Support"
- Entry animation: GSAP fromTo `y:80 -> y:0`, duration: 0.7, ease: "power3.out", stagger delay: i*0.15, ScrollTrigger start "top 90%", once

---

### SECTION 5: Footer

`bg-white` full width.

**Top section** (`px-6 md:px-10 lg:px-16 pt-12 md:pt-20 pb-10 md:pb-16`):
- Left: Phone `+852 2407 8840` (text-[13px] text-black/40 uppercase tracking-wider) + email `orders@bakeryfacilities.com` (text-[14px] font-bold, hover gold)
- Right: "Navigate" column (About Us, Partnering With Us, Our Products, Let's Connect!) + "Social" column (WhatsApp, LinkedIn, Newsletter)
- Link styling: `text-[15px] text-black font-medium hover:text-[#CB9D06]`

**Office addresses** (4 offices in a row on desktop, stacked on mobile):
- Head Office (Hong Kong), Mainland China (Shanghai), Taiwan (New Taipei City), Macau
- Each: region title (12px uppercase tracking-wider text-black/40), company name (13px font-semibold), address (12px text-black/60), phone + email with icons

**Bottom bar:** `bg-black px-6 md:px-10 lg:px-16 py-4`
- Left: copyright `text-[12px] text-white/40`
- Right: Privacy Policy + Terms of Service links `text-[12px] text-white/40 hover:text-white`

---

### Key Animation Details (All GSAP, no Framer Motion)

| Element | from | to | duration | ease | trigger |
|---------|------|-----|----------|------|---------|
| Hero H1 chars | `{opacity:0, y:40}` | `{opacity:1, y:0}` | 0.8s | power3.out | autoStart |
| Hero subtitle chars | `{opacity:0, y:40}` | `{opacity:1, y:0}` | 0.8s | power3.out | autoStart (after h1 done) |
| Gallery items | `{opacity:0, y:+120, blur:10px}` | `{opacity:1, y:pos, blur:0}` | 0.8s | power3.out | ScrollTrigger "top 85%" once |
| Section 4 cards | `{opacity:1, y:80}` | `{opacity:1, y:0}` | 0.7s | power3.out | ScrollTrigger "top 90%" once |
| Scroll reveal words | `{opacity:0.1, blur:4px, rotate:3}` | `{opacity:1, blur:0, rotate:0}` | scrub | none | scrub scroll |

**SplitText config:** `type: splitType, smartWrap: true, charsClass: "split-char font-accent"`, char stagger: 30ms (delay/1000)

---

### CSS for split-char (global):
```css
.split-char {
padding-top: 0 !important;
padding-bottom: 0 !important;
line-height: 1 !important;
}
```

---

### Responsive Breakpoints

- Mobile-first
- `md:` = 768px (Tailwind default)
- `lg:` = 1024px
- Gallery columns: 1 (<400px), 2 (400-600px), 2 (600-1000px), 4 (>=1000px)

Glassmorphic 功能标签页

No.1471 · 前端开发 · 社区/原生 · 来源：MotionSites (MIT) · EN 原文

# Core Features Section

Build a single React + TypeScript + Tailwind + framer-motion section called `CoreFeaturesSection`. Match every detail below exactly.

## Stack & Global Setup

- React 18, Vite, TypeScript, TailwindCSS, `framer-motion`, `clsx` + `tailwind-merge` (helper `cn`).
- Dark theme. Page background `#000000` (set on `body`).
- Font: **Inter** (Google Fonts, weights 300–700) as default sans.
- Icons: **Material Symbols Rounded** via Google Fonts link:
`https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200`
- Tailwind tokens (HSL): `--background: 270 80% 3%;` `--foreground: 0 0% 100%;` mapped to `background` / `foreground`.
- Extra Tailwind color: `landing.surface: rgba(255,255,255,0.10)`.

## Helper: `cn`
```ts
import { clsx, type ClassValue } from "clsx";
import { twMerge } from "tailwind-merge";
export const cn = (...i: ClassValue[]) => twMerge(clsx(i));
```

## Material Icon component (`MIcon`)
```tsx
export const MIcon = ({ name, size = 16, className = "" }:{name:string;size?:number;className?:string}) => (
<span
className={`material-symbols-rounded ${className}`}
style={{ fontSize: size, fontVariationSettings: `"FILL" 0, "wght" 400, "GRAD" 0, "opsz" ${size}` }}
>{name}</span>
);
```

## `FadeUp` primitive (scroll reveal)
- `framer-motion` `motion.div`. `initial={{opacity:0,y:24}}`, `whileInView={{opacity:1,y:0}}`, `viewport={{once:true,amount:0.3}}`, `transition={{duration:0.6,delay,ease:[0.22,1,0.36,1]}}`. Respect `useReducedMotion` (no y offset).

## `SpotlightBorder` (mouse-tracked 1px gradient border)
- Wrapper with `position:relative` + chosen radius (`rounded-xl|2xl|3xl|full`).
- Listens to `window` `mousemove`; sets CSS vars `--spot-x`, `--spot-y` from `getBoundingClientRect`.
- Absolutely positioned `<span>` overlay with:
```ts
{
background: `radial-gradient(${size}px circle at var(--spot-x,-200px) var(--spot-y,-200px), rgba(255,255,255,${intensity}), rgba(255,255,255,0) 60%)`,
padding: "1px",
WebkitMask: "linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0)",
WebkitMaskComposite: "xor",
maskComposite: "exclude",
}
```
- Props: `radius`, `size` (px), `intensity` (0–1). Used three times in this section with sizes 360/600/360 and intensity 0.5.

## Tab data (exact URLs, order matters)
```ts
const tabs = [
{ label: "Exclusive Tutorial",
image: "https://images.higgs.ai/?default=1&output=webp&url=https%3A%2F%2Fd8j0ntlcm91z4.cloudfront.net%2Fuser_38xzZboKViGWJOttwIXH07lWA1P%2Fhf_20260521_222821_06fd2e74-16a5-4e7f-90ed-14e6760e7edb.png&w=1280&q=85",
caption: "Step-by-step guides to master AI design tools." },
{ label: "Courses",
image: "https://images.higgs.ai/?default=1&output=webp&url=https%3A%2F%2Fd8j0ntlcm91z4.cloudfront.net%2Fuser_38xzZboKViGWJOttwIXH07lWA1P%2Fhf_20260521_222901_b133c5f0-191c-4285-a018-a68fd9c9f5ac.png&w=1280&q=85",
caption: "Structured learning paths to level up your skills." },
{ label: "Templates",
image: "https://images.higgs.ai/?default=1&output=webp&url=https%3A%2F%2Fd8j0ntlcm91z4.cloudfront.net%2Fuser_38xzZboKViGWJOttwIXH07lWA1P%2Fhf_20260521_225713_3226e3ad-3364-42b1-99bd-ed82005c0524.png&w=1280&q=85",
caption: "Production-ready designs you can customize instantly." },
{ label: "Animated Backgrounds",
image: "https://images.higgs.ai/?default=1&output=webp&url=https%3A%2F%2Fd8j0ntlcm91z4.cloudfront.net%2Fuser_38xzZboKViGWJOttwIXH07lWA1P%2Fhf_20260521_222832_223716d0-9b6c-4c48-98a6-a5e3c02e2962.png&w=1280&q=85",
caption: "Motion-ready visuals that bring your projects to life." },
];
```

## Behavior
- `active` state, default `0`. `pausedRef = useRef(false)`.
- `setInterval` every **5000ms**: if not paused, `active = (active+1) % 4`.
- Arrow buttons & tab clicks set `pausedRef.current = true` (auto-rotation stops after first user interaction).

## Section Layout

```tsx
<section className="relative w-full bg-background py-12 sm:py-16">
<div className="mx-auto max-w-[1180px] px-4 sm:px-6">
```

### Header row (flex, stacks on mobile)
- Left column `max-w-2xl`:
- Pill (FadeUp d=0): `inline-flex items-center gap-2 rounded-full bg-landing-surface border border-white/10 px-3 py-1 text-xs text-foreground/80 backdrop-blur` with `1.5x1.5` dot `bg-foreground/70` + text "Core Features".
- Heading (FadeUp d=0.1): `text-3xl sm:text-4xl font-normal tracking-[-0.02em] leading-[1.05] text-foreground`. Content: `One platform to run your<br className="hidden sm:block"/><span className="text-foreground/55"> entire AI design journey.</span>`
- Right (FadeUp d=0.2, `max-w-sm md:pt-2`): paragraph `text-sm sm:text-base leading-relaxed text-foreground/65`: "UI Rocket brings your lessons, templates, tools, and community into one space — so you stop switching between tabs and start shipping real AI-powered work."
- Wrapper: `mb-14 flex flex-col gap-10 md:flex-row md:items-end md:justify-between`.

### Tab pills (desktop only)
`SpotlightBorder radius="full" size={360} intensity={0.5}` `mx-auto mb-6 hidden w-full p-1 sm:block`.
Inside: `grid grid-cols-2 sm:grid-cols-4 gap-1 rounded-full p-1`.
Each button: `rounded-full px-4 py-2.5 text-sm transition-colors duration-300`. Active: `bg-white/[0.06] text-foreground border border-white/15`. Inactive: `text-foreground/55 hover:text-foreground/80 border border-transparent`. Click → `select(i)`.

### Image stage
`SpotlightBorder radius="2xl" size={600} intensity={0.5}` `relative mx-auto w-full p-2 sm:p-3`.
Inner: `relative overflow-hidden rounded-2xl border border-white/10` with inline `style={{ backgroundColor:"#0e0e0e" }}`.
Aspect frame: `relative aspect-[16/10] w-full`.

Render all 4 `<img>` absolutely stacked (`absolute inset-0 h-full w-full object-cover transition-opacity duration-400`). Active one `opacity-100`, others `opacity-0`. Use `loading="eager" decoding="async"`.

Overlay all 4 `TabDashboardMock` panels (absolute, fade). Wrapper per mock:
`absolute inset-1 flex items-center justify-center p-[3%] sm:p-[4%] transition-opacity duration-300` + active `opacity-100` else `opacity-0 pointer-events-none`.

Mock list (label → title, activeNav):
- Courses → "Courses" / "Courses"
- Templates → "Templates" / "Templates"
- Animated Backgrounds → "Animated Backgrounds" / "Backgrounds"
- Exclusive Tutorial → "Exclusive Tutorials" / "Tutorials"

### Arrow / caption bar
`SpotlightBorder radius="full" size={360} intensity={0.5}` `mx-auto mt-6 w-full p-1`.
Inside: `flex items-center justify-between gap-4 rounded-full px-3 py-2`.
- Left/right buttons: `flex h-10 w-10 flex-shrink-0 items-center justify-center rounded-full border border-white/10 bg-white/[0.04] text-foreground/80 transition-colors hover:bg-white/[0.08] hover:text-foreground`. Icons: `arrow_back` / `arrow_forward` size 16. Click → `go(-1)` / `go(1)`.
- Center caption box: `min-h-[1.5rem] flex-1 overflow-hidden text-center`. Use `AnimatePresence mode="wait"` + `motion.p` keyed by `tabs[active].label`, initial `{opacity:0,y:6}`, animate `{opacity:1,y:0}`, exit `{opacity:0,y:-6}`, `duration 0.25`. Classes `px-2 text-sm text-foreground/75`. Mobile shows label (`sm:hidden font-medium text-foreground`), desktop shows `tabs[active].caption` (`hidden sm:inline`).

## `TabDashboardMock` (auto-scaled dashboard preview)

Fixed design canvas **900 × 562** (16:10). Outer wrapper measures itself with `ResizeObserver` and sets `transform: scale(min(w/900, h/562))`, `transformOrigin: center center`, `flexShrink: 0`.

Wrapper: `relative h-full w-full overflow-hidden flex items-center justify-center`.
Inner card (the 900×562 box): `flex overflow-hidden rounded-2xl bg-white/[0.04] backdrop-blur-xl shadow-2xl`.

### Sidebar (`w-[210px]`, `flex flex-col gap-1 p-3`)
- Brand row: `mb-3 flex items-center justify-between px-2 py-2`.
- Left: icon box `flex h-6 w-6 items-center justify-center rounded-md` with inline gradient `linear-gradient(135deg, rgb(158,103,250), rgb(254,106,187) 50%, rgb(255,156,101))`, `MIcon "rocket_launch" size={14} className="text-white"`, label `text-[13px] font-semibold text-white` = "UI Rocket".
- Right: `MIcon "search" size={14} className="text-white/40"`.
- Nav list (`flex flex-col gap-0.5`). Items:
Dashboard/`grid_view`, Courses/`school`, Templates/`dashboard`, Tutorials/`play_circle`, Backgrounds/`auto_awesome`, Pricing/`sell`.
Item base: `flex items-center gap-2.5 rounded-lg px-2.5 py-2 text-[12px] transition-colors`. Active: `bg-white/[0.08] text-white`. Inactive: `text-white/55 hover:text-white/80`. Icon size 14.

### Main column (`flex min-w-0 flex-1 flex-col p-3`)
Inside: `flex h-full w-full flex-col overflow-hidden rounded-2xl bg-black/20`.
Header: `flex items-center justify-between px-4 py-3`.
- Left group: blue square `flex h-7 w-7 items-center justify-center rounded-md bg-[rgb(59,130,246)] text-white` + `MIcon "add" size={16}`. Title `text-base font-semibold text-white` = `title` prop.
- Right group (`flex items-center gap-2.5`): `MIcon "notifications" size={16} text-white/60`, pill `rounded-full bg-[rgb(59,130,246)] px-2.5 py-1 text-[11px] font-medium text-white` = "Invite", avatar `h-7 w-7 rounded-full bg-cover bg-center ring-1 ring-white/10` with `backgroundImage: url(https://i.pravatar.cc/64?img=12)`.
Body: `flex-1 overflow-hidden px-4 pb-4`. Render `children` here.

## Tab content panels (children passed to mock)

Each panel fills the body with a small grid of cards in the same monochrome white-alpha style (`bg-white/[0.04] border border-white/10 rounded-xl`, headings `text-white text-[13px] font-medium`, body `text-white/60 text-[11px]`). Compose roughly:

- **CoursesTabContent**: 2×3 grid of course cards. Each card: 16:9 thumb using the module covers below; title; meta row "X lessons · Y min" in `text-white/50 text-[10px]`.
- **TemplatesTabContent**: 3×2 grid of template cards with browser-frame thumbnails (3 dots row) using the same module covers as placeholder; small "Premium" pill `bg-white/10 text-[10px] rounded-full px-2 py-0.5`.
- **BackgroundsTabContent**: 3×2 grid of looping `<video autoplay muted loop playsinline>` tiles. Sources: use the CloudFront MP4s in the assets list. Overlay play icon (see asset) bottom-right.
- **ExclusiveTutorialTabContent**: featured large card (left, 60%) + 3 stacked rows (right, 40%). Featured uses tutorial thumbnail with floating play icon, title, "12 min · Pro" meta. Each row: 64x40 thumb + 2-line title + meta.

Assets (use exact URLs):
- Play icon SVG:
`https://miptxtnhvjrkpmnjgdhk.supabase.co/storage/v1/object/public/training-assets/landing/play_icon.svg`
- Module / template cover thumbnails (cycle through):
- `https://miptxtnhvjrkpmnjgdhk.supabase.co/storage/v1/object/public/training-assets/landing/module-cover-1.png`
- `.../module-cover-2.png`
- `.../module-cover-3.png`
- `.../module-cover-4.png`
- `.../module-cover-5.png`
- `.../module-cover-6.png`
- Tutorial thumbnails: reuse the four `images.higgs.ai` URLs from the tabs array.
- Background videos (CloudFront, use as `<video>` `src`):
- `https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260521_014404_bg1.mp4`
- `.../hf_20260521_014404_bg2.mp4` … through `bg6.mp4`
(If a specific URL 404s, fall back to the matching higgs.ai poster image as a static tile.)

## Putting it together
```tsx
<CoreFeaturesSection />
```
Mount inside a page with `bg-background text-foreground font-inter antialiased`. No other dependencies.

## Acceptance checklist
- [ ] 4 tabs auto-rotate every 5s until user interacts, then stop.
- [ ] SpotlightBorder shows a soft white radial highlight that follows the cursor on all three bordered shells.
- [ ] Image cross-fades over 400ms; caption cross-fades with 6px y motion (250ms).
- [ ] TabDashboardMock scales as a single unit to fit its container while preserving 900×562 internal layout.
- [ ] Sidebar active item highlighted matches the visible tab.
- [ ] Header, pill, paragraph use Inter, exact tracking and color tokens specified.
- [ ] All asset URLs above load directly (no local imports).

Sup 卡片 Swap

No.1472 · 前端开发 · 社区/原生 · 来源：MotionSites (MIT) · EN 原文

You are given a task to integrate an existing React component in the codebase

~~~/README.md
# CardSwapShowcase

An elegant card swapping animation component with depth perception and perspective. Features automated cycling of cards with a premium floating feel, powered by GSAP.

## Dependencies

- `gsap`: ^3.12.5
- `framer-motion`: ^11.11.17
- `lucide-react`: ^0.460.0

## Props

### CardSwapProps

| Prop | Type | Default | Description |
|------|------|---------|-------------|
| `width` | `number \| string` | `500` | Width of the cards |
| `height` | `number \| string` | `400` | Height of the cards |
| `cardDistance` | `number` | `60` | Horizontal spacing between stacked cards |
| `verticalDistance` | `number` | `70` | Vertical spacing between stacked cards |
| `delay` | `number` | `5000` | Delay between swaps in milliseconds |
| `pauseOnHover` | `boolean` | `false` | Pause the animation on mouse enter |
| `skewAmount` | `number` | `6` | Initial skew applied to cards for depth |
| `easing` | `'linear' \| 'elastic'` | `'elastic'` | Animation easing style |
| `onCardClick` | `(idx: number) => void` | - | Callback when a card is clicked |
| `children` | `ReactNode` | - | Card elements to display |

### CardProps

Extends `React.HTMLAttributes<HTMLDivElement>`.

| Prop | Type | Description |
|------|------|-------------|
| `customClass` | `string` | Additional CSS classes for the card |

## Usage

```tsx
import { CardSwap, Card } from '@/sd-components/b2f54efd-719a-454b-830b-2bf1c09122cc';

function Example() {
  return (
    <CardSwap delay={4000} cardDistance={40}>
      <Card>
        <h3>Card 1</h3>
        <p>Content</p>
      </Card>
      <Card>
        <h3>Card 2</h3>
        <p>Content</p>
      </Card>
    </CardSwap>
  );
}
```
~~~

~~~/src/App.tsx
/**
 * Demo application for the CardSwap component.
 * Showcases the elegant card swapping animation in a minimalist environment.
 */
import React from 'react';
import CardSwap, { Card } from './Component';

export default function App() {
  const cards = [
    {
      id: 1,
      title: "Perspective Design",
      description: "Crafting interfaces with depth and intention.",
      color: "bg-primary",
      image: "https://images.unsplash.com/photo-1618005182384-a83a8bd57fbe?q=80&w=800&auto=format&fit=crop"
    },
    {
      id: 2,
      title: "Fluid Motion",
      description: "Seamless transitions that feel natural and responsive.",
      color: "bg-accent",
      image: "https://images.unsplash.com/photo-1633356122544-f134324a6cee?q=80&w=800&auto=format&fit=crop"
    },
    {
      id: 3,
      title: "Minimalist Aesthetic",
      description: "Less is more when every detail is refined.",
      color: "bg-secondary",
      image: "https://images.unsplash.com/photo-1614850523296-d8c1af93d400?q=80&w=800&auto=format&fit=crop"
    },
    {
      id: 4,
      title: "Atmospheric Loops",
      description: "Creating a sense of calm through continuous motion.",
      color: "bg-muted",
      image: "https://images.unsplash.com/photo-1620641788421-7a1c342ea42e?q=80&w=800&auto=format&fit=crop"
    }
  ];

  return (
    <div className="flex min-h-screen items-center justify-center bg-background p-20 overflow-hidden">
      <div className="flex flex-col items-center gap-12">
        <h1 className="text-2xl font-medium text-foreground tracking-tight opacity-80">
          Card Swap Showcase
        </h1>
        
        <div className="relative w-[500px] h-[400px]">
          <CardSwap
            width={400}
            height={300}
            cardDistance={40}
            verticalDistance={40}
            delay={4000}
            pauseOnHover={true}
            skewAmount={4}
          >
            {cards.map((card) => (
              <Card key={card.id} className="p-0 overflow-hidden group">
                <div className="relative h-full w-full flex flex-col">
                  <div className="flex-1 overflow-hidden">
                    <img 
                      src={card.image} 
                      alt={card.title} 
                      className="w-full h-full object-cover transition-transform duration-700 group-hover:scale-110"
                    />
                    <div className="absolute inset-0 bg-gradient-to-t from-black/60 to-transparent" />
                  </div>
                  <div className="absolute bottom-0 left-0 right-0 p-8 text-white">
                    <h3 className="text-xl font-medium mb-2">{card.title}</h3>
                    <p className="text-sm text-white/70 leading-relaxed max-w-[80%]">
                      {card.description}
                    </p>
                  </div>
                </div>
              </Card>
            ))}
          </CardSwap>
        </div>

        <button 
          onClick={() => window.location.reload()}
          className="mt-8 px-6 py-2 rounded-full border border-border text-sm text-muted-foreground hover:bg-muted hover:text-foreground transition-all duration-300"
        >
          Reply Animation
        </button>
      </div>
    </div>
  );
}
~~~

~~~/package.json
{
  "name": "card-swap-showcase",
  "description": "An elegant perspective card swapping animation component",
  "dependencies": {
    "gsap": "^3.12.5",
    "framer-motion": "^11.11.17",
    "lucide-react": "^0.460.0",
    "clsx": "^2.1.1",
    "tailwind-merge": "^2.5.4"
  }
}
~~~

~~~/src/Component.tsx
/**
 * CardSwap Component
 * An elegant card swapping animation using GSAP for smooth transitions.
 * Supports automated cycling, perspective depth, and interactive elements.
 */
import React, {
  Children,
  cloneElement,
  forwardRef,
  isValidElement,
  ReactElement,
  ReactNode,
  RefObject,
  useEffect,
  useMemo,
  useRef
} from 'react';
import gsap from 'gsap';

export interface CardSwapProps {
  width?: number | string;
  height?: number | string;
  cardDistance?: number;
  verticalDistance?: number;
  delay?: number;
  pauseOnHover?: boolean;
  onCardClick?: (idx: number) => void;
  skewAmount?: number;
  easing?: 'linear' | 'elastic';
  children: ReactNode;
}

export interface CardProps extends React.HTMLAttributes<HTMLDivElement> {
  customClass?: string;
}

export const Card = forwardRef<HTMLDivElement, CardProps>(({ customClass, ...rest }, ref) => (
  <div
    ref={ref}
    {...rest}
    className={`absolute top-1/2 left-1/2 rounded-xl border border-border bg-card shadow-lg [transform-style:preserve-3d] [will-change:transform] [backface-visibility:hidden] ${customClass ?? ''} ${rest.className ?? ''}`.trim()}
  />
));

Card.displayName = 'Card';

type CardRef = RefObject<HTMLDivElement | null>;

interface Slot {
  x: number;
  y: number;
  z: number;
  zIndex: number;
}

const makeSlot = (i: number, distX: number, distY: number, total: number): Slot => ({
  x: i * distX,
  y: -i * distY,
  z: -i * distX * 1.5,
  zIndex: total - i
});

const placeNow = (el: HTMLElement, slot: Slot, skew: number) =>
  gsap.set(el, {
    x: slot.x,
    y: slot.y,
    z: slot.z,
    xPercent: -50,
    yPercent: -50,
    skewY: skew,
    transformOrigin: 'center center',
    zIndex: slot.zIndex,
    force3D: true
  });

export const CardSwap: React.FC<CardSwapProps> = ({
  width = 500,
  height = 400,
  cardDistance = 60,
  verticalDistance = 70,
  delay = 5000,
  pauseOnHover = false,
  onCardClick,
  skewAmount = 6,
  easing = 'elastic',
  children
}) => {
  const config =
    easing === 'elastic'
      ? {
          ease: 'elastic.out(0.6,0.9)',
          durDrop: 2,
          durMove: 2,
          durReturn: 2,
          promoteOverlap: 0.9,
          returnDelay: 0.05
        }
      : {
          ease: 'power1.inOut',
          durDrop: 0.8,
          durMove: 0.8,
          durReturn: 0.8,
          promoteOverlap: 0.45,
          returnDelay: 0.2
        };

  const childArr = useMemo(() => Children.toArray(children) as ReactElement<CardProps>[], [children]);
  const refs = useMemo<CardRef[]>(() => childArr.map(() => React.createRef<HTMLDivElement>()), [childArr.length]);
  const order = useRef<number[]>(Array.from({ length: childArr.length }, (_, i) => i));
  const tlRef = useRef<gsap.core.Timeline | null>(null);
  const intervalRef = useRef<number>(0);
  const container = useRef<HTMLDivElement>(null);

  useEffect(() => {
    const total = refs.length;
    refs.forEach((r, i) => {
      if (r.current) {
        placeNow(r.current, makeSlot(i, cardDistance, verticalDistance, total), skewAmount);
      }
    });

    const swap = () => {
      if (order.current.length < 2) return;
      const [front, ...rest] = order.current;
      const elFront = refs[front].current;
      if (!elFront) return;

      const tl = gsap.timeline();
      tlRef.current = tl;

      tl.to(elFront, {
        y: '+=500',
        duration: config.durDrop,
        ease: config.ease
      });

      tl.addLabel('promote', `-=${config.durDrop * config.promoteOverlap}`);
      rest.forEach((idx, i) => {
        const el = refs[idx].current;
        if (!el) return;
        const slot = makeSlot(i, cardDistance, verticalDistance, refs.length);
        tl.set(el, { zIndex: slot.zIndex }, 'promote');
        tl.to(
          el,
          {
            x: slot.x,
            y: slot.y,
            z: slot.z,
            duration: config.durMove,
            ease: config.ease
          },
          `promote+=${i * 0.15}`
        );
      });

      const backSlot = makeSlot(refs.length - 1, cardDistance, verticalDistance, refs.length);
      tl.addLabel('return', `promote+=${config.durMove * config.returnDelay}`);
      tl.call(
        () => {
          gsap.set(elFront, { zIndex: backSlot.zIndex });
        },
        undefined,
        'return'
      );

      tl.to(
        elFront,
        {
          x: backSlot.x,
          y: backSlot.y,
          z: backSlot.z,
          duration: config.durReturn,
          ease: config.ease
        },
        'return'
      );

      tl.call(() => {
        order.current = [...rest, front];
      });
    };

    intervalRef.current = window.setInterval(swap, delay);

    if (pauseOnHover && container.current) {
      const node = container.current;
      const pause = () => {
        tlRef.current?.pause();
        clearInterval(intervalRef.current);
      };
      const resume = () => {
        tlRef.current?.play();
        intervalRef.current = window.setInterval(swap, delay);
      };
      node.addEventListener('mouseenter', pause);
      node.addEventListener('mouseleave', resume);
      return () => {
        node.removeEventListener('mouseenter', pause);
        node.removeEventListener('mouseleave', resume);
        clearInterval(intervalRef.current);
      };
    }

    return () => clearInterval(intervalRef.current);
  }, [cardDistance, verticalDistance, delay, pauseOnHover, skewAmount, easing, refs]);

  const rendered = childArr.map((child, i) =>
    isValidElement<CardProps>(child)
      ? cloneElement(child, {
          key: i,
          ref: refs[i],
          style: { width, height, ...(child.props.style ?? {}) },
          onClick: (e: React.MouseEvent<HTMLDivElement>) => {
            child.props.onClick?.(e);
            onCardClick?.(i);
          }
        } as CardProps & React.RefAttributes<HTMLDivElement>)
      : child
  );

  return (
    <div
      ref={container}
      className="relative perspective-[1200px] transform-gpu"
      style={{ width, height }}
    >
      <div className="absolute inset-0 [transform-style:preserve-3d]">
        {rendered}
      </div>
    </div>
  );
};

export default CardSwap;
~~~

Implementation Guidelines

1. Analyze the component structure, styling, animation implementations
2. Review the component's arguments and state
3. Think through what is the best place to adopt this component/style into the design we are doing
4. Then adopt the component/design to our current system

Help me integrate this into my design

首屏

No.1473 · 前端开发 · 社区/原生 · 来源：MotionSites (MIT) · EN 原文

Build a **single-page React + TypeScript (Vite)** landing hero for a product called **"Xero"** that recreates the following section exactly. Use the **Inter** Google Font (weights 300, 400, 500, 600, 700, 800). Do not use Tailwind utility classes for the hero — write plain CSS in a global stylesheet. No purple/indigo branding outside the specified pink-magenta gradient arc.

## Layout & Structure

Render three top-level blocks centered on a black page (`#0a0a0f`), each constrained to `max-width: 1600px`, in this vertical order:

1. **`<nav>`** — sticky-style top bar (not actually sticky, just at top)
2. **`<section class="hero-card">`** — the rounded dark hero card with the animated icon pipeline
3. **`<div class="brands">`** — a row of 5 monochrome brand logos

The body uses `display: flex; flex-direction: column; align-items: center; padding: 14px;` and `font-family: 'Inter', sans-serif;`.

### CSS Variables (on `:root`)
```
--bg: #0a0a0f;
--surface: #111118;
--text: #f0f0f5;
--text-muted: #8888a8;
--accent: #c8a0e0;
--accent-pink: #b04090;
--border: rgba(255, 255, 255, 0.08);
```

## NAVBAR

- Grid layout: `grid-template-columns: 1fr auto 1fr; padding: 12px 24px; margin-bottom: 14px;`
- **Left**: `<span class="nav-logo">Xero</span>` — `font-size: 1.05rem; font-weight: 700; letter-spacing: -0.01em;`
- **Center**: `<ul class="nav-links">` with three `<a>` items: **Method**, **Pricing**, **Docs**. Color `--text-muted`, `font-size: 0.85rem`, gap 32px, hover transitions to `--text` over 0.2s.
- **Right**: `<div class="nav-actions">` containing two pill buttons:
- `.btn-login` — `rgba(255,255,255,0.06)` bg, 1px border `--border`, white text, padding `7px 18px`, `border-radius: 999px`, `font-size: 0.82rem`, `font-weight: 500`. Hover: bg `rgba(255,255,255,0.12)`.
- `.btn-signup` — solid white bg, black `#0a0a0f` text, same dimensions, `font-weight: 600`. Hover: `opacity: 0.88`.
- The `.nav-menu` wrapper uses `display: contents` on desktop so the `ul` and actions become direct grid children.

### Mobile (≤ 768px)
- Nav becomes flex with space-between.
- A `.menu-toggle` hamburger appears: 24×14 button with two 2px-tall white spans. When `.active`, span 1 rotates `translateY(6px) rotate(45deg)` and span 2 rotates `translateY(-6px) rotate(-45deg)` to form an X.
- `.nav-menu.active` slides in from `right: -100%` to `right: 0` over 0.4s `cubic-bezier(0.4, 0, 0.2, 1)` as a full-screen `var(--bg)` overlay with column-stacked links and full-width buttons.
- Toggling sets `document.body.style.overflow = 'hidden'`.

## HERO CARD

Outer `.hero-card` styles:
- `width: 100%; max-width: 1600px; border-radius: 20px; border: 1px solid rgba(255,255,255,0.07); overflow: hidden; position: relative; background: #0d0b12; padding: 80px 40px 70px; min-height: 640px;`
- `display: flex; flex-direction: column; align-items: center; text-align: center;`

### `::before` Gradient Arc (the signature visual)
A radial gradient positioned at `50% -70%` with **many manually-tuned stops** producing a smooth dark→pink→white arc near the top:
```
background:
radial-gradient(circle at 50% -70%,
transparent 60%,
rgba(176,48,136,0.03) 63%,
rgba(176,48,136,0.08) 65%,
rgba(176,48,136,0.16) 67%,
rgba(176,48,136,0.28) 69%,
rgba(176,48,136,0.40) 71%,
rgba(176,48,136,0.52) 73%,
rgba(176,48,136,0.64) 75%,
rgba(176,48,136,0.74) 77%,
rgba(176,48,136,0.82) 79%,
rgba(210,70,175,0.92) 85%,
rgba(240,110,210,0.88) 87%,
rgba(255,205,250,0.92) 91%,
rgba(255,240,255,0.98) 93%,
#ffffff 95%),
radial-gradient(circle at 50% 35%, rgba(120,40,180,0.08) 0%, transparent 50%);
z-index: 0; pointer-events: none;
```

### `.hero-grid` Overlay
A separate absolutely-positioned div with crosshatch grid:
```
background-image:
linear-gradient(rgba(255,255,255,0.07) 1px, transparent 1px),
linear-gradient(90deg, rgba(255,255,255,0.07) 1px, transparent 1px);
background-size: 40px 40px;
mask-image: radial-gradient(circle at 50% -70%, transparent 60%, black 78%);
```
This makes the grid only visible inside the arc area.

## ICON PIPELINE (the animated centerpiece)

Container `.icon-pipeline`: `position: relative; display: flex; align-items: center; justify-content: center; max-width: 700px; margin-bottom: 52px; z-index: 1;`

Children in this exact order:

1. **`<svg class="beam-svg">`** — absolutely-positioned over the whole pipeline (`overflow: visible`), containing:
- A `<filter id="glow">` with `feGaussianBlur stdDeviation="2"` then `feComposite ... operator="over"`.
- A `<linearGradient id="beam-gradient" gradientUnits="userSpaceOnUse">` with stops:
- `0%` `#b04090` opacity 0
- `20%` `#b04090` opacity 0.8
- `50%` `#fff` opacity 1
- `80%` `#c8a0e0` opacity 0.8
- `100%` `#c8a0e0` opacity 0
- Two `<path>` elements both stroked with `url(#beam-gradient)`:
- Glow path: `stroke-width="2"`, `filter="url(#glow)"`, `opacity: 0.6`.
- Core path: `stroke-width="0.8"`.

2. **Left node** `.icon-node.node-light-right` (id `node-stack`) — Lucide-style **layers** SVG (3 stacked diamonds): `<polygon points="12 2 2 7 12 12 22 7 12 2"/><polyline points="2 17 12 22 22 17"/><polyline points="2 12 12 17 22 12"/>`.

3. **`.pipeline-line`** — `width: 160px; height: 1px;` linear gradient `90deg, rgba(255,255,255,0.15), rgba(255,255,255,0.07)`.

4. **Center wrapper** with `position: relative;` containing:
- **`.splash`** — 100×100 absolutely centered, `border-radius: 50%`, `background: radial-gradient(circle, rgba(255,77,200,0.6) 0%, transparent 70%)`, initial `opacity: 0; transform: scale(0.4); z-index: 2;`
- **`.icon-node-center`** (id `node-x`) — 64×64 round, `background: #1e1e2c`, neumorphic shadow (see below), containing the **Xero "X" logoipsum** SVG (`viewBox="0 0 40 40"`) — the multi-cut path provided in the source.

5. **`.pipeline-line.right`** — same 160×1 line, gradient reversed.

6. **Right node** `.icon-node.node-light-left` (id `node-shield`) — Lucide-style **shield-check** SVG: `<path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/><polyline points="9 12 11 14 15 10"/>`.

### Side Node Styling
`.icon-node`: 46×46 round, `background: #1a1a24`, `cursor: pointer`, `z-index: 3`, with **neumorphic** shadow stack:
```
box-shadow:
6px 6px 12px rgba(0,0,0,0.4),
-4px -4px 10px rgba(255,255,255,0.03),
inset 1px 1px 1px rgba(255,255,255,0.05),
inset 4px 4px 8px rgba(0,0,0,0.4);
```
Plus an `::after` dotted outer ring at `inset: -7px` (`border: 1px dotted #1a1a24`).
Hover: `translateY(-1px)` and stronger shadows. Active: inset-only shadows.
Inner SVG: 20×20, stroke `rgba(255,255,255,0.7)`, `stroke-width: 1.5`, fill none, round caps.

### Center Node Styling
`.icon-node-center`: 64×64, `background: #1e1e2c`, similar but stronger neumorphic shadow:
```
8px 8px 16px rgba(0,0,0,0.5),
-6px -6px 14px rgba(255,255,255,0.04),
inset 1px 1px 2px rgba(255,255,255,0.06),
inset 6px 6px 12px rgba(0,0,0,0.5);
```
Inner Xero SVG: 28×28, `fill: white`.

### Side-Light Glows
- `.node-light-right::before` — half-circle radial glow on the right side: `radial-gradient(circle at right, rgba(200,200,200,0.45) 0%, transparent 70%)`, `opacity: 0` default, `opacity: 1` when `.active` (300ms transition).
- `.node-light-left::before` — same but on left, color `rgba(200,100,255,0.5)`.

### Splash Keyframe
```
@keyframes splash-anim {
0% { transform: scale(0.4); opacity: 0.8; }
40% { opacity: 0.6; }
100% { transform: scale(1.4); opacity: 0; }
}
```
Triggered by adding `.animate` (0.8s ease-out forwards).

## BEAM ANIMATION (JavaScript / requestAnimationFrame)

Implement a state machine with four phases. On mount and on every window `resize`, recompute the SVG path:

```
const pRect = pipeline.getBoundingClientRect();
const sRect = nodeStack.getBoundingClientRect();
const xRect = nodeX.getBoundingClientRect();
const shRect = nodeShield.getBoundingClientRect();
const startX = sRect.left + sRect.width/2 - pRect.left;
const startY = sRect.top + sRect.height/2 - pRect.top;
// midX/midY from nodeX, endX/endY from nodeShield
const d = `M ${startX},${startY} L ${midX},${midY} L ${endX},${endY}`;
```
Set this `d` on **both** beam paths.

The gradient is animated by mutating `x1` / `x2` of `#beam-gradient` (in `userSpaceOnUse`) so the bright window slides along. Use `halfWidth = 5` (percentage units), `center = percentage * 100`:
```
gradient.x1 = (center - 5) + '%'
gradient.x2 = (center + 5) + '%'
y1 = y2 = '0%'
```

State machine in a `requestAnimationFrame` loop, tracking `lastStateChange` timestamp:

| State | Duration | Behavior |
|---|---|---|
| **`p1`** | 800 ms | `percentage` interpolates `0 → 0.5`. While `p < 0.4`, add `.active` to `node-stack`; remove after. At end: switch to `splash`, hide both beam paths (`opacity: 0`), add `.animate` to splash. |
| **`splash`** | 800 ms | Wait. After elapsed: switch to `p2`, remove `.animate`, restore `opacity: 1` on both beam paths. |
| **`p2`** | 800 ms | `percentage` interpolates `0.5 → 1.0`. While `p > 0.6`, add `.active` to `node-shield`. At end: remove `.active`, switch to `idle`. |
| **`idle`** | 1000 ms | Wait, then loop back to `p1`. |

Total cycle ≈ 3.4 seconds, infinite.

## HERO TEXT

`.hero-content` `max-width: 620px; z-index: 1;`

```html
<h1 class="hero-heading">
The simple way
<strong>encryption your data</strong>
</h1>
<p class="hero-sub">
Fully managed data encrypting service and annotation<br>
platform for teams of all industries.
</p>
<a href="#" class="btn-cta">Get Started</a>
```

- `.hero-heading`: `font-size: clamp(2.4rem, 5.5vw, 4rem); font-weight: 300; line-height: 1.1; letter-spacing: -0.02em;`
- `.hero-heading strong`: `display: block; font-weight: 400; margin-top: 4px;` with `background: linear-gradient(to right, #ffffff, #a98597); -webkit-background-clip: text; -webkit-text-fill-color: transparent;`
- `.hero-sub`: 0.9rem, `rgba(255,255,255,0.4)`, `max-width: 440px`, `margin: 0 auto 36px`.
- `.btn-cta`: white pill, black text, `padding: 12px 32px; border-radius: 999px; font-weight: 600;`. Hover: `opacity: 0.9; translateY(-1px)`.

## BRANDS ROW

`.brands`: flex row, `gap: 64px; padding: 32px 24px 10px; flex-wrap: wrap; justify-content: center;`

Five `.brand-item` blocks (each: flex, gap 10, color `rgba(255,255,255,0.35)`, font-size 1.1rem, font-weight 500, white-space nowrap, with a 22×22 SVG):

1. **Expedia** — `<circle cx=12 cy=12 r=10 fill=current /><path fill="var(--bg)" d="M8 9h8v2H8zm0 4h6v2H8z"/>` then text `Expedia`.
2. **asana** — three filled circles: `(12,7,r=4)`, `(5,16,r=3.5)`, `(19,16,r=3.5)`, text `asana`.
3. **zenefits** — three stroked horizontal polylines (lengths 16/8/16) at y=8/12/16, text `zenefits`.
4. **HubSpot** — small filled circle `(15.5,8.5,r=2.5)`, stroked circle `(8.5,8.5,r=2)`, paths connecting them; text `HubSp<span class="hubspot-dot"></span>t` where `.hubspot-dot` is a 6×6 round superscript dot.
5. **loom** — circle `(12,12,r=9)` plus vertical/horizontal/diagonal stroke lines forming a globe-with-X, text `loom`.

## Responsive Breakpoints

- `≤ 860px`: pipeline `gap: 0; margin-bottom: 40px;` `.pipeline-line { width: 80px }`.
- `≤ 768px`: enable mobile hamburger menu, `.icon-node` shrinks to 38×38, `.icon-node-center` to 52×52, `.hero-card { padding: 60px 20px 60px; min-height: auto }`, `.brands { gap: 32px }`.
- `≤ 480px`: `.hero-card { border-radius: 16px }`, `.brands { gap: 24px }`.

## Z-Index Stack (critical for splash/beam layering)

- `0` — gradient arc + grid overlay
- `1` — pipeline container, hero text
- `2` — beam SVG, splash
- `3` — all icon nodes
- `4` — node side-light glows
- `1000-1001` — mobile nav overlay and toggle

Implement all of the above exactly. Use `useRef` for the pipeline, the three nodes, both beam paths, the gradient, and the splash. Use one `useEffect` to set up the resize listener and the `requestAnimationFrame` loop, and clean both up on unmount.

Social Media Posts 首屏

No.1474 · 前端开发 · 社区/原生 · 来源：MotionSites (MIT) · EN 原文

Create a 3x2 grid of 6 social media post cards (384px x 384px each, 16px gap) centered on the page. Every card has 12px rounded corners and overflow-hidden.

Background image: Download this image and save it as public/bg.jpeg, then set it as the full-page background with background-size: cover, background-position: center, background-repeat: no-repeat on the outermost container. The container should be min-h-screen, flexbox centered, and allow overflow scrolling.

Image URL: https://media.cleanshot.cloud/media/21620/LCl5ZplnQ16cj11YhT3EoWIj6Tfpndn3OEd9I1e4.jpeg?Expires=1775649006&Signature=n3nir~OV2wZrAh~Yw8rkuVkFKm0gABTt8LqemBwvbCWoeMbn4-fcW~FEbzlhutQ7k9i9EZWqNRW4~XSoX6QnyzBv6MzFCfc0gEuKGOI6Bb7bD-ExdwZKuGDGIqRuwG7fRSHfVrl4HimKHJt9zj~NeY6-evt6HjBdEmb4sA5mWOefxDqMfWZZrUZseo0PxYnnggxHvzcdfclviUMo~A-mH8qa9MgqcRWWAp-sk6t8qM8UP0MvWkOCKFzD1-yAm4UUmy2RHtp9UiD2LFk47SjZV~4OQN~4Ogm30DBe74mkFR0-~RkPLb-M3z3UVlUNhScSI1LmMCfiK5JptwlCmFflRA__&Key-Pair-Id=K269JMAT9ZF4GZ

GOOGLE FONTS (load all in index.html via single link):

Anton (used as font-grotesk in Tailwind)
Condiment (used as font-condiment)
Barlow weights 300-700 (used as font-barlow)
Instrument Serif regular + italic (used as font-instrument)
Inter weights 400-700 (used as font-inter)
Poppins weights 300-700 (used as font-poppins)
Source Serif 4 regular + italic weights 400-600 (used as font-source-serif)
Tailwind config -- extend fontFamily with these mappings:

grotesk -> "Anton", sans-serif
condiment -> "Condiment", cursive
barlow -> "Barlow", sans-serif
instrument -> "Instrument Serif", serif
inter -> "Inter", sans-serif
poppins -> "Poppins", sans-serif
source-serif -> "Source Serif 4", serif
GLOBAL CSS (index.css) -- custom animations and classes:

@keyframes fadeInUp -- from opacity:0, translateY(30px) to opacity:1, translateY(0). Class .animate-fade-in-up uses it at 0.6s ease-out forwards.

@keyframes fadeInOverlay -- from opacity:0 to opacity:1. Class .animate-fade-in-overlay uses it at 0.4s ease-out forwards.

@keyframes fade-rise -- from opacity:0, translateY(24px) to opacity:1, translateY(0). Three classes:

.animate-fade-rise -- 0.8s ease-out both (no delay)
.animate-fade-rise-delay -- 0.8s ease-out 0.2s both
.animate-fade-rise-delay-2 -- 0.8s ease-out 0.4s both
.liquid-glass -- background: rgba(255,255,255,0.01), background-blend-mode: luminosity, backdrop-filter: blur(4px), no border, box-shadow: inset 0 1px 1px rgba(255,255,255,0.1), position relative, overflow hidden. Has a ::before pseudo-element that creates a thin gradient border effect using mask-composite: exclude with a padding: 1.4px gradient border going from rgba(255,255,255,0.45) at top/bottom to transparent in the middle.

.liquid-glass-strong -- Same concept but with backdrop-filter: blur(50px), box-shadow: 4px 4px 4px rgba(0,0,0,0.05), inset 0 1px 1px rgba(255,255,255,0.15). Its ::before uses slightly stronger white values (0.5 at edges, 0.2 at 20%/80%).

CARD 1 (top-left) -- "Simplify Your Work With AI"

Black background, 384x384, 12px rounded corners, p-7, flex column justify-between
Video: https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260407_080531_1fe9b14c-9396-4b78-9372-42f4ddbd74c7.mp4
Positioned absolute top-0 right-0, height 75%, object-cover, horizontally flipped via transform: scaleX(-1), pointer-events-none, autoPlay loop muted playsInline
Gradient overlay: absolute inset-0, bg-gradient-to-t from-black via-black/40 to-transparent
Top content (z-10):
Row: Lucide Sparkles icon (w-4 h-4, amber-400) + text "The Future Is Now" in font-condiment, amber-400, text-sm, tracking-wide, with mb-3 and gap-1.5
Heading: font-grotesk (Anton), white, 32px, leading 1.05, uppercase, tracking-tight. Three lines: "Simplify" / "Your Work" / "With AI" (last line in amber-400)
Bottom content (z-10):
Paragraph: font-mono, white/60, 10px, leading-relaxed, mb-4. Text: "Automate repetitive tasks, generate content in seconds, and let intelligent tools handle the heavy lifting -- so you can focus on what truly matters."
Row with justify-between:
Left: circle (w-7 h-7, rounded-full, bg-amber-400/20) containing Lucide Zap (w-3.5 h-3.5, amber-400) + label "AI Powered" in font-mono, white/40, 8px, uppercase, tracking-widest
Right: pill button (bg-white/10, rounded-full, px-3.5 py-1.5, backdrop-blur-sm) with text "Learn More" in font-grotesk white 10px uppercase tracking-wide + Lucide ArrowRight (w-3.5 h-3.5 white)
CARD 2 (top-center) -- "Your Insights. One Clear Overview."

Black background, 384x384, 12px rounded corners
Video: https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260307_083826_e938b29f-a43a-41ec-a153-3d4730578ab8.mp4
Absolute inset-0, full width/height, object-cover, z-0, autoPlay loop muted playsInline
Gradient overlay z-[1]: bg-gradient-to-t from-black via-black/60 to-black/80
Content (z-10, flex column, h-full, justify-between, p-7):
Top section:
Pill badge using .liquid-glass class, rounded-lg, px-3 py-1.5, inline-flex, gap-2, mb-5, with .animate-fade-rise:
Inner white label: bg-white text-black rounded-md 7px font-medium px-1.5 py-0.5, text "New"
Text: "Say Hello to Corewave v3.2" in 7px font-medium white/60 font-inter
Heading: font-inter font-medium, white, 36px, leading 1.05, tracking -1.5px, .animate-fade-rise-delay. Text: "Your Insights." / "One Clear " then "Overview." in font-instrument italic font-normal text-white/80
Paragraph: font-inter, color #d4d8e8, 8.5px, leading-relaxed, max-w 240px, mt-3, opacity-90, .animate-fade-rise-delay-2. Text: "Neuralyn helps teams track metrics, goals, and progress with precision."
Bottom section (.animate-fade-rise-delay-2):
Row: "Neuralyn" in font-inter white/30 9px font-semibold tracking-tight, then a 1px gradient divider line (from-white/15 to-transparent, flex-1), then "Analytics" in font-inter white/20 7px tracking-widest uppercase
CARD 3 (top-right) -- "Work Smarter. Move Faster. AI Powers You Up."

White background, 384x384, 12px rounded corners, font-inter
Video: https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260330_153826_e9005cf7-a1c7-4c7d-886f-fea22d644a9c.mp4
Absolute inset-0, full width/height, object-cover, pointer-events-none, pt-[140px] (pushes video down), autoPlay loop muted playsInline
White fade overlay: absolute, left-0 right-0, top: 140px, height: 120px, linear-gradient(to bottom, white 0%, transparent 100%), z-10
Content (z-20, flex column, h-full):
Top area (flex-1, flex column, items-center, justify-start, pt-10, text-center, px-5):
Logo row (.animate-fade-in-up, animationDelay 0.1s, initial opacity 0): Lucide Star (w-3 h-3, fill-black) + "Stellar.ai" in 8px font-medium black
Heading (.animate-fade-in-up, delay 0.2s, initial opacity 0): 30px font-normal, leading 1.08, tracking-tight, mb-2.5. Text: "Work Smarter." / "Move Faster." / "AI Powers You Up." where last line has bg-gradient-to-r from-black via-gray-500 to-gray-400 bg-clip-text text-transparent
Paragraph (.animate-fade-in-up, delay 0.3s, initial opacity 0): 9px, text-gray-500, leading-relaxed, max-w 240px. Text: "Intelligent automation syncs with the tools you love to streamline tasks, boost output, and save time."
Bottom section (flex column, items-center, gap-2, pb-4, .animate-fade-in-up, delay 0.4s, initial opacity 0):
Small pill: rounded-full, px-2.5 py-0.5, 7px font-medium, text-white, backdrop-blur-md bg-white/15 border border-white/20. Text: "Collaborating with top aerospace pioneers globally"
Row of 5 brand names: ['Aeon', 'Vela', 'Apex', 'Orbit', 'Zeno'] each in text-base italic text-white tracking-tight with fontFamily: 'Georgia, serif', spaced with gap-5
CARD 4 (bottom-left) -- "Focus in a Distracted World"

Black background, 384x384, 12px rounded corners
Video: https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260324_151826_c7218672-6e92-402c-9e45-f1e0f454bdc4.mp4
Absolute inset-0, full width/height, object-cover, z-0, autoPlay loop muted playsInline
Gradient overlay z-[1]: bg-gradient-to-t from-black/70 via-transparent to-transparent
Content (z-10, flex column, h-full, justify-end, px-6, pb-7):
Heading: font-instrument, white, 32px, leading 0.95, tracking-tight, .animate-fade-rise. Text: "Focus in a" / "Distracted World"
Paragraph: font-inter, white/70, 8px, leading-relaxed, max-w 220px, mt-3, .animate-fade-rise-delay. Text: "Designing tools for deep thinkers, bold creators, and quiet rebels. Digital spaces for sharp focus and inspired work."
Brand: font-instrument, white/25, 10px, tracking-tight, mt-4, .animate-fade-rise-delay-2. Text: "Velorah" with a <sup> registered trademark symbol at 5px
CARD 5 (bottom-center) -- "Beyond silence, we build the eternal."

White background, 384x384, 12px rounded corners
Video: https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260328_083109_283f3553-e28f-428b-a723-d639c617eb2b.mp4
Positioned in a container: absolute left-0 right-0 bottom-0, top: 140px. Video fills that container, object-cover. NOT looping -- uses a custom fade effect via React useRef/useEffect:
FADE_DURATION = 0.5 seconds
A requestAnimationFrame loop checks currentTime: if within first 0.5s, fade opacity up from 0; if within last 0.5s, fade opacity down to 0; else opacity 1
On ended event: set opacity to 0, wait 100ms, reset to beginning and play again
Video starts with style={{ opacity: 0 }}, autoPlay muted playsInline (no loop)
Complex white overlay (z-[1], absolute inset-0, pointer-events-none): linear-gradient(to bottom, white 0%, white 20%, transparent 45%, transparent 65%, white 90%, white 100%)
Content (z-10, flex column, items-center, justify-center, h-full, text-center, px-5):
Heading: font-instrument, 34px, leading 0.95, tracking-tight (-0.8px letterSpacing), black, .animate-fade-rise. Text: "Beyond " then <em> "silence," in #6F6F6F / "we build " then <em> "the eternal." in #6F6F6F
Paragraph: font-inter, #6F6F6F, 8px, leading-relaxed, max-w 230px, mt-3, .animate-fade-rise-delay. Text: "Platforms for deep thinkers and fearless makers. Digital havens for focused work and pure creative flow."
Brand: font-instrument, 10px, black/30, mt-5, tracking-tight, .animate-fade-rise-delay-2. Text: "Aethera" with <sup> registered trademark at 5px
CARD 6 (bottom-right) -- "Innovating the spirit of bloom"

Black background, 384x384, 12px rounded corners
Video: https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260315_073750_51473149-4350-4920-ae24-c8214286f323.mp4
Absolute inset-0, full width/height, object-cover, z-0, autoPlay loop muted playsInline
Gradient overlay z-[1]: bg-gradient-to-t from-black/80 via-black/20 to-black/40
Content (z-10, flex column, h-full, justify-between, p-6):
Top: Row with Lucide Sparkles (w-3.5 h-3.5, white/50) + text "AI-Powered Floral Design" in font-poppins, white/50, 9px, font-medium, uppercase, tracking [0.2em]
Bottom section:
Heading: font-poppins font-medium, white, 38px, leading 0.95, tracking -0.05em, .animate-fade-rise. Text: "Innovating the" / then <em> "spirit of" in font-source-serif italic font-medium white/80, followed by " bloom"
Paragraph: font-poppins, white/50, 8px, leading-relaxed, max-w 200px, mt-3, .animate-fade-rise-delay. Text: "Where artificial intelligence meets nature's artistry. Sculpting living compositions beyond imagination."
Two pills (mt-4, gap-2, .animate-fade-rise-delay-2): each uses .liquid-glass class, rounded-full, px-3 py-1, 7px, white/80, font-poppins. Labels: "AI Generation" and "3D Structures"
LAYOUT (App.tsx):
The outer div has the background image and centering. The inner div uses display: grid, gridTemplateColumns: repeat(3, 384px), gap: 16px, shrink-0. Cards are placed in order: CardOne, CardTwo, CardThree, CardFour, CardFive, CardSix.

Sup 交互卡片 Stack

No.1475 · 前端开发 · 社区/原生 · 来源：MotionSites (MIT) · EN 原文

You are given a task to integrate an existing React component in the codebase

~~~/README.md
# InteractiveCardStack

A premium, interactive card stack component for React. It features smooth drag physics, customizable animations, and automatic cycling. Perfect for showcases, galleries, or landing page features.

## Features
- 🖱️ **Drag-to-back physics**: Fluid interactions with Framer Motion.
- 📱 **Mobile Optimized**: Custom handling for touch devices.
- 🔄 **Autoplay**: Optional automatic card cycling with pause-on-hover.
- 🎨 **Fully Customizable**: Control rotation, sensitivity, and spring physics.
- 🌗 **Theme Aware**: Works seamlessly with light and dark modes.

## Dependencies
- `framer-motion`: ^11.0.0
- `lucide-react`: ^0.454.0

## Props

| Prop | Type | Default | Description |
|------|------|---------|-------------|
| `cards` | `React.ReactNode[]` | `[]` | Array of React elements to display as cards. |
| `randomRotation` | `boolean` | `false` | Apply slight random rotations to cards for a organic feel. |
| `sensitivity` | `number` | `180` | Distance in pixels a card must be dragged to trigger send-to-back. |
| `sendToBackOnClick` | `boolean` | `false` | Allow clicking a card to send it to the back. |
| `autoplay` | `boolean` | `false` | Enable automatic cycling of cards. |
| `autoplayDelay` | `number` | `3000` | Delay in ms between automatic transitions. |
| `pauseOnHover` | `boolean` | `true` | Pause autoplay when user hovers over the stack. |
| `animationConfig` | `object` | `{ stiffness: 260, damping: 20 }` | Framer Motion spring configuration. |
| `mobileClickOnly` | `boolean` | `false` | Disable dragging on mobile; cards only cycle via click. |

## Usage

```tsx
import { InteractiveCardStack } from '@/sd-components/f7c18bb8-fe7d-4435-b722-c543df486128';

function MyGallery() {
  const items = [
    <img src="/img1.jpg" className="w-full h-full object-cover" />,
    <img src="/img2.jpg" className="w-full h-full object-cover" />,
    <div className="bg-primary text-white p-8">Custom Content</div>
  ];

  return (
    <div className="w-80 h-[450px]">
      <InteractiveCardStack 
        cards={items} 
        randomRotation={true}
        sendToBackOnClick={true}
      />
    </div>
  );
}
```
~~~

~~~/src/App.tsx
import React, { useState } from 'react';
import { InteractiveCardStack } from './Component';
import { RefreshCcw } from 'lucide-react';

const IMAGES = [
  "https://images.unsplash.com/photo-1480074568708-e7b720bb3f09?q=80&w=500&auto=format",
  "https://images.unsplash.com/photo-1449844908441-8829872d2607?q=80&w=500&auto=format",
  "https://images.unsplash.com/photo-1452626212852-811d58933cae?q=80&w=500&auto=format",
  "https://images.unsplash.com/photo-1572120360610-d971b9d7767c?q=80&w=500&auto=format"
];

export default function App() {
  const [key, setKey] = useState(0);

  const cardItems = IMAGES.map((src, i) => (
    <div key={i} className="w-full h-full relative group">
      <img 
        src={src} 
        alt={`Showcase ${i + 1}`} 
        className="w-full h-full object-cover"
      />
      <div className="absolute inset-0 bg-gradient-to-t from-black/40 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300" />
    </div>
  ));

  return (
    <div className="min-h-screen bg-[#F9F9F9] dark:bg-[#1A1A1B] flex flex-col items-center justify-center p-20">
      {/* Title as requested in style guide */}
      <h2 className="text-xl font-medium mb-12 text-[#1A1A1B] dark:text-[#F9F9F9] tracking-tight">
        Interactive Card Stack
      </h2>

      <div className="relative group">
        {/* Subtle borderless container with soft shadow */}
        <div className="w-[320px] h-[420px] rounded-[2rem] shadow-[0_40px_80px_rgba(0,0,0,0.08)] bg-transparent">
          <InteractiveCardStack 
            key={key}
            cards={cardItems}
            randomRotation={true}
            sendToBackOnClick={true}
            autoplay={false}
            pauseOnHover={true}
          />
        </div>

        {/* Reply/Reset button as requested */}
        <button 
          onClick={() => setKey(prev => prev + 1)}
          className="absolute -bottom-20 left-1/2 -translate-x-1/2 p-3 bg-white dark:bg-zinc-800 rounded-full shadow-lg border border-border/50 hover:scale-110 active:scale-95 transition-all duration-200 group/btn"
          aria-label="Reset Animation"
        >
          <RefreshCcw className="w-5 h-5 text-primary group-hover/btn:rotate-180 transition-transform duration-500" />
        </button>
      </div>

      <p className="mt-32 text-sm text-muted-foreground font-normal opacity-50">
        Drag or click the top card to cycle
      </p>
    </div>
  );
}
~~~

~~~/package.json
{
  "name": "@seedance/interactive-card-stack",
  "description": "Premium interactive card stack with drag physics and autoplay",
  "dependencies": {
    "framer-motion": "^11.0.0",
    "lucide-react": "^0.454.0",
    "clsx": "^2.1.1",
    "tailwind-merge": "^2.5.4"
  }
}
~~~

~~~/src/Component.tsx
/**
 * InteractiveCardStack Component
 * A premium, smooth, and interactive card stack with drag-to-back physics.
 * Supports random rotation, autoplay, and mobile interactions.
 */

import React, { useState, useEffect } from 'react';
import { motion, useMotionValue, useTransform, AnimatePresence, type PanInfo } from 'framer-motion';

interface CardRotateProps {
  children: React.ReactNode;
  onSendToBack: () => void;
  sensitivity: number;
  disableDrag?: boolean;
}

function CardRotate({ children, onSendToBack, sensitivity, disableDrag = false }: CardRotateProps) {
  const x = useMotionValue(0);
  const y = useMotionValue(0);
  const rotateX = useTransform(y, [-100, 100], [30, -30]);
  const rotateY = useTransform(x, [-100, 100], [-30, 30]);

  function handleDragEnd(_event: MouseEvent | TouchEvent | PointerEvent, info: PanInfo) {
    if (Math.abs(info.offset.x) > sensitivity || Math.abs(info.offset.y) > sensitivity) {
      onSendToBack();
    } else {
      x.set(0);
      y.set(0);
    }
  }

  if (disableDrag) {
    return (
      <motion.div className="absolute inset-0" style={{ x: 0, y: 0 }}>
        {children}
      </motion.div>
    );
  }

  return (
    <motion.div
      className="absolute inset-0 cursor-grab active:cursor-grabbing"
      style={{ x, y, rotateX, rotateY }}
      drag
      dragConstraints={{ top: 0, right: 0, bottom: 0, left: 0 }}
      dragElastic={0.6}
      onDragEnd={handleDragEnd}
    >
      {children}
    </motion.div>
  );
}

export interface InteractiveCardStackProps {
  /** Array of card contents */
  cards?: React.ReactNode[];
  /** Enable random rotation for each card */
  randomRotation?: boolean;
  /** Sensitivity for the drag-to-back action (pixels) */
  sensitivity?: number;
  /** Whether clicking a card sends it to the back */
  sendToBackOnClick?: boolean;
  /** Spring animation configuration */
  animationConfig?: { stiffness: number; damping: number };
  /** Enable automatic cycling of cards */
  autoplay?: boolean;
  /** Delay between cycles in milliseconds */
  autoplayDelay?: number;
  /** Pause autoplay when hovering */
  pauseOnHover?: boolean;
  /** Disable drag on mobile devices and only allow clicks */
  mobileClickOnly?: boolean;
  /** Viewport width breakpoint for mobile detection */
  mobileBreakpoint?: number;
  /** Custom class for the container */
  className?: string;
}

export function InteractiveCardStack({
  cards = [],
  randomRotation = false,
  sensitivity = 180,
  sendToBackOnClick = false,
  animationConfig = { stiffness: 260, damping: 20 },
  autoplay = false,
  autoplayDelay = 3000,
  pauseOnHover = true,
  mobileClickOnly = false,
  mobileBreakpoint = 768,
  className = ""
}: InteractiveCardStackProps) {
  const [isMobile, setIsMobile] = useState(false);
  const [isPaused, setIsPaused] = useState(false);
  
  // Initialize stack with IDs to track items correctly
  const [stack, setStack] = useState<{ id: string; content: React.ReactNode; randomRot: number }[]>([]);

  useEffect(() => {
    const checkMobile = () => {
      setIsMobile(window.innerWidth < mobileBreakpoint);
    };
    checkMobile();
    window.addEventListener('resize', checkMobile);
    return () => window.removeEventListener('resize', checkMobile);
  }, [mobileBreakpoint]);

  useEffect(() => {
    if (cards.length > 0) {
      setStack(cards.map((content, index) => ({
        id: `card-${index}-${Date.now()}`, // Ensure unique IDs even if content is similar
        content,
        randomRot: randomRotation ? Math.random() * 10 - 5 : 0
      })));
    }
  }, [cards, randomRotation]);

  const sendToBack = (id: string) => {
    setStack(prev => {
      const index = prev.findIndex(card => card.id === id);
      if (index === -1) return prev;
      
      const newStack = [...prev];
      const [card] = newStack.splice(index, 1);
      
      // Update random rotation for the card when it goes to back
      const updatedCard = {
        ...card,
        randomRot: randomRotation ? Math.random() * 10 - 5 : 0
      };
      
      newStack.unshift(updatedCard);
      return newStack;
    });
  };

  useEffect(() => {
    if (autoplay && stack.length > 1 && !isPaused) {
      const interval = setInterval(() => {
        const topCardId = stack[stack.length - 1].id;
        sendToBack(topCardId);
      }, autoplayDelay);
      return () => clearInterval(interval);
    }
  }, [autoplay, autoplayDelay, stack, isPaused]);

  const shouldDisableDrag = mobileClickOnly && isMobile;
  const shouldEnableClick = sendToBackOnClick || shouldDisableDrag;

  if (stack.length === 0) return null;

  return (
    <div
      className={`relative w-full h-full ${className}`}
      style={{ perspective: 1000 }}
      onMouseEnter={() => pauseOnHover && setIsPaused(true)}
      onMouseLeave={() => pauseOnHover && setIsPaused(false)}
    >
      <AnimatePresence>
        {stack.map((card, index) => {
          // index 0 is bottom, stack.length - 1 is top
          const isTop = index === stack.length - 1;
          const depth = stack.length - 1 - index;
          
          return (
            <CardRotate
              key={card.id}
              onSendToBack={() => sendToBack(card.id)}
              sensitivity={sensitivity}
              disableDrag={!isTop || shouldDisableDrag}
            >
              <motion.div
                className="rounded-2xl overflow-hidden w-full h-full bg-card border border-border/50 shadow-sm"
                onClick={() => isTop && shouldEnableClick && sendToBack(card.id)}
                style={{
                  zIndex: index,
                }}
                animate={{
                  rotateZ: depth * -2 + card.randomRot,
                  scale: 1 - depth * 0.04,
                  y: depth * -8,
                  opacity: 1 - depth * 0.15,
                  transformOrigin: 'center center'
                }}
                transition={{
                  type: 'spring',
                  stiffness: animationConfig.stiffness,
                  damping: animationConfig.damping
                }}
              >
                {card.content}
              </motion.div>
            </CardRotate>
          );
        })}
      </AnimatePresence>
    </div>
  );
}

export default InteractiveCardStack;
~~~

Implementation Guidelines

1. Analyze the component structure, styling, animation implementations
2. Review the component's arguments and state
3. Think through what is the best place to adopt this component/style into the design we are doing
4. Then adopt the component/design to our current system

Help me integrate this into my design

前端开发类 AI 提示词（265 条）

All 关于 The Benjamins

Heximage

Red In Black

客户评价

Beratberkayg AI 加载

Dani AI Agent Pipeline

Designali In 液态 玻璃 按钮

Designali In Shader 动效

Designali In Shader Lines

Designali In Web Gl Shader

Easemize AI Prompt Box

Easemize 动效 Glassy 定价

Easemize Chatgpt Prompt 输入框

Easemize Cinematic 落地页 首屏

Easemize Spotlight 卡片

Jatin Unique 客户评价

Jatin Vapour Text Effect

霓虹 Nebula

功能 轮播

Circular Testimonials

Minhxthanh 动效 Shader 背景

Minhxthanh 渐变 菜单

Minhxthanh Shader 背景

Moazamtrade Animate 卡片 动效

Moazamtrade The Infinite 网格

Muhammad Binsalman Glowing AI 聊天 Assistant

背景 Paper Shaders

Nblairwalker M Ascii

Nblairwalker N Ascii

Nblairwalker Nm

Maomao

Sign In Flow

滚动 形变 首屏

动效 Shader 首屏

作品集

3D Testimonails

首屏

首屏

Sshahaider Dotted Surface

Sshahaider 定价

Sshahaider Single 定价 卡片

Sshahaider Zoom 视差

Suraj Xd 液态 玻璃

定价 区块

动效 首屏

Cpu Architecture

渐变 按钮

Splite

Testimonials With 跑马灯

动效 AI 聊天

Radial Orbital 时间线

2rguB0QxcSITG2Y7ivePFsKsUU6 Gallery4

定价 Interaction

AI Voice 输入框

背景 Paths

Bento 网格

创意 定价

Hand Writing Text

Shape 落地页 首屏

AI 聊天

深色 渐变 定价

Stagger Testimonials

客户评价 卡片

Shining Text

霓虹 按钮

动效 卡片 Stack

Agent Plan

功能

Testimonials Columns

动效 Text Cycle

滚动 Expansion 首屏

AI Prompt Box

Cinematic 落地页 首屏

Aceternity 动效 Testimonials

Aceternity 极光 背景

Aceternity Bento 网格

Aceternity Container 滚动 动效

Aceternity Glowing Effect

Aceternity Link Preview

Designali In 液态玻璃按钮

Easemize Cinematic 落地页首屏

功能轮播

Minhxthanh 渐变菜单

Moazamtrade Animate 卡片动效

滚动形变首屏

Sshahaider Single 定价卡片

Suraj Xd 液态玻璃

定价区块

动效首屏

渐变按钮

创意定价

Shape 落地页首屏

深色渐变定价

客户评价卡片

霓虹按钮

动效卡片 Stack

Cinematic 落地页首屏

Aceternity 极光背景

Aceternity Container 滚动动效

Aymanch 定价区块

Magicui 交互悬停按钮

Magicui 彩虹按钮

Tommyjepsen 定价区块 With Comparison

Hx Aurel 液态首屏

Hx 交互轮播