✨ Give us a star on GitHub Help us grow by starring the project and sharing your feedback.

Getting Started

Templates

Mockups

Components

Special Animations

Buttons

Text Animations

Backgrounds

Novatrix Background

Animated WebGL background component with customizable colors, speed, and mouse interaction.

"use client"

import Novatrix from "@/registry/eldoraui/novatrix-background"

export function NovatrixbgDemo() {
  return (
    <div className="bg-background relative z-10 h-[500px] w-full overflow-hidden rounded-lg border">
      <Novatrix color={[1, 1, 1]} amplitude={0.1} speed={1.0} />
    </div>
  )
}

Installation


pnpm dlx shadcn@latest add @eldoraui/novatrix-background

Examples

With Hover Animation

"use client"

import Novatrix from "@/registry/eldoraui/novatrix-background"

export function NovatrixbgDemo() {
  return (
    <div className="bg-background relative z-10 h-[500px] w-full overflow-hidden rounded-lg border">
      <Novatrix
        color={[1, 1, 1]}
        amplitude={0.1}
        mouseReact={true}
        speed={1.0}
      />
    </div>
  )
}

Usage

import Novatrix from "@/components/eldoraui/novatrix-background"

<Novatrix color={[1, 1, 1]} speed={1.0} amplitude={0.1} mouseReact={true} />

Props

Prop	Type	Default	Description
`color`	`[number, number, number]`	`[1, 1, 1]`	RGB color values for the background animation
`speed`	`number`	`1.0`	Animation speed multiplier
`amplitude`	`number`	`0.1`	Mouse interaction amplitude
`mouseReact`	`boolean`	`true`	Enable mouse interaction effects

Multi Direction Slide Text Orbit Rotation

On This Page

With Hover Animation

Contribute

Join Us on Discord

Eldora UI

Get latest updates and support
and get help from our community

Trusted by 1,000+ developers