PresetHaus
← All presets

Burger joint · Dark

Smash

A black-and-griddle-red counter poster, where a heavy grotesque collides with a cursive blackletter and the typography literally smashes the shop's name with sparks.

Palette

  • --bg#000000

    main background

  • --red#EE1D10

    accent: blackletter, highlighted prices, full red impact screen, FAQ borders

  • --red-deep#3A110F

    duotone of the photos (reddish shadows) and darkened state

  • --text#FFFFFF

    grotesque uppercase titles

  • --text-2#8A8A8A

    "faded" text of the manifesto and ghost titles

  • --mono#B5B5B5

    mono metadata microtext

  • --line#2A2A2A

    menu and footer dividers

  • --spark#FFB347

    canvas sparks

Typography

  • Display 1: condensed/wide neo grotesque, black weight (800–900), UPPERCASE, tracking -0.02em, line-height 0.88, clamp(64px, 11vw, 180px) — suggestions: Archivo (900) / Anton for narrower versions.
  • Display 2: fat ornamental display serif (drop terminals and swashes, art nouveau/psychedelic air — not pure blackletter), mixed case, always in red, used as the "second voice" of each title — suggestions: Sansita Swashed 900 / Ultra.
  • Body: mono 11–12px, uppercase, tracking 0.08em, for metadata and short paragraphs — suggestions: JetBrains Mono / Space Mono.
  • Treatments: each title = white grotesque line + red blackletter line below; manifesto with the first letter of each line in white forming a vertical word and the rest in gray; repeated asterisks as ornament; giant gray wordmark cropped in the footer.

Sections

  1. Impact hero (pin) — black screen with the shop's name in enormous red blackletter and, overlaid, a white grotesque title on two/three lines; B&W cut-out photo of the griddle pasted beside the last line; rotating circular seal in the bottom-right corner.
  2. Smash — the grotesque word comes down on the blackletter name, which flattens; the background turns red for a moment with sparks and a centered mono "temperature / timer" line.
  3. Red manifesto — red background, black grotesque title + black blackletter, mono paragraph, dark pill button; square B&W photos scattered in the corners.
  4. Black manifesto — list of negations in uppercase, each line revealed from gray to white; on the right, an engraving-style illustration of a burning spatula.
  5. Menu — double title; strip of red/black duotone photos; 6-column grid of items with mono name, large price and tiny mono ingredients; special price in red.
  6. Team — giant gray grotesque title; red duotone portraits with the first name in grotesque + surname in white blackletter, overlaid on the photo; mono captions.
  7. FAQ — "giant" red title with asterisks; accordion of rows with a 1px red border, mono number, red grotesque question, "+" icon.
  8. CTA + footer — large question with the name in blackletter, engraving illustration in the background, pill buttons, 4 mono columns (order, address, navigation, socials) and a giant gray blackletter wordmark cropped at the bottom.

Motion and interaction

  • SMASH impact: scroll scrub with pin (GSAP ScrollTrigger, ~150% height) → grotesque word comes down from above (y -120% → 0), the blackletter name gets scaleY 1 → 0.35 and scaleX 1 → 1.15 with its origin at the base; on contact, background flash to red (0→1→0 in ~0.2 of the progress) and a burst of sparks on a canvas.
  • Sparks: 2D canvas → 60–90 orange/red particles with radial velocity, gravity and fade over ~900ms, fired at the impact frame (onEnter of the marker).
  • Lighting-up manifesto: scroll scrub → each line goes from #8A8A8A to #FFFFFF in sequence, like karaoke.
  • Photo duotone: CSS/canvas → photos in black and red via mix-blend-mode or an SVG feColorMatrix filter; slight parallax (yPercent -10) on scroll.
  • Rotating seal: CSS → circular text rotating 360° in 12 s linear infinite.
  • Smooth scrolling: Lenis (lerp 0.1) synced to ScrollTrigger.
  • Accordion: click → open item gets a red background, black text, "+" becomes "—", height animated over 350ms.
  • Ghost titles: enter in gray at 50% opacity that rises 40px before turning white.

Components

  • Double title: white uppercase grotesque + red blackletter line immediately below, tight line-height.
  • Pill button: #1A1A1A or black background, 1px red border, red dot on the left, 10px uppercase mono text.
  • Menu item: 9px mono name, 24px grotesque price (red on the house item), 8px mono ingredients, #2A2A2A vertical divider.
  • Duotone portrait: red/black photo in 4:3 ratio, name overlaid in two fonts.
  • FAQ row: 1px red border, mono number, red grotesque question, short mono answer beside it, thin "+" on the right.
  • Circular seal: text on an 80px circle with a central icon.
  • B&W cut-out: grainy high-contrast photo, no border, pasted next to the text.
Smash · Burger joint · PresetHaus