Glow Effect

A glowing animated background with gradients and blur. It renders a dynamic effect that changes based on the mode. Use it to enhance sections or overlays with visual appeal.

byJulien Thibeaut from Motion Primitives

Installation

terminal

pnpm dlx layro-cli add @ibelick/glow-effect

npx layro-cli add @ibelick/glow-effect

npx layro-cli add @ibelick/glow-effect

bunx layro-cli add @ibelick/glow-effect

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

Code

Demo

'use client';
import { cn } from '@/lib/utils';
import { motion, Transition } from 'motion/react';

export type GlowEffectProps = {
  className?: string;
  style?: React.CSSProperties;
  colors?: string[];
  mode?:
    | 'rotate'
    | 'pulse'
    | 'breathe'
    | 'colorShift'
    | 'flowHorizontal'