Background

Componentes

Elementos decorativos de fondo: orbes de resplandor, campo de partículas animado, texto con degradado y paneles glassmorphism.

GlowOrb

Orbe de resplandor radial decorativo. Es puramente visual: se renderiza conaria-hidden="true" y el llamador lo posiciona con su propio contenedor (position: absolute ofixed más inset).

Tamaños

Variantes de color

cyan

purple

magenta

brand

Intensidad

subtle

normal

strong

Texto con degradado

La utilidad global .nx-gradient-text aplica el degradado de marca (--nx-gradient-main) al texto mediantebackground-clip: text. No es un componente: se aplica como clase CSS.

Nexo UI Kit — degradado de marca

Campo de partículas

Demo en vivo

Red de puntos conectados por líneas cuando están cerca. El script respetaprefers-reduced-motion: reduce: en ese caso dibuja un único fotograma estático (partículas y conexiones) y no anima.

Glassmorfismo

Receta de panel translúcido con desenfoque de fondo (backdrop-filter). Útil sobre heroes, barras de estadísticas o superposiciones. El demo coloca el panel sobre un fondo con glow para que el blur sea visible.

Demo — panel sobre fondo con glow

Panel glassmorphism

Superficie translúcida con desenfoque de 16px, fondo basado en tokens y borde sutil.

.nx-glass-panel {
  padding: var(--nx-space-6);
  border-radius: var(--nx-radius-xl);
  background: color-mix(in srgb, var(--nx-bg-card) 55%, transparent);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid var(--nx-border);
}

Uso

GlowOrb

<GlowOrb size="lg" variant="cyan" intensity="subtle" />

<!-- Posicionar con tu propio wrapper -->
<div style="position: relative; overflow: hidden;">
  <GlowOrb
    size="xl"
    variant="brand"
    style="position: absolute; top: -120px; left: 50%; transform: translateX(-50%);"
  />
  <h1>Contenido del hero</h1>
</div>

ParticleField

<div style="position: relative; height: 400px;">
  <ParticleField density={0.00018} speed={0.3} />
</div>

Props

GlowOrb

Prop	Tipo	Predeterminado	Descripción
`size`	`'sm' \| 'md' \| 'lg' \| 'xl'`	`'md'`	Tamaño del orbe: 120, 220, 360 o 520 px de diámetro.
`variant`	`'cyan' \| 'purple' \| 'magenta' \| 'brand'`	`'brand'`	Color del degradado radial. `brand` mezcla cyan, purple y magenta.
`intensity`	`'subtle' \| 'normal' \| 'strong'`	`'normal'`	Opacidad del resplandor (0.35, 0.55 o 0.8).

ParticleField

Prop	Tipo	Predeterminado	Descripción
`density`	`number`	`0.00004`	Partículas por píxel cuadrado del área del canvas. Los demos de esta página pasan `0.00018` explícitamente para que la red sea visible; el valor por defecto del componente se mantiene en`0.00004`.
`speed`	`number`	`0.3`	Velocidad de desplazamiento de cada partícula por fotograma.