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
- Avatar Circles
- Bento Grid New
- Blur Fade
- Border Beam
- Cool Mode
- Dither Shader New
- Dock New
- Dot Pattern
- Dotted Map New
- File Tree
- Flickering Grid
- Grid Pattern
- Hero Video Dialog
- Hyper Text New
- Icon Cloud New
- Interactive Hover Button
- Lens New
- Light Rays New
- Line Shadow Text New
- Magic Card New
- Marquee
- Meteors New
- Morphing Text New
- Motion Grid New
- Neon Gradient Card New
- Number Ticker
- Orbiting Circles New
- Pixel Image New
- Pointer New
- Progressive Blur New
- Pulsating Button
- Rainbow Button
- Retro Grid New
- Ripple
- Ripple Button
- Scroll Progress
- Shimmer Button
- Shine Border New
- Smooth Cursor New
- 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 |