Motion-Led Studio Website: Front-End Build (Demo)

Concept demo built to a brief, with a fictional studio and sample data. Not client work. The demo is live: https://demos.mc.mightyhouseinc.com/halvetide-studio/

Five pages for a fictional multidisciplinary audiovisual studio: Home, About, Projects, Contact and a Studio CMS.

Twelve interactions, including reactive SVGs, click-triggered animations, hover video previews, animated project filters and small micro-interactions.

The project filters reflow with FLIP, so cards travel to their new positions instead of jumping.

Each project card plays a short silent clip when the pointer rests on it.

The Studio CMS edits content/projects.json in the browser, shows a live preview and downloads the file, so the team can update projects.

Every duration, easing curve and distance lives in one motion table that generates the CSS tokens and the motion code, so the direction and the build cannot drift apart.

With prefers-reduced-motion the page gives the same information without large movement.

Build: hand-written HTML, CSS and JavaScript with no framework and no outside libraries. The site, the SVGs and the clips are generated by one deterministic Python script; two runs produced identical files. Measured headless: no sideways scrolling at 390 px or 1440 px, first content at 40 ms and first image at 15 ms on the Home page.