D3XSKY / vue-typical

🐡 Vue Animated typing in ~400 bytes of JavaScript.

English | 简体中文

vue-typical

Vue Animated typing in ~400 bytes 🐡 of JavaScript. Preview →

📦 Install

You can install vue-typical via npm:

npm install vue-typical

Or use it directly in browser via cdn service:

<script src="https://cdn.jsdelivr.net/npm/vue-typical@latest/dist/typical.umd.min.js"></script>

🚀 Usage

<typical
  :steps="['Hello', 1000, 'Hello world!', 500]"
  :wrapper="'h2'"
></typical>
<typical
  class="typicalWrapper"
  :steps="['Fucking', 1000, 'Fucking Awesome!', 500, 'Fucking Awesome! Aha :-) 👋', 1000]"
  :loop="Infinity"
  :wrapper="'h3'"
></typical>

📑 Properties

Prop	Required	Type	Eg.
steps	True	Array<String | Number | Function>	['Hello', 1000, () => alert('Word')]
loop	False	Number	1 or 'Infinity'
wrapper	False	String	'div'

✨ Style

Add the blink cursor effect with typicalWrapper classname.

.typicalWrapper::after {
  content: "|";
  animation: blink 1s infinite step-start;
}

@keyframes blink {
  50% { opacity: 0; }
}

🔨 Contributing

npm install

Compiles and hot-reloads for development

npm run serve

Compiles and minifies for production

npm run build

❤️ Contributors

Thanks goes to these people (emoji key):

Turkyden 💻📖🚇⚠️

KnowsCount 📖

License

This library is based on @camwiegert/typical work and it currently is just a wrapper for vue.

Inspired by @catalinmiron/react-typical.

MIT © Turkyden