Blob Card

Animated card with fluid blob header, glowing border, and configurable colors.

Installation

Usage

import { BlobCard } from "@/components/unlumen-ui/components/ui/blob-card";

<BlobCard>Your content here</BlobCard>;

File Structure

FluidBlobs.tsx
glow-effect.tsx
blob-card.tsx

API Reference

BlobCard

PropTypeDefault
header?
React.ReactNode
-
headerHeight?
number
224
lightColors?
string[]
["#ff0020", "#fc0f60", "#e8227a", "#ff85b3"]
darkColors?
string[]
["#8c0f60", "#e8227a", "#e8227a", "#ff85b3"]
glowColors?
string[]
["#ff96a9", "#e8b4f0", "#ffb3c6", "#d44d8a", "#ff96a9"]
children?
React.ReactNode
-
className?
string
-

Notes

  • The glow border is rendered behind the card using an absolutely positioned GlowEffect with mode="rotate" and blur="strongest" — it rotates continuously over 5 seconds.
  • The card uses a 1.5px inset trick: the glow sits at -inset-[1.5px] behind a rounded-[20px] inner container, creating a thin animated border effect.
  • FluidBlobs renders animated SVG blobs with configurable origins. The default layout places all blobs near the top (y: -55 to -25) so the movement stays inside the header area.
  • A gradient overlay (from-transparent via-transparent to-background) fades the bottom of the blob header into the card body — don't remove it or the transition will look harsh.
  • The header slot is positioned inside the blob area with p-8 pb-0 — use it for titles or icons that should sit on top of the animation.
  • The component is "use client" — it needs client-side rendering for the animated blobs and glow.

Credits

BlobCard combines two unlumen-ui primitives: FluidBlobs for the animated header and GlowEffect for the rotating border. Both are available as standalone components in the registry.