Blob Morph

Create a morphing blob background element. An organic blob shape that continuously melts from one form to another, for hero backgrounds or section accents. Implementation (CSS-only): a div with a warm gradient fill (e.g. linear-gradient(135deg, accent, a lighter orange tint)) whose border-radius animates between asymmetric 8-value states, e.g. from '58% 42% 55% 45% / 45% 58% 42% 55%' through two other similar combinations and back, combined with a slight rotation (±8deg). Keyframes at 0/33/66/100%, 9s ease-in-out infinite. The 8-value slash syntax is what makes it read organic instead of elliptical: keep every value between ~38% and ~62%. Usage notes: place it behind content (negative z-index or an absolutely positioned layer), optionally blurred (filter: blur(30px)) for an ambient glow version; two blobs at different speeds and opacities layer nicely. Border-radius animation is not GPU-accelerated, so limit to 1-2 blobs per screen. Under prefers-reduced-motion, freeze the blob at its first shape. Build the component, not this demo of it. - Ambient motion that IS the component may loop: a drifting background, a marquee, a spinner while something is genuinely loading. - Do not add any timer, interval, loop or script that performs a person's action by itself. No auto-hover, no auto-click, no cycling through states, no pretend submitting, no replaying the interaction on a schedule. - Every state that answers a person waits for a real event from that person. - Placeholder copy and sample content are welcome. Simulated behaviour is not.