Biblioteca de sitios · versión 2.0
Tu sitio. Una nueva dimensión.
Tres modelos con escenas 3D para convertir tus ideas en una presencia. Personalízalos en el navegador y llévate el sitio listo.
Tres modelos con escenas 3D para convertir tus ideas en una presencia. Personalízalos en el navegador y llévate el sitio listo.
Astra3D es una biblioteca de sitios personalizables. Las escenas ya vienen incluidas: cambia el contenido y comprueba el resultado en la vista previa.
Órbita para portafolio, Forma para agencia y Caderno para publicación. Cada modelo tiene una escena geométrica original.
Textos, imagen, cinco paletas, dos tipografías y tres opciones de movimiento. Controla las secciones y personaliza hasta seis elementos.
Exporta un HTML con las fuentes y la escena incluidas. Guarda también el JSON para volver a editar el proyecto.
En la versión actual, todo ocurre en el navegador. No hace falta crear una cuenta ni conectar un servicio de IA.
Astra3D exporta el sitio; tú eliges dónde alojarlo. La publicación automática de sitios de los visitantes está prevista para la V6.
Para usar en línea: un navegador actualizado, tus textos y, si quieres, una imagen PNG, JPG o WebP de hasta 8 MB. No hay que configurar ninguna clave de API.
Ten el nombre de la marca, una presentación, tus proyectos o artículos y un enlace de contacto real. Las imágenes se procesan localmente.
Usa Node.js 22.12+ o 24, npm y Git. El archivo de dependencias está incluido en el repositorio.
git clone https://github.com/inematds/astra3d.git cd astra3d npm ci npm run dev
Empieza por el editor. Usa la guía de abajo para personalizar, guardar una copia y publicar.
Abre la galería. Usa Ver demostración para explorar un sitio completo sin el editor, o Crear mi sitio para iniciar un proyecto con Órbita, Forma o Caderno. Puedes crear varios proyectos de la misma plantilla. Se organizan en Mis proyectos.
En la pestaña Contenido, cambia el nombre, el llamado, la presentación y el texto Sobre. Agrega una imagen y su descripción. Configura el botón con tu dirección real.
https://seu-site.com/contato mailto:voce@exemplo.com
Los enlaces no válidos no se exportan. Si no hay un enlace de contacto, el sitio no muestra un botón que finja enviar mensajes.
Elige una paleta y una tipografía en la pestaña Apariencia. En Secciones, edita proyectos o artículos, agrega o elimina elementos y elige qué secciones aparecen. Quita el aviso de ejemplo solo después de reemplazar el contenido.
Alterna la vista previa entre computadora y celular. Desplázate dentro de ella, hacia adelante y hacia atrás. Abre los proyectos y prueba sus enlaces. En Caderno, prueba la búsqueda y las categorías. En el celular, usa los botones Personalizar y Ver vista previa.
El movimiento acompaña el desplazamiento. Quienes usan movimiento reducido reciben una escena estática; sin WebGL, el contenido sigue siendo accesible.
Usa Guardar JSON para conservar el proyecto editable. Usa Exportar sitio para descargar el HTML listo, con fuentes, imagen y escena incluidas. Abre el HTML directamente en el navegador, incluso sin conexión.
meu-site.astra3d.json # backup para importar no editor meu-site.html # site pronto para abrir e publicar
Al borrar los datos del navegador, se eliminan los proyectos locales. El historial para deshacer dura lo que dura la sesión; las versiones guardadas permanecen con el proyecto y se incluyen en la copia de seguridad de la biblioteca. Si aparece un aviso de almacenamiento, descarga el JSON antes de salir.
Cambia el nombre del HTML a index.html y súbelo a tu hosting estático. En un repositorio de GitHub Pages ya configurado para servir HTML estático, coloca este archivo en la carpeta publicada. En esta versión, el editor no te pide la contraseña ni publica en tu cuenta.
index.html
Para compilar y publicar el propio editor Astra3D, el repositorio incluye un workflow de GitHub Actions que publica dist/:
npm run test npm run build npm run preview
La V2.0 mantiene varios sitios independientes en el mismo navegador. Los borradores de la V1 se recuperan automáticamente, sin borrar los datos antiguos.
En Mis proyectos, cambia el nombre, duplica, busca por nombre, filtra por plantilla o cambia el orden. Archivar solo mueve el proyecto a la pestaña Archivados; usa Restaurar para devolverlo a la lista activa.
Duplicar crea un proyecto independiente con los mismos textos, colores e imagen. Editar la copia no cambia el original. El nombre del proyecto es interno; la marca que se muestra en el sitio se edita en la pestaña Contenido.
Al final del panel del editor, abre Versiones guardadas. Ponle un nombre y haz clic en Guardar versión. Puedes guardar hasta cinco. Al restaurar una versión, también se guarda el estado anterior. Al llegar al límite, se reemplaza la versión más antigua.
Descargar una copia de seguridad incluye todos los proyectos, los archivados y las versiones guardadas. Importar acepta esa copia o un JSON individual de la V1/V2 y crea nuevas copias sin reemplazar el trabajo existente. Límite: 100 proyectos y 64 MB por archivo.
Los datos son locales. Para usarlos en otro dispositivo, descarga e importa la copia de seguridad. Espera a que aparezca “Guardado en este navegador” antes de cerrar la pestaña. Si otra pestaña modifica el mismo proyecto, el editor conserva la versión ya guardada y te ofrece guardar tus cambios como una copia.
Los textos iniciales son demostraciones, no clientes ni resultados reales. Elige una experiencia y reemplaza la información por la tuya.
Portal de anillos 3D, presentación profesional, proyectos con lectura ampliada y contacto.
Cinta escultórica, descripción del estudio y casos que abren un desafío, el proceso y la entrega.
Libro tridimensional, búsqueda de textos, categorías y lectura completa. No recopila correos electrónicos sin un servicio externo tuyo.
V1 y V2.0 están disponibles. Las próximas etapas son planes con dependencias y criterios de aceptación documentados.