Typewriter

<quiet-typewriter>

stable

since 1.0

Typewriters simulate a natural typing effect with customizable speed, delay, and looping options.

<quiet-typewriter 
  text="Hello, World!" 
  speed="100"
  delay="500"
  loop
  with-cursor
  style="font-size: 2.5rem; font-weight: var(--quiet-font-weight-bold);"
></quiet-typewriter>

Typewriter honors the user's prefers-reduced-motion setting. If you're not seeing animations, this might be why. To override this behavior, which is generally not recommended, use the ignore-reduced-motion attribute.

Examples Jump to heading

Providing text Jump to heading

Use the text attribute set the text to animate.

Restart

<div id="typewriter__text">
  <p>
    <quiet-typewriter text="Cats are fluffy masters of stealth and napping."></quiet-typewriter>
  </p>
  <quiet-button>Restart</quiet-button>
</div>

<script>
  const container = document.getElementById('typewriter__text');
  const typewriter = container.querySelector('quiet-typewriter');
  const button = container.querySelector('quiet-button');

  button.addEventListener('click', () => {
    typewriter.restart();
  });
</script>

Showing the cursor Jump to heading

Add with-cursor to show a cursor while typing. If desired, use --cursor-color to change the cursor's color.

Restart

<div id="typewriter__cursor">
  <p>
    <quiet-typewriter 
      text="Cats are agile hunters with a knack for ignoring you."
      with-cursor
    ></quiet-typewriter>
  </p>
  <quiet-button>Restart</quiet-button>
</div>

<script>
  const container = document.getElementById('typewriter__cursor');
  const typewriter = container.querySelector('quiet-typewriter');
  const button = container.querySelector('quiet-button');

  button.addEventListener('click', () => {
    typewriter.restart();
  });
</script>

Looping Jump to heading

Use the loop attribute to make the typewriter delete the text and type it again when it finishes typing. The loop-delay attribute controls the pause between typing and erasing.

<quiet-typewriter 
  text="Cats love chasing their tails in an endless loop of chaos." 
  loop 
  loop-delay="1000"
></quiet-typewriter>

Controlling speed and delay Jump to heading

Use the delay attribute to set the time before typing begins and the speed attribute to control the average typing speed.

Restart

<div id="typewriter__speed">
  <p>
    <quiet-typewriter 
      text="Cats type slowly with a dramatic pause." 
      delay="1500" 
      speed="300"
      with-cursor
    ></quiet-typewriter>
  </p>
  <quiet-button>Restart</quiet-button>
</div>

<script>
  const container = document.getElementById('typewriter__speed');
  const typewriter = container.querySelector('quiet-typewriter');
  const button = container.querySelector('quiet-button');

  button.addEventListener('click', () => {
    typewriter.restart();
  });
</script>

Pausing Jump to heading

Add and remove the pause attribute to pause and restart typing at any time. This is typically used with loop.

Pause

<div id="typewriter__pause">
  <p>
    <quiet-typewriter 
      id="typewriter__pause" 
      text="I said pause, not paws!" 
      loop
      with-cursor
    ></quiet-typewriter>
  </p>

  <quiet-button 
    variant="primary" 
    toggle="off" 
    icon-label="Toggle Pause"
  >
    Pause
  </quiet-button>
</div>

<script>
  const container = document.getElementById('typewriter__pause');
  const typewriter = container.querySelector('quiet-typewriter');
  const button = container.querySelector('quiet-button');

  button.addEventListener('click', () => {
    typewriter.pause = button.toggle === 'on';
  });
</script>

Starting when in view Jump to heading

Use the start-on-view attribute to start the animation when the element scrolls into view.

<quiet-typewriter 
  text="I started as soon as I came into view! Refresh the page to watch again." 
  start-on-view 
  with-cursor
></quiet-typewriter>

Listening for completion Jump to heading

Listen for the quiet-animation-complete event to trigger actions when the animation finishes. When using loop, the event will be dispatched each time typing completes.

Restart

<div id="typewriter__complete">
  <p>
    <quiet-typewriter 
      id="typewriter__complete" 
      text="Check the console when this finishes."
    ></quiet-typewriter>
  </p>

  <quiet-button>Restart</quiet-button>
</div>

<script>
  const container = document.getElementById('typewriter__complete');
  const typewriter = container.querySelector('quiet-typewriter');
  const button = container.querySelector('quiet-button');

  typewriter.addEventListener('quiet-animation-complete', () => {
    console.log('Typewriter animation completed!');
  });
  
  button.addEventListener('click', () => {
    typewriter.restart();
  });
</script>

Styling the typewriter Jump to heading

Customize the appearance with CSS for a unique typing effect. Use the --cursor-color and --cursor-width custom properties to change the cursor.

<quiet-typewriter
  text="Styled typewriter effect" 
  with-cursor
  loop
  id="typewriter__styling"
></quiet-typewriter>

<style>
  #typewriter__styling {
    --cursor-color: #ff0000;
    --cursor-width: 0.5em;
    font-size: 24px;
    color: #0066cc;
    font-family: monospace;
  }
</style>

API Jump to heading

Importing Jump to heading

The autoloader is the recommended way to import components but, if you prefer to do it manually, the following code snippets will be helpful.

CDN

npm

To manually import <quiet-typewriter> from the CDN, use the following code.

import 'https://cdn.jsdelivr.net/npm/@quietui/quiet-browser@1.0.0/dist/components/typewriter/typewriter.js';

To manually import <quiet-typewriter> from npm, use the following code.

import '@quietui/quiet/dist/components/typewriter/typewriter.js';

Properties Jump to heading

Typewriter has the following properties that can be set with corresponding attributes. In many cases, the attribute's name is the same as the property's name. If an attribute is different, it will be displayed after the property. Learn more about attributes and properties

Property / Attribute	Description	Type	Default
`text`	The text to type out.	`string`	`''`
`speed`	The average speed in milliseconds to wait between typing each character.	`number`	`50`
`delay`	Delay in milliseconds before the animation starts.	`number`	`250`
`startOnView` `start-on-view`	Whether to start the animation when the component comes into view.	`boolean`	`false`
`withCursor` `with-cursor`	Whether to show a blinking cursor during animation.	`boolean`	`false`
`loop`	Whether to loop the animation with a pause and backspace effect.	`boolean`	`false`
`loopDelay` `loop-delay`	Duration in milliseconds to pause before backspacing when looping.	`number`	`2000`
`pause`	Whether to pause the typewriter animation.	`boolean`	`false`
`ignoreReducedMotion` `ignore-reduced-motion`	By default, no animation will occur when the user indicates a preference for reduced motion. Use this attribute to override this behavior when necessary.	`boolean`	`false`

Methods Jump to heading

Typewriter supports the following methods. You can obtain a reference to the element and call them like functions in JavaScript. Learn more about methods

Name	Description	Arguments
`restart()`	Restarts the animation from the beginning.

Events Jump to heading

Typewriter dispatches the following custom events. You can listen to them the same way was native events. Learn more about custom events

Name	Description
`quiet-animation-complete`	Emitted when the typing animation has completed.

CSS custom properties Jump to heading

Typewriter supports the following CSS custom properties. You can style them like any other CSS property. Learn more about CSS custom properties

Name	Description	Default
`--cursor-color`	The color of the cursor during animation when `with-cursor` is enabled.	`currentColor`
`--cursor-width`	The color of the cursor during animation when `with-cursor` is enabled.	`1.5px`

CSS parts Jump to heading

Typewriter exposes internal elements that can be styled with CSS using the selectors shown below. Learn more about CSS parts

Name	Description	CSS selector
`cursor`	The cursor, a `<span>` element with a styled border.	`::part(cursor)`

Typewriter

Examples Jump to heading #

Providing text Jump to heading #

Showing the cursor Jump to heading #

Looping Jump to heading #

Controlling speed and delay Jump to heading #

Pausing Jump to heading #

Starting when in view Jump to heading #

Listening for completion Jump to heading #

Styling the typewriter Jump to heading #

API Jump to heading #

Importing Jump to heading #

Properties Jump to heading #

Methods Jump to heading #

Events Jump to heading #

CSS custom properties Jump to heading #

CSS parts Jump to heading #

Examples Jump to heading

Providing text Jump to heading

Showing the cursor Jump to heading

Looping Jump to heading

Controlling speed and delay Jump to heading

Pausing Jump to heading

Starting when in view Jump to heading

Listening for completion Jump to heading

Styling the typewriter Jump to heading

API Jump to heading

Importing Jump to heading

Properties Jump to heading

Methods Jump to heading

Events Jump to heading

CSS custom properties Jump to heading

CSS parts Jump to heading