mirror of
https://github.com/DavidHDev/vue-bits.git
synced 2026-03-07 06:29:30 -07:00
30 lines
772 B
TypeScript
30 lines
772 B
TypeScript
import code from '@content/TextAnimations/BlurText/BlurText.vue?raw';
|
|
import type { CodeObject } from '../../../types/code';
|
|
|
|
export const blurText: CodeObject = {
|
|
cli: `npx jsrepo add https://vue-bits.dev/ui/TextAnimations/BlurText`,
|
|
installation: `npm install motion-v`,
|
|
usage: `<template>
|
|
<BlurText
|
|
text="Isn't this so cool?!"
|
|
:delay="200"
|
|
class-name="text-2xl font-semibold text-center"
|
|
animate-by="words"
|
|
direction="top"
|
|
:threshold="0.1"
|
|
root-margin="0px"
|
|
:step-duration="0.35"
|
|
@animation-complete="handleAnimationComplete"
|
|
/>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import BlurText from "./BlurText.vue";
|
|
|
|
const handleAnimationComplete = () => {
|
|
console.log('All animations complete!');
|
|
};
|
|
</script>`,
|
|
code
|
|
};
|