Components
An improved version of the Text Rotate component from Fancy Components.
This component is also available on Namer UI: https://namer-ui.netlify.app/
Credit: https://www.fancycomponents.dev/docs/components/text/text-rotate
Loading preview...
import { TextSwap } from "@/components/ui/text-swap";
export default function DemoOne() {
return (
<div style={{
display: 'flex',
flexWrap: 'wrap',
gap: '36px',
justifyContent: 'center',
padding: '32px',
}}>
{/* First (original) item */}
<div
style={{
width: "100%",
display: "flex",
flexDirection: "column",
alignItems: "center",
}}
>
<div
style={{
fontWeight: 700,
fontSize: "3rem",
lineHeight: 1.1,
}}
>
<TextSwap
texts={[
"Next.js",
"Tailwind",
"Framer Motion",
"GSAP",
"Namer UI",
]}
mainClassName="px-3 py-2 bg-[#00a0d8] overflow-hidden py-1 md:py-2 justify-center rounded-lg"
staggerFrom="last"
initial={{ y: "100%" }}
animate={{ y: 0 }}
exit={{ y: "-120%" }}
staggerDuration={0.025}
splitLevelClassName="overflow-hidden"
transition={{ type: "spring", damping: 30, stiffness: 400 }}
rotationInterval={2000}
style={{
boxShadow: 'none',
background: "#00a0d8",
color: "#fff",
fontWeight: 700,
fontSize: "2.4rem",
minHeight: 100,
display: "flex",
alignItems: "center",
justifyContent: "center",
}}
/>
</div>
</div>
{/* Second (purple, Hebrew) item */}
<div
style={{
width: "100%",
display: "flex",
flexDirection: "column",
alignItems: "center",
direction: "rtl",
}}
>
<div
style={{
fontWeight: 700,
fontSize: "3rem",
lineHeight: 1.1,
}}
>
<TextSwap
texts={[
"מדבר",
"בלוברי לום",
"פיתוח אתרים",
"נמר",
]}
mainClassName="px-3 py-2 bg-[#7c3aed] overflow-hidden py-1 md:py-2 justify-center rounded-[32px]"
staggerFrom="first"
initial={{ y: "-100%" }}
animate={{ y: 0 }}
exit={{ y: "120%" }}
staggerDuration={0.05}
splitLevelClassName="overflow-hidden"
transition={{ type: "spring", damping: 18, stiffness: 180, mass: 0.8 }}
rotationInterval={1800}
style={{
boxShadow: 'none',
background: "#7c3aed",
color: "#111014",
fontWeight: 700,
fontSize: "2.4rem",
minHeight: 100,
display: "flex",
alignItems: "center",
justifyContent: "center",
borderRadius: "32px",
}}
/>
</div>
</div>
</div>
);
}