Gallery

Pan-Canvas Video Gallery

by Vanguardia · motionprompts.dev

A full-viewport canvas holds an oversized 200vw x 200vh grid of film tiles centered with translate(-50%, -50%); on mousemove the gallery is translated the opposite way of the cursor relative to the container center, eased by a 2000ms cubic-bezier CSS transition, so moving the mouse smoothly pans across the grid. Each tile hover-fades its preview still out and a second frame plus a lower-third film credit in; fixed studio chrome (wordmark, nav, viewfinder corner brackets, pan hint) frames the canvas, and on touch devices the reel auto-drifts via a CSS keyframe animation with credits always visible.

Type: Web motion
Framework: Vanilla JS
Trigger: pointer
Duration: 2.4–52s

Save with a free account Customize for your product

Live demo ↗

Motion spec · measured by motionprompts.dev

Engine: css-transition
Complexity: 1/5
Pinned: no
Reduced motion: handled

cursor-inverse pan: mousemove writes an absolute translate() on an oversized canvas and a single 2000ms cubic-bezier(0.075,0.82,0.165,1) transition supplies all the inertia — no rAF loop, no lerp, no easing library

The build prompt

From motionprompts.dev

Creator's promptVanguardia · motionprompts.dev19,669 charsCustomize

# Build: Mousemove Pan-Canvas Video Gallery

## Goal

A full-viewport black canvas holds an **oversized 200vw × 200vh grid of media tiles**, centered so only th…

The build prompt

More like this

A pixel wizard casting spells

Rainbow Road Pixel Animation

One-File Generative Visual Demo

Pixel-art rabbit archer sprite animation loop

Vibe-Coded Pixel Wizard Game

Realistic 3D Taj Mahal Model

Fresh recipes, every week.