Animated Gradient

A canvas-based animated gradient background with WebGL effects. It uses preset configurations or custom color settings to create dynamic visual patterns. The component adjusts to light or dark themes and can be styled with custom CSS. Use it to add engaging background visuals to web interfaces.

bytom from Spell

Installation

terminal

pnpm dlx layro-cli add @xxtomm/animated-gradient

npx layro-cli add @xxtomm/animated-gradient

npx layro-cli add @xxtomm/animated-gradient

bunx layro-cli add @xxtomm/animated-gradient

New project? Start with init. Writes third-party code and installs packages with scripts off.

Code

Demo

"use client";

import { useTheme } from "next-themes";
import { useRef, useEffect, useMemo, useState, type CSSProperties } from "react";

type PatternShape = "Checks" | "Stripes" | "Edge";

const PatternShapes: Record<PatternShape, number> = {
  Checks: 0,
  Stripes: 1,
  Edge: 2,
};

interface PresetColors {