asturaESTUDIO / VISTA TÉCNICAVolver a la vista creativa

A / BLA OTRA LECTURA DE ASTURA

Lo que ves
es solo la
superficie.

Diseño, desarrollo, automatización e inteligencia artificial. Experiencias digitales pensadas como un único sistema.

Explorar el sistema
01 / Interfaz02 / Lógica03 / DatosUna identidad. Todas sus capas.
Diseño → Interacción → Aplicación → InfraestructuraDesde Asturias / hacia dentro

01EL SISTEMA

No construimos páginas.
Construimos sistemas.

Una visita empieza en una pantalla. Detrás puede haber muchas piezas trabajando juntas. Explora qué aporta cada capa.

Anatomía de un sistemaExplora las capas
Capa 03

Frontend

Es la parte que vive en el navegador. Presenta el contenido, responde a los controles y adapta la composición al espacio disponible.

La interfaz consulta y presenta información.

Un mapa conceptual: cada proyecto conecta las capas que necesita.

02LO QUE PODEMOS CONSTRUIR

Una web es
un punto de partida.

Posibilidades según proyecto. El alcance, la viabilidad y las herramientas se definen antes de construir.

WEB / IDENTIDAD

La misma intención.
En cada pantalla.

No reducimos una web. La rediseñamos para cada pantalla.

La misma información. Otra distribución.Simulación
Seleccionar tamaño de composición

Dos columnas: contexto y contenido comparten el espacio.

01

Webs con una dirección propia

Webs corporativas, experiencias de lujo, páginas de campaña y microsites. La composición, la tipografía y el recorrido se plantean alrededor de la marca y del objetivo de cada visita.

  • Web de marca
  • Luxury
  • Microsites
02

Contenido con ritmo editorial

Revistas, historias, catálogos y presentaciones de proyectos con jerarquías claras. Texto, fotografía y vídeo se organizan para poder leer, explorar y encontrar lo relevante.

  • Editorial
  • Catálogos
  • Narrativa
03

Idiomas y pantallas

Estructuras multilingües y diseños responsive que adaptan navegación, contenido y recursos a cada pantalla. Rutas, SEO por idioma, formatos y monedas se ajustan a los mercados previstos.

  • Multilingüe
  • Responsive
  • SEO por idioma
  • Monedas
04

Experiencias que se adaptan

Variantes por idioma, dispositivo, procedencia de un enlace o campaña. También por preferencias no sensibles elegidas por la persona o por su cuenta, cuando el proyecto lo permita.

  • Preferencias
  • Campañas
  • Cuentas
  • Recorridos progresivos
EXPERIENCIAS PERSONALIZADAS

Una web diferente
para cada persona.

Adaptaciones a partir del contexto de la visita, preferencias elegidas o una cuenta autorizada, con controles de privacidad según el alcance.

Una estructura, distintos contextosDemo
Seleccionar ejemplo de contenido
Gastronomía / ejemplo

Un lugar en tu próxima sobremesa.

Una carta de temporada, el espacio y una reserva a un paso.

Ver la cartaReservar una mesa

El contenido prioriza la carta, la ubicación y las reservas.

Demostración con contenido ficticio. La selección solo cambia este ejemplo; no consulta datos personales.

03MOVIMIENTO / ESPACIO

Experiencias que no se sienten
como una página web.

El movimiento puede explicar una estructura, hacer visible un detalle o guiar una historia. Siempre tiene una razón.

Del gesto al espacioEsquema 2D
Esquema de una cámara que cambia de posición frente a tres planos al variar el progreso030201CÁMARAESCENA
35%
01Scroll02Cámara03Escena

Ilustración del principio: el progreso puede controlar la cámara y la relación entre capas.

Ver Astura Motion

Un estudio real del Laboratorio. El diagrama superior representa la relación entre scroll, cámara y escena.

01

Narrativas al hacer scroll

Parallax, secciones fijadas, scroll horizontal, entradas de texto y transiciones entre páginas. El movimiento puede revelar información por etapas, con alternativas de movimiento reducido.

  • Parallax
  • Pin
  • Scroll horizontal
  • Texto
  • Transiciones
02

Formas que responden

Animación SVG, transformaciones entre formas y pequeñas interacciones con física. Desde diagramas que explican procesos hasta botones magnéticos y elementos que reaccionan al cursor o al tacto.

  • SVG
  • Morph
  • Física
  • Botones magnéticos
03

Productos y espacios en 3D

Visores de producto, entornos navegables y showrooms virtuales. Las vistas por piezas permiten entender un montaje y las cámaras ayudan a explorar materiales, detalles y proporciones.

  • Visores 3D
  • Showrooms
  • Vistas por piezas
04

Mapas y escenas espaciales

Mapas interactivos, recorridos por ubicaciones y composiciones de partículas. La iluminación y la profundidad pueden orientar la atención dentro de un espacio digital.

  • Mapas
  • Partículas
  • Iluminación
05

Cámara y materiales en tiempo real

Escenas 3D vinculadas al scroll, movimientos de cámara y shaders para efectos de luz, textura o distorsión. La complejidad se ajusta a los dispositivos y al presupuesto de rendimiento.

  • WebGL
  • Cámara
  • Shaders
  • Scroll 3D

04INTELIGENCIA ARTIFICIAL

IA como herramienta.
Con criterio detrás.

Para asistir, explorar y producir. Con una dirección clara y revisión humana, desde el contenido hasta los procesos.

CONSISTENCIA VISUAL

Una identidad.
Múltiples formatos.

Una referencia guía al personaje, el producto, el espacio, la luz y la paleta. La coherencia se revisa en cada versión.

Una dirección artística compartida
  1. Referencia
  2. Imagen
  3. Vídeo
  4. Redes
  5. Web
Esquema ilustrativo del recorrido.

Las imágenes, los personajes, los espacios y las escenas creados con IA se presentan como material generado o conceptual.

01

Asistencia conectada al contenido

Asistentes para consultar y extraer datos de documentos, clasificar entradas, proponer recomendaciones o apoyar flujos de trabajo. Sus fuentes, permisos y puntos de revisión se definen para cada uso.

  • Extracción documental
  • Clasificación
  • Recomendaciones
02

Contenido y coherencia de marca

Apoyo en textos, traducciones e imágenes con referencias de tono, identidad y estilo. Se puede trabajar la continuidad visual de personajes y campañas, revisando las variaciones antes de usarlas.

  • Textos
  • Traducción
  • Consistencia visual
03

Producción fotográfica virtual

Imágenes generadas de producto, interiores, arquitectura, personajes y localizaciones. Sirven para explorar direcciones o crear piezas visuales y se identifican como material generado o conceptual.

  • Fotografía virtual
  • Interiores
  • Arquitectura
04

Vídeo para campañas y redes

Piezas publicitarias y sociales con edición, generación por IA, animación 2D o 3D e imagen a vídeo. El guion, la duración y el montaje se adaptan al mensaje y al canal.

  • Anuncios
  • Social
  • 2D / 3D
  • Imagen a vídeo
05

Voz, sincronía y versiones

Locuciones, sincronización labial y versiones por idioma o formato, con las autorizaciones necesarias para las voces y apariciones. Una pieza puede prepararse en vertical, horizontal o cuadrado.

  • Voz
  • Lip sync
  • Formatos
CONTENIDO VIRTUAL / GENERADO

Contenido que no necesita existir
físicamente para parecer real.

Fotografía virtual, interiores conceptuales, visualización de producto y campañas. Su origen se comunica con claridad.

05AUTOMATIZACIÓN / NEGOCIO

Tu web puede trabajar
cuando tú no estás.

Un formulario puede ser el principio de un proceso: validar, organizar, responder y acompañar a la persona hasta el siguiente paso.

Ejemplo de un recorrido automatizado
  1. Formulario
  2. Validación
  3. CRM
  4. Email
  5. Seguimiento
Esquema ilustrativo del recorrido.
EMAIL CON LÓGICA

Email que se comporta
como una aplicación.

El idioma, el motivo de la consulta y el estado del cliente pueden definir la respuesta. Confirmaciones, recordatorios y contenidos que llegan cuando tienen sentido.

Nueva consulta
Idioma elegido · ESTipo de proyecto · Reserva
Plantilla adaptada → Historial en CRM
01

Del contacto al seguimiento

Captación de oportunidades, registro en CRM, generación de documentos y facturas, seguimiento e incorporación de clientes. Los estados pueden sincronizarse entre las herramientas acordadas.

  • CRM
  • Automatización
  • Facturas
  • Onboarding
02

Correos con contexto

Mensajes transaccionales, localizados y condicionados por una acción: confirmaciones, recordatorios o avisos. Plantillas, firmas y reglas de envío, con derivación de correos entrantes al equipo correspondiente.

  • Email
  • Recordatorios
  • Firmas
  • Gestión de bandejas
03

Reservas y disponibilidad

Calendarios con franjas horarias, disponibilidad, aforo o plazas. Según el servicio, la reserva puede incluir pagos, confirmaciones, cambios y cancelaciones sujetos a las reglas del negocio.

  • Reservas
  • Capacidad
  • Pagos
  • Cancelaciones
04

Venta y suscripciones

Comercio electrónico con catálogo, pedidos, inventario y cuentas de cliente. Los cobros puntuales o las suscripciones se conectan a una pasarela y a los procesos definidos para cada tienda.

  • Ecommerce
  • Suscripciones
  • Inventario
05

Portales de cliente

Áreas privadas para consultar documentos, mensajes, facturas y el estado de un servicio. Cada cuenta accede a la información y las acciones que le correspondan.

  • Área privada
  • Documentos
  • Mensajes

06CONEXIONES / HERRAMIENTAS

Todo puede
hablar con todo.

Una API es una forma acordada de intercambiar información entre programas. Conecta tu web con otros servicios, según lo que cada uno permita.

Conexiones posibles mediante API
  1. Tu web
  2. API
  3. CRM · Pagos · Datos · IA
Esquema ilustrativo del recorrido.
DESARROLLO A MEDIDA

Si no existe,
se puede construir.

Calculadoras, presupuestos, configuradores, formularios interactivos, comparadores y simuladores. Una herramienta alrededor de tu manera de trabajar.

Y una parte privada para tus clientes: documentos, pedidos, citas y proyectos, con acceso y permisos.

01

Herramientas internas

Paneles para gestionar tareas, incidencias, tickets y solicitudes. Las vistas y los informes pueden adaptarse a las funciones de cada equipo y a sus pasos de trabajo.

  • Operaciones
  • Tickets
  • Informes
02

Datos que se pueden explorar

Cuadros de mando con indicadores, filtros y exportaciones. Las fuentes y las definiciones de cada KPI se acuerdan para mostrar información útil y explicar de dónde sale.

  • Datos
  • KPI
  • Filtros
  • Exportación
03

Búsqueda y respuestas

Búsqueda con autocompletado, filtros o comprensión semántica. Un chat con IA puede ayudar a consultar contenido autorizado y ofrecer referencias cuando las fuentes lo permitan.

  • Búsqueda semántica
  • Autocompletado
  • Chat IA
04

Conexiones entre sistemas

Integraciones mediante API, eventos y flujos automatizados para mover datos entre servicios. Cada conexión necesita reglas de sincronización, permisos y una forma de revisar los errores.

  • API
  • Sincronización
  • Flujos de trabajo

Integraciones posibles

Conexiones que se pueden valorar. No implica que estén instaladas: dependen de las cuentas, los permisos, las API disponibles y las condiciones de cada servicio.

Pagos y relación con clientes

Stripe / PayPal / HubSpot / Salesforce

Cobros, suscripciones y seguimiento comercial.
Agenda y trabajo diario

Google Calendar / Microsoft 365 / Notion / Airtable / Google Sheets

Calendarios, documentos y datos compartidos.
Gestión de contenido

WordPress / Sanity / Contentful

Publicación y edición desde un gestor de contenidos.
Mapas y medición

Google Maps / Mapbox / GA4 / Plausible

Ubicaciones, recorridos y análisis de objetivos.
Datos y acceso

Supabase / Firebase / Auth0

Almacenamiento, cuentas y autenticación.
IA y automatización

OpenAI / Anthropic / Make / Zapier

Asistencia, procesamiento de contenido y conexión de tareas.

Un sistema, en contexto.

Recorridos conceptuales para explicar cómo podrían conectarse las piezas. No son proyectos entregados ni sistemas activos.

Un restaurante

De explorar la carta a organizar una reserva.

Un restaurante
  1. La persona consulta la carta y elige fecha, hora y número de comensales.
  2. El sistema comprueba los turnos y la capacidad configurados.
  3. La reserva puede solicitar una señal y enviar una confirmación.
  4. El equipo consulta las reservas y se programa el recordatorio acordado.
Esquema ilustrativo del recorrido.

Web, disponibilidad y comunicación conectadas en un mismo recorrido.

Un gimnasio

De conocer las actividades a reservar una clase.

Un gimnasio
  1. La persona explora actividades, horarios y modalidades de cuota.
  2. Crea una cuenta y contrata la modalidad disponible.
  3. Reserva una clase con control de plazas y condiciones de acceso.
  4. Consulta sus próximas sesiones y recibe avisos de cambios.
Esquema ilustrativo del recorrido.

Altas, suscripciones y plazas organizadas alrededor de cada socio.

Un despacho de abogados

De una primera consulta al intercambio de documentación.

Un despacho de abogados
  1. La persona identifica el servicio y solicita una primera cita.
  2. La solicitud llega al equipo asignado para su revisión.
  3. Un portal con permisos permite compartir documentos y mensajes.
  4. El cliente consulta citas, avisos y facturas disponibles en su cuenta.
Esquema ilustrativo del recorrido.

Un acceso ordenado a la relación con el despacho, con revisión profesional.

Un hotel

De descubrir una estancia a preparar la llegada.

Un hotel
  1. La persona explora habitaciones y servicios en su idioma.
  2. Consulta fechas y disponibilidad mediante la conexión acordada.
  3. Completa la reserva y el pago según las condiciones de la estancia.
  4. Recibe la confirmación e información útil antes de su llegada.
Esquema ilustrativo del recorrido.

Presentación, reserva y comunicación reunidas en una experiencia coherente.

Una constructora

De un proyecto de referencia al seguimiento de una obra.

Una constructora
  1. La persona explora trabajos y envía los datos de su consulta.
  2. El equipo recibe la oportunidad en su herramienta de seguimiento.
  3. Comparte una propuesta y la documentación que corresponda.
  4. Un portal puede reunir hitos, archivos, mensajes y facturas de la obra.
Esquema ilustrativo del recorrido.

Captación y seguimiento conectados con la documentación del proyecto.

07LA BASE QUE LO SOSTIENE

Lo que no se ve.
También se diseña.

Accesibilidad, rendimiento, buscadores y seguridad forman parte del proyecto desde su estructura.

RENDIMIENTO / ENTREGA

Menos peso.
Menos espera.

Del recurso a la pantalla
  1. Recurso
  2. Optimización
  3. Entrega
Esquema ilustrativo del recorrido.

Imágenes adecuadas para cada pantalla. Código que llega cuando hace falta. Fuentes y caché pensadas para leer antes.

Explorar Astura Check
01

Accesibilidad y buscadores

Navegación por teclado, estructura semántica, contraste y alternativas al movimiento. SEO técnico y local con metadatos, URLs canónicas, Open Graph, sitemap y robots, sin prometer posiciones en los resultados.

  • Accesibilidad
  • SEO local
  • Canónicas
  • Open Graph
  • Sitemap
  • Robots
02

Rendimiento, alojamiento y medición

Carga de recursos, despliegue y alojamiento elegidos según el uso previsto. La analítica puede medir eventos, embudos y objetivos acordados, con una configuración de privacidad ajustada al proyecto.

  • Rendimiento
  • Hosting
  • Eventos
  • Embudos
03

Acceso y seguridad

Autenticación, permisos y validación de datos para las funciones que lo necesiten. Protección frente a bots, actualizaciones y copias de seguridad se concretan según la arquitectura y el mantenimiento contratado.

  • Autenticación
  • Permisos
  • Protección antibots
  • Copias de seguridad
04

Una base que se puede ampliar

CMS para editar contenido, sistemas de diseño para mantener la marca y desarrollo a medida para funciones propias. Componentes y documentación ayudan a dar continuidad al trabajo.

  • CMS
  • Sistema de diseño
  • Desarrollo a medida
ACCESIBILIDAD

Distintas formas de navegar.

HTML semántico, teclado, foco visible, lectores de pantalla, contraste y movimiento reducido.

CONTENIDO / CMS

Actualizar sin tocar código.

Textos, imágenes, artículos, equipo, servicios o productos. Un gestor propio o conectado, según el proyecto.

MEDICIÓN

Qué funciona. Qué mejorar.

Tráfico, consultas, clics y conversiones. Medición planteada para el objetivo del negocio y sus requisitos de privacidad.

SISTEMAS DE DISEÑO

La coherencia tiene estructura.

Tokens, tipografía, espacios, componentes y reglas responsive. Del lenguaje de marca a cada página.

08TECNOLOGÍA VERIFICADA

Este sitio
está construido con…

Una lectura generada desde las dependencias, el código activo y la configuración de este repositorio en cada compilación.

Frontend

React

Componentes e interacción de la web: navegación, proyectos y experiencias del laboratorio.

  • app/page.tsx
  • components/lab/lab-experience.tsx
  • components/studio-shell.tsx
Vinext + Vite

Rutas con la convención App Router y compilación de la web con Vinext sobre Vite.

  • app/layout.tsx
  • package.json
  • vite.config.ts
Tailwind CSS

Utilidades de estilo integradas en la compilación y usadas en los componentes de interfaz.

  • app/globals.css
  • components/ui/accordion.tsx
  • vite.config.ts
CSS propio

Diseño editorial, variables de marca, composiciones adaptables y transiciones creadas para Astura.

  • app/globals.css
  • app/v2.css
GSAP

Secuencia y curvas de animación del estudio Astura Motion.

  • app/laboratorio/astura-motion/page.tsx
  • components/hero-film/master-timeline.ts
Three.js / WebGL

Escenas tridimensionales del laboratorio y del estudio de movimiento, con una alternativa estática.

  • components/hero-film/astura-film.tsx
  • components/hero-film/studio-renderer.ts
  • components/lab/lab-scene.ts
Base UI + Lucide

Acordeones y diálogos interactivos, con iconos en la navegación y los controles.

  • components/studio-shell.tsx
  • components/ui/accordion.tsx
  • components/ui/dialog.tsx

Desarrollo

TypeScript

Tipado estricto y comprobación del código sin generar archivos de salida.

  • package.json
  • tsconfig.json
Node.js + npm

Scripts de compilación y verificación, con dependencias fijadas mediante package-lock.

  • package-lock.json
  • package.json
Oxlint + Oxfmt

Herramientas configuradas para revisar y dar formato al código.

  • .oxfmtrc.json
  • .oxlintrc.json
  • package.json
Comprobaciones automatizadas

Pruebas de Astura Check y de sus consultas técnicas, más verificaciones de SEO disponibles como scripts.

  • package.json
  • scripts/verify-astura-check.mjs
  • scripts/verify-seo.mjs
  • scripts/verify-technical.mjs

Publicación

Netlify

Publicación configurada para los archivos estáticos generados por la compilación.

  • netlify.toml
  • next.config.ts
Netlify Functions

API de Astura Check y tarea programada de limpieza del almacenamiento temporal.

  • netlify.toml
  • netlify/functions/astura-check.ts
  • netlify/functions/check-cleanup.ts
Netlify Blobs

Caché temporal de resultados y contadores que limitan las consultas de Astura Check.

  • lib/astura-check/storage.server.ts
  • netlify/functions/check-cleanup.ts
Netlify Edge Functions

Política del dominio canónico e indexación de vistas previas, y tratamiento de rutas de seguridad.

  • netlify.toml
  • netlify/edge-functions/search-policy.ts
  • netlify/edge-functions/security-monitor.ts

Rendimiento

Carga progresiva

Las escenas 3D se importan dinámicamente cuando la experiencia y el dispositivo lo permiten.

  • components/hero-film/astura-film.tsx
  • components/lab/lab-experience.tsx
Imágenes y vídeo

Imágenes WebP y carga diferida en contenido secundario; el vídeo se solicita al pulsar reproducir.

  • app/page.tsx
  • components/auntech-showcase.tsx
  • components/deferred-media.ts
Fuentes locales

Instrument Sans y Instrument Serif en WOFF2, con intercambio de fuente y precarga de variantes usadas en portada.

  • app/globals.css
  • app/page.tsx
  • public/fonts/sans-600.woff2
  • public/fonts/serif-italic.woff2
Movimiento adaptable

Respeta la preferencia de movimiento reducido y ofrece una versión estática del estudio en dispositivos limitados.

  • components/hero-film/astura-film.tsx
  • components/motion.tsx
Control del renderizado

Densidad de píxeles limitada en escenas 3D y pausas de animación o vídeo cuando dejan de estar visibles.

  • components/auntech-showcase.tsx
  • components/hero-film/astura-film.tsx
  • components/lab/lab-scene.ts

Inventario generado a partir del código conectado a las páginas y de la configuración de compilación. Una dependencia instalada por sí sola no se presenta como tecnología activa.

Describe la implementación; no incluye puntuaciones de rendimiento ni confirma el estado de servicios externos.

Wrangler y la configuración de Cloudflare se conservan para la vista previa local; la publicación está configurada en Netlify.

El sitio está disponible en español. Las rutas de inglés y francés están preparadas, pero sus versiones siguen deshabilitadas.

Los scripts de verificación no implican una integración continua activa: no se ha encontrado una configuración de CI en el repositorio.

09UNA MISMA ESTRUCTURA

Distintas disciplinas.
Un solo Astura.

Explora las conexiones. La dirección visual y la construcción técnica se piensan juntas.

Un estudio. Un sistema.Selecciona una disciplina
ASTURATodo está conectado
Diseño

Identidad, jerarquía y una dirección visual compartida.

→LA SIGUIENTE CONEXIÓN

¿Qué quieres
construir?

Puede empezar como una web.
No tiene por qué terminar ahí.

Cuéntanos el proyectoVolver a la vista creativa