FreeText Effects

Typewriter Hero Line

Use this component when a headline needs a subtle build-up effect without the complexity of a full typewriter engine.

ReactTailwind CSSMotionText

Buildlaunchmeasurerepeat|

Overview

A staggered headline animation with a blinking cursor for hero sections.

Framework

React

Styling

Tailwind CSS

Animation

Motion

Create a Vite React project

bash

npm create vite@latest my-ui-app -- --template react-ts
cd my-ui-app
npm install

Create a Next.js project

bash

npx create-next-app@latest my-ui-app --typescript --tailwind --eslint
cd my-ui-app

Add Tailwind CSS to Vite

bash

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

Install dependencies

bash

npm install framer-motion

Usage

tsx

<TypewriterHeroLine />

Typewriter Hero Line.tsx

tsx

"use client";

import { motion } from "framer-motion";

const words = "Build launch measure repeat".split(" ");

export function TypewriterHeroLine() {
  return (
    <h2 className="text-4xl font-black leading-tight text-white md:text-6xl">
      {words.map((word, wordIndex) => (
        <span key={word} className="mr-3 inline-block">
          {word.split("").map((letter, letterIndex) => (
            <motion.span
              key={word + letterIndex}
              initial={{ opacity: 0, y: 8 }}
              whileInView={{ opacity: 1, y: 0 }}
              viewport={{ once: true }}
              transition={{ delay: wordIndex * 0.14 + letterIndex * 0.025 }}
              className="inline-block"
            >
              {letter}
            </motion.span>
          ))}
        </span>
      ))}
      <motion.span
        animate={{ opacity: [0, 1, 0] }}
        transition={{ duration: 1, repeat: Infinity }}
        className="ml-1 text-lime-300"
      >
        |
      </motion.span>
    </h2>
  );
}