Effects
Efeitos visuais que adicionam profundidade e atmosfera. Grain, glow, blur, gradientes de texto e mascaras.
Film Grain
Overlay de textura de filme em diferentes opacidades.
Grain
Opacity: 3%
.grain-overlay / opacity: 0.03
Grain
Opacity: 5%
.grain-overlay / opacity: 0.05
Grain
Opacity: 10%
.grain-overlay / opacity: 0.1
Glow Orbs
Orbes de brilho em blue, violet e cyan.
GlowOrb color="blue" / #2563EB
GlowOrb color="violet" / #7C3AED
GlowOrb color="cyan" / #06B6D4
sm: 200px / md: 400px / lg: 600px — Combined orbs
Backdrop Blur
Niveis de blur sobre conteudo de fundo.
sm
blur-sm (4px)
xl
blur-xl (24px)
2xl
blur-2xl (40px)
Text Gradient
Gradiente aplicado ao texto com bg-clip-text.
text-gradient
135deg: #2563EB → #7C3AED
.text-gradient / bg-brand-gradient bg-clip-text text-transparent
text-gradient-h
90deg: #2563EB → #7C3AED
.text-gradient-h / bg-brand-gradient-h bg-clip-text text-transparent
Display XL
Heading 1
Heading 3
Body text gradient
Neon Glow
Text-shadow com brilho neon nas cores da marca.
Blue
text-shadow: 0 0 20/40/80px brand-primary
Violet
text-shadow: 0 0 20/40/80px brand-secondary
Cyan
text-shadow: 0 0 20/40/80px brand-accent
Mask Fade
Mascara CSS com fade gradual para bottom e right.
mask-fade-b
linear-gradient(to bottom, black 60%, transparent 100%)
mask-fade-r
linear-gradient(to right, black 80%, transparent 100%)
Combined: pattern + glow + mask
A composicao tipica de background Uebi
Scroll Reveal
Animações de entrada ativadas por IntersectionObserver. Componente wrapper que anima filhos ao entrar na viewport.
fade-up
Sobe com fade
animation="fade-up"
fade-in
Aparece com fade
animation="fade-in"
slide-left
Desliza da direita
animation="slide-left"
| Prop | Tipo | Default | Descrição |
|---|---|---|---|
| animation | 'fade-up' | 'fade-in' | 'slide-left' | 'slide-right' | 'scale' | 'fade-up' | Tipo de animação |
| delay | number | 0 | Atraso em ms |
| duration | number | 600 | Duração em ms |
| threshold | number | 0.15 | % visível para ativar (0-1) |
Animated Counter
Contadores numéricos que animam de 0 até o valor alvo ao entrar na viewport.
Satisfação
value="83%"
Conversão
value="46%"
Projetos
value="+100"
Avaliação
value="4.9"