Morphing Points Canvas

import { useState } from 'react'
import { MorphingPointsCanvas } from '@/components/morphing-points-canvas'

function MorphExample() {
  const [targetIndex, setTargetIndex] = useState(0)

  return (
    <div className="flex w-full flex-col gap-3">
      <div className="h-[320px] w-full rounded-md bg-black/90 p-2">
        <MorphingPointsCanvas
          svgUrls={['/morphing/circle.svg', '/morphing/star.svg']}
          targetIndex={targetIndex}
          pointCount={1200}
          speed={0.1}
          color="#ffffff"
        />
      </div>

      <button type="button" onClick={() => setTargetIndex((current) => (current + 1) % 2)}>
        Morph to next shape
      </button>
    </div>
  )
}