# Loopline: Product reels that stop the scroll

Create a responsive React + TypeScript + Vite + Tailwind CSS hero. Use small components for the frame, top bar, badge, headline, stickers and connectors, the reel carousel, the call to action and the phone layout. Put media URLs in src/lib/assets.ts and the carousel geometry and loop in one hook (useConvexReel). Do not output a giant HTML file, an iframe, or a screenshot pretending to be the website.

## Design direction
A one-screen night hero for a fictional marketplace of short-form product creators. Deep night-blue field with a faint dot grid that fades toward the edges and a cobalt glow behind the headline. A convex reel of ten tall clip cards bows away from the viewer: the centre cards stand tallest and the row shrinks and tilts at both ends, drifting right to left and draggable with momentum. Tilted paper, cobalt and peach stickers with dotted cobalt connectors replace any handwriting.

Palette: night #0d1120, night-2 #151a2e, paper #ece8de, dim #9aa0b4, cobalt #4a63ff (hover #7187ff), peach #ffb497.
Type: Familjen Grotesk 500 to 700 (display), Onest 400 to 600 (UI).
Font stylesheet: https://fonts.googleapis.com/css2?family=Familjen+Grotesk:wght@500;600;700&family=Onest:wght@400;500;600&display=swap

## Layout (1440 by 1080 frame, contained and centred with u = min(vw/1440, vh/1080))
- Top bar: two-ring logo (cobalt and peach outline circles) with "Loopline"; nav Creators, Brands, Pricing, Showreel, FAQ; outline "Log in" and cobalt "Start free" pills.
- Badge at top 112, centred: peach-tinted pill with a solid "4.8k" chip and "vetted creators on the roster".
- Headline at top 172: "Product reels that" / "stop the scroll" (second line peach), Familjen 700 92/96, tracking -0.04em.
- Subline at top 392, three centred lines in dim Onest 20/31.
- Stickers: "48h turnaround" (paper, -8 deg, left), "Ships in 9:16" (cobalt, +9 deg, right), "From $0 to start" (peach, -5 deg, beside the CTA). Two dotted connectors curve from the top stickers down to the reel and draw themselves in.
- Reel: cards centred near y 690. CTA "Book a reel" (cobalt pill 178 by 60) inside a slowly turning dotted ellipse at (620, 896).

## Convex reel geometry
Offset t from centre on a 204 pitch, looping across 10 cards. x = 720 + t(1 - 0.06(t/706)^2); d = |x-720|/706; width = 188 - 40d^2; each vertical edge height = 330 - 96q^2.2 (q is that edge's own distance); vertical centre = 690 + 18d^2. Draw each card as a rounded quad (clip-path path, 18 corner) recomputed every frame, with a frosted round play icon bottom-left. Auto-drift 52 units per second from a long Web Animations clock; drag follows 1:1, then coasts and loses about 95 percent of its speed per second.

## Media
Asset map (JSON): https://scrollhaus.ai/build-assets/loopline.json
Visual demo: https://video.gumlet.io/6a7e9e0f2621db881577453e/6ad9bcb556874b78b5fb5045/main.mp4
Thumbnail: https://media.scrollhaus.ai/thumbs/loopline.840e21dc5568.webp
- Tile grid poster (5 by 2 tiles of 384 by 540): https://d2ol7oe51mr4n9.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/b7ebb74a-8c8a-4f7e-8f80-55e2d74ecd05.webp
- Tile grid loop (1280 by 720, 5 s, muted): https://d2ol7oe51mr4n9.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/04fd3d5f-99d7-476e-98a4-46c08518ffb3.mp4
Each card shows its own tile, cover-fitted: inside the clipped card place the video and poster at 5x tile width by 2x tile height, offset to that tile, with tile height = max(card height, card width / 0.7111). All ten cards share one source and stay on the same timestamp; fade each in when ready.

## Motion
One-time Web Animations entrance: nav drops, badge pops, each headline line rises out of a blur, subline, reel rises, CTA scales in, connectors draw, stickers settle. Reduced motion: no entrance, no drift, posters only.

## Phones (820 px and below)
Logo plus "Start free"; badge, headline (clamp 38 to 56 px) and two-line subline stacked and centred; the same convex reel on a 640-unit stage scaled to screen width in a 250 px band; "Book a reel" and the peach sticker below. No horizontal overflow at 390 px.

Run the production build and check the drift, the fling, the per-card tiles and the phone band.