Rotate through multiple text strings with per-character, per-word, or per-line motion and imperative controls.
motion-sv
Make it work! work! work! work!
Installation
pnpm dlx shadcn-svelte@latest add http://sveltekit-prerender/f/text-rotate.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:
text-rotate.svelte
index.ts
Folder Structure
Folder Structure
Visit Original Docs
For more deeper understaing visit fancy components documentation.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
texts | string[] | required | Array of strings rotated through by the component. |
as | keyof SvelteHTMLElements | "p" | HTML element used for the animated text wrapper. |
rotationInterval | number | 2000 | Delay in milliseconds between automatic text changes. |
initial | MotionProps["initial"] | MotionProps["initial"][] | { y: "100%", opacity: 0 } | Initial motion state for each rendered segment. Arrays rotate through multiple states by index. |
animate | MotionProps["animate"] | MotionProps["animate"][] | { y: 0, opacity: 1 } | Visible motion state for each rendered segment. Arrays rotate through multiple states by index. |
exit | MotionProps["exit"] | MotionProps["exit"][] | { y: "-120%", opacity: 0 } | Exit motion state used when the current text leaves. Arrays rotate through multiple states by index. |
auto | boolean | true | Whether the component should rotate automatically on an interval. |
loop | boolean | true | Whether rotation wraps back to the first string after the last. |
splitBy | "characters" | "words" | "lines" | string | "characters" | Controls how each text string is segmented before animation. |
staggerDuration | number | 0 | Delay added between animated segments. |
staggerFrom | "first" | "last" | "center" | "random" | number | "first" | Starting point used when calculating stagger delays. |
transition | Transition | { type: "spring", damping: 25, stiffness: 300 } | Motion transition shared by the layout wrapper and per-segment animations. |
animatePresenceMode | "sync" | "wait" | "popLayout" | "wait" | AnimatePresence mode used when swapping from one text string to the next. |
animatePresenceInitial | boolean | false | Whether the first render should run the enter animation. |
onNext | (index: number) => void | undefined | Callback invoked after the component rotates to a new text index. |
mainClassName | string | undefined | Classes merged onto the root animated wrapper. |
splitLevelClassName | string | undefined | Classes applied to each word or segment wrapper. |
elementLevelClassName | string | undefined | Classes applied around each animated character or segment. |
class | string | undefined | Additional classes merged onto the root layout wrapper. |