Background Blobs

npm i clsx

'use client'
import { useEffect, useState } from 'react'
 
function generateInitialPoints() {
  return Array.from({ length: 16 }).fill(0).map(() => [Math.random(), Math.random()])
}
 
export function BackgroundBlobs({ color = 'red', delay = 2000 }: { color?: string, delay?: number }) {
  const [points, setPoints] = useState(() =>
    generateInitialPoints(),
  )
  const poly = points.map(([x, y]) => `${x * 100}% ${y * 100}%`).join(', ')
 
  const jumpVal = (val: number) => {
    const random = Math.random()
    return random > 0.5
      ? val + (random - 0.5) / 2
      : random
  }
 
  const jumpPoints = () => {
    setPoints(prevPoints => prevPoints.map(([x, y]) => [jumpVal(x), jumpVal(y)]))
  }
 
  useEffect(() => {
    const intervalId = setInterval(jumpPoints, Math.random() * 1000 + delay)
    return () => clearInterval(intervalId)
  }, [])
 
  return (
    <div
      style={
      {
        '--color': color,
      } as React.CSSProperties
    }
      className="blobsbg absolute inset-0 transform-gpu blur-3xl overflow-hidden pointer-events-none"
      aria-hidden="true"
    >
      <div
        className="aspect-[1.7] w-full h-full bg-gradient-to-r from-[var(--color)] to-white/10 lg:opacity-50"
        style={{ clipPath: `polygon(${poly})` }}
      />
    </div>
  )
}

.blobsbg > div {
  clip-path: circle(75%);
  transition: clip-path 3s;
}