║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║

---

title: Cool Mode date: 2024-06-01 description: Cool mode effect for buttons, links, and other DOMs author: Bankkroll published: true

<ComponentPreview name="cool-mode-demo" />

Installation

<Tabs defaultValue="cli"> <TabsList> <TabsTrigger value="cli">CLI</TabsTrigger> <TabsTrigger value="manual">Manual</TabsTrigger> </TabsList> <TabsContent value="cli">

npx shadcn@latest add @magicui/cool-mode

</TabsContent> <TabsContent value="manual"> <Steps>

<Step>Copy and paste the following code into your project.</Step>

<ComponentSource name="cool-mode" />

<Step>Update the import paths to match your project setup.</Step>

</Steps> </TabsContent> </Tabs>

Examples

Custom Particle

<ComponentPreview name="cool-mode-custom" />

Usage

import { CoolMode } from "@/components/ui/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

║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║