⚽ Headless Stadium

See the match from every seat.

A fully procedural 3D stadium seat-preview experience, built on Wix Headless — a completely custom three.js frontend driven by Wix commerce, events, and hosting.

▶ Live demo

---

Orbit a sunset arena in the middle of a procedural New York, click any of ~24,000 individually generated seats, and fly into a first-person view of the pitch from that exact spot — live scoreboard, animated players, price tiers, hover tooltips, and a real purchase flow. Every seat is one instance in a single draw call; every piece of business data flows through Wix.

Concept demo — the fixture, prices and seat availability are simulated. The checkout, event registration and hosting are real Wix Headless integrations.

Built on Wix Headless

The entire backend is Wix — no custom server, no database, no auth code. The frontend is a plain Vite SPA that talks to Wix through the Wix JavaScript SDK as an anonymous visitor:

Capability	Wix product	SDK module	In this repo
Visitor authentication	Wix Headless OAuth	@wix/sdk → OAuthStrategy	src/wix.js
Ticket catalog	Wix Stores (Catalog V3)	@wix/stores → productsV3	one product per price tier
Cart & checkout	Wix eCom	@wix/ecom → currentCart	"Buy this seat" → hosted checkout
Hosted checkout hand-off	Wix Redirects	@wix/redirects	ecomCheckout / eventsCheckout
Live event data	Wix Events (V3)	@wix/events → wixEventsV2	overlays title / kickoff / venue / prices
Ticketed reservations	Wix Events	@wix/events → orders	reserve → events checkout (opt-in)
Free registration	Wix Events RSVP	@wix/events → rsvpV2	"Watch it free at Wix Campus" modal
Hosting & deploys	Wix hosting	Wix CLI	npx @wix/cli release

Two checkout paths share one buySeat() entry point: the Stores path (active out of the box — each price tier is a Stores product), and the Events path (reserve a ticket definition, redirect to the Wix events checkout) which switches on automatically once a live event slug is configured. Both end on Wix's hosted checkout — no payment code in this repo at all.

The experience

• Orbit → select → preview: click a seat to see its card, click again to fly into a first-person view from that exact seat.
• Browse without leaving your seat: hover any seat you can see for its block / row / price tooltip, click it to hop straight there, or walk the bowl with the arrow keys.
• Hover tooltips with live tier, price and availability on all ~24,000 seats.
• Buy this seat → Wix hosted checkout with the tier's product in the cart.
• Watch it free at Wix Campus → a real Wix Events RSVP — name + email, registered against a live event, confirmation email included.
• Add to calendar → Google Calendar link or downloadable .ics invite.
• Live scoreboard and LED halo with the match clock running, animated players, tifo stripes in the stands, reduced-motion support, adaptive pixel-ratio quality.

Architecture

Module	Responsibility
src/data.js	Headless data layer — simulated defaults, overlaid with the live Wix Event
src/wix.js	All Wix SDK calls — live event read, RSVP, Stores/Events checkout
src/geom.js	Superellipse math, arc-length sampling, loop-strip geometry, seeded RNG
src/seats.js	Seat layout generation, instanced rendering, spatial-hash picking grid
src/stadium.js	Procedural scene: sky shader, pitch, bowl, roof, LED halo, scoreboards, players
src/ui.js	DOM chrome: fixture bar, legend, seat card, tooltips, watch-party modal
src/calendar.js	Add-to-calendar: Google Calendar URL + .ics generation
src/main.js	Renderer, orbit/seat state machine, camera flights, picking, keyboard

Implementation notes:

• Seats are two BoxGeometrys merged and drawn as a single InstancedMesh (one draw call for ~24k seats), colored per price tier with per-seat variation.
• Picking never raycasts the instances: the ray hits a coarse invisible bowl surface, then a spatial hash snaps to the nearest seat — O(1) per pointer move.
• The bowl is a superellipse (rounded rectangle) sampled by arc length so seat spacing stays uniform; aisles sit at fixed parameter angles so they align radially across rows.
• The data layer is swappable: fetchEvent() in src/data.js is the only place the presentation layer gets data from — it merges the live Wix Event over local art direction, and the rest of the app (legend, pricing, scoreboard, seat cards) adapts.
• Reduced-motion users get cuts instead of camera flights and no auto-rotate.

Getting started

npm install
cp .env.example .env   # set VITE_WIX_CLIENT_ID to your Wix Headless OAuth app id
npm run dev            # local dev server
npm run build          # static production build in dist/

Without VITE_WIX_CLIENT_ID the app still runs fully on the simulated event data — only the live Wix calls (checkout, watch-party registration) are disabled.

Deploy on Wix hosting

cp wix.config.json.example wix.config.json   # fill in your appId / siteId
npx @wix/cli@latest login
npx @wix/cli@latest release

The Wix CLI publishes dist/ to Wix's hosting/CDN and registers the deployed origin on your OAuth app automatically.

Connect your own Wix site

1. Create a Wix Headless project and an OAuth app — that's your VITE_WIX_CLIENT_ID.
2. Ticket sales (Stores path) — install Wix Stores and create one product per price tier, named to contain Halfway Club, Lower Bowl, Goal End, Upper Bowl (tiers link to products by name match).
3. Live match data + ticketed checkout (Events path, optional) — install Wix Events, create a ticketed event with those four ticket definitions, and set WIX_EVENT_SLUG in src/wix.js. Title, kickoff, venue and prices then come from the live event, and checkout switches to real ticket reservations.
4. Free watch-party (optional) — create a free RSVP event and set WATCH_PARTY_SLUG in src/wix.js; the registration modal wires itself up.

Controls

Action	Control
Orbit / look around	Drag
Zoom	Scroll / pinch / + −
Select a seat	Click
Preview from the seat	Click again, or "Preview this view"
Hop between seats	Click any visible seat, or arrow keys
Leave the seat	Esc or "Back to arena"
Buy the seat	Enter or "Buy this seat"
Reset view / auto-rotate	R / A

License

MIT — runtime dependencies: three.js (MIT) and the Wix SDK packages.