Reto Ryter

Neon sign: logo, hero, or large background?

Ticket 07prototyperesolvedBlocked by: –

← Back to the map

Question

How should the TWY neon sign be used on the page? Reto wants to experiment with it as a larger background, not only as the logo. Build a throwaway page (plain HTML with the existing build from the twy-neon-sign repository is fine) showing three variants side by side or switchable: (a) logo in the top bar as today, (b) full-width hero with the sign at fit: 'hero', (c) large dimmed background behind the headline and content, with the content readable on top. React to legibility, performance on a laptop, reduced-motion fallback, and what happens on a phone. Resolve with the chosen variant and the sign's settings (fit, thickness, glow, flicker, sway) for it.

Answer

Resolved 2026-10-14. Prototype captured on branch prototype/sign-role (prototype/sign-role/, run with npm run prototype:sign-role); four variants A logo-in-top-bar, B full-width hero, C dimmed full-page background, D oversized cropped backdrop, switchable via ?variant=.

Verdict: C, with frosted glass. The sign is a fixed, full-viewport background behind everything; the hero shows it clean; as the reader scrolls, a frosted layer fades in so the content stays readable. Reto: "I kinda like C, but we'll need the frosted glass effect once we start scrolling."

Settings that won:

  • Sign: custom fit { width: 230, height: 230 × viewportHeight / viewportWidth, bleed: 0 } so the sign fits the viewport without letterboxing; glow 0.45; thickness 3.2; sway on; flicker off; canvas position: fixed; inset: 0; z-index: 0.
  • Over the sign: a light gradient (10 % → 35 % → 70 % page colour, top to bottom).
  • Frost: fixed layer between sign and content; --frost goes 0 → 1 over the first 60 % of a viewport of scroll; at 1 it is backdrop-filter: blur(22px) saturate(1.1) with a 35 % page-colour tint. Cards are translucent (rgba(18,17,26,.55)) so the glow reads through the glass.
  • No separate logo in the top bar; the blurred sign stays the brand presence while scrolling.

For the build (ticket 10 and the fog):

  • Reduced motion: single still frame plus the frost; already supported by the sign.
  • Portrait phones: the fit recomputes from the viewport aspect on load; decide whether to recompute on resize/orientation change or keep the first value (prototype keeps it).
  • Performance: a full-viewport canvas at DPR 2 plus a full-viewport backdrop blur is the costliest combination; the sign already stops rendering when nothing moves (sway off would make it static). Measure on a laptop and a mid-range phone during the build; consider maxPixelRatio: 1.5 for the background role.
  • Safari handles backdrop blur differently; verify.

← Back to the map