前端和独立开发者终于有天花板级别的动效库了！

告别千篇一律的组件库和生硬过场！

分享一个超赞的 GitHub 开源项目 —— react-bits

专为追求极致视觉与交互细节的前端/独立开发者而生

它把那些大厂/顶级创意网站上才能见到的高级感动效，全部封装成了开箱即用的 React 组件！

像素动画、流体文字、超酷的背景粒子、3D卡片翻转、炫目悬停特效……

全部基于 React + Tailwind CSS + Framer Motion 纯代码实现，零配置、轻量级、完全可定制。

每个动效都附带精心设计的交互预览 + 实时参数调节面板

而且直接一键复制代码，1秒直接搬进你的项目，让你的网页瞬间充满百万级的高级创意感！

地址：https://github.com/DavidHDev/react-bits…

DavidHDev/react-bits

Source: https://github.com/DavidHDev/react-bits

The largest & most creative library of animated React components.
_{Stand out with 130+ free, customizable animations for text, backgrounds, and UI.}



📖 Documentation · ⚡ Quick Start · 🛠️ Tools

✨ Why React Bits?

React Bits helps you ship stunning interfaces faster. Instead of spending hours crafting animations from scratch, grab a polished component and customize it to fit your vision.

💬 Text Animations · 🌀 Animations · 🧩 Components · 🖼️ Backgrounds

🚀 Features

• 130+ components — text animations, UI elements, and backgrounds, growing weekly
• Minimal dependencies — lightweight and tree-shakeable
• Fully customizable — tweak everything via props or edit the source directly
• 4 variants per component — JS-CSS, JS-TW, TS-CSS, TS-TW (everyone’s happy)
• Copy-paste ready — works with any modern React project

🛠️ Creative Tools

Beyond components, React Bits offers free creative tools to supercharge your workflow:

📦 Installation

React Bits supports shadcn and jsrepo for quick CLI installs.

# Example: Add a component via shadcn
npx shadcn@latest add @react-bits/BlurText-TS-TW

Each component page includes copy-ready CLI commands. See the installation guide for full details.

You can also select your preferred technologies, and copy the code manually.

🚀 Sponsors

React Bits is proudly supported by these amazing sponsors:

Diamond

Platinum

Silver

Become a sponsor — Get your brand in front of 500K+ developers monthly.

🤝 Contributing

We’d love your help! Check the open issues or submit ideas via the feature request template.

Please read the contribution guide first — thanks for making React Bits better!

🙌 Contributors

👤 Maintainer

David Haz — creator & lead maintainer

🌐 Official Ports

📊 Stats

🗳️ Credit

React Bits occasionally draws inspiration from publicly available code examples. These are rewritten as full-fledged, customizable components for JS, TS, CSS, and Tailwind. If you recognize your work, open an issue to request credit.

📄 License

MIT + Commons Clause — free for personal and commercial use.

爱丽丝呀！ (@BTCqzy1): 前端终于有高级感的加载动画了！

告别普通 spinner！

分享一个超赞的 GitHub 开源项目 —— math-curve-loaders

专为追求极致美观与轻量前端项目而生，它把数学曲线变成极致优雅的加载动画！

玫瑰曲线、李萨茹曲线、心形线……

纯 HTML + CSS + JS 实现，零依赖、超轻量。

每个动画都附带数学公式