Moodinary/UI

FlowingPixels

Píxeles de colores de ánimo que cruzan el espacio, como pulsos llegando.

Instalación

npm
npm i @moodinary/sprites
shadcn
npx shadcn@latest add https://design.moodinary.com/r/sprites-flowing-pixels.json
import
import { FlowingPixels } from "@moodinary/sprites/react";

Ejemplos

Pulsos llegando

Código
flowing-pixels.tsx
import { FlowingPixels } from "@moodinary/sprites/react";

export default function Flowing() {
	return (
		<div className="h-28 w-full overflow-hidden rounded-[10px] border border-line bg-card">
			<FlowingPixels count={40} />
		</div>
	);
}

Props

FlowingPixels

PropTipoDefaultDescripción
colorsstring[]rampa de ánimoColores de los píxeles.
countnumber28Cantidad de píxeles.
backgroundstring-Fondo. Sin valor queda transparente.
pixelnumber4Píxeles CSS por píxel del dibujo. Más alto, más grueso.
stillbooleanfalseDibuja un solo cuadro. Pasa solo con prefers-reduced-motion.
className / style-Van al canvas. El canvas ocupa el 100% de su contenedor; dale alto al contenedor.

Cuándo sí y cuándo no

Hacé
  • Usalo en momentos de marca: portadas, estados de carga largos, pantallas de bienvenida.
Evitá
  • No lo uses para representar datos reales. Las posiciones son decorativas.

Accesibilidad

  • Con prefers-reduced-motion: reduce dibuja un cuadro quieto y no anima.
  • Fuera de pantalla se pausa (IntersectionObserver), así no gasta batería.
  • El canvas es aria-hidden: es decoración. Si transmite algo, decilo también en texto.