mindloop-landing

What this skill does

# Mindloop — Dark Monochrome Content-Platform Landing

Produce a premium, **pure-black monochrome** landing page for **Mindloop**, a newsletter / content platform. A complete, rendered reference implementation ships beside this skill at `example.html` — **start from it**. Copy `example.html`, then adjust copy and data; do not rewrite the CSS or invent a new visual language. The seed already encodes the exact HSL tokens, liquid-glass treatment, fonts, section layout, fadeUp reveal, scroll-driven mission reveal, and the HLS CTA.

This is the authoritative build brief. Follow it exactly — the HSL variables, fonts, video URLs, and animation patterns are locked.

**Monochrome is hard-locked.** Background is pure black `#000` (`0 0% 0%`), foreground pure white. There are **no colors or gradients beyond monochrome** — the only non-grey token is `--accent: 170 15% 45%` (a muted teal-grey) and it is essentially unused in the visible UI. Do not introduce brand colors, blues, purples, or vivid gradients.

**Assets (critical):** `example.html` already ships the 3 hero avatars and the 3 platform icons (ChatGPT / Perplexity / Google AI) as **inlined `data:image/svg+xml;base64,…` URIs**. Keep them exactly as they are. Do **not** swap them for `i.pravatar.cc`, `api.dicebear.com`, `dicebear`, or any other remote avatar / icon host — external hosts rate-limit or 403 inside the preview sandbox and render broken. Only replace an asset if the user supplies a real image, and prefer a data URI over a remote URL. The four large background videos stay on their stable `cloudfront.net` / `stream.mux.com` CDNs.

## Stack

- Default output: a single self-contained HTML file (the `example.html` seed). It already includes everything inline.
- If the user explicitly asks for the full project, port the seed faithfully to **React + Vite + TypeScript + Tailwind CSS + shadcn/ui + Framer Motion**. Same tokens, same markup structure. Install `hls.js` and `framer-motion`. Fonts via `@fontsource/inter` (400, 500, 600, 700) and `@fontsource/instrument-serif` (400, 400-italic). `lucide-react` for icons. `tailwindcss-animate` plugin. Do not change the design while porting.
- **Motion loading (locked).** If you emit a single self-contained inline-JSX file instead of the Vite project, Motion's React hooks (`useScroll`, `useTransform`, `useAnimationFrame`, …) exist only in the **React** UMD build: load `<script src="https://unpkg.com/[email protected]/dist/framer-motion.js"></script>` and read them off `window.Motion` — never the vanilla `https://unpkg.com/motion@.../dist/motion.js` DOM bundle, which lacks `useScroll` and renders a blank page. (The Vite project imports from npm and is unaffected.)

## Fonts

- **Inter** (sans) — body and UI, weights 400/500/600/700.
- **Instrument Serif** (serif, italic) — used ONLY for the italic accent word inside headings (`.serif`: `font-style: italic; font-weight: 400`). Loaded from Google Fonts in the seed; `@fontsource/instrument-serif` in the React port.

## Design System — locked HSL tokens (`:root`, values only, no `hsl()` wrapper)

```
--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%
```

Consume tokens via `hsl(var(--token))` / `hsl(var(--token) / 0.3)`.

## Liquid Glass (`.liquid-glass`) — locked

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

Used on: the 3 navbar social buttons (circular `w-10 h-10`), the hero email-form container (rounded-full), and the "Start Writing" CTA button (rounded-lg).

## Animation pattern — fadeUp (Framer-Motion `whileInView`)

Reusable staggered reveal. In React:

```ts
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" },
});
```

In the seed this is mapped down to an `IntersectionObserver` (threshold ~0.08, `rootMargin: -100px`) that adds a `.in` class; siblings within a parent get a staggered `transition-delay` (~0.08s steps). Keep `once: true` semantics (unobserve after reveal).

## Page structure (top to bottom)

### Navbar — fixed, transparent, `top-0 z-50`, padding `px-8 md:px-28 py-4`
- Left: concentric-circles logo (outer `w-7 h-7` `border-2 border-foreground/60`, inner `w-3 h-3` `border border-foreground/60`) + bold "Mindloop".
- Center-left: nav links `["Home", "How It Works", "Philosophy", "Use Cases"]` separated by `•` dots; links `text-muted-foreground hover:text-foreground`. Hidden on mobile.
- Right: 3 social icons (Instagram, LinkedIn, Twitter — `lucide-react` in the port, inline SVG in the seed) in liquid-glass circular `w-10 h-10 rounded-full` buttons.

### Hero — full viewport height
- Background: autoplay/loop/muted/playsInline MP4 covering the section, `object-cover`.
  - URL: `https://plugin-assets.open-design.ai/plugins/mindloop-landing/hf_20260325_120549_0cd82c36-56b3-4dd9-b190-069cfc3a623f-9b476a.mp4`
- Bottom gradient: `h-64` (`256px`) `bg-gradient-to-t from-background to-transparent` for a 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`, inlined data URIs) + "7,000+ people already subscribed" (`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 `.serif` (Instrument Serif italic, `font-normal`).
  - Subtitle: `text-lg`, color `hsl(var(--hero-subtitle))` — "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` containing an email input and a `bg-foreground text-background rounded-full px-8 py-3` "SUBSCRIBE" button (`whileHover scale 1.03`, `whileTap scale 0.98`).

### "Search has changed" section — `pt-52 md:pt-64 pb-6 md:pb-9`, centered
- 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 = a ~200×200 icon image centered, platform name (`font-semibold text-base`), description (`text-muted-foreground text-sm`).
  - ChatGPT → inlined `icon-chatgpt` data URI. Perplexity → inlined `icon-perplexity` data URI. Google AI → inlined `icon-google` data URI.
- Bottom tagline: "If you don't answer the questions, someone else will." (`text-muted-foreground text-sm text-center`).

### Mission section — `pt-0 pb-32 md:pb-44`, centered
- Large ~800×800 looping autoplay muted video, centered.
  - URL: `https://plugin-assets.open-design.ai/plugins/mindloop-landing/hf_20260325_132944_a0d124bb-eaa1-4082-aa30-2310efb42b4b-d0e30d.mp4`
- **Scroll-driven word-by-word reveal** (`useScroll` + `useTransform` in the port; in the seed a passive `scroll` listener that ma