Typing Words

An animated text component that simulates a typing and deleting effect, cycling through a list of strings.

Usage

Basic usage example to quickly see how the TypingWords works.

import { TypingWords } from "@/ui/typing-words";

const placeholders = [
  "Welcome to Our Web App!",
  "Experience Seamless Integration",
  "Type, Explore, Innovate",
  "React. Build. Repeat.",
  "Documentation Made Simple",
  "Next.js + TypeScript = 💙",
  "Discover Powerful UI Components",
  "Your Development Partner",
  "Create Stunning Interfaces",
  "Coding Meets Creativity"
];

export function TypingWordsDemo() {
  return <TypingWords placeholders={placeholders} withCursor className="[--size:clamp(1.125rem,11px+3.5vw,1.875rem)] text-[calc(var(--size))] [--cursor-h:--size] leading-none font-bold" />;
}

Properties

Interactive configurator to explore customization options for the TypingWords component.

With cursor

Animation

The typing-words cursor styles use keyframe animation which by default is set using the tailwindcss class.

Add the following animation to your tailwind.config.js file:

import { PluginAPI, type Config } from "tailwindcss/types/config";
import plugin from "tailwindcss/plugin";
 
export default {
  theme: {
    extend: {
      animation: {
        "cursor-bar": "cursor-bar 0.5s step-end infinite alternate, cursor-blink 0.5s infinite"
      },
      keyframes: {
        "cursor-bar": { "50%": { borderRightColor: "transparent" } },
        "cursor-blink": {
          "20%": { transform: "scaleY(1)" },
          "50%": { transform: "scaleY(0)" },
          "80%": { transform: "scaleY(1)" }
        }
      }
    }
  },
  plugins: [
    require("tailwindcss-animate"),
    plugin(({ addBase, addUtilities }: PluginAPI) => {
      addBase({});
      addUtilities({});
    })
  ]
} satisfies Config;

API

Styles API

Styles API	Type	Default	Annotation
unstyled`?`	`boolean`	`false`	if `true`, all default styles will be removed

Props API

Props API	Type	Default	Annotation
placeholders	`string[]`	-	required
el`?`	`React.ElementType`	`"div"`
withCursor`?`	`boolean`	`false`	added style cursor animation
duration`?`	`{break?: number; typing?: number; deleting?: number; pauseBeforeDelete?: number;}`	`200`	set duration break and running typing

Source Codes

Full working code example, including necessary markup and styles. You can copy and paste this code directly to start using the component immediately.

typing-words.tsx