GlitchText Glitch Tear Text
Neobrutalist-style glitch text effect that uses CSS clip-path to slice pseudo-elements, producing high-frequency displacement, chromatic aberration (RGB channel separation), and instant tear animations on trigger. Supports horizontal, vertical, and both tear directions.
Demo
悬停触发（默认）
残影闪烁点击触发
点击我自动播放
自动闪烁速度变体
撕裂方向（点击切换查看）
自定义间隔 (interval=1000ms)
慢速间隔手动控制 (trigger="none")
Installation
pnpm dlx brutx-vue@latest add glitch-textUsage
<script setup>
import { GlitchText } from 'brutx-ui-vue'
</script>
<template>
<GlitchText text="BRUTAL GLITCH" class="text-4xl" />
</template>Variants
Trigger Modes
| Mode | Description |
|---|---|
hover | Animation triggers on mouse hover, stops on mouse leave (default) |
click | Toggle animation on/off with click |
autoplay | Automatically loops after component mount, pauses on hover |
none | No automatic trigger; use expose({ play(), stop() }) for external programmatic control |
Speed Variants
| Speed | CSS Variable Value |
|---|---|
slow | --glitch-duration: 800ms |
medium | --glitch-duration: 300ms (default) |
fast | --glitch-duration: 100ms |
Tear Directions
Control tear slice and displacement direction via the direction prop:
| Direction | Description |
|---|---|
horizontal | Horizontal tear (default). Slices are horizontal, text is cut into horizontal strips, strips shift left/right, red-blue separation runs horizontally |
vertical | Vertical tear. Slices are vertical, text is cut into vertical strips, strips shift up/down, red-blue separation runs vertically |
both | Both directions. ::before uses horizontal red, ::after uses vertical blue, two layers overlay for a more complex shattered effect |
<GlitchText text="HORIZONTAL" direction="horizontal" `trigger="click"` />
<GlitchText text="VERTICAL" direction="vertical" `trigger="click"` />
<GlitchText text="BOTH" direction="both" `trigger="click"` />In
bothmode, both pseudo-elements overlay the original text. Color block stacking may reduce readability; use as needed.
Programmatic Control
Call play() or stop() through the component ref to control the active glitch state; see API Reference for complete member semantics.
API Reference
| Name | Type | Default | Description |
|---|---|---|---|
text | string | undefined | "" | Text data for the glitch pseudo-elements. A non-empty value takes precedence over slot text for the animation layers. |
DetailsDeclared typestring | undefined Default value details
Sourcepackages/ui/src/components/glitch-text/GlitchText.vue | |||
trigger | "none" | "click" | "hover" | "autoplay" | undefined | "hover" | Selects the hover, click, autoplay, or none animation trigger. |
DetailsDeclared type"none" | "click" | "hover" | "autoplay" | undefined Literal values
Default value details
Sourcepackages/ui/src/components/glitch-text/GlitchText.vue | |||
interval | number | undefined | 3000 | The autoplay interval in milliseconds. The actual interval is clamped to the animation duration and minimum interval. |
DetailsDeclared typenumber | undefined Default value details
Sourcepackages/ui/src/components/glitch-text/GlitchText.vue | |||
speed | "fast" | "medium" | "slow" | undefined | "medium" | Selects the slow, medium, or fast visual pace of the glitch animation. |
DetailsDeclared typeNonNullable<"slow" | "medium" | "fast" | null | undefined> | undefined Literal values
Default value details
Sourcepackages/ui/src/components/glitch-text/GlitchText.vue | |||
direction | "both" | "horizontal" | "vertical" | undefined | "horizontal" | Selects horizontal, vertical, or bidirectional glitch displacement. |
DetailsDeclared typeNonNullable<"vertical" | "horizontal" | "both" | null | undefined> | undefined Literal values
Default value details
Sourcepackages/ui/src/components/glitch-text/GlitchText.vue | |||
class | string | undefined | undefined | Custom CSS classes appended to the root text span. |
DetailsDeclared typestring | undefined Default value details
Sourcepackages/ui/src/components/glitch-text/GlitchText.vue | |||
| Name | Signature or type | Description |
|---|---|---|
@mouseenter | MouseEvent | The root span’s native mouseenter event is available to consumers through Vue attribute fallthrough; the component does not declare a custom event with this name.
|
DetailsDeclared typeMouseEvent Sourcepackages/ui/src/components/glitch-text/GlitchText.vue | ||
@mouseleave | MouseEvent | The root span’s native mouseleave event is available to consumers through Vue attribute fallthrough; the component does not declare a custom event with this name.
|
DetailsDeclared typeMouseEvent Sourcepackages/ui/src/components/glitch-text/GlitchText.vue | ||
@click | MouseEvent | The root span’s native click event is available to consumers through Vue attribute fallthrough; the component does not declare a custom event with this name.
|
DetailsDeclared typeMouseEvent Sourcepackages/ui/src/components/glitch-text/GlitchText.vue | ||
| Name | Signature or type | Description |
|---|---|---|
#default | {} | Renders text content and supports inline styling. The visible content prefers this slot and falls back to text; the glitch pseudo-elements prefer non-empty text and otherwise extract text from the slot. |
DetailsDeclared type{}Sourcepackages/ui/src/components/glitch-text/GlitchText.vue | ||
| Name | Signature or type | Description |
|---|---|---|
play | () => void | Manually activates the glitch state regardless of trigger mode; reduced-motion preference still hides the visual animation. The autoplay timer continues independently. |
DetailsDeclared type() => void Sourcepackages/ui/src/components/glitch-text/GlitchText.vue | ||
stop | () => void | Manually clears the active glitch state; the autoplay timer continues on its own schedule. |
DetailsDeclared type() => void Sourcepackages/ui/src/components/glitch-text/GlitchText.vue | ||
Accessibility
- With
trigger="click", the root receives button semantics, keyboard focus, andaria-pressed, and supports Enter / Space to toggle; other trigger modes do not set button semantics - The component disables glitch animation when
prefers-reduced-motion: reduceis active