Animations

Glitch Slice

Text · Split Effects

@sbx/core-ui/components/text/GlitchSlice.svelte

light

shredbx

eXperimental Lab

dark

shredbx

eXperimental Lab

// Import

GlitchSlice.svelte typescript

import GlitchSlice from '@sbx/core-ui/components/text/GlitchSlice.svelte';

// Spec

User Story

As a visitor, I see a glitch-sliced headline with chromatic aberration so the page feels cyber and intentional rather than flat.

Scenario

The component renders four stacked layers of the same text. A horizontal 50/50 clip-path splits a top half and bottom half; red and cyan chromatic-aberration layers sit behind them. Hovering the parent triggers a horizontal offset animation on the split halves and increases the chromatic layers opacity, creating a glitch/slice effect that settles back on leave.

Parameters

Name	Type	Default	Description
text	string	—	Animated word or phrase (the split target).
before	string	''	Non-animated text rendered inside the same wrap BEFORE `text` — include to keep the clip-path split aligned over a full phrase.
after	string	''	Non-animated text rendered inside the same wrap AFTER `text`.
duration	string	'0.5s'	CSS transition duration for the slice offset and chromatic opacity.
easing	string	'cubic-bezier(0.23, 1, 0.32, 1)'	CSS easing function used by the hover transition.
offsetX	number	5	Horizontal pixel offset applied to the top/bottom halves on hover.
glitchOffset	number	3	Pixel offset of the chromatic-aberration (red/cyan) layers.
glitchOpacity	number	0.8	Opacity of the chromatic-aberration layers at hover peak.
colorRed	string	'#ff0040'	Color of the red chromatic layer.
colorCyan	string	'#00ffff'	Color of the cyan chromatic layer.

// Related