## What this is

A standalone, cinematic web experience that runs on its own page. As the visitor scrolls, the camera drifts through a velvet-lounge Las Vegas backdrop while real show photography floats past at different depths, gold particles and flipping Workman Magic cards drift through the air, and a five-beat story leads to one clear conversion action. It is intentionally separate from the main marketing site — the main site should stay fast, direct, and SEO-focused; this page is the experiential showpiece you link to.

It is self-contained static files — HTML, JavaScript, and images. No build step, no server-side code, no database. Any standard web host (including cPanel file manager) can serve it.

## Package contents

`index.html` The experience itself. Open/serve this file.
`support.js` Runtime that renders the page (loads React + Babel from CDN). Keep beside index.html.
`image-slot.js` Drag-and-drop image component used for the photos.
`uploads/`The 4 local images used: background, logo, card artwork, and Chris finale photo.
`Developer-Handoff.html` This document.

## How to deploy

Upload the whole folder as-is to a subdirectory on the server, keeping the file structure intact (the files reference each other with relative paths).

    # Example: via cPanel File Manager or FTP
    public_html/experience/
      ├─ index.html
      ├─ support.js
      ├─ image-slot.js
      └─ uploads/ ...

Then the experience lives at `https://workmanmagic.com/experience/`. Point your existing “The Show” / “Enter the Experience” link there, or embed it full-screen inside another page with an iframe:

    <iframe src="/experience/" style="border:0;width:100%;height:100vh"
            allow="autoplay; fullscreen"></iframe>

Requirement: the page needs an internet connection at view time — it loads Google Fonts, the three.js 3D library (cdnjs), the YouTube reel, and the gallery photos hosted on workmanmagic.com. All are standard public URLs; nothing needs an API key.

## Configuration your developer can change

### 1 · Tickets mode vs. email-capture mode

The finale changes automatically. Add one line in the `<head>` of `index.html`, before `support.js`:

    <!-- Show is on sale -->
    <script>window.WORKMAN_TICKETS_ON = true;</script>

    <!-- No show currently on sale (collect emails instead) -->
    <script>window.WORKMAN_TICKETS_ON = false;</script>

- true → “View Show Dates & Tickets” + “Watch the Show Reel”.
- false → “Join the Magic List” email form (first name + email) + reel.

If the line is omitted, it defaults to tickets mode.

### 2 · The email form is front-end only

Action needed: in email-capture mode the “Join the Magic List” form currently just shows a thank-you message — it does not send the name/email anywhere yet. Wire the `<form id="magicForm">` submit (in `index.html`) to your email platform (Mailchimp, Klaviyo, ConvertKit, etc.) or a backend endpoint.

### 3 · Swapping photos

Each photo is an `<image-slot>` with a `src` attribute — just change the URL. Recommended: keep the same orientation as noted.

Slot id | Role in story | Orientation
--- | --- | ---
`chris-follow` | Scene 2 — the magician to follow | Portrait
`react-1` … `react-5` | Scene 4 — audience reactions at depth | Mixed (1,3,5 landscape · 2,4 portrait)
`chris-finale` | Scene 5 — hero shot by the call-to-action | Portrait

### 4 · Links & the video reel

- “Skip Experience”, the logo, and “View Show Dates” all link to `https://www.workmanmagic.com/live` — search & replace to change.
- The reel plays YouTube video `FNYalGnprTM` — change that id in `index.html` (search `onReel`) to swap the video.

## How it behaves (built-in)

- Skip Always-visible “Skip Experience” in the top nav.
- Progress Top gold progress bar + a scene rail on the right (desktop).
- Mobile Lighter particle counts, reduced depth, no mouse-parallax, simplified nav.
- Reduced motion Honors the OS “reduce motion” setting — calms animation and disables drift/flashing automatically.
- Performance Procedural effects (no heavy video); pauses the render loop when the tab is in the background.

## Technical notes

- Rendering: three.js r128 (3D atmosphere) + a CSS-3D perspective layer for the parallax photos.
- Fonts: Cormorant Garamond (display) + Jost (UI), from Google Fonts.
- No cookies, no tracking added by this page. Add your own analytics/GTM if desired.
- The card artwork floats using additive blending so only the gold reads against the dark scene.

## External dependencies (loaded at view time)

- fonts.googleapis.com / fonts.gstatic.com — typography
- cdnjs.cloudflare.com — three.js r128
- unpkg.com — React + Babel (via support.js)
- youtube.com — performance reel embed
- workmanmagic.com/wp-content/uploads — gallery photography