Moodinary/UI

Clouds

Solo las nubes, sobre canvas transparente, para montar encima de cualquier fondo.

Instalación

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

Ejemplos

Sobre navy

Con colores propios para que las nubes se lean como noche.

Las nubes van encima de cualquier fondo.

Código
clouds-over.tsx
import { Clouds } from "@moodinary/sprites/react";

export default function CloudsOver() {
	return (
		<div className="relative h-40 w-full overflow-hidden rounded-[10px] bg-[#0f2868]">
			<Clouds
				className="absolute inset-0"
				count={4}
				light="#2e4f9a"
				shade="rgba(10,22,56,.9)"
				speed={0.6}
			/>
			<p className="relative m-0 p-6 font-medium text-[18px] text-white">
				Las nubes van encima de cualquier fondo.
			</p>
		</div>
	);
}

Props

Clouds

PropTipoDefaultDescripción
countnumber-Cantidad de nubes.
speednumber1Velocidad.
lightstring"#ffffff"Color de la cara de la nube.
shadestring-Color de la sombra inferior.
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é
  • Superponelo con position: absolute sobre un fondo liso.
Evitá
  • No las uses como textura de fondo en pantallas de trabajo como el panel o los informes.

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.