Skip to content

Full Website Designs · Rave Poster

Tiefdruck Techno Night

A techno night site where type is the light show: a giant TIEF DRUCK whose letters pump like EQ meters at 132 BPM, a fan of lasers that sweeps on its own and follows the cursor, a beat-driven oscilloscope, lineup names streaming in opposite directions and ticket tiers stamped SOLD OUT. Pulses stay well under 3 flashes a second.

  • Full Site
  • Music
  • Events
  • Kinetic Type
  • Marquee
  • Cursor

The full prompt

Show the prompt that defines the layout, motion and design language
Build a "Tiefdruck Techno Night" React component.

CONCEPT: The site for a 12-hour monthly techno night in an old salt works hall. Typography is the light show; the whole page breathes at 132 BPM. Safe strobing: nothing may flash more than 3 times per second.

LAYOUT & CONTENT:
- Nav (64px, hairline): 'TIEFDRUCK', LINEUP / TIMETABLE / VENUE / HOUSE RULES, orange 'TICKETS' button.
- Hero (720px): top left '12 HOURS / 1 ROOM / NO PHOTOS' and 'FRI 20.11.2026, 22:00 TO SAT 10:00'; top right a pulsing orange dot and '132 BPM'. The headline 'TIEF' (white) over 'DRUCK' (orange) at ~196px in Syne 800, tight tracking. Bottom row: one line of copy about the room ('One wall of bass bins, no VIP, no stage, the DJ is on the floor with you.') and a white 'FINAL RELEASE, ₪180' button.
- Oscilloscope band between hairlines.
- Lineup: 'LINEUP, IN ORDER OF APPEARANCE: NOT AT ALL' and five full-width rows of names at 104px (NADJA KOROLEVA B2B OREN SAAR, HALFTONE SOCIETY LIVE MODULAR SET, DEEP SALT ALL NIGHT CLOSING, MIRI ASHKAR, ROTOR 9 LIVE).
- Split section: HOUSE RULES on off-white (four numbered rules about camera stickers, water, consent) and TICKETS on orange (four tiers, the first two stamped SOLD OUT, a black buy button).
- Footer: an outlined 'SEE YOU DOWN' at 200px streaming sideways, then three small lines.

INTERACTIONS & MOTION:
- BEAT = 60/132 s. Each headline letter animates scaleY from 1 to 0.55-0.87 and back (origin bottom), one or two beats long, offset by quarter beats, so the word pumps like an EQ.
- Strobe: a radial orange wash at the top of the hero hits once every 4 beats (about 0.55 times per second) with steps(1), never faster than 3 per second.
- Lasers: nine SVG lines from an emitter at top centre fan toward a target x; with no pointer the target swings on a sine (period ~9s), with a pointer it follows the cursor through a soft spring (40/12).
- Oscilloscope: canvas waveform whose amplitude spikes on every kick (exp decay per beat), plus an orange kick bar.
- Lineup rows are marquees in alternating directions at different speeds (30-60s); hovering a row pauses it, turns it orange and shows the set time chip.
- SOLD OUT stamps slam in (scale 1.6 to 1, rotate -14 to -6, spring 400/14) when scrolled into view; rules slide in with stagger.

DESIGN SYSTEM — Rave Poster:
- Black #0A0A0A, white #F2F0EB, grey #7A7874, hairline #262624, one hot orange #FF3D00.
- Square corners, hairlines, no shadows, no blur, no gradients except the strobe wash.
- Syne 800 for display, IBM Plex Mono for everything else.

CRAFT RULES:
- Motion: Framer Motion with spring physics (type: "spring") for anything interactive; ease-out cubic-bezier(0.23, 1, 0.32, 1) for entrances, under 300ms for UI feedback, exits faster than entrances. Animate transform, opacity, clip-path and SVG attributes only. Ambient loops pause or go static under prefers-reduced-motion via useReducedMotion() and a CSS media query.
- Copy: real, specific names, prices and times; no em-dashes, no lorem ipsum, no claims the business cannot back up. All brands are fictional.
- Icons: lucide-react where icons are needed; illustrations are inline SVG, CSS or canvas, no external images.
- Accessibility: real <button>/<a>/<label> elements, visible focus ring, keyboard operable, aria attributes where state changes, tabular numerals for times and prices. Nothing on the page may grab focus or scroll the window.

OUTPUT: one self-contained React component file (Tailwind CSS v4 utility classes, framer-motion, lucide-react), no external images, default export, ready to paste into a Next.js App Router page with "use client". Load any Google Font it needs with next/font/google.

How to use this prompt

  1. 1. CopyUse “Copy Claude Prompt” above. It includes the layout, the spring values and the design rules.
  2. 2. Paste into ClaudeAdd your own brand name, copy and colors at the top of the prompt if you like.
  3. 3. Drop it inYou get one file with React, Tailwind and Framer Motion. Install framer-motion and lucide-react.