How it works

A contact section that breathes. A small “GO” button sits over a faint SVG grid. Hover it and a charcoal iris opens to fill the page, revealing the words Let’s Rock in dramatic strobing typography over a starfield, while the grid around the iris bulges outward as if pulled into a lens.

The grid

Every grid intersection is a tiny damped harmonic oscillator. A wave front expands outward from the section’s center in radial-distance space, and as it passes each point it kicks it outward; a critically-damped spring then snaps it back. Independently of the wave, hovering the button tweens a wave.op scalar from 0 → 1, layering on a sustained radial bulge whose magnitude is proportional to each point’s distance from center.

The whole grid is rendered as one SVG <path> rebuilt each frame — one DOM write per tick instead of N. There is no canvas, no WebGL, no physics engine. Just v += -w * 0.001; v *= 0.9; w += v * 3; w *= 0.9 per point.

The reveal

When the iris opens, eight things animate on a staggered 0–1 second timeline: the button text scales up; the iris clip-path opens from circle(0) to circle(50%); the disc’s thick outer border collapses from disc-fill to a 1 rem ring; a second border collapses to 1 px (acting as a shutter that wipes the interior clean as it shrinks); stars settle in from scale 1.25 → 1; the “Let’s” / “Rock” letters scale from 0.5 to 1 over 1.8 s; the dots texture settles; the email link slides up from below.

The typography itself is the centerpiece. Each character is four stacked clipped slices — the main letter plus three thin slivers (0.03em / 0.06em / 0.09em wide bands). Every slice rides up by 52% of its own height, then back down, in a 2-second loop, with the slivers offset in phase from the main slice. At the midpoint, the slivers vanish via a hard opacity: 1 → 0 step. The result is a strobing, VCR-like fragmentation that’s the visual signature of the section.

What’s in the download

• index.html — section markup, GSAP from CDN, Bebas Neue + Space Grotesk from Google Fonts.
• styles.css — palette swap at the top (--color-primary / --color-secondary), full CTA styles.
• main.js — CtaSection class: radial-distance wave, damped-spring grid, sustained bulge, GSAP pulse timeline, hover/focus handlers, IntersectionObserver gating.

Drop these three files next to each other, link them from your page, and the section is live. Swap the two CSS variables at the top of styles.css to retheme.

Credits

Inspired by the contact section on wodniack.dev. Reimplemented from scratch in vanilla HTML / CSS / JS + GSAP.