feat(web): glow-pulse on primary CTAs + hero fills full first viewport
All checks were successful
Deploy to Production / deploy (push) Successful in 1m1s

Two coordinated polish moves:

1. **<PulseLink> / <PulseButton>** — new `apps/web/components/pulse.tsx`.
   Click anywhere on a wrapped link or button and a small indigo dot
   detonates from the click point, scaling 1x→80x over 650ms before
   fading to transparent. Same visual language as the hero load-in
   glow — the click effectively says "this is the brand reaching back."

   The dot lives in a `pointer-events: none` overlay, so it never
   blocks the underlying navigation. `overflow-hidden + relative` are
   added to the host so the bloom stays inside the rounded shape.
   `glow-pulse` keyframe sits in globals.css next to the existing
   `pulse-dot` / `shimmer` / `fade-in` definitions; reduced-motion
   suppresses the animation to instant-opacity-0 so the click flow
   is preserved without the bloom.

   Wired into the highest-conversion CTAs only — the user explicitly
   asked "wo's Sinn macht":
   - Hero "Start building free" + "Read the docs"
   - Marketing header Login / Dashboard button
   - Dashboard header "+ New server" pill

   Deliberately NOT applied to dashboard nav links, logout, destructive
   buttons, form internals, carousel dots — pulse on every click would
   be noise.

2. **Hero fills 100svh − nav** (`min-height: calc(100svh - 3rem)`).
   `svh` (small viewport height) instead of `vh` so the hero doesn't
   jump when the mobile address bar hides/shows. The 3rem subtracts
   the sticky marketing nav (h-12 = 48px), so the hero ends right at
   the loadscreen's natural bottom edge.

   `flex items-center` plus the inner grid's existing `md:items-center`
   keep the content vertically centred inside the tall section. The
   ParticleHero background now has cinematic-scale room and the indigo
   radial-glow + dot-mask read as the dominant background motif —
   which is the effect the user loved at load-in.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
Marco Sadjadi
2026-05-27 12:20:25 +02:00
parent 0cf9c66b6b
commit 6f8b8da151
5 changed files with 167 additions and 12 deletions

View File

@@ -168,3 +168,29 @@
transform: translateY(0);
}
}
/* Click-pulse for primary actions (see components/pulse.tsx).
Scales a small indigo dot from 1x to 80x over 650ms — on a 2px base
that's ~160px max radius, comfortably larger than any button on the
site. The translate(-50%, -50%) keeps the dot anchored to the click
point as it grows. Reduced-motion users get an instant fade-out so
the click action still proceeds without the bloom. */
@keyframes glow-pulse {
0% {
transform: translate(-50%, -50%) scale(1);
opacity: 0.85;
}
100% {
transform: translate(-50%, -50%) scale(80);
opacity: 0;
}
}
@media (prefers-reduced-motion: reduce) {
@keyframes glow-pulse {
0%,
100% {
transform: translate(-50%, -50%) scale(1);
opacity: 0;
}
}
}