Use the following composition to build a Terminal:
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/>:
You can make the terminal preview continuously loop using the <Terminal.Loop/> component.
This component was inspired by magicuidesign/magicui.
The root terminal component. Controls animation timing and children.
Animates its children with a typewriter effect.
| Prop | Type | Default |
|---|---|---|
children? | Snippet | - |
class? | string | - |
delay? | number | - |
Animates its children with a fly-in effect.
| Prop | Type | Default |
|---|---|---|
children? | Snippet | - |
class? | string | - |
delay? | number | - |
Displays a loading animation with customizable messages.
| Prop | Type | Default |
|---|---|---|
loadingMessage | Snippet | - |
completeMessage | Snippet | - |
duration? | number | - |
delay? | number | - |
class? | string | - |
Repeats its children in a loop, useful for continuous terminal animations.
| Prop | Type | Default |
|---|---|---|
children? | Snippet | - |
delay? | number | - |