Loading the homepage...
Brand
Three CSS animations of the Gelball logo. Each one starts from a blank canvas and resolves to the full logo: the G, the gel splat, and the wordmark, all in position. Motion is skipped automatically if your device asks for reduced motion.
The G draws itself in, the ball flies in from the front (growing head-on into the centre) and squashes into the splat on impact, and the wordmark fades up on the shockwave.
A clean, fast, staggered fade and rise: G, then ball, then wordmark, each with a gentle ease-out overshoot.
The G rolls in from the left under a hail of small gel-blaster splats. One sticks to the G mid-roll and rides it home, two more land on the G once it stops, the hero ball lands the killing shot in the centre, then the wordmark punches in and shakes the leftover spatter loose.
These animations are built with CSS keyframes only (no JavaScript tweening and no animation libraries). Under reduced motion the finished logo is shown without motion.