About
A text component that swaps the letters vertically on scroll. The trick here is similar to the Letter Swap Hover component—duplicate the text, then wrapping the them in a container with relative position, then stack the elements vertically. We use useScroll hook from motion to track the scroll position of the container, and use the scrollYProgress value to offset the vertical position of the elements (by setting the y property of the element).
Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Scroll and Swap Text to your project and fits it to your theme.
Code
How Scroll and Swap Text is used: the demo's code. The component's own source comes with a free account.
Usage.tsx
'use client'
import { useRef } from "react"
import { ScrollAndSwapText } from "@/components/ui/scroll-and-swap-text"
function ScrollQuoteExample() {
const containerRef = useRef<HTMLDivElement>(null)
return (
<div className="w-full min-h-screen flex items-center justify-center p-8 bg-background">
<div className="w-4/6 h-[600px] rounded-3xl border relative">
<div
ref={containerRef}
className="w-full h-full rounded-lg items-center justify-center font-overusedGrotesk p-2 overflow-auto overscroll-auto text-[#E794DA] relative"
>
<div className="h-[100%] flex justify-center items-center uppercase relative">
<p className="absolute bottom-4 left-4 font-bold text-xl">
SCROLL SLOWLY
</p>
<div className="flex md:text-4xl sm:text-3xl text-lg lg:text-5xl cl:text-6xl justify-center items-center flex-col">
<ScrollAndSwapText
label="Every day is a journey,"
offset={["0 0.15", "0 0.35"]}
className="font-bold"
containerRef={containerRef}
/>
<ScrollAndSwapText
label="and the journey"
offset={["0 0.25", "0 0.45"]}
className="font-bold"
containerRef={containerRef}
/>
<ScrollAndSwapText
label="itself is home."
offset={["0 0.35", "0 0.55"]}
className="font-bold"
containerRef={containerRef}
/>
</div>
</div>
<div className="h-[30%]" />
</div>
</div>
</div>
)
}
export {
ScrollQuoteExample
}Dependencies
More by Daniel Petho
View all
Parallax Floating
2.2K
Text Rotate
2.1K
Typewriter
1.9K
Marquee Along SVG Path
1.4K
Image Trail
1.4K
Animated Gradient With SVG
884
Text Cursor Proximity
781
Pixel Trail
645
More in Text
View all
Motion Blur Text
36
Vertical Cut Reveal Characters
103
NeonRGBTextEffect
144
Text Reveal
27
Random Letter Swap
46
Rainbow Text Effect
47
Text Color
545
Blur Reveal
300