54 lines
1.2 KiB
TypeScript
54 lines
1.2 KiB
TypeScript
'use client'
|
|
|
|
import type { Variants } from 'framer-motion'
|
|
import { motion } from 'framer-motion'
|
|
import { ny } from '@/lib/utils'
|
|
|
|
interface WordPullUpProps {
|
|
words: string
|
|
delayMultiple?: number
|
|
wrapperFramerProps?: Variants
|
|
framerProps?: Variants
|
|
className?: string
|
|
}
|
|
|
|
export default function WordPullUp({
|
|
words,
|
|
wrapperFramerProps = {
|
|
hidden: { opacity: 0 },
|
|
show: {
|
|
opacity: 1,
|
|
transition: {
|
|
staggerChildren: 0.2,
|
|
},
|
|
},
|
|
},
|
|
framerProps = {
|
|
hidden: { y: 20, opacity: 0 },
|
|
show: { y: 0, opacity: 1 },
|
|
},
|
|
className,
|
|
}: WordPullUpProps) {
|
|
return (
|
|
<motion.h1
|
|
variants={wrapperFramerProps}
|
|
initial="hidden"
|
|
animate="show"
|
|
className={ny(
|
|
'font-display text-center text-4xl font-bold leading-[5rem] tracking-[-0.02em] drop-shadow-sm',
|
|
className,
|
|
)}
|
|
>
|
|
{words.split(' ').map((word, i) => (
|
|
<motion.span
|
|
key={i}
|
|
variants={framerProps}
|
|
style={{ display: 'inline-block', paddingRight: '8px' }}
|
|
>
|
|
{word === '' ? <span> </span> : word}
|
|
</motion.span>
|
|
))}
|
|
</motion.h1>
|
|
)
|
|
}
|