Skip to content

MotionVaultAnimated UI vault

Motion Sites

Full animated website templates

Categories

Site Templates→

Filter by tech

React Tailwind CSS JavaScript GSAP Anime.js Framer Motion

React Bits

Advanced animated components

Categories

Filter by tech

React Tailwind CSS JavaScript GSAP Anime.js Framer Motion

Uiverse

Buttons, loaders, toggles

Categories

Filter by tech

React Tailwind CSS JavaScript GSAP Anime.js Framer Motion

Anime.js

Spring, drag & scroll motion

Categories

Filter by tech

React Tailwind CSS JavaScript GSAP Anime.js Framer Motion

Aceternity UI

Glow cards, tilt, starfield…

Categories

Filter by tech

React Tailwind CSS JavaScript GSAP Anime.js Framer Motion

Motion Sites React Bits Uiverse Anime.js Aceternity UI Hall1246 · 375,920

1246 assets · 375,920 prompts copied

Spring, drag & scroll motion

Animations

Standalone animation snippets powered by vanilla JS and Anime.js-style physics — springs, drag-and-drop, scroll-linked parallax, staggered timelines. Copy the code, replicate 1:1.

240

assets

Site Templates Components UI Elements Animations Search all →

240 assets

Featured Animations⚛ TSX Live preview

Constellation Particle Network

Fifty drifting nodes that link up within proximity and drift away from — yet stay near — your cursor.

HTMLCSSJavaScriptAdvanced

9.3k50.6k10.2kOpen

Featured Animations⚛ TSX Live preview

Stagger Timeline Grid

A 12-cell grid that springs in with an 80ms waterfall delay — the anime.js stagger() pattern in vanilla JS.

HTMLCSSJavaScriptAdvanced

8k44.6k7.8kOpen

Featured Animations⚛ TSX Live preview

Canvas Confetti Burst

Gravity-driven confetti in six colors — rects and circles with rotation — fired on click or from the pulsing button.

HTMLCSSJavaScriptAdvanced

7.8k42.3k8.4kOpen

Featured Animations⚛ TSX Live preview

Spring Physics Ball Drop

Hand-rolled gravity + restitution spring: the ball bounces, squashes on impact and casts a scaling shadow.

HTMLCSSJavaScriptAdvanced

7.4k39.8k6.1kOpen

Animations⚛ TSX Live preview

Looping Typewriter Effect

Monospace gradient text that types and deletes four phrases on a loop, with a blinking block cursor.

HTMLCSSJavaScriptAdvanced

6.7k36.1k7.1kOpen

Animations⚛ TSX Live preview

Live Audio Equalizer Bars

Twenty-two bars driven by layered sine waves for organic motion — hover boosts the energy.

HTMLCSSJavaScriptAdvanced

6.2k33.8k6.6kOpen

Animations⚛ TSX Live preview

Fling & Snap Draggable Card

Pointer-event dragging with velocity tracking, momentum fling, damping and a spring back to center.

HTMLCSSJavaScriptAdvanced

6.2k33.4k5.2kOpen

Animations⚛ TSX Live preview

Scroll-Linked Parallax Scene

A scrollable night scene where the moon, mountains and hills translate at 0.3×/0.6×/0.85× scroll speed.

HTMLCSSJavaScriptAdvanced

5.9k31.2k4.7kOpen

Animations⚛ TSX Live preview

Bouncy Letter Wave

The word MOTIONVAULT splits into per-letter spans that ride a looping spring wave and pop on hover.

HTMLCSSJavaScriptAdvanced

5.5k30.7k5.6kOpen

Animations⚛ TSX Live preview

Scroll Blur Reveal

Inside a scrollable panel, blocks un-blur, brighten and scale as they reach the center — proximity-based, no observers.

HTMLCSSJavaScriptAdvanced

5.9k30.4k5.3kOpen

Animations⚛ TSX Live preview

Mouse-Tracking Grid Glow

An 8×8 tile grid: hovered cell ignites with glow, its eight neighbors light warm, rest fades to glass.

HTMLCSSJavaScriptAdvanced

5.3k28.7k5.9kOpen

Animations⚛ TSX Live preview

Ripple Wave Field (Canvas)

Click or hover to emit expanding triple-ring ripples in cyan/violet/fuchsia with additive blending.

HTMLCSSJavaScriptAdvanced

4.7k27.9k4.1kOpen

Featured Animations Live preview

Word-by-Word Scroll Text Highlight

Long-form manifesto text that lights up one word at a time as you scroll, each with a marker underline.

HTMLCSSJavaScriptModerate

Animations Live preview

Particle Field Drift

Ambient drifting particle field with soft glow and connecting lines.

HTMLCSSJavaScriptModerate

Featured Animations Live preview

Magnetic Spring Buttons

Three CTA buttons that lean toward your cursor with physics-based spring motion; the label counter-moves for parallax.

HTMLCSSJavaScriptModerate

Animations Live preview

Warp Speed Lines Burst

Click anywhere to fire a radial hyperspace streak burst from that point; ambient violet lines drift continuously.

HTMLCSSJavaScriptModerate

Animations Live preview

Pulse Wave Ripple Button

Each click emits an expanding ring that scales and fades from the pill CTA — stack clicks for a sonar effect.

HTMLCSSJavaScriptModerate

Animations Live preview

Mouse Parallax Depth Scene

Moon and three mountain ranges drift at different speeds against the cursor — instant cinematic depth.

HTMLCSSJavaScriptModerate

Animations Live preview

Orbiting Ring Menu

Eight nav pills orbit a glowing core on a circular path — counter-rotation keeps labels upright; hover pauses.

HTMLCSSJavaScriptModerate

Animations Live preview

Count-Up Stat Cards (in-view)

Glass stat cards whose gradient numbers ease from zero when scrolled into view, powered by IntersectionObserver.

HTMLCSSJavaScriptModerate

Animations Live preview

Terminal Boot Sequence

A macOS-style terminal window that types out a deploy script line by line — commands in cyan, checks in green.

HTMLCSSJavaScriptModerate

Featured Animations Live preview

Particle Sphere Planet

900 points arranged on a fibonacci sphere, projected in 3D with depth shading — drag to spin, auto-orbits when idle.

HTMLCSSJavaScriptModerate

Animations Live preview

Particle Progress Ring Loader

A ring of 60 particles flowing around a track that fills with a breathing percentage readout.

HTMLCSSJavaScriptModerate

Animations Live preview

Ripple Interference Field

Full-screen canvas where clicks spawn triple-ring wavefronts that decay; ambient waves spawn automatically.

HTMLCSSJavaScriptModerate

Animations Live preview

Audio waveform equalizer

48-bar equalizer that dances while playing — simulated audio bars with randomized timing, play/pause toggle.

HTMLCSSJavaScriptModerate

Featured Animations Live preview

Canvas cursor sparkle trail

Colorful sparkles spawn at the pointer and drift with gravity, shrinking and fading — full-screen canvas overlay.

HTMLCSSJavaScriptModerate

Animations Live preview

Loading bar with percent + rotating tips

Gradient shimmer progress bar with a huge mono percentage and contextual tips that change per phase.

HTMLCSSJavaScriptModerate

Animations Live preview

Neon analog live clock

A glowing analog clock with smooth rAF-driven hands plus a digital readout — set in neon fuchsia and cyan.

HTMLCSSJavaScriptModerate

Featured Animations Live preview

Mouse parallax floating symbols

Four glowing geometric symbols drift at different depths against the cursor; headline moves subtly on top.

HTMLCSSJavaScriptModerate

Featured Animations Live preview

Gradient launch countdown timer

Live days/hours/mins/secs countdown with glass cells, mono gradient numerals and a tick animation each change.

HTMLCSSJavaScriptModerate

Animations Live preview

Bouncing dots loader

Three gradient dots bounce and squash with a ripple delay, above a blinking 'loading…' label.

HTMLCSSJavaScriptModerate

Animations Live preview

Count-up stats widgets

Four glass stat cards whose numbers ease-out count from zero to target with per-card corner glows.

HTMLCSSJavaScriptModerate

Animations Live preview

Scroll stagger reveal cards

Cards fade and rise in with per-index delay when they enter the viewport — IntersectionObserver pattern.

HTMLCSSJavaScriptModerate

Featured Animations Live preview

Canvas starfield warp speed

Stars stream from the center as lines that stretch with velocity — click/hold to engage warp boost.

HTMLCSSJavaScriptModerate

Featured Animations Live preview

Trailing blob custom cursor

A glowing fuchsia orb trails the pointer with eased lerp and enlarges into a cyan pool over text.

HTMLCSSJavaScriptModerate

Featured Animations Live preview

Torch spotlight mask section

A dark room where a radial mask follows the cursor like a torch, revealing bright content around it.

HTMLCSSJavaScriptModerate

Animations Live preview

Circular progress ring

SVG ring fills with a glowing fuchsia arc and mono percentage — +10% and reset buttons animate it.

HTMLCSSJavaScriptModerate

Featured Animations Live preview

Constellation Field · Ultra Violet

Drifting particles that link into a living constellation web, attracted to your cursor. Rendered in the Ultra Violet palette.

HTMLCSSJavaScriptModerate

Animations Live preview

Constellation Field · Cyber Lime

Drifting particles that link into a living constellation web, attracted to your cursor. Rendered in the Cyber Lime palette.

HTMLCSSJavaScriptModerate

Animations Live preview

Constellation Field · Sunset Amber

Drifting particles that link into a living constellation web, attracted to your cursor. Rendered in the Sunset Amber palette.

HTMLCSSJavaScriptModerate

Animations Live preview

Constellation Field · Rose Gold

Drifting particles that link into a living constellation web, attracted to your cursor. Rendered in the Rose Gold palette.

HTMLCSSJavaScriptModerate

Animations Live preview

Constellation Field · Ocean Sky

Drifting particles that link into a living constellation web, attracted to your cursor. Rendered in the Ocean Sky palette.

HTMLCSSJavaScriptModerate

Animations Live preview

Constellation Field · Mint Breeze

Drifting particles that link into a living constellation web, attracted to your cursor. Rendered in the Mint Breeze palette.

HTMLCSSJavaScriptModerate

Animations Live preview

Constellation Field · Candy Pink

Drifting particles that link into a living constellation web, attracted to your cursor. Rendered in the Candy Pink palette.

HTMLCSSJavaScriptModerate

Animations Live preview

Constellation Field · Royal Gold

Drifting particles that link into a living constellation web, attracted to your cursor. Rendered in the Royal Gold palette.

HTMLCSSJavaScriptModerate

Animations Live preview

Confetti Pop · Rose Gold

Click anywhere and a fountain of palette-colored confetti erupts from the pointer. Rendered in the Rose Gold palette.

HTMLCSSJavaScriptModerate

Animations Live preview

Confetti Pop · Ocean Sky

Click anywhere and a fountain of palette-colored confetti erupts from the pointer. Rendered in the Ocean Sky palette.

HTMLCSSJavaScriptModerate

Animations Live preview

Confetti Pop · Mint Breeze

Click anywhere and a fountain of palette-colored confetti erupts from the pointer. Rendered in the Mint Breeze palette.

HTMLCSSJavaScriptModerate

Showing 48 / 240

MotionVault

The treasure vault for animated web design. Full site templates, advanced components, UI micro-elements and animation snippets — each with live preview, source code and an AI prompt. Inspired by Motion Sites, React Bits, Uiverse, Anime.js and Aceternity UI.

1246 items582k stars376k copies

Vault sections

Site Templates
Components
UI Elements
Animations

More

Explore everything
Favorites
Submit
Privacy
Roadmap
Support
Accessibility
Built with Next.js · Tailwind

© 2026 MotionVault — curated for builders who ship.·🎲 Surprise me·v2.0.0

Animations — Animated web animations with AI prompts · MotionVault