Cool Mode

Buttons 41

About

Cool mode effect for buttons, links, and other DOMs

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Cool Mode to your project and fits it to your theme.

Code

How Cool Mode is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

import { Button } from "@/components/ui/button"
import { CoolMode } from "@/components/ui/cool-mode"

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

function CoolModeCustom() {
  return (
    <div className="relative justify-center">
      <CoolMode
        options={{
          particle:
            "https://cdn.21st.dev/assets/mirror/61/61c1c4cb5120e0dc5a2c14c5bc8bfa91d9ba47651e37c5377c8ad9b1a284d05b.png",
        }}
      >
        <Button>Click Me!</Button>
      </CoolMode>
    </div>
  )
}

export default {
  CoolModeDemo,
  CoolModeCustom,
}