Text Shift
An animated text component that smoothly transitions between two text strings with staggered letter animations on hover
Usage
"use client";
import { TextShift } from "@/components/text-shift";
export default function TextShiftDemo() {
return (
<div className="space-y-6">
<TextShift
primaryText="Web Developer"
secondaryText="Web Designer"
className="text-4xl"
primaryTextColor="text-black"
secondaryTextColor="text-gray-400"
/>
</div>
);
}Installation
Install the Text Shift component using your preferred package manager.
npx shadcn@latest add @rigidui/text-shiftFeatures
The Text Shift component creates engaging text animations that smoothly transition between two different text strings with beautiful staggered letter effects.
Smooth Typography
Beautiful letter-by-letter animations with configurable timing and easing for professional text transitions.
Hover Interactions
Responsive hover effects that trigger smooth transitions between primary and secondary text content.
Staggered Animation
Configurable stagger delay creates a wave-like effect as each letter animates in sequence for visual appeal.
Highly Customizable
Full control over colors, timing, easing functions, and styling to match your design requirements.
Component Structure
The Text Shift component is a single, self-contained component that handles all animation logic internally:
<TextShift
primaryText="Your Text"
secondaryText="Alternative Text"
className="text-4xl"
/>Props
TextShift
| Prop | Type | Default |
|---|---|---|
primaryText | string | - |
secondaryText | string | - |
className? | string | '' |
primaryTextColor? | string | 'text-black' |
secondaryTextColor? | string | 'text-gray-400' |
duration? | number | 1 |
staggerDelay? | number | 0.05 |
easing? | Easing | [0.165, 0.84, 0.44, 1] |
Examples
Basic Usage
<TextShift primaryText="Hello World" secondaryText="Welcome Here" />Custom Styling
<TextShift
primaryText="Frontend"
secondaryText="Fullstack"
className="text-6xl font-bold"
primaryTextColor="text-blue-600"
secondaryTextColor="text-purple-600"
/>Custom Timing
<TextShift
primaryText="Fast Animation"
secondaryText="Quick Transition"
duration={0.5}
staggerDelay={0.02}
/>Slow and Elegant
<TextShift
primaryText="Elegant"
secondaryText="Beautiful"
duration={1.5}
staggerDelay={0.1}
/>Draggable Canvas
A smooth, physics-based draggable canvas component with momentum, elastic bounds, and customizable items
Currency Manager
A flexible set of components for managing currency display and selection. Users provide exchange rates relative to a fixed base currency, and the component handles fetching currency names and performing conversions.