Prompt:
Build a standalone HTML page called "Bloom" for a fictional "Halcyon Colour Lab", gradient study Vol. 10. Concept: a morphing CSS mesh gradient behind huge type, with hover ripples of colour. Background: an oversized fixed layer (inset -20%) blurred 60px and saturated, containing four huge radial-gradient blobs (40 to 65vmax) driven by CSS custom properties --c1..--c4 over a --base colour. Each blob drifts and scales with its own alternate-direction keyframe loop (17s, 19s, 23s, 27s) on a symmetric cubic-bezier(.65,0,.35,1) ease so the colours constantly melt into new mesh arrangements. Register the colour variables with @property so palette changes cross-fade smoothly over 1.6s. Palettes: Peony (pink #ff5e8a, apricot #ffb36b, violet #8b6cff, mint #43d6c4 on blush #fde7ea), Lagoon (cyan, seafoam, ultramarine, lime on pale aqua), Ember (red, saffron, raspberry, tangerine on cream), Dusk (electric violet, rose, ink, coral on deep plum, with light text). A fine overlay grain from two repeating radial gradients in overlay blend. Typography: a single colossal word "Bloom" in Arial Black / Helvetica Neue / Impact at clamp(84px,24vw,360px), tight -0.065em tracking, filled white in overlay blend mode so the gradient glows through it, with a duplicate outline-only ghost layer (1.5px text stroke) stacked exactly on top for crisp definition; the tracking loosens slightly when the hero is hovered. A short medium-weight system-ui lede beneath. Top bar and bottom bar in small bold tracked uppercase system-ui. Bottom-left: four frosted glass pill palette buttons with springy lift on hover and an inverted pressed state. Ripples: as the pointer moves (throttled to every 70ms and 24px), spawn a 240px radial blob tinted with the next palette colour in screen blend inside a blurred layer; it scales from 0.2 to 2.6 and fades over 1.8s, then removes itself. Clicking anywhere releases three staggered, larger ripples like a flower opening. Arrow keys cycle palettes. Reduced motion: blob drift slowed to 120s loops, ripples disabled, palette changes instant. Full-height grid layout with no scrolling; responsive hiding of secondary labels on phones.

Title: Bloom Mesh Gradient

Description: A vivid, poster-like colour study where a soft mesh gradient made from four blurred pools of pigment continuously drifts and recombines behind one enormous word. The type is set in overlay blend so the gradient blooms through the letters, edged by a fine outline ghost. Moving the pointer trails petals of luminous colour that swell and dissolve, a click releases a bigger blossom, and four curated palettes cross-fade the whole composition from pink peony to lagoon, ember and dusk.

Visual techniques:
- Pseudo mesh gradient from four large radial-gradient blobs under a heavy blur and saturation filter
- Independent keyframe drift loops with symmetric easing for continuous morphing
- @property-registered colour custom properties for smooth palette cross-fades
- Giant overlay-blended display type with a stroked ghost duplicate
- Pointer-spawned screen-blended ripple elements that self-remove on animationend
- Repeating radial-gradient grain overlay
- Frosted glass pill buttons with spring easing and pressed state; prefers-reduced-motion handling

Interaction model: Move the pointer to leave blooming ripples of the current palette's colours. Click or tap anywhere for a larger, staggered three-ring blossom. Choose Peony, Lagoon, Ember or Dusk from the palette pills, or use the left and right arrow keys, to cross-fade the whole mesh and text colour. Hovering the headline gently loosens its letter-spacing.