GlitchText 故障撕裂文本
新粗野主义风格的故障文本效果，利用 CSS clip-path 对伪元素进行分片，在触发时产生高频错位、色差（RGB 通道分离）和瞬间撕裂动效。支持横向、纵向、双向三种撕裂方向。
预览
悬停触发（默认）
残影闪烁点击触发
点击我自动播放
自动闪烁速度变体
撕裂方向（点击切换查看）
自定义间隔 (interval=1000ms)
慢速间隔手动控制 (trigger="none")
安装
pnpm dlx brutx-vue@latest add glitch-text用法
<script setup>
import { GlitchText } from 'brutx-ui-vue'
</script>
<template>
<GlitchText text="BRUTAL GLITCH" class="text-4xl" />
</template>变体
触发模式
| 模式 | 说明 |
|---|---|
hover | 鼠标悬停时触发动画，离开后停止（默认） |
click | 点击切换动画开/关 |
autoplay | 组件挂载后自动循环播放，hover 时暂停 |
none | 不自动触发，通过 expose({ play(), stop() }) 供外部程序化控制 |
速度变体
| 速度 | CSS 变量值 |
|---|---|
slow | --glitch-duration: 800ms |
medium | --glitch-duration: 300ms（默认） |
fast | --glitch-duration: 100ms |
撕裂方向
通过 direction prop 控制撕裂切缝与错位方向：
| 方向 | 说明 |
|---|---|
horizontal | 横向撕裂（默认）。切缝水平，文本切成上下横条，条带左右错位，红蓝色分离沿水平方向 |
vertical | 纵向撕裂。切缝垂直，文本切成左右竖条，条带上下错位，红蓝色分离沿垂直方向 |
both | 双向撕裂。::before 走横向红、::after 走纵向蓝，两层叠加呈现更复杂的破碎效果 |
<GlitchText text="HORIZONTAL" direction="horizontal" `trigger="click"` />
<GlitchText text="VERTICAL" direction="vertical" `trigger="click"` />
<GlitchText text="BOTH" direction="both" `trigger="click"` />
both模式下两个伪元素都覆盖在原文上，色块叠加可能降低可读性，按需选用。
程序化控制
通过组件 ref 调用 play() 或 stop() 控制毛刺激活状态；完整成员语义见 API 参考。
API 参考
| 名称 | 类型 | 默认值 | 说明 |
|---|---|---|---|
text | string | undefined | "" | 用于毛刺伪元素的数据文本；非空时优先于插槽文本用于动画图层。 |
详情声明类型string | undefined 默认值详情
来源packages/ui/src/components/glitch-text/GlitchText.vue | |||
trigger | "none" | "click" | "hover" | "autoplay" | undefined | "hover" | 选择 hover、click、autoplay 或 none 动画触发方式。 |
详情声明类型"none" | "click" | "hover" | "autoplay" | undefined 字面量
默认值详情
来源packages/ui/src/components/glitch-text/GlitchText.vue | |||
interval | number | undefined | 3000 | autoplay 模式的播放间隔，单位为毫秒；组件会按动画时长和最小间隔限制实际周期。 |
详情声明类型number | undefined 默认值详情
来源packages/ui/src/components/glitch-text/GlitchText.vue | |||
speed | "fast" | "medium" | "slow" | undefined | "medium" | 选择毛刺动画的慢速、中速或快速视觉节奏。 |
详情声明类型NonNullable<"slow" | "medium" | "fast" | null | undefined> | undefined 字面量
默认值详情
来源packages/ui/src/components/glitch-text/GlitchText.vue | |||
direction | "both" | "horizontal" | "vertical" | undefined | "horizontal" | 选择水平、垂直或双向毛刺位移。 |
详情声明类型NonNullable<"vertical" | "horizontal" | "both" | null | undefined> | undefined 字面量
默认值详情
来源packages/ui/src/components/glitch-text/GlitchText.vue | |||
class | string | undefined | undefined | 追加到文本根 span 元素的自定义 CSS 类。 |
详情声明类型string | undefined 默认值详情
来源packages/ui/src/components/glitch-text/GlitchText.vue | |||
| 名称 | 签名或类型 | 说明 |
|---|---|---|
@mouseenter | MouseEvent | 根 span 的原生鼠标进入事件通过 Vue 属性透传给使用方监听；组件不声明同名自定义事件。
|
详情声明类型MouseEvent 来源packages/ui/src/components/glitch-text/GlitchText.vue | ||
@mouseleave | MouseEvent | 根 span 的原生鼠标离开事件通过 Vue 属性透传给使用方监听；组件不声明同名自定义事件。
|
详情声明类型MouseEvent 来源packages/ui/src/components/glitch-text/GlitchText.vue | ||
@click | MouseEvent | 根 span 的原生点击事件通过 Vue 属性透传给使用方监听；组件不声明同名自定义事件。
|
详情声明类型MouseEvent 来源packages/ui/src/components/glitch-text/GlitchText.vue | ||
| 名称 | 签名或类型 | 说明 |
|---|---|---|
#default | {} | 呈现文本内容并支持内联样式。实际渲染文本优先采用插槽；未提供插槽时显示 text。毛刺伪元素则优先采用非空 text，否则从插槽节点提取文本。 |
详情声明类型{}来源packages/ui/src/components/glitch-text/GlitchText.vue | ||
| 名称 | 签名或类型 | 说明 |
|---|---|---|
play | () => void | 手动开启毛刺激活状态，不受 trigger 方式或禁用状态限制；减少动态效果偏好仍会隐藏实际动画。autoplay 定时器继续独立运行。 |
详情声明类型() => void 来源packages/ui/src/components/glitch-text/GlitchText.vue | ||
stop | () => void | 手动关闭毛刺激活状态；autoplay 定时器仍会按自身周期运行。 |
详情声明类型() => void 来源packages/ui/src/components/glitch-text/GlitchText.vue | ||
可访问性
trigger="click"时根元素设置按钮语义、键盘焦点和aria-pressed，并支持 Enter / Space 切换；其他触发模式不设置按钮语义- 用户偏好
prefers-reduced-motion: reduce时，组件停用毛刺动画