Specular Text Sweep
A light band travelling inside the glyphs, clipped to the text so only ink lights up.
DOM + CSS0 deps1 file · 2 KB TSX
Props
"use client";
export function SpecularTextSweep({
text,
duration = 4.5,
width = 18,
metallic = true,
}: {
text: string;
duration?: number;
/** Width of the bright band, as a % of the sweep gradient. */
width?: number;
/** Brushed-metal base fill under the sweep, or a flat colour ramp. */
metallic?: boolean;
}) {
const base = metallic
? "linear-gradient(90deg,#6b7280 0%,#9ca3af 25%,#e5e7eb 50%,#9ca3af 75%,#6b7280 100%)"
: "linear-gradient(90deg,#3d7bff,#79a4ff)";
// ---------------------------------------------------------------
// Full source available with a viberdy Pro subscription.
// https://viberdy.dev/pricing
// ---------------------------------------------------------------
}Details
About this text effect
The difference between text that shines and text with a shine slid over it is one property. Clipping the gradient to the glyphs with `background-clip: text` means the highlight can only exist where ink exists, so the counters of letters and the gaps between them stay dark and the word reads as lit metal. Overlay the same white gradient on top instead and it lights the holes too, which is why that version always looks like a rectangle passing behind glass. Stacking two background layers does the rest: a narrow travelling band for the specular highlight, and a static grey-to-near-white gradient underneath standing in for the material itself — without that second layer there is nothing for the light to be reflecting off, and the effect reads as a flashlight on flat type. The whole thing animates `background-position` only, which the compositor handles, so it is effectively free despite running continuously. Keep it to one headline; the effect is pure ornament and stops reading as luxury the moment it repeats.
Curator’s note
Built for viberdy 2.1 as the replacement for the retired Animated Gradient Text — same family, materially better result.
