[04] Pilar 04

VFX & Motion

O sistema nervoso. Texturas e movimentos que transformam uma interface estática em um cockpit orgânico e responsivo.

Technical Textures

Dois padrões de textura aplicados como overlays. Nunca como fundo sólido.

.bg-cockpit-grid

Cockpit Grid

Grid técnico de 32px que serve de datum horizontal e vertical. Linhas oklch(1 0 0 / 3%).

background-size: 32px 32px

.vfx-scanlines

Scanlines CRT

Efeito de scanlines com opacidade 3%. Traz aura noir e profundidade analógica.

background-size: 100% 4px · opacity: 0.03

Glass System

Superfícies translúcidas com blur. Padrão cockpit para cards e containers elevados.

.glass-card

Standard

Glass Card

bg white/2% · blur(64px) · border white/8% · radius-bento

.glass-card-sm

Compact

Glass Card SM

bg white/2% · blur(32px) · hairline border white/10%

Glow System

Brilho radial de 40px centrado nos elementos de foco. Usar com moderação.

active

.glow-primary

box-shadow: 0 0 40px var(--primary-glow)

ring

Border + Glow

border-primary + .glow-primary

Token

--primary-glowoklch(0.85 0.18 126 / 20%)

Radius

--vfx-glow-radius: 40px

Label Utilities

Regra de Ouro #3: cantos vazios devem ter labels mono 7px descrevendo o quadrante.

SECTOR A · ACTIVEREF: 0x0042LAT: 27.4° · LON: -48.5°SYS: NOMINAL

.label-telemetry

7px Roboto Mono · uppercase · white/20% · tracking 0.15em

pointer-events: none · user-select: none

[04] VFX & Motion System

Cockpit Ready

.section-label.cursor-blink

.section-label + .cursor-blink

section-label: 10px mono · tracking 0.4em. cursor-blink: trailing underscore animado.

Motion Curves

Duas curvas. Uma regra: nunca use ease-linear em produção.

Hover para testar

--ease-cockpit

cubic-bezier(0.2, 0, 0, 1)

Início rápido, desaceleração longa. Sensação de tecnologia de elite.

Hover para testar

--ease-reveal

cubic-bezier(0.34, 1.56, 0.64, 1)

Overshoot suave. Para entries de elementos e revelar conteúdo.