Components
Loading preview...
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).
@danielpetho
npx shadcn@latest add https://21st.dev/r/danielpetho/scroll-and-swap-text'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
}