Text Reveal
テキストリビール
A paragraph pinned mid viewport while the page scrolls past it, each word fading up in sequence. The reveal is tied to scroll position, so it runs backwards when you scroll back. Built with Framer Motion useScroll↗↗ and Tailwind CSS.
Scrollslowlyandeachwordliftsoutofthepageinturn,becauseeverywordownsitsownsliceofthecontainer'sscrollprogressratherthanwaitingonatimer.
Installation
Install the following dependencies:1
npm install framer-motionCopy and paste the following code into a new component file:2
"use client"
import { motion, useScroll, useTransform, type MotionValue } from "framer-motion"
import { useRef } from "react"
type TextRevealProps = {
text: string,
height?: number,
dim?: number,
dark?: boolean
How to use it3
"use client"
import { TextReveal } from "@/components/ui/text-reveal"
export default function Page() {
return <TextReveal text="Scroll slowly and each word lifts out of the page in turn." />
}
Props
TextReveal
| Name | Default | Description |
|---|---|---|
| text | — | string The paragraph to reveal, split on spaces |
| height | 420 | number Height of the scrollable viewport in pixels |
| dim | 0.15 | number Opacity of a word before it is revealed |
| dark | false | boolean Render the dark palette |