Moviio: A Pure CSS 3D Carousel Movie Explorer

#javascript #webdev #css #pwa

I wanted to build a movie discovery app that felt as cinematic as the films it showcases. So I created Moviio - a 3D carousel movie explorer powered by TMDB, built entirely with vanilla JavaScript and CSS (no frameworks, no carousel libraries).

The Core: A Custom 3D Wheel

The main feature is a 7-card 3D wheel. Each card is placed using CSS custom properties (--slot) and 3D transforms.

.card-0 {
  --slot: translateY(55px) translateX(-13px) rotate(-63deg);
}

.card-3 {
  --slot: rotate(0deg) scale(1);
}

.card.active {
  filter: grayscale(0%) brightness(1);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
  pointer-events: visible;
}

The center card pops with a parallax tilt effect that reacts to your mouse, and you can swipe, drag, or use arrow keys to rotate the wheel.

What It Does

Trailer Overlay

Click the active card to open a full-screen cinema view with YouTube trailers, runtime, cast, and director details.

Persistent Watchlist

Save favorites to localStorage. The Watchlist filter dims the carousel and shows an empty-state message when nothing is saved.

Auto-Rotate & Shuffle

Let the wheel spin automatically (pauses on hover) or jump to a random page of movies.

/?movie_id=...

Keyboard Shortcuts

← / → - Navigate the carousel
Enter / Space - Open the trailer
Escape - Close the overlay

The Backend (Simple)

API requests go through a Vercel serverless function (/api/tmdb.js) that acts as a proxy. This keeps my TMDB API key secure while forwarding the real status codes from TMDB.