Basslane. Built from one prompt.

Build a one-screen festival announcement page for "BASSLANE 2027" using React, TypeScript, Vite, Tailwind CSS. The background is a full-width CSS equalizer — 28 animated bars — no audio, no images.

FONTS: "Anton" and "Inter Tight" (400, 600) from Google Fonts; utilities `.font-anton` and `.font-tight`. Page `bg-[#0d0511]`, accent `#ff3d81`, secondary `#7c3aed`.

EQUALIZER (absolute inset-x-0 bottom-0 z-0, h-[52vh], flex items-end gap-[6px] px-4, pointer-events-none): exactly 28 bars, each `flex-1 rounded-t-md` with `background: linear-gradient(180deg, #ff3d81, #7c3aed)` and `opacity: 0.55`. Every bar animates its height between 8% and 100% using ONE shared keyframe `@keyframes eq { 0%, 100% { height: 12%; } 50% { height: var(--peak); } }` — per bar, set inline `--peak` to a value from this deterministic formula: `peak = 30 + ((i * 37) % 65)` percent, `animation: eq ${1.1 + (i % 5) * 0.18}s ease-in-out ${i * 0.07}s infinite`.

MASTHEAD (relative z-10, pt-24 sm:pt-28, text-center, px-4):
- "BASSLANE" in `font-anton text-[clamp(4rem,17vw,15rem)] leading-[0.85] tracking-[0.01em] text-white` with `-webkit-text-stroke: 2px #ff3d81` on a duplicated ghost copy positioned 6px down-right behind it (absolute, `text-transparent z-[-1] select-none`)
- Under it: "TWO NIGHTS — ONE SUBWOOFER THE SIZE OF A HOUSE" in `font-tight text-[12px] sm:text-sm tracking-[0.4em] uppercase text-white/70 mt-4`

DETAILS ROW (relative z-10, mt-10, flex flex-col sm:flex-row justify-center items-center gap-3 sm:gap-8, font-tight `text-[13px] tracking-[0.25em] uppercase`):
- "JUL 23 + 24" in a pill `border border-white/25 rounded-full px-5 py-2 text-white`
- "DOCKYARD FIELDS, ROTTERDAM" same pill style
- "FROM €89" in a filled pill `bg-[#ff3d81] text-[#0d0511] font-semibold`

LINEUP TICKER (relative z-10, mt-12, overflow-hidden, border-y border-white/15 py-3): marquee of "ULTRAVIOLENCE — GLASS MAMMOTH — DJ PAPERCUT — NEON CREEK — THE 808 CHOIR — SOFT STATIC — " duplicated, `font-tight text-sm tracking-[0.3em] uppercase text-white/80 whitespace-nowrap`, `animation: marquee 22s linear infinite` with `@keyframes marquee { to { transform: translateX(-50%); } }`.

CTA (relative z-10, text-center mt-10): "GET TICKETS" `font-anton text-lg tracking-[0.1em] bg-white text-[#0d0511] px-12 py-4 rounded-sm hover:bg-[#ff3d81] hover:text-white transition-colors duration-200`. The masthead slams in at load: `@keyframes slam { from { opacity: 0; transform: scale(1.4); } to { opacity: 1; transform: scale(1); } }` 0.4s cubic-bezier(0.34,1.56,0.64,1); pills fade up after 0.5s. Single App.tsx + src/styles.css.

musicequalizerloud