Text Motion

Headline entrances driven entirely by your own custom Framer Motion variants.

textmotionvariantsheadlineanimationtypographycustom

Overview

Text Motion is a React and Tailwind CSS text animation that runs your own Framer Motion variants on every word, character, or line of a headline, in Next.js or any React app. Pass hidden and show variants and it splits the string, staggers the pieces across one duration, and starts on mount or when scrolled into view, once or every time. The as prop keeps the element a real heading, and screen readers get the whole string while the animated pieces stay hidden from them. Reduced motion renders the settled show state with no stagger.

Installation

Run the following command

~/your-project

pnpm dlx wensity@latest add text-motion

Usage

Import TextMotion from @/components/wensity/text-motion and render it anywhere in your React or Next.js app. The source lands in your own repo, so every prop, class and animation below is yours to edit.

app/example.tsx

 1import { TextMotion } from "@/components/wensity/text-motion";
 2import type { Variants } from "framer-motion";
 3
 4const variants: Variants = {
 5  hidden: { opacity: 0, y: 20, rotate: 3, scale: 0.95 },
 6  show: {
 7    opacity: 1,
 8    y: 0,
 9    rotate: 0,
10    scale: 1,
11    transition: { type: "spring", damping: 12, stiffness: 200 },
12  },
13};
14
15export default function Example() {
16  return (
17    <TextMotion
18      as="h1"
19      text="Wavy Motion!"
20      by="character"
21      variants={variants}
22      className="font-display text-4xl font-semibold"
23    />
24  );
25}

Props

Prop	Type	Default	Description
`text`	string	-	The string to animate.
`variants`	Variants	-	Framer Motion variants with hidden / show keys for each segment.
`by`	"text" \| "word" \| "character" \| "line"	"word"	How to split the string for staggering.
`as`	"p" \| "span" \| "div" \| "h1" \| "h2" \| "h3" \| "h4" \| "h5" \| "h6"	"p"	Tag rendered as the outer element.
`duration`	number	0.3	Stagger = duration / segment count.
`delay`	number	0	Delay before the cascade starts, in seconds.
`startOnView`	boolean	false	When true, wait for viewport entry. When false, play on mount.
`once`	boolean	true	Play only once when using viewport trigger.

Featured in React hero section components.