melune

A one-page landing for a fictional sleep-tracking app, "Melune — Good nights. Better days.", built around a scroll journey seven screens long that stays pinned while one full-screen WebGL shader tells the story. "close your eyes" un-blurs on black; as you scroll, two bowed pink eyelids close in from the top and bottom, and each line of text blurs, swells and takes the eyelids' colour where they touch it. The lids open onto a moving hero gradient of red, pink and gold with a soft 3D pillow, ray-marched in the shader, that turns towards the cursor, a pulsing dotted matrix that lights up around the pointer, and the name "melune" lit by a horizontal spotlight that casts a fan of light outward from the letters. Scrolling on, the gradient folds into a glowing crown that gathers into a small doorway of light, the doorway's foot closes, and an S-shaped river of light (an AI-painted image, rippled in the shader) flows out of it while "your night, brought to light." fades up in difference blend between two short side notes. Then a white section scrolls up with five dotted rhythm rings in a lilac-to-gold gradient, "a little insight. a better night." and four features in a 2 × 2 grid, and lifts away to uncover a black footer with a full-width gradient wordmark, crisp at the top and softening towards the baseline. Includes wheel inertia on the real page scroll, a skip link, a phone layout, reduced motion (no ambient shader time, no scroll easing) and a no-WebGL fallback gradient.