Biblioteca Visual

Effects

01

Ticker Strip

Faixa de texto com rolagem horizontal infinita. Ideal para comunicar mensagens de marca com energia e ritmo.

/ Variante escura

IA APLICADA SEM SENSACIONALISMO • MENOS HYPE MAIS DEPLOY • IA APLICADA SEM SENSACIONALISMO • MENOS HYPE MAIS DEPLOY • IA APLICADA SEM SENSACIONALISMO • MENOS HYPE MAIS DEPLOY • IA APLICADA SEM SENSACIONALISMO • MENOS HYPE MAIS DEPLOY •

/ Variante cream

IA APLICADA SEM SENSACIONALISMO • MENOS HYPE MAIS DEPLOY • IA APLICADA SEM SENSACIONALISMO • MENOS HYPE MAIS DEPLOY • IA APLICADA SEM SENSACIONALISMO • MENOS HYPE MAIS DEPLOY • IA APLICADA SEM SENSACIONALISMO • MENOS HYPE MAIS DEPLOY •
animation: tickerScroll 20s linear infinite; /* @keyframes translateX(-50%) */
02

Badge Variants

Todos os estilos de badge do sistema: status, label, contagem e tech.

/ Status badges

Online Offline Ocupado

/ Label badges (filled)

NOVO BETA PRO IA

/ Label badges (outline)

NOVO BETA PRO IA

/ Label badges (ghost)

NOVO BETA PRO IA

/ Count badges

3 12 99+

/ Tech badges

GPT-4 Claude Gemini Llama
03

Glow Effects

Efeitos de brilho com a cor primária para destaque e ênfase visual em superfícies escuras.

Primary Glow
/tg.
Glow estático
box-shadow: 0 0 20px rgba(242,107,58,0.4);
Pulse Glow
/tg.
Glow pulsante
animation: glowPulse 2s ease-in-out infinite;
Text Glow
/tg.
Brilho no texto
text-shadow: 0 0 10px rgba(242,107,58,0.5);
Border Glow
/tg.
Borda com brilho
animation: borderGlow 2s ease-in-out infinite;
04

Hover Effects

Efeitos interativos de hover para cards, links e elementos clicáveis. Passe o mouse para testar.

↗
Scale Up
transform: scale(1.05)
↑
Lift
translateY(-8px) + shadow
□
Border Color
border-color: primary
◐
Background Tint
background: primary/5%
―
Underline Slide
width: 0 → 100%
⚙
Icon Rotate
transform: rotate(15deg)
05

Pulse & Breathing

Animações orgânicas de pulso e respiração para indicadores de status e ênfase visual.

Dot Pulse
Indicador ao vivo
Ponto + 2 anéis expandindo com opacity fade
Ring Pulse
Anéis expansivos
border-radius: 50% + scale(1.8) + opacity 0
Breathing
Opacidade orgânica
animation: breathe 3s ease-in-out infinite;
Heartbeat
Batimento cardíaco
Duplo pico de scale: 1.15 → 1 → 1.08
06

Gradient Animations

Gradientes animados para backgrounds, bordas e efeitos de carregamento.

Moving Gradient
Background animado
background-size: 600%; animation: gradientShift 6s
Gradient Border
/tg.
Borda gradiente
background-clip + inner bg trick
Shimmer / Skeleton
Efeito carregamento
::after + linear-gradient translate left → right
Rainbow Border
/tg.
Borda arco-íris
@property --angle + conic-gradient rotation
07

Text Effects

Efeitos tipográficos para ênfase, impacto visual e personalidade da marca.

Typewriter
console.log("/tg.")
Digitação animada
width: 0 → Nch + blink cursor
Gradient Text
Provoca.
Texto gradiente
background-clip: text; -webkit-text-fill-color: transparent;
Glitch
DEPLOY
Efeito glitch
::before + ::after com clip-path offset
Stroke / Outline
Provoca.
Texto vazado
-webkit-text-stroke: 2px var(--primary);
Letter Spacing
PASSE O MOUSE
Espaçamento no hover
letter-spacing: 0 → 0.2em on :hover
08

Cursor & Pointer

Estilos de cursor customizados, efeito magnético e ripple de clique.

Cursores customizados
crosshair
pointer
grab
Passe o mouse para testar
cursor: crosshair | pointer | grab
Magnetic Button
Botão magnético
transform sutil seguindo a posição do cursor
Ripple Click
Clique aqui
Efeito onda ao clicar
scale(0) → scale(4) + opacity fade