You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
50 lines
1.1 KiB
50 lines
1.1 KiB
3 months ago
|
<template>
|
||
|
|
<div class="flex justify-center">
|
||
|
|
<div
|
||
|
|
v-for="(letter, index) in letters"
|
||
|
|
:key="letter"
|
||
|
|
>
|
||
|
|
<Motion
|
||
|
|
as="h1"
|
||
|
|
:initial="pullupVariant.initial"
|
||
|
|
:animate="pullupVariant.animate"
|
||
|
|
:transition="{
|
||
|
|
delay: index * (props.delay ? props.delay : 0.05),
|
||
|
|
}"
|
||
|
|
:class="
|
||
|
|
cn(
|
||
|
|
'font-display text-center text-4xl font-bold tracking-[-0.02em] text-black drop-shadow-sm md:text-4xl md:leading-[5rem]',
|
||
|
|
props.class,
|
||
|
|
)
|
||
|
|
"
|
||
|
|
>
|
||
|
|
<span v-if="letter === ' '"> </span>
|
||
|
|
<span v-else>{{ letter }}</span>
|
||
|
|
</Motion>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script setup lang="ts">
|
||
|
|
import { Motion } from 'motion-v';
|
||
|
|
import { cn } from '@/lib/utils';
|
||
|
|
|
||
|
|
interface LetterPullupProps {
|
||
|
|
class?: string;
|
||
|
|
words: string;
|
||
|
|
delay?: number;
|
||
|
|
}
|
||
|
|
|
||
|
|
const props = defineProps<LetterPullupProps>();
|
||
|
|
|
||
|
|
const letters = props.words.split('');
|
||
|
|
|
||
|
|
const pullupVariant = {
|
||
|
|
initial: { y: 100, opacity: 0 },
|
||
|
|
animate: {
|
||
|
|
y: 0,
|
||
|
|
opacity: 1,
|
||
|
|
},
|
||
|
|
};
|
||
|
|
</script>
|