Bar Code Generator — gerador de código de barras
Gera um código de barras (CODE128, EAN13, UPC e mais) direto no navegador, com download em SVG/PNG e cópia do SVG pra área de transferência.
O que mudou no Kikito.
Componente novo, categoria nova, melhoria real — tudo que entra no site aparece aqui, na ordem em que aconteceu.
setembro de 2026
QR Code Generator — gerador de QR code
Gera um QR code a partir de qualquer texto ou link direto no navegador, com download em SVG/PNG e cópia do SVG pra área de transferência.
Smartphone Mockup — moldura de smartphone
Mockup em CSS puro de um smartphone (notch estilo iPhone ou câmera central estilo Pixel) pra encaixar print ou demo de tela sem precisar de imagem externa.
Laptop Mockup — moldura de notebook
Mockup em CSS puro de um notebook pra encaixar print ou demo de tela sem precisar de imagem externa.
Airpods Mockup — case de AirPods
Mockup em CSS/SVG do case de carregamento do AirPods, nas versões padrão e Pro.
Equalizer — curva de EQ interativa
Curva de resposta de um equalizador de áudio com pontos arrastáveis por banda de frequência — arraste pra ajustar o ganho em dB de cada faixa.
Modern Book Cover — capa de livro em 3D
Capa de livro com frente, lombada e contracapa reais que giram em 3D ao passar o mouse — pra destacar um produto, artigo ou release como se fosse um livro.
Animated Noise — ruído que treme em steps
Textura de ruído self-contained (sem imagem externa) que se desloca em passos discretos, tipo grão de filme antigo — encaixa como overlay em cima de qualquer fundo. Absorvido por Noise Background.
Slide In On Scroll — animação ligada ao progresso do scroll
Desliza e esmaece o conteúdo usando animação nativa do CSS (animation-timeline: view()), acompanhando o scroll de verdade em vez de disparar uma vez só — absorvido por Scroll Reveal.
Border Trail — luz correndo pela borda
Um cometa de luz percorre continuamente a borda de qualquer container via offset-path do CSS, sem SVG customizado — encaixa em cima de qualquer card ou botão.
Bottom Blur Out — esmaece conteúdo na base do container
Scrim de blur progressivo em camadas pra desfocar suavemente conteúdo que transborda por baixo — listas longas, carrosséis, texto truncado — sem um corte abrupto.
Trailing Images — imagens em rastro seguindo o cursor
Cada movimento do mouse solta uma imagem que voa até a posição atual e encolhe até sumir, criando um rastro contínuo — efeito clássico de portfólio/showreel.
Wavy Line — linha que ondula sob o cursor
Linha fininha que se curva ao vivo conforme o mouse passa por cima e relaxa de volta ao repouso — divisor de seção com um toque de interatividade.
Dynamic Cards — gradiente e spotlight seguindo o cursor
Card com um efeito de luz que rastreia a posição do mouse: mancha de gradiente sob máscara circular ou anel de spotlight na borda — absorvido por Following Pointer.
Follow Cursor — anel simples seguindo o mouse
Versão leve de cursor customizado: um anel que acompanha o mouse dentro de uma área, com a opção de esconder o cursor real — absorvido por Following Pointer.
Blur Appear — entrada com blur ao montar
Wrapper de transição que faz qualquer conteúdo aparecer com blur, fade e um leve deslocamento — dispara ao montar (não precisa de scroll), ótimo dentro de alternâncias condicionais.
Variable Font Cursor — peso da fonte reage ao cursor
Cada letra interpola seu peso de fonte variável conforme a proximidade do mouse, com curva de queda linear, exponencial ou gaussiana — efeito de tipografia cinética sem nenhuma biblioteca externa.
Glow Text — halo estático em camadas de sombra
Texto com um brilho ao redor em várias camadas de drop-shadow, herdando a cor do próprio texto — variante estática do brilho do Text Shine, sem a animação de sweep.
Word List Swap — troca de palavras em odômetro
Cicla uma lista de palavras com deslocamento vertical estilo odômetro, staggerizado por caractere, palavra ou linha, com controle programático (próxima/anterior/pular) — variante do Flip Words.
Scramble Hover — decodifica ao passar o mouse
Texto embaralhado que revela ao passar o cursor e volta a embaralhar ao sair, com opção de revelação sequencial por direção — variante do Encrypted Text disparada por hover em vez de scroll.
Moving Bands — faixas diagonais em movimento
Camada de fundo com um gradiente listrado na diagonal que desliza em loop contínuo — efeito ambiente pra hero sections e cards de destaque.
Grid Pattern ganhou o estilo tracejado
Novo type="dashed" no Grid Pattern — linha tracejada como opção de padrão decorativo, ao lado de dots/lines/cross/grid já existentes.
Droppable File — dropzone com pré-visualização por arquivo
Área de arraste-e-solte que mostra a miniatura real de cada imagem (ou um ícone genérico pra outros tipos) numa lista removível — complementa o File Upload, que não tem preview por item.
Simple With CTA — navbar compacta com botão de destaque
Barra de links em formato de pílula com um item de ação principal destacado — versão mais simples que o Navbar Menu pra quando não precisa de mega-menu.
Mac Dock — dock de apps com magnificação por hover
Variante mais leve do Dock: cada ícone aumenta individualmente ao passar o mouse (CSS puro), sem o rastreamento contínuo de proximidade do Dock original.
Side Menu Smooth Hover — menu lateral com hover elástico
Lista de navegação plana onde o destaque de hover entra na hora mas sai com um delay perceptível — sensação mais suave que o Vertical Nav padrão.
Vercel Navigation — tabs com pílula deslizante
Navegação horizontal com um indicador que desliza entre os itens ao passar o mouse ou clicar, no estilo da vercel.com — complementa o Navigation Menu pra quando não há dropdown.
Notification Card — item de feed de notificações
Card persistente com ícone, título, timestamp e mensagem, pensado pra listas/feeds de notificação — distinto do Toast (efêmero) e do Notification Bell (badge de contagem).
Dynamic Square Background — card de anúncio com fundo animado
Card de feature/produto com um grid de tiles fazendo fade in/out atrás do conteúdo, pra chamar atenção em anúncios e banners de novidade.
Modern Inner Shadow — card simples com brilho na borda
Card sem glass/blur, com um inner-shadow sutil que lê como luz pegando a borda — efeito mais perceptível no dark mode.
Hover Effect Card — tilt 3D 100% CSS
Card que gira em 3D acompanhando a posição do cursor, via CSS puro (grade invisível de trackers), sem nenhum JS de mousemove.
Testimony Card — depoimento único com hover animado
Card de citação (avatar, nome, cargo e mensagem) que troca a ordem dos blocos ao passar o mouse, pra depoimentos avulsos fora de um carrossel.
Classic Pulse Skeleton — preset de loading avatar + texto
Combinação pronta de avatar circular e linhas de texto em loading state, composta em cima do Skeleton — pra perfis e itens de lista.
Shiny Gradient Skeleton — brilho varrendo o bloco
Skeleton com uma varredura de brilho cruzando na horizontal ou vertical, alternativa mais chamativa ao pulse clássico.
Spinner Loader — anel giratório simples
Loader circular minimalista com tamanho e cor configuráveis, pra quando um Spinner completo é overkill.
Three Dot Simple Loader — 3 pontos saltando
Loader de 3 dots pulando em sequência escalonada, opção mais leve e direta que as variantes de dots do Spinner.
Github Stars Button — contador de stars em tempo real
Botão que busca a contagem de stars de qualquer repositório GitHub (prop `repo` configurável), com estado de carregamento e fallback gracioso se a API falhar.
Dual Action Button — par de ações unidas num pill
Botão de salvar com estado assíncrono (idle/saving/saved) unido a um link secundário sempre visível, num único pill — sem dropdown.
Shiny Rotating Border Button — glow orbitando a borda
Botão com um blob desfocado orbitando a borda em loop e o texto ganhando um gradiente animado — variante do conceito de 'luz percorrendo a borda' do Moving Border.
Advanced Badges — matriz de variantes cor × tamanho × raio
Badge com controle independente de cor, tamanho, raio da borda e contorno, pra composições mais elaboradas que o Badge padrão.
Clerk Badge — moldura tracejada pra rótulos Beta
Badge compacto com uma moldura de linhas tracejadas nos 4 lados, inspirado na documentação da Clerk, pra marcar recursos em preview.
Modern Simple Badges — badge minimalista tintado
Badge de fundo translúcido numa única cor, sem borda nem ícone, pras 9 famílias de accent do design system — pra quando o Badge completo é demais.
Modern Simple Quote — citação em formato cartão
Citação compacta com aspas flanqueando o texto, fundo tintado e borda de destaque à esquerda — variante mais densa do Quote Block.
Before Effect Button — pill realçado atrás do rótulo
Botão de texto com um pseudo-elemento que aparece atrás do rótulo no hover (ou fica sempre visível), pra ações discretas em toolbars e menus.
Call To Action Button — pill de anúncio com badge e seta
Botão em formato pill com badge, mensagem de apoio e seta animada, pronto pra anunciar novidades ou promoções no header.
Growing Button — ícone que cresce pra revelar o rótulo
Botão compacto (só ícone) que se expande no hover pra mostrar um rótulo, substituindo um tooltip em ações pouco usadas.
Modern Animated Button — luz girando ao redor da borda
Botão em pill com uma luz cônica em looping infinito ao redor da borda, estilo Raycast, feito 100% em CSS.
Action Menu — menu de ações estilo bottom-sheet
Uma pílula fechada que expande verticalmente num painel com grupos de ações selecionáveis — ideal para menus de contexto compactos.
Battery Indicator — nível de bateria do dispositivo
Mostra o nível de bateria, status de carregamento e tempo restante em tempo real, lendo direto da Battery Status API do navegador.
Cookie Banner — consentimento de cookies
Banner de consentimento com opções de aceitar, aceitar somente essenciais ou recusar, persistido em cookie próprio.
Settings Panel — bandeja de configurações compacta
Painel de ajustes que expande a partir de uma pílula fechada, com abas por categoria e ação de aplicar mudanças.
Elastic Slider — slider com efeito elástico
Arraste além da borda e o trilho estica com decaimento suave, empurrando o ícone correspondente — nova variante do Slider.
Simple Modern Slider — range nativo minimalista
Um input range nativo restilizado com rótulo de valor flutuante acima do thumb — nova variante do Slider.
Pill Switch Theme — pill sol/lua
Um toggle claro/escuro em formato de pílula vertical, com um botão de tema do sistema revelado no hover — nova variante do Theme Selector.
Theme Switcher — orbe gradiente sol/lua
Um botão com orbe gradiente quente/frio e rótulo Light/Dark com transição de blur — nova variante do Theme Selector.
Code Stepper — passos estáticos com bloco de código
Uma lista vertical de passos numerados, conectados por um trilho, cada um com um bloco de código — nova variante do Stepper.
Dynamic Island Notification — notificação expansível
Uma pílula de notificação inspirada no Dynamic Island da Apple, que expande de um sino pulsante pra um cartão com título, mensagem e ação — nova variante do Toast.
Arc Color Picker — seletor de cor 2 eixos
Um slider de matiz × opacidade com preview de grão e paleta de swatches — nova variante do Color Picker.
macOS Context Menu — menu de clique-direito translúcido
Um menu de contexto com vibrancy blur e destaque estilo macOS, construído sobre Radix — nova variante do Context Menu.
macOS Dropdown — menu suspenso translúcido
O mesmo skin translúcido do macOS Context Menu, agora disparado por clique — nova variante do Dropdown Menu.
Modern 3D Kbd — tecla com relevo físico
Uma tecla estilo keycap com sombra em duas camadas simulando profundidade real — nova variante do Kbd.
Modern Detailed Kbd — tecla com sombras detalhadas
Uma tecla com camadas de sombra sutis e estados de hover/active — nova variante do Kbd.
Growing Search — busca que cresce no foco
Um campo de busca compacto que se expande ao focar e pulsa um glow ao confirmar — nova variante do Search Input.
Modul-Inspired TOC — índice que escaneia headings
Um índice que detecta os headings de um container automaticamente via DOM e anima uma barra de destaque — nova variante do Table of Contents.
Recursive Tree — árvore por composição JSX
Uma árvore onde cada nível é um componente aninhado com conteúdo livre por linha — nova variante do Tree View.
Modern Glassy Alert — alerta com efeito de vidro
Uma barra de alerta com fundo translúcido e blur, pílula de destaque opcional e botão de fechar — nova variante do Alert.
Simple Alert — alerta compacto
Um cartão de alerta enxuto com ícone em caixa, título e descrição, pronto pra notificações rápidas — nova variante do Alert.
Floating Growing Banner — faixa que cresce no hover
Uma pílula compacta que se expande num campo de e-mail ao passar o mouse ou focar via teclado — nova variante do Banner.
Advanced Code Block — syntax highlighting real
Bloco de código com highlight de sintaxe de verdade via Shiki, nome de arquivo e botão de copiar — nova variante do Code Block.
Code Card — cartão de código com linguagem lateral
Um cartão de snippet com o nome da linguagem rotacionado na lateral e leve deslocamento no hover — nova variante do Code Block.
Code Snippet — comando copiável em formato de pílula
Um chip clicável que copia o próprio conteúdo pra área de transferência, ideal pra comandos de instalação — nova variante do Code Block.
Inline Code — trecho de código em texto corrido
Uma tag <code> estilizada pra citar trechos de código no meio de um parágrafo — nova variante do Code Block.
useCounter — contador com min/max
Um contador numérico com increment, decrement, set e reset, respeitando limites mínimo e máximo opcionais.
useStep — máquina de passos
Controla um fluxo de N passos (wizard, onboarding) com avançar, voltar e ir direto pra um passo, sem sair do intervalo válido.
useStopwatch — cronômetro
Um cronômetro formatado dd:hh:mm:ss com play, pause e reset, pronto pra medir tempo decorrido em qualquer tela.
useThrottle — valor com taxa limitada
Devolve uma versão do valor que atualiza no máximo uma vez a cada intervalo definido, mesmo que ele mude com mais frequência.
useCookies — estado sincronizado com cookie
Lê, grava e remove um cookie como JSON, com controle de validade, path, domínio e SameSite — API igual à do useState.
useLocalStorage — estado persistente no navegador
Estado sincronizado com localStorage, com serialização em JSON e sincronia automática entre abas e outros componentes que usam o mesmo hook.
useSessionStorage — estado persistente na sessão
Mesma ideia do useLocalStorage, mas o valor some quando a aba fecha — ótimo pra rascunhos e estado temporário de formulário.
useHistory — undo/redo
Guarda um histórico de valores numéricos com capacidade configurável e devolve funções de desfazer e refazer prontas pra aplicar no seu estado.
useLocation — estado reativo da URL
Acompanha pathname, hash, search e trigger da navegação em tempo real, reagindo até a pushState e replaceState feitos pelo próprio app.
useFirstVisit — detecta a primeira visita
Retorna true só na primeira vez que o usuário abre o site (marcado via localStorage) — útil pra um tour de boas-vindas que aparece uma vez só.
useInputValue — atalho pra input controlado
Devolve value e onChange prontos pra espalhar num input de texto, sem escrever o useState e o handler na mão toda vez.
useRerender — força um re-render
Devolve uma função que força o componente a renderizar de novo, sem precisar criar um state descartável só pra isso.
useOnClickOutside — clique fora fecha
Chama um handler quando o clique, toque ou foco acontece fora do(s) elemento(s) informado(s). A base de qualquer dropdown, popover ou menu que fecha sozinho.
useEventListener — addEventListener tipado
Escuta eventos de window, document, um elemento por ref ou até um media query — sempre com o handler mais recente e cleanup automático.
useEventCallback — callback com identidade estável
Devolve uma função que nunca muda de identidade entre renders, mas sempre executa a versão mais recente do seu callback.
useKeyPress — atalhos de teclado
Registra combinações de teclas (com Ctrl, Meta, Shift, Alt) e dispara um handler por combinação. Ignora campos de texto por padrão.
useKonamiCode — easter egg de sequência de teclas
Dispara um callback quando uma sequência específica de teclas é digitada. Bom pra um easter egg ou um atalho secreto.
useInView — elemento visível na tela
Retorna true quando o elemento entra no viewport, via IntersectionObserver. Base de qualquer scroll-reveal.
useMeasure — dimensões de um elemento
Um callback-ref que devolve largura e altura do elemento, atualizadas ao vivo por um ResizeObserver.
useMouse — posição do cursor
Posição do mouse na página e relativa a um container — útil pra efeitos que seguem o cursor.
useWindowScrollPosition — posição do scroll
O x/y do scroll da janela em estado reativo, com throttle configurável — pra parallax e barras de progresso de leitura.
useDropZone — arrastar e soltar arquivos
Transforma qualquer elemento numa área de drop de arquivos, com filtro por tipo e callbacks de entrada, saída e solta.
useAutoScroll — lista grudada no fim
Mantém uma lista (chat, log) grudada no fim enquanto chega conteúdo novo, e solta quando o usuário rola pra cima pra ler o histórico.
Nova categoria: Hooks
Hooks React agora entram no catálogo e no CLI — `npx kikitocn add use-x` instala o hook, e componentes que dependem dele já o trazem junto. Veja a categoria inteira em um lugar só.
useCopyToClipboard — copiar com feedback
Copia texto pra área de transferência e devolve uma flag `isCopied` que volta a `false` sozinha depois de 2s — pronta pra um botão 'Copiado!'.
useDebounce — valor com atraso
Retorna uma cópia de um valor que só acompanha depois de um tempo sem mudança. Bom pra busca em tempo real sem disparar request a cada tecla.
useIsomorphicLayoutEffect — layout effect sem warning de SSR
`useLayoutEffect` no navegador, `useEffect` no servidor — mede e ajusta o DOM antes da pintura sem o aviso de hidratação do React.
useWindowSize — tamanho da janela
Largura e altura da janela em estado reativo, com debounce no `resize` e guarda contra mismatch de hidratação (começa em 0 no server).
useBattery — estado da bateria
Nível, se está carregando e tempo estimado até carregar/descarregar, via Battery Status API. `isSupported` avisa quando o browser não expõe a API.
useBluetooth — parear dispositivo
Pareia e conecta a um dispositivo GATT pela Web Bluetooth (Chromium, contexto seguro). Devolve `device`, `server`, `isConnected` e um `requestDevice()`.
useGeolocation — posição do usuário
Posição atual e acompanhamento contínuo: latitude, longitude, precisão, altitude, velocidade. Trata API indisponível e permissão negada.
useNetworkStatus — qualidade da conexão
Além de online/offline: tipo efetivo (4g/3g…), downlink, latência e modo economia de dados, quando o browser expõe `navigator.connection`.
useOnlineStatus — online ou offline
Um booleano reativo que acompanha os eventos `online`/`offline` do navegador. Versão enxuta do useNetworkStatus.
useMemory — uso de memória
Amostra `performance.memory` num intervalo configurável (heap usado, total e limite). Só existe no Chromium — `isSupported` avisa.
useVideo — controlar um <video>
Passe uma ref pra um elemento de vídeo e ganhe play/pause, volume, avançar/voltar, mudo e fullscreen — com estado reativo sincronizado pelos eventos do próprio vídeo.
useSpeechSynthesis — texto em voz
Wrapper mínimo da Web Speech API: `speak()`, `cancel()`, lista de vozes disponíveis e uma flag `speaking`. SSR-safe.
3D Globe — globo terrestre interativo
Terra com textura de verdade, marcadores-foto em pinos, brilho de atmosfera e rotação automática; arraste pra girar. Feito sobre Three.js — opt-in pesado, só carrega a biblioteca 3D nas páginas que o usam.
Canvas Reveal Effect — grade de dots revelada por shader
Grade de pontos que se revela sozinha ao longo do tempo, com cores configuráveis, boa como fundo de hero. Feita em shader GLSL sobre Three.js — opt-in pesado.
Sparkles — campo de partículas configurável
Campo de partículas cintilantes movido pelo motor tsparticles: dá pra ajustar densidade, velocidade do brilho, tamanho e cor. Clicar adiciona mais partículas.
World Map — mapa-múndi com arcos animados
Mapa-múndi pontilhado com arcos que se desenham entre coordenadas e pontos que pulsam nas pontas. Bom pra mostrar conexões, rotas ou presença global.
Placeholders and Vanish Input — busca que se dissolve
Campo de busca cujo texto se desfaz em pixels ao apertar Enter, com frase de placeholder que gira sozinha.
Resizable Navbar — navbar que encolhe no scroll
Barra de navegação que encolhe ao rolar a página: ganha desfoque de fundo, sombra de vidro e largura reduzida, com física de mola.
Animated Testimonials — carrossel de depoimentos
Depoimentos com uma pilha de fotos que embaralha a cada troca e a citação entrando com blur.
Gooey Input — campo com efeito de gosma
Campo de texto cuja borda se funde e escorre como gosma ao focar.
Hero Parallax — vitrine de produtos em parallax
Hero com três fileiras de cards deslizando em velocidades diferentes conforme a página rola.
Parallax Scroll — grade de imagens em parallax
Grade de imagens em duas colunas que sobem em ritmos opostos durante o scroll.
Sticky Scroll Reveal — conteúdo grudado que troca no scroll
Bloco fixo que troca de texto e de cor de fundo conforme cada seção entra na tela.
Tooltip Card — tooltip com foto que segue o cursor
Tooltip com imagem e detalhes que acompanha o mouse e se ajusta pra não sair da tela.
Container Scroll Animation — monitor 3D que se endireita
Moldura de monitor inclinada em 3D que se endireita conforme você rola até ela.
Direction Aware Hover — conteúdo entra pela borda do cursor
Card cujo conteúdo entra pela borda de onde o mouse veio — cima, baixo, esquerda ou direita.
Images Slider — slider de imagens em tela cheia
Slider de imagens ocupando a tela toda, com transição suave e navegação por teclado.
Infinite Moving Cards — fileira em loop infinito
Fileira de cards (depoimentos, logos) rolando em loop sem fim, que pausa no hover.
Lens — lupa que amplia sob o cursor
Lupa que amplia a região embaixo do cursor, com nível de zoom ajustável.
Sticky Banner — faixa fixa que some no scroll
Faixa fixa no topo que desliza pra fora quando a página rola pra baixo.
3D Marquee — grade de imagens em perspectiva
Grade de imagens em perspectiva 3D rolando na diagonal, contínua.
Floating Navbar — navbar que reaparece ao subir
Barra de navegação flutuante que some ao rolar pra baixo e reaparece ao rolar pra cima.
Hover Border Gradient — borda que acende no hover
Botão cuja borda acende com um gradiente que salta entre os lados no hover.
Moving Border — luz percorrendo a borda
Botão com um ponto de luz percorrendo a borda continuamente.
Navbar Menu — navbar com mega-menu no hover
Barra de navegação com mega-menu que abre no hover, com preview de cada item.
Glowing Effect — borda com glow que segue o mouse
Glow que corre pela borda do card acompanhando a posição do cursor.
Google Gemini Effect — trilhas SVG que se desenham no scroll
Trilhas SVG que se desenham conforme você rola, no estilo da abertura do Google Gemini.
Hero Highlight — fundo de pontos que acende sob o cursor
Fundo de pontos que acende ao redor do cursor, com um marcador de destaque no texto.
Lamp — glow de lâmpada atrás do título
Feixe de lâmpada que se abre atrás de um título quando ele entra na tela.
SVG Mask Effect — segundo conteúdo revelado pelo cursor
Um segundo conteúdo revelado por uma máscara circular que segue o mouse.
Spotlight New — holofote duplo animado
Dois holofotes animados varrendo o topo de uma seção.
Wavy Background — fundo de ondas fluidas
Fundo de ondas fluidas animadas, desenhadas em canvas.
Apple Cards Carousel — cards que abrem em tela cheia
Carrossel de cards que se abrem num painel em tela cheia ao clicar, no estilo da App Store.
3D Card — elementos flutuando em profundidade
Card com elementos em camadas de profundidade que reagem à inclinação do mouse.
Comet Card — reflexo que segue o cursor
Card com um reflexo de luz que desliza pela superfície acompanhando o mouse.
Draggable Card — card que você arremessa
Card que você arrasta e arremessa pela tela, com física de inércia e volta ao lugar.
Evervault Card — matriz revelada sob o cursor
Matriz de caracteres embaralhados revelada só dentro de uma máscara circular no cursor.
Glare Card — card holográfico com brilho de foil
Card com brilho holográfico de foil que muda conforme o ângulo do mouse.
Layout Grid — clique expande o item sobre a grade
Grade de imagens onde clicar num item o expande sobre os demais.
3D Pin — card preso por um pin de mapa
Card que tomba pra trás no hover, preso por um pin 3D no estilo marcador de mapa.
Wobble Card — card que balança sob o mouse
Card que balança e deforma suavemente conforme o mouse se move sobre ele.
Colourful Text — texto que desliza entre cores
Texto que pisca e desliza entre cores, letra a letra.
Encrypted Text — texto que se decodifica
Texto que se decodifica de letras embaralhadas até a palavra final.
Flip Words — troca de palavra com virada
Caixa que troca uma palavra por outra com animação de virada.
Layout Text Flip — palavra-chave que gira em 3D
Título que gira em 3D pra trocar a palavra-chave sem quebrar o layout ao redor.
Squiggly Text — contorno ondulado à mão
Texto com contorno ondulado que se mexe como desenho feito à mão.
Text Generate — texto que aparece palavra a palavra
Texto que surge palavra a palavra com um leve blur de entrada.
Text Hover Effect — letras vazadas que se preenchem
Letras vazadas que se preenchem com um gradiente sob o cursor.
Text Reveal Card — arraste pra revelar o texto por baixo
Card onde arrastar o mouse revela um segundo texto escondido por baixo.
Aurora Background — aurora boreal em movimento
Fundo de aurora boreal em movimento lento atrás do conteúdo.
Background Beams With Collision — feixes que explodem na base
Feixes de luz que caem e explodem em partículas ao bater na base.
Background Beams — feixes de luz subindo
Feixes de luz curvos subindo devagar no fundo.
Background Boxes — grade isométrica que acende no hover
Grade isométrica de caixas que acendem numa cor de destaque aleatória no hover.
Background Gradient Animation — bolhas de gradiente
Bolhas de gradiente que se misturam e seguem o cursor.
Background Lines — linhas curvas que se desenham
Linhas curvas que se desenham e apagam em loop no fundo.
Background Ripple Effect — grade que ondula do clique
Grade que ondula a partir da célula onde você clicar.
Dotted Glow Background — campo de pontos que pulsa
Campo de pontos com um glow suave que pulsa devagar.
Glowing Stars Card — card com céu de estrelas
Card com um céu de estrelas que acendem e apagam em pontos aleatórios.
Light Beam — feixe de luz diagonal
Feixe de luz diagonal varrendo a seção.
Noise Background — textura de ruído animada
Fundo com textura de ruído animada, configurável.
Vortex — vórtice de partículas
Vórtice de partículas girando, desenhado em canvas.
Spinner e Timeline ganham variantes
Spinner ganhou 5 estilos novos de loading; Timeline agora tem um modo em que a linha se desenha conforme você rola a página.
Animated Tooltip — avatares com tooltip de mola
Cluster de avatares que mostram um tooltip com física de mola ao passar o mouse.
Card Hover Effect — destaque que desliza pro card sob o cursor
Grade de cards onde o fundo de destaque desliza pro card que está sob o mouse.
Expandable Card List — cards que expandem em tela cheia
Lista de cards que expandem pra um painel em tela cheia, com o resto da página esmaecido.
Focus Cards — os outros desfocam ao focar um
Grade de cards onde os não-focados desfocam quando o mouse entra em um deles.
Following Pointer — cursor customizado com etiqueta
Cursor customizado com uma etiqueta que segue o mouse dentro da área.
Images Badge — pilha de avatares sobrepostos
Pilha de avatares sobrepostos com contagem dos excedentes.
Keyboard — teclado virtual interativo
Teclado virtual com teclas que afundam ao serem pressionadas.
Link Preview — preview do destino no hover
Link que mostra um preview em imagem do destino ao passar o mouse.
Multi Step Loader — loader que percorre etapas
Loader que percorre uma lista de etapas, marcando cada uma ao concluir.
Pointer Highlight — retângulo que se desenha ao redor do texto
Trecho de texto destacado por um retângulo que se desenha ao redor dele.
Shooting Stars — estrelas cadentes no fundo
Estrelas cadentes cruzando a tela em intervalos aleatórios, com 'chuva de meteoros' opcional.
Stars Background — campo de estrelas com paralaxe
Campo de estrelas com paralaxe suave, pensado pra ficar atrás de outro conteúdo.
Terminal Typewriter — terminal que digita sozinho
Terminal que digita comandos e respostas como se alguém estivesse usando.
Webcam Pixel Grid — webcam virada grade de pixels
Fundo que transforma a imagem da webcam numa grade de pixels animada.
Nova categoria: Chat
Primitivas de composição pra montar qualquer UI de conversa. Veja a categoria inteira em um lugar só.
Marker — indicador de 'digitando' e status
Marcador de estado de mensagem: 'digitando…', enviado, entregue, lido.
Bubble — balão de mensagem
Balão de conversa com 7 variações de cor, cauda opcional e alinhamento por remetente.
Message — linha de mensagem completa
Linha de mensagem juntando avatar, nome, horário e balão — a unidade base de um chat.
Attachment — anexo com estado de upload
Cartão de anexo com miniatura, tamanho do arquivo e barra de progresso de upload.
Message Scroller — rolagem que segue a conversa
Área de rolagem que gruda no fim da conversa sozinha enquanto chega mensagem nova, e solta quando você rola pra cima.
Direction — suporte a texto LTR/RTL
Contexto de direção de texto pra quem precisa suportar árabe, hebraico e outros idiomas da direita pra esquerda.
Survey Form ganha modo de 1 pergunta por vez
Nova opção layout="single": mostra uma pergunta por vez com barra de progresso e navegação Anterior/Próxima/Pular, em vez do formulário inteiro de uma vez.
Headless Table — tabela conectada ao TanStack Table
Pra quem já usa @tanstack/react-table no projeto: uma casca visual completa (sort, seleção de linha, visibilidade de coluna, paginação) que se conecta direto na sua instância da tabela.
Sidebar — shell de aplicação completo
Sidebar colapsável pra rail de ícones, sheet automático no mobile, atalho de teclado (Ctrl+B) e persistência de estado. A peça que faltava pra montar um dashboard inteiro.
Form — integração com React Hook Form
Conecta qualquer input do Kikito CN ao react-hook-form com validação automática, mensagens de erro e acessibilidade (aria-invalid/aria-describedby) de graça.
Native Select — select nativo estilizado
Pra quando você quer o picker nativo do celular em vez de um dropdown customizado — mesmo visual dos outros inputs, zero JavaScript de menu.
Toggle — botão de pressed/unpressed isolado
Um botão sozinho que liga/desliga (favoritar, mudo, negrito numa barra de formatação) — sem precisar montar um grupo inteiro.
Macbook Scroll — mockup de notebook animado
Notebook que abre a tela conforme você rola a página, com teclado e trackpad desenhados em CSS. Ótimo pra hero de página de produto.
agosto de 2026
Nova categoria: Backgrounds
Fundos animados de tela cheia pra hero e páginas de marketing. Veja a categoria inteira em um lugar só.
Squish Pricing Card
Card de preço com fundo animado que reage ao hover — pensado pra página de planos que precisa chamar atenção sem exagerar.
Dock — dock estilo macOS
Ícones que aumentam suavemente conforme o mouse se aproxima, igual ao dock do macOS. Curva de magnificação de verdade, não só um hover scale.
Radio (variant card) alinhado corretamente
Cards de um grupo de rádio com ícone e sem ícone agora ficam com o texto alinhado na mesma altura. Também ganhou indicador de seleção visível.