← All components
Text / component
Terminal Lines
Sequenced output settles into focus with an optional violet shimmer.
PLAYGROUND
Take it with you.
SOURCE ACCESS
Preview freely. Unlock the files.
Enter the shared password to copy the complete source, download every file, and install components in your app.
Access lasts 24 hours. Your preview settings stay with you.
Component notes
- Supply lines for the original string-array API, or separate text lines with a vertical bar or newline.
- The plain0.2s fade/3px movement, shimmer0.55s blur8px/4px movement and0.9s cursor cycle match the source.
- Stops requesting frames after the final line settles. Pause excludes hidden time; Replay or changed text restarts the sequence. Reduced motion displays all lines.
- Bounded to 100 lines and 2000 characters per line. The included Demo provides the terminal frame.
- The included Demo.tsx and styles recreate the complete preview.
React 19Framer Motion 12.42.2
Chungus UI · Project-authorized component and adaptation. Public distribution terms pending release.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
text | string | '' | Lines (separate with |) |
lineDelay | number | 350 | Line interval |
startDelay | number | 0 | Start delay |
shimmer | boolean | false | Shimmer |
lines | string[] | undefined | Original array API; takes precedence over text and preserves literal pipe characters. |
onComplete | () => void | undefined | Called once after the final line settles. |
className | string | '' | Additional root classes. |
paused | boolean | false | Freeze animation and pending local playback. |
replayToken | number | 0 | Change this value to restart. |