playing with space, shape, colour & composition
element = html`<div <span id="type-1"></span></div>`
{
const typed = new Typed.default(element, {
strings: [sentence1, sentence2, sentence3],
typeSpeed: 50,
});
return typed;
}
<hr>
<style>
@import url('https://fonts.googleapis.com/css2?family=Andada+Pro:wght@600&display=swap');
#type-1 {
font-family: 'Andada Pro', serif;
font-size: 72px;
line-height: 78px;
font-weight: 600;
background: #172713;
color: #6bffb3;
padding: 20px;
/* display: inline; */
}
#type-1:after {
font-family: 'Andada Pro', serif;
visibility: visible;
content: '|';
color: #718600;
display: inline-block;
position: relative;
margin-left: 5px;
-moz-animation: flicker 0.1s steps(2, start) infinite, ready 1s steps(2, start) 25s infinite;
-webkit-animation: flicker 0.1s steps(2, start) infinite, ready 1s steps(2, start) 25s infinite;
animation: flicker 0.1s steps(2, start) infinite, ready 1s steps(2, start) 25s infinite;
}
/* Cursor */
.typed-cursor {
display: none;
}
/* If fade out option is set */
.typed-fade-out {
}
</style>
Typed = import("https://cdn.skypack.dev/typed.js@2.0.16")
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
