Meniscus

Build a fullscreen preloader called Meniscus.

Centre a circle about 58% of the stage's smaller dimension on warm off-white, with a faint one-pixel border and overflow hidden. Inside it place a full-height body of water in a saturated accent colour, and animate its translateY between 86% and 12% over 5.4s on ease-in-out, so the level rises and falls rather than filling once.

Along the top edge of that body put two wave bands. Each is an SVG, twice the container width, with a preserveAspectRatio of none and a path made of eight repeating quadratic humps across a 200-unit viewBox. Animate each one's translateX from 0 to -50%: because the path holds two full cycles of the same wave, travelling exactly half the element's width lands on an identical shape and the loop is invisible. Run the back wave at 4.3s reversed and at 45% opacity, the front one at 2.8s forward and full strength, offset a pixel or two lower.

Centre a small uppercase monospace label over the whole circle with 0.35em letter-spacing, and set it in difference blend mode so it stays legible against both the empty circle and the filled one.

Loop forever. Under prefers-reduced-motion, hold the water near full.