Perspective Text
パースペクティブテキスト
Lines that rotate through a vanishing point as they pass: each one arrives pitched away from you, comes flat and fully lit as it reaches the middle, then tips over the other way. Every line owns its own window of the scroll, so the effect runs backwards when you scroll back. Built with CSS perspective↗↗, Framer Motion and Tailwind CSS.
Lines arrive tilted away
come flat at the middle
then tip the other way
as the scroll carries on
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 PerspectiveTextProps = {
lines: string[],
tilt?: number,
height?: number,
dark?: boolean
How to use it3
"use client"
import { PerspectiveText } from "@/components/ui/perspective-text"
const lines = ["First line", "Second line", "Third line"]
export default function Page() {
return <PerspectiveText lines={lines} tilt={55} />
}
Props
PerspectiveText
| Name | Default | Description |
|---|---|---|
| lines | — | string[] The lines to tilt through the scroll |
| tilt | 55 | number Degrees a line is pitched at the edges of its window |
| height | 420 | number Height of the scrollable viewport in pixels |
| dark | false | boolean Render the dark palette |