How this site
was built.

Southpaw Boxing Club — build guide · plain HTML/CSS/JS · GSAP · Higgsfield imagery

01Concept

Gritty-premium fight-club energy. The whole site is art-directed like a vintage boxing bill reset with a modern grotesque: near-black rooms, one harsh light source, chalk dust, and huge ultra-condensed headlines stacked like a fight poster. Two texture cues sell the world — a living 35mm film-grain overlay on the whole page and tape stickers (mono type on an off-white strip, slightly rotated) used as annotations everywhere a poster would have a pasted-on correction.

The single most important rule: nothing floats. Every reveal snaps in hard and stops dead, like a punch landing. No soft fades, no gentle drifts.

02Palette

#0B0A09near-black ink

#14110Dpanel ink

#B1252Bbruised red

#6F1116deep bruise

#D92C33hot red (accents)

#ECE4D3canvas off-white

#DDD3BDtape

Red is used at two temperatures: #B1252B for surfaces (buttons, the ticker band, the featured pricing card) and #D92C33 only for small hot accents — the word that "hits", meta labels, stat suffixes. Body copy never sits on pure red except inside the featured card, where it switches to canvas at 75–90% opacity for contrast.

03Type

Role	Face	Treatment
Display	Big Shoulders Display 700–900	Uppercase, line-height 0.86–0.9, sizes up to `clamp(72px, 15.5vw, 250px)`. One line per beat, stacked like a fight card. Outline variant via `-webkit-text-stroke` on a transparent fill.
Labels / numbers	IBM Plex Mono 400–500	10–12px, letter-spacing 0.14–0.22em, uppercase. All tape stickers, schedule times, fight records, footer meta.
Body	Archivo 400/600	14–18px on `#C9BFA9` (dimmed canvas) so the display type keeps the volume.

POSTER TRICK — MIX FILL / OUTLINE / RED ACROSS THE THREE STACKED HERO LINES

04Imagery — art direction

All eight images were generated with Higgsfield Soul v2 (photorealistic model), then compressed with ffmpeg to ~120–250 KB JPEGs. Each frame came from a carefully art-directed brief — lighting, lens, palette, composition and mood specified shot by shot, with the same harsh single-source lighting grammar repeated across the whole set so eight generations read as one shoot — and iterated until every image landed inside the club's gritty-premium world.

THE FULL PROMPT LIBRARY IS PROPRIETARY — AVAILABLE TO CLIENTS ON REQUEST

Compression

ffmpeg -i raw.png -vf "scale=1920:-2" -q:v 4 hero-boxer.jpg   # heroes / wides
ffmpeg -i raw.png -vf "scale=1100:-2" -q:v 4 coach-ray.jpg    # portraits / details

05The percussive motion system

GSAP 3 + ScrollTrigger from CDN. One house ease — power4.out (steep in, dead stop) — and four reveal flavors, each mapped to a data-reveal attribute so the HTML stays declarative:

slide — section titles jab in from the left with a −6° skew that resolves on landing.
up — short 44px vertical throw, 0.4s, dead stop. The workhorse.
pop — scale 0.5 → 1 with back.out(2.2) overshoot. Buttons and tape stickers only.
row / card — program rows jab from the left; cards drop 70px with a ±0.8° rotation so each lands slightly imperfect, like a pasted poster.

The three signature moves

Masked headline punch-in. Each hero line lives in an overflow: clip wrapper and translates up from yPercent: 118 with a 4° skew, staggered 0.11s — a one-two-three combination. When the last line lands, an impact shake fires on the whole headline.
Impact shake, used sparingly. A 0.28s CSS keyframe (±6px decaying translate) applied by JS as a class exactly three places: hero headline landing, each stat counter finishing, and the final CTA title. Scarcity is what keeps it feeling physical.
Counters that slam. Number counters ease with power2.in — they accelerate into the final value instead of easing out of it, then shake on arrival. Backwards from every tutorial, and that's exactly why it feels like a hit.

tl.to(proxy, {
  v: target,
  ease: "power2.in",        // accelerate INTO the number — the slam
  onUpdate: () => el.textContent = Math.round(proxy.v),
  onComplete: () => impact(stat)   // ±6px decaying shake, 0.28s
});

Supporting details

Marquee ticker of class times: pure CSS — track content duplicated once in JS (clones get aria-hidden), then translateX(-50%) loops seamlessly. Pauses on hover.
Film grain: an SVG feTurbulence data-URI on a fixed body::before, stepped 4-frame jitter at 7% opacity.
No-JS / reduced-motion safety: content is only hidden after GSAP loads (a JS-added .is-armed class), and prefers-reduced-motion exits before any animation is registered — counters just print their final values.

06Layout notes

Fight-poster hero: bottom-anchored flex column over a full-bleed photo; three stacked display lines mixing solid / outline / red fills; tape stickers pinned top-right at ±4°.
Programs as fight-card rows: a 4-column grid (outline numeral · name · description · meta) with a hover state that raises an ink panel behind the row and fills the numeral red.
Schedule: a real <table> (7 columns) inside an overflow-x: auto region so mobile scrolls the grid without breaking the page.
Poster pricing: three cards, middle one on deep-bruise red with a hard offset shadow and a rotated "MOST CHOSEN" tape flag.
Overflow discipline: overflow-x: clip on html, body; the only intentionally overflowing element (ticker track) lives inside its own clipped band.

07Deploy to Netlify

Drag-and-drop: zip the southpaw-boxing folder and drop it on app.netlify.com/drop. Done — it's static.
Or with the CLI:

npm i -g netlify-cli
cd southpaw-boxing
netlify deploy --prod --dir .

No build step, no environment variables. The only external requests are Google Fonts and the two GSAP CDN scripts; everything else (images, CSS, JS) is local and relative-pathed, so the site works from any subdirectory.

How this sitewas built.