Chromatic Split Hover
RGB channels of a headline separate toward the pointer and recombine to white.
- Category
- Text Effects
- Added
- 2026-09-20
- Deps
- none
- Updated
- 2026-09-20
This is a viberdy Pro component
The live preview, the props panel and the write-up are open to everyone. The full source, the AI prompt and CLI install are part of Pro.
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
// ---------------------------------------------------------------
}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.
Pairs well with
Matched on shared tags and category — the entries most likely to be used alongside this one.
Scramble Text
text effectsText that decodes from random characters into its real word on hover.
Glitch Text Hover
text effectsAn RGB-split, jittery glitch effect on text when you hover it.
Slice Shear Hover
text effectsDisplay type cut into horizontal bands that fan apart under the pointer.