1// This template requires the 'motion' animation library to be installed:
2//
3// npm install motion
4
5"use client";
6
7import { motion } from "motion/react";
8
9const TypewriterText = () => {
10 return (
11 <div className="px-12">
12 <TypeWriter text="Empowering the world to design." />
13 </div>
14 )
15}
16
17const TypeWriter = ({ text }: { text: string }) => {
18 return (
19 <motion.div initial="hidden" whileInView="visible" viewport={{ once: true, amount: "all" }} transition={{ staggerChildren: 0.08 }} className="relative block overflow-hidden text-xl font-black font-mono sm:text-4xl md:text-5xl lg:text-6xl">
20 {text.split("").map((l, i) => (
21 <motion.span className="inline-block" key={i} variants={{ hidden: { opacity: 0 }, visible: { opacity: 1 } }}>
22 {l === " " ? "\u00A0" : l}
23 </motion.span>
24 ))}
25 </motion.div>
26 )
27}
28
29export default TypewriterText;