Interaction
Hover Image Track
A horizontal track of images that follows the cursor velocity on hover.
by mcpSkills
Framework
nextjs
UI Library
shadcntailwind
Difficultyadvanced
English Prompt
Create a horizontal image track that responds to mouse position. The track should be wider than the viewport and translate horizontally based on cursor X position. Add skew/lean based on cursor velocity for a fluid feel. Use placeholder colored rectangles as images. Use JavaScript to map cursor position to track translation and Tailwind CSS. Place on a dark background.
Chinese Prompt
创建一个响应鼠标位置的水平图片轨道。轨道应比视口宽，根据光标 X 位置水平移动。根据光标速度添加倾斜/倾斜效果以获得流动感。使用彩色占位矩形作为图片。使用 JavaScript 将光标位置映射到轨道位移，Tailwind CSS 设置样式。放置在深色背景上。
Overview
An image gallery that feels like a physical film strip being pulled by the cursor. Great for portfolios and lookbooks.
Features
- Horizontal image track
- Cursor-position-driven translation
- Velocity-based skew
- Placeholder images
- Dark background
- JavaScript + CSS transform
Usage
Use for portfolios, photography sites, or product galleries.
Customization
Modify the prompt to:
- Add hover scale on individual images
- Use vertical track instead
- Add captions that fade in on hover
- Add inertia after mouse leaves