Cool Mode

Renders animated particles around interactive elements. Particles move and rotate based on user interaction. Use for visual effects on buttons, links, and other DOM elements.

byMagic UI

Installation

terminal

pnpm dlx layro-cli add @magicuidesign/cool-mode

npx layro-cli add @magicuidesign/cool-mode

npx layro-cli add @magicuidesign/cool-mode

bunx layro-cli add @magicuidesign/cool-mode

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

Code

Demo

"use client"

import React, { useEffect, useRef, type ReactNode } from "react"

export interface BaseParticle {
  element: HTMLElement | SVGSVGElement
  left: number
  size: number
  top: number
}

export interface BaseParticleOptions {
  particle?: string
  size?: number