React Writing Text

Powered by

Motion

Framer Motion

Ever seen text that "writes" itself and it's either so slow you fall asleep or so fast it's seizure-inducing? Most word-by-word reveals either drag on forever (users lose interest) or blast through so quickly you can't read anything. This component writes at a pace that feels natural—like watching someone actually compose text.

Word-by-word writing with readable timing

Text that reveals progressively like someone writing it live:

import { WritingText } from '@/components/ui/shadcn-io/writing-text';const WritingTextDemo = () => {  return (    <WritingText      className="text-4xl"      text="Writing Text With Effect"      spacing={9}    />  );};export default WritingTextDemo;

'use client'; import * as React from 'react';import {  motion,  useInView,  type Transition,  type UseInViewOptions,} from 'motion/react'; type WritingTextProps = Omit<React.ComponentProps<'span'>, 'children'> & {  transition?: Transition;  inView?: boolean;  inViewMargin?: UseInViewOptions['margin'];  inViewOnce?: boolean;  spacing?: number | string;  text: string;}; function WritingText({  ref,  inView = false,  inViewMargin = '0px',  inViewOnce = true,  spacing = 5,  text,  transition = { type: 'spring', bounce: 0, duration: 2, delay: 0.5 },  ...props}: WritingTextProps) {  const localRef = React.useRef<HTMLSpanElement>(null);  React.useImperativeHandle(ref, () => localRef.current as HTMLSpanElement);   const inViewResult = useInView(localRef, {    once: inViewOnce,    margin: inViewMargin,  });  const isInView = !inView || inViewResult;   const words = React.useMemo(() => text.split(' '), [text]);   return (    <span ref={localRef} data-slot="writing-text" {...props}>      {words.map((word, index) => (        <motion.span          key={index}          className="inline-block will-change-transform will-change-opacity"          style={{ marginRight: spacing }}          initial={{ opacity: 0, y: 10 }}          animate={isInView ? { opacity: 1, y: 0 } : undefined}          transition={{            ...transition,            delay: index * (transition?.delay ?? 0),          }}        >          {word}{' '}        </motion.span>      ))}    </span>  );} export { WritingText, type WritingTextProps };

Built with TypeScript and shadcn/ui, using Motion for smooth word transitions in React applications. Each word appears with subtle motion and proper timing, creating that "being written" feel without the painful wait times or motion sickness.

Installation

npx shadcn@latest add https://www.shadcn.io/registry/writing-text.json

npx shadcn@latest add https://www.shadcn.io/registry/writing-text.json

pnpm dlx shadcn@latest add https://www.shadcn.io/registry/writing-text.json

bunx shadcn@latest add https://www.shadcn.io/registry/writing-text.json

Usage

import { WritingText } from "@/components/text/writing-text";

<WritingText
  text="Building amazing interfaces has never been this smooth"
  inView={true}
  transition={{
    type: "spring",
    bounce: 0,
    duration: 2,
    delay: 0.3
  }}
/>;

Why most writing effects suck

Most developers just stagger word opacity with linear timing, like a broken teleprompter. The result? Text that appears robotically at fixed intervals, completely ignoring how humans actually read. Short words like "a" get the same display time as "extraordinary"—that's not how reading works.

This React component uses spring animations with natural easing, so words don't just pop in—they settle into place with subtle motion. The timing is tuned for actual reading speed: fast enough to maintain engagement, slow enough for comprehension. Each word gets a moment to register before the next one appears.

The key insight: this isn't about typing speed, it's about reading rhythm. People need time to process "sophisticated" but can quickly scan "the". The stagger timing accounts for this, creating text reveals that feel authored, not automated.

Features

• Word-by-word reveals with reading-optimized timing for React applications
• Spring-based animations that settle naturally instead of snapping
• In-view detection so writing starts when users actually see the text
• Configurable spacing and timing for different content types
• Complete TypeScript support with full motion configuration options
• Works seamlessly with shadcn/ui typography and theme colors
• Free open source component optimized for Next.js performance

API Reference

WritingText

Progressive text reveal with word-by-word writing animation.

Optimal Writing Speeds

Timing that matches natural reading comprehension:

Transition Types

Choose the right animation feel:

Common gotchas

Writing feels too slow: Default 0.4s delay works for normal sentences in React applications. Headlines can use 0.2-0.3s, technical content might need 0.5-0.6s for comprehension with TypeScript timing.

Words appear too suddenly: Default spring animation has no bounce for clean appearance in JavaScript applications. If words feel too abrupt, add slight bounce (0.1-0.2) for softer settling in Next.js projects.

Spacing looks wrong: Default 0.25rem spacing works for most fonts with TypeScript support. Condensed fonts might need less, display fonts might need more. Test with your actual typography.

Animation doesn't start: Use inView={true} unless you want immediate writing on page load in React applications. Writing effects are most impactful when users see them happen.

Long text becomes tedious: Consider breaking very long text (20+ words) into multiple components or shorter phrases. Reading fatigue sets in if the writing effect goes on too long.

Integration with other components

Perfect for hero sections in Card layouts or dramatic reveals in Sheet overlays within React applications. Works great with Button components for call-to-action sequences in Next.js projects.

For storytelling interfaces, combine with Progress indicators showing reading progress or Tabs for chapter navigation. This free open source component pairs well with Badge for section labels and Avatar for author attribution, all with complete TypeScript integration.

Questions developers actually ask