PixelText

Texto corto que se arma con píxeles que vuelan a su lugar.

Usa una fuente de 3 por 5 píxeles con letras, números y algunos signos. Las tildes se dibujan sin acento. El texto real queda en el DOM para lectores de pantalla.

Instalación

npm

npm i @moodinary/sprites

shadcn

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

import

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

Ejemplos

Saludo

Hacé clic para repetir.

Código

pixel-text.tsx

import { PixelText } from "@moodinary/sprites/react";
import { useState } from "react";

export default function Text() {
	const [k, setK] = useState(0);
	return (
		<button
			className="cursor-pointer rounded-[8px] border-0 bg-transparent p-2"
			onClick={() => setK((v) => v + 1)}
			type="button"
		>
			<PixelText key={k} scale={5} text="Hola, equipo" />
		</button>
	);
}

Props

PixelText

Prop	Tipo	Default	Descripción
text	string	-	Texto corto. Dos o tres palabras.
color	string	navy	Color.
scale	number	4	Píxeles CSS por píxel de la fuente.
duration	number	1400	Milisegundos.
repeat	boolean	false	Repite en bucle.

Cuándo sí y cuándo no

Hacé

Usalo para palabras sueltas en portadas o momentos de celebración.

Evitá

No lo uses para oraciones ni para texto que hay que leer rápido.

El canvas es aria-hidden y el texto queda visible para lectores de pantalla.
Con reduced motion aparece armado.

PixelText

Instalación

Ejemplos

Saludo

Props

PixelText

Cuándo sí y cuándo no

Accesibilidad