Sky

Sky

Cielo pixelado con degradé tramado y nubes que pasan. Sigue la hora del visitante o el clima de un equipo.

Es el mismo cielo de moodinary.com: degradé en bandas con trama Bayer, nubes de discos superpuestos y sol o luna. Con time="auto" cambia según la hora local: amanecer, día, tarde y noche.

Instalación

npm

npm i @moodinary/sprites

shadcn

npx shadcn@latest add https://design.moodinary.com/r/sprites-sky.json

import

import { Sky } from "@moodinary/sprites/react";

Ejemplos

Según la hora

Abrí esta página de noche y vas a ver estrellas.

Código

sky-auto.tsx

import { Sky } from "@moodinary/sprites/react";

export default function SkyAuto() {
	return (
		<div className="h-48 w-full overflow-hidden rounded-[10px]">
			<Sky time="auto" />
		</div>
	);
}

Los cuatro momentos

Amanecer

Día

Tarde

Noche

Código

sky-times.tsx

import { Sky } from "@moodinary/sprites/react";

const times = [
	["amanecer", "Amanecer"],
	["dia", "Día"],
	["tarde", "Tarde"],
	["noche", "Noche"],
] as const;

export default function SkyTimes() {
	return (
		<div className="grid w-full grid-cols-2 gap-3 sm:grid-cols-4">
			{times.map(([t, label]) => (
				<figure className="m-0" key={t}>
					<div className="h-24 overflow-hidden rounded-[8px]">
						<Sky pixel={3} time={t} />
					</div>
					<figcaption className="mt-1.5 text-[12px] text-ink-3">
						{label}
					</figcaption>
				</figure>
			))}
		</div>
	);
}

Props

Prop	Tipo	Default	Descripción
time	"auto" \| "amanecer" \| "dia" \| "tarde" \| "noche"	"auto"	Momento del día.
weather	Weather	-	Usa la paleta de un estado de clima en lugar de la hora.
stops	string[]	-	Colores propios, de arriba hacia abajo.
clouds	number	-	Cantidad de nubes. Por defecto, una cada 40 píxeles de ancho.
speed	number	1	Velocidad de las nubes.
body	boolean	true	Sol o luna.
pixel	number	4	Píxeles CSS por píxel del dibujo. Más alto, más grueso.
still	boolean	false	Dibuja 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 como fondo de héroes, portadas y encabezados grandes.
Poné el texto encima sobre una zona tranquila del cielo, con contraste suficiente.

Evitá

No lo uses detrás de datos o tablas.
No pongas más de un cielo animado por pantalla.

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.

Sky