Command Palette
Search for a command to run...
Loading component...
Horizontal Text reveal
Horizontal text reveal animation with scroll-triggered word-by-word animations. Features staggered word reveals with smooth transitions, opacity changes, and skew effects as text moves from right to center.
Dependencies
Interaction Type
Scroll to reveal text words | |
Sticky positioning with scroll progress |
CLI UNAVAILABLE
pro component, try copying the source code from top right corner
How to use
import { SkiperTextRevealH } from "@/components/v1/skiper72"; // Basic usage const DemoSkiper72 = () => { return ( <div className="h-screen w-full"> <SkiperTextRevealH> Your text content here that will be revealed word by word </SkiperTextRevealH> </div> ); };
Multiple usage examples
// With custom styling const CustomExample = () => { return ( <SkiperTextRevealH className="font-bold text-blue-500"> Custom styled text with different colors and fonts </SkiperTextRevealH> ); }; // With longer content const LongContentExample = () => { return ( <SkiperTextRevealH> This is a longer piece of text that demonstrates how the component handles multiple words and sentences with proper spacing and timing for the reveal animation. </SkiperTextRevealH> ); };
Props | Description |
---|---|
children | Text content to animate |
className | Additional CSS classes |
Source code
Click on the top right to view the source code
Keep in mind
Most components here are recreations of the best out there. I don't claim to be the original creator. This is my attempt to reverse-engineer, replicate, and often add a few extra features. I've tried to credit everyone, but if I missed something, let me know.
Contact
Additionlly, if you find any bug or issue, feel free toDrop a dm.
License & Usage:
- Free to use and modify in both personal and commercial projects.
- Attribution to Skiper UI is required when using the free version.
- No attribution required with Skiper UI Pro.