PS2 Web Experience is a fan-made browser interface simulation inspired by the atmosphere, startup sequence, typography, navigation patterns, and visual language of the PlayStation 2 era. It is designed as an interactive nostalgia piece rather than an emulator: visitors enter through a cinematic startup flow and arrive at a minimalist virtual dashboard with system-style controls.
This project does not ship with PlayStation BIOS files or commercial games. Use only legally owned software and content.
Experience the interface in your browser: ps2-webxperience.pages.dev 1
| Experience | Description |
|---|---|
| Intro screen | A focused landing screen with a glowing title, animated start control, and a clear fan-project notice. |
| Startup sequence | A staged boot experience with PlayStation 2-inspired branding and memory-card initialization messaging. |
| Virtual dashboard | A dark, atmospheric menu with disc browser, system configuration, run game, and system information entries. |
| Motion design | Smooth transitions, animated highlights, scanlines, glow effects, and a retro visual rhythm powered by Motion. |
| Audio feedback | User-interaction-aware sound initialization and interface feedback through the project sound service. |
| Responsive layout | A centered experience that adapts across desktop and smaller screens while preserving the original mood. |
| Browser-first | Built as a lightweight web experience that can be opened directly from a modern browser. |
| Layer | Technologies |
|---|---|
| Frontend | React 19, TypeScript, JSX |
| Build tooling | Vite 6, Tailwind CSS 4, TypeScript compiler |
| Interaction and motion | Motion, Lucide React |
| Audio and persistence | Project sound service and browser storage service |
| Deployment | Cloudflare Pages live deployment |
Install Node.js and npm before running the project locally.
git clone https://github.com/Quincunx33/PS2-WebXperience.git
cd PS2-WebXperience
npm installnpm run devOpen the local URL shown by Vite in your browser. The project script is configured to serve the development experience on port 3000.
npm run buildnpm run lint.
├── public/ # WebAssembly runtime, service worker, and PWA assets
├── src/
│ ├── components/ # Startup, dashboard, background, clock, and controller UI
│ ├── services/ # Sound and browser-storage services
│ ├── App.tsx # Intro → startup → dashboard application flow
│ └── index.css # Global visual styling and retro effects
├── docs/assets/ # README screenshots
├── index.html
├── package.json
└── vite.config.ts
flowchart LR
A[Intro Screen] -->|Start| B[Startup Sequence]
B -->|Complete| C[Virtual Dashboard]
C --> D[Disc Browser]
C --> E[System Configuration]
C --> F[Run Game]
C --> G[System Info]
This is an independent, fan-made interface simulation created for educational and nostalgic purposes. PlayStation and PlayStation 2 are trademarks of Sony Interactive Entertainment. This repository is not affiliated with, endorsed by, or sponsored by Sony Interactive Entertainment. Do not distribute or use copyrighted BIOS files, game images, or other proprietary content without the appropriate rights.
Ideas, visual refinements, accessibility improvements, and bug fixes are welcome. Please open an issue before starting a substantial change so the direction can be discussed, then submit a focused pull request with a clear description of the change.
No explicit open-source license has been added to this repository yet. Until a license is provided, the source remains all rights reserved by the repository owner. Please open an issue if you would like to discuss licensing or reuse.