(chore) init commit and add tasks
This commit is contained in:
@@ -0,0 +1,43 @@
|
||||
'use client'
|
||||
|
||||
import { motion } from 'framer-motion'
|
||||
|
||||
interface ProgressiveTextProps {
|
||||
texts: string[]
|
||||
className?: string
|
||||
}
|
||||
|
||||
export function ProgressiveText({ texts, className }: ProgressiveTextProps) {
|
||||
const container = {
|
||||
hidden: { opacity: 0 },
|
||||
visible: (i = 1) => ({
|
||||
opacity: 1,
|
||||
transition: { staggerChildren: 0.12, delayChildren: 0.04 * i },
|
||||
}),
|
||||
}
|
||||
|
||||
const child = {
|
||||
hidden: { opacity: 0, y: 10 },
|
||||
visible: {
|
||||
opacity: 1,
|
||||
y: 0,
|
||||
transition: { duration: 0.5 },
|
||||
},
|
||||
}
|
||||
|
||||
return (
|
||||
<motion.div
|
||||
className={className}
|
||||
variants={container}
|
||||
initial="hidden"
|
||||
animate="visible"
|
||||
>
|
||||
{texts.map((text, i) => (
|
||||
<motion.div key={i} variants={child} className="inline">
|
||||
{text}
|
||||
{i < texts.length - 1 && ' '}
|
||||
</motion.div>
|
||||
))}
|
||||
</motion.div>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user