TypingAnimation

typinganimation-1779394026093.tsx

'use client'
import { useState, useEffect } from 'react'

const STRINGS = ['Build faster.', 'Ship better.', 'Design smarter.', 'Scale effortlessly.']

export default function TypingAnimation({ strings = STRINGS, speed = 80, pause = 1500 }) {
  const [idx, setIdx] = useState(0)
  const [text, setText] = useState('')
  const [deleting, setDeleting] = useState(false)
  useEffect(() => {
    const target = strings[idx]
    if (!deleting && text === target) {
      const t = setTimeout(() => setDeleting(true), pause)
      return () => clearTimeout(t)
    }
    if (deleting && text === '') {
      setDeleting(false)
      setIdx(i => (i + 1) % strings.length)
      return
    }
    const t = setTimeout(() => {
      setText(prev => deleting ? prev.slice(0, -1) : target.slice(0, prev.length + 1))
    }, deleting ? speed / 2 : speed)
    return () => clearTimeout(t)
  }, [text, deleting, idx, strings, speed, pause])
  return (
    <div style={{ display:'flex', alignItems:'center', gap:'2px' }}>
      <span style={{ fontSize:'32px', fontWeight:800, color:'#1e293b' }}>{text}</span>
      <span style={{
        display:'inline-block', width:'3px', height:'38px',
        background:'#6d28d9', borderRadius:'2px',
        animation:'blink 0.8s step-end infinite',
      }}>
        <style>{'@keyframes blink{0%,100%{opacity:1}50%{opacity:0}}'}</style>
      </span>
    </div>
  )
}

Component info

CategoryAnimations

Frameworkreact

TierFREE

Copies0

About

Typewriter effect with multiple strings and configurable speed

More from Animations

'use client'
export default function PulseIndicator({
  label = 'Live',
  color = '#10b981',
  size = 12,
  rings = 2,
}) {
  return (
    <div style={{ display:'flex', alignItems:'center', gap:'10px' }}>
      <div style={{ position:'relative', widt

PulseIndicator

Animations

'use client'
import { useState } from 'react'

function Shimmer({ w = '100%', h = '16px', r = '6px' }) {
  return (
    <div style={{
      width:w, height:h, borderRadius:r,
      background:'linear-gradient(90deg,#f0f0f0 25%,#e0e0e0 50%,#f0f0f0 75%

ShimmerCard

Animations

'use client'
export default function GradientText({
  text = 'Empire UI',
  size = '48px',
  gradient = 'linear-gradient(90deg, #6d28d9, #2563eb, #0891b2, #10b981, #6d28d9)',
}) {
  return (
    <div>
      <style>{'@keyframes flow{0%{background-posi

GradientText

Animations

'use client'
const ITEMS = ['⚛️ React','🔷 TypeScript','💨 Tailwind','▲ Next.js','🔶 Prisma','🐘 PostgreSQL','🤖 OpenAI','🚀 Vercel','🐳 Docker','⚡ Vite']

export default function Marquee({ items = ITEMS, speed = 30, pauseOnHover = true }) {
  return

Marquee

Animations