Skip to main content
This component requires the runed and motion-sv dependencies.

​
Installation

npx shadcn-svelte@latest add https://sv-animations.vercel.app/r/text-animate

​
Usage

<script lang="ts">
  import { TextAnimate } from "$lib/components/magic/text-animate";
</script>

<TextAnimate 
  content="Hello, Svelte Developers!" 
  animation="blurInUp" 
  by="character" 
  once 
/>

​
Examples

​
Blur In Animation

Animate text with a blur and fade effect. 
<TextAnimate 
  content="Text with blur effect" 
  animation="blurIn" 
  by="word" 
/>

​
Slide Up by Word

Animate each word sliding up from below. 
<TextAnimate 
  content="Each word slides up" 
  animation="slideUp" 
  by="word" 
  duration={1}
/>

​
Scale Up by Character

Animate each character with a scale-up effect. 
<TextAnimate 
  content="Character by character" 
  animation="scaleUp" 
  by="character" 
  delay={0.5}
/>

​
Slide Left by Character

Animate characters sliding in from the right. 
<TextAnimate 
  content="Sliding from right" 
  animation="slideLeft" 
  by="character" 
/>

​
Fade In by Line

Animate text line by line with fade in effect. 
<TextAnimate 
  content="First line\nSecond line\nThird line" 
  animation="fadeIn" 
  by="line" 
/>

​
Custom Variants

Use custom motion variants for complete control. 
<script lang="ts">
  import { TextAnimate } from "$lib/components/magic/text-animate";
  import type { Variants } from "motion-sv";
  
  const customVariants: Variants = {
    hidden: { opacity: 0, rotateY: 90 },
    show: { 
      opacity: 1, 
      rotateY: 0,
      transition: { duration: 0.5 }
    }
  };
</script>

<TextAnimate 
  content="Custom animation" 
  variants={customVariants}
  by="word" 
/>

​
Props

​
content
string
required
The text content to animate.
​
animation
AnimationVariant
default:"fadeIn"
The animation preset to use. Options: fadeIn, blurIn, blurInUp, blurInDown, slideUp, slideDown, slideLeft, slideRight, scaleUp, scaleDown.
​
by
AnimationType
default:"word"
How to split the text for animation. Options: text (entire text), word, character, line.
​
class
string
Additional CSS classes to apply to the component container.
​
segmentClass
string
CSS classes to apply to each animated segment (word/character/line).
​
delay
number
default:0
The delay in seconds before the animation starts.
​
duration
number
The total duration in seconds for the entire animation sequence.
​
variants
Variants
Custom motion variants for the animation. When provided, overrides the animation preset.
​
startOnView
boolean
default:true
Whether to start animation when the component enters the viewport.
​
once
boolean
default:false
Whether to animate only once (when used with startOnView).
​
accessible
boolean
default:true
Whether to enable accessibility features (screen reader support).

​
Animation Variants

The component includes several built-in animation presets:
  • fadeIn: Simple fade in with slight upward movement
  • blurIn: Blur to clear transition
  • blurInUp: Blur with upward slide
  • blurInDown: Blur with downward slide
  • slideUp: Slide up from below
  • slideDown: Slide down from above
  • slideLeft: Slide in from the right
  • slideRight: Slide in from the left
  • scaleUp: Scale up from small
  • scaleDown: Scale down from large

​
Customization

​
Stagger Timing

The component automatically adjusts stagger timing based on the split type:
  • Text: 0.06s
  • Word: 0.05s
  • Character: 0.03s
  • Line: 0.06s

​
Styling

The component uses Tailwind CSS classes and can be styled using the class and segmentClass props: 
<TextAnimate 
  content="Styled text" 
  animation="slideUp" 
  by="word"
  class="text-4xl font-bold text-primary"
  segmentClass="mx-1"
/>
For line-based animations, use \n or \\n to separate lines in the content string.

Build docs developers (and LLMs) love

Get started for freeTalk to us