Lighting Lab

Lighting Lab is an interactive prototype for a programmable architectural lighting system wrapped around a stylized landmark tower.

It is intentionally not a replica of Tokyo Skytree or any other real-world structure. The tower, fixture layout, and runtime behaviors are fictionalized so the project can focus on interaction design, scene systems, scheduling, and presentation quality.

Overview

The current build includes:

• A stylized 3D tower rendered with React Three Fiber
• Individually addressable fixture nodes distributed across vertical rails
• A typed, data-driven scene system with layered effects
• Smooth scene transitions with fade and crossfade support
• A simple scheduler with current and next scene resolution
• Priority-based runtime overrides that automatically revert to schedule
• Safety guardrails for validation, fallback selection, brightness caps, and transition smoothing
• A public-facing control deck UI showing scene state, runtime mode, override status, and safety posture
• Progressive loading so the interface shell appears before the heavier 3D preview finishes initializing

Tech Stack

• React 19
• TypeScript
• Vite
• Tailwind CSS
• Three.js / React Three Fiber

Runtime Modes

Lighting Lab currently operates in three modes:

• Scheduled: the runtime follows the daily schedule and automatically resolves the active and next scene
• Manual: selecting a scene from the library pins that scene until the schedule is resumed
• Override: a temporary high-priority override supersedes both scheduled and manual playback, then returns to schedule automatically

System Highlights

Scene Engine

Scenes are fully data-driven. Each scene defines its own metadata, layers, effects, zones, and transition behavior in src/data/scenes.ts.

Scheduler

The scheduler resolves the current and next scene based on a simple daily time table defined in src/data/schedule.ts. This keeps the demo deterministic while leaving room for more advanced orchestration later.

Overrides

Override presets are defined in src/data/overridePresets.ts. Each preset has a target scene, duration, and priority so runtime interruptions behave predictably.

Safety

Before fixture values reach the renderer, the runtime can validate scenes, fall back to a known-safe scene, cap brightness, and smooth transitions to avoid abrupt changes.

Project Structure

lighting-lab/
  docs/
    architecture.md
    runtime.md
  public/
    favicon.svg
    icons.svg
  src/
    components/
      layout/
        AppShell.tsx
      sidebar/
        Sidebar.tsx
        SidebarSection.tsx
      tower/
        FixtureLayer.tsx
        TowerCanvas.tsx
        TowerCanvasLoading.tsx
        TowerModel.tsx
        towerConfig.ts
      ui/
        StatusPill.tsx
    data/
      overridePresets.ts
      scenes.ts
      schedule.ts
      systemState.ts
    hooks/
      index.ts
      useLightingSystem.ts
    lib/
      constraints/
        index.ts
      outputs/
        index.ts
      scheduler/
        index.ts
      scene-engine/
        effects.ts
        engine.ts
        index.ts
        transitions.ts
    types/
      scene.ts
      system.ts
      tower.ts
    App.tsx
    index.css
    main.tsx
  index.html
  package.json
  tsconfig.json
  vite.config.ts

Local Development

npm install
npm run dev

Then open the local Vite URL printed in the terminal.

Production Build

npm run build

Deployment

The repository includes a deploy script:

npm run deploy

The deploy workflow supports s3, ssh, and local modes through .env.deploy. Copy .env.deploy.example to .env.deploy if you want to override the built-in defaults or add optional settings such as CloudFront invalidation. If you already have a fresh dist/, you can also set LIGHTING_LAB_DEPLOY_SKIP_BUILD=true.

For deployment details, see docs/deployment.md.

Documentation

• Architecture
• Deployment
• Runtime behavior
• Website/project page copy

Current Status

The demo now feels complete as a public-facing prototype for scene playback, scheduling, overrides, and safety-aware rendering. Future work can focus on richer visualization diagnostics, output adapters, and deeper operational tooling rather than basic scaffolding.