Interactive office scene: cutout-based hero experience

[lukeinglis]

Vision

Replace the current harbor painting hero with an interactive office desk scene. The entire scene is a single rendered image with transparent PNG cutouts overlaid for each interactive object. Hovering an object triggers visual effects (brighten, scale, glow); clicking opens a popup or navigates.

Base Image

design/office-scene-concept.png (1672x941) — a rendered office with personal items representing career, interests, and personality.

Dynamic Content Areas

These objects have blank/empty screens that will render live content:

• Work Laptop — work projects/content
• Personal Laptop — personal projects/content
• TV — TBD
• Window/Monitor — time-of-day/weather scenes (separate scene images in design/scenes/)
• Photo Frames — TBD

Interactive Objects (minimum)

Object	Filename
Work Laptop	work-laptop.png
Personal Laptop	personal-laptop.png
TV	tv.png
Window/Monitor	window.png
Photo Frames	photos.png
Sticky Notes	sticky-notes.png
Business Card	business-card.png
Research Paper	research-paper.png
Newspaper	newspaper.png
iPhone	iphone.png
Headphones	headphones.png
Diploma	diploma.png
Nintendo Switch	switch.png

Steps

1. Figma cutouts — Trace and export each object as a transparent PNG (guide at design/figma-cutout-guide.md)
2. Scene component — OfficeScene.tsx layers base image + cutouts, handles positioning and hover effects
3. Interaction layer — Wire up popups/modals for each object
4. Dynamic content — Render content into laptop screens, TV, window, photo frames
5. Window scenes — Time-of-day/weather-driven scene images for the window area

Notes

• There will also be scrollable content below the scene
• Approach mirrors the F1 Fantasy garage scene (~/projects/personal/f1-fantasy)