Fondo ASCII (Studio)
Escena procedural convertida en caracteres con asciify-engine. 15 estilos de render, hover, acabado óptico y paleta del tema.
AsciiBackground · @/components/ui/AsciiBackgroundContenido sobre el fondoTexto de ejemplo para comprobar la legibilidad sobre el fondo.
Props
tint tiñe con --acc · duotone usa --bg/--acc · gradient añade --acc2
Admite decimales. El indicador de la vista previa muestra la celda real y si el motor la ha limitado
Por defecto se sube solo lo justo para la celda pedida; el motor admite hasta 160 000
Baja la resolución sola si los fotogramas tardan demasiado (se lee al montar)
accent usa el token --acc
Con «window» el fondo reacciona aunque el puntero esté sobre otro elemento y no bloquea clics
Con pocos fotogramas la escena se ve «a saltos»; el hover del motor sigue fluido
Código
import AsciiBackground from "@/components/ui/AsciiBackground"; <AsciiBackground />
Tokens del escenario
<div style={{
"--bg": "#07080f",
"--fg": "#e8ecf4",
"--acc": "#7cc4ff",
"--acc2": "#c084fc",
"--card": "rgba(255,255,255,0.06)",
"--ln": "rgba(255,255,255,0.16)",
"--r": "14px",
}}>
…
</div>Notas
- Rellena el contenedor: debe tener position: relative y tamaño.
- palette reinterpreta los colores con --bg, --acc y --acc2: cambia el tema y el fondo cambia.
- Las escenas marcadas con progreso cambian con la prop progress (0–1).
- Cambiar props no remonta: se aplican en caliente.