Getting Started
Components
Special Effects
Animations
Text Animations
Backgrounds
A description for Warp Background component.
motion-sv
Congratulations on Your Promotion!
Your hard work and dedication have paid off. We're thrilled to see you take this next step in your career. Keep up the fantastic work!
Installation
pnpm dlx shadcn-svelte@latest add https://sv-animations.vercel.app/r/warp-background.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:
warp-background.svelte
index.ts
Folder Structure
Folder Structure
Props
WarpBackground
A component for Warp Background.
| Name | Type | Default | Description |
|---|---|---|---|
class | string | "" | Additional CSS classes to apply |
perspective | number | 100 | Perspective value for the 3D effect |
beamsPerSide | number | 3 | Number of beams per side |
beamSize | number | 5 | Size of each beam |
beamDelayMax | number | 3 | Maximum delay for each beam |
beamDelayMin | number | 0 | Minimum delay for each beam |
beamDuration | number | 3 | Duration of each beam animation |
gridColor | string | "var(--border)" | Color of the grid |
children | Snippet | required | The content to wrap |