Moodinary/UI

Niebla

Bruma pixelada en movimiento para lecturas con pocos pulsos.

Es la capa animada. Para la tarjeta completa con mensaje y acción está el componente Niebla de @moodinary/ui. La bruma es visual: no oculta datos, así que nunca mandes al navegador datos que no se pueden mostrar.

Instalación

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

Ejemplos

Sobre un promedio provisorio

3,9

Hay 5 pulsos esta semana. El promedio es provisorio.

Código
niebla-card.tsx
import { Niebla } from "@moodinary/sprites/react";

export default function NieblaCard() {
	return (
		<div className="relative h-40 w-full overflow-hidden rounded-[10px] border border-line bg-card">
			<div className="p-5 font-semibold text-[28px] text-ink-3">3,9</div>
			<Niebla className="absolute inset-0" />
			<p className="absolute inset-x-5 bottom-4 m-0 text-[13px] text-ink-2">
				Hay 5 pulsos esta semana. El promedio es provisorio.
			</p>
		</div>
	);
}

Props

Niebla

PropTipoDefaultDescripción
opacitynumber0.7Densidad de la bruma, de 0 a 1.
pixelnumber3Pí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é
  • Decí en texto cuántos pulsos hay y que el promedio es provisorio.
Evitá
  • No la uses como mecanismo de privacidad.
  • No muestres una tendencia debajo de la niebla.

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.