How the myth was conjured

SYS.01: Concept

The myth, unleashed

The namesake horse, Shawel, is treated as a mythic force rather than a mascot. The whole site lives in a void of indigo and ultraviolet, cut with ember orange and acid chartreuse, a palette invented for this direction, deliberately opposite to any heritage treatment.

Type is Unbounded, an expressive ultra-wide display face, set in full uppercase against ghost-outlined counterparts, with Space Grotesk for prose and IBM Plex Mono for system tags like this one.

SYS.02: The gold-leaf hero

The namesake, wearing gold

The hero stages the brand's own campaign photograph, a black horse wearing flakes of gold leaf, as a cinematic reveal: the image emerges from black as a shimmer pass sweeps across the gold, the wordmark slams in with a gold-foil gradient, and a hairline rule draws itself under the type.

A 2D canvas layer continues the photograph's gold-dust plume with ~130 drifting, twinkling motes, and the photo, dust, and type sit on separate parallax planes that drift apart under the pointer, so the frame reads as a space, not a picture.

An earlier iteration of this hero assembled the horse from 16,000 GLSL particles sampled off a generated artwork; the brand book's photography ultimately said it better. The shader chapter lives on in the repo.

SYS.03: Motion system

Scroll as gallop

Lenis handles inertial scroll, synced into GSAP ScrollTrigger. The legend chapters skew in with oversized ghost numerals parallaxing behind them; photography clips in through polygon reveals with a violet-ember duotone applied in CSS; the creed lines de-blur and scale as they cross the viewport.

Kinetic marquee strips run in opposite directions on tilted axes, and a blend-mode ring cursor swells over anything interactive.

SYS.04: Restraint where it counts

Fast, accessible, respectful

The particle count halves on mobile and the canvas renders at capped DPR. Everything honors prefers-reduced-motion: reduced users get the original artwork as a still hero, static marquees, a native cursor, and no smooth-scroll hijacking. The 21+ age gate fronts the experience, and the footer keeps the responsible-drinking line in view.

SYS.05: Iteration log

Three passes

Pass 1 (fix & polish): shader alpha tuned against banding, mobile particle budget set, tab focus states and contrast audited, marquee duplication made screen-reader-safe.

Pass 2 (elevate): pointer repulsion and scroll-scatter added to the horse, ghost numerals and polygon photo reveals added to the legend, bottle cards given 3D pointer tilt inside ember glow fields.

Pass 3 (cohesion & wow): hero, marquees, and creed re-choreographed into one rhythm (assemble, gallop, disperse) so the whole page reads as a single ride through the myth.

Expansion pass: the site grew into a full multi-page brand platform (beers, awards, story, lifestyle, distributors, news, contact) built on the brand's real photography (the gold-medal certificate, product and merch shots, festival footage) processed through a sharp/ffmpeg pipeline and staged inside the same void-and-ember system.