Moodinary/UI

PixelTransition

Disuelve contenido en píxeles con trama Bayer, para pasar entre estados con identidad.

Instalación

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

Ejemplos

Disolver y mostrar

Clima de la semana
Parcial, 3,8
Código
pixel-transition.tsx
import { PixelTransition } from "@moodinary/sprites/react";
import { Button } from "@moodinary/ui/components/button";
import { useState } from "react";

export default function Transition() {
	const [covered, setCovered] = useState(false);
	return (
		<div className="flex w-full flex-col items-start gap-3">
			<PixelTransition
				className="h-36 w-full overflow-hidden rounded-[10px] border border-line bg-card"
				covered={covered}
			>
				<div className="p-5">
					<div className="text-[13px] text-ink-3">Clima de la semana</div>
					<div className="mt-1 font-semibold text-[24px] text-ink">
						Parcial, 3,8
					</div>
				</div>
			</PixelTransition>
			<Button onClick={() => setCovered((c) => !c)} variant="outline">
				{covered ? "Mostrar" : "Disolver"}
			</Button>
		</div>
	);
}

Props

PixelTransition

PropTipoDefaultDescripción
coveredboolean-true tapa el contenido, false lo muestra. Anima entre los dos.
colorstringnavyColor de los píxeles.
durationnumber520Milisegundos.
pixelnumber8Tamaño de cada celda en píxeles CSS.
childrenReactNode-Contenido a tapar.

Cuándo sí y cuándo no

Hacé
  • Usala para cambios grandes de contexto, como pasar de una portada al contenido.
Evitá
  • No la pongas en cada clic. Una transición así cansa si se repite.

Accesibilidad

  • Con reduced motion el cambio es instantáneo.
  • El contenido sigue en el DOM. Si queda tapado, ocultalo también para lectores de pantalla con inert o aria-hidden.