Text Reveal
Text reveal animations create a dynamic and engaging effect as text appears on the screen. This technique can be used to draw attention to specific content or enhance the overall user experience.
Title Reveal
With custom props
npm install motion/react react
pnpm install motion/react react
yarn add motion/react react
bun add motion/react react
Gradient Bars
Props
Prop | Type | Default |
---|---|---|
children? | string | undefined |
className? | string | undefined |
blur? | number | 10 |
delay? | number | 0.1 |
duration? | number | 1 |
from? | 'top' | 'bottom' | 'bottom' |
split? | 'word' | 'letter' | 'word' |
Scroll Velocity
Scroll velocity animations create a dynamic and engaging effect as elements move on the screen. This technique can be used to draw attention to specific content or enhance the overall user experience.
Typewriter
Typewriter animations simulate the effect of text being typed out in real-time. This technique can be used to create a sense of anticipation and engagement as users watch the text appear on the screen.