Examples

Default theme

pip install spacySuccessfully installed spacypython -m spacy download enInstalled model 'en'pythonimport spacynlp = spacy.load('en')doc = nlp(u'Hello world')print([(w.text, w.pos_) for w in doc])[('Hello', 'INTJ'), ('world', 'NOUN')]

template

<v-termynal forward-button restart-button lazy>
  <vt-input>pip install spacy</vt-input>
  <vt-progress />
  <vt-text>Successfully installed spacy</vt-text>
  <vt-text />
  <vt-input>python -m spacy download en</vt-input>
  <vt-progress />
  <vt-text>Installed model 'en'</vt-text>
  <vt-text />
  <vt-input>python</vt-input>
  <vt-input prompt=">>>">import spacy</vt-input>
  <vt-input prompt=">>>">nlp = spacy.load('en')</vt-input>
  <vt-input prompt=">>>">doc = nlp(u'Hello world')</vt-input>
  <vt-input prompt=">>>">print([(w.text, w.pos_) for w in doc])</vt-input>
  <vt-text>[('Hello', 'INTJ'), ('world', 'NOUN')]</vt-text>
</v-termynal>

Light theme

npm uninstall reactAre you sure you want to uninstall 'react'?yUninstalled 'react'nodeArray(5).fill('🦄 ')['🦄', '🦄', '🦄', '🦄', '🦄']cd ~/reposgit checkout branch mastergit commit -m "Fix things"

template

<v-termynal
  :type-delay="40"
  :line-delay="700"
  :start-delay="0"
  forward-button
  restart-button
>
  <vt-input prompt="▲">npm uninstall react</vt-input>
  <vt-text>Are you sure you want to uninstall 'react'?</vt-text>
  <vt-input prompt="(y/n)" :type-delay="1000">y</vt-input>
  <vt-progress progress-char="·" />
  <vt-text>Uninstalled 'react'</vt-text>
  <vt-input prompt="▲">node</vt-input>
  <vt-input prompt=">">Array(5).fill('🦄 ')</vt-input>
  <vt-text>['🦄', '🦄', '🦄', '🦄', '🦄']</vt-text>
  <vt-input prompt="▲">cd ~/repos</vt-input>
  <vt-input prompt="▲  ~/repos">git checkout branch master</vt-input>
  <vt-input prompt="▲  ~/repos (master)">git commit -m "Fix things"</vt-input>
</v-termynal>

css

:root {
  --vt-color-bg: #ddd;
  --vt-color-text: #1a1e24;
  --vt-color-text-subtle: #d76d77;
  --vt-color-btn: #881823;
  --vt-color-btn-hover: #460c12;
}

Text elements as explanations

💬 Go to the home directorycd💬 Create a directory for all your code projectsmkdir code💬 Enter into that code directorycd code💬 Create a directory for this projectmkdir sqlmodel-tutorial💬 Enter into that directorycd sqlmodel-tutorial

template

<v-termynal forward-button restart-button>
  <vt-text class="comment">💬 Go to the home directory</vt-text>
  <vt-input>cd</vt-input>
  <vt-text class="comment"
    >💬 Create a directory for all your code projects</vt-text
  >
  <vt-input>mkdir code</vt-input>
  <vt-text class="comment">💬 Enter into that code directory</vt-text>
  <vt-input>cd code</vt-input>
  <vt-text class="comment">💬 Create a directory for this project</vt-text>
  <vt-input>mkdir sqlmodel-tutorial</vt-input>
  <vt-text class="comment">💬 Enter into that directory</vt-text>
  <vt-input>cd sqlmodel-tutorial</vt-input>
</v-termynal>

css

.comment {
  color: #4a968f;
  font-style: italic;
}

Spinners

Frame delay is the default (80 ms) where not specified.

dots (default)

dots2

dots3

dots4

line (frame-delay: 130)

line2 (frame-delay: 100)

simpleDots (frame-delay: 400)

simpleDotsScrolling (frame-delay: 200)

bounce (frame-delay: 120)

arc (frame-delay: 100)

circleQuarters (frame-delay: 180)

bouncingBar

bouncingBall

clock (frame-delay: 100)

christmas (frame-delay: 400)

point (frame-delay: 125)

aesthetic