StackBits - React UI & Full-Stack Code Library

Texts > Fade In Text

👀 Fade In Text

FadeInText is a React component that animates text with a smooth fade-in effect, revealing each word individually as it comes into view. Built with Framer Motion, it enhances readability, engagement, and user experience by dynamically displaying content. Perfect for headings, quotes, landing pages, and interactive UI elements, this text animation component makes your website feel more polished and engaging. 🎭✨

Preview

"The Shadows Are Mine"
- A Batman Monologue

Gothamissick.Acityontheedge,teeteringbetweenorderandchaos.Thepeoplewhorunit—politicians,businessmen,crimelords—theywantyoutobelievetheyhavecontrol.ButIseethetruth.Iseethecracksintheirfoundation,thecorruptionthateatsawayateverything.Thiscityisrotting,andnoonewantstoadmitit.Noonewantstofacethemonstershidinginthedark.ButIamnotafraidofthedark.Ibecameit.Iletitconsumeme.Becausesomeonehasto.Theycallmeavigilante.Amenace.Amadmaninamask.Maybethey’reright.MaybeallIamisamanclingingtoawarhecanneverwin.ButIcan’tstop.Iwon’tstop.BecauseIknowwhathappenswhengoodmendonothing.Whenfearisallowedtorule.I’veseenwhatGothambecomeswithoutsomeonewillingtofightforit.Iwon’tletthathappenagain.Itriedtobevengeance.Ithoughtfearwasenough—thatifIcouldmakecriminalsafraid,Icouldstopthem.Butfearisatool,notasolution.I’velearnedthatthehardway.Fearmightmakeamanhesitatebeforepullingthetrigger,butitwon’tchangehisheart.Fearistemporary.Justiceissomethingmore.I’vepaidforthiswarinblood—myownandthatofthepeopleI’vefailedtosave.Everynight,Iheartheechoesofthepast,thevoicesofthoseIcouldn’tprotect.Myparents.Theinnocentliveslostinalleywaysandabandonedstreets.Itellmyselftheirdeathsweren’tinvain.Thattheirlossfuelsmyfight.Butsomenights,IwonderifI’mlyingtomyself.IfthisisalljustawaytojustifytherageIfeelinside.Becausethetruthis…therageneverfades.Butrageisn’tjustice.Vengeanceisn’tenough.Ihavetobemore.Notjustasymboloffear—butasymbolofhope.BecauseGothamdoesn’tneedanothermonsterlurkinginthedark.Itneedssomethingstronger.Somethingincorruptible.Aprotector.Aknight.Idon’tdothisbecauseIwantto.IdoitbecauseIhaveto.BecauseifIdon’t,whowill?Imadeapromise,longago,inthecoldofadarkalley.ApromisethatIwouldneverletanotherchildlosetheirparentsthewayIlostmine.ThatIwouldstandbetweenGothamandtheabyss.Imaynotbetheherothiscitywants,butIamtheoneitneeds.AndaslongasIdrawbreath,Iwillfight.BecauseIamvengeance.Iamthenight.IamBatman.

Follow below steps 👇🏻

Install dependencies

1npm i framer-motion

Component

Create a file fade-in-text.tsx in your components folder and paste this code

1'use client';
2
3import { motion } from 'framer-motion';
4import { useRef } from 'react';
5
6type FadeInTextProps = {
7  text: string;
8  className?: string;
9};
10
11const FadeInText: React.FC<FadeInTextProps> = ({ text, className }) => {
12  const ref = useRef(null);
13
14  return (
15    <div ref={ref} className={`flex flex-wrap h-full w-full gap-2 ${className}`}>
16      {text.split(' ').map((word, index) => (
17        <motion.span
18          key={index}
19          initial={{ opacity: 0.2 }}
20          whileInView={{ opacity: 1 }}
21          viewport={{ once: true }}
22          transition={{ duration: 0.6, delay: 0.5 }}
23          className="inline-block"
24        >
25          {word}
26        </motion.span>
27      ))}
28    </div>
29  );
30};
31
32export default FadeInText;

Usage

1<FadeInText
2    text="Gotham is sick. A city on the edge, teetering between order and chaos. The people who run it—politicians, businessmen, crime lords—they want you to believe they have control. But I see the truth. I see the cracks in their foundation, the corruption that eats away at everything. This city is rotting, and no one wants to admit it. No one wants to face the monsters hiding in the dark. But I am not afraid of the dark. I became it. I let it consume me. Because someone has to. They call me a vigilante. A menace. A madman in a mask. Maybe they’re right. Maybe all I am is a man clinging to a war he can never win. But I can’t stop. I won’t stop. Because I know what happens when good men do nothing. When fear is allowed to rule. I’ve seen what Gotham becomes without someone willing to fight for it. I won’t let that happen again. I tried to be vengeance. I thought fear was enough—that if I could make criminals afraid, I could stop them. But fear is a tool, not a solution. I’ve learned that the hard way. Fear might make a man hesitate before pulling the trigger, but it won’t change his heart. Fear is temporary. Justice is something more. I’ve paid for this war in blood—my own and that of the people I’ve failed to save. Every night, I hear the echoes of the past, the voices of those I couldn’t protect. My parents. The innocent lives lost in alleyways and abandoned streets. I tell myself their deaths weren’t in vain. That their loss fuels my fight. But some nights, I wonder if I’m lying to myself. If this is all just a way to justify the rage I feel inside. Because the truth is… the rage never fades. But rage isn’t justice. Vengeance isn’t enough. I have to be more. Not just a symbol of fear—but a symbol of hope. Because Gotham doesn’t need another monster lurking in the dark. It needs something stronger. Something incorruptible. A protector. A knight. I don’t do this because I want to. I do it because I have to. Because if I don’t, who will? I made a promise, long ago, in the cold of a dark alley. A promise that I would never let another child lose their parents the way I lost mine. That I would stand between Gotham and the abyss. I may not be the hero this city wants, but I am the one it needs. And as long as I draw breath, I will fight. Because I am vengeance. I am the night. I am Batman."
3    className="text-xl font-medium text-neutral-200"
4/>

⭐️ Got a question or feedback?
Feel free to reach out!