<link rel="stylesheet" href="https://unpkg.com/@auroratide/typewritten-text/lib/style.css" />
<script type="module" src="https://unpkg.com/@auroratide/typewritten-text/lib/define.js"></script>
<section>
<p>This is a <typewritten-text><strong>typewriter effect!</strong></typewritten-text></p>
<p>It supports <typewritten-text><em>inner</em> <strong>markdown</strong> <span class="special">elements</span>.</typewritten-text></p>
<p>The typing rate <typewritten-text letter-interval="25">can be adjusted as well.</typewritten-text></p>
<p>And here's a <typewritten-text class="fancy">fancy cursor.</typewritten-text></p>
<button id="rerun">Rerun</button>
</section>
:root {
--font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
--code-font: SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;
--color-bg: hsl(0, 0%, 93%);
--color-fg: hsl(0, 0%, 100%);
--color-primary: 211, 69%, 57%;
}
*, *::before, *::after {
box-sizing: border-box;
margin-top: 0;
}
body {
font-family: var(--font);
padding: 0.5em;
background: var(--color-bg);
}
section {
font-size: 1.5em;
background-color: var(--color-fg);
padding: 1em;
border-radius: 0.25em;
border: 0.0625em solid hsla(var(--color-primary), 1);
box-shadow: 0.125em 0.125em 0.25em hsla(0, 0%, 0%, 0.15) inset;
position: relative;
margin: 0 0 1rem;
}
button {
font-family: var(--font);
font-size: 0.75em;
border-radius: 0.25em;
border: none;
padding: 0.625em 1.125em;
color: var(--color-fg);
text-transform: uppercase;
letter-spacing: 0.0625em;
box-shadow: 0 0.25em 0.25em -0.125em rgba(0, 0, 0, 0.25);
cursor: pointer;
background: hsl(var(--color-primary));
}
button:hover {
box-shadow: 0 0.25em 0.25em -0.125em rgba(0, 0, 0, 0.25), 0 0 0 3em rgba(0, 0, 0, 0.2) inset;
}
button:active, button[disabled] {
box-shadow: 0 0 0 3em rgba(0, 0, 0, 0.3) inset;
}
button[disabled] {
pointer-events: none;
opacity: 0.5;
}
section button {
position: absolute;
font-size: 0.667em;
bottom: 0.25em;
right: 0.25em;
}
.special {
font-size: 1.25em;
color: maroon;
}
.fancy .typewritten-text_character::after,
.fancy .typewritten-text_start::after {
border-right: none;
border-bottom: 0.125em solid red;
width: 1ch;
right: -1ch;
}
document.getElementById('rerun').onclick = () => {
document.querySelectorAll('typewritten-text').forEach(elem => {
elem.start()
})
}
document.querySelectorAll('typewritten-text').forEach(elem => {
elem.addEventListener('typewritten-text:phraseremoved', () => {
setTimeout(elem.start, elem.phraseInterval)
})
})
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.