Cool Mode

Source: Magic UI ↗
Author: Magic UI
Licence: MIT

Loading…

Hold the button and coloured particles burst from the pointer.

Code

"use client";

import { CoolMode } from "@/lab/magicui/ui/cool-mode";

export default function CoolModeDemo() {
  return (
    <div data-cool-mode-host className="relative flex h-full w-full items-center justify-center overflow-hidden">
      <CoolMode>
        <button
          type="button"
          className="h-9 rounded-md bg-neutral-900 px-4 text-sm font-medium text-white shadow-xs transition-colors hover:bg-neutral-800"
        >
          Click Me!
        </button>
      </CoolMode>
    </div>
  );
}

Prompt

Build "Cool Mode", a button animation. What it does: Hold the button and coloured particles burst from the pointer. Write it as a single self-contained React component in TypeScript that fills its parent (w-full h-full), styled with Tailwind CSS. Technique: a requestAnimationFrame loop, pointer tracking. It sits on a light background, in a 16:10 frame. Respect prefers-reduced-motion with a still state, pause work when the element is off screen, and keep it accessible. Original: https://magicui.design/docs/components/cool-mode (Magic UI, MIT).