Skip to main content
The Blobs component creates an animated background effect with three overlapping circular blobs that move in random patterns. Perfect for hero sections and decorative backgrounds.

​
Import

import { Blobs } from '@luminescent/ui-qwik';

​
Usage

<div class="relative">
  <Blobs color="blue" blur="xl" />
  <div class="relative z-10">
    {/* Your content here */}
  </div>
</div>

​
Props

​
color
keyof typeof blobColorClasses | [string, string, string]
default:"darkgray"
Color scheme for the blobs. Can be a preset color name or an array of three custom Tailwind color classes.Available presets: slate, gray, darkgray, darkergray, zinc, neutral, stone, red, orange, amber, yellow, lime, green, emerald, teal, cyan, sky, blue, indigo, violet, purple, fuchsia, pink, rose
​
blur
'xs' | 'sm' | 'md' | 'lg' | 'xl'
default:"xl"
The amount of blur applied to the blobs.
​
class
{ [key: string]: boolean }
Object-based class names for conditional styling.
​
style
{ [key: string]: string | number }
Inline styles to apply to the container.

​
Color Options

<Blobs color="blue" />

​
Behavior

The blobs automatically fade in with a 2-second animation. The animation is hidden for users with prefers-reduced-motion enabled. Each blob has randomized animation timing for natural movement.

​
Implementation Details

  • Uses container query units (cqw) for responsive sizing
  • Three blobs with staggered animation delays (-5s and -10s)
  • 20% opacity for subtle background effect
  • Random animation selection from 7 different blob animations
  • absolute inset-0 positioning fills the parent container

Build docs developers (and LLMs) love

Get started for freeTalk to us