Cool Mode

Cool mode effect for buttons, links, and other DOMs

import { Button } from '@/components/ui/button'
import { CoolMode } from '@/registry/magicui/cool-mode'

export function CoolModeDemo() {
  return (
    <div class="relative justify-center">
      <CoolMode>
        <Button>Click Me!</Button>
      </CoolMode>
    </div>
  )
}

Installation

pnpm dlx shadcn@latest add @magicui-solid/cool-mode

bunx shadcn@latest add @magicui-solid/cool-mode

yarn dlx shadcn@latest add @magicui-solid/cool-mode

npx shadcn@latest add @magicui-solid/cool-mode

Examples

Custom Particle

import { Button } from '@/components/ui/button'
import { CoolMode } from '@/registry/magicui/cool-mode'

export function CoolModeCustomDemo() {
  return (
    <div class="relative justify-center">
      <CoolMode
        options={{
          particle: 'https://avatars.githubusercontent.com/u/81306489',
        }}
      >
        <Button>Click Me!</Button>
      </CoolMode>
    </div>
  )
}

Usage

import { CoolMode } from "@/components/magicui/cool-mode"

<CoolMode>
  <button>Click me</button>
</CoolMode>

Props

Prop	Type	Default	Description
`particle`	`string`	`"circle"`	The particle URL for a custom particle
`size`	`number`	`Varies`	Size of the particle
`particleCount`	`number`	`Varies`	The number of particles to generate
`speedHorz`	`number`	`Varies`	Horizontal speed of the particles
`speedUp`	`number`	`Varies`	Upward speed of the particles

Credits

Credit to Bankk
Inspired by ClickFusion

Original:

magicui.design/docs/components/cool-mode