Vorae Studio | qevstudio.com

Problema

Un estudio de diseño creativo necesita un sitio web que sea él mismo un caso de estudio.

No era solo 'tener una página', sino construir una experiencia que comunicara identidad visual distintiva (glitch effects, cursor personalizado, text scramble, parallax), contenido dinámico administrable desde Supabase, múltiples journeys de conversión con CTAs contextuales, y rendimiento con accesibilidad (splash screen progresivo, reduced-motion respect, loading states). El sitio debía funcionar como herramienta de negocio, conversion-oriented con formularios de contacto, presupuestos por rango y WhatsApp directo.

Proceso

Arquitectura

SPA con React + React Router, páginas separadas para Home, Portfolio, Servicios, Studio, Contacto, Insights y Legal. Transiciones direccionales entre páginas.

Sistema de Diseño

Tokens de diseño (colores, tipografía, espaciado) y componentes reutilizables con shadcn/ui como base.

Animaciones

Text scramble en hero, parallax en secciones, transiciones direccionales, cursor personalizado. Cada interacción tiene feedback visual.

Backend

Supabase como CMS headless para proyectos, servicios, testimonios, filosofía y configuración del sitio. Fallbacks estáticos para conexión offline.

Conversión

Floating CTA en scroll, formularios de contacto con rangos de presupuesto, links directos a WhatsApp.

Un sitio web que no solo muestra servicios, sino que demuestra capacidad de diseño a través de la experiencia misma.

Construcción

SPA con React 18 + React Router y 7 páginas internas.

Sistema de diseño con tokens y componentes shadcn/ui.

Animaciones en cada interacción: text scramble, parallax, transiciones direccionales, cursor personalizado.

Supabase como CMS headless con fallbacks estáticos.

Floating CTA, formularios con rangos de presupuesto, links a WhatsApp.

Resultado

Sitio web SPA con 8 secciones en homepage y 7 páginas internas.

Splash screen, hero con text scramble, portfolio con hover effects, servicios con tags interactivos, timeline de estudio, equipo con grayscale a color, testimonios masonry, formulario de contacto con dropdowns customizados, y footer con redes. Desplegado en Vercel con headers de seguridad y cache agresivo.

Visuals

Homepage de Vorae Studio con identidad de marca en estética dark

Vista de escritorio del sitio con sección de servicios

Sección de portafolio en vista de escritorio

Vista móvil del sitio con navegación responsive

Detalle de tipografía y espaciado en móvil

Mockup de identidad de marca en material impreso

Artefactos del Sistema

Arquitectura de Páginas

Router principal que define las 8 rutas de la aplicación con transiciones direccionales (forward/back/neutral) y variantes de reduced-motion.

App.tsxtypescript

const routes = [
  { path: '/', element: <Home /> },
  { path: '/portfolio', element: <Portfolio /> },
  { path: '/servicios', element: <Servicios /> },
  { path: '/studio', element: <Studio /> },
  { path: '/contacto', element: <Contacto /> },
  { path: '/insights', element: <Insights /> },
];

// Transiciones direccionales: forward, back, neutral
// reduced-motion: sin animaciones, transición instantánea

Hook de Datos Supabase

Capa de abstracción que conecta Supabase con React Query, con fallbacks estáticos para cada tipo de contenido (proyectos, servicios, testimonios, filosofía, timeline, equipo, clientes, stats).

use-supabase-data.tstypescript

function useSupabaseData<T>(table: string, fallback: T[]) {
  return useQuery({
    queryKey: [table],
    queryFn: () => supabase.from(table).select('*'),
    placeholderData: fallback, // Fallbacks estáticos
    staleTime: 5 * 60 * 1000,
  });
}

Stack Tecnológico

React 18TypeScriptViteTailwind CSSSupabaseTanStack Querymotion (framer-motion)Radix UI + shadcn/uiMUIReact RouterVercel