# Glowing Border Card Hover Effect

> One holographic light shared by a whole grid of cards: the borders nearest your pointer turn to iridescent foil with a white specular, neighbouring edges catch it, and a featured card carries a travelling foil beam.

Canonical: https://gsapvault.com/effects/glow-border-cards
Live demo: https://gsapvault.com/demos/glow-border-cards/index.html

| Property | Value |
|----------|-------|
| Type | effect |
| Tier | paid |
| Price | £10 |
| Difficulty | intermediate |
| Plugins | Core GSAP only |
| Techniques | hover-effect, pointer-tracking, custom-properties, micro-interaction, velocity-reactive |
| Uses Lenis | No |

## Lighthouse, as measured

Google Lighthouse on the demo, 8 October 2026. A measurement of the demo as shipped, not a promise for your page.

| Category | Score |
|----------|-------|
| Accessibility | 100 |
| Best practices | 100 |

No performance score is published: it depends on the deployment (server compression, caching, CDN, connection and device) rather than on the code, so measure it where it will live.

## Overview

A holographic border hover effect for feature grids, pricing tables and dashboards. Instead of lighting one card at a time, a single light travels across the whole grid. The border segments closest to the pointer turn to iridescent foil, a prism of pink, gold, mint, sky and violet over brushed silver, with a white specular where the edge is nearest. The foil fades along each edge, so the cards beside the one you are over catch it too, and it blooms softly onto the page with fine glitter drifting through it.

The hues shift as the light moves. Whip the pointer across the grid and the colours sweep round and the glare blooms, then settle. Inside the hovered card a soft spotlight sits under the content. One featured card carries a foil beam that travels round its border at rest and laps it once when it is clicked or reached with the keyboard.

## Features

- One light shared across every card, lighting neighbouring edges as well as the hovered card
- Holographic foil edge: a prism dodged over brushed silver, with a white specular nearest the pointer
- Hues shift with the light's position; a fast whip sweeps them round and blooms the glare
- Soft bloom and drifting glitter outside the lit edges, plus a spotlight under the hovered card's content
- Travelling foil beam on a featured card, with a fast lap on click or tap
- Keyboard focus parks the light on the card and sends the beam round once
- Five foil hues and the silver set from CSS custom properties
- Still foil highlight under reduced motion and without JavaScript, plus complete teardown

## Use Cases

- SaaS feature grids that need a premium hover without moving the layout
- Pricing tables where a featured plan carries the orbiting beam
- Dashboard tiles and integration directories on dark interfaces

## Vibe-Code Ready Setup

This effect includes `START-HERE-AI.md`, a product-specific copy-paste setup prompt for Cursor, Claude Code, ChatGPT, GitHub Copilot, Windsurf, and other coding assistants. It tells the assistant to inspect the existing stack, integrate the supplied files, preserve the design, scope selectors, retain accessibility and responsive behaviour, add framework-appropriate GSAP cleanup, and report what it tested.

[How AI-assisted setup works](https://gsapvault.com/vibe-coding)

## How It Works

The light is drawn entirely in CSS. Each card has a thin ring over its border filled with a prism grating colour-dodged onto a silver gradient, with a white specular on top, faded with distance from the shared light. Behind each card a bloom carries the same hues and two drifting glitter fields, and a conic gradient in the border draws the beam. GSAP smooths the light so it trails the pointer slightly, turns its speed into the hue sweep and glare, runs the beam's orbit and laps and the glitter clock, switches to the still version for reduced motion and removes everything cleanly on teardown. The cost stays the same however many cards the grid holds.

## Documentation

How this effect works and how it goes into a page. The reference you use once you own the files (worked examples, events, the programmatic API, the class list) ships with the download.

### Quick Start

**1. Add to your HTML `<head>`:**

_Code snippet omitted: it ships with the download._

**2. Add before the closing `</body>` tag:**

_Code snippet omitted: it ships with the download._

**3. Mark up the grid and its cards:**

_Code snippet omitted: it ships with the download._

### Using It With Your Own Design

**What the effect needs from your markup:** one container with `data-glow` and any number of descendants with `data-glow-card`. The cards can sit in any layout (CSS grid, flex, a masonry list); the light is positioned from where each card really is. Give at most a couple of cards `data-glow-featured` for the orbiting beam. Links or buttons make the best cards because they are focusable, and focus drives the keyboard version of the effect.

**What is only the demo's styling:** everything under the `DEMO` heading in `style.css`: the Inter face, the page colours, the three-column grid, the icon tiles, the card padding and the cue line. Delete it and style the cards however you like.

**CSS the effect depends on:** the `EFFECT` block at the top of `style.css`. Cards need a border radius of your choice and nothing on `::before` or `::after`: `::before` is the foil ring, `::after` is the bloom and glitter behind the card. The effect owns each card's `border` (transparent, `--glow-width` wide) and `background` (fill, spotlight, beam and hairline), so set the fill with `--glow-card` rather than `background`. Cards are `position: relative`, and the container has `isolation: isolate` so the bloom stays above your section background. The bloom reaches `--glow-bloom` past the outer cards; if the container sits against a scrolling edge, give a parent `overflow: clip`.

#### Restyling the light

Set these custom properties on the `[data-glow]` container, or on a single card to override it there:

| Property | Default | What it controls |
|---|---|---|
| `--glow-c1` to `--glow-c5` | pink `#ff5ca8`, gold `#ffc36a`, mint `#8dfcc8`, sky `#63b8ff`, violet `#b47cff` | The foil's five hues, in order round the prism. They colour the lit edge, the bloom, the spotlight and the beam |
| `--glow-metal-hi`, `--glow-metal-lo` | `#a9afba`, `#3c4049` | The brushed silver the hues are dodged over. Brighter metal reads whiter and more chrome; darker reads more saturated |
| `--glow-width` | `2px` | Thickness of the border, the foil ring and the beam |
| `--glow-bloom` | `30px` | How far the foil spills outside each card onto the page |
| `--glow-card` | `#1c1c1c` | Card fill |
| `--glow-hairline` | `rgba(241, 239, 234, 0.1)` | The resting border |

A cooler, chrome-leaning foil:

_Code snippet omitted: it ships with the download._

### Options

| Attribute | On | Values | Default | Description |
|---|---|---|---|---|
| `data-glow` | container | present | | Turns the effect on for this group of cards |
| `data-glow-card` | card | present | | A card that catches the light |
| `data-glow-featured` | card | present | | Adds the orbiting border beam |
| `data-glow-reach` | container | px | `220` | How far the light reaches from the pointer |
| `data-glow-intensity` | container | `0` to `1` | `1` | Scales the light, spotlight, speed stretch and beam together |
| `data-glow-beam` | container | `0` or `1` | `1` | `0` stops the autonomous motion: the travelling beam and the glitter drift (featured cards then light like the rest) |

### Interaction

- **Pointer:** the light follows with a slight trail and the foil's hues shift as it moves. Speed stretches it along the direction of travel, sweeps the hues round and blooms the white glare; both settle as you slow down. Leaving the container fades it out over about 400ms.
- **Click or tap:** the beam laps the card once, fast, as press feedback.
- **Keyboard:** tabbing to a card parks the light on it, raises its spotlight and sends the beam round once. The light stays parked until focus moves on.
- **Touch:** tapping lights the card from the tap point and the light decays. A sideways drag carries the light; vertical drags still scroll the page. The featured beam keeps orbiting.

### Accessibility

- **Reduced motion:** no beam orbit, glitter drift, trail, hue sweep or stretch. Hover and keyboard focus park a still foil light on the card's top corner, and the featured card shows a still beam.
- **No JavaScript:** the same static version as reduced motion. All content is plain markup and always visible.
- **Focus:** cards keep a visible focus ring in addition to the light.
- **Contrast:** the light sits on the border and the spotlight stays faint, so text keeps its contrast at the brightest moment. In the demo the muted copy measures 6.2:1 and titles 12:1 beside the peak glow.
- Both glow layers are pseudo-elements: nothing is added to the accessibility tree.

### Performance

The light is a few custom properties on the container, written once per frame only while the light is visible or moving. Each card works out its own glow in CSS, so the per-frame cost does not grow with the number of cards. The foil, glitter and bloom are gradient layers; the only filter is a hue rotation on the two lit layers. Card positions are measured on resize, and a scroll only updates the container's position. While the grid is off screen nothing runs, including the beam.

### Browser Support

Uses CSS masks with compositing, `color-mix()`, `background-blend-mode`, conic gradients and a `hue-rotate()` filter: current Chrome, Edge, Firefox and Safari 16.2+. The beam angle is written by the script every frame, so the orbit does not depend on `@property` support.

### Dependencies

**Required:**
- GSAP 3.12+ (core only, no plugins). The demo is built against 3.15.0.

## What You Get

- `index.html`: working demo page
- `assets/script.js`: commented, readable source
- `assets/style.css`: effect styles
- `README.md`: full documentation with examples and framework integration notes
- `START-HERE-AI.md`: product-specific copy-paste prompt for AI-assisted setup
- `LICENSE.txt`: standard license terms
- Lifetime updates: re-download anytime from your library

## Get the Code

This is a premium effect. The standard license costs £10 one-time and covers unlimited personal and commercial projects with no attribution required for our code. Bundled third-party assets retain their own licences and attribution requirements. The only restrictions: no redistribution of the code itself and no competing effect libraries.

- [Buy Glowing Border Card Hover Effect](https://gsapvault.com/effects/glow-border-cards)
- [The Vault (£99 one-time, best value): every collection in the Vault library, plus future items added to those collections](https://gsapvault.com/effects)

## Judge the Code Quality First

These related effects are free with complete source published, written to the same production standard (cleanup functions, reduced-motion support, framework-agnostic):

- [Hover Underline](https://gsapvault.com/effects/hover-underline.md): Four material link underlines (an exit-through line, marker sweep, hand-drawn wave, and an endlessly travelling wave) with coordinated type and active-index responses.
- [3D Card Flip Gallery](https://gsapvault.com/effects/3d-card-flip.md): Tactile GSAP 3D cards with deep perspective, reactive edge lighting and shifting shadows. Flip on hover, keyboard focus or tap, with grouped auto-close.
- [Tailwind Component Remixer](https://gsapvault.com/effects/tailwind-class-playground.md): Generate fresh Tailwind component recipes with procedural SVG artwork, coordinated colour palettes and animated GSAP layout transitions.

---

From [GSAP Vault](https://gsapvault.com): production-ready GSAP animation effects. Full catalog for agents: https://gsapvault.com/llms-full.txt