Background

A WebGL background component with animated noise shaders and customization options.

import Background from "@/components/ui/background/background";
import styles from "./background-demo.module.css";

export default function BackgroundDemo() {
  return (
    <div className={styles.container}>
      <Background backgroundColor={[0, 0, 0]} backgroundOpacity={0.5} intensity={0.1} />
    </div>
  );
}

Installation

npx shadcn@latest add https://roiui.com/r/background.json

Anatomy

anatomy

import Background from '../ui/background'

<Background />

Props

Prop	Type	Default
`className`	`string`	-
`primaryColor`	`[number, number, number]`	`[0.85, 0.85, 0.85]`
`secondaryColor`	`[number, number, number]`	`[0.25, 0.25, 0.25]`
`backgroundColor`	`[number, number, number]`	`[0.0, 0.0, 0.0]`
`backgroundOpacity`	`number`	`0.0`
`animationSpeed`	`number`	`0.3`
`noiseScale`	`number`	`3.0`
`intensity`	`number`	`0.9`
`octaves`	`number`	`4`
`warpStrength`	`number`	`4.0`