WAW Music 2026.

Background

WAW Music, second edition. Music festival in Martinique, July 1st 2026.

I built the first edition's website — a standard WordPress setup, clean, did the job. The team reached out again with one word stuck in their heads: "immersive". They wanted people to feel the festival just by scrolling.

WordPress stays on the backend (the team knows it, no reason to force them onto something new), but the frontend moves to Next.js. The site isn't a page you read anymore — it's a stage you walk into.

How it went down

Edition 1 — Standard WordPress, clean. Functional but flat. It informed, it didn't make you feel anything.

The callback — The team came back with a short brief. The word "immersive" showed up in every sentence. The site had to make you want to be there before you even bought a ticket.

Architecture overhaul — Kept WordPress as the backend because the team already knew how to use it. But I went full headless. Built a custom plugin "WAW Starter": modules, CPT, REST endpoints, admin interface rebuilt from scratch.

Next.js frontend — Next.js 16, React 19, Framer Motion. 8-layer parallax hero, 3D cards, glassmorphism, everything animated on scroll. The kind of thing where every section is designed to trigger a feeling.

Now — The site lives until the festival. Team adds DJs, updates the lineup, activates ticketing — everything goes through the backend.

The Parallax Hero

The centerpiece. A full-screen tropical scene (125vh) where scrolling doesn't scroll — it animates.

The idea: zooming out of the jungle

On load, you're inside. Foliage everywhere, you can barely see. As you scroll, leaves part, clouds recede, the sun rises — the scene opens up. You go from inside a jungle to an overview. Content appears below.

Technically, the content is position: sticky; height: 100vh. The scene stays fixed while scroll drives animations via useScroll + useTransform.

8 layers, back to front

1. Background (z-0) — Lime green → mint gradient + animated grain (SVG filter)
2. Sun (z-5) — Top right corner, 45-55vw, enters at scale 1.5 then recedes on scroll
3. Clouds (z-7/8) — 5 clouds with autonomous CSS keyframes
4. Particles (z-15) — 30 (10 on mobile) with organic looping trajectories
5. Logo + CTAs (z-20) — Center, 80vw, Tickets and Contact buttons
6. Back foliage (z-42) — Background vegetation, 70% opacity
7. Main foliage (z-46-50) — ~15 elements framing everything, part on scroll
8. Foreground leaves (z-52-58) — Desktop only, using blur(1px) to create depth of field

The clouds

5 total, each moving at its own pace:

• Main left — 32vw, cloud-drift
• Secondary left — 25vw, desktop only, 60% opacity
• Center-top — 22vw, horizontally mirrored, cloud-drift-reverse
• Top right — 28vw, mirrored, 80% opacity
• Bottom right — 20vw, desktop only, cloud-drift-slow

On scroll they rise, shrink, and fade out.

The foliage — the heavy lifting

~15 vegetation elements. This is what makes the scene work.

Lateral (left + right, mirrored):

• 3 depth levels per side
• Overflow the viewport at bottom (-15% to -10%) and sides (-8%)
• On scroll: part outward (x → ±100%), descend, rotate (±15deg), shrink

Center (desktop):

• 7 elements filling the bottom of the screen
• Part and descend on scroll

Foreground (large screens only):

• 3 proximity levels, progressively responsive
• Closest ones are blurred (blur-[1px]) — simulates depth of field like a real lens
• Lateral translation up to ±150%
• React first to scroll (over 40% of travel vs 60% for mid-range elements)

Entry sequence — over 1 second

Elements appear in a specific order:

• 0.1s — Sun (scale 1.5 → 1, y -30% → 0)
• 0.2s — Clouds (slide from top)
• 0.4s — Logo + CTAs (scale 0.8 → 1, fade in)
• 0.5s — Foliage (reduced scale → 1)
• 0.6s — Particles (fade in)
• 1.0s — Scroll indicator (last to appear)

Same easing everywhere: [0.16, 1, 0.3, 1]. A strong ease-out that feels organic.

The rest of the site

3D DJ Cards

Each DJ gets a card that flips: front (photo, name, genres), back (bio, links). A bokeh effect follows the cursor.

SoundCloud opens in a Dialog on desktop, Drawer on mobile. Different interaction, same info.

The palette

Pulled from Martinique. Not the pastel clichés — colors with actual character.

• Emerald green (#086553) — main text
• Turquoise (#35c8b5) — primary color
• Lemon yellow (#ede329) — accent, the sun hitting hard
• Lime green (#e1fcc7) — light surfaces

Dark mode flips everything: pine green background, light lime text. Both work.

Visual effects

• Glassmorphism: semi-transparent bg + backdrop-blur, 3 variants
• Grain: animated texture via SVG filter, everywhere
• Text glow: glow on headings
• Holographic shine: animated yellow-turquoise gradient on certain elements

Architecture

App Router with route groups to handle states:

• (site)/ — main pages, Header + Footer
• (countdown)/ — pre-launch waiting
• (maintenance)/ — maintenance mode
• (legal)/ — legal notices, privacy

A proxy intercepts requests and redirects to /countdown or /maintenance based on what the WordPress API returns. The dev.waw-mq.com subdomain bypasses these checks for testing.

6-section long-scroll

1. Parallax Hero — The entrance, 8 layers
2. The Concept — Art direction, villages (Food Court, Drink Experience), promo video with mute toggle, Instagram sharing via Canvas API
3. Line-Up — DJ + Artist grids
4. Ticketing — Bizouk iframe (conditional based on API)
5. Partners — Infinite marquee (grayscale → color on hover)
6. Contact — Form, 5 subjects

The backend

Headless WordPress with the "WAW Starter" plugin.

What the team manages without me

• Opening date: controls countdown and switch to live mode
• DJs / Artists / Partners: add, edit, delete
• Ticketing: Bizouk iframe config
• Contact / Food apply: form submissions
• Maintenance: on/off
• Newsletter: pre-launch signups
• Logos: black/white/color variants

The admin interface is custom — Vercel-inspired, nothing from the original WordPress admin. Team handles everything without touching code.

Perf & Accessibility

Performance:

• Sun and main foliage use priority / fetchPriority="high", rest is lazy
• Particles reduced to 10 on mobile
• Blur and animations simplified on mobile
• Cache: assets and fonts = 1 year (immutable)

Accessibility:

• prefers-reduced-motion: animations disabled, elements static
• aria-hidden="true" on decorative images
• pointer-events-none on decorative layers so they don't block clicks
• Text set as sr-only in the logo for SEO

SEO:

• JSON-LD: MusicEvent + VideoObject
• Server-side generated OG image
• Dynamic XML sitemap and robots.txt

Typography

Four families:

• SquidBoy — titles, custom local font
• Gotham Rounded — body text, 4 weights
• Binford — decorative/script for baselines
• Source Code Pro — monospace

V1 vs V2

The site lives until July 1st. It moves, it evolves with the lineup. But the foundation is laid: something that makes you feel the event before you're there.