ASCII Ripple Text

Hover-driven glitch ripple that scrambles characters outward from the cursor position.

Components / ASCII Ripple Text

Feedbackmotiontexteditorial

Hover-driven ASCII glitch ripple for editorial text links and mono-heavy navigation moments.

Preview

Loading preview…

Usage

Hover-driven glitch ripple that scrambles characters outward from the cursor position.

<a href="/docs">
  <AsciiRippleText>Documentation</AsciiRippleText>
</a>

Files

components/steez/AsciiRippleText.tsxcomponent

components/steez/AsciiRippleText.module.cssstyle

Install package

pnpm add @steez-ui/theme @steez-ui/icons @steez-ui/ui

import { AsciiRippleText } from "@steez-ui/ui";

Install from registry

pnpm dlx shadcn@latest add https://steez-ui-6v5.pages.dev/r-steez/ascii-ripple-text.json

Source files install at your project root. Import styles/steez/tokens.css once in your global stylesheet or root layout. No Steez packages needed.

import { AsciiRippleText } from "<project-root>/components/steez/AsciiRippleText";

Replace <project-root> with a relative path from your file.

Copy standalone file

/copy/steez/ascii-ripple-text.tsxLoading…

Copy the entire generated TSX file into your React project. It embeds CSS, local helpers, icons, and theme fallbacks, so no Steez npm packages are required.

Open standalone source

Blink Text

Minimal blink treatment for hover or mount-triggered attention cues.

Stroked Text

Outlined accent text with optional stroke-to-fill blink on mount.

Button

Primary, secondary, and danger actions with shared Steez button styling.