Hover effect

Inline Spot Hover Cards

by Vanguardia · motionprompts.dev

Headline with three inline dots that open into image cards on hover: the dot grows to a fixed card size while the photo fades and sharpens in; a GSAP ticker loop then lerps the card toward the pointer (drift clamped to a radius, tilt clamped to an angle) and moves the photo the opposite way, as if seen through glass, with an iridescent edge on the open card. Leaving collapses it back to a breathing dot. Desktop only.

Type: Web motion
Framework: GSAP
Trigger: hover
Duration: 0.25–0.75s

Save with a free account Customize for your product

Live demo ↗

Motion spec · measured by motionprompts.dev

Engine: gsap+raf
Easing: power3
Complexity: 2/5
Pinned: no
Reduced motion: handled
Libraries: gsap

ticker lerp of drift and tilt toward the pointer with a counter-moving image; size tween on enter/leave; slow hue rotation of the glass edge

The build prompt

From motionprompts.dev

Creator's promptVanguardia · motionprompts.dev8,356 charsCustomize

# Inline Spot Hover Cards — Dots in a Headline that Open into Pointer-Tilting Glass Cards

## Goal
Build a centred, heavy condensed headline (six lines) where t…

The build prompt

More like this

A one-line prompt for an inference startup launch

UX Decision Explainer Animation

Motion Design Showreel Reaction Video

SaaS launch video for a product Opus picks

Product video for Distilbook

Squad.so SaaS Launch Video

Fresh recipes, every week.