We build
|
The typewriter effect is perfect for landing page heroes where you want to highlight multiple value propositions without taking up vertical space.
Overview
The Typewriter component is a lightweight, dependency-free (other than framer-motion for the blinking cursor) React component that simulates typing text. It can take a single string to type out once, or an array of strings to infinitely loop through, deleting the previous string before typing the next one.
Usage
Single String
import { Typewriter } from "@/components/creative/typewriter"
export default function SingleString() {
return (
<h1>
Loading system... <Typewriter text="Done." loop={false} />
</h1>
)
}
Rotating Array
import { Typewriter } from "@/components/creative/typewriter"
export default function Hero() {
const words = ["Designers.", "Engineers.", "Creators."]
return (
<h1>
Built for <Typewriter text={words} cursorClassName="text-blue-500" />
</h1>
)
}
Usage Guide
1. Import the Component
Import the component into your React or Next.js page:
import { Typewriter } from "@/components/creative/typewriter";
2. Implementation Example
Render the component and customize its behavior by passing props:
import { Typewriter } from "@/components/creative/typewriter";
export default function Example() {
return (
<div className="w-full flex items-center justify-center p-8">
<Typewriter
text="example"
speed{10}
deleteSpeed{10}
/>
</div>
);
}