Dia de los Muertos — Oaxaca 2023
Photography-forward interactive web experience
Dia de los Muertos — Oaxaca 2023 is a custom Next.js (App Router) site that blends documentary photography with subtle motion design. Sections move from street life to candlelit cemetery vigils, with papel-picado overlays, and scroll-timed scenes. High-res assets live in Supabase Storage and are optimized through Next/Image with explicit sizes and responsive breakpoints. Under the hood, transform-only animations, debounced listeners, and careful layout primitives keep the experience smooth despite heavy media.
Overview
This project captures Oaxaca’s Día de los Muertos through portraits, street scenes, and nocturnal ceremonies. The goal was to let the images breathe while adding just enough motion to guide the eye and honor the festival’s energy.
A restrained, performance-minded animation system supports the photography: no heavy effects, just scene-scoped GSAP timelines and transform-only parallax.
Technical Architecture
- Next.js App Router + TypeScript for typed, modular page composition.
- Tailwind for consistent spacing and responsive utilities.
- GSAP + ScrollTrigger for timeline-based, scroll-driven animation.
- Supabase Storage + Next/Image for optimized, responsive media.
- Netlify for CI/CD and global caching.
Key Components
The hero stacks imagery and papel-picado overlays with subtle depth. Section templates standardize typography, grids, and captions across themes.
Performance Strategy
- Explicit image dimensions and stable aspect boxes to avoid layout shift.
- LQIP placeholders and responsive srcsets via Next/Image.
- Debounced scroll listeners; timelines paused when off-screen.
- Hardware-accelerated transforms (translate3d, will-change).
Challenges & Solutions
Heavy media risked jank and hydration drift. Standardizing container ratios, precomputing image sizes, and isolating animations per section kept the UI stable and silky.
Roadmap
- Toggle for EXIF/camera details per photo.
- Keyboard navigation and slideshow mode.
- Optional captions from a lightweight CMS.
- Export a curated PDF lookbook.
Locals & Face Paint
A portrait series focused on the people of Oaxaca—calavera makeup, handmade costumes, and the quiet pride behind each gaze. The copy and pacing invite viewers to linger rather than scroll.
Tech Stack & Architecture
| Category | Technologies |
|---|---|
| Framework | Next.js (App Router), TypeScript |
| Styling | Tailwind CSS |
| Animations | GSAP, ScrollTrigger |
| Media/Hosting | Supabase Storage |
Key Features
- - Layered video/imagery with papel-picado overlays and gentle parallax.
- - Scene-scoped GSAP timelines that guide attention without overpowering the photography.
- - Edge-to-edge grids with controlled whitespace and typographic rhythm.
- - Color palette echoing the holiday: marigold (#ffb300), crimson (#a50044), indigo (#2a2d74).
- - Transform-only animations (translate3d, will-change) to keep jank low.
- - Explicit image dimensions and stable aspect boxes to prevent CLS.
- - Debounced scroll listeners and route-level code splitting.
- - Themed sections for Locals & Face Paint, Street Processions, Markets & Altars, and Cemeteries.
- - Copy and pacing encourage lingering and contemplation over quick scrolling.
