An implementation of the MacOS terminal. Useful for showcasing a command line interface.
Installation
Usage
You can add a delay to <Terminal.Root/> to delay every animation by that amount of time:
You can also change the speed of all animations from <Terminal.Root/>:
Loop
You can make the terminal preview continuously loop using the <Terminal.Loop/> component.
Acknowledgements
This component was inspired by magicuidesign/magicui.
API Reference
Terminal.
Root
The root terminal component. Controls animation timing and children.
| Prop | Type | Default |
|---|---|---|
children? | Snippet | - |
class? | string | - |
delay? | number | - |
speed? | number | - |
onComplete? | function | - |
Terminal.
TypingAnimation
Animates its children with a typewriter effect.
| Prop | Type | Default |
|---|---|---|
children? | Snippet | - |
class? | string | - |
delay? | number | - |
Terminal.
AnimatedSpan
Animates its children with a fly-in effect.
| Prop | Type | Default |
|---|---|---|
children? | Snippet | - |
class? | string | - |
delay? | number | - |
Terminal.
Loading
Displays a loading animation with customizable messages.
| Prop | Type | Default |
|---|---|---|
loadingMessage | Snippet | - |
completeMessage | Snippet | - |
duration? | number | - |
delay? | number | - |
class? | string | - |
Terminal.
Loop
Repeats its children in a loop, useful for continuous terminal animations.
| Prop | Type | Default |
|---|---|---|
children? | Snippet | - |
delay? | number | - |