central-de-referências
22 fontes · 7 categorias
Fonte única · qualquer projeto · NGP · Amplasoft · Fala · avulsos

Tudo que serve de referência pra um projeto, num lugar só — e crescendo.

Libs, sites de componentes pra copiar, logomarcas, assets de branding, inspiração de design, ferramentas. Cada fonte entra com o mesmo interrogatório completo e o link direto.

bibliotecascomponentes UI logomarcas / brandingícones design / inspiraçãoferramentas
página viva · atualiza a cada sessão

O que é esta página. Uma central de referências pra puxar em qualquer projeto — NGP Space, sites e sistemas da Amplasoft, Fala App, protótipos avulsos. Não é dependência instalada nem decisão fechada: é fonte pré-avaliada. Toda adoção real ainda passa por ADR + build verde.

Como usar no dia a dia. Quando surgir um problema — "preciso de um contador animado", "quero um kit de componentes pronto", "cadê uma fonte de logos" — é só perguntar: eu procuro aqui se já tem algo que resolve e implemento. Quando a fonte for JS embutível, ela roda ao vivo na própria seção.

Como cresce. Uma página só, de cima a baixo, sem menu — igual a um documento. Você manda o link de uma fonte, eu abro uma seção nova abaixo com todas as perguntas respondidas. Mesma página, mesmo link, sempre.

Animação
anime.js animação v4.1.4 · MIT site principal ↗
Veredito
Aplicar cirúrgico, não como dependência geral. CSS Modules já resolve ~90% dos casos (fade, hover, modal, tema). anime.js entra onde CSS puro sofre: sequência orquestrada, desenho de SVG, stagger em grade, física de mola.
O que faz

Motor de animação em JavaScript. Anima propriedades CSS, transforms, atributos e paths de SVG, cores e até objetos JS puros (um número subindo, por exemplo).

Como faz

Interpola valores ao longo do tempo com easing/spring, usando a Web Animations API quando possível. Módulos separados e tree-shakeable: animate timeline svg stagger text utils draggable.

Por que faz / pra que faz

Pra dar controle fino de movimento que keyframe de CSS não expressa: linha do tempo com offsets, física de mola, atraso calculado em grade 2D, desenho progressivo de traço. Objetivo é polir a experiência — carregamento, apresentação, dashboards.

Como serve (como se usa)

npm i animejs e importa só o módulo que precisa. Em React/Next roda dentro de useEffect com cleanup (.revert()). Snippet real logo abaixo dos demos.

O que ajuda (prós)
  • Leve (~15kb gzip) e agnóstico de framework.
  • Desenho/morph de SVG — o que CSS não faz.
  • Timeline com offsets relativos e stagger em grade.
  • Anima valores numéricos (KPI, contador) fácil.
O que atrapalha (contras)
  • Draggable colide com o @dnd-kit já usado no board.
  • Overkill se CSS já resolveria — vira bundle à toa.
  • API mudou de v3→v4 (named exports); exemplo antigo quebra.
Aplicar ou não — onde sim, onde não
✓
Aplicar em: tela de carregamento (logo se desenhando), modo apresentação/pitch, entrada de KPIs no dashboard, reveal no scroll de landing page.
✕
Não aplicar em: micro-interação que o CSS já faz (hover, modal, tema); e nunca usar o módulo Draggable em projeto que já tem @dnd-kit.
Onde pesquisar

animejs.com/documentation — doc oficial v4. Buscar por: timeline svg draw stagger grid spring text split

Demo ao vivo — anime.js rodando embutido nesta página

Stagger em grade

animate · stagger
Atraso calculado do centro pra fora

Desenho de SVG (loading)

svg.createDrawable
O traço se desenha do zero

Timeline sequenciada

createTimeline
Três barras em cascata com offset

Contador numérico

animate · utils
R$0
Valor sobe com desaceleração — ideal p/ KPI

Texto revelando

text.split · stagger

Grupo NGP

Split por caractere + entrada em cascata

Draggable (físico)

createDraggable ⚠︎
arraste-me
Momentum com mola — evite no board (dnd-kit)
📄 LoadingLogo.tsx — uso real em React / Next
// npm i animejs — importa só o que usa (tree-shakeable)
import { animate, svg } from 'animejs'
import { useEffect } from 'react'

export function LoadingLogo() {
  useEffect(() => {
    const [h] = svg.createDrawable('.h')
    const anim = animate(h, {
      draw: ['0 0', '0 1'], duration: 1200,
      ease: 'inOutQuad', loop: true,
    })
    return () => anim.revert()   // cleanup no unmount
  }, [])
  return <svg><path className="h" d="M44 38..." /></svg>
}
Qual engine de animação usar quando — as 5 comparadas
LibEscopoParadigmaBundle gzCurvaLicençaMelhor pra
anime.js
(já temos)		AgnósticoTimeline/tween leve~9 kbBaixaMITAnimação leve e direta — o que já roda no Space
GSAPAgnósticoTimeline imperativa + ScrollTrigger/SplitText~23–27 kb +pluginsMédia-altaGrátis total (incl. plugins)Scroll-telling, morph SVG, sequência complexa, hero cinematográfico
Motion
(ex-Framer)		React/JS/VueSpring + layout animations declarativo~4.6–34 kbMédiaMITUI React declarativa, gestos, AnimatePresence
React SpringReact-onlyFísica de mola~26 kbMédiaMITSpring natural em React; casa com react-three-fiber (3D)
React BitsReact-onlyNão é engine — roda sobre GSAP/Motion/Spring/Threepor componenteBaixaMIT+CommonsEfeitos prontos de texto/background em React
Recomendação: você já tem anime.js. Se precisar de animação séria (scroll-telling, SplitText, morph), o upgrade natural é GSAP — agnóstico (cola no CSS Modules), agora 100% grátis com plugins, e substitui o anime.js num motor só. Não empilhe Motion nem React Spring sobre o anime.js: seriam um 2º motor redundante. Regra: físico/spring → Motion/Spring · timeline/sequência → GSAP · leve → anime.js.
GSAPanimação · engine 100% grátis · incl. plugins site principal ↗
Veredito
O upgrade natural do anime.js — e o que menos atrita com o Space. Agnóstico (drop-in no CSS Modules), e desde abr/2025 (Webflow) ficou 100% grátis com TODOS os plugins (ScrollTrigger, SplitText, MorphSVG). Substitui o anime.js num motor só quando a animação escalar. A mais poderosa das cinco.
O que faz

Timelines precisas, ScrollTrigger, SplitText, MorphSVG, DrawSVG, ScrollSmoother — animação complexa e sequenciada.

Como faz

Vanilla JS agnóstico (React, Vue, HTML puro). Wrapper @gsap/react (useGSAP). Plugins tree-shakeable via gsap.registerPlugin().

Por que / pra que faz

Quando a animação passa do "polir" pro "narrar": scroll-telling, hero cinematográfico, morph de SVG, timelines longas com controle fino.

Como serve (como se usa)

npm i gsap, registra os plugins que usar. Versão atual 3.15.

O que ajuda (prós)
  • Agnóstico → cola no CSS Modules sem fricção.
  • Grátis total, plugins antes pagos agora livres.
  • O mais poderoso pra sequência/scroll/SVG.
O que atrapalha (contras)
  • Core ~23–27 kb + peso por plugin.
  • API imperativa (curva maior em React que Motion/Spring).
  • Redundante com anime.js — escolher um.
Aplicar ou não — onde sim, onde não
✓
Aplicar em: scroll-telling, morph SVG, sequência complexa — e como substituto do anime.js quando escalar.
✕
Não aplicar em: somar por cima do anime.js (dois motores). Escolher GSAP OU anime.js, não os dois.
Onde pesquisar

gsap.com/docs/v3 — buscar: ScrollTrigger SplitText timeline useGSAP

Motionanimação · engine MIT · Motion+ pago site principal ↗
Veredito
Drop-in técnico, mas sobrepõe o anime.js. Ex-Framer Motion. Roda em React sem Tailwind, então cola — porém adotar é trocar de motor, não somar. Só se você migrar de propósito pra animação declarativa em React (aí aposenta o anime.js).
O que faz

Animação production-grade: springs, gestos, layout animations, scroll, orquestração.

Como faz

React/JS/Vue, declarativo. Import motion/react (antigo framer-motion).

Por que / pra que faz

UI React onde animação é declarativa: <motion.div>, AnimatePresence, gestos, transição de layout automática.

Como serve (como se usa)

npm i motion. LazyMotion baixa sob demanda (~4.6 kb) com setup extra.

O que ajuda (prós)
  • Layout animations e AnimatePresence — difíceis à mão.
  • Declarativo casa com React.
O que atrapalha (contras)
  • <motion> cheio ~34 kb.
  • Compete com anime.js E React Spring — não ter os três.
Aplicar ou não — onde sim, onde não
✓
Aplicar em: projeto React novo com animação declarativa/layout como base (sem anime.js).
✕
Não aplicar em: adicionar ao Space por cima do anime.js — vira 2º motor.
Onde pesquisar

motion.dev/docs

React Springanimação · spring MIT site principal ↗
Veredito
Redundante com o anime.js pro nosso caso. React-only, só física de mola (sem timeline rica). Só valeria pra animação spring-heavy ou 3D — casa bem com react-three-fiber. Fora disso, não adiciona nada que já não tenhamos.
O que faz

Animações por física de mola (useSpring, componentes animated).

Como faz

React-only, via hooks. Pacote @react-spring/web (v10.1.2).

Por que / pra que faz

Movimento físico-natural em React — listas, transições, drag com inércia.

Como serve (como se usa)

npm i @react-spring/web

O que ajuda (prós)
  • Spring natural e fluido.
  • Ecossistema pmndrs — casa com 3D (react-three-fiber).
O que atrapalha (contras)
  • Só spring — sem timeline/keyframes rica.
  • ~26 kb; compete com anime.js e Motion.
Aplicar ou não — onde sim, onde não
✓
Aplicar em: projeto React com foco em spring físico ou cena 3D (react-three-fiber).
✕
Não aplicar em: o Space — redundante com o anime.js que já está lá.
Onde pesquisar

react-spring.dev/docs

React Bitsanimação · componentes React MIT+Commons · Pro pago site principal ↗
Veredito
A única fonte de "componentes" desta leva aproveitável no Space. Tem variante CSS (não-Tailwind). Mas não é engine: cada componente puxa GSAP/Motion/Spring/Three por baixo — padronizar numa engine só pra não meter três motores no bundle.
O que faz

140+ componentes React animados: texto que monta (SplitText), backgrounds reativos, efeitos de UI.

Como faz

React-only; motor plugável (GSAP/Motion/Spring/Three conforme o componente). Duas versões por componente: JS/TS e CSS/Tailwind.

Por que / pra que faz

Pegar efeito de destaque pronto (hero animado, texto montando, fundo reativo) sem codar do zero.

Como serve (como se usa)

CLI jsrepo/shadcn ou copy-paste. No Space: escolher a variante CSS, não a Tailwind.

O que ajuda (prós)
  • Variante CSS → dá pra usar no CSS Modules.
  • Você fica dono do código; customizável.
O que atrapalha (contras)
  • Cada componente pode arrastar uma engine diferente.
  • Misturar vários = GSAP+Motion+Spring no bundle.
  • Commons Clause: não pode revender a lib.
Aplicar ou não — onde sim, onde não
✓
Aplicar em: efeito de texto/hero em React, na variante CSS, padronizando numa engine única.
✕
Não aplicar em: pegar vários componentes de engines diferentes — enche o bundle de motores.
Onde pesquisar

reactbits.dev

Transitions.dev animação · transições freemium · Pro pago site principal ↗
Veredito
Referência de "o que animar e como", não motor. Coleção curada de transições de UI (React/Next/TS) para copiar ou aplicar por uma skill de agente. No Space, vale como padrão de timing e easing reimplementado em CSS Modules ou anime.js. A engine usada pelos snippets não foi confirmada: conferir antes de colar, para não trazer um segundo motor.
O que faz

Coleção das transições essenciais de apps web (categorias Essential, AI Agents, Effects, Texts, Pro), prontas para copiar, com uma ferramenta "Refine" para ajustar.

Como faz

Snippets para React, Next.js e TypeScript. Tem skill para agente de IA (npx skills add Jakubantalik/transitions.dev) que sugere e aplica transições no projeto. Autor: Jakub Antalik. Engine de animação por trás: não confirmada.

Por que / pra que faz

Dar acabamento de produto (entrada de modal, troca de aba, lista, texto, estados de agente de IA) sem inventar o movimento do zero.

Como serve (como se usa)

Copiar o snippet da transição, ou instalar a skill no agente. Parte grátis; a coleção Pro (36+ transições) é paga: Solo US$ 9/mês ou US$ 149 vitalício; Team US$ 39/mês ou US$ 499 vitalício.

O que ajuda (prós)
  • Curadoria focada: só o essencial de transição, com bom gosto.
  • Categoria "AI Agents" casa com Fala App e telas de agente.
  • Skill para agente acelera o VibeCoding da Amplasoft.
O que atrapalha (contras)
  • Parte relevante é paga (Pro).
  • Foco estreito: não entrega componentes completos.
  • Engine não confirmada: pode puxar Motion e virar segundo motor ao lado do anime.js.
  • Skill é instalação global no Claude Code: você autoriza e roda.
Aplicar ou não — onde sim, onde não
✓
Aplicar em: referência de timing/easing para qualquer projeto; snippets direto em projeto React/Next que já use a mesma engine; telas de agente do Fala App.
✕
Não aplicar em: colar no Space sem conferir a engine (anime.js já é o motor de lá); assinar o Pro antes de usar bastante a parte grátis.
Onde pesquisar

transitions.dev · transitions.dev/pro.html (preços) · buscar: Essential AI Agents Refine skill

Componentes UI
i
As fontes abaixo são Tailwind-first (Kokonut soma shadcn). O NGP Space é CSS Modules, sem Tailwind — então nenhuma cola como código pronto aqui. Valem como referência visual; usar o código exigiria adotar Tailwind (mudança de stack → ADR) ou reescrever à mão. Em projeto novo da Amplasoft que já use Tailwind/shadcn, aí sim colam direto.
Efferd componentes UI freemium site principal ↗
Veredito
Ouro como referência e prompt — não como código no Space. Os dashboards são shadcn/Tailwind lindos pra roubar layout e gerar via "Copy Prompt". Mas o Space é CSS Modules (sem Tailwind): o código não é drop-in aqui. Vale a inspiração + o prompt; em projeto novo da Amplasoft que aceite shadcn, aí cola direto.
O que faz

Coleção de blocos de dashboard prontos (analytics, e-commerce, finanças, suporte, observability) com charts, tabelas, KPI cards e métricas.

Como faz

Componentes React sobre shadcn/ui (Radix + Tailwind + Lucide). Cada bloco tem preview, botão de copiar código e botão Copy Prompt pra recriar via IA.

Por que / pra que faz

Acelerar tela de dashboard sem começar do zero — e roubar hierarquia de KPI, disposição de cards e gráficos que já funcionam visualmente.

Como serve (como se usa)

Preview → copiar código (se o projeto for shadcn) ou copiar prompt (pra IA gerar no seu stack). 5 dashboards grátis, 5 no Pro.

O que ajuda (prós)
  • Layouts production-ready de casos reais (finanças, analytics) que batem com cockpit/relatórios.
  • "Copy Prompt" — reaproveita o design mesmo fora do stack shadcn.
O que atrapalha (contras)
  • Stack = Tailwind/shadcn ≠ CSS Modules do Space → colar código traria Tailwind junto.
  • Só 5 grátis; resto no Pro.
Aplicar ou não — onde sim, onde não
✓
Aplicar em: referência visual e "Copy Prompt" pro cockpit/relatórios do Space; código direto em projeto Amplasoft que já use shadcn.
✕
Não aplicar em: colar o código dentro do Space (arrastaria Tailwind pra um projeto CSS Modules).
Onde pesquisar

efferd.com/blocks/dashboard — preview + código + prompt de cada bloco.

Hover.devcomponentes UI freemium site principal ↗
Veredito
Referência de micro-interação, não código. Componentes animados lindos (grids, cards, kanban) — mas React + Tailwind + Framer Motion. Não cola no Space, e o kanban dele compete com o @dnd-kit. Vale pra roubar a ideia da animação.
O que faz

Componentes com micro-interação e animação: grids, cards, botões, kanban, carrosséis, seções de landing.

Como faz

React + Tailwind + Framer Motion/Motion. Copy-paste ("Get the code"), não é npm.

Por que / pra que faz

Landing pages e seções de marketing chamativas prontas.

Como serve (como se usa)

Copiar o código do componente. Parte grátis, resto no "Go Pro".

O que ajuda (prós)
  • Animações bem-feitas de referência.
  • Pronto pra quem já usa Tailwind + Framer.
O que atrapalha (contras)
  • Arrasta Tailwind + Framer Motion.
  • Não drop-in no Space; kanban compete com @dnd-kit.
Aplicar ou não
✓
Aplicar em: referência visual da animação; código direto só em projeto Tailwind+Framer.
✕
Não aplicar em: colar no Space (CSS Modules).
Onde pesquisar

hover.dev/components/grids

Preline UIcomponentes UI open source + Pro site principal ↗
Veredito
Biblioteca gigante, mas 100% Tailwind → não drop-in. 1.500+ componentes e 940+ blocks. No Space serve como referência; o markup vem cheio de classes utilitárias que só fazem sentido com Tailwind.
O que faz

1.500+ componentes/exemplos, 940+ blocks, 21 templates, design system Figma.

Como faz

HTML/JS/TS + Tailwind. Plugin pra elementos headless (dropdown, modal). Guias React/Vue/Next/Laravel/Django.

Por que / pra que faz

Cobertura ampla de componentes pra dashboards e apps admin em Tailwind.

Como serve (como se usa)

npm i preline (JS de comportamento) + copy-paste do markup Tailwind.

O que ajuda (prós)
  • Volume enorme; núcleo grátis.
  • JS de comportamento leve.
O que atrapalha (contras)
  • 100% dependente de Tailwind.
  • Blocks/templates premium são pagos.
Aplicar ou não
✓
Aplicar em: projeto Tailwind; referência de padrão de componente.
✕
Não aplicar em: o Space (CSS Modules).
Onde pesquisar

preline.co

Kokonut UIcomponentes UI open source + Pro site principal ↗
Veredito
Bonito e animado, mas presume shadcn + Tailwind + Motion. 100+ componentes via registry shadcn. No Space não cola e ainda puxaria o Motion (que competiria com o anime.js). Referência.
O que faz

100+ componentes modernos e animados pra sites e apps.

Como faz

React + Next + Tailwind + shadcn/ui + Motion. Reconhecido pelo OSS da Vercel.

Por que / pra que faz

Componentes com acabamento e animação prontos pra stack shadcn.

Como serve (como se usa)

npx shadcn@latest add @kokonutui/<name> — você fica dono do código.

O que ajuda (prós)
  • Acabamento alto; você é dono do código.
  • Base grátis; Pro soma 70+.
O que atrapalha (contras)
  • Presume shadcn + Tailwind + Motion instalados.
  • Fora desse trio, não roda sem reescrita; Motion competiria com anime.js.
Aplicar ou não
✓
Aplicar em: projeto Next que já use shadcn + Tailwind.
✕
Não aplicar em: o Space; e evita puxar Motion junto do anime.js.
Onde pesquisar

kokonutui.com

Pagedonecomponentes UI open source + Pro site principal ↗
Veredito
Design system Tailwind pra prototipar página inteira rápido. 300+ componentes, 1.100+ blocks. "Framework-agnóstico" = agnóstico de JS-framework, não de CSS: Tailwind é obrigatório. No Space, referência.
O que faz

300+ componentes, 1.100+ blocks, 15+ templates, 12.000+ recursos (ícones, cores).

Como faz

Tailwind v4.1, agnóstico de JS-framework (React, Vue, Angular, HTML). Copy-paste puro (sem npm).

Por que / pra que faz

Prototipar páginas inteiras rápido em qualquer stack com Tailwind.

Como serve (como se usa)

Copy-paste. 310+ grátis; lib cheia em planos pagos (acesso vitalício).

O que ajuda (prós)
  • Muita coisa grátis; página inteira montável.
  • Uso comercial permitido.
O que atrapalha (contras)
  • Tailwind obrigatório.
  • Proíbe repackage/revenda como tema/builder.
Aplicar ou não
✓
Aplicar em: prototipagem rápida em projeto Tailwind.
✕
Não aplicar em: o Space (CSS Modules).
Onde pesquisar

pagedone.io

Spell UI componentes UI · React + Tailwind MIT · grátis site principal ↗
Veredito
Cola direto só em projeto Amplasoft com Tailwind + shadcn. No Space, é referência de motion, não código. É registry shadcn (Tailwind + Motion): no Space (CSS Modules, anime.js) o componente entra com um motor de animação a mais e uma stack de CSS a mais. A ideia visual (light rays, text reveal, tilt card) vale copiar reimplementando com anime.js.
O que faz

Coleção de ~30 componentes React com foco em motion e micro-interação: text reveal, animated gradient, light rays, tilt card, marquee, pop button, signature, perspective book. Copy-paste em qualquer projeto React.

Como faz

React + Tailwind CSS, publicado como registry shadcn (instala pela CLI do shadcn, o código-fonte cai no seu projeto). Componentes animados usam Motion (framer-motion). Autor: Tom (@tomm_ui / xxtomm), open-source MIT, 1.2k+ estrelas, ativo em 2026.

Por que / pra que faz

Preencher o vão que shadcn/ui deixa: componentes "de efeito" (hero, landing, cartão de destaque) prontos, sem construir animação do zero.

Como serve (como se usa)

npx shadcn add apontando pro registry do spell.sh, ou copiar o código da doc. Tem servidor MCP (seção /docs/mcp) pra agente de IA puxar componente direto. Também existe port pra SvelteKit (spelte, de terceiro).

O que ajuda (prós)
  • MIT, grátis, código vira seu (não é dependência preta).
  • Efeitos de qualidade que dão "cara premium" em LP em minutos.
  • MCP + registry: bom pra fluxo VibeCoding da Amplasoft.
O que atrapalha (contras)
  • Exige Tailwind + shadcn: no Space não é drop-in (mudança de stack = ADR).
  • Traz Motion: não empilhar com anime.js no mesmo projeto.
  • Projeto de uma pessoa: manutenção depende do autor.
  • Componente de efeito pesa bundle; usar com parcimônia em app, não só em LP.
Aplicar ou não — onde sim, onde não
✓
Aplicar em: sites/LPs Amplasoft já em Next + Tailwind + shadcn (hero, seção de destaque, prova social animada).
✕
Não aplicar em: NGP Space (CSS Modules + anime.js) e qualquer projeto que já tenha outro motor de animação.
Onde pesquisar

spell.sh/docs · github.com/xxtomm/spell-ui · buscar na doc: "MCP", "Installation", nome do componente (Light Rays, Text Reveal, Tilt Card).

shadcn/ui componentes UI · React + Radix + Tailwind MIT · grátis site principal ↗
Veredito
O padrão do ecossistema e a base de quase todos os kits desta página. Para projeto novo da Amplasoft em Next + Tailwind, é o ponto de partida (e tem MCP oficial para o Claude Code instalar componente). No Space não é drop-in por causa do Tailwind; o que dá para aproveitar lá é a camada de acessibilidade, usando os primitivos do Radix (sem estilo) com CSS Modules, e isso pede ADR.
O que faz

Componentes acessíveis com bons padrões (botões, formulários, diálogos, tabelas), mais Blocks prontos e Charts. O código vai para dentro do seu projeto, para customizar à vontade.

Como faz

React + Tailwind CSS (v4 suportado) + Radix UI para comportamento e acessibilidade. Não é pacote fechado: a CLI copia o fonte. Criado pelo shadcn, na Vercel; ~124 mil estrelas no GitHub.

Por que / pra que faz

Montar a própria biblioteca de componentes sem começar do zero e sem ficar preso a um pacote de terceiros.

Como serve (como se usa)

npx shadcn@latest add <componente>. MCP oficial (npx shadcn@latest mcp no .mcp.json) para o agente buscar e instalar por linguagem natural. Aceita registries de terceiros (Rare UI, beUI, Spell UI, Kokonut).

O que ajuda (prós)
  • Referência do setor: acessível, bem documentado, comunidade enorme.
  • Você é dono do código.
  • MCP oficial para Claude Code.
  • Registry abre caminho para os kits animados desta página.
O que atrapalha (contras)
  • Exige Tailwind + Radix no projeto.
  • Não drop-in no Space (CSS Modules).
  • Cada componente copiado vira código seu para manter.
Aplicar ou não — onde sim, onde não
✓
Aplicar em: base de todo projeto novo da Amplasoft em Next + Tailwind; fonte de padrão de acessibilidade para qualquer projeto.
✕
Não aplicar em: colar no Space (CSS Modules); ali, se precisar de acessibilidade pronta, avaliar Radix puro com ADR.
Onde pesquisar

ui.shadcn.com/docs · docs/cli · docs/mcp · buscar: Blocks Charts registry MCP

Rare UI componentes UI · React + Tailwind + Motion MIT · grátis site principal ↗
Veredito
Mesmo trade-off do Spell UI: cola em projeto Amplasoft Tailwind + shadcn sem outro motor; no Space, só referência. Catálogo pequeno (dezenas) de componentes animados com personalidade (Fluid Orb, Gravity Letters, Folder), todos com Motion.
O que faz

Componentes React animados prontos para produção: Folder, Duration Picker, Fluid Orb, Gravity Letters, OTP Input, entre outros.

Como faz

Registry shadcn feito com Next.js, Tailwind CSS e TypeScript; todo componente animado com Motion. Um arquivo por componente, sem pacote externo. Mantenedor: swamimalode07; ~1 mil estrelas.

Por que / pra que faz

Dar detalhe memorável (orb, letras com gravidade, seletor de duração) sem construir a animação.

Como serve (como se usa)

npx shadcn@latest add swamimalode07/rare-ui/fluid-orb — o código cai no projeto. Docs em Mintlify.

O que ajuda (prós)
  • MIT e grátis; código vira seu.
  • Componentes diferentes do óbvio (bons para LP e hero).
  • Sem dependência de pacote extra além do Motion.
O que atrapalha (contras)
  • Tailwind + Motion: não drop-in no Space e não empilhar com anime.js.
  • Catálogo pequeno; projeto de uma pessoa.
  • Sem MCP nem Figma.
Aplicar ou não — onde sim, onde não
✓
Aplicar em: LPs e sites Amplasoft em Next + Tailwind + shadcn que ainda não tenham outro motor de animação.
✕
Não aplicar em: NGP Space (CSS Modules + anime.js) e projeto que já use GSAP ou anime.js.
Onde pesquisar

rareui.com · github.com/swamimalode07/rare-ui · buscar: nome do componente (Fluid Orb, Gravity Letters, OTP Input)

beUI componentes UI · React + Tailwind + Motion MIT · Pro pago site principal ↗
Veredito
O mais completo dos kits animados desta página (120+), com o mesmo limite de stack. Bom para Amplasoft em Next + Tailwind + shadcn quando precisar de peça pronta com movimento (command palette, dynamic island, toasts). No Space, referência.
O que faz

120+ componentes animados em três grupos: Motion primitives (botões, modais, toasts, tabs), Blocks (command palette, dynamic island) e Charts (heat calendar, price target fan). Tem playground interativo.

Como faz

React 19 + Next.js + Framer Motion + Tailwind CSS 4, distribuído como registry shadcn (@beui/…).

Por que / pra que faz

Entregar interface com movimento de produto premium sem desenhar cada animação.

Como serve (como se usa)

npx shadcn add @beui/tilt-card (ou bunx/pnpm/yarn). Núcleo MIT grátis; versão Pro em pro.beui.dev (preço e escopo não confirmados). O autor também faz componente sob encomenda.

O que ajuda (prós)
  • Volume grande e variado (inclui charts e blocks).
  • Núcleo grátis; código vira seu.
  • Playground para testar antes de instalar.
O que atrapalha (contras)
  • Tailwind + Framer Motion: não drop-in no Space.
  • Parte no Pro, sem preço confirmado.
  • Docs deram 404 na visita (16/09/2026).
  • Sem MCP nem Figma.
Aplicar ou não — onde sim, onde não
✓
Aplicar em: projetos Amplasoft em Next + Tailwind + shadcn que aceitem Motion como motor; command palette e dynamic island prontos.
✕
Não aplicar em: NGP Space e projeto com outro motor de animação; assinar o Pro sem conferir preço e licença.
Onde pesquisar

beui.dev · pro.beui.dev · buscar: Motion primitives Blocks Charts

Beautiful UI componentes UI · interfaces de IA MIT · grátis site principal ↗
Veredito
O mais útil desta leva para o Fala App: componentes de interface de IA. Chat loader, card de aprovação, tabela de diff, fluxograma, tela de agente — exatamente o vocabulário de produto de atendimento com IA. A stack (Next + Tailwind v4 + shadcn) veio de fonte cruzada, não da página: confirmar antes de colar.
O que faz

Componentes funcionais, prontos para copiar, focados em "interfaces nativas de IA": loaders de chat, cards de aprovação e recomendação, tabelas de diff, flowchart, code block, tela de agente. 21 categorias.

Como faz

Stack indicada por fonte cruzada (GitHub): Next.js (App Router) + React + Tailwind CSS v4 + TypeScript, instalação pela CLI do shadcn — não confirmado no próprio site (as páginas /docs e /components deram 404 em 16/09/2026). Publicado pelo estúdio Turbo.

Por que / pra que faz

Resolver as telas que todo produto com agente de IA precisa e que os kits genéricos não têm (aprovação humana, diff, estado do agente).

Como serve (como se usa)

Copiar o componente; pela fonte cruzada, npx shadcn add https://www.beautifului.dev/r/<componente>.json (conferir). Newsletter para novos lançamentos.

O que ajuda (prós)
  • Foco raro: UI de agente/IA pronta.
  • MIT e grátis.
  • Casa com Fala App e com painéis de IA do Space (como referência).
O que atrapalha (contras)
  • Stack e instalação não confirmadas no site (docs 404).
  • Tailwind: não drop-in no Space.
  • Sem MCP nem Figma no que foi acessado.
Aplicar ou não — onde sim, onde não
✓
Aplicar em: Fala App e qualquer produto Amplasoft com agente/chat de IA (referência sempre; código se o projeto for Tailwind + shadcn).
✕
Não aplicar em: colar no Space (CSS Modules); usar sem antes confirmar stack e licença na documentação.
Onde pesquisar

beautifului.dev · buscar: chat loader approval card diff table agent screen

Tipografia / Fontes
Fontjoy tipografia grátis site principal ↗
Veredito
Usar pra DECIDIR a dupla de fontes, não pra implementar. Resolve o "que fonte combina com essa" em segundos. A implementação segue a regra do projeto: next/font no Space, @font-face data-URI em artifact (o CSP bloqueia CDN de fonte).
O que faz

Gera pares de fontes que combinam — uma pra título, outra pra corpo.

Como faz

Uma rede neural treinada pra achar contraste/harmonia entre tipos. Fonte-base: Google Fonts. Controles: Generate / Lock / Edit.

Por que / pra que faz

Pra quem não é designer tipográfico acertar o pareamento sem chute — o gargalo real de escolher fonte pra site, LP ou deck.

Como serve (como se usa)

Clica Generate até gostar, Lock na que quer manter enquanto troca a outra, Edit pra escolher manual. Anota os nomes.

O que ajuda (prós)
  • Tira o chute do pareamento.
  • Base Google Fonts: grátis e fácil de servir (next/font).
O que atrapalha (contras)
  • Só Google Fonts — sem fontes premium/foundry.
  • É sugestão de IA: precisa de olho humano pra fechar.
Aplicar ou não — onde sim, onde não
✓
Aplicar em: escolher a dupla de fontes de qualquer site, LP ou apresentação.
✕
Cuidado: não é implementação — no Space use next/font; em artifact, inline via data-URI (CSP).
Onde pesquisar

fontjoy.com · depois buscar os nomes em fonts.google.com.

Ícones (3D)
Thiings ícones 3D grátis · PNG site principal ↗
Veredito
Ilustração 3D pontual, com a licença conferida antes. 10.000+ objetos 3D com estilo consistente — ótimo pra empty state, hero e marketing. Mas é PNG (raster), não vetor, e a licença comercial da coleção é paga: conferir os termos antes de usar em produto que cobra.
O que faz

Biblioteca de 10.000+ ícones/objetos 3D gerados por IA, estilo "coisinha" renderizada.

Como faz

Ícones AI-generated, agrupados por tema (tecnologia, natureza, formas…). Download em PNG com fundo transparente. Feito por Charlie Clark.

Por que / pra que faz

Ilustrar sem ilustrador — dar cara 3D moderna a empty states, onboarding, hero e peças de marketing.

Como serve (como se usa)

Navega por tema, baixa o PNG. Individual grátis pra uso pessoal; licença comercial vitalícia pra usar a coleção.

O que ajuda (prós)
  • Volume enorme e estilo coeso.
  • PNG transparente, download rápido.
O que atrapalha (contras)
  • Raster (PNG) — não escala como vetor/SVG.
  • Estilo 3D pode brigar com UI flat/clean.
  • Licença comercial da coleção é paga; proíbe revender como pacote.
Aplicar ou não — onde sim, onde não
✓
Aplicar em: ilustração pontual — marketing, empty state, deck, onboarding.
✕
Não aplicar em: onde precisa de vetor escalável (ícone de UI); e sem conferir a licença em produto pago.
Onde pesquisar

thiings.co/things · termos em thiings.co/terms.

Imagens / Fotos IA
Lummi imagens IA freemium site principal ↗
Veredito
Stock de IA sem custo e sem atribuição — pra onde foto real não é essencial. 16.000+ imagens comerciais royalty-free. Cuidado onde o cliente espera pessoa/produto real: imagem de IA às vezes entrega "cara de IA".
O que faz

Banco de 16.000+ imagens, ilustrações e 3D gerados por IA, royalty-free.

Como faz

Curadoria de artistas de IA; busca + ajuste de brilho/saturação/contraste antes de baixar. Tem integração nativa com Figma.

Por que / pra que faz

Imagem de stock sem o clichê de banco de imagem e sem custo/atribuição — pra site, blog, social, deck.

Como serve (como se usa)

Busca, ajusta, baixa. Grátis, comercial, sem atribuição; plano Pro desbloqueia extras.

O que ajuda (prós)
  • Comercial sem atribuição.
  • Ajuste de imagem embutido + Figma nativo.
O que atrapalha (contras)
  • Pode ter "cara de IA"/pequenos erros.
  • Parte do acervo atrás do Pro.
  • Consistência de estilo entre várias imagens exige curadoria.
Aplicar ou não — onde sim, onde não
✓
Aplicar em: hero, blog, social e deck onde foto real não é obrigatória.
✕
Não aplicar em: onde se espera pessoa/produto real (cliente pode estranhar IA).
Onde pesquisar

lummi.ai

Inspiração / Referência de design
Refero Styles DESIGN.md para agentes de IA grátis em beta · MCP no Refero pago site principal ↗
Veredito
Adotar como passo zero de todo projeto novo com IA: escolher um estilo, colar o DESIGN.md na raiz e só depois pedir a primeira tela. É a fonte mais alinhada ao fluxo VibeCoding da Amplasoft e ao Claude Code. Não é código nem lib: é o "gosto" do agente em Markdown. No Space vale só como referência de tokens (cor, tipo, espaçamento), traduzida pra CSS Modules.
O que faz

Biblioteca de 2.000+ sistemas de design extraídos de sites de produtos reais e empacotados como DESIGN.md: cores, tipografia, escala de espaçamento, motion e padrões de componente, legíveis por agente de IA.

Como faz

Busca por marca, mood, cor, tipografia ou URL. Cada estilo tem screenshots do produto original + o DESIGN.md pronto pra Cursor, Claude Code, Codex, v0, Lovable. Feito pela Refero (biblioteca de pesquisa de UI paga). Servidor MCP em refero.design/mcp deixa o agente buscar estilos, telas e fluxos sozinho.

Por que / pra que faz

Resolver o "UI genérica de IA": em vez de descrever o visual em prompt vago, o agente recebe um sistema de design real, com números, e gera telas coerentes com ele.

Como serve (como se usa)

Navega, copia o DESIGN.md (grátis, sem cadastro na beta) e salva na raiz do projeto (ou em CLAUDE.md/regras do Cursor). Alternativa: conectar o MCP do Refero e pedir "use o estilo X". MCP de terceiro no mcpservers.org: não confirmado se oficial.

O que ajuda (prós)
  • Grátis (beta) e sem lock-in: é Markdown.
  • Encaixa no fluxo que já uso (DESIGN.md + Impeccable + Claude Code).
  • Dá base real (produto no ar) pra briefing de cliente: "quero algo como a marca X".
O que atrapalha (contras)
  • Preço pós-beta e licença de uso do DESIGN.md: não confirmados.
  • É extração automática: tokens podem vir imprecisos; conferir antes de virar design system de cliente.
  • Copiar estilo de marca conhecida de forma literal pode gerar site "clone"; usar como ponto de partida, não como resultado.
  • MCP completo depende do plano pago do Refero.
Aplicar ou não — onde sim, onde não
✓
Aplicar em: todo projeto Amplasoft do zero (site, LP, SaaS) e no kickoff de design do Fala App: DESIGN.md antes da primeira tela.
✕
Não aplicar em: NGP Space como "cola e roda" (já tem identidade e CSS Modules); ali só serve de referência pontual de token.
Onde pesquisar

styles.refero.design · /ai-agents/design-md-examples · /ai-agents/design-prompts · buscar: "MCP", "DESIGN.md", nome da marca ou mood (ex.: "dashboard", "fintech", "dark").

Inspora inspiração visual · arquivo curado grátis · sem cadastro site principal ↗
Veredito
Moodboard de bolso pra briefing e pra "descolar" do padrão IA: usar antes de desenhar, nunca como asset. É galeria de trabalho alheio, sem código e sem licença de uso: serve pra apontar direção (com print) no kickoff de site/LP e pra alimentar o Impeccable com referência concreta. Nada dali entra em projeto.
O que faz

Arquivo curado à mão de trabalhos visuais recentes, atualizado de hora em hora, em 7 categorias: Web, Branding, Product, Motion, Illustration, 3D e Print.

Como faz

Galeria de imagens (WebP) com post individual por projeto e link pra fonte original. Sem cadastro; newsletter opcional. Curadoria de um criador independente (@neropursue no X). Não confirmado: quantos itens, critério de seleção.

Por que / pra que faz

Substituir a rolagem infinita de Dribbble/Behance por uma seleção pequena e recente do que está bom agora.

Como serve (como se usa)

Abrir, filtrar a categoria, salvar prints/links das 3-5 referências que definem a direção do projeto. Levar os prints pro briefing com o cliente e pro prompt de design (Impeccable / DESIGN.md).

O que ajuda (prós)
  • Grátis, rápido, sem ruído de ranking social.
  • Cobre branding, motion e print, não só UI.
  • Link pra fonte original: dá pra creditar e aprofundar.
O que atrapalha (contras)
  • Zero código, zero token: não acelera implementação, só decisão.
  • Imagens são de terceiros: não usar como asset nem copiar layout literal.
  • Depende de um curador só; pode parar de atualizar sem aviso.
  • Sem busca por texto visível: descoberta é por rolagem e categoria.
Aplicar ou não — onde sim, onde não
✓
Aplicar em: kickoff de site/LP/branding (NGP e Amplasoft), moodboard pra cliente, referência de motion pra hero e deck.
✕
Não aplicar em: como fonte de imagem/ícone pra produto, ou como "modelo pra clonar" de layout.
Onde pesquisar

inspora.design · ?category=Web · ?category=Motion · ?category=Branding

Ferramentas / Automação de atendimento
OpenReply automação Instagram · self-hosted MIT · grátis (hospedagem à parte) repositório ↗
Veredito
Substitui o comment-to-DM do ManyChat, não o ManyChat inteiro. Vale um piloto na NGP em conta própria antes de prometer a cliente. Faz uma coisa e faz pela API oficial da Meta: comentário ou resposta de Story com palavra-chave vira DM com link rastreado, follow gate e inbox. Não tem WhatsApp, fluxo visual, nem IA. O custo real não é software: é infra (web + worker + Postgres + Redis) e, pra rodar pra clientes, o App Review da Meta com verificação de empresa. Registrado em 2026-09-14 pra estudar; adoção depende do piloto.
O que faz

Alguém comenta "LINK" no reel e recebe DM com o link. Gatilhos por palavra-chave em comentário, DM recebida e resposta de Story; resposta pública opcional; links rastreados (cliques e CTR por campanha) com até 2 botões; follow gate (só entrega após seguir); {username} na mensagem; inbox de DMs dentro da janela de 24h; logs de cada envio, pulo e falha; múltiplas contas e workspaces com papéis owner/admin/member.

Como faz

Next.js 16 + React 19 (web + webhooks), Prisma 7 + PostgreSQL, BullMQ sobre Redis pro worker de envio, Auth.js com magic link via Resend, Tailwind 4, Recharts. Usa a API oficial do Instagram (Instagram Login): sem scraping, sem browser, sem senha. Rate limit por conta abaixo do teto da Meta (750 DMs/h), excedente enfileirado. Autor: Diwen Huang; fork do instagram-comment-to-dm de Anish Raj. Criado em julho de 2026, 2.256 estrelas e 853 forks, commits até 2026-09-14.

Por que / pra que faz

Comment-to-DM é uma feature só, mas toda ferramenta cobra assinatura mensal por ela. OpenReply entrega essa feature como software que você audita, altera e hospeda, sem limite de contas ou de plano.

Como serve (como se usa)

Self-hosted obrigatório (o site openreply.diwen.dev é só demo do painel). Dois processos sempre: web (npm run dev/Vercel) e worker (npm run worker, precisa de host 24h). Mais Postgres, Redis, URL HTTPS pública e e-mail. Conexão com Instagram: (a) seu próprio app Meta, grátis, ou (b) Zernio, provedor pago e patrocinador, que dispensa criar e revisar o app (preço: não confirmado, ver zernio.com/pricing). Tem Dockerfile e docker-compose: cabe no Coolify. Doc traz prompt pronto pra Claude Code fazer o setup.

O que ajuda (prós)
  • MIT, sem assinatura por conta: vira margem na NGP se rodar pra vários clientes.
  • API oficial da Meta: risco de banimento é o mesmo do ManyChat, não o de ferramenta de scraping.
  • Workspaces e papéis já pensados pra agência.
  • Stack idêntica à da Amplasoft (Next, Prisma, Postgres): dá pra estender.
  • Stack de referência grátis (Vercel + Neon + Redis Cloud + VM Oracle + Resend) documentada.
O que atrapalha (contras)
  • Não é ManyChat completo: só Instagram; sem WhatsApp, sem construtor de fluxo, sem IA, sem broadcast, sem integrações nativas.
  • Pra conectar conta de cliente precisa de App Review da Meta com Advanced Access e verificação de empresa (CNPJ). Em conta própria/testers, não precisa.
  • Zernio resolve o review mas é pago e reintroduz dependência de terceiro.
  • Operação é sua: worker fora do ar = nenhuma DM sai. Precisa de monitoramento.
  • Projeto de 2 meses e de uma pessoa: ritmo alto agora, sem garantia.
  • Auth.js ainda em beta no package.json.
Aplicar ou não — onde sim, onde não
✓
Aplicar em: piloto nas contas da NGP/Fala/Amplasoft (sem review) pra medir CTR e estabilidade; depois, ofertar a clientes de gestão 360 como substituto do ManyChat só na feature comment-to-DM. Ideia pra Fala App: gatilho de comentário no Instagram levando pro atendimento por IA no WhatsApp.
✕
Não aplicar em: cliente que usa ManyChat pra fluxo de WhatsApp, IA ou broadcast (não cobre); prometer a cliente antes de passar no App Review; rodar sem alguém dono da operação do worker.
Onde pesquisar

github.com/diwenne/openreply · docs/setup.md (setup completo + prompt pra IA) · META_APP_REVIEW.md (permissões e justificativas pro review) · docs/stack.md · docs/zernio.md · demo do painel: openreply.diwen.dev

Modelo de cada nova fonte

Toda referência que você mandar (só o link já basta) entra numa seção como a de cima, na categoria certa, respondendo:

O que faz
Como faz
Por que / pra que faz
Como serve (como se usa)
O que ajuda (prós)
O que atrapalha (contras)
Aplicar ou não — onde sim / onde não
Link principal + onde pesquisar

Quando for JS embutível, adiciono demo ao vivo. Fonte visual (logos, componentes, inspiração) entra com preview/print e link. Pode mandar as próximas quando quiser.