Núcleo sin React

Las mismas escenas como funciones de canvas, para cualquier framework o JavaScript plano.

@moodinary/sprites/core no importa React ni toca el DOM al cargarse, así que es seguro en SSR. Cada escena es una función draw*(ctx, W, H, t, …). fitCanvas ajusta la resolución y loop anima solo cuando el canvas está visible y respeta reduced motion.

Instalación

npm

npm i @moodinary/sprites

import

import { drawSky, fitCanvas, loop } from "@moodinary/sprites/core";

Ejemplos

Cielo con el núcleo

Código

vanilla.tsx

import {
	drawSky,
	fitCanvas,
	loop,
	type SkyState,
} from "@moodinary/sprites/core";
import { useEffect, useRef } from "react";

// Same core, without React components. In plain JS it is the body of the effect.
export default function Vanilla() {
	const ref = useRef<HTMLCanvasElement>(null);
	useEffect(() => {
		const canvas = ref.current;
		const ctx = canvas?.getContext("2d");
		// biome-ignore lint/suspicious/noUnnecessaryConditions: the ref is null until mount and getContext can return null.
		if (!(canvas && ctx)) {
			return;
		}
		const { W, H } = fitCanvas(canvas, 4);
		const state: SkyState = { clouds: [] };
		return loop(canvas, (t) =>
			drawSky(ctx, W, H, t, state, { weather: "parcial" })
		);
	}, []);
	return (
		<canvas
			className="h-36 w-full rounded-[10px]"
			ref={ref}
			style={{ imageRendering: "pixelated" }}
		/>
	);
}

Props

Funciones

Prop	Tipo	Default	Descripción
drawSky	(ctx, W, H, t, state, options)	-	Cielo completo.
drawClouds / layoutClouds		-	Nubes sueltas.
drawNiebla	(ctx, x, y, W, H, t, alpha)	-	Bruma.
drawWeather	(ctx, W, H, t, weather, state)	-	Escena de clima.
drawDissolve	(ctx, W, H, progress, color)	-	Máscara de disolución.
drawFlow	(ctx, W, H, t, colors)	-	Píxeles fluyendo.
drawTextReveal	(ctx, text, progress, color, x, y, scale)	-	Texto pixelado.
ditherGradient	(imageData, stops)	-	Degradé tramado.
loop	(canvas, frame, options)	-	Animación con pausa y reduced motion. Devuelve la función para cortar.
fitCanvas	(canvas, px)	-	Ajusta el canvas a su tamaño CSS.

Cuándo sí y cuándo no

Hacé

Escalá el canvas con CSS y image-rendering: pixelated.

Evitá

No dibujes a resolución completa: el estilo depende de pocos píxeles grandes.