Overview
Components
Text Animations
Text with sliding background highlight animation using mix-blend-mode.
motion-sv
You can just ship things.
Installation
pnpm dlx shadcn-svelte@latest add https://sv-animations.vercel.app/s/highlighted-text.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:
highlighted-text.svelte
index.ts
Folder Structure
Folder Structure
Examples
Direction And View Trigger
Change the sweep origin and wait for viewport entry when you want the emphasis to arrive with surrounding content.
From Left
From Right
From Top
From Bottom
Props
| Name | Type | Default | Description |
|---|---|---|---|
children | Snippet | undefined | required | The inline text content wrapped by the animated highlight. |
from | "left" | "right" | "top" | "bottom" | "bottom" | Controls the direction the highlight bar sweeps in from. |
delay | number | 0 | Adds a delay in seconds before the highlight motion begins. |
triggerOnView | boolean | false | Waits to animate until the component enters the viewport. |
once | boolean | true | When using triggerOnView, controls whether the animation runs only on first entry. |
class | string | | Custom classes applied to the outer inline wrapper. |