Shaders e Animações

Catálogo dos efeitos visuais do design system: shaders de fundo e animações com nome, arquivo, parâmetros e prévia.

Os efeitos mais elaborados do design system (shaders de fundo e animações que não vêm de um componente de terceiros) ficam num catálogo próprio. A lista é gerada: docs:generate varre o código, e o arquivo docs.registry.ts do app dá nome, descrição e parâmetros a cada item.

Shaders

Fragment shaders que desenham um fundo. O catálogo mostra o arquivo, os parâmetros e onde o shader é usado.

Ondas do Shell

GLSL

Arquivo packages/ui/src/shell/ambient/shader/waves.frag.ts:1

Fragment shader WebGL1 do gradiente ambiente da moldura: faixas de cor que ondulam devagar (seno mais ruído fractal) a partir de uma paleta de quatro cores. Sem bibliotecas; o renderer desenha um triângulo em tela cheia. Cai para as camadas CSS quando não há WebGL e desenha um quadro parado sob movimento reduzido.

Onde é usado

AmbientBackdrop (renderer="shader"), dentro do OperationShell: brilho na base da sidebar e um toque no canto inferior direito

Parâmetro	Tipo	Padrão	Descrição
`palette`	`[Rgb, Rgb, Rgb, Rgb]`	-	Quatro cores, da mais clara (base) à mais escura (topo), lidas de --ambient-c3 a --ambient-c0 e reatualizadas na troca de tema.
`speed`	`number`	`1`	Multiplicador do tempo. O canto usa 2.4.
`seed`	`number`	`4012`	Semente do ruído; o canto usa 977 para não repetir o desenho.
`fps`	`number`	`30`	Quadros por segundo do laço (o canto usa 24).
`resolutionScale`	`number`	`0.75`	Escala sobre o tamanho em pixels CSS, para poupar a GPU.
`u_shape.intensity`	`float`	`0.54`	Amplitude das ondas e do ruído (preset fixo).
`u_shape.warp`	`float`	`0.04`	Deformação do domínio por ruído (preset fixo).
`u_surface.contrast`	`float`	`1.16`	Contraste da cor final (preset fixo).
`u_finish.grain`	`float`	`0.04`	Grão leve contra o degradê em faixas (preset fixo).

Animações

@keyframes do CSS e peças de movimento que o código declara fora dos componentes da fachada. Toda animação precisa de um caminho sem movimento (veja Movimento).

Access
motion.dev
Arquivo packages/ui/src/access.tsx:11
Sem descrição. Descreva em docs.registry.ts.
Componentes que dependem
- AccessButton
- AccessCheckbox
- AccessFeedback
- AccessField
- AccessModeSwitch
- AccessNotice
- AccessPage
- AccessSection
- AccessSubmit
Auth preview
motion.dev
Arquivo packages/ui/src/auth-preview.tsx:6
Sem descrição. Descreva em docs.registry.ts.
Componentes que dependem
- AuthDashboardPreview
Avatars
motion.dev
Arquivo packages/ui/src/avatars.tsx:10
Sem descrição. Descreva em docs.registry.ts.
Componentes que dependem
- OperationShell
- PersonAvatar
- PlatformShell
- RecipientAvatar
- StoreIcon
Transições do Admin (motion.dev)
motion.dev
Arquivo packages/ui/src/motion-parts.tsx:1
FadeIn (fade com 6 px de deslocamento, 200 ms), Collapse (altura e opacidade em 220 ms) e entrada escalonada (StaggerIn). Curta, só opacity e transform, com exceção deliberada da altura do Collapse e da largura do indicador do ViewTabs. Com movimento reduzido some o deslocamento.
Componentes que dependem
- ActionRow
- EmptyAction
- EmptyValue
- ExternalLink
- FilterBar
- FilterField
- InfoHint
- MetaLine
- PageHeader
- PageStack
- StateBlock
- StatusBadge
- ViewTabs
Passos do onboarding
motion.dev
Arquivo packages/ui/src/onboarding-parts.tsx:1
StepTransition: o passo atual sai deslizando 28 px e em fade, e o próximo entra do lado oposto (320 ms). RevealItem: itens da lista final entram em cascata, 0,5 s entre um e outro.
Componentes que dependem
- RevealItem
- StepTransition
Deriva A do ambiente
@keyframes
Arquivo packages/ui/src/shell/ambient/ambient.css:173 @keyframes rx-ambient-drift-a
Mancha principal do gradiente CSS: desliza e cresce de leve (translate3d e scale) com opacidade de 0,75 a 1. Dura 16 s, alterna ida e volta e só usa transform e opacity, então roda no compositor.
Onde é usado
- .rx-ambient::before (base da sidebar)
Deriva B do ambiente
@keyframes
Arquivo packages/ui/src/shell/ambient/ambient.css:185 @keyframes rx-ambient-drift-b
Segunda mancha, em sentido oposto e mais lenta (22 s na base, 9 s no canto): desloca para a esquerda e para cima enquanto a opacidade cai de 1 para 0,55.
Onde é usado
- .rx-ambient::after (base da sidebar)
- .rx-ambient-corner::before (canto inferior direito)

Como o catálogo é montado

A descoberta é por convenção, sem configurar nada:

O que	Como é achado
Shader	Arquivos `.glsl`, `.frag`, `.vert` e `.wgsl`; módulos `.frag.ts` e `.glsl.ts`; e qualquer arquivo de uma pasta `shader` ou `shaders` cujo conteúdo tenha `precision`, `gl_FragColor`, `fragColor`, `@fragment` ou `void main`.
Animação em CSS	Cada `@keyframes` de um arquivo `.css`.
Animação em GSAP	Arquivos que importam `gsap` e chamam `gsap.timeline`, `to`, `from` ou `fromTo`.
Animação em motion.dev	Arquivos de componentes próprios que usam `animate` ou `variants`, agrupados por arquivo.

O item descoberto sem registro aparece com o nome derivado do arquivo e "Sem descrição". Para completar ou para listar algo fora da convenção, adicione uma entrada em docs.registry.ts com defineDocsRegistry: o file é relativo à raiz do repositório, symbol distingue itens do mesmo arquivo (o nome do @keyframes) e preview aponta para um demo em src/demos/effects/.