RGB Split

Chromatic aberration — offset red and blue channels, with optional glitch bursts.

Chroma

Usage

import { RGBSplit } from '@vinyl-ui/effects';

<h1 className="font-display text-5xl">
  <RGBSplit intensity={3} animated>Chroma</RGBSplit>
</h1>

Or use the Tailwind utilities directly:

<h1 class="rgb-split rgb-split-3 animate-glitch inline-block">Chroma</h1>
<button class="hover:rgb-split">Hover me</button>

Prop

Type

Class	Effect
`rgb-split`	Red/blue text-shadow offset by `--rgb-split` (default 2px)
`rgb-split-{n}` / `rgb-split-[3px]`	Set the offset
`animate-glitch`	Slice-and-skew burst every `--glitch-duration` (4s). Use on inline-block or block elements

Web: a two-colour text-shadow. The text stays a single selectable, accessible node.
Native: two absolutely positioned Text copies tinted glitch-r / glitch-b behind the real text, moved by Reanimated on the UI thread. The copies are hidden from screen readers.