sinapse-ai 1.23.0 → 1.25.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (499) hide show
  1. package/.agents/skills/sinapse/SKILL.md +10 -0
  2. package/.agents/skills/sinapse-agent/SKILL.md +22 -0
  3. package/.agents/skills/sinapse-analyst/SKILL.md +29 -0
  4. package/.agents/skills/sinapse-animations/SKILL.md +28 -0
  5. package/.agents/skills/sinapse-architect/SKILL.md +31 -0
  6. package/.agents/skills/sinapse-brand/SKILL.md +28 -0
  7. package/.agents/skills/sinapse-claude/SKILL.md +28 -0
  8. package/.agents/skills/sinapse-cloning/SKILL.md +28 -0
  9. package/.agents/skills/sinapse-commercial/SKILL.md +28 -0
  10. package/.agents/skills/sinapse-content/SKILL.md +28 -0
  11. package/.agents/skills/sinapse-copy/SKILL.md +28 -0
  12. package/.agents/skills/sinapse-council/SKILL.md +28 -0
  13. package/.agents/skills/sinapse-courses/SKILL.md +28 -0
  14. package/.agents/skills/sinapse-cyber/SKILL.md +28 -0
  15. package/.agents/skills/sinapse-data-engineer/SKILL.md +31 -0
  16. package/.agents/skills/sinapse-design/SKILL.md +28 -0
  17. package/.agents/skills/sinapse-dev/SKILL.md +31 -0
  18. package/.agents/skills/sinapse-devops/SKILL.md +31 -0
  19. package/.agents/skills/sinapse-finance/SKILL.md +28 -0
  20. package/.agents/skills/sinapse-growth/SKILL.md +28 -0
  21. package/.agents/skills/sinapse-loop/SKILL.md +35 -0
  22. package/.agents/skills/sinapse-orqx/SKILL.md +44 -0
  23. package/.agents/skills/sinapse-paidmedia/SKILL.md +28 -0
  24. package/.agents/skills/sinapse-pm/SKILL.md +31 -0
  25. package/.agents/skills/sinapse-po/SKILL.md +31 -0
  26. package/.agents/skills/sinapse-product/SKILL.md +28 -0
  27. package/.agents/skills/sinapse-qa/SKILL.md +31 -0
  28. package/.agents/skills/sinapse-research/SKILL.md +28 -0
  29. package/.agents/skills/sinapse-sm/SKILL.md +27 -0
  30. package/.agents/skills/sinapse-spec-driven/SKILL.md +35 -0
  31. package/.agents/skills/sinapse-squad-creator/SKILL.md +31 -0
  32. package/.agents/skills/sinapse-storytelling/SKILL.md +28 -0
  33. package/.agents/skills/sinapse-swarm/SKILL.md +28 -0
  34. package/.agents/skills/sinapse-ux-design-expert/SKILL.md +24 -0
  35. package/.agents/skills/snps/SKILL.md +10 -0
  36. package/.agents/skills/snps-orqx/SKILL.md +10 -0
  37. package/.claude/agents/README.md +67 -0
  38. package/.claude/agents/sinapse-ad-copywriter.md +14 -0
  39. package/.claude/agents/sinapse-agent-forger.md +14 -0
  40. package/.claude/agents/sinapse-analyst.md +14 -0
  41. package/.claude/agents/sinapse-animation-interpreter.md +14 -0
  42. package/.claude/agents/sinapse-animation-performance-engineer.md +14 -0
  43. package/.claude/agents/sinapse-animations-orqx.md +14 -0
  44. package/.claude/agents/sinapse-architect.md +14 -0
  45. package/.claude/agents/sinapse-assessment-creator.md +14 -0
  46. package/.claude/agents/sinapse-audience-intelligence.md +14 -0
  47. package/.claude/agents/sinapse-blake-snyder.md +14 -0
  48. package/.claude/agents/sinapse-brand-archetype-strategist.md +14 -0
  49. package/.claude/agents/sinapse-brand-auditor.md +14 -0
  50. package/.claude/agents/sinapse-brand-collateral-designer.md +14 -0
  51. package/.claude/agents/sinapse-brand-compiler.md +14 -0
  52. package/.claude/agents/sinapse-brand-creative-engineer.md +14 -0
  53. package/.claude/agents/sinapse-brand-culture-architect.md +14 -0
  54. package/.claude/agents/sinapse-brand-growth-strategist.md +14 -0
  55. package/.claude/agents/sinapse-brand-identity-designer.md +14 -0
  56. package/.claude/agents/sinapse-brand-motion-vfx.md +14 -0
  57. package/.claude/agents/sinapse-brand-naming-specialist.md +14 -0
  58. package/.claude/agents/sinapse-brand-orqx.md +14 -0
  59. package/.claude/agents/sinapse-brand-positioning-strategist.md +14 -0
  60. package/.claude/agents/sinapse-brand-sonic-designer.md +14 -0
  61. package/.claude/agents/sinapse-brand-strategist.md +14 -0
  62. package/.claude/agents/sinapse-brand-system-architect.md +14 -0
  63. package/.claude/agents/sinapse-brand-voice-writer.md +14 -0
  64. package/.claude/agents/sinapse-brene-brown.md +14 -0
  65. package/.claude/agents/sinapse-budget-controller.md +14 -0
  66. package/.claude/agents/sinapse-campaign-analyst.md +14 -0
  67. package/.claude/agents/sinapse-charlie-munger.md +14 -0
  68. package/.claude/agents/sinapse-claude-mastery-chief.md +14 -0
  69. package/.claude/agents/sinapse-cloning-orqx.md +14 -0
  70. package/.claude/agents/sinapse-cloud-security-engineer.md +14 -0
  71. package/.claude/agents/sinapse-cognitive-extractor.md +14 -0
  72. package/.claude/agents/sinapse-commercial-orqx.md +14 -0
  73. package/.claude/agents/sinapse-competitive-intelligence.md +14 -0
  74. package/.claude/agents/sinapse-compliance-officer.md +14 -0
  75. package/.claude/agents/sinapse-config-engineer.md +14 -0
  76. package/.claude/agents/sinapse-content-analyst.md +14 -0
  77. package/.claude/agents/sinapse-content-capturer.md +14 -0
  78. package/.claude/agents/sinapse-content-engineer.md +14 -0
  79. package/.claude/agents/sinapse-content-governor.md +14 -0
  80. package/.claude/agents/sinapse-content-orqx.md +14 -0
  81. package/.claude/agents/sinapse-content-writer.md +14 -0
  82. package/.claude/agents/sinapse-conversion-writer.md +14 -0
  83. package/.claude/agents/sinapse-copy-editor.md +14 -0
  84. package/.claude/agents/sinapse-copy-orqx.md +14 -0
  85. package/.claude/agents/sinapse-copy-strategist.md +14 -0
  86. package/.claude/agents/sinapse-cost-optimizer.md +14 -0
  87. package/.claude/agents/sinapse-council-orqx.md +14 -0
  88. package/.claude/agents/sinapse-courses-orqx.md +14 -0
  89. package/.claude/agents/sinapse-creative-strategist.md +14 -0
  90. package/.claude/agents/sinapse-cro-persuasion.md +14 -0
  91. package/.claude/agents/sinapse-cro-specialist.md +14 -0
  92. package/.claude/agents/sinapse-cs-business-auditor.md +14 -0
  93. package/.claude/agents/sinapse-cs-client-success.md +14 -0
  94. package/.claude/agents/sinapse-cs-crm-specialist.md +14 -0
  95. package/.claude/agents/sinapse-cs-funnel-architect.md +14 -0
  96. package/.claude/agents/sinapse-cs-lead-generation-strategist.md +14 -0
  97. package/.claude/agents/sinapse-cs-offer-designer.md +14 -0
  98. package/.claude/agents/sinapse-cs-revops-analyst.md +14 -0
  99. package/.claude/agents/sinapse-cs-sales-closer.md +14 -0
  100. package/.claude/agents/sinapse-cs-sales-enablement.md +14 -0
  101. package/.claude/agents/sinapse-css-motion-artist.md +14 -0
  102. package/.claude/agents/sinapse-curriculum-designer.md +14 -0
  103. package/.claude/agents/sinapse-cyber-orqx.md +14 -0
  104. package/.claude/agents/sinapse-dan-harmon.md +14 -0
  105. package/.claude/agents/sinapse-data-engineer.md +14 -0
  106. package/.claude/agents/sinapse-data-synthesizer.md +14 -0
  107. package/.claude/agents/sinapse-deep-researcher.md +14 -0
  108. package/.claude/agents/sinapse-derek-sivers.md +14 -0
  109. package/.claude/agents/sinapse-design-orqx.md +14 -0
  110. package/.claude/agents/sinapse-design-system.md +14 -0
  111. package/.claude/agents/sinapse-developer.md +14 -0
  112. package/.claude/agents/sinapse-devops.md +14 -0
  113. package/.claude/agents/sinapse-direct-response-writer.md +14 -0
  114. package/.claude/agents/sinapse-dx-accessibility-specialist.md +14 -0
  115. package/.claude/agents/sinapse-dx-design-system-architect.md +14 -0
  116. package/.claude/agents/sinapse-dx-frontend-engineer.md +14 -0
  117. package/.claude/agents/sinapse-dx-interaction-designer.md +14 -0
  118. package/.claude/agents/sinapse-dx-performance-engineer.md +14 -0
  119. package/.claude/agents/sinapse-dx-ui-designer.md +14 -0
  120. package/.claude/agents/sinapse-dx-ux-strategist.md +14 -0
  121. package/.claude/agents/sinapse-editorial-strategist.md +14 -0
  122. package/.claude/agents/sinapse-email-sequence-strategist.md +14 -0
  123. package/.claude/agents/sinapse-finance-orqx.md +14 -0
  124. package/.claude/agents/sinapse-fiscal-compliance-br.md +14 -0
  125. package/.claude/agents/sinapse-forecast-strategist.md +14 -0
  126. package/.claude/agents/sinapse-funnel-copywriter.md +14 -0
  127. package/.claude/agents/sinapse-ga-analytics-engineer.md +14 -0
  128. package/.claude/agents/sinapse-ga-campaign-analyst.md +14 -0
  129. package/.claude/agents/sinapse-ga-cro-specialist.md +14 -0
  130. package/.claude/agents/sinapse-ga-data-analyst.md +14 -0
  131. package/.claude/agents/sinapse-ga-growth-hacker.md +14 -0
  132. package/.claude/agents/sinapse-ga-seo-strategist.md +14 -0
  133. package/.claude/agents/sinapse-generative-particle-engineer.md +14 -0
  134. package/.claude/agents/sinapse-google-ads-specialist.md +14 -0
  135. package/.claude/agents/sinapse-growth-orqx.md +14 -0
  136. package/.claude/agents/sinapse-headline-specialist.md +14 -0
  137. package/.claude/agents/sinapse-hooks-architect.md +14 -0
  138. package/.claude/agents/sinapse-incident-responder.md +14 -0
  139. package/.claude/agents/sinapse-joseph-campbell.md +14 -0
  140. package/.claude/agents/sinapse-kb-architect.md +14 -0
  141. package/.claude/agents/sinapse-keith-johnstone.md +14 -0
  142. package/.claude/agents/sinapse-kindra-hall.md +14 -0
  143. package/.claude/agents/sinapse-launch-strategist.md +14 -0
  144. package/.claude/agents/sinapse-lesson-architect.md +14 -0
  145. package/.claude/agents/sinapse-long-form-writer.md +14 -0
  146. package/.claude/agents/sinapse-market-analyst.md +14 -0
  147. package/.claude/agents/sinapse-marshall-ganz.md +14 -0
  148. package/.claude/agents/sinapse-mcp-integrator.md +14 -0
  149. package/.claude/agents/sinapse-meta-ads-specialist.md +14 -0
  150. package/.claude/agents/sinapse-mind-synthesizer.md +14 -0
  151. package/.claude/agents/sinapse-motion-choreographer.md +14 -0
  152. package/.claude/agents/sinapse-nancy-duarte.md +14 -0
  153. package/.claude/agents/sinapse-naval-ravikant.md +14 -0
  154. package/.claude/agents/sinapse-network-security-engineer.md +14 -0
  155. package/.claude/agents/sinapse-oren-klaff.md +14 -0
  156. package/.claude/agents/sinapse-paidmedia-orqx.md +14 -0
  157. package/.claude/agents/sinapse-park-howell.md +14 -0
  158. package/.claude/agents/sinapse-patrick-lencioni.md +14 -0
  159. package/.claude/agents/sinapse-penetration-tester.md +14 -0
  160. package/.claude/agents/sinapse-performance-engineer.md +14 -0
  161. package/.claude/agents/sinapse-persuasion-psychologist.md +14 -0
  162. package/.claude/agents/sinapse-peter-thiel.md +14 -0
  163. package/.claude/agents/sinapse-platform-aesthetic-director.md +14 -0
  164. package/.claude/agents/sinapse-platform-specialist.md +14 -0
  165. package/.claude/agents/sinapse-pm-creative-performance-analyst.md +14 -0
  166. package/.claude/agents/sinapse-pm-youtube-ads-specialist.md +14 -0
  167. package/.claude/agents/sinapse-premium-packaging-strategist.md +14 -0
  168. package/.claude/agents/sinapse-pricing-strategist.md +14 -0
  169. package/.claude/agents/sinapse-product-lead.md +14 -0
  170. package/.claude/agents/sinapse-product-orqx.md +14 -0
  171. package/.claude/agents/sinapse-product-surface-director.md +14 -0
  172. package/.claude/agents/sinapse-production-director.md +14 -0
  173. package/.claude/agents/sinapse-profitability-analyst.md +14 -0
  174. package/.claude/agents/sinapse-project-integrator.md +14 -0
  175. package/.claude/agents/sinapse-project-lead.md +14 -0
  176. package/.claude/agents/sinapse-proof-architect.md +14 -0
  177. package/.claude/agents/sinapse-ps-client-product-manager.md +14 -0
  178. package/.claude/agents/sinapse-ps-delivery-manager.md +14 -0
  179. package/.claude/agents/sinapse-ps-discovery-lead.md +14 -0
  180. package/.claude/agents/sinapse-ps-product-analyst.md +14 -0
  181. package/.claude/agents/sinapse-ps-product-ops-specialist.md +14 -0
  182. package/.claude/agents/sinapse-ps-product-strategist.md +14 -0
  183. package/.claude/agents/sinapse-quality-gate.md +14 -0
  184. package/.claude/agents/sinapse-ray-dalio.md +14 -0
  185. package/.claude/agents/sinapse-reid-hoffman.md +14 -0
  186. package/.claude/agents/sinapse-research-orqx.md +14 -0
  187. package/.claude/agents/sinapse-revenue-analyst.md +14 -0
  188. package/.claude/agents/sinapse-roadmap-sentinel.md +14 -0
  189. package/.claude/agents/sinapse-scroll-narrative-engineer.md +14 -0
  190. package/.claude/agents/sinapse-shader-artist.md +14 -0
  191. package/.claude/agents/sinapse-signal-intelligence.md +14 -0
  192. package/.claude/agents/sinapse-simon-sinek.md +14 -0
  193. package/.claude/agents/sinapse-skill-craftsman.md +14 -0
  194. package/.claude/agents/sinapse-slide-designer.md +14 -0
  195. package/.claude/agents/sinapse-snps-orqx.md +14 -0
  196. package/.claude/agents/sinapse-soc-analyst.md +14 -0
  197. package/.claude/agents/sinapse-sop-extractor.md +14 -0
  198. package/.claude/agents/sinapse-source-hunter.md +14 -0
  199. package/.claude/agents/sinapse-sprint-lead.md +14 -0
  200. package/.claude/agents/sinapse-squad-assembler.md +14 -0
  201. package/.claude/agents/sinapse-squad-creator.md +14 -0
  202. package/.claude/agents/sinapse-storytelling-orqx.md +14 -0
  203. package/.claude/agents/sinapse-swarm-orqx.md +14 -0
  204. package/.claude/agents/sinapse-threat-analyst.md +14 -0
  205. package/.claude/agents/sinapse-threejs-architect.md +14 -0
  206. package/.claude/agents/sinapse-trend-forecaster.md +14 -0
  207. package/.claude/agents/sinapse-ux-design-expert.md +14 -0
  208. package/.claude/agents/sinapse-ux-designer.md +14 -0
  209. package/.claude/agents/sinapse-yvon-chouinard.md +14 -0
  210. package/.claude/rules/mandatory-delegation-reference.md +1 -1
  211. package/.claude/rules/mandatory-delegation.md +1 -1
  212. package/.claude/rules/software-engineering-applicability.md +13 -0
  213. package/.claude/rules/squad-awareness.md +1 -1
  214. package/.claude/rules/token-economy.md +1 -1
  215. package/.claude/skill-manifest.json +41 -0
  216. package/.claude/skills/api-review.md +50 -0
  217. package/.claude/skills/component-check.md +47 -0
  218. package/.claude/skills/db-review.md +41 -0
  219. package/.claude/skills/sinapse/SKILL.md +11 -0
  220. package/.claude/skills/sinapse-agent/SKILL.md +11 -0
  221. package/.claude/skills/sinapse-analyst/SKILL.md +11 -0
  222. package/.claude/skills/sinapse-animations/SKILL.md +11 -0
  223. package/.claude/skills/sinapse-architect/SKILL.md +11 -0
  224. package/.claude/skills/sinapse-brand/SKILL.md +11 -0
  225. package/.claude/skills/sinapse-claude/SKILL.md +11 -0
  226. package/.claude/skills/sinapse-cloning/SKILL.md +11 -0
  227. package/.claude/skills/sinapse-commercial/SKILL.md +11 -0
  228. package/.claude/skills/sinapse-content/SKILL.md +11 -0
  229. package/.claude/skills/sinapse-copy/SKILL.md +11 -0
  230. package/.claude/skills/sinapse-council/SKILL.md +11 -0
  231. package/.claude/skills/sinapse-courses/SKILL.md +11 -0
  232. package/.claude/skills/sinapse-cyber/SKILL.md +11 -0
  233. package/.claude/skills/sinapse-data-engineer/SKILL.md +11 -0
  234. package/.claude/skills/sinapse-design/SKILL.md +11 -0
  235. package/.claude/skills/sinapse-dev/SKILL.md +11 -0
  236. package/.claude/skills/sinapse-devops/SKILL.md +11 -0
  237. package/.claude/skills/sinapse-finance/SKILL.md +11 -0
  238. package/.claude/skills/sinapse-growth/SKILL.md +11 -0
  239. package/.claude/skills/sinapse-loop/SKILL.md +11 -0
  240. package/.claude/skills/sinapse-orqx/SKILL.md +11 -0
  241. package/.claude/skills/sinapse-paidmedia/SKILL.md +11 -0
  242. package/.claude/skills/sinapse-pm/SKILL.md +11 -0
  243. package/.claude/skills/sinapse-po/SKILL.md +11 -0
  244. package/.claude/skills/sinapse-product/SKILL.md +11 -0
  245. package/.claude/skills/sinapse-qa/SKILL.md +11 -0
  246. package/.claude/skills/sinapse-research/SKILL.md +11 -0
  247. package/.claude/skills/sinapse-sm/SKILL.md +11 -0
  248. package/.claude/skills/sinapse-spec-driven/SKILL.md +11 -0
  249. package/.claude/skills/sinapse-squad-creator/SKILL.md +11 -0
  250. package/.claude/skills/sinapse-storytelling/SKILL.md +11 -0
  251. package/.claude/skills/sinapse-swarm/SKILL.md +11 -0
  252. package/.claude/skills/sinapse-ux-design-expert/SKILL.md +11 -0
  253. package/.claude/skills/snps/SKILL.md +11 -0
  254. package/.claude/skills/snps-orqx/SKILL.md +11 -0
  255. package/.claude/skills/story-update.md +52 -0
  256. package/.claude/skills/test-guard.md +41 -0
  257. package/.codex/agents/ad-copywriter.toml +3 -0
  258. package/.codex/agents/agent-forger.toml +3 -0
  259. package/.codex/agents/analyst.toml +3 -0
  260. package/.codex/agents/animation-interpreter.toml +3 -0
  261. package/.codex/agents/animation-performance-engineer.toml +3 -0
  262. package/.codex/agents/animations-orqx.toml +3 -0
  263. package/.codex/agents/architect.toml +3 -0
  264. package/.codex/agents/assessment-creator.toml +3 -0
  265. package/.codex/agents/audience-intelligence.toml +3 -0
  266. package/.codex/agents/blake-snyder.toml +3 -0
  267. package/.codex/agents/brand-archetype-strategist.toml +3 -0
  268. package/.codex/agents/brand-auditor.toml +3 -0
  269. package/.codex/agents/brand-collateral-designer.toml +3 -0
  270. package/.codex/agents/brand-compiler.toml +3 -0
  271. package/.codex/agents/brand-creative-engineer.toml +3 -0
  272. package/.codex/agents/brand-culture-architect.toml +3 -0
  273. package/.codex/agents/brand-growth-strategist.toml +3 -0
  274. package/.codex/agents/brand-identity-designer.toml +3 -0
  275. package/.codex/agents/brand-motion-vfx.toml +3 -0
  276. package/.codex/agents/brand-naming-specialist.toml +3 -0
  277. package/.codex/agents/brand-orqx.toml +3 -0
  278. package/.codex/agents/brand-positioning-strategist.toml +3 -0
  279. package/.codex/agents/brand-sonic-designer.toml +3 -0
  280. package/.codex/agents/brand-strategist.toml +3 -0
  281. package/.codex/agents/brand-system-architect.toml +3 -0
  282. package/.codex/agents/brand-voice-writer.toml +3 -0
  283. package/.codex/agents/brene-brown.toml +3 -0
  284. package/.codex/agents/budget-controller.toml +3 -0
  285. package/.codex/agents/campaign-analyst.toml +3 -0
  286. package/.codex/agents/charlie-munger.toml +3 -0
  287. package/.codex/agents/claude-mastery-chief.toml +3 -0
  288. package/.codex/agents/cloning-orqx.toml +3 -0
  289. package/.codex/agents/cloud-security-engineer.toml +3 -0
  290. package/.codex/agents/cognitive-extractor.toml +3 -0
  291. package/.codex/agents/commercial-orqx.toml +3 -0
  292. package/.codex/agents/competitive-intelligence.toml +3 -0
  293. package/.codex/agents/compliance-officer.toml +3 -0
  294. package/.codex/agents/config-engineer.toml +3 -0
  295. package/.codex/agents/content-analyst.toml +3 -0
  296. package/.codex/agents/content-capturer.toml +3 -0
  297. package/.codex/agents/content-engineer.toml +3 -0
  298. package/.codex/agents/content-governor.toml +3 -0
  299. package/.codex/agents/content-orqx.toml +3 -0
  300. package/.codex/agents/content-writer.toml +3 -0
  301. package/.codex/agents/conversion-writer.toml +3 -0
  302. package/.codex/agents/copy-editor.toml +3 -0
  303. package/.codex/agents/copy-orqx.toml +3 -0
  304. package/.codex/agents/copy-strategist.toml +3 -0
  305. package/.codex/agents/cost-optimizer.toml +3 -0
  306. package/.codex/agents/council-orqx.toml +3 -0
  307. package/.codex/agents/courses-orqx.toml +3 -0
  308. package/.codex/agents/creative-strategist.toml +3 -0
  309. package/.codex/agents/cro-persuasion.toml +3 -0
  310. package/.codex/agents/cro-specialist.toml +3 -0
  311. package/.codex/agents/cs-business-auditor.toml +3 -0
  312. package/.codex/agents/cs-client-success.toml +3 -0
  313. package/.codex/agents/cs-crm-specialist.toml +3 -0
  314. package/.codex/agents/cs-funnel-architect.toml +3 -0
  315. package/.codex/agents/cs-lead-generation-strategist.toml +3 -0
  316. package/.codex/agents/cs-offer-designer.toml +3 -0
  317. package/.codex/agents/cs-revops-analyst.toml +3 -0
  318. package/.codex/agents/cs-sales-closer.toml +3 -0
  319. package/.codex/agents/cs-sales-enablement.toml +3 -0
  320. package/.codex/agents/css-motion-artist.toml +3 -0
  321. package/.codex/agents/curriculum-designer.toml +3 -0
  322. package/.codex/agents/cyber-orqx.toml +3 -0
  323. package/.codex/agents/dan-harmon.toml +3 -0
  324. package/.codex/agents/data-engineer.toml +3 -0
  325. package/.codex/agents/data-synthesizer.toml +3 -0
  326. package/.codex/agents/deep-researcher.toml +3 -0
  327. package/.codex/agents/derek-sivers.toml +3 -0
  328. package/.codex/agents/design-orqx.toml +3 -0
  329. package/.codex/agents/design-system.toml +3 -0
  330. package/.codex/agents/developer.toml +3 -0
  331. package/.codex/agents/devops.toml +3 -0
  332. package/.codex/agents/direct-response-writer.toml +3 -0
  333. package/.codex/agents/dx-accessibility-specialist.toml +3 -0
  334. package/.codex/agents/dx-design-system-architect.toml +3 -0
  335. package/.codex/agents/dx-frontend-engineer.toml +3 -0
  336. package/.codex/agents/dx-interaction-designer.toml +3 -0
  337. package/.codex/agents/dx-performance-engineer.toml +3 -0
  338. package/.codex/agents/dx-ui-designer.toml +3 -0
  339. package/.codex/agents/dx-ux-strategist.toml +3 -0
  340. package/.codex/agents/editorial-strategist.toml +3 -0
  341. package/.codex/agents/email-sequence-strategist.toml +3 -0
  342. package/.codex/agents/finance-orqx.toml +3 -0
  343. package/.codex/agents/fiscal-compliance-br.toml +3 -0
  344. package/.codex/agents/forecast-strategist.toml +3 -0
  345. package/.codex/agents/funnel-copywriter.toml +3 -0
  346. package/.codex/agents/ga-analytics-engineer.toml +3 -0
  347. package/.codex/agents/ga-campaign-analyst.toml +3 -0
  348. package/.codex/agents/ga-cro-specialist.toml +3 -0
  349. package/.codex/agents/ga-data-analyst.toml +3 -0
  350. package/.codex/agents/ga-growth-hacker.toml +3 -0
  351. package/.codex/agents/ga-seo-strategist.toml +3 -0
  352. package/.codex/agents/generative-particle-engineer.toml +3 -0
  353. package/.codex/agents/google-ads-specialist.toml +3 -0
  354. package/.codex/agents/growth-orqx.toml +3 -0
  355. package/.codex/agents/headline-specialist.toml +3 -0
  356. package/.codex/agents/hooks-architect.toml +3 -0
  357. package/.codex/agents/incident-responder.toml +3 -0
  358. package/.codex/agents/joseph-campbell.toml +3 -0
  359. package/.codex/agents/kb-architect.toml +3 -0
  360. package/.codex/agents/keith-johnstone.toml +3 -0
  361. package/.codex/agents/kindra-hall.toml +3 -0
  362. package/.codex/agents/launch-strategist.toml +3 -0
  363. package/.codex/agents/lesson-architect.toml +3 -0
  364. package/.codex/agents/long-form-writer.toml +3 -0
  365. package/.codex/agents/market-analyst.toml +3 -0
  366. package/.codex/agents/marshall-ganz.toml +3 -0
  367. package/.codex/agents/mcp-integrator.toml +3 -0
  368. package/.codex/agents/meta-ads-specialist.toml +3 -0
  369. package/.codex/agents/mind-synthesizer.toml +3 -0
  370. package/.codex/agents/motion-choreographer.toml +3 -0
  371. package/.codex/agents/nancy-duarte.toml +3 -0
  372. package/.codex/agents/naval-ravikant.toml +3 -0
  373. package/.codex/agents/network-security-engineer.toml +3 -0
  374. package/.codex/agents/oren-klaff.toml +3 -0
  375. package/.codex/agents/paidmedia-orqx.toml +3 -0
  376. package/.codex/agents/park-howell.toml +3 -0
  377. package/.codex/agents/patrick-lencioni.toml +3 -0
  378. package/.codex/agents/penetration-tester.toml +3 -0
  379. package/.codex/agents/performance-engineer.toml +3 -0
  380. package/.codex/agents/persuasion-psychologist.toml +3 -0
  381. package/.codex/agents/peter-thiel.toml +3 -0
  382. package/.codex/agents/platform-aesthetic-director.toml +3 -0
  383. package/.codex/agents/platform-specialist.toml +3 -0
  384. package/.codex/agents/pm-creative-performance-analyst.toml +3 -0
  385. package/.codex/agents/pm-youtube-ads-specialist.toml +3 -0
  386. package/.codex/agents/premium-packaging-strategist.toml +3 -0
  387. package/.codex/agents/pricing-strategist.toml +3 -0
  388. package/.codex/agents/product-lead.toml +3 -0
  389. package/.codex/agents/product-orqx.toml +3 -0
  390. package/.codex/agents/product-surface-director.toml +3 -0
  391. package/.codex/agents/production-director.toml +3 -0
  392. package/.codex/agents/profitability-analyst.toml +3 -0
  393. package/.codex/agents/project-integrator.toml +3 -0
  394. package/.codex/agents/project-lead.toml +3 -0
  395. package/.codex/agents/proof-architect.toml +3 -0
  396. package/.codex/agents/ps-client-product-manager.toml +3 -0
  397. package/.codex/agents/ps-delivery-manager.toml +3 -0
  398. package/.codex/agents/ps-discovery-lead.toml +3 -0
  399. package/.codex/agents/ps-product-analyst.toml +3 -0
  400. package/.codex/agents/ps-product-ops-specialist.toml +3 -0
  401. package/.codex/agents/ps-product-strategist.toml +3 -0
  402. package/.codex/agents/quality-gate.toml +3 -0
  403. package/.codex/agents/ray-dalio.toml +3 -0
  404. package/.codex/agents/reid-hoffman.toml +3 -0
  405. package/.codex/agents/research-orqx.toml +3 -0
  406. package/.codex/agents/revenue-analyst.toml +3 -0
  407. package/.codex/agents/roadmap-sentinel.toml +3 -0
  408. package/.codex/agents/scroll-narrative-engineer.toml +3 -0
  409. package/.codex/agents/shader-artist.toml +3 -0
  410. package/.codex/agents/signal-intelligence.toml +3 -0
  411. package/.codex/agents/simon-sinek.toml +3 -0
  412. package/.codex/agents/skill-craftsman.toml +3 -0
  413. package/.codex/agents/slide-designer.toml +3 -0
  414. package/.codex/agents/snps-orqx.toml +3 -0
  415. package/.codex/agents/soc-analyst.toml +3 -0
  416. package/.codex/agents/sop-extractor.toml +3 -0
  417. package/.codex/agents/source-hunter.toml +3 -0
  418. package/.codex/agents/sprint-lead.toml +3 -0
  419. package/.codex/agents/squad-assembler.toml +3 -0
  420. package/.codex/agents/squad-creator.toml +3 -0
  421. package/.codex/agents/storytelling-orqx.toml +3 -0
  422. package/.codex/agents/swarm-orqx.toml +3 -0
  423. package/.codex/agents/threat-analyst.toml +3 -0
  424. package/.codex/agents/threejs-architect.toml +3 -0
  425. package/.codex/agents/trend-forecaster.toml +3 -0
  426. package/.codex/agents/ux-design-expert.toml +3 -0
  427. package/.codex/agents/ux-designer.toml +3 -0
  428. package/.codex/agents/yvon-chouinard.toml +3 -0
  429. package/.codex/catalog.json +19 -4
  430. package/.codex/command-registry.json +94 -0
  431. package/.codex/config.toml +8 -0
  432. package/.codex/delegation-matrix.json +39 -25
  433. package/.codex/delegation-parity.json +46 -41
  434. package/.codex/hooks/claude-compat.cjs +547 -0
  435. package/.codex/hooks.json +123 -0
  436. package/.codex/scripts/resolve-codex-agent.js +30 -1
  437. package/.codex/scripts/resolve-codex-workflow.js +283 -0
  438. package/.codex/scripts/sinapse-codex.js +309 -0
  439. package/.codex/scripts/sync-codex-native.js +614 -0
  440. package/.codex/scripts/validate-codex-native.js +287 -0
  441. package/.codex/skills/react-bits-frontend/SKILL.md +66 -0
  442. package/.codex/skills/react-bits-frontend/agents/openai.yaml +4 -0
  443. package/.codex/skills/react-bits-frontend/references/corpus-map.md +29 -0
  444. package/.codex/skills/sinapse/SKILL.md +10 -0
  445. package/.codex/skills/sinapse-agent/SKILL.md +22 -0
  446. package/.codex/skills/sinapse-claude/SKILL.md +1 -1
  447. package/.codex/skills/sinapse-loop/SKILL.md +35 -0
  448. package/.codex/skills/sinapse-orqx/SKILL.md +33 -14
  449. package/.codex/skills/sinapse-spec-driven/SKILL.md +35 -0
  450. package/.codex/skills/snps/SKILL.md +10 -0
  451. package/.codex/skills/snps-orqx/SKILL.md +10 -0
  452. package/.sinapse-ai/data/entity-registry.yaml +57 -31
  453. package/.sinapse-ai/development/agents/snps-orqx.md +14 -1
  454. package/.sinapse-ai/install-manifest.yaml +16 -12
  455. package/.sinapse-ai/product/templates/statusline/agent-badges.json +37 -37
  456. package/.sinapse-ai/product/templates/statusline/track-agent-clear.cjs +22 -3
  457. package/.sinapse-ai/product/templates/statusline/track-agent.cjs +94 -7
  458. package/.sinapse-ai/product/templates/statusline/track-delegation.cjs +162 -0
  459. package/AGENTS.md +5 -4
  460. package/CHANGELOG.md +38 -2
  461. package/README.en.md +1 -1
  462. package/README.md +25 -10
  463. package/bin/commands/install.js +56 -41
  464. package/bin/commands/uninstall.js +57 -4
  465. package/bin/commands/update.js +32 -21
  466. package/bin/lib/command-generator.js +25 -3
  467. package/bin/lib/global-provider-adapters.js +136 -0
  468. package/bin/lib/setup-statusline.js +43 -12
  469. package/bin/utils/validate-publish.js +43 -10
  470. package/docs/framework/codex-parity/codex-native-runtime-v2.md +230 -0
  471. package/docs/framework/codex-parity/codex-workflow-task-parity.md +21 -7
  472. package/docs/framework/react-bits/animations.md +49 -0
  473. package/docs/framework/react-bits/audit-findings.md +103 -0
  474. package/docs/framework/react-bits/backgrounds.md +63 -0
  475. package/docs/framework/react-bits/catalog-summary.json +61 -0
  476. package/docs/framework/react-bits/components.md +58 -0
  477. package/docs/framework/react-bits/implementation-playbook.md +161 -0
  478. package/docs/framework/react-bits/index.md +130 -0
  479. package/docs/framework/react-bits/inventory.json +9333 -0
  480. package/docs/framework/react-bits/text-animations.md +41 -0
  481. package/docs/framework/software-engineering-applicability.md +31 -0
  482. package/docs/getting-started.md +6 -2
  483. package/docs/installation/README.md +2 -2
  484. package/package.json +18 -5
  485. package/packages/engineering-applicability/fixtures.json +52 -0
  486. package/packages/engineering-applicability/index.js +150 -0
  487. package/packages/installer/src/installer/sinapse-ai-installer.js +87 -2
  488. package/packages/installer/src/updater/index.js +34 -13
  489. package/packages/installer/src/wizard/feedback.js +1 -1
  490. package/packages/installer/src/wizard/ide-config-generator.js +26 -0
  491. package/packages/installer/src/wizard/index.js +101 -74
  492. package/scripts/gen-agent-badges.js +17 -1
  493. package/scripts/release-readiness.js +9 -3
  494. package/scripts/research/generate-react-bits-catalog.mjs +206 -0
  495. package/scripts/sync-provider-adapters.js +203 -0
  496. package/scripts/validate-provider-adapters.js +127 -0
  497. package/squads/squad-animations/knowledge-base/react-bits-operational-guide.md +43 -0
  498. package/squads/squad-animations/squad.yaml +10 -5
  499. package/squads/squad-animations/tasks/orchestrate-react-bits-frontend.md +60 -0
package/docs/framework/react-bits/audit-findings.md ADDED
@@ -0,0 +1,103 @@
1
+ # React Bits - achados de auditoria do snapshot
2
+
3
+ ## Cobertura e proveniência
4
+
5
+ - Repositório e registry confirmados no SHA
6
+ `3acbd54115330a42e39f63dda2d4859e998b6684`, de 14/07/2026.
7
+ - 139 componentes reais: 31 Animations, 23 TextAnimations, 40 Components e 45
8
+ Backgrounds.
9
+ - 556 itens publicados no registry, quatro nomes de variante por componente.
10
+ - 139 demos com PropTable e mais de 1.600 entradas documentadas de props.
11
+ - O slogan “140+” é aproximado/promocional e não deve ser usado como contagem exata.
12
+
13
+ ## Gap de variante funcional
14
+
15
+ `CurvedInput` tem implementação funcional apenas em `JS-CSS`. Os arquivos e os
16
+ payloads publicados de `JS-TW`, `TS-CSS` e `TS-TW` existem, mas o código principal tem
17
+ zero bytes. Portanto, existência no registry não prova capacidade funcional. O
18
+ gerador SINAPSE mede bytes e registra `incompleteVariants`.
19
+
20
+ ## Divergências de API/documentação
21
+
22
+ - `AnimatedContent`: tabela escreve `dissappearAfter`; fonte usa `disappearAfter`.
23
+ - `GridDistortion`: tabela escreve `imgageSrc`; fonte usa `imageSrc`.
24
+ - `ASCIIText`: `strokeColor` aparece como não implementada.
25
+ - `FallingText`: `highlightClass` existe no JS-CSS, mas não é consistente nas outras
26
+ variantes; `wordSpacing` aparece na tabela sem equivalente nas fontes TS.
27
+ - `Ferrofluid`: `backgroundColor` é duplicada na tabela.
28
+ - `LogoLoop` fica dentro do objeto `textAnimations` em `Components.js`, mas metadata,
29
+ navegação e URL o tratam corretamente como Animation.
30
+
31
+ Regra: em conflito, usar registry para dependências e código da variante escolhida
32
+ para API/comportamento; tratar a PropTable como interface de documentação, não como
33
+ prova final.
34
+
35
+ ## Divergências de instalação
36
+
37
+ - README e o gerador das páginas usam shadcn com alias `@react-bits/...`.
38
+ - `Installation.jsx` e `llms.txt` também mostram shadcn por URL direta. Ambos são
39
+ formatos oficiais, mas a documentação não é uniforme.
40
+ - A página de instalação lista variantes jsrepo antigas (`default`, `tailwind`,
41
+ `ts/default`, `ts/tailwind`), enquanto o registry/comando atual usa `JS-CSS`,
42
+ `JS-TW`, `TS-CSS`, `TS-TW`.
43
+ - `Lanyard` marca `dependencyResolution: manual`; seu registry não expressa todas as
44
+ dependências necessárias. Consultar demo e fonte.
45
+
46
+ ## Padrões técnicos observados
47
+
48
+ Os padrões se sobrepõem; um componente pode aparecer em várias linhas:
49
+
50
+ | Padrão no JS-CSS | Componentes |
51
+ | ----------------------- | ----------: |
52
+ | `requestAnimationFrame` | 78 |
53
+ | interação pointer/touch | 76 |
54
+ | WebGL ou shader | 43 |
55
+ | `ResizeObserver` | 34 |
56
+ | OGL | 31 |
57
+ | GSAP | 28 |
58
+ | Three.js/R3F | 23 |
59
+ | Canvas 2D | 23 |
60
+ | Motion | 20 |
61
+ | `IntersectionObserver` | 17 |
62
+ | SVG | 12 |
63
+ | CSS `@keyframes` | 4 |
64
+
65
+ Conclusão operacional: a maior parte do catálogo exige disciplina de lifecycle,
66
+ render loop, resize, pointer e GPU. Não tratar os snippets como CSS decorativo trivial.
67
+
68
+ ## Dependências com discrepância
69
+
70
+ Há diferenças entre demo/manual e registry em pelo menos FadeContent, GradualBlur,
71
+ MagicRings, ASCIIText, GradientText, ShinyText, CardNav, Carousel, Lanyard, PillNav,
72
+ Ballpit e GridScan. Também há variantes com conjuntos diferentes, como ElasticSlider
73
+ e Ballpit. O `inventory.json` registra dependências por variante.
74
+
75
+ ## Ferramentas oficiais fora dos 139 componentes
76
+
77
+ - [Background Studio](https://reactbits.dev/tools/background-studio): customiza
78
+ backgrounds e exporta vídeo, imagem ou código.
79
+ - [Shape Magic](https://reactbits.dev/tools/shape-magic): cria formas/blobs e exporta
80
+ SVG, PNG, JPG, React ou CSS clip-path.
81
+ - [Texture Lab](https://reactbits.dev/tools/texture-lab): aplica noise, dithering,
82
+ halftone, ASCII e outros efeitos, com exportação/presets.
83
+
84
+ As três rotas têm implementação lazy real no snapshot. O sitemap não lista `/tools`,
85
+ as três subrotas nem `/get-started/index`; isso é omissão de SEO, não ausência.
86
+
87
+ ## Comandos do repositório upstream
88
+
89
+ | Comando | Função |
90
+ | ------------------------------------- | ------------------------------------------------ |
91
+ | `npm run dev` | registry watch + Vite |
92
+ | `npm run build` | registry build + llms.txt + sitemap + Vite build |
93
+ | `npm run new:component <tipo> <nome>` | cria estrutura inicial de componente |
94
+ | `npm run registry:build` | gera `public/r` via jsrepo |
95
+ | `npm run registry:dev` | observa e regenera registry |
96
+ | `npm run llms:text` | gera índice textual para LLMs |
97
+ | `npm run sitemap` | gera sitemap |
98
+ | `npm run lint` | ESLint sem warnings |
99
+ | `npm run format` | Prettier |
100
+
101
+ O gerador upstream cria árvores e arquivos, mas não garante implementação equivalente
102
+ nas quatro variantes. Toda contribuição precisa revisar código, demo, metadata,
103
+ registry, desktop, mobile e console.
package/docs/framework/react-bits/backgrounds.md ADDED
@@ -0,0 +1,63 @@
1
+ # React Bits - Backgrounds
2
+
3
+ > Snapshot oficial: `3acbd54115330a42e39f63dda2d4859e998b6684` (2026-07-14T17:21:39+03:00). Total nesta categoria: **45**.
4
+
5
+ Cada item abaixo aponta para a documentacao e para o codigo TypeScript/CSS oficial fixado no commit pesquisado.
6
+
7
+ | Componente | O que faz | Dependencias | Props publicas | Variantes |
8
+ | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------ | ---------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ---------------------------- |
9
+ | [Aurora](https://reactbits.dev/backgrounds/aurora) ([fonte](https://github.com/DavidHDev/react-bits/tree/3acbd54115330a42e39f63dda2d4859e998b6684/src/ts-default/Backgrounds/Aurora)) | Flowing aurora gradient background. | `ogl@^1.0.11` | `colorStops`, `speed`, `blend`, `amplitude` | JS-CSS, JS-TW, TS-CSS, TS-TW |
10
+ | [Balatro](https://reactbits.dev/backgrounds/balatro) ([fonte](https://github.com/DavidHDev/react-bits/tree/3acbd54115330a42e39f63dda2d4859e998b6684/src/ts-default/Backgrounds/Balatro)) | The balatro shader, fully customizalbe and interactive. | `ogl@^1.0.11` | `spinRotation`, `spinSpeed`, `offset`, `color1`, `color2`, `color3`, `contrast`, `lighting`, `spinAmount`, `pixelFilter`, `spinEase`, `isRotate`, `mouseInteraction` | JS-CSS, JS-TW, TS-CSS, TS-TW |
11
+ | [Ballpit](https://reactbits.dev/backgrounds/ballpit) ([fonte](https://github.com/DavidHDev/react-bits/tree/3acbd54115330a42e39f63dda2d4859e998b6684/src/ts-default/Backgrounds/Ballpit)) | Physics ball pit simulation with bouncing colorful spheres. | `three@^0.180.0 gsap@^3.13.0` | `count`, `gravity`, `friction`, `wallBounce`, `followCursor`, `colors`, `ambientColor`, `ambientIntensity`, `lightIntensity`, `minSize`, `maxSize`, `size0`, `maxVelocity`, `maxX`, `maxY`, `maxZ` | JS-CSS, JS-TW, TS-CSS, TS-TW |
12
+ | [Beams](https://reactbits.dev/backgrounds/beams) ([fonte](https://github.com/DavidHDev/react-bits/tree/3acbd54115330a42e39f63dda2d4859e998b6684/src/ts-default/Backgrounds/Beams)) | Crossing animated ribbons with customizable properties. | `three@^0.180.0 @react-three/fiber@^9.3.0 @react-three/drei@^10.7.4` | `beamWidth`, `beamHeight`, `beamNumber`, `lightColor`, `speed`, `noiseIntensity`, `scale`, `rotation` | JS-CSS, JS-TW, TS-CSS, TS-TW |
13
+ | [ColorBends](https://reactbits.dev/backgrounds/color-bends) ([fonte](https://github.com/DavidHDev/react-bits/tree/3acbd54115330a42e39f63dda2d4859e998b6684/src/ts-default/Backgrounds/ColorBends)) | Vibrant color bends with smooth flowing animation. | `three@^0.180.0` | `rotation`, `autoRotate`, `speed`, `colors`, `transparent`, `scale`, `frequency`, `warpStrength`, `mouseInfluence`, `parallax`, `noise`, `iterations`, `intensity`, `bandWidth`, `className`, `style` | JS-CSS, JS-TW, TS-CSS, TS-TW |
14
+ | [DarkVeil](https://reactbits.dev/backgrounds/dark-veil) ([fonte](https://github.com/DavidHDev/react-bits/tree/3acbd54115330a42e39f63dda2d4859e998b6684/src/ts-default/Backgrounds/DarkVeil)) | Subtle dark background with a smooth animation and postprocessing. | `ogl@^1.0.11` | `hueShift`, `noiseIntensity`, `scanlineIntensity`, `speed`, `scanlineFrequency`, `warpAmount`, `resolutionScale` | JS-CSS, JS-TW, TS-CSS, TS-TW |
15
+ | [Dither](https://reactbits.dev/backgrounds/dither) ([fonte](https://github.com/DavidHDev/react-bits/tree/3acbd54115330a42e39f63dda2d4859e998b6684/src/ts-default/Backgrounds/Dither)) | Retro dithered noise shader background. | `@react-three/fiber@^9.3.0 @react-three/postprocessing@^3.0.4 postprocessing@^6.36.0 three@^0.180.0` | `waveSpeed`, `waveFrequency`, `waveAmplitude`, `waveColor`, `colorNum`, `pixelSize`, `disableAnimation`, `enableMouseInteraction`, `mouseRadius` | JS-CSS, JS-TW, TS-CSS, TS-TW |
16
+ | [DotField](https://reactbits.dev/backgrounds/dot-field) ([fonte](https://github.com/DavidHDev/react-bits/tree/3acbd54115330a42e39f63dda2d4859e998b6684/src/ts-default/Backgrounds/DotField)) | Interactive dot grid with cursor bulge, glow, sparkle, and wave effects. | `none` | `dotRadius`, `dotSpacing`, `cursorRadius`, `cursorForce`, `bulgeOnly`, `bulgeStrength`, `glowRadius`, `sparkle`, `waveAmplitude`, `gradientFrom`, `gradientTo`, `glowColor` | JS-CSS, JS-TW, TS-CSS, TS-TW |
17
+ | [DotGrid](https://reactbits.dev/backgrounds/dot-grid) ([fonte](https://github.com/DavidHDev/react-bits/tree/3acbd54115330a42e39f63dda2d4859e998b6684/src/ts-default/Backgrounds/DotGrid)) | Animated dot grid with cursor interactions. | `gsap@^3.13.0` | `dotSize`, `gap`, `baseColor`, `activeColor`, `proximity`, `speedTrigger`, `shockRadius`, `shockStrength`, `maxSpeed`, `resistance`, `returnDuration`, `className`, `style` | JS-CSS, JS-TW, TS-CSS, TS-TW |
18
+ | [EvilEye](https://reactbits.dev/backgrounds/evil-eye) ([fonte](https://github.com/DavidHDev/react-bits/tree/3acbd54115330a42e39f63dda2d4859e998b6684/src/ts-default/Backgrounds/EvilEye)) | Procedural evil eye shader with animated iris, slit pupil, and fiery outer glow. | `ogl@^1.0.11` | `eyeColor`, `intensity`, `pupilSize`, `irisWidth`, `glowIntensity`, `scale`, `noiseScale`, `pupilFollow`, `flameSpeed`, `backgroundColor` | JS-CSS, JS-TW, TS-CSS, TS-TW |
19
+ | [FaultyTerminal](https://reactbits.dev/backgrounds/faulty-terminal) ([fonte](https://github.com/DavidHDev/react-bits/tree/3acbd54115330a42e39f63dda2d4859e998b6684/src/ts-default/Backgrounds/FaultyTerminal)) | Terminal CRT scanline squares effect with flicker + noise. | `ogl@^1.0.11` | `scale`, `gridMul`, `digitSize`, `timeScale`, `pause`, `scanlineIntensity`, `glitchAmount`, `flickerAmount`, `noiseAmp`, `chromaticAberration`, `dither`, `curvature`, `tint`, `mouseReact`, `mouseStrength`, `pageLoadAnimation`, `brightness`, `className`, `style` | JS-CSS, JS-TW, TS-CSS, TS-TW |
20
+ | [Ferrofluid](https://reactbits.dev/backgrounds/ferrofluid) ([fonte](https://github.com/DavidHDev/react-bits/tree/3acbd54115330a42e39f63dda2d4859e998b6684/src/ts-default/Backgrounds/Ferrofluid)) | A churning magnetic fluid traced by glowing contour lines, with a cursor magnet. | `ogl@^1.0.11` | `colors`, `backgroundColor`, `speed`, `scale`, `turbulence`, `fluidity`, `rimWidth`, `sharpness`, `shimmer`, `glow`, `flowDirection`, `opacity`, `mouseInteraction`, `mouseStrength`, `mouseRadius`, `mouseDampening`, `mixBlendMode`, `paused`, `dpr`, `className` | JS-CSS, JS-TW, TS-CSS, TS-TW |
21
+ | [FloatingLines](https://reactbits.dev/backgrounds/floating-lines) ([fonte](https://github.com/DavidHDev/react-bits/tree/3acbd54115330a42e39f63dda2d4859e998b6684/src/ts-default/Backgrounds/FloatingLines)) | 3D floating lines that react to cursor movement. | `three@^0.180.0` | `linesGradient`, `enabledWaves`, `lineCount`, `lineDistance`, `topWavePosition`, `middleWavePosition`, `bottomWavePosition`, `animationSpeed`, `interactive`, `bendRadius`, `bendStrength`, `mouseDamping`, `parallax`, `parallaxStrength`, `mixBlendMode` | JS-CSS, JS-TW, TS-CSS, TS-TW |
22
+ | [Galaxy](https://reactbits.dev/backgrounds/galaxy) ([fonte](https://github.com/DavidHDev/react-bits/tree/3acbd54115330a42e39f63dda2d4859e998b6684/src/ts-default/Backgrounds/Galaxy)) | Parallax realistic starfield with pointer interactions. | `ogl@^1.0.11` | `focal`, `rotation`, `starSpeed`, `density`, `hueShift`, `disableAnimation`, `speed`, `mouseInteraction`, `glowIntensity`, `saturation`, `mouseRepulsion`, `twinkleIntensity`, `rotationSpeed`, `repulsionStrength`, `autoCenterRepulsion`, `transparent` | JS-CSS, JS-TW, TS-CSS, TS-TW |
23
+ | [GradientBlinds](https://reactbits.dev/backgrounds/gradient-blinds) ([fonte](https://github.com/DavidHDev/react-bits/tree/3acbd54115330a42e39f63dda2d4859e998b6684/src/ts-default/Backgrounds/GradientBlinds)) | Layered gradient blinds with spotlight and noise distortion. | `ogl@^1.0.11` | `gradientColors`, `angle`, `noise`, `blindCount`, `blindMinWidth`, `mouseDampening`, `mirrorGradient`, `spotlightRadius`, `spotlightSoftness`, `spotlightOpacity`, `distortAmount`, `shineDirection`, `mixBlendMode`, `paused`, `dpr`, `className` | JS-CSS, JS-TW, TS-CSS, TS-TW |
24
+ | [Grainient](https://reactbits.dev/backgrounds/grainient) ([fonte](https://github.com/DavidHDev/react-bits/tree/3acbd54115330a42e39f63dda2d4859e998b6684/src/ts-default/Backgrounds/Grainient)) | Grainy gradient swirls with soft wave distortion. | `ogl@^1.0.11` | `color1`, `color2`, `color3`, `timeSpeed`, `colorBalance`, `warpStrength`, `warpFrequency`, `warpSpeed`, `warpAmplitude`, `blendAngle`, `blendSoftness`, `rotationAmount`, `noiseScale`, `grainAmount`, `grainScale`, `grainAnimated`, `contrast`, `gamma`, `saturation`, `centerX`, `centerY`, `zoom`, `className` | JS-CSS, JS-TW, TS-CSS, TS-TW |
25
+ | [GridDistortion](https://reactbits.dev/backgrounds/grid-distortion) ([fonte](https://github.com/DavidHDev/react-bits/tree/3acbd54115330a42e39f63dda2d4859e998b6684/src/ts-default/Backgrounds/GridDistortion)) | Warped grid mesh distorts smoothly reacting to cursor. | `three@^0.180.0` | `imgageSrc`, `grid`, `mouse`, `relaxation`, `strength`, `className` | JS-CSS, JS-TW, TS-CSS, TS-TW |
26
+ | [GridMotion](https://reactbits.dev/backgrounds/grid-motion) ([fonte](https://github.com/DavidHDev/react-bits/tree/3acbd54115330a42e39f63dda2d4859e998b6684/src/ts-default/Backgrounds/GridMotion)) | Perspective moving grid lines based on cusror position. | `gsap@^3.13.0` | `items`, `gradientColor` | JS-CSS, JS-TW, TS-CSS, TS-TW |
27
+ | [GridScan](https://reactbits.dev/backgrounds/grid-scan) ([fonte](https://github.com/DavidHDev/react-bits/tree/3acbd54115330a42e39f63dda2d4859e998b6684/src/ts-default/Backgrounds/GridScan)) | Animated grid room 3D scan effect and cool interactions. | `face-api.js@^0.22.2 postprocessing@^6.36.0 three@^0.180.0` | `enableWebcam`, `showPreview`, `modelsPath`, `sensitivity`, `lineThickness`, `linesColor`, `gridScale`, `lineStyle`, `lineJitter`, `enablePost`, `bloomIntensity`, `bloomThreshold`, `bloomSmoothing`, `chromaticAberration`, `noiseIntensity`, `scanColor`, `scanOpacity`, `scanDirection`, `scanSoftness`, `scanGlow`, `scanPhaseTaper`, `scanDuration`, `scanDelay`, `enableGyro`, `scanOnClick`, `snapBackDelay`, `className`, `style` | JS-CSS, JS-TW, TS-CSS, TS-TW |
28
+ | [Hyperspeed](https://reactbits.dev/backgrounds/hyperspeed) ([fonte](https://github.com/DavidHDev/react-bits/tree/3acbd54115330a42e39f63dda2d4859e998b6684/src/ts-default/Backgrounds/Hyperspeed)) | Animated lines continuously moving to simulate hyperspace travel on click hold. | `postprocessing@^6.36.0 three@^0.180.0` | `effectOptions` | JS-CSS, JS-TW, TS-CSS, TS-TW |
29
+ | [Iridescence](https://reactbits.dev/backgrounds/iridescence) ([fonte](https://github.com/DavidHDev/react-bits/tree/3acbd54115330a42e39f63dda2d4859e998b6684/src/ts-default/Backgrounds/Iridescence)) | Slick iridescent shader with shifting waves. | `ogl@^1.0.11` | `color`, `speed`, `amplitude`, `mouseReact` | JS-CSS, JS-TW, TS-CSS, TS-TW |
30
+ | [LetterGlitch](https://reactbits.dev/backgrounds/letter-glitch) ([fonte](https://github.com/DavidHDev/react-bits/tree/3acbd54115330a42e39f63dda2d4859e998b6684/src/ts-default/Backgrounds/LetterGlitch)) | Matrix style letter animation. | `none` | `glitchColors`, `glitchSpeed`, `centerVignette`, `outerVignette`, `smooth`, `characters` | JS-CSS, JS-TW, TS-CSS, TS-TW |
31
+ | [Lightfall](https://reactbits.dev/backgrounds/lightfall) ([fonte](https://github.com/DavidHDev/react-bits/tree/3acbd54115330a42e39f63dda2d4859e998b6684/src/ts-default/Backgrounds/Lightfall)) | Colorful light streaks raining down a glowing tunnel with a cursor light. | `ogl@^1.0.11` | `colors`, `backgroundColor`, `speed`, `streakCount`, `streakWidth`, `streakLength`, `glow`, `density`, `twinkle`, `zoom`, `backgroundGlow`, `opacity`, `mouseInteraction`, `mouseStrength`, `mouseRadius`, `mouseDampening`, `mixBlendMode`, `paused`, `dpr`, `className` | JS-CSS, JS-TW, TS-CSS, TS-TW |
32
+ | [Lightning](https://reactbits.dev/backgrounds/lightning) ([fonte](https://github.com/DavidHDev/react-bits/tree/3acbd54115330a42e39f63dda2d4859e998b6684/src/ts-default/Backgrounds/Lightning)) | Procedural lightning bolts with branching and glow flicker. | `none` | `hue`, `xOffset`, `speed`, `intensity`, `size` | JS-CSS, JS-TW, TS-CSS, TS-TW |
33
+ | [LightPillar](https://reactbits.dev/backgrounds/light-pillar) ([fonte](https://github.com/DavidHDev/react-bits/tree/3acbd54115330a42e39f63dda2d4859e998b6684/src/ts-default/Backgrounds/LightPillar)) | Vertical pillar of light with glow effects. | `three@^0.180.0` | `topColor`, `bottomColor`, `intensity`, `rotationSpeed`, `interactive`, `glowAmount`, `pillarWidth`, `pillarHeight`, `noiseIntensity`, `className`, `mixBlendMode`, `pillarRotation`, `quality` | JS-CSS, JS-TW, TS-CSS, TS-TW |
34
+ | [LightRays](https://reactbits.dev/backgrounds/light-rays) ([fonte](https://github.com/DavidHDev/react-bits/tree/3acbd54115330a42e39f63dda2d4859e998b6684/src/ts-default/Backgrounds/LightRays)) | Volumetric light rays/beams with customizable direction. | `ogl@^1.0.11` | `raysOrigin`, `raysColor`, `raysSpeed`, `lightSpread`, `rayLength`, `pulsating`, `fadeDistance`, `saturation`, `followMouse`, `mouseInfluence`, `noiseAmount`, `distortion`, `className` | JS-CSS, JS-TW, TS-CSS, TS-TW |
35
+ | [LineWaves](https://reactbits.dev/backgrounds/line-waves) ([fonte](https://github.com/DavidHDev/react-bits/tree/3acbd54115330a42e39f63dda2d4859e998b6684/src/ts-default/Backgrounds/LineWaves)) | Animated line wave pattern with colorful warped distortion. | `ogl@^1.0.11` | `speed`, `innerLineCount`, `outerLineCount`, `warpIntensity`, `rotation`, `edgeFadeWidth`, `colorCycleSpeed`, `brightness`, `color1`, `color2`, `color3`, `enableMouseInteraction`, `mouseInfluence` | JS-CSS, JS-TW, TS-CSS, TS-TW |
36
+ | [LiquidChrome](https://reactbits.dev/backgrounds/liquid-chrome) ([fonte](https://github.com/DavidHDev/react-bits/tree/3acbd54115330a42e39f63dda2d4859e998b6684/src/ts-default/Backgrounds/LiquidChrome)) | Liquid metallic chrome shader with flowing reflective surface. | `ogl@^1.0.11` | `baseColor`, `speed`, `amplitude`, `frequencyX`, `frequencyY`, `interactive` | JS-CSS, JS-TW, TS-CSS, TS-TW |
37
+ | [LiquidEther](https://reactbits.dev/backgrounds/liquid-ether) ([fonte](https://github.com/DavidHDev/react-bits/tree/3acbd54115330a42e39f63dda2d4859e998b6684/src/ts-default/Backgrounds/LiquidEther)) | Interactive liquid shader with flowing distortion and customizable colors. | `three@^0.180.0` | `colors`, `mouseForce`, `cursorSize`, `resolution`, `dt`, `BFECC`, `isViscous`, `viscous`, `iterationsViscous`, `iterationsPoisson`, `isBounce`, `autoDemo`, `autoSpeed`, `autoIntensity`, `takeoverDuration`, `autoResumeDelay`, `autoRampDuration`, `className`, `style` | JS-CSS, JS-TW, TS-CSS, TS-TW |
38
+ | [Orb](https://reactbits.dev/backgrounds/orb) ([fonte](https://github.com/DavidHDev/react-bits/tree/3acbd54115330a42e39f63dda2d4859e998b6684/src/ts-default/Backgrounds/Orb)) | Floating energy orb with customizable hover effect. | `ogl@^1.0.11` | `hue`, `hoverIntensity`, `rotateOnHover`, `forceHoverState`, `backgroundColor` | JS-CSS, JS-TW, TS-CSS, TS-TW |
39
+ | [Particles](https://reactbits.dev/backgrounds/particles) ([fonte](https://github.com/DavidHDev/react-bits/tree/3acbd54115330a42e39f63dda2d4859e998b6684/src/ts-default/Backgrounds/Particles)) | Configurable particle system. | `ogl@^1.0.11` | `particleCount`, `particleSpread`, `speed`, `particleColors`, `moveParticlesOnHover`, `particleHoverFactor`, `alphaParticles`, `particleBaseSize`, `sizeRandomness`, `cameraDistance`, `disableRotation`, `pixelRatio` | JS-CSS, JS-TW, TS-CSS, TS-TW |
40
+ | [PixelBlast](https://reactbits.dev/backgrounds/pixel-blast) ([fonte](https://github.com/DavidHDev/react-bits/tree/3acbd54115330a42e39f63dda2d4859e998b6684/src/ts-default/Backgrounds/PixelBlast)) | Exploding pixel particle bursts with optional liquid postprocessing. | `postprocessing@^6.36.0 three@^0.180.0` | `variant`, `pixelSize`, `color`, `patternScale`, `patternDensity`, `pixelSizeJitter`, `enableRipples`, `rippleSpeed`, `rippleThickness`, `rippleIntensityScale`, `liquid`, `liquidStrength`, `liquidRadius`, `liquidWobbleSpeed`, `speed`, `edgeFade`, `noiseAmount`, `transparent` | JS-CSS, JS-TW, TS-CSS, TS-TW |
41
+ | [PixelSnow](https://reactbits.dev/backgrounds/pixel-snow) ([fonte](https://github.com/DavidHDev/react-bits/tree/3acbd54115330a42e39f63dda2d4859e998b6684/src/ts-default/Backgrounds/PixelSnow)) | Falling pixelated snow effect with customizable density and speed. | `three@^0.180.0` | `color`, `flakeSize`, `minFlakeSize`, `pixelResolution`, `speed`, `depthFade`, `farPlane`, `brightness`, `gamma`, `density`, `variant`, `direction`, `className`, `style` | JS-CSS, JS-TW, TS-CSS, TS-TW |
42
+ | [Plasma](https://reactbits.dev/backgrounds/plasma) ([fonte](https://github.com/DavidHDev/react-bits/tree/3acbd54115330a42e39f63dda2d4859e998b6684/src/ts-default/Backgrounds/Plasma)) | Organic plasma gradients swirl + morph with smooth turbulence. | `ogl@^1.0.11` | `color`, `speed`, `direction`, `scale`, `opacity`, `mouseInteractive` | JS-CSS, JS-TW, TS-CSS, TS-TW |
43
+ | [PlasmaWave](https://reactbits.dev/backgrounds/plasma-wave) ([fonte](https://github.com/DavidHDev/react-bits/tree/3acbd54115330a42e39f63dda2d4859e998b6684/src/ts-default/Backgrounds/PlasmaWave)) | Raymarched plasma waves with dual-wave interference and OGL. | `ogl@^1.0.11` | `colors`, `speed1`, `speed2`, `dir2`, `focalLength`, `bend1`, `bend2`, `rotationDeg`, `xOffset`, `yOffset` | JS-CSS, JS-TW, TS-CSS, TS-TW |
44
+ | [Prism](https://reactbits.dev/backgrounds/prism) ([fonte](https://github.com/DavidHDev/react-bits/tree/3acbd54115330a42e39f63dda2d4859e998b6684/src/ts-default/Backgrounds/Prism)) | Rotating prism with configurable intensity, size, and colors. | `ogl@^1.0.11` | `height`, `baseWidth`, `animationType`, `glow`, `offset`, `noise`, `transparent`, `scale`, `hueShift`, `colorFrequency`, `hoverStrength`, `inertia`, `bloom`, `suspendWhenOffscreen`, `timeScale` | JS-CSS, JS-TW, TS-CSS, TS-TW |
45
+ | [PrismaticBurst](https://reactbits.dev/backgrounds/prismatic-burst) ([fonte](https://github.com/DavidHDev/react-bits/tree/3acbd54115330a42e39f63dda2d4859e998b6684/src/ts-default/Backgrounds/PrismaticBurst)) | Burst of light rays with controllable color, distortion, amount. | `ogl@^1.0.11` | `intensity`, `speed`, `animationType`, `colors`, `distort`, `paused`, `offset`, `hoverDampness`, `rayCount`, `mixBlendMode` | JS-CSS, JS-TW, TS-CSS, TS-TW |
46
+ | [Radar](https://reactbits.dev/backgrounds/radar) ([fonte](https://github.com/DavidHDev/react-bits/tree/3acbd54115330a42e39f63dda2d4859e998b6684/src/ts-default/Backgrounds/Radar)) | Radar sweep effect with concentric rings, radial spokes, and a rotating beam. | `ogl@^1.0.11` | `speed`, `scale`, `ringCount`, `spokeCount`, `ringThickness`, `spokeThickness`, `sweepSpeed`, `sweepWidth`, `sweepLobes`, `color`, `backgroundColor`, `falloff`, `brightness`, `enableMouseInteraction`, `mouseInfluence` | JS-CSS, JS-TW, TS-CSS, TS-TW |
47
+ | [RippleGrid](https://reactbits.dev/backgrounds/ripple-grid) ([fonte](https://github.com/DavidHDev/react-bits/tree/3acbd54115330a42e39f63dda2d4859e998b6684/src/ts-default/Backgrounds/RippleGrid)) | A grid that continuously animates with a ripple effect. | `ogl@^1.0.11` | `enableRainbow`, `gridColor`, `rippleIntensity`, `gridSize`, `gridThickness`, `fadeDistance`, `vignetteStrength`, `glowIntensity`, `opacity`, `gridRotation`, `mouseInteraction`, `mouseInteractionRadius` | JS-CSS, JS-TW, TS-CSS, TS-TW |
48
+ | [ShapeGrid](https://reactbits.dev/backgrounds/shape-grid) ([fonte](https://github.com/DavidHDev/react-bits/tree/3acbd54115330a42e39f63dda2d4859e998b6684/src/ts-default/Backgrounds/ShapeGrid)) | Animated grid with shape variants (square, hexagon, circle, triangle) + direction customization. | `none` | `direction`, `speed`, `borderColor`, `squareSize`, `hoverFillColor`, `shape`, `hoverTrailAmount` | JS-CSS, JS-TW, TS-CSS, TS-TW |
49
+ | [SideRays](https://reactbits.dev/backgrounds/side-rays) ([fonte](https://github.com/DavidHDev/react-bits/tree/3acbd54115330a42e39f63dda2d4859e998b6684/src/ts-default/Backgrounds/SideRays)) | Animated light rays emanating from the side with customizable colors and speed. | `ogl@^1.0.11` | `speed`, `rayColor1`, `rayColor2`, `intensity`, `spread`, `origin`, `tilt`, `saturation`, `blend`, `falloff`, `opacity`, `className` | JS-CSS, JS-TW, TS-CSS, TS-TW |
50
+ | [Silk](https://reactbits.dev/backgrounds/silk) ([fonte](https://github.com/DavidHDev/react-bits/tree/3acbd54115330a42e39f63dda2d4859e998b6684/src/ts-default/Backgrounds/Silk)) | Smooth waves background with soft lighting. | `@react-three/fiber@^9.3.0 three@^0.180.0` | `speed`, `scale`, `color`, `noiseIntensity`, `rotation` | JS-CSS, JS-TW, TS-CSS, TS-TW |
51
+ | [SoftAurora](https://reactbits.dev/backgrounds/soft-aurora) ([fonte](https://github.com/DavidHDev/react-bits/tree/3acbd54115330a42e39f63dda2d4859e998b6684/src/ts-default/Backgrounds/SoftAurora)) | Soft aurora borealis shader with 3D Perlin noise and cosine gradient palettes. | `ogl@^1.0.11` | `speed`, `scale`, `brightness`, `color1`, `color2`, `noiseFrequency`, `noiseAmplitude`, `bandHeight`, `bandSpread`, `octaveDecay`, `layerOffset`, `colorSpeed`, `enableMouseInteraction`, `mouseInfluence` | JS-CSS, JS-TW, TS-CSS, TS-TW |
52
+ | [Threads](https://reactbits.dev/backgrounds/threads) ([fonte](https://github.com/DavidHDev/react-bits/tree/3acbd54115330a42e39f63dda2d4859e998b6684/src/ts-default/Backgrounds/Threads)) | Animated pattern of lines forming a fabric-like motion. | `ogl@^1.0.11` | `color`, `amplitude`, `distance`, `enableMouseInteraction` | JS-CSS, JS-TW, TS-CSS, TS-TW |
53
+ | [Waves](https://reactbits.dev/backgrounds/waves) ([fonte](https://github.com/DavidHDev/react-bits/tree/3acbd54115330a42e39f63dda2d4859e998b6684/src/ts-default/Backgrounds/Waves)) | Layered lines that form smooth wave patterns with animation. | `none` | `lineColor`, `backgroundColor`, `waveSpeedX`, `waveSpeedY`, `waveAmpX`, `waveAmpY`, `xGap`, `yGap`, `friction`, `tension`, `maxCursorMove`, `style`, `className` | JS-CSS, JS-TW, TS-CSS, TS-TW |
54
+
55
+ ## Comandos por componente
56
+
57
+ Substituir `<Component>` pelo nome exato da primeira coluna:
58
+
59
+ ```bash
60
+ npx shadcn@latest add @react-bits/<Component>-TS-TW
61
+ npx shadcn@latest add https://reactbits.dev/r/<Component>-TS-TW
62
+ npx jsrepo@latest add https://reactbits.dev/r/<Component>-TS-TW
63
+ ```
package/docs/framework/react-bits/catalog-summary.json ADDED
@@ -0,0 +1,61 @@
1
+ {
2
+ "source": "https://github.com/DavidHDev/react-bits",
3
+ "sha": "3acbd54115330a42e39f63dda2d4859e998b6684",
4
+ "commitDate": "2026-07-14T17:21:39+03:00",
5
+ "total": 139,
6
+ "categories": {
7
+ "Animations": 31,
8
+ "TextAnimations": 23,
9
+ "Components": 40,
10
+ "Backgrounds": 45
11
+ },
12
+ "variants": [
13
+ "JS-CSS",
14
+ "JS-TW",
15
+ "TS-CSS",
16
+ "TS-TW"
17
+ ],
18
+ "registryItems": 556,
19
+ "documentedProps": 1603,
20
+ "incompleteVariants": [
21
+ {
22
+ "component": "CurvedInput",
23
+ "category": "Components",
24
+ "variant": "JS-TW",
25
+ "source": "src/tailwind/Components/CurvedInput/CurvedInput.jsx"
26
+ },
27
+ {
28
+ "component": "CurvedInput",
29
+ "category": "Components",
30
+ "variant": "TS-CSS",
31
+ "source": "src/ts-default/Components/CurvedInput/CurvedInput.tsx"
32
+ },
33
+ {
34
+ "component": "CurvedInput",
35
+ "category": "Components",
36
+ "variant": "TS-TW",
37
+ "source": "src/ts-tailwind/Components/CurvedInput/CurvedInput.tsx"
38
+ }
39
+ ],
40
+ "dependencies": {
41
+ "ogl@^1.0.11": 31,
42
+ "gsap@^3.13.0": 29,
43
+ "three@^0.180.0": 22,
44
+ "motion@^12.23.12": 20,
45
+ "@react-three/fiber@^9.3.0": 7,
46
+ "@react-three/drei@^10.7.4": 4,
47
+ "postprocessing@^6.36.0": 4,
48
+ "react-icons@^5.5.0": 3,
49
+ "@gsap/react@^2.1.2": 2,
50
+ "@chakra-ui/react@^3.20.0": 1,
51
+ "@react-three/postprocessing@^3.0.4": 1,
52
+ "@use-gesture/react@^10.2.27": 1,
53
+ "face-api.js@^0.22.2": 1,
54
+ "gl-matrix@^3.4.3": 1,
55
+ "lenis@^1.3.13": 1,
56
+ "lucide-react@^0.542.0": 1,
57
+ "maath@^0.10.8": 1,
58
+ "matter-js@^0.20.0": 1,
59
+ "react-router-dom@^6.30.1": 1
60
+ }
61
+ }
package/docs/framework/react-bits/components.md ADDED
@@ -0,0 +1,58 @@
1
+ # React Bits - Components
2
+
3
+ > Snapshot oficial: `3acbd54115330a42e39f63dda2d4859e998b6684` (2026-07-14T17:21:39+03:00). Total nesta categoria: **40**.
4
+
5
+ Cada item abaixo aponta para a documentacao e para o codigo TypeScript/CSS oficial fixado no commit pesquisado.
6
+
7
+ | Componente | O que faz | Dependencias | Props publicas | Variantes |
8
+ | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------ | ---------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------- |
9
+ | [AnimatedList](https://reactbits.dev/components/animated-list) ([fonte](https://github.com/DavidHDev/react-bits/tree/3acbd54115330a42e39f63dda2d4859e998b6684/src/ts-default/Components/AnimatedList)) | List items enter with staggered motion variants for polished reveals. | `motion@^12.23.12` | `items`, `onItemSelect`, `showGradients`, `enableArrowNavigation`, `className`, `itemClassName`, `displayScrollbar`, `initialSelectedIndex` | JS-CSS, JS-TW, TS-CSS, TS-TW |
10
+ | [BorderGlow](https://reactbits.dev/components/border-glow) ([fonte](https://github.com/DavidHDev/react-bits/tree/3acbd54115330a42e39f63dda2d4859e998b6684/src/ts-default/Components/BorderGlow)) | Glowing mesh-gradient border that follows cursor direction and intensifies near edges. | `none` | `children`, `className`, `edgeSensitivity`, `glowColor`, `backgroundColor`, `borderRadius`, `glowRadius`, `glowIntensity`, `coneSpread`, `animated`, `colors` | JS-CSS, JS-TW, TS-CSS, TS-TW |
11
+ | [BounceCards](https://reactbits.dev/components/bounce-cards) ([fonte](https://github.com/DavidHDev/react-bits/tree/3acbd54115330a42e39f63dda2d4859e998b6684/src/ts-default/Components/BounceCards)) | Cards bounce that bounce in on mount. | `gsap@^3.13.0` | `className`, `images`, `containerWidth`, `containerHeight`, `animationDelay`, `animationStagger`, `easeType`, `transformStyles`, `enableHover` | JS-CSS, JS-TW, TS-CSS, TS-TW |
12
+ | [BubbleMenu](https://reactbits.dev/components/bubble-menu) ([fonte](https://github.com/DavidHDev/react-bits/tree/3acbd54115330a42e39f63dda2d4859e998b6684/src/ts-default/Components/BubbleMenu)) | Floating circular expanding menu with staggered item reveal. | `gsap@^3.13.0` | `logo`, `onMenuClick`, `className`, `style`, `menuAriaLabel`, `menuBg`, `menuContentColor`, `useFixedPosition`, `items`, `animationEase`, `animationDuration`, `staggerDelay` | JS-CSS, JS-TW, TS-CSS, TS-TW |
13
+ | [CardNav](https://reactbits.dev/components/card-nav) ([fonte](https://github.com/DavidHDev/react-bits/tree/3acbd54115330a42e39f63dda2d4859e998b6684/src/ts-default/Components/CardNav)) | Expandable navigation bar with card panels revealing nested links. | `gsap@^3.13.0 react-icons@^5.5.0` | `logo`, `logoAlt`, `items`, `className`, `ease`, `baseColor`, `menuColor`, `buttonBgColor`, `buttonTextColor` | JS-CSS, JS-TW, TS-CSS, TS-TW |
14
+ | [CardSwap](https://reactbits.dev/components/card-swap) ([fonte](https://github.com/DavidHDev/react-bits/tree/3acbd54115330a42e39f63dda2d4859e998b6684/src/ts-default/Components/CardSwap)) | Cards animate position swapping with smooth layout transitions. | `gsap@^3.13.0` | `width`, `height`, `cardDistance`, `verticalDistance`, `delay`, `pauseOnHover`, `onCardClick`, `skewAmount`, `easing`, `children` | JS-CSS, JS-TW, TS-CSS, TS-TW |
15
+ | [Carousel](https://reactbits.dev/components/carousel) ([fonte](https://github.com/DavidHDev/react-bits/tree/3acbd54115330a42e39f63dda2d4859e998b6684/src/ts-default/Components/Carousel)) | Responsive carousel with touch gestures, looping and transitions. | `motion@^12.23.12 react-icons@^5.5.0` | `items`, `baseWidth`, `autoplay`, `autoplayDelay`, `pauseOnHover`, `loop`, `round` | JS-CSS, JS-TW, TS-CSS, TS-TW |
16
+ | [ChromaGrid](https://reactbits.dev/components/chroma-grid) ([fonte](https://github.com/DavidHDev/react-bits/tree/3acbd54115330a42e39f63dda2d4859e998b6684/src/ts-default/Components/ChromaGrid)) | A responsive grid of grayscale tiles. Hovering the grid reaveals their colors. | `gsap@^3.13.0` | `items`, `className`, `radius`, `damping`, `fadeOut`, `ease` | JS-CSS, JS-TW, TS-CSS, TS-TW |
17
+ | [CircularGallery](https://reactbits.dev/components/circular-gallery) ([fonte](https://github.com/DavidHDev/react-bits/tree/3acbd54115330a42e39f63dda2d4859e998b6684/src/ts-default/Components/CircularGallery)) | Circular orbit gallery rotating images. | `ogl@^1.0.11` | `items`, `bend`, `textColor`, `borderRadius`, `font`, `fontUrl`, `scrollSpeed`, `scrollEase` | JS-CSS, JS-TW, TS-CSS, TS-TW |
18
+ | [Counter](https://reactbits.dev/components/counter) ([fonte](https://github.com/DavidHDev/react-bits/tree/3acbd54115330a42e39f63dda2d4859e998b6684/src/ts-default/Components/Counter)) | Flexible animated counter supporting increments + easing. | `motion@^12.23.12` | `value`, `fontSize`, `padding`, `places`, `gap`, `borderRadius`, `horizontalPadding`, `textColor`, `fontWeight`, `containerStyle`, `counterStyle`, `digitStyle`, `gradientHeight`, `gradientFrom`, `gradientTo`, `topGradientStyle`, `bottomGradientStyle` | JS-CSS, JS-TW, TS-CSS, TS-TW |
19
+ | [CurvedInput](https://reactbits.dev/components/curved-input) ([fonte](https://github.com/DavidHDev/react-bits/tree/3acbd54115330a42e39f63dda2d4859e998b6684/src/ts-default/Components/CurvedInput)) | Arc-bent input bar with text, caret and submit button all following the curve. | `none` | `value`, `defaultValue`, `onChange`, `onSubmit`, `placeholder`, `buttonText`, `type`, `name`, `ariaLabel`, `theme`, `width`, `bend`, `height`, `cornerRadius`, `borderWidth`, `fontSize`, `backgroundColor`, `textColor`, `placeholderColor`, `borderColor`, `buttonColor`, `buttonTextColor`, `iconColor`, `shadowSize`, `shadowColor`, `showButton`, `showIcon`, `icon`, `className`, `style` | JS-CSS, JS-TW (VAZIA no upstream), TS-CSS (VAZIA no upstream), TS-TW (VAZIA no upstream) |
20
+ | [DecayCard](https://reactbits.dev/components/decay-card) ([fonte](https://github.com/DavidHDev/react-bits/tree/3acbd54115330a42e39f63dda2d4859e998b6684/src/ts-default/Components/DecayCard)) | Hover parallax effect that disintegrates the content of a card. | `gsap@^3.13.0` | `children`, `width`, `height`, `image`, `baseFrequency`, `numOctaves`, `seed`, `maxDisplacement`, `movementBound` | JS-CSS, JS-TW, TS-CSS, TS-TW |
21
+ | [Dock](https://reactbits.dev/components/dock) ([fonte](https://github.com/DavidHDev/react-bits/tree/3acbd54115330a42e39f63dda2d4859e998b6684/src/ts-default/Components/Dock)) | macOS style magnifying dock with proximity scaling of icons. | `motion@^12.23.12` | `items`, `className`, `distance`, `panelHeight`, `baseItemSize`, `dockHeight`, `magnification`, `spring` | JS-CSS, JS-TW, TS-CSS, TS-TW |
22
+ | [DomeGallery](https://reactbits.dev/components/dome-gallery) ([fonte](https://github.com/DavidHDev/react-bits/tree/3acbd54115330a42e39f63dda2d4859e998b6684/src/ts-default/Components/DomeGallery)) | Immersive 3D dome gallery projecting images on a hemispheric surface. | `@use-gesture/react@^10.2.27` | `images`, `fit`, `fitBasis`, `minRadius`, `maxRadius`, `padFactor`, `overlayBlurColor`, `maxVerticalRotationDeg`, `dragSensitivity`, `enlargeTransitionMs`, `segments`, `dragDampening`, `openedImageWidth`, `openedImageHeight`, `imageBorderRadius`, `openedImageBorderRadius`, `grayscale` | JS-CSS, JS-TW, TS-CSS, TS-TW |
23
+ | [ElasticSlider](https://reactbits.dev/components/elastic-slider) ([fonte](https://github.com/DavidHDev/react-bits/tree/3acbd54115330a42e39f63dda2d4859e998b6684/src/ts-default/Components/ElasticSlider)) | Slider handle stretches elastically then snaps with spring physics. | `motion@^12.23.12 @chakra-ui/react@^3.20.0 react-icons@^5.5.0` | `defaultValue`, `startingValue`, `maxValue`, `className`, `isStepped`, `stepSize`, `leftIcon`, `rightIcon` | JS-CSS, JS-TW, TS-CSS, TS-TW |
24
+ | [FlowingMenu](https://reactbits.dev/components/flowing-menu) ([fonte](https://github.com/DavidHDev/react-bits/tree/3acbd54115330a42e39f63dda2d4859e998b6684/src/ts-default/Components/FlowingMenu)) | Liquid flowing active indicator glides between menu items. | `gsap@^3.13.0` | `items`, `speed`, `textColor`, `bgColor`, `marqueeBgColor`, `marqueeTextColor`, `borderColor` | JS-CSS, JS-TW, TS-CSS, TS-TW |
25
+ | [FluidGlass](https://reactbits.dev/components/fluid-glass) ([fonte](https://github.com/DavidHDev/react-bits/tree/3acbd54115330a42e39f63dda2d4859e998b6684/src/ts-default/Components/FluidGlass)) | Glassmorphism container with animated liquid distortion refraction. | `three@^0.180.0 @react-three/fiber@^9.3.0 @react-three/drei@^10.7.4 maath@^0.10.8` | `mode`, `lensProps`, `barProps`, `cubeProps` | JS-CSS, JS-TW, TS-CSS, TS-TW |
26
+ | [FlyingPosters](https://reactbits.dev/components/flying-posters) ([fonte](https://github.com/DavidHDev/react-bits/tree/3acbd54115330a42e39f63dda2d4859e998b6684/src/ts-default/Components/FlyingPosters)) | 3D posters rotate on scroll infinitely. | `ogl@^1.0.11` | `items`, `planeWidth`, `planeHeight`, `distortion`, `scrollEase`, `cameraFov`, `cameraZ` | JS-CSS, JS-TW, TS-CSS, TS-TW |
27
+ | [Folder](https://reactbits.dev/components/folder) ([fonte](https://github.com/DavidHDev/react-bits/tree/3acbd54115330a42e39f63dda2d4859e998b6684/src/ts-default/Components/Folder)) | Interactive folder opens to reveal nested content smooth motion. | `none` | `color`, `size`, `items`, `className` | JS-CSS, JS-TW, TS-CSS, TS-TW |
28
+ | [GlassIcons](https://reactbits.dev/components/glass-icons) ([fonte](https://github.com/DavidHDev/react-bits/tree/3acbd54115330a42e39f63dda2d4859e998b6684/src/ts-default/Components/GlassIcons)) | Icon set styled with frosted glass blur. | `none` | `items`, `className` | JS-CSS, JS-TW, TS-CSS, TS-TW |
29
+ | [GlassSurface](https://reactbits.dev/components/glass-surface) ([fonte](https://github.com/DavidHDev/react-bits/tree/3acbd54115330a42e39f63dda2d4859e998b6684/src/ts-default/Components/GlassSurface)) | Advanced Apple-style glass surface with real-time distortion + lighting. | `none` | `children`, `width`, `height`, `borderRadius`, `borderWidth`, `brightness`, `opacity`, `blur`, `displace`, `backgroundOpacity`, `saturation`, `distortionScale`, `redOffset`, `greenOffset`, `blueOffset`, `xChannel`, `yChannel`, `mixBlendMode`, `className`, `style` | JS-CSS, JS-TW, TS-CSS, TS-TW |
30
+ | [GooeyNav](https://reactbits.dev/components/gooey-nav) ([fonte](https://github.com/DavidHDev/react-bits/tree/3acbd54115330a42e39f63dda2d4859e998b6684/src/ts-default/Components/GooeyNav)) | Navigation indicator morphs with gooey blob transitions between items. | `none` | `items`, `animationTime`, `particleCount`, `particleDistances`, `particleR`, `timeVariance`, `colors`, `initialActiveIndex` | JS-CSS, JS-TW, TS-CSS, TS-TW |
31
+ | [InfiniteMenu](https://reactbits.dev/components/infinite-menu) ([fonte](https://github.com/DavidHDev/react-bits/tree/3acbd54115330a42e39f63dda2d4859e998b6684/src/ts-default/Components/InfiniteMenu)) | Horizontally looping menu effect that scrolls endlessly with seamless wrap. | `gl-matrix@^3.4.3` | `items`, `scale` | JS-CSS, JS-TW, TS-CSS, TS-TW |
32
+ | [Lanyard](https://reactbits.dev/components/lanyard) ([fonte](https://github.com/DavidHDev/react-bits/tree/3acbd54115330a42e39f63dda2d4859e998b6684/src/ts-default/Components/Lanyard)) | Swinging 3D lanyard / badge card with realistic inertial motion. | `none` | `position`, `gravity`, `fov`, `transparent`, `frontImage`, `backImage`, `imageFit`, `lanyardImage`, `lanyardWidth` | JS-CSS, JS-TW, TS-CSS, TS-TW |
33
+ | [LineSidebar](https://reactbits.dev/components/line-sidebar) ([fonte](https://github.com/DavidHDev/react-bits/tree/3acbd54115330a42e39f63dda2d4859e998b6684/src/ts-default/Components/LineSidebar)) | Static list navigation with a cursor-proximity effect that shifts and highlights nearby items. | `none` | `items`, `accentColor`, `textColor`, `markerColor`, `showIndex`, `showMarker`, `proximityRadius`, `maxShift`, `falloff`, `markerLength`, `markerGap`, `tickScale`, `scaleTick`, `itemGap`, `fontSize`, `smoothing`, `defaultActive`, `onItemClick`, `className` | JS-CSS, JS-TW, TS-CSS, TS-TW |
34
+ | [MagicBento](https://reactbits.dev/components/magic-bento) ([fonte](https://github.com/DavidHDev/react-bits/tree/3acbd54115330a42e39f63dda2d4859e998b6684/src/ts-default/Components/MagicBento)) | Interactive bento grid tiles expand + animate with various options. | `gsap@^3.13.0` | `textAutoHide`, `enableStars`, `enableSpotlight`, `enableBorderGlow`, `disableAnimations`, `spotlightRadius`, `particleCount`, `enableTilt`, `glowColor`, `clickEffect`, `enableMagnetism` | JS-CSS, JS-TW, TS-CSS, TS-TW |
35
+ | [Masonry](https://reactbits.dev/components/masonry) ([fonte](https://github.com/DavidHDev/react-bits/tree/3acbd54115330a42e39f63dda2d4859e998b6684/src/ts-default/Components/Masonry)) | Responsive masonry layout with animated reflow + gaps optimization. | `gsap@^3.13.0` | `items`, `ease`, `duration`, `stagger`, `animateFrom`, `scaleOnHover`, `hoverScale`, `blurToFocus`, `colorShiftOnHover` | JS-CSS, JS-TW, TS-CSS, TS-TW |
36
+ | [ModelViewer](https://reactbits.dev/components/model-viewer) ([fonte](https://github.com/DavidHDev/react-bits/tree/3acbd54115330a42e39f63dda2d4859e998b6684/src/ts-default/Components/ModelViewer)) | Three.js model viewer with orbit controls and lighting presets. | `@react-three/fiber@^9.3.0 @react-three/drei@^10.7.4 three@^0.180.0` | `url`, `width`, `height`, `modelXOffset`, `modelYOffset`, `defaultRotationX`, `defaultRotationY`, `defaultZoom`, `minZoomDistance`, `maxZoomDistance`, `enableMouseParallax`, `enableManualRotation`, `enableHoverRotation`, `enableManualZoom`, `ambientIntensity`, `keyLightIntensity`, `fillLightIntensity`, `rimLightIntensity`, `environmentPreset`, `autoFrame`, `fadeIn`, `autoRotate`, `autoRotateSpeed`, `showScreenshotButton`, `placeholderSrc`, `onModelLoaded` | JS-CSS, JS-TW, TS-CSS, TS-TW |
37
+ | [OptionWheel](https://reactbits.dev/components/option-wheel) ([fonte](https://github.com/DavidHDev/react-bits/tree/3acbd54115330a42e39f63dda2d4859e998b6684/src/ts-default/Components/OptionWheel)) | Curved option picker that spins via scroll, drag, or arrow keys, fading and tilting items away from the selection. | `none` | `items`, `defaultSelected`, `onChange`, `textColor`, `activeColor`, `side`, `fontSize`, `spacing`, `curve`, `tilt`, `blur`, `fade`, `minOpacity`, `smoothing`, `inset`, `loop`, `draggable`, `soundUrl`, `soundVolume`, `className` | JS-CSS, JS-TW, TS-CSS, TS-TW |
38
+ | [PillNav](https://reactbits.dev/components/pill-nav) ([fonte](https://github.com/DavidHDev/react-bits/tree/3acbd54115330a42e39f63dda2d4859e998b6684/src/ts-default/Components/PillNav)) | Minimal pill nav with sliding active highlight + smooth easing. | `react-router-dom@^6.30.1 gsap@^3.13.0` | `logo`, `logoAlt`, `items`, `activeHref`, `className`, `ease`, `baseColor`, `pillColor`, `hoveredPillTextColor`, `pillTextColor`, `onMobileMenuClick`, `initialLoadAnimation` | JS-CSS, JS-TW, TS-CSS, TS-TW |
39
+ | [PixelCard](https://reactbits.dev/components/pixel-card) ([fonte](https://github.com/DavidHDev/react-bits/tree/3acbd54115330a42e39f63dda2d4859e998b6684/src/ts-default/Components/PixelCard)) | Card content revealed through pixel expansion transition. | `none` | `variant`, `gap`, `speed`, `colors`, `noFocus`, `className`, `style`, `children` | JS-CSS, JS-TW, TS-CSS, TS-TW |
40
+ | [ProfileCard](https://reactbits.dev/components/profile-card) ([fonte](https://github.com/DavidHDev/react-bits/tree/3acbd54115330a42e39f63dda2d4859e998b6684/src/ts-default/Components/ProfileCard)) | Animated profile card glare with 3D hover effect. | `none` | `avatarUrl`, `iconUrl`, `grainUrl`, `innerGradient`, `behindGlowEnabled`, `behindGlowColor`, `behindGlowSize`, `className`, `enableTilt`, `enableMobileTilt`, `mobileTiltSensitivity`, `miniAvatarUrl`, `name`, `title`, `handle`, `status`, `contactText`, `showUserInfo`, `onContactClick` | JS-CSS, JS-TW, TS-CSS, TS-TW |
41
+ | [ReflectiveCard](https://reactbits.dev/components/reflective-card) ([fonte](https://github.com/DavidHDev/react-bits/tree/3acbd54115330a42e39f63dda2d4859e998b6684/src/ts-default/Components/ReflectiveCard)) | Card with dynamic webcam reflection and glare effects that respond to cursor movement. | `lucide-react@^0.542.0` | `blurStrength`, `metalness`, `roughness`, `displacementStrength`, `noiseScale`, `specularConstant`, `grayscale`, `glassDistortion`, `color`, `overlayColor` | JS-CSS, JS-TW, TS-CSS, TS-TW |
42
+ | [ScrollStack](https://reactbits.dev/components/scroll-stack) ([fonte](https://github.com/DavidHDev/react-bits/tree/3acbd54115330a42e39f63dda2d4859e998b6684/src/ts-default/Components/ScrollStack)) | Overlapping card stack reveals on scroll with depth layering. | `lenis@^1.3.13` | `children`, `className`, `itemDistance`, `itemScale`, `itemStackDistance`, `stackPosition`, `scaleEndPosition`, `baseScale`, `scaleDuration`, `rotationAmount`, `blurAmount`, `useWindowScroll`, `onStackComplete` | JS-CSS, JS-TW, TS-CSS, TS-TW |
43
+ | [SpecularButton](https://reactbits.dev/components/specular-button) ([fonte](https://github.com/DavidHDev/react-bits/tree/3acbd54115330a42e39f63dda2d4859e998b6684/src/ts-default/Components/SpecularButton)) | Glass button with a shader-driven specular rim light that sweeps around the edge and follows the cursor. | `ogl@^1.0.11` | `children`, `size`, `radius`, `tint`, `tintOpacity`, `blur`, `textColor`, `lineColor`, `baseColor`, `intensity`, `shineSize`, `shineFade`, `thickness`, `speed`, `followMouse`, `proximity`, `autoAnimate`, `disabled`, `onClick`, `type`, `className` | JS-CSS, JS-TW, TS-CSS, TS-TW |
44
+ | [SpotlightCard](https://reactbits.dev/components/spotlight-card) ([fonte](https://github.com/DavidHDev/react-bits/tree/3acbd54115330a42e39f63dda2d4859e998b6684/src/ts-default/Components/SpotlightCard)) | Dynamic spotlight follows cursor casting gradient illumination. | `none` | `spotlightColor`, `className` | JS-CSS, JS-TW, TS-CSS, TS-TW |
45
+ | [Stack](https://reactbits.dev/components/stack) ([fonte](https://github.com/DavidHDev/react-bits/tree/3acbd54115330a42e39f63dda2d4859e998b6684/src/ts-default/Components/Stack)) | Layered stack with swipe animations, autoplay and smooth transitions. | `motion@^12.23.12` | `randomRotation`, `sensitivity`, `sendToBackOnClick`, `cards`, `animationConfig`, `autoplay`, `autoplayDelay`, `pauseOnHover` | JS-CSS, JS-TW, TS-CSS, TS-TW |
46
+ | [StaggeredMenu](https://reactbits.dev/components/staggered-menu) ([fonte](https://github.com/DavidHDev/react-bits/tree/3acbd54115330a42e39f63dda2d4859e998b6684/src/ts-default/Components/StaggeredMenu)) | Menu with staggered item animations and smooth transitions on open/close. | `gsap@^3.13.0` | `position`, `colors`, `items`, `socialItems`, `displaySocials`, `displayItemNumbering`, `className`, `logoUrl`, `menuButtonColor`, `openMenuButtonColor`, `accentColor`, `changeMenuColorOnOpen`, `onMenuOpen`, `onMenuClose`, `closeOnClickAway` | JS-CSS, JS-TW, TS-CSS, TS-TW |
47
+ | [Stepper](https://reactbits.dev/components/stepper) ([fonte](https://github.com/DavidHDev/react-bits/tree/3acbd54115330a42e39f63dda2d4859e998b6684/src/ts-default/Components/Stepper)) | Animated multi-step progress indicator with active state transitions. | `motion@^12.23.12` | `children`, `initialStep`, `onStepChange`, `onFinalStepCompleted`, `stepCircleContainerClassName`, `stepContainerClassName`, `contentClassName`, `footerClassName`, `backButtonProps`, `nextButtonProps`, `backButtonText`, `nextButtonText`, `disableStepIndicators`, `renderStepIndicator` | JS-CSS, JS-TW, TS-CSS, TS-TW |
48
+ | [TiltedCard](https://reactbits.dev/components/tilted-card) ([fonte](https://github.com/DavidHDev/react-bits/tree/3acbd54115330a42e39f63dda2d4859e998b6684/src/ts-default/Components/TiltedCard)) | 3D perspective tilt card reacting to pointer. | `motion@^12.23.12` | `imageSrc`, `altText`, `captionText`, `containerHeight`, `containerWidth`, `imageHeight`, `imageWidth`, `scaleOnHover`, `rotateAmplitude`, `showMobileWarning`, `showTooltip`, `displayOverlayContent`, `overlayContent` | JS-CSS, JS-TW, TS-CSS, TS-TW |
49
+
50
+ ## Comandos por componente
51
+
52
+ Substituir `<Component>` pelo nome exato da primeira coluna:
53
+
54
+ ```bash
55
+ npx shadcn@latest add @react-bits/<Component>-TS-TW
56
+ npx shadcn@latest add https://reactbits.dev/r/<Component>-TS-TW
57
+ npx jsrepo@latest add https://reactbits.dev/r/<Component>-TS-TW
58
+ ```
package/docs/framework/react-bits/implementation-playbook.md ADDED
@@ -0,0 +1,161 @@
1
+ # React Bits - playbook de implementação e composição
2
+
3
+ ## Sumário
4
+
5
+ 1. Fluxo obrigatório
6
+ 2. Seleção por intenção
7
+ 3. Adaptação segura
8
+ 4. Composição
9
+ 5. Performance
10
+ 6. Acessibilidade
11
+ 7. Frameworks e SSR
12
+ 8. Diagnóstico
13
+
14
+ ## 1. Fluxo obrigatório
15
+
16
+ 1. Traduzir o objetivo visual em função: orientar, explicar, dar feedback, criar
17
+ atmosfera ou enfatizar hierarquia.
18
+ 2. Consultar somente o catálogo da categoria relevante e formar uma shortlist de no
19
+ máximo três componentes.
20
+ 3. Escolher pelo menor custo técnico que entrega o efeito. CSS antes de Motion/GSAP;
21
+ DOM antes de Canvas; Canvas 2D antes de WebGL, quando o resultado visual permitir.
22
+ 4. Abrir a documentação e a fonte fixada. Verificar props, dependências, DOM/canvas,
23
+ listeners, loop de animação e cleanup.
24
+ 5. Verificar os pacotes declarados com `npm view` e instalar só os necessários.
25
+ 6. Integrar em um boundary pequeno. Não espalhar internals do componente pela página.
26
+ 7. Adaptar tokens, conteúdo, layout, interação e breakpoints ao design existente.
27
+ 8. Implementar reduced motion, navegação por teclado, contraste, fallback e cleanup.
28
+ 9. Medir mobile real, CPU/GPU, memória, CLS/LCP/INP e comportamento ao sair da rota.
29
+ 10. Registrar origem, variante e customizações importantes junto ao componente local.
30
+
31
+ ## 2. Seleção por intenção
32
+
33
+ | Intenção | Começar por | Evitar quando |
34
+ | -------------------- | -------------------------------------------- | ------------------------------------------- |
35
+ | Headline memorável | BlurText, SplitText, Shuffle, RotatingText | texto longo ou conteúdo crítico atrasado |
36
+ | Número/prova | CountUp, Counter | o valor precisa ser lido instantaneamente |
37
+ | Entrada de seção | FadeContent, AnimatedContent, GradualBlur | já existem muitos reveals simultâneos |
38
+ | Profundidade em card | SpotlightCard, TiltedCard, ReflectiveCard | touch-only ou tabela densa |
39
+ | Navegação expressiva | GooeyNav, PillNav, StaggeredMenu, Dock | fluxo crítico sem fallback semântico |
40
+ | Galeria/portfólio | CircularGallery, DomeGallery, Masonry, Stack | muitas imagens sem lazy loading |
41
+ | Atmosfera leve | CSS gradients, DotGrid, Threads | contraste do conteúdo fica instável |
42
+ | Hero WebGL | Aurora, Silk, Orb, LightRays, Galaxy | mobile fraco sem fallback estático |
43
+ | Interação lúdica | ClickSpark, Magnet, StickerPeel | CTA crítico ou interface corporativa sóbria |
44
+ | Experiência física | Ballpit, Lanyard, FallingText, Antigravity | custo e distração não têm função narrativa |
45
+
46
+ Consultar os quatro catálogos para todas as opções; esta tabela é apenas ponto de
47
+ partida e não substitui a seleção por objetivo, marca e orçamento de performance.
48
+
49
+ ## 3. Adaptação segura
50
+
51
+ ### Criar um boundary
52
+
53
+ Manter o componente importado em `components/react-bits/<nome>/` e expor um wrapper
54
+ da aplicação. O wrapper traduz tokens e conteúdo locais para as props do efeito. Isso
55
+ facilita atualizar ou substituir o upstream sem contaminar a página.
56
+
57
+ ### Tokens, não valores soltos
58
+
59
+ Substituir cores, tipografia, radius, sombras, duração e easing pelos tokens do design
60
+ system. Centralizar constantes de qualidade (`particleCount`, DPR, blur, segments,
61
+ postprocessing`) em presets `low`, `medium`e`high`.
62
+
63
+ ### Lifecycle
64
+
65
+ - Cancelar `requestAnimationFrame` e timers no cleanup.
66
+ - Remover listeners, observers e media queries registrados.
67
+ - Destruir renderer, geometries, materials, textures e contexts WebGL quando a rota
68
+ desmontar.
69
+ - Usar `gsap.context()`/cleanup e `useGSAP` quando o componente depender de GSAP.
70
+ - Pausar loops quando a aba estiver oculta ou o canvas estiver fora da viewport.
71
+
72
+ ### Conteúdo e layout
73
+
74
+ Nunca deixar a demo definir a arquitetura da página. O conteúdo real determina
75
+ height, wrapping, overflow, foco e leitura. Testar frases curtas/longas, caracteres
76
+ acentuados, zoom 200%, fontes ainda não carregadas e container estreito.
77
+
78
+ ## 4. Composição
79
+
80
+ Usar uma hierarquia de atenção: um efeito dominante por viewport, um ou dois efeitos
81
+ de suporte e microinterações discretas. Não somar três loops WebGL/Canvas apenas por
82
+ serem visualmente compatíveis.
83
+
84
+ ### Combinações fortes
85
+
86
+ - Hero: background WebGL + headline de texto + CTA com microinteração.
87
+ - Seção de prova: CountUp + FadeContent, sem background concorrente.
88
+ - Portfólio: gallery interativa + transição de seção simples.
89
+ - Navegação: menu expressivo + conteúdo estável; não animar simultaneamente todos os
90
+ cards abaixo.
91
+
92
+ ### Regras de conflito
93
+
94
+ - Um único dono do scroll suave; não empilhar Lenis, scroll container custom e hooks
95
+ que assumem `window` sem coordená-los.
96
+ - Um único cursor custom ativo; desativar em touch/coarse pointer.
97
+ - Compartilhar renderer/canvas somente quando a arquitetura foi desenhada para isso;
98
+ componentes independentes não devem assumir estado WebGL global.
99
+ - Namespaces de CSS e `z-index` explícitos evitam colisões ao combinar demos.
100
+
101
+ ## 5. Performance
102
+
103
+ ### Orçamento inicial
104
+
105
+ - Meta de 60 fps em dispositivos alvo; 30 fps estáveis é fallback aceitável para
106
+ efeitos ambientais pesados, nunca para interação direta.
107
+ - Limitar DPR: `Math.min(devicePixelRatio, 1.5)` no mobile e no máximo 2 em desktop.
108
+ - Reduzir partículas, segmentos, blur, samples e postprocessing antes de reduzir a
109
+ responsividade da interface.
110
+ - Lazy-load de WebGL/physics e das dependências que não participam do conteúdo acima
111
+ da dobra.
112
+ - Evitar animar layout; preferir transform e opacity no DOM.
113
+
114
+ ### Qualidade adaptativa
115
+
116
+ Usar `prefers-reduced-motion`, `pointer: coarse`, largura, memória/concurrency quando
117
+ disponíveis e uma medição de frame time para escolher preset. Se WebGL falhar, renderizar
118
+ gradient/imagem estática preservando contraste e layout.
119
+
120
+ ### Testes
121
+
122
+ Medir cold load, interação, scroll longo, navegação ida/volta e cinco minutos de aba
123
+ aberta. Procurar crescimento de memória, múltiplos RAFs, listeners duplicados, canvas
124
+ órfão e bundles repetindo Three/GSAP/Motion.
125
+
126
+ ## 6. Acessibilidade
127
+
128
+ - Respeitar `prefers-reduced-motion: reduce` e apresentar estado final imediatamente.
129
+ - Texto fragmentado precisa manter uma representação contínua para leitores de tela;
130
+ spans visuais podem receber `aria-hidden` e o container um rótulo completo.
131
+ - Backgrounds/canvas decorativos devem ser ignorados por tecnologia assistiva e não
132
+ capturar pointer/foco.
133
+ - Componentes navegáveis mantêm HTML semântico, ordem de tab, foco visível, Escape,
134
+ setas e Enter/Space conforme o padrão WAI-ARIA aplicável.
135
+ - Não depender apenas de hover, movimento ou cor para comunicar estado.
136
+ - Evitar flashes intensos e movimentos vestibulares; fornecer controle para pausar
137
+ loops persistentes quando forem conteúdo, não decoração.
138
+
139
+ ## 7. Frameworks e SSR
140
+
141
+ React Bits usa React moderno, e vários componentes acessam DOM, Canvas, WebGL ou APIs
142
+ de browser. Em Next.js/App Router, colocar esses componentes atrás de um client
143
+ boundary e, quando necessário, carregar dinamicamente sem SSR. Não mover toda a
144
+ página para client component por causa de um único efeito.
145
+
146
+ Em Vite/SPA, ainda executar cleanup na troca de rota. Em Astro, hidratar apenas a ilha
147
+ interativa (`client:visible`/`client:idle` quando apropriado) e preservar conteúdo
148
+ semântico no HTML estático.
149
+
150
+ ## 8. Diagnóstico
151
+
152
+ | Sintoma | Causas prováveis | Ação |
153
+ | ------------------ | ---------------------------------------------- | ---------------------------------------------- |
154
+ | Tela preta WebGL | shader compile, container 0px, context perdido | validar dimensões, console e fallback |
155
+ | Animação duplica | Strict Mode/cleanup incompleto | tornar efeito idempotente e limpar lifecycle |
156
+ | Mobile trava | DPR/partículas/post FX altos | preset low, lazy-load e pausa offscreen |
157
+ | Scroll quebrado | dois owners do scroll/container errado | escolher um owner e passar ref correto |
158
+ | Texto ilegível | fragmentação/overflow/font load | preservar texto, ajustar wrap e aguardar fonte |
159
+ | Hydration mismatch | browser API durante render | client boundary/dynamic import |
160
+ | Clique bloqueado | canvas/z-index/pointer-events | canvas decorativo com `pointer-events: none` |
161
+ | Bundle explode | múltiplos motores pesados | selecionar uma família e deduplicar imports |