Components
Loading preview...
Text generates as if it is being typed on the screen.
@aceternity
npx shadcn@latest add https://21st.dev/r/aceternity/typewriter-effect"use client";
import { TypewriterEffectSmooth } from "@/components/ui/typewriter-effect";
export function TypewriterEffectSmoothDemo() {
const words = [
{
text: "Build",
},
{
text: "awesome",
},
{
text: "apps",
},
{
text: "with",
},
{
text: "Aceternity.",
className: "text-blue-500 dark:text-blue-500",
},
];
return (
<div className="flex flex-col items-center justify-center h-[40rem] ">
<p className="text-neutral-600 dark:text-neutral-200 text-xs sm:text-base ">
The road to freedom starts from here
</p>
<TypewriterEffectSmooth words={words} />
<div className="flex flex-col md:flex-row space-y-4 md:space-y-0 space-x-0 md:space-x-4">
<button className="w-40 h-10 rounded-xl bg-black border dark:border-white border-transparent text-white text-sm">
Join now
</button>
<button className="w-40 h-10 rounded-xl bg-white text-black border border-black text-sm">
Signup
</button>
</div>
</div>
);
}