Svelte Animations

Home
Changelog

Command Palette

Search for a command to run

Getting Started

Overview
Introduction
Installation

Components

Animated List
Avatar Circles
Bento Grid
Dock
Dotted Map New
Globe New
Hero Video Dialog
Icon Cloud
Lens
Marquee
Orbiting Circles
Pointer
Progressive Blur
Smooth Cursor

Special Effects

Animated Beam
Animated Theme Toggler
Border Beam
Glare Hover New
Magic Card
Meteors
Shine Border

Animations

Blur Fade

Text Animations

Animated Gradient Text
Animated Shiny Text
Aurora Text
Dia Text Reveal New
Hyper Text
Line Shadow Text
Morphing Text New
Sparkles Text New
Text Animate
Video Text

Buttons

Rainbow Button
Ripple Button
Shimmer Button

Backgrounds

Animated Grid Pattern
Dot Pattern
Flickering Grid
Grid Pattern
Hexagon Pattern New
Light Rays
Noise Texture New
Retro Grid
Ripple
Striped Pattern New

Other

Animated Circular Progress Bar
Arc Timeline
Backlight New
Cool Mode
Dither Shader New
File Tree
Interactive Hover Button
Motion Grid Beta
Neon Gradient Card
Number Ticker
Pixel Image New
Pulsating Button
Scroll Progress
Typing Animation
Warp Background
Word Rotate Beta

Globe

An autorotating, interactive, and highly performant globe made using WebGL.

cobe

Globe

Installation

pnpm dlx shadcn-svelte@latest add https://sv-animations.vercel.app/r/globe.json

Install dependencies

Install the required packages for this component:

pnpm add cobe

Copy the Source Code

Copy and paste the following code into your project:

globe.svelte

index.ts

Glare Hover A glare hover effect that adds a subtle shine to elements when hovered.

Hero Video Dialog A hero video dialog component.

On this page

Contribute

Report an issue
Request a feature

Bhide Svelte

Built by Bhide Svelte

Sponsor My Work

It would help me build and maintain open-source projects for the community.