RVT.ai

Marquee: 3D Coverflow Carousel

by @rvtNo reviews yet0 sales

A cinematic 3D coverflow carousel for React: posters tilt in perspective, the backdrop recolours per title, a glass player bar plays ambient tones, and the active card flies forward to play a trailer.

Open live preview (opens in a new tab)Runs in a sandbox · no sign-up needed

Try it live

The real demo, running in a sandbox. Switch the screen size to see how it adapts.

About this item

Streaming apps sell with artwork. Marquee puts your posters on a curved, perspective stage: the centre title stands tall while neighbours tilt away, the whole background recolours to match the active poster, and a frosted player bar sits below. Press play and the active card retracts its neighbours, flies forward with a cursor-driven 3D tilt and plays its trailer in place.

Coverflow with real depth

Cards are positioned with 3D transforms, respond to drag, wheel, arrow keys and clicks, and each title brings its own accent colour and gradient backdrop.

Trailer mode and ambient audio

A choreographed sequence tucks side cards away and brings the active card forward with a pointer-tracked tilt to play a local video or a YouTube embed; a Web Audio engine generates soft ambient chords per title, no audio files needed.

Features

  • ✓3D coverflow carousel with perspective tilt
  • ✓Drag, wheel, keyboard and click navigation
  • ✓Per-title accent colours and animated gradient backdrop
  • ✓Trailer mode: side cards retract, active card flies forward
  • ✓Cursor-driven 3D tilt while the trailer plays
  • ✓Local video or YouTube-nocookie embed per title
  • ✓Frosted-glass player bar with play, previous and next
  • ✓Procedural ambient soundtrack via the Web Audio API
  • ✓Data-driven titles in a single movies.js file
  • ✓Plain CSS, React 19, no UI framework

What's included
Full JavaScript source code, package.json with locked dependencies, Vite config, RVT.ai README with setup and customisation guide, LICENSE and THIRD-PARTY-NOTICES.md. No node_modules: run npm install once.

Requirements
Node.js 20.19+ and npm 10+ to develop and build. The production build is static HTML, CSS and JavaScript that runs on any static host. No backend, API keys or paid services required.

Perfect for

  • Streaming and video-on-demand apps
  • Cinema, festival and event line-ups
  • Game libraries and launchers
  • Music, podcast and course catalogues

From download to production

  1. Download Marquee: 3D Coverflow Carousel from your account and unzip it.
  2. Run npm install, then npm run dev to open it locally.
  3. Swap in your brand colours, copy and data (see the README customisation guide).
  4. Run npm run build and deploy the dist/ folder to any static host.

Support and updates
Includes free updates and six months of RVT.ai support. Ask pre-purchase questions in the product Q&A, or open a ticket at https://rvt.ai/support with your order number.

Choose the license for your project

A Regular license covers a single end product that is not sold to end users. Choose Extended for a single end product that is sold to end users, including SaaS products and paid applications. Review the full license terms before checkout.

Features

  • 3D coverflow carousel with perspective tilt
  • Drag, wheel, keyboard and click navigation
  • Per-title accent colours and animated gradient backdrop
  • Trailer mode: side cards retract, active card flies forward
  • Cursor-driven 3D tilt while the trailer plays
  • Local video or YouTube-nocookie embed per title
  • Frosted-glass player bar with play, previous and next
  • Procedural ambient soundtrack via the Web Audio API
  • Data-driven titles in a single `movies.js` file
  • Plain CSS, React 19, no UI framework

Files included

  • Full source code (React + Vite)
  • README.md
  • LICENSE (RVT.ai)
  • THIRD-PARTY-NOTICES.md
  • package.json + package-lock.json

Version 1.0.0 and changelog

  1. Version 1.0.0

    Initial RVT.ai release.