Future UI

Blob Card

▦ Cards

Card with organic blob animation that follows the mouse cursor.

cardblobanimationmouse-follow

No preview available

Canvas2D + GSAP ~ Hover to Interact

Controls

#6100ff
#d91ae0
#ff5c00
#ffaa00

Cards / React Component

About Blob Card

Card with organic blob animation that follows the mouse cursor.

Category Cards
Framework React + TypeScript
Dependencies gsap, @gsap/react
Tags card, blob, animation, mouse-follow

Install Blob Card in your project

Copy the shadcn CLI command below. Replace YOUR_LICENSE_KEY with the license key from your FutureUI account — or log in and it will auto-fill for you.

npx shadcn@latest add "https://futureui.studio/api/registry/blob-card.json?key=YOUR_LICENSE_KEY"

Usage example

import { BlobCard } from './BlobCard';

export default function Example() {
  return (
    <BlobCard
      colorPrimary="#1a1a2e"
      colorSecondary="#16213e"
      colorAccent="#0f3460"
      colorHighlight="#e94560"
    >
      <h2>Your Content</h2>
      <p>Place any content inside the blob card.</p>
    </BlobCard>
  );
}