A night match, told in one scroll.
ACS Nedi Junior is a football club for children aged 4 to 12 in Bucureștii Noi and Corbeanca, Romania. Its redesigned site keeps the club’s own Romanian copy, crest and sponsors, and stages them as a night match under floodlights, broken up by white daylight pages that slide over it like sheets.
One WebGL stage of about 20,000 particles carries the story from chapter to chapter: a ball, a waving flag, dust, a star and two pitches. For the age groups a real-time 3D stadium takes over. The camera dives in from straight overhead to grass level and dribbles up the pitch while the age groups wipe in like broadcast graphics. It ends on a scripted goal: a wind-up, a curling shot and the camera riding the ball into the net, which balloons and ripples, then confetti cannons, spark fountains, fireworks and GOL! running round the LED ring.
The club’s photos run along a curved WebGL strip that drags with inertia and opens into a lightbox. Reduced motion gets a calmer version, and browsers without WebGL get the full static page, with a real image grid in place of the strip.
Design System
Color
Typography
Tech Stack
Key Features
A Ball You Can Kick
A cel-shaded 3D match ball with procedural wear and the club crest printed on it. The pointer kicks it, and between chapters it dissolves into particles.
One Stage, Many Shapes
About 20,000 particles morph, each on its own stagger, from ball to flag to dust, star and pitches. Every shape is placed from a slot in the layout, so the WebGL and the page never drift apart.
A Stadium Built From Scroll
A superellipse bowl, a crowd of points doing the Mexican wave with phone flashes, an LED ring, floodlights with light cones, grass blades that wrap around the camera and chalk lines that stay crisp at grass level.
The Goal
The net is a diamond-mesh shader on a spring-driven membrane tied to the frame: the ball throws it back and ripples run out from the impact. The goal moments run in real seconds, so they play out even if the scroll stops.
A Celebration in Club Colours
Confetti cannons, spark fountains and looping fireworks in gold and white, drawn entirely in shaders. The stadium keeps to the crest’s dark blue, gold and white throughout.
Pages Like Sheets
White sections slide on and off the night stadium like sheets of paper, each clipped to its own section, while the theme colours ease between night and day through CSS @property tokens.
A Photo Strip on a Curve
The gallery is a WebGL strip on a bent cylinder that drags with inertia. Ray-cylinder picking opens a photo in the lightbox, and every photo also has a keyboard button.
Pitch-Side Sponsors
Sponsor logos are advertising boards that flip up from the touchline with a floodlight glint.
Two Locations, One Pass
The club’s two grounds are two particle pitches, with a ball passed between them along a gold arc above the maps.
Works Without WebGL
Reduced motion support, visible focus, a keyboard-reachable gallery, and a complete static page for devices without WebGL.
Page Architecture
Screenshots
Every scene follows the scroll, so these are frames from one pass down the page.
