Evil Buttons

项目概述

Evil Buttons 是一个充满「邪恶气质」的 shadcn/ui registry，收录 31 个交互感极强的动画按钮组件。由 Radium Coders 基于 Motion（Framer Motion）与 Tailwind 打造，每个按钮都配有实时预览、即复制文档与单命令 CLI 安装。它存在的意义，就是治好你的主 CTA 按钮无聊到 clicking 乏味的病。

核心特性

• 💀 杀伤级微交互：按住蓄力才触发的 Hold-to-delete、文字逐渐损坏的 Glitch 效果、复古 Dither 像素风、以及标志性的 EvilEye 注视按钮——每一个都在诱导用户点下去。
• 🧩 shadcn Registry 原生：npx shadcn@latest add @evilbuttons/frame-button 一条命令把带类型、带样式的源码放进项目，无运行时依赖锁定。
• 🏗️ 工程底座扎实：邪恶外皮之下是可访问的 React + Tailwind + Motion 标准实现，动画编排全部可以拆开学。
• 🎮 Playground 优先文档：所有交互先在官网实时体验，满意了再落代码。

快速上手与示例代码

npx shadcn@latest add @evilbuttons/frame-button

import { FrameButton } from "@/components/ui/frame-button";

export function DeployDoom() {
  return <FrameButton onClick={() => launch()}>DEPLOY</FrameButton>;
}

技术选型建议与适用场景

1. 开发者作品集与开发者工具：个性即卖场的场景——产品发布页、黑客松 demo、需要灵魂的内部工具。
2. 动效范式教科书：就算不上线邪恶按钮，其源码也是 Motion 编排（长按手势、故障循环、光标追踪）的绝佳学习材料。
3. 不适用场景：银行后台、医疗软件等一切「趣味会瓦解信任感」的严肃界面。