Pós-processamento Visual

VFX System

01

Film Grain

Overlay de granulação cinematográfica em CSS puro. Adiciona textura orgânica e profundidade visual.

/tg.

Conteúdo com granulação cinematográfica aplicada

/* Film Grain via SVG feTurbulence */ .grain-overlay { position: absolute; inset: 0; opacity: 0.4; background-image: url("data:image/svg+xml,...feTurbulence..."); background-size: 128px 128px; mix-blend-mode: overlay; animation: grainShift 0.5s steps(4) infinite; pointer-events: none; }
02

Blend Modes

Demonstração de mix-blend-mode CSS sobre fundos coloridos com o logo /tg. em destaque.

/tg.
Multiply
mix-blend-mode: multiply
/tg.
Screen
mix-blend-mode: screen
/tg.
Overlay
mix-blend-mode: overlay
/tg.
Color Dodge
mix-blend-mode: color-dodge
/* Blend Mode aplicado ao texto */ .blend-text { mix-blend-mode: multiply | screen | overlay | color-dodge; font-size: 2.5rem; font-weight: 800; }
03

Blur Effects

Efeitos de desfoque para criar profundidade, vidro fosco e sensação de movimento.

/ Background Blur & Frosted Glass

Frosted Glass

backdrop-filter: blur(16px) cria o efeito de vidro fosco

/ Profundidade de Campo

A
B
C
Elementos fora de foco com filter: blur(4px) e opacity reduzida

/ Motion Blur

Animação + filter: blur() simula rastro de movimento
/* Frosted Glass */ .frosted { backdrop-filter: blur(16px); background: rgba(26,26,23,0.5); } /* Depth of Field */ .out-of-focus { filter: blur(4px); opacity: 0.4; } /* Motion Blur */ .trail::after { filter: blur(8px); animation: motionTrail 2s infinite; }
04

Glow System

Sistema de brilho usando box-shadow e text-shadow com a cor primária #F26B3A.

Inner
Brilho interno
Inner Glow
box-shadow: inset 0 0 30px rgba(242,107,58,0.2)
Outer
Brilho externo
Outer Glow
box-shadow: 0 0 20px rgba(242,107,58,0.3), 0 0 60px ...
Neon
Texto neon
Neon Text Glow
text-shadow: 0 0 10px rgba(242,107,58,0.8), ...
Edge
Brilho de borda
Edge Glow
border + box-shadow combo
/* Inner Glow */ box-shadow: inset 0 0 30px rgba(242,107,58,0.2); /* Outer Glow */ box-shadow: 0 0 20px rgba(242,107,58,0.3), 0 0 60px rgba(242,107,58,0.15); /* Neon Text */ text-shadow: 0 0 10px rgba(242,107,58,0.8), 0 0 40px rgba(242,107,58,0.4); /* Edge Glow */ border: 1px solid rgba(242,107,58,0.4); box-shadow: 0 0 15px rgba(242,107,58,0.15), inset 0 0 15px rgba(242,107,58,0.05);
05

Overlay Effects

Efeitos de sobreposição para imagens e superfícies. Scanlines, CRT, vinheta e tint colorido.

Scanlines

Linhas horizontais finas sobre o conteúdo

Scanlines
repeating-linear-gradient 2px / 4px

Efeito CRT

Curvatura + scanlines + vinheta

CRT Monitor
border-radius curvo + radial-gradient + scanlines

Vinheta

Bordas escurecidas com gradiente radial

Vignette
radial-gradient(transparent 40%, rgba(0,0,0,0.6))

Color Tint

Sobreposição laranja com opacidade baixa

Color Tint
rgba(242,107,58,0.15) + mix-blend-mode: multiply
/* Scanlines */ .scanlines::after { background: repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(0,0,0,0.15) 2px, rgba(0,0,0,0.15) 4px); } /* CRT */ .crt { border-radius: 20px / 12px; } .crt::before { background: radial-gradient(ellipse, transparent 50%, rgba(0,0,0,0.4)); } /* Vignette */ .vignette::after { background: radial-gradient(ellipse, transparent 40%, rgba(0,0,0,0.6)); } /* Color Tint */ .color-tint::after { background: rgba(242,107,58,0.15); mix-blend-mode: multiply; }
06

Noise & Texture

Texturas de fundo aplicadas via CSS para adicionar profundidade tátil a superfícies.

Noise Texture
Ruído SVG
feTurbulence baseFrequency="0.75"
Halftone
Meio-tom
radial-gradient dots 6px spacing
Cross-hatch
Hachura cruzada
repeating-linear-gradient 45deg / -45deg
/* SVG Noise */ .noise::before { background-image: url("data:image/svg+xml,...feTurbulence baseFrequency='0.75'..."); opacity: 0.35; mix-blend-mode: overlay; } /* Halftone */ .halftone { background-image: radial-gradient(circle, var(--n400) 1px, transparent 1px); background-size: 6px 6px; } /* Cross-hatch */ .crosshatch { background-image: repeating-linear-gradient(45deg, transparent, transparent 4px, rgba(0,0,0,0.06) 4px, rgba(0,0,0,0.06) 5px), repeating-linear-gradient(-45deg, transparent, transparent 4px, rgba(0,0,0,0.06) 4px, rgba(0,0,0,0.06) 5px); }
07

Composite Effects

Combinação de múltiplos efeitos VFX para criar looks cinematográficos completos.

/ Terminal Look

tg@marca-pessoal:~$ neofetch
OS: /tg. Design System v1.0
Shell: Signal Edition
Tema: n950 dark + #F26B3A primary
Fontes: Space Grotesk / Inter / JetBrains Mono
Uptime: Construindo desde 2026
tg@marca-pessoal:~$
Scanlines + green tint + grain + JetBrains Mono

/ Broadcast Look

Ao Vivo

Granulação + vinheta + coloração quente

Transmitindo agora
Grain + vignette + warm color grade (#ffd4a0)

/ Print Look

Edição Impressa

Meio-tom + desfoque sutil + cores CMYK

Halftone dots + slight blur + paleta CMYK
/* Terminal: scanlines + green tint + grain + mono */ .terminal { background: #0a0f0a; } .terminal::after { /* scanlines */ } .terminal .grain { mix-blend-mode: screen; opacity: 0.15; } .terminal * { font-family: 'JetBrains Mono'; color: #00ff41; } /* Broadcast: grain + vignette + warm grade */ .broadcast { background: linear-gradient(135deg, #1a1410, #2a1f15); } .broadcast::before { /* radial vignette */ } .broadcast .grain { opacity: 0.25; } .broadcast h4 { color: #ffd4a0; text-shadow: 0 0 30px rgba(242,107,58,0.3); } /* Print: halftone + subtle blur + CMYK */ .print { background: #f8f5f0; } .print::before { /* halftone radial-gradient dots */ } .print-cmyk { /* C: #00AEEF, M: #EC008C, Y: #FFF200, K: #1A1A17 */ }