Effects
Os efeitos visuais que dão aquele 'uau' quando alguém abre seu site. Brilhos, gradientes, texturas — tudo com intenção. Efeitos são tempero, não o prato.
Efeito de vidro fosco para menus e janelas que aparecem sobre o conteúdo. Dá profundidade sem esconder o que está por trás.
Especificação: Glassmorphism com backdrop-blur. Contraste do texto deve atender WCAG AA (4.5:1).
Glassmorphism
backdrop-filter: blur(12px)
rgba(18, 18, 26, 0.75) over colored background
.glass
.glass {
background: rgba(18, 18, 26, 0.75);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
border: 1px solid var(--tlx-border-default);
border-radius: var(--tlx-radius-card);
}3 niveis de glow — do intenso (CTAs, hero) ao sutil (cards, badges). Maximo 2 elementos com teal-glow visivel por viewport.
Teal Glow
CTAs, hero, logo
Soft Glow
Cards hover, badges
Ring Glow
Pricing, inputs focus
.teal-glow
.teal-glow {
box-shadow: 0 0 20px rgba(247, 126, 45, 0.25);
}
.soft-glow {
box-shadow: 0 0 12px rgba(247, 126, 45, 0.12);
}
.ring-glow {
box-shadow:
0 0 0 1px rgba(247, 126, 45, 0.3),
0 0 12px rgba(247, 126, 45, 0.15);
}Textura de noise sutil sobreposta ao background. SVG inlined para performance. Usar no body ou secoes hero/full-width, NAO em cards.
Sem Film Grain
Flat background
Com Film Grain
Textured background
.film-grain::after
.film-grain::after {
content: '';
position: absolute;
inset: 0;
background-image: url("data:image/svg+xml,...");
background-repeat: repeat;
pointer-events: none;
z-index: 1;
opacity: 0.03;
mix-blend-mode: overlay;
}Escurecimento gradual nas bordas da viewport para direcionar foco ao centro. Nunca ultrapassar opacity 0.4.
Sem Vignette
Conteudo
Com Vignette
Conteudo
.vignette::before
.vignette::before {
content: '';
position: fixed;
inset: 0;
background: radial-gradient(
ellipse at center,
transparent 50%,
rgba(10, 10, 15, 0.4) 100%
);
pointer-events: none;
z-index: 0;
}CSS backgrounds decorativos com accent teal em alpha extremamente baixa. Maximo 2 layers visuais por secao.
.pattern-dot-grid
24px grid / accent alpha-8
Uso: Background de secoes de servico
.pattern-crosshair
48px grid / accent alpha-6
Uso: Secao de processo/metodologia
.pattern-dot-grid / .pattern-crosshair
.pattern-dot-grid {
background-image: radial-gradient(
rgba(247, 126, 45, 0.08) 1px,
transparent 1px
);
background-size: 24px 24px;
}
.pattern-crosshair {
background-image:
linear-gradient(rgba(247, 126, 45, 0.06) 1px, transparent 1px),
linear-gradient(90deg, rgba(247, 126, 45, 0.06) 1px, transparent 1px);
background-size: 48px 48px;
background-position: center center;
}Separadores visuais entre secoes e blocos de conteudo. Do gradient com identidade teal ao solido neutro.
.divider-teal
Entre secoes principais. Gradiente teal centralizado. max-width: 320px
.divider-dashed
Separacao leve dentro de secoes. max-width: 480px
.divider-solid
Dentro de cards (header/body/footer). Full width. Neutro.
.divider-teal / .divider-dashed / .divider-solid
.divider-teal {
height: 1px;
background: linear-gradient(90deg, transparent 0%, var(--tlx-accent) 50%, transparent 100%);
max-width: 320px;
margin: 48px auto;
}
.divider-dashed {
border-top: 1px dashed rgba(247, 126, 45, 0.3);
max-width: 480px;
margin: 32px auto;
}
.divider-solid {
height: 1px;
background: var(--tlx-border-default);
margin: 24px 0;
}Cantoneiras estilo HUD nos cantos de elementos. Comunica precisao tecnica e o traco Arquitetural. Maximo 2 por viewport.
Frame Bracket
4 cantoneiras // 24px // accent alpha-30
.frame-bracket::before / ::after
.frame-bracket {
position: relative;
}
.frame-bracket::before,
.frame-bracket::after {
content: '';
position: absolute;
width: 24px;
height: 24px;
border-color: rgba(247, 126, 45, 0.3);
border-style: solid;
pointer-events: none;
}
.frame-bracket::before {
top: -1px;
left: -1px;
border-width: 2px 0 0 2px;
}
.frame-bracket::after {
bottom: -1px;
right: -1px;
border-width: 0 2px 2px 0;
}Scroll horizontal infinito para exibir itens em loop. Componente existente: <Marquee />
<Marquee /> usage
import { Marquee } from "@/components/ui/marquee";
<Marquee
text="N8N // Make // Claude // GPT // Vercel // Supabase"
separator=" ◆ "
speed={30}
/>
/* Props: text (string), separator (string), speed (number) */
/* Animation: linear, right-to-left, infinite loop */
/* Accessibility: aria-hidden="true" (decorative) */
/* prefers-reduced-motion: animation paused, content static */Micro-interacoes padronizadas para feedback. Todas usam duration-fast (150ms) e easing-default. Passe o mouse para testar.
Card Hover
Default
translateY(-2px) + shadow
Hovered
translateY(-2px) + shadow
Interactive
translateY(-2px) + shadow
Button Hover
Link Hover
Hover effects
/* Card */
.card-hover:hover {
transform: translateY(-2px);
box-shadow: var(--tlx-shadow-elevated);
border-color: var(--tlx-card-border-hover);
}
/* Button primary */
.btn-hover-primary:hover {
transform: scale(1.02);
box-shadow: 0 0 12px rgba(247, 126, 45, 0.15);
}
.btn-hover-primary:active {
transform: scale(0.98);
}
/* Link teal — underline anima left→right */
.link-teal::after {
content: '';
position: absolute;
bottom: -2px; left: 0;
width: 0; height: 2px;
background: var(--tlx-accent);
transition: width 150ms ease;
}
.link-teal:hover::after { width: 100%; }Combinacoes pre-aprovadas de efeitos. Regra: maximo 3 layers visuais por secao (background texture + spatial + element accent).
| Composicao | Layer 1 (BG) | Layer 2 (Spatial) | Layer 3 (Accent) |
|---|---|---|---|
| Hero Background | film-grain (0.03) | vignette (0.4) | pattern-dot-grid (0.08) |
| Methodology | pattern-crosshair (0.06) | -- | frame-bracket nos cards |
| Stats Section | film-grain (0.03) | -- | teal-glow nos numeros |
| Card Highlight | -- | -- | ring-glow + frame-bracket + accent border |
Preview
Hero Background
grain + vignette + dot-grid
Methodology
crosshair + frame-bracket
Stats Section
4.1x
ROI medio
R$250K
Retorno
Card Highlight
ring-glow + frame-bracket + accent border