asturaSTUDIO / TECHNICAL VIEWReturn to the creative view
EN

A / BANOTHER VIEW OF ASTURA

What you see
is only the
surface.

Design, development, automation and artificial intelligence. Digital experiences conceived as one connected system.

Explore the system
01 / Interface02 / Logic03 / DataOne identity. Every layer.
Design → Interaction → Application → InfrastructureFrom Asturias / beneath the surface

01THE SYSTEM

We don’t just build pages.
We build systems.

A visit begins on a screen. Behind it, many parts may work together. Explore what each layer contributes.

Anatomy of a systemExplore the layers
Layer 03

Frontend

The part that lives in the browser. It presents content, responds to controls and adapts to the available space.

The interface retrieves and presents information.

A conceptual map: each project connects the layers it needs.

02WHAT WE CAN BUILD

A website is
a starting point.

Possibilities depend on the project. Scope, feasibility and tools are defined before development.

WEB / IDENTITY

The same intention.
On every screen.

We don’t shrink a website. We redesign it for each screen.

The same information. A different layout.Simulation
Select a layout size

Two columns: context and content share the space.

01

Websites with their own direction

Business websites, luxury experiences, campaign pages and microsites. Composition, typography and journeys built around the brand and the purpose of each visit.

  • Brand website
  • Luxury
  • Microsites
02

Content with an editorial rhythm

Magazines, stories, catalogues and project presentations with clear hierarchies. Text, photography and video arranged to help people read, explore and find what matters.

  • Editorial
  • Catalogues
  • Storytelling
03

Languages and screens

Multilingual structures and responsive layouts adapting navigation, content and assets to each screen. Routes, language SEO, formats and currencies follow the intended markets.

  • Multilingual
  • Responsive
  • Language SEO
  • Currencies
04

Experiences that adapt

Variations by language, device, link or campaign source. Also by non-sensitive preferences chosen by the visitor, or their account where appropriate.

  • Preferences
  • Campaigns
  • Accounts
  • Progressive journeys
PERSONALISED EXPERIENCES

A different website
for each person.

Adaptations based on visit context, chosen preferences or an authorised account, with privacy controls appropriate to the scope.

One structure, different contextsDemo
Select a content example
Restaurant / example

A place for your next long lunch.

A seasonal menu, the setting and a booking within reach.

View the menuBook a table

Content prioritises the menu, location and bookings.

Demo using fictional content. Selection only changes this example; no personal data is accessed.

03MOTION / SPACE

Experiences that don’t feel
like a web page.

Motion can explain a structure, reveal a detail or guide a story. It always has a reason.

From gesture to space2D diagram
Diagram of a camera moving in front of three planes as progress changes030201CAMERASCENE
35%
01Scroll02Camera03Scene

An illustration of the principle: progress can control the camera and the relationship between layers.

Explore Astura Motion

A real Lab study. The diagram above represents the relationship between scroll, camera and scene.

01

Scroll-led storytelling

Parallax, pinned sections, horizontal scrolling, text entrances and page transitions. Motion can reveal information in stages, with reduced-motion alternatives.

  • Parallax
  • Pin
  • Horizontal scrolling
  • Text
  • Transitions
02

Responsive forms

SVG animation, morphing and physics-inspired interactions. From explanatory diagrams to magnetic buttons and elements responding to cursor or touch.

  • SVG
  • Morph
  • Physics
  • Magnetic buttons
03

3D products and spaces

Product viewers, navigable environments and virtual showrooms. Exploded views explain assemblies; cameras reveal materials, details and proportions.

  • 3D viewers
  • Showrooms
  • Exploded views
04

Maps and spatial scenes

Interactive maps, location journeys and particle compositions. Lighting and depth can guide attention through a digital space.

  • Maps
  • Particles
  • Lighting
05

Real-time camera and materials

Scroll-linked 3D scenes, camera movement and shaders for light, texture or distortion. Complexity is adapted to devices and the performance budget.

  • WebGL
  • Camera
  • Shaders
  • 3D scrolling

04ARTIFICIAL INTELLIGENCE

AI as a tool.
With judgement behind it.

To assist, explore and produce. Clear direction and human review, from content to processes.

VISUAL CONSISTENCY

One identity.
Many formats.

A reference guides the character, product, space, lighting and palette. Consistency is checked in every version.

A shared art direction
  1. Reference
  2. Image
  3. Video
  4. Social
  5. Web
Illustrative journey diagram.

AI-created images, characters, spaces and scenes are identified as generated or conceptual material.

01

Assistance connected to content

Assistants for querying and extracting document data, classifying inputs, suggesting recommendations or supporting workflows. Sources, permissions and review points are defined for each use.

  • Document extraction
  • Classification
  • Recommendations
02

Content and brand consistency

Support for copy, translations and images using tone, identity and style references. Visual continuity across characters and campaigns is checked before use.

  • Copy
  • Translation
  • Visual consistency
03

Virtual photography production

Generated images of products, interiors, architecture, characters and locations. Used to explore directions or create visual pieces, clearly labelled as generated or conceptual.

  • Virtual photography
  • Interiors
  • Architecture
04

Video for campaigns and social media

Advertising and social pieces using editing, AI generation, 2D or 3D animation and image-to-video. Script, duration and edit follow the message and channel.

  • Advertising
  • Social
  • 2D / 3D
  • Image to video
05

Voice, synchronisation and versions

Voiceovers, lip sync and language or format variations, with necessary voice and appearance permissions. A piece can be prepared in portrait, landscape or square.

  • Voice
  • Lip sync
  • Formats
VIRTUAL / GENERATED CONTENT

Content doesn’t need to exist
physically to feel real.

Virtual photography, conceptual interiors, product visualisation and campaigns. Origins clearly disclosed.

05AUTOMATION / BUSINESS

Your website can work
when you’re not there.

A form can start a process: validate, organise, respond and guide the person to the next step.

An automated workflow example
  1. Form
  2. Validation
  3. CRM
  4. Email
  5. Follow-up
Illustrative journey diagram.
EMAIL WITH LOGIC

Email that behaves
like an application.

Language, enquiry type and client status can shape a response. Confirmations, reminders and content delivered when they make sense.

New enquiry
Chosen language · ENProject type · Booking
Adapted template → CRM history
01

From contact to follow-up

Lead capture, CRM records, document and invoice generation, follow-up and onboarding. Status can be synchronised between the agreed tools.

  • CRM
  • Automation
  • Invoices
  • Onboarding
02

Email with context

Transactional, localised messages triggered by actions: confirmations, reminders and alerts. Templates, signatures and sending rules, with incoming messages routed to the right team.

  • Email
  • Reminders
  • Signatures
  • Inbox routing
03

Bookings and availability

Calendars with time slots, availability and capacity. Depending on the service, bookings can include payments, confirmations, changes and cancellations under the business’s rules.

  • Bookings
  • Capacity
  • Payments
  • Cancellations
04

Sales and subscriptions

Ecommerce with a catalogue, orders, inventory and customer accounts. One-off payments or subscriptions connect to a gateway and the shop’s defined processes.

  • Ecommerce
  • Subscriptions
  • Inventory
05

Client portals

Private areas for documents, messages, invoices and service status. Each account accesses only its authorised information and actions.

  • Private area
  • Documents
  • Messages

06CONNECTIONS / TOOLS

Everything can
talk to everything.

An API is an agreed way for programs to exchange information. It connects your website to other services, within their capabilities.

Possible API connections
  1. Your website
  2. API
  3. CRM · Payments · Data · AI
Illustrative journey diagram.
BESPOKE DEVELOPMENT

If it doesn’t exist,
it can be built.

Calculators, quotes, configurators, interactive forms, comparison tools and simulators. Tools built around how you work.

And a private space for your clients: documents, orders, appointments and projects, with controlled access and permissions.

01

Internal tools

Dashboards for tasks, incidents, tickets and requests. Views and reports can follow each team’s role and workflow.

  • Operations
  • Tickets
  • Reports
02

Data you can explore

Dashboards with indicators, filters and exports. Sources and KPI definitions are agreed to show useful information and explain where it comes from.

  • Data
  • KPI
  • Filters
  • Export
03

Search and answers

Search with autocomplete, filters or semantic understanding. An AI chat can help query authorised content and provide references where sources permit.

  • Semantic search
  • Autocomplete
  • AI chat
04

Connections between systems

API integrations, events and automated flows move data between services. Each connection needs synchronisation rules, permissions and error handling.

  • API
  • Synchronisation
  • Workflows

Possible integrations

Connections we can consider, not installed integrations. They depend on accounts, permissions, available APIs and each service’s terms.

Payments and client relationships

Stripe / PayPal / HubSpot / Salesforce

Payments, subscriptions and commercial follow-up.
Calendar and daily work

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

Calendars, documents and shared data.
Content management

WordPress / Sanity / Contentful

Publishing and editing through a content platform.
Maps and measurement

Google Maps / Mapbox / GA4 / Plausible

Locations, journeys and goal analysis.
Data and access

Supabase / Firebase / Auth0

Storage, accounts and authentication.
AI and automation

OpenAI / Anthropic / Make / Zapier

Assistance, content processing and connected tasks.

A system in context.

Conceptual journeys showing how the pieces could connect. Not delivered projects or active systems.

A restaurant

From browsing the menu to organising a booking.

A restaurant
  1. The visitor explores the menu and selects a date, time and party size.
  2. The system checks configured sittings and capacity.
  3. The booking can request a deposit and send confirmation.
  4. The team views bookings and schedules the agreed reminder.
Illustrative journey diagram.

Website, availability and communication in one connected journey.

A gym

From discovering activities to booking a class.

A gym
  1. The visitor explores activities, timetables and memberships.
  2. They create an account and choose an available membership.
  3. They book a class within capacity and access rules.
  4. They view upcoming sessions and receive change notifications.
Illustrative journey diagram.

Registration, subscriptions and class capacity organised around each member.

A law firm

From an initial enquiry to exchanging documents.

A law firm
  1. The visitor finds the service and requests an initial appointment.
  2. The assigned team receives the request for review.
  3. A permission-based portal supports document and message sharing.
  4. The client views appointments, notices and invoices in their account.
Illustrative journey diagram.

An organised client relationship with professional review.

A hotel

From discovering a stay to preparing arrival.

A hotel
  1. The visitor explores rooms and services in their language.
  2. They check dates and availability through the agreed integration.
  3. They complete booking and payment under the stay’s terms.
  4. They receive confirmation and useful information before arrival.
Illustrative journey diagram.

Presentation, booking and communication in one coherent experience.

A construction business

From a reference project to monitoring a building project.

A construction business
  1. The visitor explores completed work and submits an enquiry.
  2. The team receives the lead in its tracking tool.
  3. They share a proposal and relevant documentation.
  4. A portal can bring milestones, files, messages and invoices together.
Illustrative journey diagram.

Enquiries and follow-up connected to project documentation.

07THE FOUNDATION UNDERNEATH

What you don’t see.
That’s designed, too.

Accessibility, performance, search and security are part of the project from its foundations.

PERFORMANCE / DELIVERY

Less weight.
Less waiting.

From asset to screen
  1. Asset
  2. Optimisation
  3. Delivery
Illustrative journey diagram.

Images suited to each screen. Code arriving when needed. Fonts and caching designed to let people read sooner.

Explore Astura Check
01

Accessibility and search

Keyboard navigation, semantic structure, contrast and motion alternatives. Technical and local SEO with metadata, canonical URLs, Open Graph, sitemap and robots, without ranking promises.

  • Accessibility
  • Local SEO
  • Canonicals
  • Open Graph
  • Sitemap
  • Robots
02

Performance, hosting and measurement

Resource loading, deployment and hosting chosen for the intended use. Analytics can measure agreed events, funnels and goals with privacy settings suited to the project.

  • Performance
  • Hosting
  • Events
  • Funnels
03

Access and security

Authentication, permissions and validation where needed. Bot protection, updates and backups are defined by the architecture and agreed maintenance.

  • Authentication
  • Permissions
  • Bot protection
  • Backups
04

A foundation that can grow

CMS for content editing, design systems for brand consistency and bespoke features. Components and documentation help sustain the work.

  • CMS
  • Design system
  • Bespoke development
ACCESSIBILITY

Different ways to navigate.

Semantic HTML, keyboard access, visible focus, screen readers, contrast and reduced motion.

CONTENT / CMS

Update without touching code.

Copy, images, articles, team, services or products. A custom or connected content manager, suited to the project.

MEASUREMENT

What works. What to improve.

Traffic, enquiries, clicks and conversions. Measurement designed around the business goal and its privacy requirements.

DESIGN SYSTEMS

Consistency has a structure.

Tokens, typography, spacing, components and responsive rules. From brand language to every page.

08VERIFIED TECHNOLOGY

This website
is built with…

An inventory generated from this repository’s dependencies, active code and configuration at every build.

Frontend

React

Website components and interactions: navigation, projects and Lab experiences.

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

App Router conventions and website compilation with Vinext on Vite.

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

Styling utilities integrated into the build and used in interface components.

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

Editorial design, brand variables, responsive compositions and transitions created for AsturaWeb.

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

Animation sequencing and easing in the Astura Motion studio.

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

Three-dimensional scenes in the Lab and motion studio, with a static alternative.

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

Interactive accordions and dialogs, with icons in navigation and controls.

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

Development

TypeScript

Strict typing and code checking without generating output files.

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

Build and verification scripts, with dependencies locked through package-lock.

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

Configured tools for code review and formatting.

  • .oxfmtrc.json
  • .oxlintrc.json
  • package.json
Automated checks

Tests for Astura Check and its technical queries, plus SEO verification scripts.

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

Deployment

Netlify

Deployment configured for the static files generated by the build.

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

Astura Check API and scheduled cleanup of temporary storage.

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

Temporary results cache and counters limiting Astura Check queries.

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

Canonical domain policy, preview indexing rules and security route handling.

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

Performance

Progressive loading

3D scenes are imported dynamically when the experience and device support them.

  • components/hero-film/astura-film.tsx
  • components/lab/lab-experience.tsx
Images and video

WebP images and lazy loading for secondary content; video is requested when playback is started.

  • app/(spanish)/page.tsx
  • components/auntech-showcase.tsx
  • components/deferred-media.ts
Local fonts

Instrument Sans and Instrument Serif in WOFF2, with font swapping and preloading of the variants used on the homepage.

  • app/(spanish)/page.tsx
  • app/globals.css
  • public/fonts/sans-600.woff2
  • public/fonts/serif-italic.woff2
Adaptive motion

Respects reduced motion preferences and offers a static studio on devices with limited resources.

  • components/hero-film/astura-film.tsx
  • components/motion.tsx
Rendering control

Capped pixel density in 3D scenes and animation or video pauses when they are no longer visible.

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

Inventory generated from code connected to the pages and the build configuration. An installed dependency alone is not presented as an active technology.

Describes the implementation; does not include performance scores or confirm the status of external services.

Wrangler and the Cloudflare configuration remain available for local previews; deployment is configured on Netlify.

Verification scripts do not imply active continuous integration: no CI configuration was found in the repository.

09ONE SHARED STRUCTURE

Different disciplines.
One Astura.

Explore the connections. Visual direction and technical construction are conceived together.

One studio. One system.Select a discipline
ASTURAEverything connects
Design

Identity, hierarchy and a shared visual direction.

→THE NEXT CONNECTION

What would you like
to build?

It can start with a website.
It doesn’t have to end there.

Tell us about the projectReturn to the creative view

Read the policy and browser storage inventory

ASTURA / BRIEF

Your project, made clear.

  1. 01The idea
  2. 02The context
  3. 03The contact
What would you like to do?

You can also contact us directly.

hola@asturaweb.com ↗WhatsApp ↗