"use client"; /** * SIGNAL — electronic music festival, Essen DE, 12–14 Sep 2026 * Converted from the curation HTML/CSS source * (Marketing/assets/sections/v9-variety-proof/signal/signal.html) * into React + Tailwind v4 + Motion, per 14_library_conversion_plan.md §4.1. * * Archetype: brutalist-swiss-poster. Type personality: grotesque+mono. Mood: * raw-loud-poster. Dark + acid-yellow, hard 1px rules everywhere, zero * border-radius, zero soft shadows — the giant display type IS the design; * every clamp()/letter-spacing/line-height value below is ported verbatim * from the source's :root tokens and per-rule declarations. * * Design tokens (mirrors the source's :root custom properties — the strict, * mechanically-derived version lives in the sibling manifest.json's * `designTokens` field; this component uses literal Tailwind arbitrary-value * utilities everywhere, deliberately, so it renders correctly standalone — * e.g. side-by-side with other designs in a gallery — without depending on * any host app's `@theme` registration): * * --black: #0a0a0a --paper: #f0ece4 --acid: #e6ff2e * --display: 'Archivo Black', sans-serif * --mono: 'IBM Plex Mono', monospace * --rule: 1px solid currentColor (ported as border-* + border-current * throughout — the border color is always the element's own * computed text color, exactly like the source's CSS variable) * --col: clamp(16px, 4vw, 24px) (the shared horizontal gutter) * * Font loading: Archivo Black + IBM Plex Mono (Google Fonts, OFL) are * expected to be loaded by the host app (next/font/google or tags in * the document head) — this component does not inject tags itself. * * Motion (5 effects total, all reduced-motion-aware): * 1. Lineup-act staggered reveal — opacity+translateY(12px)->0, 220ms, * cubic-bezier(.16,1,.3,1), stagger 28ms/item capped at 400ms, fires * once per act via viewport-intersection (threshold 0.1). * 2. Section block reveal (schedule/tickets/info grids) — opacity+ * translateY(16px)->0, 250ms, same easing, threshold 0.08, fires once * for the whole grid (not per-child — matches the source, where only * lineup acts get individual staggered reveals). * 3. Lineup-act hover — an acid-fill wipe (translateX -100%->0, 150ms) * ported as a plain Tailwind CSS transition (matches the source's own * CSS-only ::before mechanism byte-for-byte; no JS-driven motion value * needed for a two-state hover wipe). * 4. Nav / ticket-CTA / footer-social hover — background+color transitions, * 120–150ms, plain Tailwind CSS transitions (paint-only, non-layout). * 5. prefers-reduced-motion: every reveal above renders in its final state * immediately (useReducedMotion() short-circuits the motion props to * an empty object, matching the source's * `@media (prefers-reduced-motion: reduce)` block, which forces * opacity:1/transform:none and collapses all transition durations). * * Note (checker-pass a11y fix, documented in _verification/parity-report.md): * the source declares `.lineup-act-focus-trap:focus-visible{...}` but no * element in the source markup carries that class — it is a dead selector, * so the source's actual rendered truth is that the focusable (tabIndex=0) * lineup-act elements have NO visible focus indicator. DESIGN_QUALITY_RULES.md * requires focus-visible on every interactive element, so this port adds a * real focus-visible outline to each lineup-act (matching the dead rule's * evident intent: 2px solid acid, -2px offset). This is invisible in any * non-focused screenshot, so it does not affect the visual-parity gate. */ import * as React from "react"; import { motion, useReducedMotion } from "motion/react"; /* ──────────────────────────────────────────────────────────────────────── Shared tokens / helpers ──────────────────────────────────────────────────────────────────────── */ const EASE_SNAP: [number, number, number, number] = [0.16, 1, 0.3, 1]; const FONT_DISPLAY = "[font-family:Archivo_Black,sans-serif]"; const FONT_MONO = "[font-family:IBM_Plex_Mono,monospace]"; const COL_X = "px-[clamp(16px,4vw,24px)]"; const CONTAINER = `mx-auto max-w-[1400px] ${COL_X}`; /** `.lineup-tier-label` sub-tier inline override: `border-top:1px solid rgba(230,255,46,0.3)` */ const RULE_ACID = "rgba(230,255,46,0.3)"; /** `.schedule-day-header` background: `rgba(230,255,46,0.06)` */ const ACID_06 = "rgba(230,255,46,0.06)"; /** `.section-label` base — mono, 10px, 700, tracking .18em, uppercase, opacity .45 */ const SECTION_LABEL_BASE = `${FONT_MONO} text-[10px] font-bold uppercase tracking-[0.18em] opacity-[0.45]`; /** `.section-title` — display font, clamp(28,5vw,56), tracking -.03em, leading 1, uppercase */ const SECTION_TITLE = `${FONT_DISPLAY} text-[clamp(28px,5vw,56px)] uppercase tracking-[-0.03em] leading-none`; /** Scroll-reveal used only by lineup acts — staggered, once, threshold 0.1. */ function useLineupReveal(index: number) { const shouldReduceMotion = useReducedMotion(); if (shouldReduceMotion) return {}; const delaySeconds = Math.min(index * 0.028, 0.4); return { initial: { opacity: 0, y: 12 }, whileInView: { opacity: 1, y: 0 }, viewport: { once: true, amount: 0.1 as const, margin: "0px 0px -40px 0px" }, transition: { duration: 0.22, ease: EASE_SNAP, delay: delaySeconds }, }; } /** Scroll-reveal used by the schedule/tickets/info grids — once, whole-block, threshold 0.08. */ function useBlockReveal() { const shouldReduceMotion = useReducedMotion(); if (shouldReduceMotion) return {}; return { initial: { opacity: 0, y: 16 }, whileInView: { opacity: 1, y: 0 }, viewport: { once: true, amount: 0.08 as const, margin: "0px 0px -32px 0px" }, transition: { duration: 0.25, ease: EASE_SNAP }, }; } /* ──────────────────────────────────────────────────────────────────────── Skip link ──────────────────────────────────────────────────────────────────────── */ function SkipLink() { return ( Skip to content ); } /* ──────────────────────────────────────────────────────────────────────── Header ──────────────────────────────────────────────────────────────────────── */ const NAV_LINKS: { href: string; label: string; tickets: boolean }[] = [ { href: "#lineup", label: "Lineup", tickets: false }, { href: "#schedule", label: "Schedule", tickets: false }, { href: "#tickets", label: "Tickets", tickets: true }, { href: "#info", label: "Info", tickets: false }, ]; function SiteHeader() { const navLinkBase = `block border-l border-current px-3.5 py-1.5 ${FONT_MONO} text-[11px] font-bold uppercase tracking-[0.12em] text-[#0a0a0a] no-underline transition-[background-color,color] duration-[120ms] [transition-timing-function:cubic-bezier(.16,1,.3,1)] hover:bg-[#0a0a0a] hover:text-[#f0ece4]`; const navFocus = "focus-visible:outline focus-visible:outline-2 focus-visible:[outline-offset:-2px] focus-visible:outline-[#e6ff2e] focus-visible:bg-[#0a0a0a] focus-visible:text-[#f0ece4]"; const ticketsLinkClass = `block border-l border-current px-3.5 py-1.5 ${FONT_MONO} text-[11px] font-bold uppercase tracking-[0.12em] no-underline bg-[#0a0a0a] text-[#e6ff2e] transition-[background-color,color] duration-[120ms] [transition-timing-function:cubic-bezier(.16,1,.3,1)] hover:bg-[#e6ff2e] hover:text-[#0a0a0a] focus-visible:outline focus-visible:outline-2 focus-visible:[outline-offset:-2px] focus-visible:outline-[#e6ff2e] focus-visible:bg-[#0a0a0a] focus-visible:text-[#e6ff2e]`; return ( ); } /* ──────────────────────────────────────────────────────────────────────── Hero ──────────────────────────────────────────────────────────────────────── */ const HERO_META = [ { label: "Dates", value: "12–14 SEP 2026" }, { label: "Location", value: "ESSEN, DE" }, { label: "Venue", value: "ZOLLVEREIN" }, { label: "Capacity", value: "8 000 / DAY" }, { label: "Edition", value: "XII" }, ] as const; function Hero() { return (

SIGNAL

Three nights. Seven stages. No excuses.

); } /* ──────────────────────────────────────────────────────────────────────── Lineup ──────────────────────────────────────────────────────────────────────── */ type Act = { name: string; origin: string; size: "head" | "sub" | "supp" }; const HEADLINERS: Act[] = [ { name: "Surgeon", origin: "Walsall, UK", size: "head" }, { name: "Paula Temple", origin: "London, UK", size: "head" }, { name: "DJ Stingray 313", origin: "Detroit, US", size: "head" }, { name: "DJ Nobu", origin: "Tokyo, JP", size: "head" }, ]; const SUB_HEADLINERS: Act[] = [ { name: "Hadone", origin: "Lyon, FR", size: "sub" }, { name: "Phase Fatale", origin: "Berlin, DE", size: "sub" }, { name: "Rebekah", origin: "Birmingham, UK", size: "sub" }, { name: "Headless Horseman", origin: "Ghent, BE", size: "sub" }, { name: "Exos", origin: "Reykjavík, IS", size: "sub" }, { name: "Acronym", origin: "Berlin, DE", size: "sub" }, ]; const SUPPORT: Act[] = [ { name: "Morah", origin: "Amsterdam, NL", size: "supp" }, { name: "Varg", origin: "Stockholm, SE", size: "supp" }, { name: "Alignment", origin: "London, UK", size: "supp" }, { name: "Truss", origin: "Birmingham, UK", size: "supp" }, { name: "Dax J", origin: "London, UK", size: "supp" }, { name: "Setaoc Mass", origin: "Berlin, DE", size: "supp" }, { name: "Svreca", origin: "Madrid, ES", size: "supp" }, ]; const SELECTORS: Act[] = [ { name: "Wata Igarashi", origin: "Tokyo, JP", size: "supp" }, { name: "Kush Jones", origin: "New York, US", size: "supp" }, { name: "Saoirse", origin: "Dublin, IE", size: "supp" }, { name: "Nii Tetteh Tetteh", origin: "Accra, GH", size: "supp" }, { name: "Lena Willikens", origin: "Düsseldorf, DE", size: "supp" }, ]; const ACT_SIZE_CLASS: Record = { head: "text-[clamp(22px,3.5vw,40px)] leading-[1.05]", sub: "text-[clamp(14px,2vw,22px)] leading-[1.1]", supp: "text-[clamp(11px,1.4vw,16px)] leading-[1.2]", }; function LineupAct({ act, index }: { act: Act; index: number }) { const reveal = useLineupReveal(index); return ( ); } function TierLabel({ children, topRule = false }: { children: React.ReactNode; topRule?: boolean }) { return (

{children}

); } function Lineup() { // Global reveal index follows document order: left column (headliners then // sub-headliners) fully first, then right column (support then selectors) — // matching the source JS's `querySelectorAll('.lineup-act.reveal-ready')` // (returns elements in DOM order, not per-column). let globalIndex = 0; return (

01 /

Lineup

110 Artists

Headliners {HEADLINERS.map((act) => { const idx = globalIndex++; return ; })} Sub-Headliners {SUB_HEADLINERS.map((act) => { const idx = globalIndex++; return ; })}

Support {SUPPORT.map((act) => { const idx = globalIndex++; return ; })} Selectors {SELECTORS.map((act) => { const idx = globalIndex++; return ; })}

); } /* ──────────────────────────────────────────────────────────────────────── Schedule ──────────────────────────────────────────────────────────────────────── */ type ScheduleSet = { time: string; artist: string; stage: string }; type ScheduleDay = { name: string; date: string; sets: ScheduleSet[] }; const SCHEDULE_DAYS: ScheduleDay[] = [ { name: "Friday", date: "12 September 2026", sets: [ { time: "20:00", artist: "Lena Willikens", stage: "Stage A" }, { time: "21:30", artist: "Wata Igarashi", stage: "Stage B" }, { time: "22:00", artist: "Exos", stage: "Stage A" }, { time: "23:00", artist: "Alignment", stage: "Stage C" }, { time: "00:00", artist: "Rebekah", stage: "Stage A" }, { time: "01:30", artist: "Hadone", stage: "Stage A" }, { time: "03:00", artist: "DJ Nobu", stage: "Stage A" }, { time: "05:00", artist: "Varg (Live)", stage: "Stage D" }, { time: "07:00", artist: "Morah", stage: "Stage B" }, ], }, { name: "Saturday", date: "13 September 2026", sets: [ { time: "18:00", artist: "Kush Jones", stage: "Stage C" }, { time: "19:00", artist: "Saoirse", stage: "Stage B" }, { time: "21:00", artist: "Svreca", stage: "Stage A" }, { time: "22:00", artist: "Nii Tetteh Tetteh", stage: "Stage C" }, { time: "23:00", artist: "Truss (Live)", stage: "Stage D" }, { time: "00:00", artist: "Acronym", stage: "Stage A" }, { time: "01:30", artist: "Phase Fatale", stage: "Stage A" }, { time: "03:00", artist: "Paula Temple (Live)", stage: "Stage A" }, { time: "05:00", artist: "Dax J", stage: "Stage B" }, { time: "07:00", artist: "Setaoc Mass", stage: "Stage A" }, ], }, { name: "Sunday", date: "14 September 2026", sets: [ { time: "18:00", artist: "Nii Tetteh Tetteh", stage: "Stage C" }, { time: "20:00", artist: "Headless Horseman", stage: "Stage D" }, { time: "21:00", artist: "Morah", stage: "Stage B" }, { time: "22:00", artist: "Alignment", stage: "Stage A" }, { time: "23:00", artist: "DJ Stingray 313", stage: "Stage A" }, { time: "01:00", artist: "Surgeon (Live)", stage: "Stage A" }, { time: "03:00", artist: "Phase Fatale", stage: "Stage B" }, { time: "05:00", artist: "Hadone", stage: "Stage A" }, { time: "07:00", artist: "Lena Willikens", stage: "Stage C" }, ], }, ]; function Schedule() { const blockReveal = useBlockReveal(); return (

02 /

Schedule

All times CET

{SCHEDULE_DAYS.map((day, dayIdx) => (

0 ? "border-l border-l-[rgba(240,236,228,0.15)] max-[900px]:border-l-0 max-[900px]:border-t max-[900px]:border-t-[rgba(240,236,228,0.15)]" : "" } >

{day.name}

{day.date}

{day.sets.map((set) => (

{set.time} {set.artist} {set.stage}

))}

); } /* ──────────────────────────────────────────────────────────────────────── Tickets ──────────────────────────────────────────────────────────────────────── */ type TicketTierData = { tag: string; name: string; period: string; price: string; includes: string[]; cta: string; featured?: boolean; }; const TICKET_TIERS: TicketTierData[] = [ { tag: "Day Pass", name: "Single Day", period: "One Day of Choice", price: "45", includes: [ "Access to all 7 stages (chosen day)", "Arrival from 16:00, no re-entry", "Digital programme + maps", "Bag storage included", ], cta: "Buy Single Day", }, { tag: "Most Popular", name: "Weekend", period: "Fri 12 — Sun 14 Sep", price: "110", includes: [ "3-day access, all 7 stages", "Re-entry each day", "Digital programme + maps", "Bag storage all weekend", "Priority queue lanes", ], cta: "Buy Weekend Pass", featured: true, }, { tag: "VIP", name: "Access All Areas", period: "Fri 12 — Sun 14 Sep", price: "210", includes: [ "3-day access, all 7 stages", "Backstage artist lounge entry", "Dedicated VIP bar & cloakroom", "Signal XII printed poster (signed)", "Priority queue + early entry 15:00", "Post-festival archive mix download", ], cta: "Buy VIP Pass", }, ]; function TicketTier({ tier }: { tier: TicketTierData }) { const featured = !!tier.featured; return (

{tier.tag}

{tier.name}

{tier.period}

^€ {tier.price}

{tier.cta}

); } function Tickets() { const blockReveal = useBlockReveal(); return (

03 /

Tickets

Early bird closes 01 Aug 2026

{TICKET_TIERS.map((tier) => ( ))}

); } /* ──────────────────────────────────────────────────────────────────────── Info ──────────────────────────────────────────────────────────────────────── */ type InfoItem = { key: string; value: string }; type InfoCol = { title: string; items: InfoItem[] }; const INFO_COLS: InfoCol[] = [ { title: "Venue", items: [ { key: "Site", value: "Zeche Zollverein, Essen" }, { key: "Address", value: "Gelsenkirchener Str. 181, 45309 Essen" }, { key: "Stages", value: "7 indoor/outdoor" }, { key: "Capacity", value: "8 000 per day" }, { key: "Cloakroom", value: "€2 / item / day" }, ], }, { title: "Access & Age", items: [ { key: "Minimum age", value: "18+ (ID required at entry)" }, { key: "Gates open", value: "16:00 daily (VIP 15:00)" }, { key: "Last entry", value: "02:00 each night" }, { key: "Re-entry", value: "Weekend pass only" }, { key: "Accessibility", value: "Wheelchair accessible, quiet room available" }, ], }, { title: "Travel", items: [ { key: "Train", value: "Essen Hbf → tram 107 (12 min)" }, { key: "Car parking", value: "P1 Zollverein, €8 / day" }, { key: "Nearest airport", value: "Düsseldorf (DUS) 28 km" }, { key: "Bike", value: "Free guarded cycle park on site" }, { key: "Shuttle", value: "Essen Hbf↔Site every 30 min from 19:00" }, ], }, { title: "Rules & Safety", items: [ { key: "Cameras", value: "No pro cameras / SLR. Phone OK." }, { key: "Bags", value: "Max 40×30×20 cm backpack" }, { key: "Safer spaces", value: "Signal team on-site 24/7" }, { key: "First aid", value: "Medical station at Gates A + C" }, { key: "Contact", value: "info@signalfestival.de" }, ], }, ]; /** Per-index border classes replicate the source's nth-child cascade exactly * (see parity-report.md §responsive borders): the 4-col desktop grid, the * ≤900px 2-col grid, and the ≤600px 1-col grid each have a DIFFERENT, * non-uniform border pattern (not simply "all but last"). */ const INFO_COL_BORDER: string[] = [ // Venue (col 1): border-r always (until 600, forced off); border-b only ≤900 "border-r border-current max-[600px]:border-r-0 max-[900px]:border-b max-[900px]:border-b-current", // Access & Age (col 2): same as col 1 "border-r border-current max-[600px]:border-r-0 max-[900px]:border-b max-[900px]:border-b-current", // Travel (col 3): border-r removed at <=900 (incl 600); border-b added only at <=600 "border-r border-current max-[900px]:border-r-0 max-[600px]:border-b max-[600px]:border-b-current", // Rules & Safety (col 4, last): never border-r, never border-b at any tier "", ]; function Info() { const blockReveal = useBlockReveal(); return (

04 /

Practical Info

{INFO_COLS.map((col, i) => (

{col.title}

{item.key} {item.value}

))}

); } /* ──────────────────────────────────────────────────────────────────────── Footer ──────────────────────────────────────────────────────────────────────── */ const SOCIALS = [ { label: "IG", ariaLabel: "Instagram" }, { label: "RA", ariaLabel: "Resident Advisor" }, { label: "SC", ariaLabel: "Soundcloud" }, { label: "NL", ariaLabel: "Newsletter signup" }, ] as const; function FooterSection() { return ( <>

); } /* ──────────────────────────────────────────────────────────────────────── Root ──────────────────────────────────────────────────────────────────────── */ export function Signal() { return (

); } export default Signal;

More from the library

Northlight Pictures

Verdance Conservatory

Aerlume