Projeto pessoal · Design & front-endAcervo porcategoriasPreview
ao vivoCódigo
reutilizável
Um repertório visual.Pronto para criar.
Efeitos, componentes e animações organizados para dar vida a novos projetos.
Um acervo pessoal de 346 efeitos e componentes de interface, cada um ao vivo e com o código pronto, para escolher o melhor caminho em cada projeto.346 efeitos e componentes ao vivo, com o código pronto.
- Next.js 16.1
- React 19.2
- TypeScript 5.7
- Tailwind CSS 4.2
- Framer Motion 11
- GSAP 3.15
Projeto pessoal · Design & front-endAcervo por categoriasPreview ao vivoCódigo reutilizávelUm repertório visual.Pronto para criar.
Efeitos, componentes e animações organizados para dar vida a novos projetos.
- Next.js 16.1
- React 19.2
- TypeScript 5.7
- Tailwind CSS 4.2
- Framer Motion 11
- GSAP 3.15
Um acervo pessoal de 346 efeitos e componentes de interface, cada um ao vivo e com o código pronto, para escolher o melhor caminho em cada projeto.346 efeitos e componentes ao vivo, com o código pronto.
- Next.js 16.1
- React 19.2
- TypeScript 5.7
- Tailwind CSS 4.2
- Framer Motion 11
- GSAP 3.15
O acervo
346 efeitos, cada um na sua gaveta.
Quem faz muitos sites acaba refazendo o mesmo efeito toda vez, e esquecendo onde estava aquele que ficou bom. A biblioteca guarda tudo num lugar só: efeitos e componentes reunidos e adaptados de bibliotecas abertas, cada um ao vivo e com o código pronto. Toque ou passe o mouse numa gaveta para abrir.
Bordas com gradientes cônicos, máscaras e efeitos de cinema.
Alguns de dentro- Conic Feixe Girante
- Broken Border
- Dupla Border Rotate
Inclinação 3D, ímã e brilho ao passar o mouse.
Alguns de dentro- Tilt 3D com Glare
- Magnetic Effect
- Shine Sweep
Elementos que aparecem com classe: em cascata, por máscara, do desfoque ao nítido.
Alguns de dentro- Stagger Reveal
- Mask Reveal
- Blur-to-Sharp
Bento, masonry, scroll-snap e subgrid.
Alguns de dentro- Masonry
- Scroll-Snap Grid
- Subgrid
Pilha 3D, peek, parallax e radial, para topo e galerias.
Alguns de dentro- 3D Stack Carousel
- Peek Slider
- Parallax Carousel
Vidro fosco com profundidade, em camadas.
Alguns de dentro- Glass Basico
- Glass 3-Layer
- Pill Nav Glass
Partículas douradas, pontos magnéticos e fluido.
Alguns de dentro- GoldParticles
- Magnetic Dots
- tsParticles Library
Fontes variáveis, texto em gradiente e letras com mola.
Alguns de dentro- Variable Fonts
- Animated Text
- Scroll-driven Text
Grão de filme, linhas de varredura, RGB e retícula.
Alguns de dentro- Film Grain
- Scan Lines
- RGB Split
Ondulação, mola e botão que muda de forma.
Alguns de dentro- Ripple Effect
- Spring Bounce
- Morphing Button
View Transitions, ancoragem, rolagem e :has(), só na Web Full.
Alguns de dentro- Scroll-driven Animations
- View Transitions
- Anchor Positioning
Brilho que passa, ímã, confete e clique com efeito.
Alguns de dentro- Shimmer Button
- Confetti Button
- Moving Border Button
Esqueletos com brilho, passos, spinners e barras.
Alguns de dentro- Multi Step Loader
- Skeleton Loader
- Spinner Minimal
Barras flutuantes, laterais, docks, mega menus e abas.
Alguns de dentro- Floating Navbar
- Sidebar Expansivel
- Animated Tabs
Topos, FAQ, depoimentos, preços, rodapés, login e contato.
Alguns de dentro- FAQ Accordion
- FAQ Grid
- FAQ Categorized
Ajuda que aparece no lugar certo, com mola.
Alguns de dentro- Animated Tooltip
- Link Preview
- Context Menu
Art déco, polaroide, filme e borda dourada.
Alguns de dentro- Art Deco Card
- Wiggly Boxes
- Concentric Pseudo Frame
Caixa de compra, CEP, CPF/CNPJ, Pix, parcelamento e frete.
Alguns de dentro- Buy Box PDP
- CEP Auto-preenchimento
- CPF e CNPJ Toggle
346 efeitos em 18 gavetas
O efeito certo. No ambiente certo.
Compatibilidade com FiveM e Web para orientar cada escolha.
Compatibilidade por efeitoCompatibilidade por efeitoReact ao vivoA estética chama atenção. A lógica sustenta a experiência.Um efeito bonito pode simplesmente não funcionar dentro do jogo: o navegador embutido do FiveM é mais antigo que o Chrome de casa. Por isso cada efeito da biblioteca vem em duas versões, e uma chave troca entre elas. Experimente aqui, o efeito é de verdade.
- Onde roda
- Sim, giro por transform nas camadas
- Peso
- ~1,5 kB
fivem.cssTrecho simplificado
/* FiveM: cores em hex, giro por transform */
.dupla::before, .dupla::after {
content: ""; position: absolute; inset: -50%;
}
.dupla::before {
background: conic-gradient(transparent 300deg, #d4af37 360deg);
animation: gira 4s linear infinite;
}
.dupla::after { animation-direction: reverse; }
@keyframes gira { to { transform: rotate(360deg); } }Os trechos acima são versões curtas, para mostrar a diferença. Na biblioteca, cada efeito traz o código inteiro dos dois lados.
A busca
Digitou errado? Ela acha mesmo assim.
Com centenas de efeitos, ninguém lembra o nome certo de cada um. A busca da biblioteca perdoa a letra trocada, a que falta e a que sobra. Esta usa os nomes de verdade do acervo: experimente um dos exemplos com erro, ou digite o seu.
No app, a mesma busca abre de qualquer tela com o atalho Ctrl+K e pode olhar só a categoria aberta ou o acervo inteiro.
As receitas
Três camadas, um componente pronto.
Um bom componente quase nunca é um efeito só: é uma forma, uma reação ao toque e um jeito de entrar na tela. O construtor de receitas junta as três camadas e um estilo. Monte o seu aqui, cada escolha muda a prévia na hora.
Elemento
Forma
Interação
Movimento
Estilo
Toque ou passe o mouse para ver a interação
A receita
Cartão de produto + Borda que gira + Sobe + Entra subindo · LuxoNo app são 25 elementos, de cartão e botão a carrinho, menu e linha do tempo de pedido, e 6 estilos, cada combinação com o CSS pronto para copiar.
Organização · Reutilização · Front-end
Cada projeto alimenta o próximo.
Modelos, referências e efeitos organizados para transformar repertório em execução.
Modelos de páginaMapa de seçõesReferências e códigoUma ferramenta própria para evoluir a forma de criar.O que faz uma biblioteca de efeitos virar ferramenta é saber quando NÃO usar cada um. Cada efeito tem a sua bula: para que serve, quando cai bem, quando atrapalha, onde roda e quanto pesa. Estas são de verdade, tiradas da biblioteca, toque ou passe o mouse na ficha para virar.
1.3Dupla Border Rotate
Duas bordas em cone girando em sentidos opostos. Um efeito hipnótico para o elemento principal.
Quando usar
- Cartões de destaque
- Avatares VIP
- Banners em evidência
- Carregamento premium
1.3Dupla Border Rotate
Quando não usar
- Vários na mesma tela
- Elementos pequenos
- Visual minimalista
- Texto longo
- No FiveM
- Sim, com giro por transform
- Na Web
- Chrome 85+
- Peso
- ~1,5 kB
Os textos vêm das fichas da própria biblioteca, só ajustados para leitura.
Os favoritos
Os que mais saem, sempre à mão.
Num acervo grande, alguns efeitos voltam em todo projeto. A estrela guarda esses à parte, e uma chave mostra só eles. Marque os seus: como no app, a escolha fica guardada neste navegador.
3 favoritos na constelação
- Bordas AvançadasBroken Border
Borda quebrada, no estilo art déco.
- Hover PremiumDepth Shift
A profundidade muda ao passar o mouse.
- Animações de EntradaMask Reveal
O conteúdo aparece como uma cortina abrindo.
- Partículas e VFXMagnetic Dots
Pontos que fogem e voltam com o cursor.
- Tipografia PremiumAnimated Text
O texto entra com movimento.
- Texturas de CinemaScan Lines
Linhas de varredura de tela antiga.
- MicrointeraçõesMorphing Button
Um botão que muda de forma.
- Botões e CTAsShimmer Button
Um brilho diagonal que cruza o botão.
- Loaders e SkeletonsMulti Step Loader
Etapas em sequência, com barra e marcas de pronto.
- Seções de PáginaFAQ Accordion
Perguntas que abrem com uma animação suave.
- Molduras e OrnamentosArt Deco Card
Moldura com cantos ornamentados dos anos 20.
- Carrosséis e Sliders3D Stack Carousel
Cartões empilhados em perspectiva 3D.
Amostra de 12 dos 346 efeitos.
As tecnologias
Do que é feito, peça por peça
Um site de uma página só, gerado como arquivos estáticos: abre em qualquer lugar e não precisa de servidor. Escolha uma peça para ver o que ela faz aqui e em que arquivo está.
12tecnologias, em 3 camadas
Tela
Movimento
Recursos
As telas
O acervo em exposição.
A biblioteca por dentro, como ela é: preta e dourada, com as abas no alto. As telas estão em salas, toque ou passe o mouse num quadro para acender a luz e clique para ver grande.
Efeitos visuais
Layout e movimento
Avançado e estrutura
Seções e molduras
E-commerce
Telas reais do app. Os valores e documentos que aparecem são de exemplo.
Próximo projeto38 / 51
Ferramentas para criação e desenvolvimentoDemo Link ManagerPainel para organizar demos de projetos que ainda estão no computador e mandar o link certo a cada cliente, com mensagem pronta e guias de ngrok, LocalTunnel e Cloudflare TunnelNext.js 14.0React 18.2TypeScript 5.3Tailwind CSS 3.4
← AnteriorUIForge