Getting Started
Components
- Animated Beam
- Animated Circular Progress Bar
- Animated Gradient Text
- Animated Grid Pattern
- Animated List
- Animated Shiny Text
- Animated Theme Toggler
- Aurora Text
- Avatar Circles
- Bento Grid New
- Blur Fade
- Border Beam
- Cool Mode
- Dither Shader New
- Dock New
- Dot Pattern
- Dotted Map New
- File Tree
- Flickering Grid
- Grid Pattern
- Hero Video Dialog
- Hyper Text New
- Icon Cloud New
- Interactive Hover Button
- Lens New
- Light Rays New
- Line Shadow Text New
- Magic Card New
- Marquee
- Meteors New
- Morphing Text New
- Motion Grid New
- Neon Gradient Card New
- Number Ticker
- Orbiting Circles New
- Pixel Image New
- Pointer New
- Progressive Blur New
- Pulsating Button
- Rainbow Button
- Retro Grid New
- Ripple
- Ripple Button
- Scroll Progress
- Shimmer Button
- Shine Border New
- Smooth Cursor New
- Striped Pattern New
- Text Animate
- Typing Animation
- Video Text
- Warp Background
- Word Rotate Beta
Text Animate
Animate text with various effects like blur, slide, scale, and fade with granular control over words, characters, or lines.
Hello, Svelte Developers! Hello, Svelte Developers!
Installation
pnpm dlx shadcn-svelte@latest add https://sv-animations.vercel.app/r/text-animate.json
Install dependencies
Install the required packages for this component:
pnpm add motion-sv
Copy the Source Code
Copy and paste the following code into your project:
TextAnimate.svelte
Folder Structure
Folder Structure
Examples
Blur In by Text
Animate entire text with a blur-in effect.
Blur In Text Blur In Text
Slide Up by Word
Animate each word with a slide-up effect.
Slide up by word Slide up by word
Scale Up by Text
Animate entire text with a scale-up spring effect.
Scale up by text Scale up by text
Fade In by Line
Animate text line by line with a fade-in effect.
Fade in by line as paragraph\n\nFade in by line as paragraph\n\nFade in by line as paragraph Fade in by line as paragraphFade in by line as paragraphFade in by line as paragraph
Slide Left by Character
Animate each character with a slide-left effect.
Slide left by character Slide left by character
With Delay
Add a delay before the animation starts.
This animation starts after a delay This animation starts after a delay
With Duration
Control the total duration of the animation.
Slower animation with custom duration Slower animation with custom duration
Custom Motion Variants
Use custom motion variants for complete control over the animation.
Svelte is Amazing! Svelte is Amazing!
Props
TextAnimate
A component for animating text with various effects and granular control.
| Name | Type | Default | Description |
|---|---|---|---|
content | string | "" | The text content to animate (required) |
animation | "fadeIn" | "blurIn" | "blurInUp" | "blurInDown" | "slideUp" | "slideDown" | "slideLeft" | "slideRight" | "scaleUp" | "scaleDown" | "fadeIn" | The animation preset to use |
by | "text" | "word" | "character" | "line" | "word" | How to split the text for animation |
delay | number | 0 | Delay before the animation starts (in seconds) |
duration | number | 0.3 | Total duration of the animation (in seconds) |
variants | Variants | undefined | Custom motion variants for the item animation |
startOnView | boolean | true | Start animation when component enters viewport |
once | boolean | false | Animate only once when in view |
accessible | boolean | true | Enable accessibility features (screen reader support) |
class | string | "" | Additional CSS classes to apply to the container |
segmentClass | string | "" | Additional CSS classes to apply to each segment |
Animation Presets
The component comes with the following animation presets:
- fadeIn - Simple fade in animation
- blurIn - Blur from blurred to clear
- blurInUp - Blur in with upward motion
- blurInDown - Blur in with downward motion
- slideUp - Slide in from bottom
- slideDown - Slide in from top
- slideLeft - Slide in from right
- slideRight - Slide in from left
- scaleUp - Scale from small to normal with spring
- scaleDown - Scale from large to normal with spring
Text Segmentation
Control how the text is split for animation using the by prop:
- text - Animate the entire text as one unit
- word - Animate each word separately (default)
- character - Animate each character separately
- line - Animate each line separately (split by \n)