Shimmer Text
シマーテキスト
A highlight that walks across a word on a loop — the usual signal that something is still working. There is no overlay and no mask: the text is transparent, background-clip↗↗ makes the glyphs the only window onto the background, and the background is a gradient twice the width of the box. Sliding its background-position↗↗ from one end to the other is the whole animation, which means it costs one property and stays sharp at any size. Adapted from Kokonut UI↗↗ under the MIT licence.
Generating response
Indexing 1,204 files
Installation
Install the following dependencies:1
npm install framer-motionCopy and paste the following code into a new component file:2
"use client"
/**
* Adapted for Aki UI from Kokonut UI's Shimmer Text.
* Original author: @dorianbaffier — https://kokonutui.com
* Copyright (c) 2025 kokonutUI, MIT License.
* 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 { ShimmerText } from "@/components/ui/shimmer-text"
export default function Page() {
return (
<ShimmerText text="Generating response" duration={2.5} />
)
}
Props
ShimmerText
| Name | Default | Description |
|---|---|---|
| text | — | string The text the highlight travels across |
| duration | 2.5 | number Seconds for one pass |
| size | 30 | number Font size in pixels |
| dark | false | boolean Render the dark palette |