Hover effect

Direction-Aware Hover Effect (JavaScript)

by Vanguardia · motionprompts.dev

A grid of labeled cells where a solid highlight block glides beneath the hovered cell, snapping to its exact bounds and swapping to a per-cell accent color. Driven by mousemove + elementFromPoint hit-testing and pure CSS transitions on transform/width/height/background (no GSAP).

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

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

CSS-transitioned highlight block snaps between hovered grid cells: transform/width/height/background-color all tween 0.25s ease from the previous cell's rect to the new one, so it reads as a single block gliding and resizing; on load it slides in from translate(0,0) at zero size to the first cell. Fully static under prefers-reduced-motion.

The build prompt

From motionprompts.dev

Creator's promptVanguardia · motionprompts.dev13,690 charsCustomize

# Direction-Aware Grid Hover Highlight

## Goal
Build a full-viewport, dark "tech-menu" page with a two-row grid of labeled cells (skill/technology tags like "(…

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.