Overview
Components
Text Animations
Highlighted Text
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
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. |