Moviio: Movie Discovery That Feels Like Theater
Scrolling through Netflix lists feels like drowning in options. You want discovery, not a catalog. You want motion, not static tiles. You want to watch a trailer right now, not hunt for the YouTube link.
Moviio is a movie discovery app powered by TMDB. Browse popular, top-rated, and upcoming movies in a smooth 3D cinematic carousel. Drag, swipe, or use arrow keys to move through seven cards at a time. Search instantly with debounce - no page reloads, just fluid filtering. Tap a movie and watch the official trailer in fullscreen with YouTube's no-cookie embed.
The carousel is custom-built with GPU-optimized transforms, no heavy carousel library. Preloads the next batch of movies so scrolling feels instant. Infinite pagination means you never hit a wall. All interactions happen client-side. TMDB API calls go through a serverless proxy for speed.
Try it live →
View on GitHub → (MIT licensed, open source)
The Design Problem Solved
Most movie apps are grids. Grids are fast to load and cheap to build. They're also boring. Moviio flips the model - seven cards visible at once, cinematic layout, smooth drag-and-drop navigation that feels responsive because it uses translate3d transforms rendered on the GPU, not the main thread.
Trailers load dynamically and play in a fullscreen overlay that feels like a theater experience. Auto-quality playback scales from HD to 4K. Search results cache client-side so repeat searches are instant.
What You Get
Filter tabs for Popular, Top-Rated, and Upcoming with an animated indicator that moves smoothly between them. Drag on desktop, swipe on mobile, keyboard arrows for accessibility - every input method works perfectly. Movie metadata displays rating, release year, language, and type. No accounts. No tracking. No backend UI complexity.
Run It Locally
bashgit clone https://github.com/byllzz/moviio.git
cd moviio
npm install
Add your TMDB API key to .env:
VITE_TMDB_API_KEY=your_key_here
bashnpm run dev
Open http://localhost:5173. The serverless API proxy handles TMDB calls securely.
Stack
React for components. Custom carousel engine with zero carousel libraries. TMDB API for movie data. YouTube IFrame API for trailers. Tailwind CSS for styling. GPU-optimized transforms for motion. Vercel for deployment.
If Moviio helped you discover your next favorite film, a ⭐ on GitHub means a lot.
What's the coolest movie you discovered on Moviio? Drop it in the comments ..
Top comments (0)