CrystalTextReveal

CrystalTextReveal animates a sequence of text lines with GSAP, supporting inline items that appear on the same line, exit animations that clear previous text, and highlight styling for emphasis.

Import

import { CrystalTextReveal } from '@artasce/crystal-ui';

Usage

<CrystalTextReveal
  sequence={[
    { text: 'hello', hold: 0.8, exit: true },
    { text: "i'm cai", hold: 0.8, exit: true },
    { text: 'i architect' },
    { text: 'intelligent systems', inline: true, highlight: true },
  ]}
/>

Props

CrystalTextReveal Props

Token	Variable	Value	Description
`sequence`	`TextSequenceItem[]`	(required)	Array of text items to animate
`onComplete`	`() => void`	—	Called when full sequence finishes
`delay`	`number`	0.5	Initial delay before sequence starts (seconds)
`fontSize`	`'sm' \| 'md' \| 'lg' \| 'xl' \| 'hero'`	'hero'	Text size preset
`color`	`'default' \| 'amethyst'`	'amethyst'	Color theme
`respectReducedMotion`	`boolean`	true	Respect prefers-reduced-motion
`className`	`string`	—	Additional CSS classes

Values update live with theme changes. Click any row to copy the CSS variable.

TextSequenceItem

Field	Type	Default	Description
`text`	`string`	(required)	Text to display
`duration`	`number`	`0.5`	Animation duration (seconds)
`hold`	`number`	—	Time to hold before next item
`exit`	`boolean`	—	Animate out before next item
`inline`	`boolean`	—	Appear on same line as previous
`highlight`	`boolean`	—	Apply highlight/accent styling
`className`	`string`	—	Per-item CSS classes

Examples

Hero Introduction

<CrystalTextReveal
  fontSize="hero"
  color="amethyst"
  sequence={[
    { text: 'We Build', hold: 0.5, exit: true },
    { text: 'Intelligent', highlight: true },
    { text: 'Systems', inline: true },
  ]}
  onComplete={() => setShowContent(true)}
/>

Smaller Reveal

<CrystalTextReveal
  fontSize="lg"
  delay={1}
  sequence={[
    { text: 'Step 1: Discovery' },
    { text: 'Step 2: Architecture', inline: false },
    { text: 'Step 3: Delivery', inline: false },
  ]}
/>