iOS 26 Simulator · Liquid Glass

A 1:1 high-fidelity web simulation of iOS 26 with the new Liquid Glass design language. Runs in any modern browser — desktop & mobile.

✨ Features

System

• Lock Screen — liquid-glass wallpaper, live clock, swipe-up to unlock, flashlight & camera shortcuts
• Home Screen — paginated icon grid, glass Dock, Spotlight search, wiggle-to-edit mode
• Control Center — connectivity tiles, brightness/volume vertical sliders, quick toggles
• Notification Center — grouped notifications, clear-all, weather widget
• Siri — animated multicolor glass orb, real-time waveform, text conversation, speech synthesis, local smart replies
• Spotlight — app search with suggestions

Built-in Apps (all interactive)

App	Highlights
🎵 Music	Web Audio oscillator-driven playback, live spectrum visualizer, playlist
📷 Camera	Real getUserMedia viewfinder, 6 filters, front/back switch, saves to Photos
⚙️ Settings	Toggles, dark mode, brightness/volume sliders, wallpaper picker, sub-pages
🌤️ Weather	Current + 24h + 7-day forecast, animated gradient background
⏰ Clock	World clock / Alarms / Stopwatch (ms-precision) / Timer
🧮 Calculator	Full arithmetic (±, %, C/AC)
📝 Notes	Create / edit / delete, localStorage persistence
🖼️ Photos	Time-grouped grid, full-screen preview, favorite/delete
🛍️ App Store	Featured, search, install animation
📞 Phone / 🧭 Safari / 💬 Messages / 📅 Calendar / 🗺️ Maps / 👛 Wallet / 📹 FaceTime	Fully interactive

🚀 Quick Start

pnpm install
pnpm dev          # http://localhost:5173

Build & preview:

pnpm build
pnpm preview

🧱 Tech Stack (latest)

• React 19 + TypeScript 5.8 + Vite 7
• Tailwind CSS 4 (CSS-first @theme, no config file)
• Zustand 5 (with persist middleware)
• Motion 12 (motion/react) for gestures & spring animations
• React Router DOM 7
• lucide-react icons
• Node.js 22 LTS

📁 Project Structure

src/
├── device/       # Device shell, status bar, home indicator, wallpaper
├── system/       # Lock screen, home screen, control center, Siri, notifications
├── apps/         # 16 built-in apps
│   ├── music/ camera/ settings/ weather/ clock/
│   ├── calculator/ notes/ photos/ appstore/
│   └── phone/ safari/ messages/ calendar/ maps/ wallet/ facetime/
├── components/   # Reusable UI (AppIcon, Toggle)
├── store/        # Zustand stores (system, music, photos, notes)
├── hooks/        # useClock
├── data/         # App registry
└── lib/          # Utilities & formatters

🎮 Gestures

Action	Gesture
Unlock	Swipe up on lock screen
Open Control Center	Tap top-right edge
Open Notification Center	Tap top-left edge
Open Spotlight	Tap top-center / Search pill
Invoke Siri	Long-press right side button / tap Siri icon
Return to Home	Swipe up from bottom / tap home indicator
Close Siri	Tap ✕ / swipe down / tap bottom bar

📦 Deployment

This project includes a GitHub Actions workflow (.github/workflows/deploy.yml) that automatically builds and deploys to GitHub Pages on every push to main.

To enable:

1. Push the repo to GitHub
2. Go to Settings → Pages → Source = GitHub Actions
3. Push to main — the site goes live at https://<user>.github.io/iOS26-simulator/

📝 License

MIT