Aki UI

Glitch Text

グリッチテキスト

Three copies of the same word stacked on top of each other. The readable one stays put; the two behind it walk the same skew↗↗ and offset path in opposite directions on an endless loop, so the word appears to tear apart and reassemble without ever becoming unreadable. The original leaned on saturated colour to sell the channel split — here the ghosts are two greys, which turns out to be all the effect needed. Three intensities set the amplitude and the loop length; paused freezes it. Adapted from Kokonut UI↗↗ under the MIT licence.

SIGNAL LOST

reconnecting

Installation

Install the following dependencies:1

npm install framer-motion

Copy and paste the following code into a new component file:2

"use client"

/**

* Adapted for Aki UI from Kokonut UI's Glitch Text.

* Original author: @dorianbaffier — https://kokonutui.com

* https://github.com/kokonut-labs/kokonutui

* Reworked here onto the local palette, with shadcn primitives and

* class-variance-authority removed and motion/react swapped for framer-motion.

How to use it3

"use client"

import { GlitchText } from "@/components/ui/glitch-text"

export default function Page() {

return (

)

}

Props

GlitchText

Name	Default	Description
text	—	string The word to break up
intensity	"medium"	"light" \| "medium" \| "heavy" How far the ghosts travel and how fast the loop runs
size	48	number Font size in pixels
paused	false	boolean Hold the ghosts at rest
dark	false	boolean Render the dark palette