IconaNewGradient Generatorllms-full.txt
ComponentsText Animations

Velocity Morph

High-speed text morph animation for React. Blur, scale, and slide effects with velocity-based easing. Perfect for dynamic and energetic UI.

Last updated on

Edit on GitHub
Open in
Hello
"use client";
 
import { VelocityMorph } from "@/components/ui/velocity-morph";
 
export function VelocityMorphDemo() {
  return (
    <div className="flex items-center justify-center">
      <VelocityMorph
        texts={["Hello", "World", "Velocity", "Morph"]}
        className="font-bold text-4xl text-foreground"
      />
    </div>
  );
}

Examples

Variants

Open in 
"use client";
 
import { VelocityMorph } from "@/components/ui/velocity-morph";
 
export function VelocityMorphCustomDemo() {
  return (
    <div className="flex flex-col items-center justify-center gap-8">
      <div className="text-center">
        <h3 className="mb-4 font-semibold text-lg">Fast Morphing</h3>
        <VelocityMorph
          texts={["CODE", "BUILD", "DEPLOY", "SCALE"]}
          interval={1500}
          className="font-mono text-2xl text-primary"
        />
      </div>
 
      <div className="text-center">
        <h3 className="mb-4 font-semibold text-lg">Slow Morphing</h3>
        <VelocityMorph
          texts={["DESIGN", "CREATE", "INNOVATE", "INSPIRE"]}
          interval={5000}
          className="font-bold text-3xl text-destructive"
        />
      </div>
    </div>
  );
}

Installation

CLI

npx shadcn@latest add "https://jolyui.dev/r/velocity-morph"

Manual

Install the following dependencies:

npm install motion

Copy and paste the following code into your project. component/ui/velocity-morph.tsx

import { AnimatePresence, motion } from "motion/react";
import * as React from "react";
import { cn } from "@/lib/utils";
 
interface VelocityMorphProps {
  texts: string[];
  className?: string;
  interval?: number;
}
 
const VelocityMorph = React.forwardRef<HTMLDivElement, VelocityMorphProps>(
  ({ texts, className, interval = 3000 }, ref) => {
    const [currentIndex, setCurrentIndex] = React.useState(0);
 
    React.useEffect(() => {
      const timer = setInterval(() => {
        setCurrentIndex((prev) => (prev + 1) % texts.length);
      }, interval);
 
      return () => clearInterval(timer);
    }, [interval, texts.length]);
 
    return (
      <div
        ref={ref}
        className={cn(
          "relative overflow-hidden whitespace-nowrap p-2",
          className,
        )}
      >
        <AnimatePresence mode="popLayout">
          <motion.div
            key={currentIndex}
            initial={{
              y: 40,
              opacity: 0,
              filter: "blur(10px)",
              scale: 0.8,
            }}
            animate={{
              y: 0,
              opacity: 1,
              filter: "blur(0px)",
              scale: 1,
            }}
            exit={{
              y: -40,
              opacity: 0,
              filter: "blur(10px)",
              scale: 0.8,
            }}
            transition={{
              duration: 0.4,
              ease: [0.16, 1, 0.3, 1],
            }}
          >
            {texts[currentIndex]}
          </motion.div>
        </AnimatePresence>
      </div>
    );
  },
);
 
VelocityMorph.displayName = "VelocityMorph";
 
export { VelocityMorph };

API Reference

Prop

Type

Notes

  • Uses motion/react for high-velocity animations with blur and scale effects
  • Automatically cycles through texts at specified intervals
  • Supports custom CSS classes for styling
  • Animation includes vertical movement, opacity, blur, and scale transitions
  • Perfect for hero sections, testimonials, or dynamic content with dramatic effects

How is this guide?

Typewriter Text

React typewriter effect with customizable speed, cursor styles, and word deletion. Perfect for hero sections and dynamic text displays.

AI Prompt Box

ChatGPT-style AI prompt input for React. Supports file uploads, voice recording, @mentions, and expandable textarea. Build AI chat interfaces fast.

On this page

Examples
Variants
Installation
CLI
Manual
API Reference
Notes