Security News
ESLint is Now Language-Agnostic: Linting JSON, Markdown, and Beyond
ESLint has added JSON and Markdown linting support with new officially-supported plugins, expanding its versatility beyond JavaScript.
svelte-typewriter
Advanced tools
A simple and reusable typewriter effect for your Svelte applications
# yarn
yarn add -D svelte-typewriter
# npm
npm install -D svelte-typewriter
You need to import the Svelte component, and wrap your elements with the <Typewriter>
component
<script>
import Typewriter from 'svelte-typewriter'
</script>
<Typewriter>
<h1>Testing the typewriter effect</h1>
<h2>The typewriter effect cascades by default</h2>
<p>Lorem ipsum dolor sit amet consectetur</p>
</Typewriter>
You can control the behavior of the typewriter effect by passing specific props to the Typewriter
component
interval
The interval in milliseconds between each letter
default: 30
<Typewriter interval={50}>
<p>Each letter of this paragraph will be displayed with a interval of 50 milliseconds</p>
</Typewriter>
You can also pass a custom array of distinct intervals to mimic human typing
<Typewriter interval={[50, 60, 80]}>
<p>Each letter of this paragraph will be randomly displayed with an interval of 50 or 60 or 80 milliseconds</p>
</Typewriter>
cascade
Enables the cascading mode, where each element is animated sequentially instead of simultaneously
default: false
<Typewriter cascade>
<h1>First</h1>
<h2>Second</h2>
<h3>Third</h3>
</Typewriter>
loop
Warning: won't work if
cascade
is enabled
Cycles the typewriter animation between the children elements of the <Typewriter>
component, the tag name will be determined by the first child of the <Typewriter>
component
default: false
<Typewriter loop>
<p>This is a draft about the loop typewriter effect</p>
<p>This is a draft about svelte-typewriter</p>
<p>This text has nothing to do with the two previous phrases</p>
</Typewriter>
You can also pass a custom time interval between loops in milliseconds (the default interval is 1500 milliseconds)
<Typewriter loop={500}>
<p>This is a draft about the loop typewriter effect</p>
<p>This is a draft about svelte-typewriter</p>
<p>This text has nothing to do with the two previous phrases</p>
</Typewriter>
cursor
Enables/disables the terminal cursor on the Typewriter animation, and also, allows you to pass any valid color name, hex code, rgb/rgba valid values to change the cursor color
<Typewriter>
<p>Terminal vibes, now on the web!</p>
</Typewriter>
<!-- Disables the cursor -->
<Typewriter cursor={false}>
<p>No cursor here :/</p>
</Typewriter>
<!-- Changes the cursor color to green -->
<Typewriter cursor='green'>
<p>All things green</p>
</Typewriter>
default: true
on:done
Executes a specified function after the animation execution has finished
<Typewriter on:done={() => alert('Done!')}>
<h1>A "Done!" will be displayed after...</h1>
<h2>Both of these texts animations are finished</h2>
</Typewriter>
<!-- You can omit both parenthesis and arrow function when you don't need to pass arguments -->
const alertOnDone = () => console.log('Typewriter Effect finished!')
<Typewriter on:done={alertOnDone}>
<p>Lorem ipsum dolor...</p>
<small>...sit amet consectetur</small>
</Typewriter>
default: undefined
FAQs
A simple and reusable typewriter effect for your Svelte applications
The npm package svelte-typewriter receives a total of 4,469 weekly downloads. As such, svelte-typewriter popularity was classified as popular.
We found that svelte-typewriter demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
ESLint has added JSON and Markdown linting support with new officially-supported plugins, expanding its versatility beyond JavaScript.
Security News
Members Hub is conducting large-scale campaigns to artificially boost Discord server metrics, undermining community trust and platform integrity.
Security News
NIST has failed to meet its self-imposed deadline of clearing the NVD's backlog by the end of the fiscal year. Meanwhile, CVE's awaiting analysis have increased by 33% since June.