Cosmic Background

A modern cosmic background featuring smooth motion and immersive depth effects.

Installation

npx shadcn@latest add @scrollxui/cosmic-background

Usage

import { CosmicBackground } from '@/components/ui/cosmic-background';

<CosmicBackground
  variant='cosmic'
  intensity={1.0}
  speed={1.0}
  interactive={true}
  quality='high'
  overlay={false}
  className='relative h-100 w-full flex flex-col items-center justify-center'
>
  <h2 className='bg-clip-text text-transparent text-center bg-linear-to-b from-white to-neutral-200 drop-shadow-[0_0_20px_rgba(255,255,255,0.25)] text-2xl md:text-4xl lg:text-6xl py-2 md:py-10 relative z-20 font-bold tracking-tight'>
    Feeling cosmic?
  </h2>
</CosmicBackground>

Examples

Aurora

Neon

API Reference

Cosmic Background

A modern cosmic background featuring smooth motion and immersive depth effects.

Props

Property	Type	Default	Description
`variant`	"aurora" \| "cosmic" \| "neon"	`"aurora"`	Selects the visual style of the cosmic background, controlling colors and motion behavior.
`intensity`	number	`1.0`	Controls the overall brightness and strength of the visual effect.
`speed`	number	`1.0`	Adjusts the animation speed, affecting how fast the background flows.
`interactive`	boolean	`true`	Enables mouse-based interaction, adding subtle motion response.
`quality`	"low" \| "medium" \| "high" \| "ultra"	`"high"`	Controls rendering quality and performance, adapting to device capabilities.
`overlay`	boolean	`false`	Reserved for adding an overlay layer above the background (future use).
`className`	string	`—`	Optional styling (e.g., Tailwind classes) for the outer container.
`children`	React.ReactNode	`—`	Content rendered above the cosmic background.