ReelText

A formatted value whose digits spin into place on slot-machine reels, landing left to right.

AnimationsText@gaudi/design-system/animations/ReelText

Installation

pnpm add github:g-udi/design-system

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

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

Usage

import { ReelText } from '@gaudi/design-system/animations/ReelText';
<ReelText value="$31,904" />

Examples

Playground

Storybook

Changing value

Storybook

API

5 props

Accessibility

The root is one image named with the whole value; the reels are hidden, so the value is read once and never digit by digit. Reduced motion swaps values instantly.

Notes

Motion inspired by Slot text from Arc. Independently implemented for Gaudi; no Arc code or assets are included.

CipherRevealScrambled characters resolve progressively into readable text on view, hover or focus.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.