[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"project-1314":3},{"id":4,"name":5,"fullName":6,"owner":7,"repo":5,"description":8,"homepage":9,"htmlUrl":10,"language":11,"languages":10,"totalLinesOfCode":10,"stars":12,"forks":13,"watchers":14,"openIssues":15,"contributorsCount":16,"subscribersCount":16,"size":16,"stars1d":16,"stars7d":16,"stars30d":17,"stars90d":16,"forks30d":16,"starsTrendScore":16,"compositeScore":18,"rankGlobal":10,"rankLanguage":10,"license":19,"archived":20,"fork":20,"defaultBranch":21,"hasWiki":22,"hasPages":20,"topics":23,"createdAt":10,"pushedAt":10,"updatedAt":40,"readmeContent":41,"aiSummary":42,"trendingCount":16,"starSnapshotCount":16,"syncStatus":43,"lastSyncTime":44,"discoverSource":45},1314,"react-bits","DavidHDev\u002Freact-bits","DavidHDev","An open source collection of animated, interactive & fully customizable React components for building memorable websites.","https:\u002F\u002Freactbits.dev",null,"JavaScript",43166,2010,124,1,0,994,79.91,"Other",false,"main",true,[24,25,26,27,28,29,30,31,32,33,34,35,36,37,38,39],"3d","animations","component-library","components","components-library","components-react","css-animations","javascript","react","react-components","reactjs","tailwind","tailwindcss","ui-components","ui-library","web","2026-07-30 04:00:08","\u003Cdiv align=\"center\">\n\t\u003Cbr>\n\t\u003Cbr>\n    \u003Cpicture>\n      \u003Csource media=\"(prefers-color-scheme: light)\" srcset=\"src\u002Fassets\u002Flogos\u002Freactbits-gh-black.svg\">\n      \u003Csource media=\"(prefers-color-scheme: dark)\" srcset=\"src\u002Fassets\u002Flogos\u002Freactbits-gh-white.svg\">\n      \u003Cimg src=\"src\u002Fassets\u002Flogos\u002Freactbits-gh-black.svg\" alt=\"react-bits logo\" width=\"600\">\n    \u003C\u002Fpicture>\n\t\u003Cbr>\n\t\u003Cbr>\n  \u003Cstrong>The largest & most creative library of animated React components.\u003C\u002Fstrong>\n  \u003Cbr \u002F>\n  \u003Csub>Stand out with 110+ free, customizable animations for text, backgrounds, and UI.\u003C\u002Fsub>\n\t\u003Cbr>\n\t\u003Cbr>\n  \u003Ca href=\"https:\u002F\u002Fgithub.com\u002Fdavidhdev\u002Freact-bits\u002Fstargazers\">\u003Cimg alt=\"GitHub Repo stars\" src=\"https:\u002F\u002Fimg.shields.io\u002Fgithub\u002Fstars\u002Fdavidhdev\u002Freact-bits\">\u003C\u002Fa>\n  \u003Ca href=\"https:\u002F\u002Fgithub.com\u002Fdavidhdev\u002Freact-bits\u002Fblob\u002Fmain\u002FLICENSE.md\">\u003Cimg alt=\"License\" src=\"https:\u002F\u002Fimg.shields.io\u002Fbadge\u002FLicense-MIT+Commons_Clause-magenta\">\u003C\u002Fa>\n  \u003Cbr>\n  \u003Cbr>\n  \u003Ca href=\"https:\u002F\u002Freactbits.dev\u002F\">📖 Documentation\u003C\u002Fa> · \u003Ca href=\"https:\u002F\u002Freactbits.dev\u002Fget-started\u002Finstallation\">⚡ Quick Start\u003C\u002Fa> · \u003Ca href=\"https:\u002F\u002Freactbits.dev\u002Ftools\">🛠️ Tools\u003C\u002Fa>\n\u003C\u002Fdiv>\n\n\u003Cbr \u002F>\n\n\u003Cdiv align=\"center\">\n  \u003Cimg src=\"src\u002Fassets\u002Fcommon\u002Freadme-showcase.png\" alt=\"React Bits component showcase\" width=\"1000\">\n\u003C\u002Fdiv>\n\n\u003Cbr \u002F>\n\n## ✨ Why React Bits?\n\nReact 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.\n\n> 💬 **Text Animations** · 🌀 **Animations** · 🧩 **Components** · 🖼️ **Backgrounds**\n\n## 🚀 Features\n\n- **110+ components** — text animations, UI elements, and backgrounds, growing weekly\n- **Minimal dependencies** — lightweight and tree-shakeable\n- **Fully customizable** — tweak everything via props or edit the source directly\n- **4 variants per component** — JS-CSS, JS-TW, TS-CSS, TS-TW (everyone's happy)\n- **Copy-paste ready** — works with any modern React project\n\n## 🛠️ Creative Tools\n\n\u003Cdiv align=\"center\">\n  \u003Cimg src=\"src\u002Fassets\u002Fcommon\u002Ftools-readme.webp\" alt=\"React Bits Tools\" width=\"1000\" style=\"border-radius: 30px; max-width: 1920px;\">\n\u003C\u002Fdiv>\n\n\u003Chr \u002F>\n\n### Beyond components, React Bits offers **free creative tools** to supercharge your workflow:\n\n| Tool                                                 | What it does                                                                             |\n| ---------------------------------------------------- | ---------------------------------------------------------------------------------------- |\n| **[Background Studio](https:\u002F\u002Freactbits.dev\u002Ftools)** | Explore animated backgrounds, customize effects, export as video\u002Fimage\u002Fcode              |\n| **[Shape Magic](https:\u002F\u002Freactbits.dev\u002Ftools)**       | Create inner rounded corners between shapes, export as SVG, React code or clip-path code |\n| **[Texture Lab](https:\u002F\u002Freactbits.dev\u002Ftools)**       | Apply 20+ effects (noise, dithering, ASCII) to images\u002Fvideos and export in high quality  |\n\n## 📦 Installation\n\nReact Bits supports [shadcn](https:\u002F\u002Fui.shadcn.com\u002F) and [jsrepo](https:\u002F\u002Fjsrepo.dev) for quick CLI installs.\n\n```bash\n# Example: Add a component via shadcn\nnpx shadcn@latest add @react-bits\u002FBlurText-TS-TW\n```\n\nEach component page includes copy-ready CLI commands. See the [installation guide](https:\u002F\u002Freactbits.dev\u002Fget-started\u002Finstallation) for full details.\n\nYou can also select your preferred technologies, and copy the code manually.\n\n## 🚀 Sponsors\n\nReact Bits is proudly supported by these amazing sponsors:\n\n### Diamond\n\n\u003Ca href=\"https:\u002F\u002Fwww.shadcnblocks.com\u002F?utm_source=reactbits&utm_medium=sponsor&utm_campaign=diamond&ref=reactbits\" target=\"_blank\">\n  \u003Cpicture>\n    \u003Csource media=\"(prefers-color-scheme: dark)\" srcset=\"public\u002Fassets\u002Fsponsors\u002Fshadcnblocks.svg\">\n    \u003Csource media=\"(prefers-color-scheme: light)\" srcset=\"public\u002Fassets\u002Fsponsors\u002Fshadcnblocks-lightmode.svg\">\n    \u003Cimg src=\"public\u002Fassets\u002Fsponsors\u002Fshadcnblocks.svg\" alt=\"shadcnblocks.com\" style=\"height: 50px;\">\n  \u003C\u002Fpicture>\n\u003C\u002Fa>\n   \n\u003Ca href=\"https:\u002F\u002Fshadcnstudio.com\u002F?utm_source=reactbits&utm_medium=sponsor&utm_campaign=diamond&ref=reactbits\" target=\"_blank\">\n  \u003Cpicture>\n    \u003Csource media=\"(prefers-color-scheme: dark)\" srcset=\"public\u002Fassets\u002Fsponsors\u002Fshadcnstudio.svg\">\n    \u003Csource media=\"(prefers-color-scheme: light)\" srcset=\"public\u002Fassets\u002Fsponsors\u002Fshadcnstudio-lightmode.svg\">\n    \u003Cimg src=\"public\u002Fassets\u002Fsponsors\u002Fshadcnstudio.svg\" alt=\"shadcn studio\" style=\"height: 50px;\">\n  \u003C\u002Fpicture>\n\u003C\u002Fa>\n\n### Platinum\n\n\u003Ca href=\"https:\u002F\u002Fpro.tailark.com\u002F?utm_source=reactbits&utm_medium=sponsor&utm_campaign=platinum&ref=reactbits\" target=\"_blank\">\n  \u003Cpicture>\n    \u003Csource media=\"(prefers-color-scheme: dark)\" srcset=\"public\u002Fassets\u002Fsponsors\u002Ftailark.svg\">\n    \u003Csource media=\"(prefers-color-scheme: light)\" srcset=\"public\u002Fassets\u002Fsponsors\u002Ftailark-lightmode.svg\">\n    \u003Cimg src=\"public\u002Fassets\u002Fsponsors\u002Ftailark.svg\" alt=\"Tailark\" style=\"height: 50px;\">\n  \u003C\u002Fpicture>\n\u003C\u002Fa>\n\n### Silver\n\n\u003Ca href=\"https:\u002F\u002Fnextjsweekly.com\u002F?utm_source=reactbits&utm_medium=sponsor&utm_campaign=silver&ref=reactbits\" target=\"_blank\">\n  \u003Cpicture>\n    \u003Csource media=\"(prefers-color-scheme: dark)\" srcset=\"public\u002Fassets\u002Fsponsors\u002Fnextjsweekly.svg\">\n    \u003Csource media=\"(prefers-color-scheme: light)\" srcset=\"public\u002Fassets\u002Fsponsors\u002Fnextjsweekly-lightmode.svg\">\n    \u003Cimg src=\"public\u002Fassets\u002Fsponsors\u002Fnextjsweekly.svg\" alt=\"Next.js Weekly\" style=\"height: 40px;\">\n  \u003C\u002Fpicture>\n\u003C\u002Fa>\n   \n\u003Ca href=\"https:\u002F\u002Fshadcncraft.com\u002F?utm_source=reactbits&utm_medium=sponsor&utm_campaign=silver&ref=reactbits\" target=\"_blank\">\n  \u003Cpicture>\n    \u003Csource media=\"(prefers-color-scheme: dark)\" srcset=\"public\u002Fassets\u002Fsponsors\u002Fshadcncraft.svg\">\n    \u003Csource media=\"(prefers-color-scheme: light)\" srcset=\"public\u002Fassets\u002Fsponsors\u002Fshadcncraft-lightmode.svg\">\n    \u003Cimg src=\"public\u002Fassets\u002Fsponsors\u002Fshadcncraft.svg\" alt=\"Shadcncraft\" style=\"height: 40px;\">\n  \u003C\u002Fpicture>\n\u003C\u002Fa>\n\n\u003Chr \u002F>\n\n**[Become a sponsor](https:\u002F\u002Freactbits.dev\u002Fsponsors)** — Get your brand in front of 500K+ developers monthly.\n\n## 🤝 Contributing\n\nWe'd love your help! Check the [open issues](https:\u002F\u002Fgithub.com\u002FDavidHDev\u002Freact-bits\u002Fissues) or submit ideas via the [feature request template](https:\u002F\u002Fgithub.com\u002FDavidHDev\u002Freact-bits\u002Fissues\u002Fnew?template=2-feature-request.yml).\n\nPlease read the [contribution guide](https:\u002F\u002Fgithub.com\u002FDavidHDev\u002Freact-bits\u002Fblob\u002Fmain\u002FCONTRIBUTING.md) first — thanks for making React Bits better!\n\n## 🙌 Contributors\n\n\u003Ca href=\"https:\u002F\u002Fgithub.com\u002Fdavidhdev\u002Freact-bits\u002Fgraphs\u002Fcontributors\">\n  \u003Cimg src=\"https:\u002F\u002Fcontrib.rocks\u002Fimage?repo=davidhdev\u002Freact-bits\" \u002F>\n\u003C\u002Fa>\n\n## 👤 Maintainer\n\n**[David Haz](https:\u002F\u002Fgithub.com\u002FDavidHDev)** — creator & lead maintainer\n\n## 🌐 Official Ports\n\n| Framework | Link                                      |\n| --------- | ----------------------------------------- |\n| Vue.js    | [vue-bits.dev](https:\u002F\u002Fvue-bits.dev\u002F)     |\n| Svelte    | [sveltebits.xyz](https:\u002F\u002Fsveltebits.xyz\u002F) |\n\n## 📊 Stats\n\n![Repobeats analytics](https:\u002F\u002Frepobeats.axiom.co\u002Fapi\u002Fembed\u002Fb1bf4dc0226458617adbdbf5586f2df953eb0922.svg 'Repobeats analytics image')\n\n## 🗳️ Credit\n\nReact 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](https:\u002F\u002Fgithub.com\u002FDavidHDev\u002Freact-bits\u002Fissues) to request credit.\n\n## 📄 License\n\n[MIT + Commons Clause](https:\u002F\u002Fgithub.com\u002Fdavidhdev\u002Freact-bits\u002Fblob\u002Fmain\u002FLICENSE.md) — free for personal and commercial use.\n","这是一个面向 React 开发者的开源动画组件库，提供 110+ 个可交互、可高度定制的 UI 组件，涵盖文字动画、背景动效与交互式 UI 元素。核心特点包括轻量级设计、零运行时依赖、支持 JavaScript\u002FTypeScript 与 CSS\u002FTailwind 双技术栈组合，以及开箱即用的复制粘贴集成方式。适用于需要快速构建视觉表现力强、富有记忆点的营销页、作品集网站、SaaS 产品首页等注重用户体验的前端项目。",2,"2026-07-08 02:44:30","top_all"]