Getting Started
Components
- Animated Beam
- Animated Circular Progress Bar
- Animated Gradient Text
- Animated Grid Pattern
- Animated List
- Animated Shiny Text
- Animated Theme Toggler
- Aurora Text
- Backlight New
- Avatar Circles
- Bento Grid
- Blur Fade
- Border Beam
- Cool Mode
- Dia Text Reveal New
- Dither Shader New
- Dock
- Dot Pattern
- Dotted Map New
- File Tree
- Flickering Grid
- Grid Pattern
- Hero Video Dialog
- Hyper Text
- Icon Cloud
- Interactive Hover Button
- Lens
- Light Rays
- Line Shadow Text
- Magic Card
- Marquee
- Meteors
- Morphing Text New
- Motion Grid Beta
- Neon Gradient Card
- Number Ticker
- Orbiting Circles
- Pixel Image New
- Pointer
- Progressive Blur
- Pulsating Button
- Rainbow Button
- Retro Grid
- Ripple
- Ripple Button
- Scroll Progress
- Shimmer Button
- Shine Border
- Smooth Cursor
- Striped Pattern New
- Text Animate
- Typing Animation
- Video Text
- Warp Background
- Word Rotate Beta
Warp Background
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 |