Background
L47
AG47 // EXPERIMENT_04
CSS_HOUDINI_CONTROL_CENTER

Painel de ControleGemini Glow

Experimente e altere o comportamento das bordas com gradientes rotativos. Modifique cores, velocidades e efeitos do neon ao vivo usando as ferramentas de customização abaixo.

GPU_Accelerated
CSS_Houdini
Interactive_Sandbox
01 // CUSTOMIZADOR DE GRADIENTES
INTENSIDADE DE BRILHO (BLUR)16px
DICA DO ARQUITETO

O gradiente usa transparências e camadas. O desfoque (`blur`) de 16px é o ponto ideal que emula a emissão física de luz em displays OLED.

02 // INPUT DE IA INTERATIVO
MODO_PRONTO
TELEMETRIA_IO
Taxa de Inferência
1420 tokens/s
NÚCLEO_CPU
Processamento Ativo
42.0%
Agentes de Processamento Ativos
SYS_THREAD: ACTIVE
NODE_IDNOMEFUNÇÃOLATENCYTELEMETRIA
AG47-01Skeptic QuantAnálise Financeira42%Processando
AG47-02Oracle CognitionCalibração de Edge0msPronto
AG47-03Veo DirectorVisual Shader Render99%Carregando
L47

Instancia Mestre IA-47

ONLINE

Núcleo quântico ativo processando telemetria em tempo real a 14ms de latência.

NODES_ATIVOS
5

03 // EFEITO DE LINHAS CORRENDO EM VOLTA (BORDER BEAM)

Diferente do efeito rotativo em que toda a borda fica colorida e gira, o **Border Beam** simula um único raio/laser brilhante (como uma linha) que "anda" em volta do contêiner.

BorderBeamCard

Laser Perimetral

Um feixe de luz preciso que percorre toda a borda do elemento de forma cíclica.

ATIVO_LMT_2

Como funciona a matemática do Border Beam?

Usamos uma máscara CSS inteligente baseada em gradients de exclusão. A máscara exclui o centro do componente e revela apenas a área do padding (a borda). Como o gradiente rotativo traseiro é configurado para ser 80% transparente e apenas 20% colorido, apenas a fatia colorida fica aparente na borda, criando a ilusão de que a linha está andando em volta do contêiner.

<BorderBeam duration="4s" colors="#4285f4, #9b51e0, #e91e63, #3b82f6, #4285f4" size={20} borderWidth={1.5} />

04 // CÓDIGO FONTE CONFIGURADO (DINÂMICO)

globals.css (Acoplamento Houdini)
@property --angle {
  syntax: "<angle>";
  initial-value: 0deg;
  inherits: false;
}

@keyframes spin {
  from { --angle: 0deg; }
  to { --angle: 360deg; }
}

.gemini-glow-container {
  position: relative;
  z-index: 1;
}

.gemini-glow-container::before {
  content: "";
  position: absolute;
  inset: -1.5px;
  z-index: -1;
  border-radius: inherit;
  background: conic-gradient(
    from var(--angle),
    var(--gemini-glow-colors, #4285f4, #9b51e0, #e91e63, #3b82f6, #4285f4)
  );
  animation: spin var(--glow-speed, 4s) linear infinite;
  opacity: 0.85;
}

.gemini-glow-container::after {
  content: "";
  position: absolute;
  inset: -1.5px;
  z-index: -2;
  border-radius: inherit;
  background: conic-gradient(
    from var(--angle),
    var(--gemini-glow-colors, #4285f4, #9b51e0, #e91e63, #3b82f6, #4285f4)
  );
  filter: blur(var(--glow-blur, 16px));
  opacity: 0.6;
  animation: spin var(--glow-speed, 4s) linear infinite;
}
Next.js Implementation
import React from 'react';
import { GeminiCard, GeminiInput, GeminiButton } from '@/components/ui/GeminiBorder';

export default function MyDashboard() {
  return (
    <GeminiCard duration="4s" style={{ '--gemini-glow-colors': '#4285f4, #9b51e0, #e91e63, #3b82f6, #4285f4' }}>
      <h3 className="text-white font-bold">Núcleo Quântico</h3>
      <GeminiInput placeholder="Digite uma diretriz..." />
      <GeminiButton>Ativar Módulo</GeminiButton>
    </GeminiCard>
  );
}

Benefícios de Performance da GPU

Ao contrário de usar loops de renderização de canvas ou animações com JavaScript (requestAnimationFrame), declarar a rotação da borda em CSS Houdini nativo permite que o motor do navegador delegue a rasterização do conic-gradient inteiramente para a GPU. Isso garante animações a 60-120fps sem consumo adicional na thread de execução do React.

47%