Text
Title Reveal
Each word rises in turn, then a marker draws under the key word.
"use client";
import { useRef } from "react";
import gsap from "gsap";
import { useGSAP } from "@gsap/react";
gsap.registerPlugin(useGSAP);
export type TitleRevealProps = {
/** One string per line. Words are separated by spaces. */
lines?: string[];
/** The word that gets the highlight marker. */
highlight?: string;
/** Line under the title. */
subtitle?: string;
/** Color of the highlight marker. */
accent?: string;
/** Replay forever with a pause between runs. */
loop?: boolean;
className?: string;
};
export default function TitleReveal({
lines = ["Animations that", "close the sale."],
highlight = "close",
subtitle = "Each word rises in turn. The highlight is drawn last.",
accent = "#1f5bff",
loop = true,
className = "",
}: TitleRevealProps) {
const root = useRef<HTMLDivElement>(null);
useGSAP(
() => {
const q = gsap.utils.selector(root);
// O texto herda a cor da página; a palavra destacada parte dessa cor e vira branca sobre o marcador.
const ink = root.current ? getComputedStyle(root.current).color : "currentColor";
const tl = gsap.timeline({ repeat: loop ? -1 : 0, repeatDelay: 1.6 });
// Cada palavra sobe com um leve desfoque de movimento que some ao chegar.
tl.set(q("[data-word]"), { yPercent: 110, filter: "blur(8px)" })
.set(q("[data-mark]"), { scaleX: 0 })
.set(q("[data-hl]"), { color: ink })
.set(q("[data-sub]"), { autoAlpha: 0, y: 10, filter: "blur(6px)" })
.to(q("[data-word]"), { yPercent: 0, filter: "blur(0px)", duration: 0.85, ease: "expo.out", stagger: 0.08 }, 0.2)
.to(q("[data-mark]"), { scaleX: 1, duration: 0.65, ease: "expo.inOut" }, 1.0)
.to(q("[data-hl]"), { color: "#ffffff", duration: 0.25, ease: "power2.out" }, 1.3)
.to(q("[data-sub]"), { autoAlpha: 1, y: 0, filter: "blur(0px)", duration: 0.6, ease: "expo.out" }, 1.4)
.to({}, { duration: 2 });
if (window.matchMedia("(prefers-reduced-motion: reduce)").matches) tl.progress(1).pause();
},
{ scope: root, dependencies: [loop, lines.join("|"), highlight] },
);
return (
<div ref={root} className={`w-full max-w-xl px-6 py-8 ${className}`}>
{lines.map((line, row) => (
<div
key={row}
className="overflow-hidden pr-[0.15em] pb-1 text-[clamp(2rem,6vw,3.25rem)] leading-[1.05] font-bold tracking-tight"
>
{line.split(" ").map((word, i) => {
const isHighlight = word.replace(/[.,!?]/g, "") === highlight;
return (
<span key={i}>
<span data-word className="inline-block">
{isHighlight ? (
<span data-hl className="relative isolate inline-block">
<i
data-mark
aria-hidden="true"
className="absolute -inset-x-[0.12em] inset-y-[0.04em] -z-10 origin-left"
style={{ backgroundColor: accent }}
/>
{word}
</span>
) : (
word
)}
</span>{" "}
</span>
);
})}
</div>
))}
<p data-sub className="mt-4 text-[15px] text-current/70">
{subtitle}
</p>
</div>
);
}
Paste this into Claude Code inside your project. It installs the skills your agent needs, asks for your texts and colors, and recreates this animation in your stack.
SkillsGSAP skillsHyperFrames · optional, for video
Claude Code
Recreate the "Title Reveal" animated component from Motionshelf (https://motionshelf-pi.vercel.app) in my current project, adapted to my brand. Answer me in the language I write to you in. Work in this order: 1. Tools: Check whether the official GSAP skills are installed (gsap-core, gsap-timeline, gsap-react). If they are not, ask me and then run `npx skills add https://github.com/greensock/gsap-skills` (choose Claude Code). If they do not show up in this session yet, read the SKILL.md files the installer created for gsap-timeline and gsap-react before writing code. 2. Project: Look at my project: framework (Next.js, Vite, plain HTML…), TypeScript or JavaScript, Tailwind or plain CSS. Build it as one component that fits this stack. In React use gsap and @gsap/react; in plain HTML use GSAP from npm or a CDN. 3. Ask me before coding: Ask me these in a single message, showing the example values as defaults: - the headline lines and which word gets the marker - the subtitle - the marker color - the language of the texts 4. The animation What it looks like: A large bold headline on two or three lines, one key word with a solid colored marker behind it, and a short subtitle below. Step by step: - Each word sits in its own overflow-hidden line wrapper and starts pushed down (yPercent 110) and blurred (8px). - At 0.2 s the words rise to place one after another (stagger 0.08 s, 0.85 s each, ease expo.out), losing the blur. - At 1.0 s the marker behind the key word grows from the left (scaleX 0 → 1, 0.65 s, expo.inOut). - At 1.3 s the key word turns white so it reads on the marker. - At 1.4 s the subtitle fades up from 10 px below, then everything holds for 2 s and the loop restarts after 1.6 s. Rules: - Use one GSAP timeline that loops forever with a short pause between runs (repeat: -1). If the step by step gives the pause, use that value; otherwise repeatDelay about 1.4 s. - Set every starting state with set() at the start of the timeline, never with from(): on the second loop from() starts from the wrong place. - Elements that appear later and would push the layout (new chat bubbles, new rows) stay display:none until their turn; elements that already have their place in the layout (a subtitle, a button) start hidden with autoAlpha 0, so nothing jumps. - If there is a cursor or pointer, it aims at the measured center of its target (getBoundingClientRect), never at fixed pixel coordinates; if the component is scaled, divide by the scale. - Blur only in the middle of a movement and always end at blur(0). - With prefers-reduced-motion, jump to the final frame and stop (tl.progress(1).pause()). - In React, use useGSAP from @gsap/react with a scope ref, so the timeline is cleaned up on unmount. - All example content stays generic (no real brands, logos or people). - The headline color is inherited from the page; only the key word is forced to white while it sits on the marker. 5. Check: Run it and watch the first and the third loop (they must look the same). Check it at 390 px wide with no sideways scroll, with reduced motion turned on, and with a clean console. Tell me what you checked. 6. Video (optional): If I also want this as an MP4 (ads, stories, WhatsApp status), install the HyperFrames plugin with `claude plugin marketplace add heygen-com/hyperframes` and `claude plugin install hyperframes@hyperframes`, then use /hyperframes:hyperframes to render the same animation in 9:16, 1:1 or 16:9. Rendering needs FFmpeg installed, or render with --docker (downloads about 3.3 GB the first time). Ask me before installing. Shortcut: If I only want the ready-made component instead, it installs with `npx shadcn@latest add https://motionshelf-pi.vercel.app/r/title-reveal.json`.
Other agentsUsing Cursor, Codex, Gemini CLI or another agent? This version tells it to find its own way to load the same skills before it starts.
Other agents
Recreate the "Title Reveal" animated component from Motionshelf (https://motionshelf-pi.vercel.app) in my current project, adapted to my brand. Answer me in the language I write to you in. Work in this order: 1. Tools: These instructions were written for Claude Code, which uses "skills" (folders with a SKILL.md that teach it a technique). First find out how you load skills, rules or instructions, and get the same knowledge: (a) if your agent is supported by the skills installer, ask me and run `npx skills add https://github.com/greensock/gsap-skills --agent <your-agent>` (for example codex, opencode, antigravity); (b) otherwise copy the skill folders from https://github.com/greensock/gsap-skills into your skills or rules directory (in Cursor: Settings → Rules → Remote Rule (GitHub) → greensock/gsap-skills); (c) if you cannot load skills at all, open the SKILL.md files in https://github.com/greensock/gsap-skills and read them as instructions before coding. Tell me which path you used. 2. Project: Look at my project: framework (Next.js, Vite, plain HTML…), TypeScript or JavaScript, Tailwind or plain CSS. Build it as one component that fits this stack. In React use gsap and @gsap/react; in plain HTML use GSAP from npm or a CDN. 3. Ask me before coding: Ask me these in a single message, showing the example values as defaults: - the headline lines and which word gets the marker - the subtitle - the marker color - the language of the texts 4. The animation What it looks like: A large bold headline on two or three lines, one key word with a solid colored marker behind it, and a short subtitle below. Step by step: - Each word sits in its own overflow-hidden line wrapper and starts pushed down (yPercent 110) and blurred (8px). - At 0.2 s the words rise to place one after another (stagger 0.08 s, 0.85 s each, ease expo.out), losing the blur. - At 1.0 s the marker behind the key word grows from the left (scaleX 0 → 1, 0.65 s, expo.inOut). - At 1.3 s the key word turns white so it reads on the marker. - At 1.4 s the subtitle fades up from 10 px below, then everything holds for 2 s and the loop restarts after 1.6 s. Rules: - Use one GSAP timeline that loops forever with a short pause between runs (repeat: -1). If the step by step gives the pause, use that value; otherwise repeatDelay about 1.4 s. - Set every starting state with set() at the start of the timeline, never with from(): on the second loop from() starts from the wrong place. - Elements that appear later and would push the layout (new chat bubbles, new rows) stay display:none until their turn; elements that already have their place in the layout (a subtitle, a button) start hidden with autoAlpha 0, so nothing jumps. - If there is a cursor or pointer, it aims at the measured center of its target (getBoundingClientRect), never at fixed pixel coordinates; if the component is scaled, divide by the scale. - Blur only in the middle of a movement and always end at blur(0). - With prefers-reduced-motion, jump to the final frame and stop (tl.progress(1).pause()). - In React, use useGSAP from @gsap/react with a scope ref, so the timeline is cleaned up on unmount. - All example content stays generic (no real brands, logos or people). - The headline color is inherited from the page; only the key word is forced to white while it sits on the marker. 5. Check: Run it and watch the first and the third loop (they must look the same). Check it at 390 px wide with no sideways scroll, with reduced motion turned on, and with a clean console. Tell me what you checked. 6. Video (optional): If I also want this as an MP4 (ads, stories, WhatsApp status), install the HyperFrames skills with `npx skills add heygen-com/hyperframes` (choose your agent) and render the same animation in 9:16, 1:1 or 16:9. Rendering needs FFmpeg installed, or render with --docker (downloads about 3.3 GB the first time). Ask me before installing. Shortcut: If I only want the ready-made component instead, it installs with `npx shadcn@latest add https://motionshelf-pi.vercel.app/r/title-reveal.json`.
Install
npx shadcn@latest add https://motionshelf-pi.vercel.app/r/title-reveal.jsonCopies the file into your project. Requires React 19, Tailwind CSS v4 and GSAP (installed as a dependency).
Props
| Name | Type | Default | Description |
|---|---|---|---|
| lines | string[] | ["Animations that", "close the sale."] | One string per line. Words are separated by spaces. |
| highlight | string | "close" | The word that gets the highlight marker. |
| subtitle | string | "Each word rises in turn…" | Line under the title. |
| accent | string | "#1f5bff" | Color of the highlight marker. |
| loop | boolean | true | Replay forever with a pause between runs. |
| className | string | "" | Extra classes for the outer element. |
Dependencies
- gsap
- @gsap/react