Text Roll
テキストロール
Hover and every character rolls out through the top while its copy arrives from below, each one a beat behind the last. The box is clipped to exactly one line, so the two copies pass without either escaping. Built with Framer Motion variants↗↗ and Tailwind CSS.
Components
Hover me
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 } from "framer-motion"
type TextRollProps = {
text: string,
stagger?: number,
duration?: number,
dark?: boolean
}
How to use it3
"use client"
import { TextRoll } from "@/components/ui/text-roll"
export default function Page() {
return <TextRoll text="Components" stagger={0.025} />
}
Props
TextRoll
| Name | Default | Description |
|---|---|---|
| text | — | string The text to roll, split per character |
| stagger | 0.025 | number Seconds each character waits behind the one before it |
| duration | 0.35 | number Seconds a single character takes to roll |
| dark | false | boolean Render the dark palette |