Navigation

Download CV (in Spanish) ↓esen

Socials

GitHubLinkedIn
©Code by Bryan
esen

Xperiencia Creativa

Role

Front-end design and development

Type

Corporate website

Stack

Zu
View live ↗
Xperiencia Creativa

Live website for Xperiencia Creativa, a studio offering technology, design and corporate equipment, with an immersive 3D-driven home and a filterable project index.

ResultLive at xperienciacreativa.com.

The challenge

Present three very different business lines as one coherent story, and make it memorable without hurting load time on phones.

What I built

Next.js with React Three Fiber and GSAP: a particle intro, a fluid hero, a 3D cylinder to browse projects and scroll-driven storytelling. Mobile gets a lighter intro and the 3D journey only loads when its section approaches.

From the dark immersive intro into the light chapter of the site
From the dark immersive intro into the light chapter of the site
Services, with a 3D card for each discipline
Services, with a 3D card for each discipline
Clients arranged in a rotating 3D cylinder
Clients arranged in a rotating 3D cylinder
Project index with filters by service and sector
Project index with filters by service and sector
Case page for one of the studio’s projects
Case page for one of the studio’s projects
Intro on mobile
Intro on mobile
Projects on mobile
Projects on mobile

Highlights

  1. 01In production at xperienciacreativa.com
  2. 02Particle preloader and fluid WebGL hero
  3. 033D cylinder to browse projects and clients
  4. 04Project index with filters and case pages
  5. 05Lazy-loaded 3D and a lighter mobile intro

Built with

Next.jsReactTypeScriptThree.jsGSAPTailwind CSSZuZustand

Next case

DB Courier

All projects 3