# Directional Hover Fill

> An ink fill that enters where your pointer arrives, bows into the surface and drains through the edge you leave. Text stays perfectly still.

Canonical: https://gsapvault.com/effects/directional-hover-fill
Live demo: https://gsapvault.com/demos/directional-hover-fill/index.html

| Property | Value |
|----------|-------|
| Type | effect |
| Tier | paid |
| Price | £10 |
| Difficulty | intermediate |
| Plugins | Core GSAP only |
| Techniques | hover-effect, velocity-reactive, clip-path, svg-path |
| Uses Lenis | No |

## Lighthouse, as measured

Google Lighthouse on the demo, 25 September 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 directional background fill for links, buttons and cards. The leading edge bends towards the point where your pointer enters, reacts to its speed and settles into a solid surface. Leave through another edge and the fill follows you out.

Rapid crossings remain continuous, with no snap back to a hidden starting position. The content stays stationary and changes contrast exactly where the fill passes. Use it on service links, calls to action or navigation without redesigning the rest of the page.

## Features

- Entry and exit from all four edges, with a bowed front centred on the pointer
- Pointer speed changes the curvature during a crossing
- Quick swipes carry the existing fill out without folding; re-entry catches the moving shape
- Stationary text with matching contrast on each side of the fill
- Native link and button behaviour, keyboard focus and touch press feedback
- Instant reduced-motion states, independent instances and complete teardown
- Ink, Spectrum, Dusk and cursor-origin Radial styles with accessible comparison tabs

## Use Cases

- Service and portfolio links with a clear hover response
- Navigation rows that respond to the direction of travel
- Calls to action that keep their typography steady and readable

## 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 fill follows the pointer's entry and exit edges while a curved front reacts to its location and speed. A matching clipped copy keeps text readable as the boundary passes. GSAP handles the transition and interrupted gestures, with immediate states for keyboard focus and reduced motion.

## 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

Add in your HTML `<head>`:

_Code snippet omitted: it ships with the download._

Add a link or button in your page:

_Code snippet omitted: it ships with the download._

Before `</body>`, load GSAP core and the effect:

_Code snippet omitted: it ships with the download._

### Using It With Your Own Design

**Required markup:** put `data-directional-fill` on a native link or button and wrap its contents in one immediate child with `data-fill-content`. Keep that child presentational: text, spans, images and decorative SVGs work; do not nest form controls, media players or other interactive content. The script creates a hidden-from-assistive-technology visual copy of this child and an SVG clipping definition for each instance.

**Removable demo styling:** `.demo-stage`, `.demo-cue`, `.service-list`, `.service-number`, `.service-title`, `.service-description`, `.service-arrow` and `.service-dialog` belong to the example. The style tabs, service dialogs and final inline script are demo-only. Remove those, replace the buttons with your own links and choose any font, spacing or palette.

**Required CSS:** retain relative positioning, isolation and clipped overflow on `[data-directional-fill]`; absolute inset positioning and disabled pointer events on `.directional-fill-layer`; and the zero-sized `.directional-fill-defs` rule. Put your padding on `[data-fill-content]`, not on its parent, so the original and copy align. Set the foreground and filled colours through `--ink`, `--surface`, `--fill` and `--fill-ink`. Preserve the visible focus outline and fallback hover/focus styling. No content is pre-hidden.

The supplied `[data-fill-content]` grid is only for the three-column demo. Replace it with your own flex, grid or block layout. Keep the same layout on the original and the generated copy. If your content changes dynamically, revert the effect and initialise the script again so the visual copy contains the new content.

### Fill Styles

Set `data-fill-theme="ink"`, `data-fill-theme="spectrum"` `data-fill-theme="dusk"` or `data-fill-theme="radial"` on a control or a shared parent. Ink is the default solid fill; Spectrum uses a black-to-green gradient with GSAP Vault lime text; Dusk uses purple/magenta/blue with white text. Ink, Spectrum and Dusk use the same directional motion and quick-swipe handling. For a circular reveal, also set `data-fill-mode="radial"` on the control or shared parent. It expands from the pointer entry point and contracts towards the exit point, with a radius that reaches every corner. The Radial demo tab sets both attributes and uses a black-and-green palette with GSAP Vault lime text. The optional demo tabs support arrow keys, Home and End.

For your own gradient, set `--fill: linear-gradient(110deg, #0f0f0e, #354500, #516800)` and `--fill-ink: #c8ff00`. Check text contrast across every gradient stop. Theme changes do not recreate the animation or its content.

### Options

Set attributes on each `[data-directional-fill]` control.

| Attribute | Values | Default | Description |
|---|---|---|---|
| `data-fill-mode` | `directional`, `radial` | `directional` | Reveal geometry; may also be set on a parent |
| `data-enabled` | `true`, `false` | `true` | Skip enhancement when false; native CSS states remain |
| `data-speed` | `0.25`–`3` | `1` | Transition speed multiplier |
| `data-bend` | `0`–`1.5` | `1` | Curvature strength; zero gives a straight directional front |

### Accessibility

- Keyboard focus gives an immediate full fill and visible focus outline; native link/button activation remains intact.
- Touch displays immediate press feedback and releases on pointer-up or cancellation. The effect never prevents scrolling or link navigation.
- Reduced motion switches states instantly. Changing the motion preference while mounted rebuilds the interaction and keeps all content available.
- The visual duplicate is `aria-hidden` and inert. Original accessible names remain unchanged.
- Without JavaScript or GSAP, original content remains visible and CSS supplies hover, active and focus feedback. Demo details require JavaScript; production links retain their ordinary destinations.
- Maintain readable contrast between `--ink`/`--surface` and `--fill-ink`/`--fill` when restyling.

### Dependencies

- GSAP core 3.12+; demo pinned to 3.15.0.
- A browser supporting SVG clipping, Pointer Events and `:focus-visible`.
- No GSAP plugins, Lenis or image assets. Mona Sans is a removable demo font.

## 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 Directional Hover Fill](https://gsapvault.com/effects/directional-hover-fill)
- [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