# Rewriting headline
> A big headline types its ending letter by letter, selects it like a text editor and swaps in the next phrase.
- Category: [Text & scroll](https://library.aimran.es/components/text-scroll)
- Built with: React + Motion
- Live editor: https://library.aimran.es/blocks/typewriter-phrase-rotator
- Library: AIMRAN Library (https://library.aimran.es), free, no sign-up, by Aimran Oukham
## Where to use it
A typewriter effect in React fits the hero of a page that speaks to several audiences at once: a design tool “made for freelancers, small teams, your next launch”, or a portfolio that says “I design for…”. The fixed start stays put while the ending is typed, highlighted and replaced, which reads more like a person editing than a gimmick.
Phrases of similar length stop the headline from jumping around. Three to five is plenty. Tapping the text pauses it, which helps anyone who wants to read calmly. With reduced motion switched on, each phrase simply appears whole.
## Code
### React (Motion)
```tsx
import { useEffect, useMemo, useState } from "react";
import { motion, useReducedMotion } from "framer-motion";
interface TypewriterRotatorProps {
prefix?: string;
/** Frases separadas por comas. */
phrases?: string;
/** Milisegundos por letra al escribir. */
speed?: number;
caret?: string;
}
export default function TypewriterRotator({
prefix = "A library made for",
phrases = "designers in a hurry, small teams, your next launch, people who care about detail",
speed = 65,
caret = "#7c5cff",
}: TypewriterRotatorProps) {
const list = useMemo(
() =>
phrases
.split(",")
.map((s) => s.trim())
.filter(Boolean),
[phrases],
);
const [index, setIndex] = useState(0);
const [length, setLength] = useState(() => list[0]?.length ?? 0);
const [selecting, setSelecting] = useState(false);
const [paused, setPaused] = useState(false);
const reduce = useReducedMotion();
const word = list.length ? (list[index % list.length] ?? "") : "";
useEffect(() => {
if (paused || !word) return;
let delay: number;
let next: () => void;
if (reduce) {
delay = 2600;
next = () => setIndex((i) => i + 1);
} else if (selecting) {
delay = 480;
next = () => {
setSelecting(false);
setLength(0);
setIndex((i) => i + 1);
};
} else if (length < word.length) {
delay = length === 0 ? 320 : speed * (0.6 + Math.random() * 0.8);
next = () => setLength(length + 1);
} else {
delay = 1900;
next = () => setSelecting(true);
}
const t = setTimeout(next, delay);
return () => clearTimeout(t);
}, [paused, word, reduce, selecting, length, speed]);
const shown = reduce ? word : word.slice(0, length);
const typing = !paused && !reduce && !selecting && length < word.length;
return (
{prefix} {word}
);
}
```
## Prompt for AI assistants
Paste this into ChatGPT, Claude, Cursor, v0 or Lovable to adapt the block to your stack (Tailwind, Vue, Svelte…):
````text
I want to add the “Rewriting headline” block (Text & scroll) from AIMRAN Library to my project.
## What it is
A big headline types its ending letter by letter, selects it like a text editor and swaps in the next phrase.
## Chosen settings
- Pinned start: "A library made for"
- Phrases (comma separated): "designers in a hurry, small teams, your next launch, people who care about detail"
- Speed per letter: 65ms (from 30 to 200ms)
- Color de la frase: #7c5cff
## What I need
1. Add it to my project with the same look and animation as the reference code: same sizes, colours, radii, shadows, timings and easing.
2. It is built with React + TypeScript, with framer-motion for the animation and lucide-react for the icons. If my project uses something else (Vue, Svelte, Astro, plain HTML…), translate it without losing any behaviour. If I use Tailwind, turn the styles into classes; if not, keep the CSS in its own file.
3. Expose the settings above as props (or CSS variables) with those values as defaults.
4. Make it work well on phones: nothing that depends only on hover, touch targets of at least 44 px and no overflow on 320 px screens.
5. Make it look right in light and dark mode.
6. Keep it accessible: semantic HTML, roles and aria-* where needed, visible focus and keyboard support.
7. Respect prefers-reduced-motion: with reduced motion, no big animations but the same end result.
## Reference code
```tsx
import { useEffect, useMemo, useState } from "react";
import { motion, useReducedMotion } from "framer-motion";
interface TypewriterRotatorProps {
prefix?: string;
/** Frases separadas por comas. */
phrases?: string;
/** Milisegundos por letra al escribir. */
speed?: number;
caret?: string;
}
export default function TypewriterRotator({
prefix = "A library made for",
phrases = "designers in a hurry, small teams, your next launch, people who care about detail",
speed = 65,
caret = "#7c5cff",
}: TypewriterRotatorProps) {
const list = useMemo(
() =>
phrases
.split(",")
.map((s) => s.trim())
.filter(Boolean),
[phrases],
);
const [index, setIndex] = useState(0);
const [length, setLength] = useState(() => list[0]?.length ?? 0);
const [selecting, setSelecting] = useState(false);
const [paused, setPaused] = useState(false);
const reduce = useReducedMotion();
const word = list.length ? (list[index % list.length] ?? "") : "";
useEffect(() => {
if (paused || !word) return;
let delay: number;
let next: () => void;
if (reduce) {
delay = 2600;
next = () => setIndex((i) => i + 1);
} else if (selecting) {
delay = 480;
next = () => {
setSelecting(false);
setLength(0);
setIndex((i) => i + 1);
};
} else if (length < word.length) {
delay = length === 0 ? 320 : speed * (0.6 + Math.random() * 0.8);
next = () => setLength(length + 1);
} else {
delay = 1900;
next = () => setSelecting(true);
}
const t = setTimeout(next, delay);
return () => clearTimeout(t);
}, [paused, word, reduce, selecting, length, speed]);
const shown = reduce ? word : word.slice(0, length);
const typing = !paused && !reduce && !selecting && length < word.length;
return (
{prefix} {word}
);
}
```
Give me the complete final code, ready to paste, and tell me in one line where to put it in my project.
````