Text Motion

Text 7

About

A flexible text animation that splits a headline by word, character or line and animates each piece with your own Framer Motion variants. Respects reduced motion.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Text Motion to your project and fits it to your theme.

Code

How Text Motion is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

"use client";

import * as React from "react";
import { type Variants } from "framer-motion";
import { TextMotion } from "@/components/ui/text-motion";

const settings = {
  text: "Wavy Motion!",
  delay: 0,
  duration: 0.3,
  replay: 0,
};

const demoVariants: Variants = {
  hidden: {
    opacity: 0,
    y: 30,
    rotate: 45,
    scale: 0.5,
  },
  show: (i: number) => ({
    opacity: 1,
    y: 0,
    rotate: 0,
    scale: 1,
    transition: {
      delay: i * 0.1,
      duration: 0.4,
      y: {
        type: "spring",
        damping: 12,
        stiffness: 200,
        mass: 0.8,
      },
      rotate: {
        type: "spring",
        damping: 8,
        stiffness: 150,
      },
      scale: {
        type: "spring",
        damping: 10,
        stiffness: 300,
      },
    },
  }),
  exit: (i: number) => ({
    opacity: 0,
    y: 30,
    rotate: 45,
    scale: 0.5,
    transition: {
      delay: i * 0.1,
      duration: 0.4,
    },
  }),
};

const previewClass =
  "text-center text-4xl font-bold tracking-tighter text-foreground md:text-6xl";

export function TextMotionPreview(props: Partial<typeof settings> = {}) {
  const state = { ...settings, ...props };

  return (
    <div className="grid min-h-[360px] w-full place-items-center px-4 py-12 text-center sm:px-8">
      <TextMotion
        key={state.replay}
        text={state.text || "Wavy Motion!"}
        as="h1"
        by="character"
        variants={demoVariants}
        delay={state.delay}
        duration={state.duration}
        startOnView={false}
        className={previewClass}
      />
    </div>
  );
}

export default function Demo(props: Partial<typeof settings>) {
  return <TextMotionPreview {...props} />;
}