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

header?

React.ReactNode

—

Optional content rendered inside the blob header area.

headerHeight?

number

224

Height of the blob header section in pixels.

lightColors?

string[]

["#ff0020", "#fc0f60", "#e8227a", "#ff85b3"]

Color stops for the fluid blobs in light mode.

darkColors?

string[]

["#8c0f60", "#e8227a", "#e8227a", "#ff85b3"]

Color stops for the fluid blobs in dark mode.

glowColors?

string[]

["#ff96a9", "#e8b4f0", "#ffb3c6", "#d44d8a", "#ff96a9"]

Color stops used for the animated glow border.

children?

React.ReactNode

—

Content rendered below the blob header.

className?

string

—

Additional CSS classes applied to the outer wrapper.

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.

Keep in mind

Most components on this site are inspired by or recreated from existing work across the web. I'm not here to take credit; just to learn, experiment, and sometimes push things a bit further. If something looks familiar and I forgot to mention you, reach out and I'll fix that right away.

"use client";

import * as React from "react";
import { FluidBlobs } from "@/components/ui/FluidBlobs";
import { GlowEffect } from "@/components/ui/glow-effect";
import { cn } from "@/lib/utils";

export interface BlobCardProps {
  header?: React.ReactNode;
  children?: React.ReactNode;
  headerHeight?: number;
  lightColors?: string[];
  darkColors?: string[];
  glowColors?: string[];
  className?: string;
}

const DEFAULT_LIGHT = ["#ff0020", "#fc0f60", "#e8227a", "#ff85b3"];
const DEFAULT_DARK = ["#8c0f60", "#e8227a", "#e8227a", "#ff85b3"];
const DEFAULT_GLOW = ["#ff96a9", "#e8b4f0", "#ffb3c6", "#d44d8a", "#ff96a9"];

export function BlobCard({
  header,
  children,
  headerHeight = 224,
  lightColors = DEFAULT_LIGHT,
  darkColors = DEFAULT_DARK,
  glowColors = DEFAULT_GLOW,
  className,
}: BlobCardProps) {
  return (
    <div className={cn("relative w-full", className)}>
      <div className="absolute -inset-[1.5px] rounded-[21.5px] overflow-hidden z-0">
        <GlowEffect
          colors={glowColors}
          mode="rotate"
          blur="strongest"
          duration={5}
          scale={1}
        />
      </div>

      <div className="relative z-10 rounded-[20px] overflow-hidden bg-background">
        <div
          className="relative overflow-hidden rounded-t-[20px]"
          style={{ height: headerHeight }}
        >
          <FluidBlobs
            lightColors={lightColors}
            darkColors={darkColors}
            origins={[
              { x: 50, y: -55 },
              { x: 50, y: -25 },
              { x: 50, y: -25 },
              { x: 50, y: -25 },
            ]}
            margin={60}
            blur={50}
          />
          <div className="absolute inset-0 bg-gradient-to-b from-transparent via-transparent to-background pointer-events-none" />
          {header && <div className="relative z-10 p-8 pb-0">{header}</div>}
        </div>

        {children && <div>{children}</div>}
      </div>
    </div>
  );
}