PhraseCycle

A sequence of phrases rotates vertically in a stable space, without moving the surrounding line.

AnimationsText@gaudi/design-system/animations/PhraseCycleView 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 { PhraseCycle } from '@gaudi/design-system/animations/PhraseCycle';

Usage

import { PhraseCycle } from '@gaudi/design-system/animations/PhraseCycle';
<PhraseCycle texts={["Create", "Explore"]} />

Examples

Playground

Storybook

Downward rotation

Storybook

API

5 props

Accessibility

All phrases are exposed once as stable text, without a live region. Reduced motion shows the first phrase. Pausing keeps the current phrase visible. Provide a pause control for continuous cycling.

Notes

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

DirectionScopes text direction for Gaudi controls that need directional keyboard and placement behavior.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.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.