Video Jumble is a web-based interactive experiment that takes a live feed from your device's camera, splits it into a 4x4 grid of "chunks," and allows you to shuffle or reset their order. It leverages modern web APIs like getUserMedia for camera access and the View Transition API for smooth, animated reordering.
- Live Camera Integration: Automatically requests access to the user's front-facing camera.
- 4x4 Interactive Grid: Dynamically generates 16 video elements, each displaying a different section of the live stream.
- Animated Shuffling: Randomly reorders the grid chunks with smooth animations using the View Transition API.
- One-Click Reset: Restores the video chunks to their original positions.
- Responsive Orientation Support: Automatically updates the aspect ratio and restarts the stream when switching between portrait and landscape modes on mobile.
- Dark Mode Support: Styled for both light and dark system preferences.
- HTML5: For structuring the web page.
- CSS3: For styling and animations.
- Build Tool: Vite (using rolldown-vite).
- Language: TypeScript.
- Tooling: Biome for linting and formatting.
- Package Manager: pnpm.
- Node.js: (Version compatible with your environment).
- pnpm: Recommended for dependency management.
-
Installation Clone the repository and install the dependencies:
```bash pnpm install ``` -
Development Run the development server locally:
pnpm run dev ``` -
Testing on Mobile (iPhone/Safari) To access the camera on mobile devices, the application must be served over HTTPS. If you are using ngrok, start your local server and then run:
ngrok http 5173
Ensure your vite.config.ts includes your ngrok URL in the allowedHosts list to prevent connection errors.