Maggium — Efeitos, Padrões & VFX

Estratégia◆ Branding◆ Performance◆ Tráfego Pago◆ Design◆ Copywriting◆ Social Media◆ Analytics◆ SEO◆ Automações◆ CRM◆ Funis◆ Estratégia◆ Branding◆ Performance◆ Tráfego Pago◆ Design◆ Copywriting◆ Social Media◆ Analytics◆ SEO◆ Automações◆ CRM◆ Funis◆

Grade de Pontos

.pattern-dot-grid

Pontos cobre espaçados em 16px sobre superfície escura. Densidade padrão para fundos e estados vazios.

Grade de Pontos Densa

.pattern-dot-grid--dense

Pontos espaçados em 8px, trama mais apertada. Use para painéis pequenos ou fundos de miniaturas.

Grade de Pontos Esparsa

.pattern-dot-grid--sparse

Espaçamento de 32px com pontos maiores. Pano de fundo sutil para seções hero e áreas de conteúdo grandes.

Grade Mira

.pattern-crosshair-grid

Linhas de 80px com pontos centrais. Visual de planta técnica para cabeçalhos e rodapés.

Grade Mira Compacta

.pattern-crosshair-grid--tight

Variante de 40px. Padrão de mira mais denso para painéis menores e overlays técnicos.

Perspectiva Wireframe

.pattern-wireframe-perspective

Grade wireframe de 60px com brilho radial central. Cria ilusão de profundidade 3D para fundos.

Grade de Símbolos

.pattern-symbol-grid

Símbolos X em SVG de 32px em repetição. Adiciona textura de marca com cruzes cobre sutis.

Grade de Cruzes

.pattern-plus-grid

Sinais de mais em SVG de 32px em repetição. Grade técnica mínima com marcadores aditivos.

Prévia

Moldura Colchete

.frame-bracket

Colchetes nos cantos superior-esquerdo e inferior-direito. Enquadramento HUD minimalista.

Prévia

Moldura Colchete Completa

.frame-bracket--full

Colchetes nos quatro cantos. Moldura de contenção completa para conteúdo proeminente.

Prévia

Moldura Tech

.frame-tech

Borda com polígono cortado em 12px. Painel sci-fi com traço cobre de 1px.

Prévia

Moldura Tech Pequena

.frame-tech--sm

Variante com cortes de 8px. Clip-path mais apertado para elementos UI menores.

Prévia

Moldura Tech Grande

.frame-tech--lg

Variante com cortes de 20px. Moldura angular dramática para painéis hero.

Prévia

Entalhe Superior Direito

.frame-notch-tr

Clip-path com entalhe de 16px no canto superior-direito. Corte assimétrico sugerindo uma porta de dados.

Prévia

Entalhe Inferior Esquerdo

.frame-notch-bl

Entalhe de 16px no canto inferior-esquerdo. Espelho do entalhe TR para layouts opostos.

Prévia

Entalhe Duplo

.frame-notch-both

Entalhes de 16px no superior-direito e inferior-esquerdo. Simetria diagonal para enquadramento equilibrado.

Listras de Perigo

.pattern-hazard

Listras diagonais de 10px em cobre e preto. Padrão de alerta de alta visibilidade.

Listras Finas

.pattern-hazard--thin

Variante com listras de 5px. Faixas diagonais mais apertadas para indicadores menores.

Perigo Sutil

.pattern-hazard--subtle

Listras translucidas com 15% de opacidade. Textura de alerta segura para fundos.

Aviso // Sistema Ativo

Barra de Alerta

.bar-warning

Barra cobre sólida com texto escuro e listras diagonais. Banner de atenção máxima.

Circuito Horizontal

.pattern-circuit-h

Caminho SVG de circuito horizontal com pontos de solda. Repete no eixo X como divisor decorativo.

Placa de Circuito

.pattern-circuit-board

SVG de 80px com traços PCB verticais e horizontais mais nós de junção. Textura de circuito para superfície inteira.

Linhas de Varredura

.pattern-scanlines

Linhas horizontais de 2px com 8% de opacidade. Overlay CRT para atmosfera retro-tech.

Varredura Pesada

.pattern-scanlines--heavy

Linhas de 1px com 15% de opacidade. Efeito CRT mais intenso para overlays dramáticos.

Textura de Ruído

.pattern-noise

Ruído fractal SVG via ::after com 6% de opacidade e blend overlay. Adiciona grão analógico.

Chuva de Dados

.pattern-data-rain

Colunas verticais de 40px com gradiente neon. Fundo de fluxo de dados inspirado no Matrix.

Superfície Industrial

.pattern-industrial

Gradiente escuro com destaque e sombra inset. Sensação de metal escovado para painéis de ferramentas.

Film Grain

Textura de
granulação.

Camadas de ruído analógico aplicadas via SVG filter. Quatro níveis de intensidade para diferentes contextos de uso.

Subtle (5%)

opacity: 0.05

Light (10%)

opacity: 0.1

Medium (15%)

opacity: 0.15

Heavy (25%)

opacity: 0.25

Blend Modes

Modos de
mesclagem.

Seis modos CSS mix-blend aprovados para uso na identidade visual. Cada um produz uma fusão única entre camadas de cor da paleta.

Multiply

Sample

Screen

Sample

Overlay

Sample

Soft-Light

Sample

Color-Dodge

Sample

Difference

Sample

Blur Effects

Efeitos de
desfoque.

Backdrop-filter blur em quatro níveis. Usado para glassmorphism, overlays e painéis de navegação.

No Blur

backdrop-filter: blur(0px)

Subtle (4px)

backdrop-filter: blur(4px)

Medium (8px)

backdrop-filter: blur(8px)

Heavy (16px)

backdrop-filter: blur(16px)

Glow Effects

Três tipos
de brilho.

Neon, Soft e Ring — cada glow cria uma atmosfera distinta usando box-shadow com a paleta de cor da Maggium.

Neon Glow

box-shadow: 0 0 8px rgba(212,101,29,0.4), 0 0 24px rgba(212,101,29,0.2)

Soft Glow

box-shadow: 0 0 16px rgba(212,101,29,0.15)

Ring Glow

box-shadow: 0 0 0 2px rgba(212,101,29,0.3), 0 0 16px rgba(212,101,29,0.2)

Overlay Composites

Efeitos
compostos.

Scanlines CRT e Vignette — camadas de pós-produção que adicionam profundidade cinemática às superfícies.

Scanlines

CRT Effect

Vignette

Edge Fade

Efeitos Visuais