Developer Handoff & Design Notes

Workman Magic LIVE — The Show

Immersive, scroll-driven 3D experience for the /live show page.

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.htmlThe experience itself. Open/serve this file.

support.jsRuntime that renders the page (loads React + Babel from CDN). Keep beside index.html.

image-slot.jsDrag-and-drop image component used for the photos.

uploads/The 4 local images used: background, logo, card artwork, and Chris finale photo.

Developer-Handoff.htmlThis 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

Workman Magic LIVE — “The Show” immersive experience. Static files, no build step. Questions on any of the above? The relevant markup is all inside index.html.