Skip to main content

Documentation Index

Fetch the complete documentation index at: https://mintlify.com/apursley2012/cosmic-developer/llms.txt

Use this file to discover all available pages before exploring further.

TeletypeText brings the aesthetic of a command-line terminal to the portfolio’s headings and status labels. Feed it a string and an optional delay, and it will tick through every character one by one at a fixed 50 ms interval — complete with a blinking aurora-teal cursor block that disappears the moment the last character lands. The effect makes static labels feel like live system output.

​
Props

PropTypeDefaultDescription
textstringrequiredThe full string to reveal character by character
delaynumber0Seconds to wait before the typing animation begins
classNamestring""Optional extra Tailwind classes applied to the outer <span>

​
Usage

import { T as TeletypeText } from '../components/cosmos/TeletypeText'

<div className="font-mono text-aurora-teal mb-2 text-sm">
  <TeletypeText text="System Online // Signal Acquired" delay={0.5} />
</div>
TeletypeText renders a plain <span>, so it flows naturally inside any block or inline context. Wrap it in a styled container to control colour, font size, and spacing independently of the component itself.

​
How It Works

1

State initialisation

Two pieces of state are initialised: displayed (an empty string that grows as characters are added) and isDone (a boolean that turns true once every character has been revealed, causing the blinking cursor to disappear).
2

Delay then type

A useEffect fires when text or delay changes. It sets a setTimeout for delay * 1000 milliseconds. Once the timeout fires, a setInterval starts ticking at 50 ms per character.
// Simplified internal logic
const timeout = setTimeout(() => {
  const interval = setInterval(() => {
    if (index <= text.length) {
      setDisplayed(text.slice(0, index))
      index++
    } else {
      clearInterval(interval)
      setIsDone(true)
    }
  }, 50)
}, delay * 1000)
3

Blinking cursor

While isDone is false, a Framer Motion <motion.span> is rendered after the displayed text. It animates opacity between 1 and 0 on a 0.5 s infinite loop, visually identical to a terminal cursor block (w-2 h-[1em] bg-aurora-teal align-middle).
4

Cleanup

The useEffect cleanup function calls both clearTimeout and clearInterval, preventing timer leaks if the component unmounts before the animation completes (e.g. during a page transition).

​
Styling

TeletypeText outputs unstyled text inside a <span>. All visual treatment — font family, colour, size, spacing — should be applied on a wrapper element: 
{/* Status label at the top of a page */}
<div className="font-mono text-aurora-teal mb-4 tracking-widest uppercase text-sm">
  <TeletypeText text="System Online // Signal Acquired" delay={0.5} />
</div>

{/* Subdued secondary label */}
<div className="font-mono text-aurora-magenta mb-2 text-sm">
  <TeletypeText text="Scanning sector... Bio-data retrieved." />
</div>

{/* Violet accent, used in the Mission Log page */}
<div className="font-mono text-aurora-violet mb-2 text-sm">
  <TeletypeText text="Accessing flight logs..." />
</div>
Common class patterns pulled directly from the source pages:
ContextClasses
Home hero statusfont-mono text-aurora-teal mb-4 tracking-widest uppercase text-sm
About pagefont-mono text-aurora-magenta mb-2 text-sm
Skills pagefont-mono text-aurora-green mb-2 text-sm
Work / timelinefont-mono text-aurora-violet mb-2 text-sm
TeletypeText uses font-mono, which resolves to JetBrains Mono as defined in main.css. The typewriter effect pairs naturally with this monospaced font because every character occupies the same horizontal width, so the container does not reflow as new characters appear.
Use the delay prop to stagger multiple TeletypeText instances that appear on the same page. For example, setting delay={0} on a primary label and delay={1.5} on a secondary one ensures the first line finishes before the second begins, creating a cascading terminal boot-sequence feel.
<TeletypeText text="> Initialising systems..." delay={0} />
<TeletypeText text="> All systems nominal." delay={1.5} />
<TeletypeText text="> Ready for launch." delay={3} />

Build docs developers (and LLMs) love

Get started for freeTalk to us