Fx Blob Morph
Floating organic aurora blobs behind an AI agent landing hero.
Choose the primitives library your project already uses. Both look the same: your theme, not the variant, controls colors, shape, type and motion.
About this effect
What it's for
- Floating organic aurora blobs behind an AI agent landing hero.
- Vibrant glowing accent blob cluster highlight in a dashboard KPI card.
- Atmospheric ambient background for conversational chat interfaces.
Includes
- Organic blob morph
- Token color palettes
- Liquid blur diffusion
- Multiple layout variants
- Noise grain texture
- Offscreen pause
- Reduced motion fallback
- Personality tempo gating
Works with
- Radix UI and Base UI primitives (pick the one your project uses)
- React 19, Next.js App Router and Tailwind CSS 4, installed with the shadcn CLI
- Your theme tokens, in light and dark mode
Install
Included with Agentic UI Kit (one-time license). Install needs your license key: see pricing · connect your project.
Agentic UI CLI
agentic-ui add fx-blob-morphInstalls through shadcn and adapts the component to your design tokens.
shadcn CLI
npx shadcn@4.17.0 add @agentic-ui/fx-blob-morphUsed in
A standalone component: drop it into any screen.
- Type
- Effect
- Variants
- Radix UI and Base UI
- Themes
- Light and dark
- Widths
- Preview it at desktop, tablet and mobile widths above.
- Motion
- Animated, with a reduced-motion fallback
- npm packages
- None beyond your project's React and Next.js
- Registry dependencies
fx-foundationlib-motion- Files
5 files
- components/agentic-ui/fx-blob-morph/blob-morph.css
- components/agentic-ui/fx-blob-morph/index.ts
- components/agentic-ui/fx-blob-morph/palettes.ts
- components/agentic-ui/fx-blob-morph/types.ts
- components/agentic-ui/fx-blob-morph/blob-morph.tsx
Related components
Fx Aurora Background
Luminous aurora hero section on high-end SaaS landing page.
Details and live previewFx Background Patterns
Dot grid background with radial fade behind an AI chat landing hero.
Details and live previewFx Beam Border
Feature cards with an energetic travelling beam of light along the contour.
Details and live previewFx Flickering Grid
Status page header behind the overall system state and subscribe action.
Details and live preview