Vorae Studio | qevstudio.com

Problem

A creative design studio needs a website that is itself a case study.

This wasn't just "having a page" — it was building an experience that communicates a distinctive visual identity (glitch effects, custom cursor, text scramble, parallax), dynamic content managed from Supabase, multiple conversion journeys with contextual CTAs, and performance with accessibility (progressive splash screen, reduced-motion respect, loading states). The site had to work as a business tool, conversion-oriented with contact forms, budget ranges, and direct WhatsApp.

Process

Architecture

SPA with React + React Router, separate pages for Home, Portfolio, Services, Studio, Contact, Insights, and Legal. Directional page transitions.

Design System

Design tokens (color, typography, spacing) and reusable components with shadcn/ui as the base.

Animations

Text scramble in the hero, parallax in sections, directional transitions, custom cursor. Every interaction has visual feedback.

Backend

Supabase as headless CMS for projects, services, testimonials, philosophy, and site settings. Static fallbacks for offline connections.

Conversion

Floating CTA on scroll, contact forms with budget ranges, direct WhatsApp links.

A website that doesn't just list services — it demonstrates design capability through the experience itself.

Build

SPA with React 18 + React Router and 7 internal pages.

Design system with tokens and shadcn/ui components.

Animations on every interaction: text scramble, parallax, directional transitions, custom cursor.

Supabase as headless CMS with static fallbacks.

Floating CTA, forms with budget ranges, WhatsApp links.

Outcome

SPA website with 8 homepage sections and 7 internal pages.

Splash screen, hero with text scramble, portfolio with hover effects, services with interactive tags, studio timeline, grayscale-to-color team grid, masonry testimonials, contact form with custom dropdowns, and social footer. Deployed on Vercel with security headers and aggressive caching.

Visuals

Desktop view of the site with the services section

Mobile view of the site with responsive navigation

System Artifacts

Page Architecture

Main router defining the app's 8 routes with directional transitions (forward/back/neutral) and reduced-motion variants.

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

Supabase Data Hook

Abstraction layer connecting Supabase with React Query, with static fallbacks for every content type (projects, services, testimonials, philosophy, timeline, team, clients, 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,
  });
}

Tech Stack

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