Ambient Glow Card

A single responsive card whose copy you write as normal JSX children. A soft radial-gradient blob slowly drifts between the four corners — colour and speed are props. Headings inherit the page font; paragraphs get muted body styling. Fills any parent column via w-full h-full.

UniqueUI CLI

npx uniqueui add ambient-glow-card

shadcn CLI

npx shadcn@latest add https://uniqueui-platform.vercel.app/r/ambient-glow-card.json -y

shadcn path expects @/lib/utils (run shadcn init first). Same source file is installed to components/ui/.

Preview

Software That Actually Scales

Not code. Not prototypes. Real, live systems running in production from day one.

Usage

import { AmbientGlowCard } from "@/components/ui/ambient-glow-card";

export default function Example() {
  return (
    <div className="max-w-md p-4">
      <AmbientGlowCard
        blobColor={["#f9b8c4", "#f897ad", "#fcd1c1"]}
        animationDuration={24}
      >
        <h3>Software That Actually Scales</h3>
        <p>Not code. Not prototypes. Real, live systems running in production from day one.</p>
      </AmbientGlowCard>
    </div>
  );
}

Props

Prop	Type	Description
`children`	`ReactNode`	Card body — pass standard JSX (heading + paragraph). Headings inherit the page font and get sensible tracking + colour; paragraphs get muted body styling.
`blobColor`	`string \| readonly [string, string, string]`	Blob accent. Single CSS colour (hex / rgb / oklch / named) for a one-stop wash, or a tuple of three stops for a richer gradient. Defaults to a warm pink trio.
`cardBackground`	`string`	Optional solid surface colour; omit for theme default neutral-100 / neutral-900.
`animationDuration`	`number`	Seconds for one full drift cycle through the four corners. Clamped 6–120 (lower = faster).
`motionDisabled`	`boolean`	Pin the blob to a single corner. `prefers-reduced-motion` always pins regardless.
`padding`	`"sm" \| "md" \| "lg"`	Inner padding scale around the children slot.
`showNoise`	`boolean`	SVG film-grain overlay on top of the surface.
`minHeight`	`string`	Minimum card height when content is short. Any CSS length.
`className`	`string`	Merged onto the outer article (e.g. h-full, ring, custom shadow).