Gallery

JavaScript Responsive Minimap

by Vanguardia · motionprompts.dev

A vertical thumbnail minimap (horizontal on mobile) whose framed indicator scrubs through 15 images as you scroll the wheel or drag on touch; a requestAnimationFrame loop lerps the strip toward its target offset, dims the thumbnail with the greatest overlap inside the indicator, and swaps that image into the large centered preview. Clicking a thumbnail eases the strip to center it with a slower lerp factor.

Type: Web motion
Framework: Vanilla JS
Trigger: wheel
Duration: 0.2–0.2s

Save with a free account Customize for your product

Live demo ↗

Motion spec · measured by motionprompts.dev

Engine: raf-lerp
Complexity: 2/5
Pinned: no
Reduced motion: not handled

Frame-rate-dependent exponential lerp (factor 0.075, or 0.05 during a click-to-center move) drives a thumbnail strip's translateX/translateY toward a target that wheel/touch deltas push by clamp(delta*0.5, -20, 20) per event and clicks snap to a centred plate; target is clamped to [-maxTranslate, 0]. The strip element with the greatest overlap against a fixed indicator box is dimmed to opacity 0.3 and swapped into the large preview. No tweening engine, no scroll space, no inertia beyond the lerp tail.

The build prompt

From motionprompts.dev

Creator's promptVanguardia · motionprompts.dev17,720 charsCustomize

# Responsive Minimap Image Scrubber (vertical strip on desktop, horizontal on mobile)

## Goal
Build a full-viewport gallery navigator where **a minimap of 15 s…

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.