Playstation 4 Dashboard Website

Playstation 4 Dashboard Website

Built as a nostalgia project to practice motion design. I wanted the page to feel like flipping through console tiles with depth, glow, and smooth focus states.

Modeled the tile rail, quick actions, and details drawer. Added keyboard navigation to mimic controller input, layered gradients for the hero background, and kept the codebase lean with Vite + TypeScript.

Key Features

• Recreated the PS4 tile rail with focus rings, parallax, and quick-info cards.:
• Keyboard navigation mimics a controller D-pad, keeping interactions snappy.:
• Lean asset pipeline with Vite keeps reload times low while tweaking animations.:

Learnings

• Console UIs rely on strong focus states; reinforcing them with color + scale helps accessibility too.
• Framing motion early (durations, easing) avoids a patchwork feel later.
• Even playful clones benefit from predictable state machines to avoid weird focus traps.