Guía · Fondos
Diseña un fondo que se mueve con calma detrás de tu contenido, pruébalo con un titular encima y cópialo como HTML, Web Component o React. El motor va incluido en el código.
Gratis · sin cuenta · código libre de atribución (MIT-0)
Qué puedes hacer
Bruma, Papel vivo, Marea, Constelación, Retícula, Ámbar lento, Órbita, Relieve y diecisiete más, como Mareas de seda, Luciérnagas, Bambú en tinta, Curvas de terreno o Lluvia en la ventana; o «Azar» para descubrir combinaciones nuevas.
Pone un titular, un párrafo y un botón sobre tu fondo antes de exportarlo, con una estimación de legibilidad para cada zona de texto.
Linterna, ondas, lupa, empuje o remolino. Puedes apagarlo al exportar si prefieres un fondo quieto al tacto.
Fija una duración y el movimiento se repite sin corte, también en el video y el GIF.
Fondo de página fijo, portada o bloque dentro de tu maqueta, con el código listo para cada caso.
Se detiene cuando sale de pantalla, baja la resolución si los fotogramas se retrasan y respeta «reducir movimiento».
Cómo funciona
En el espacio Fondos, prueba los puntos de partida o pulsa «Azar» (R) hasta que algo te guste.
En la vista «Fondo web», mira «Legibilidad (estimación)» en cada zona de texto. Si cuesta leer, sube la «Zona protegida»: una capa regulable detrás de tu contenido que también viaja en el código.
En «Exportar», pestaña «Código»: HTML para pegar, Web Component o React, con la colocación que necesites.
Formatos y límites
scrim y clase .glyphos-zona).Límite: el motor usa WebGL 2; en un navegador sin él dibuja el motor básico incluido (Canvas 2D, más despacio). Si eliges el código ligero, sin WebGL 2 el fondo se queda en su color de base (o en el póster que indiques) y tu contenido sigue encima.glyphos-field.js y una etiqueta HTML estándar, que no depende de ningún framework.Límite: el motor va dentro del archivo, sólo con los patrones que usa tu pieza, así que cada fondo pesa decenas de KB.GlyphosBackground.jsx que sólo necesita React. Probado con React 19 en Vite; en Next.js va como componente de cliente.Límite: se dibuja en el cliente: el HTML del servidor muestra el color de fondo hasta que el componente se monta.El código exportado sólo dibuja: no mide visitas ni envía datos. Con «Sin dependencias externas» no hace ninguna petición fuera de tu web.
El estudio también trabaja en tu navegador: tus pruebas, historial y colección se quedan en este equipo.
Preguntas frecuentes
El fondo se pausa fuera de pantalla y en pestañas ocultas, limita la resolución y la baja si los fotogramas se retrasan. Aun así, pruébalo en los equipos de tu público.
No. El código que exporta el estudio es MIT-0: úsalo, modifícalo y véndelo sin atribución. Más en Licencia y uso.
No lo hemos probado en cada plataforma. Donde puedas pegar HTML personalizado con su script, el fondo se comporta como en cualquier página; algunas plataformas limitan los scripts, así que pruébalo antes en un borrador. En React, usa el componente.
Si su sistema pide reducir movimiento, el fondo empieza en pausa y muestra un fotograma quieto.
Otras guías
