CipherReveal

Scrambled characters resolve progressively into readable text on view, hover or focus.

AnimationsText@gaudi/design-system/animations/CipherRevealView in Storybook Source

Installation

pnpm add github:ahmadassaf/design-system

Import from @gaudi/design-system. Load @gaudi/design-system/global.css once and add transpilePackages: ['@gaudi/design-system'] in Next.js.

import { CipherReveal } from '@gaudi/design-system/animations/CipherReveal';

Usage

import { CipherReveal } from '@gaudi/design-system/animations/CipherReveal';
<CipherReveal text="Gaudi" />

Examples

Playground

Storybook

Reveal from the center

Storybook

API

7 props

Accessibility

The complete text is exposed once; scrambled characters are hidden from assistive technology. Pausing or reduced motion reveals the complete text. The outer span has no tab stop by default; focus replay applies when it receives focus.

Notes

Visual idea inspired by Decrypted Text from React Bits (MIT + Commons Clause). Independently implemented for Gaudi; no React Bits code or assets are included.

GlyphInspectorInspect animated letter outlines with a gliding frame, floating square particles, measurement guides and a live readout. Hover to take control; drag and release a letter to return it to its slot.PhraseCycleA sequence of phrases rotates vertically in a stable space, without moving the surrounding line.TypewriterTypes, pauses and deletes a sequence of phrases while reserving space for the longest one.WarpTextText gently undulates at rest and bends beneath a moving pointer lens. Hover magnifies a local area, adds a soft ripple and optional RGB refraction, then eases back on exit.WordSpotlightA moving set of corner marks brings one word into focus while the surrounding words soften.