Amber - A Live Memory Collection
Year
2026
Client
Hidden Lake Studio
Service
- Product Design - Design Engineering - Interaction Design - Motion Design
Amber turns a static Figma frame into a living photo canvas, every drag, morph, and hover hand-built in the seams a static design can't show.
© Amber - A Live Memory Collection
From a single Figma frame to a fully interactive surface
The starting point was one frame from a "Home OS" Figma file — five floating polaroid-style cards on a warm peach gradient. I rebuilt it twice: first as a 1:1 static HTML port to verify visual fidelity against the source, then again as a React + TypeScript app where the cards became real, manipulable objects.
Every card carries inertia, snaps to a configurable dot grid, resizes from a corner handle, and has three states — normal, minimized to a small dot, and fullscreen — each with its own morph. Photos use a custom progressive blur so the top third stays sharp while the bottom fades into the warm overlay underneath. A sin-wave onboarding intro plays once on first load: wave, then dots, then dots expanding into full cards.
The work happens at the seams between design and engineering
Most of the polish lives in details that never make it into a static design file: a shared `layoutId` driving the dot↔card morph, a two-stage delete confirm in fullscreen, focus-renormalized z-indexes so dialogs always win, snap-to-grid implemented through `dragTransition.modifyTarget` so inertia naturally lands on the right point, and a hover-fade pattern that hides every chrome control — window dots, drag handle, action row — until the user reaches for them.
Built on React, TypeScript, Vite, Tailwind, framer-motion, and shadcn-style Radix primitives. Sourced from Figma via the design MCP, shipped through PRs, deployed to Vercel.
Nothing Phone 2(a)
Dataform