Access ALL prompts for stunning animated websites in one click: motionsites.ai # PROMPT: Recreate this landing page exactly Build a production-quality marketing landing page for a thoughtful newsletter platform called "Mindloop" as a Vite + React + TypeScript app using Tailwind CSS, shadcn/ui, framer-motion, and lucide-react. The aesthetic is calm, editorial, cinematic — black background, white foreground, serif italic accents, ambient looping background videos, and a signature "liquid glass" effect on interactive surfaces. No purple/indigo hues. ## Stack & dependencies - Vite + React 18 + TypeScript - Tailwind CSS with shadcn/ui design tokens (HSL CSS variables) - `framer-motion` for animation - `lucide-react` for icons - `@fontsource/inter` (400, 500, 600, 700) and `@fontsource/instrument-serif` (400, 400-italic) for fonts - Do NOT install other UI libraries ## Global theme (src/index.css) Import fontsource CSS at top, then Tailwind layers. Pure black/white palette via HSL vars: ```css @import "@fontsource/inter/400.css"; @import "@fontsource/inter/500.css"; @import "@fontsource/inter/600.css"; @import "@fontsource/inter/700.css"; @import "@fontsource/instrument-serif/400.css"; @import "@fontsource/instrument-serif/400-italic.css"; @tailwind base; @tailwind components; @tailwind utilities; @layer base { :root { --background: 0 0% 0%; --foreground: 0 0% 100%; --card: 0 0% 5%; --card-foreground: 0 0% 100%; --popover: 0 0% 5%; --popover-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%; --radius: 0.5rem; } } @layer base { * { @apply border-border; } html, body { margin: 0; padding: 0; background-color: hsl(var(--background)); color: hsl(var(--foreground)); font-family: Inter, system-ui, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } body { @apply bg-background text-foreground; } } .font-serif { font-family: "Instrument Serif", ui-serif, Georgia, serif; } /* Liquid glass effect — frosted surface with inset highlight + animated gradient border */ .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; } ``` Tailwind config extends `fontFamily.sans = Inter`, `fontFamily.serif = "Instrument Serif"`, and maps all colors to the HSL vars. Dark mode is class-based (but the whole site is black by default). ## Shared animation helper (src/lib/animations.ts) ```ts export const fadeUp = (delay: number = 0) => ({ initial: { opacity: 0, y: 20 }, whileInView: { opacity: 1, y: 0 }, viewport: { once: true, margin: "-100px" }, transition: { duration: 0.6, delay, ease: "easeOut" as const }, }); ``` ## App structure (src/App.tsx) ```tsx <div className="bg-background text-foreground min-h-screen font-sans"> <Navbar /> <main> <Hero /> <SearchChanged /> <Mission /> <Solution /> <CTA /> </main> <Footer /> </div> ``` ## Logo component The logo is a PNG placed at `public/image.png`. Component renders `<img src="/image.png" className="h-7 w-auto" />` with an optional `className` prop to resize it (e.g. `h-12 w-auto` in the CTA). --- ## Section 1 — Navbar (fixed, shrinks to liquid-glass pill on scroll) - `fixed top-0 left-0 right-0 z-50`, centered flex wrapper `pt-4 px-4`. - Inner container: `max-w-6xl rounded-full`, transitions over 500ms between two states: - Not scrolled: `bg-transparent px-6 py-3` - Scrolled (>20px): `liquid-glass px-5 py-2.5` - Left: `<Logo />` only (no text). - Center (desktop): links "Home", "How It Works", "Philosophy", "Use Cases" in `text-muted-foreground`, hover to `foreground`, with an animated underline that grows from width 0 to full on hover. - Right (desktop): three circular 9x9 icon buttons for Instagram / LinkedIn / Twitter (lucide), strokeWidth 1.5, hover bg `white/5`. - Mobile: hamburger (`Menu`) that toggles a `liquid-glass rounded-2xl` dropdown panel below the bar. ## Section 2 — Hero (fullscreen, looping background video) - Section: `relative min-h-screen w-full overflow-hidden`. - Full-bleed autoplay/muted/loop/playsInline `<video>` covering the viewport: - src: `d8j0ntlcm91z4.cloudfront.net…` - Bottom fade overlay: `absolute bottom-0 h-64 bg-gradient-to-t from-background to-transparent z-[1]`. - Content `z-10 pt-28 md:pt-32` centered column: 1. Social proof row (fade+slide in): three overlapping round avatars (`w-8 h-8 rounded-full border-2 border-background`) from Pexels (use IDs 415829, 774909, 1222271 with `?auto=compress&cs=tinysrgb&w=100&h=100&fit=crop`) + muted text "7,000+ people already subscribed". 2. H1: `text-5xl md:text-7xl lg:text-8xl font-medium tracking-[-2px] max-w-5xl leading-[1.02]`, content: `Get <span className="font-serif italic font-normal">Inspired</span> with Us`. 3. Subhead in `--hero-subtitle` color, `text-lg max-w-2xl mt-8`: "Join our feed for meaningful updates, news around technology and a shared journey toward depth and direction." 4. Email capture form: `liquid-glass rounded-full p-2 max-w-lg w-full mt-10 flex items-center gap-2`. Transparent input, pill button `bg-foreground text-background rounded-full px-8 py-3 text-xs font-semibold tracking-[2px]` labeled "SUBSCRIBE" with framer hover scale 1.03 / tap 0.98. - Each element fades in sequentially (delays 0, 0.1, 0.25, 0.4s). ## Section 3 — SearchChanged (the shift) - `pt-52 md:pt-64 pb-20 px-6 md:px-8`. - Header grid (12 col): left 7 — eyebrow "THE SHIFT" (uppercase tracking-[3px]) + H2 `text-5xl md:text-7xl lg:text-8xl font-medium tracking-[-2px] leading-[0.95]` reading `Search has <italic serif>changed.</italic><br/>Have you?`. Right 5 — body copy: "The way people discover ideas has quietly shifted. Answers arrive synthesized, personal, and instant — and the old playbook of SEO keywords is running on borrowed time." - Three-card grid using 1px `bg-border/40` gaps inside a `rounded-3xl overflow-hidden` wrapper so the divider lines look like hairlines. Each card `bg-background p-8 md:p-10` with hover `bg-white/[0.02]`. - Card header: `liquid-glass` rounded-2xl 12x12 icon tile (left) + `ArrowUpRight` (right) that translates up/right on group hover. - Big stat `text-4xl md:text-5xl font-medium tracking-[-1px]` + muted label. - Name (semibold) + muted description. - Cards: ChatGPT / 400M weekly users / "Conversational answers…"; Perplexity / 15M daily queries / "Cited, sourced responses…"; Google AI / 2B+ AI overviews / mo / "Generative overviews replacing classic search result pages." - Below: centered quote framed by two `h-px w-12 bg-border` hairlines: `If you don't answer the questions, <foreground>someone else will.</foreground>` - Every block animates with `fadeUp` staggered. ## Section 4 — Mission (scroll-driven word reveal over parallax video) - Outer: `relative w-full`, inner wrapper `h-[130vh] md:h-[150vh] overflow-hidden`. - Background `<motion.video>` with parallax: `y` transforms from `-6%` to `6%` across scroll progress, and `scale` bounces `1.08 → 1.02 → 1.08`. Video src: `d8j0ntlcm91z4.cloudfront.net…` - Overlays for legibility: - `bg-gradient-to-b from-background via-transparent to-background` + `bg-background/25` - Top `h-32` and bottom `h-40` fades to background. - Sticky content container `sticky top-0 h-screen flex items-end justify-center pb-16 md:pb-24`. - Eyebrow: hairline + "OUR MISSION" (uppercase tracking-[3px]). - Two stacked paragraphs where each word animates from `opacity 0.2 → 1` and `blur(6px) → blur(0)` based on its own slice of `useScroll({ target, offset: ["start 0.85","end 0.2"] })` progress. - Paragraph 1 (large `text-2xl md:text-4xl lg:text-6xl font-medium tracking-[-1.5px] leading-[1.12]`): "We're building a space where curiosity meets clarity — where readers find depth, writers find reach, and every newsletter becomes a conversation worth having." The words **curiosity**, **meets**, **clarity** are highlighted full-white with a slightly stronger text-shadow; other words use `--hero-subtitle` color with a soft text-shadow `0 2px 20px rgba(0,0,0,0.6)`. - Paragraph 2 (smaller `text-xl md:text-2xl lg:text-3xl`): "A platform where content, community, and insight flow together — with less noise, less friction, and more meaning for everyone involved." - Tag row with bullet dots: `Depth`, `Reach`, `Meaning` (uppercase tracking-[3px] muted). ## Section 5 — Solution (sticky 12-col grid) - `py-32 md:py-44 border-t border-border/30 px-6 md:px-8`. - Left column (`lg:col-span-5 lg:sticky lg:top-32`): - Eyebrow "SOLUTION". - H2 `text-4xl md:text-5xl lg:text-6xl font-medium tracking-[-1px]`: `The platform for <italic serif>meaningful</italic> content`. - Body: "Four tools, one quiet ecosystem — built so writing, reading, and discovering all reward the same thing: depth." - Video card `rounded-2xl overflow-hidden aspect-video` with src: `d8j0ntlcm91z4.cloudfront.net…` - Right column (`lg:col-span-7`): vertical list of 4 feature rows separated by `border-b border-border/40` (no border on last). Each row has a `liquid-glass` 12x12 rounded-2xl icon tile, title `text-xl md:text-2xl font-semibold tracking-[-0.5px]`, right-aligned index `01–04` in muted tracking-[2px], and muted description under the title. Icons + copy: 1. `Compass` — Curated Feed — "Editorial-quality recommendations that match your pace and depth." 2. `PenLine` — Writer Tools — "A calm canvas with the scaffolding serious writers ask for." 3. `Users` — Community — "Thoughtful readers and creators rewarded for their attention." 4. `Radio` — Distribution — "Reach built on signal, not noise — measured by meaning." ## Section 6 — CTA (video background + centered content) - `relative py-32 md:py-44 border-t border-border/30 overflow-hidden px-6 md:px-8`. - Background video (cover, z-0) src: `d8j0ntlcm91z4.cloudfront.net…` - Overlay `absolute inset-0 bg-background/45 z-[1]`. - Centered content (max-w-3xl): - `<Logo className="h-12 w-auto" />` at the top. - H2 `text-4xl md:text-6xl lg:text-7xl font-medium tracking-[-1px] mt-8 leading-[1.05]`: `<italic serif>Start</italic> Your Journey`. - Muted lede: "Step into a quieter internet. Join the readers and writers shaping what comes next." - Buttons row (hover scale 1.03, tap 0.98): - Primary: `bg-foreground text-background rounded-lg px-8 py-3.5 text-sm font-semibold` — "Subscribe Now". - Secondary: `liquid-glass rounded-lg px-8 py-3.5 text-sm font-semibold` — "Start Writing". - Each element `fadeUp` with delays 0, 0.1, 0.2, 0.3. ## Section 7 — Footer - `border-t border-border/30 px-6 md:px-8`, inner `max-w-7xl pt-20 pb-12`. - Top block: 12-col grid split 5/7, with a `border-b border-border/30 pb-16`. - Left 5 cols: `<Logo />` only (no "Mindloop" text) + paragraph "A quieter internet for readers and writers. Meaningful updates, every week." + row of three `liquid-glass` 10x10 rounded-full icon buttons (Instagram, LinkedIn, Twitter). - Right 7 cols: three link columns, each with a uppercase tracking-[3px] muted heading and 4 links: - Product: How It Works, Philosophy, Use Cases, Changelog - Resources: Writer Guide, Reader FAQ, Press Kit, Brand - Company: About, Careers, Contact, Journal - Bottom bar `pt-8 flex md:flex-row items-center justify-between`: `© 2026 Mindloop. All rights reserved.` left; Privacy / Terms / Cookies right. - Giant decorative watermark: a non-interactive div rendering the word `mindloop` at `text-[18vw] leading-none font-serif italic text-foreground/[0.04] tracking-[-0.02em] text-center -mb-[4vw]`, giving a subtle oversized serif backdrop behind the footer. ## Video URLs summary (use exactly these) - Hero: `d8j0ntlcm91z4.cloudfront.net…` - Mission: `d8j0ntlcm91z4.cloudfront.net…` - Solution: `d8j0ntlcm91z4.cloudfront.net…` - CTA: `d8j0ntlcm91z4.cloudfront.net…` ## Animation rules - All reveal animations use `fadeUp(delay)` (`y: 20 → 0`, `opacity: 0 → 1`, 0.6s easeOut, once, `margin: -100px`). - Hero elements animate in on mount, not on scroll. - Navbar transitions between transparent and liquid-glass over 500ms when `window.scrollY > 20`. - Buttons use `whileHover={{ scale: 1.03 }}`, `whileTap={{ scale: 0.98 }}`. - Mission section uses `useScroll` + per-word `useTransform` for opacity and blur (`6px → 0px`). - SearchChanged cards: `ArrowUpRight` group-hover translates `-translate-y-0.5 translate-x-0.5`, underline links grow via `w-0 → w-full`. ## Typography rules - Body: Inter, line-height ~1.5. - Headings: Inter `font-medium` with very tight negative tracking (`-2px` on display, `-1.5px`/`-1px` on section heads). - Italic accent words wrap in `<span className="font-serif italic font-normal">…</span>` using Instrument Serif to contrast with the geometric sans. - Eyebrows use `text-xs uppercase tracking-[3px] text-muted-foreground`. ## Quality bar - Fully responsive down to 375px mobile; grids collapse to single column; fonts scale with `md:` / `lg:` variants. - Keep black (`#000`) background consistent; all text white or muted grays — no purple/indigo. - Videos must be `autoplay muted loop playsInline` and `object-cover`. - No external images besides the three Pexels avatars and the logo at `/image.png`. - Build must pass `npm run build` without TS errors.