Moonlight Footer: Rive State Machine, UI Design & Frontend Build

Moonlight is a fictional film-production platform. Its footer is an interactive Rive build — clapperboard, click‑clap sound, directional hover underlines, page‑load stagger, and atmospheric light — designed, animated, and shipped end‑to‑end. Cinematic, atmospheric, filmic.

Live demo: clapperboard-project.vercel.app

The centerpiece is a clapperboard rigged in Rive, driven by a nested state machine with a pointer listener for the click‑to‑clap. The audio is bound inside the state machine itself — the slap of the slate is part of the animation timeline, not a separate page‑level effect. ViewModels are wired with autoBind, and the canvas reads the artboard bounds at runtime so the rig adapts cleanly across screen sizes.

Every nav column has its own underline behavior. Left columns wipe left‑to‑right on enter, right columns wipe right‑to‑left, the middle pair erases from the center on exit. The directional logic mirrors the visual gravity of the centered layout — pure CSS, no animation library.

The 3×2 column grid collapses to 2×3 on narrow phones. Content stays centered, the clapperboard scales with the artboard's intrinsic aspect ratio, and god rays follow the corner regardless of viewport.

A self‑initiated end‑to‑end build that ties together three disciplines I work across:

- Rive — clapperboard rig, nested state machine, pointer listener, audio binding, ViewModels with autoBind, runtime bounds reading.

- UI design — centered‑stack layout, type system, spacing rhythm, dark cinematic palette.

- Frontend — hand‑authored HTML/CSS/JS (built with Claude Code as a pair‑coding assistant), deployed on Vercel via GitHub.

If you're building something cinematic and want it to feel alive in the browser — interactive Rive plus the design and frontend to ship it — let's chat.

→ Live demo: [clapperboard-project.vercel.app](https://clapperboard-project.vercel.app