Chromatic Split Hover
RGB channels of a headline separate toward the pointer and recombine to white.
DOM + CSS0 deps1 file · 3 KB TSX
Props
"use client";
import { useRef, useState } from "react";
export function ChromaticSplitHover({
text,
strength = 7,
blurEdges = true,
}: {
text: string;
strength?: number;
/** Soften the two outer channels while the pointer is inside. */
blurEdges?: boolean;
}) {
const ref = useRef<HTMLDivElement>(null);
const [active, setActive] = useState(false);
function handleMove(e: React.MouseEvent<HTMLDivElement>) {
// ---------------------------------------------------------------
// Full source available with a viberdy Pro subscription.
// https://viberdy.dev/pricing
// ---------------------------------------------------------------
}Details
About this text effect
Chromatic aberration is a lens defect: the three colour channels focus at slightly different points, so edges fringe red on one side and blue on the other while the centre of the image stays neutral. Reproducing that in CSS is three tinted copies of the text and one blend mode — and the blend mode is the whole thing. Screen blending makes pure red, green and blue sum back to white wherever they overlap, which is what keeps the glyph clean in the middle so only the fringes show colour. Swap it for normal blending and you get three stacked coloured ghosts with no readable text, which is the version most people end up with. Two refinements earn their place: only the outer channels translate, so the green layer anchors the word and the eye has something to hold; and a sub-pixel blur on those outer layers during hover makes the fringe read as optical rather than as three sharp duplicates. Because the visible stack is duplicated text it must be hidden from assistive technology, with one real copy carrying the string.
Curator’s note
Built for viberdy 2.1. `mix-blend-mode: screen` is the entire effect — without it this is three coloured ghosts, not aberration.
