Entry Edge Fill Button
A fill that wipes in from the edge your pointer crossed and leaves by the one you exit — the label inverts letter by letter as the edge passes through it.
DOM + CSS0 deps1 file · 7 KB TSXreduced-motion aware
Props
"use client";
import { useEffect, useRef, type ReactNode } from "react";
/**
* A button whose fill wipes in from the edge the pointer entered through, and
* leaves through the edge it exited by.
*
* NORMALISE BY THE BOX BEFORE PICKING AN EDGE. "Nearest edge" measured in
* pixels is wrong for any button that is not square: on a 240x52 CTA the top
* and bottom edges are nearer to almost every point, so nearly every entry
* reads as vertical. Dividing the offset from the centre by the half-width and
* half-height puts all four edges at distance 1, and the larger of the two
* normalised offsets is the edge actually crossed.
*
* ONE CLIP FOR THE FILL AND THE INVERTED LABEL. The label exists twice: once
* in the base colour, once in the fill's ink colour inside the clipped layer.
* Because a single clip-path reveals both, the colour change travels through
// ---------------------------------------------------------------
// Full source available with a viberdy Pro subscription.
// https://viberdy.dev/pricing
// ---------------------------------------------------------------
}Details
About this component
A direction-aware fill is a small thing that reads as expensive, because it proves the interface noticed how you arrived. The usual implementation measures the pixel distance to each edge and picks the nearest, which is correct for squares and wrong for nearly every real button: on a wide call to action the top and bottom edges are closer to almost any entry point, so the wipe comes from above or below no matter which way the pointer travelled. Dividing the offset from the centre by the half-width and half-height fixes it in two lines. The second detail is the label. It is rendered twice, once in the base colour and once in the fill's ink colour inside the clipped layer, and a single clip-path reveals both — so the colour change passes through each letter with the edge rather than flipping the whole word at an arbitrary moment. Animations run through the Web Animations API and always begin from the clip's live computed value, which is what lets a pointer that leaves mid-wipe reverse it smoothly instead of snapping it back to an edge. Touch and keyboard, which have no entry edge, rise from the bottom.
Curator’s note
Direction-aware hovers usually pick the nearest edge in pixels, which on any wide button means top or bottom almost every time. Divide by the box first.
