Alexander Beck Studio Website

A simulation-led studio experience: React + Vite shell, Canvas 2D legacy runtime, performance-first physics.

Overview

This project powers an interactive homepage where motion, physics, and narrative mode transitions are part of the brand experience.

• 20 simulation modes across gravity, swarm/flow, elastic, fluid, optical, parallax, and 3D families
• 120Hz fixed-timestep physics with spatial hashing and optimized hot paths
• Curated production runtime; dev: React on 8012, preview on 8013
• Accessibility-conscious interactions and prefers-reduced-motion support
• Privacy-conscious defaults: no analytics; fonts load from Google Fonts on shipped HTML; optional tactile layer may use jsdelivr when enabled

Quick Start

npm run install:all   # first-time: root + react-app/app
npm run dev           # React dev server (8012)
npm run preview       # Serve React build (port 8013)

Open:

• React: http://localhost:8012
• Production preview: http://localhost:8013 (after npm run build)

Scripts

Command	Purpose
npm run startup	Interactive menu (recommended)
npm run install:all	Install all deps (root, react-app)
npm run dev	React dev server (8012)
npm run dev:react	React only (port 8012)
npm run build	React production build → react-app/app/dist/
npm run build:dev	React unminified build + sourcemaps
npm run preview	Serve React build (port 8013)
npm run clean	Remove react-app/app/dist

Core Experience

• Narrative mode cycling: Arrow-key progression through a curated sequence
• Physics realism: collision behaviors, wall response, and scene impact tuning
• Visual polish: wall wobble presets, grain, palette systems, and entrance choreography
• Audio feedback: synthesized impact sounds with velocity-based mapping
• Touch parity: mobile support with tuned depth and rounded-corner clipping

Developer Guide

Architecture

react-app/app/     # Primary: Vite React app (src/, public/, dist/)
docs/              # Development + reference docs

Edit react-app/app/src/ and react-app/app/public/ for the main site.

Engineering Constraints

• O(1) behavior in hot paths and no allocations inside core physics loops
• Preserve 60fps behavior across modes
• ES modules with explicit .js import extensions
• CSS token usage (tokens.css) over ad-hoc values
• Two-layer modal blur architecture is locked and must not be altered

Manual QA Expectations

Automated tests are currently disabled. Before shipping:

• Verify all 20 modes run correctly
• Check keyboard navigation and ARIA behavior
• Validate mobile behavior and visual clipping
• Confirm third-party behavior matches expectations (fonts; optional tactile CDN when on)

Integration Guide (Consumers)

Embed the runtime with:

<link rel="stylesheet" href="css/styles.css">
<link rel="modulepreload" href="js/shared.js">
<div id="bravia-balls">
  <canvas id="c" aria-label="Interactive bouncy balls physics simulation"></canvas>
</div>
<script type="module" src="js/app.js"></script>

For full setup and host-page constraints, see docs/reference/INTEGRATION.md.

Documentation

Project Docs

• docs/BACKLOG.md — consolidated backlog (BL-* audit items, FE-* PRD epics, DO-, XP-); start at Product view
• docs/development/DEV-WORKFLOW.md
• docs/reference/MODES.md
• docs/reference/CONFIGURATION.md
• docs/reference/INTEGRATION.md
• docs/reference/PORTFOLIO.md

Official References

• MDN: Canvas API
• MDN: Web Audio API
• MDN: JavaScript Modules
• WAI-ARIA Authoring Practices

Controls

Key	Action
→	Next simulation in narrative order
←	Previous simulation in narrative order
/	Toggle dev panel dock (dev server only)
R	Reset simulation

Contributing

1. Run npm run dev.
2. Make changes in react-app/app/ only.
3. Keep docs and behavior aligned (docs/ is authoritative).
4. Follow conventional commit style (feat:, fix:, perf:, docs:).

License

MIT. See LICENSE.