Inline Spot Hover Cards
What it does
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.
How it's built
| Category | hover |
|---|---|
| Tech | gsap |
| Complexity | widget |
| Performance cost | light |
| Mobile-safe | desktop-first |
Rebuild it with AI
This component's prompt is part of the paid library. Below you can read how it starts; the full prompt, the exact structure, timing and easing an AI agent needs to rebuild the effect, unlocks with any paid plan, yearly or lifetime.
# 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 three of the lines contain an **inline square dot** between two words. Each dot is a folded **photo card**: on hover it **grows from 0.4em to an 18×14rem card**, its photo **fades in while sharpening from a blur**, an **iridescent glass edge** lights up, and a per-frame loop makes the card **drift toward the pointer** (clamped to a 25px radius) and **tilt on both axes** (clamped to ±20°) while the photo inside **moves the opposite way**, like looking through a lens. Leaving shrinks it back to a dot that gently "breathes". Desktop only (≥1000px). GSAP core.
## Tech
Vanilla HTML/CSS/JS with ES module imports. `gsap` (npm), no plugins. Font: **Barlow Condensed** 900.
## Layout / HTML
```html
<div class="is">
<section class="is-stage">
<h2 class="is-headline">
<span class="is-line">We frame the</span>
<span class="is-line">
…Premium prompt
Unlock this prompt, and every other one
From $99/year, or $139 once for lifetime access. Commercial license included.
See pricing Or start with the free set Already bought? Sign in