Cosmic Background

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

Feeling cosmic?

Installation

npx shadcn@latest add https://scrollxui.dev/registry/cosmic-background.json

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-[400px] w-full flex flex-col items-center justify-center">
<h2 className="bg-clip-text text-transparent text-center bg-gradient-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

Feeling cosmic?

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.