360+ Animated UI Components & WebGL Effects for Vue/Nuxt

nxui is an open-source collection of 360+ free, animated Vue UI components built with Tailwind CSS and motion-v.

It provides interactive cards, text effects, dashboard widgets, charts, and WebGL backgrounds as editable source files installed through shadcn-vue.

GitHub Repo

Browse All Components

Features

Live examples, component-level props, and Vue source available for each registry item.
Animated text, cursor effects, 3D galleries, interactive controls, and WebGL backgrounds.
Dashboard data tables, KPI widgets, SVG charts, and status indicators.
Thirty Paper Shaders effects wrapped as Vue components with typed props.
Vue 3 Composition API and TypeScript component files.
Tailwind CSS styling, light/dark themes, and component-level customization.

Use Cases

Product landing pages with animated headlines, interactive cards, and shader-powered hero backgrounds.
Operational dashboards where live row changes, KPI values, and service status need clear feedback.
Portfolio pages with draggable galleries, 3D image transitions, and scroll-driven content.

How to Use nxui

Install a component

For a project that already has shadcn-vue configured, go directly to the component installation command. Otherwise, initialize the CLI configuration first:

npx shadcn-vue@latest init

Install a Component (Spotlight Card in This Example)

npx shadcn-vue@latest add "https://nxui.geoql.in/r/spotlight-card.json"

Use the Component in Nuxt

Spotlight Card follows the pointer and can illuminate a nearby card before the pointer enters it. shape="beam" changes the light pattern, and proximity sets the reach outside the card in pixels.

<script setup lang="ts">
import SpotlightCard from '~/components/ui/spotlight-card/SpotlightCard.vue'
</script>
<template>
  <div class="grid gap-4 sm:grid-cols-2">
    <SpotlightCard class="text-white" shape="beam" :proximity="120">
      <h3 class="text-lg font-medium">Monthly activity</h3>
      <p class="text-sm text-white/60">Recent orders and visits</p>
    </SpotlightCard>
  </div>
</template>

Available UI Components

Text Animations

ASCII Effect, ASCII Text, Blur Text, Circular Text, Count Up, Curved Loop, Decrypted Text, Depth Dive.
Depth Text, Echo Text, Editorial Orbs, Falling Text, Flipping Word Swap, Fold Text, Fuzzy Text, Glitch Text.
Gradient Text, Hyper Text, Kinetic Text Reveal, Letter Cascade, Logo Loop, Masked Heading, Particle Text, Particle Typography.
Rotating Text, Scrambled Text, Scroll Based Velocity, Scroll Float, Scroll Reveal, Shiny Text, Shuffle, Split Flap Text.
Split Text, Stroke Text, Tech Text, Text Animate, Text Cursor, Text Loop, Text Morph, Text Pressure.
Text Repel, Text String, Text Type, True Focus, Typer Text, Variable Proximity, Warp Text.

Animations

Animated Content, Blob Cursor, Click Spark, Crosshair, Crystalized Ball, Cubes, Cursor Grid, Dither Veil.
Elastic Mesh, Electric Border, Electric Logo, Fade Content, Ghost Cursor, Glare Hover, Glow Cursor, Gradual Blur.
Halftone Reveal, Image Trail, Magic Rings, Magnet, Meta Balls, Noise, Pixel Swap, Pixel Trail.
Pixel Transition, Ribbons, Ripple Distortion, Scroll Expand, Shape Blur, Splash Cursor, Star Border, Sticker Peel.
Strands, Swarm Cursor, Target Cursor.

UI Components

Accordion Gallery, Animated List, Animated TOC, Annotated Text, Art Gallery, Aurora Accordion, Auth Modal, Banknote Bento.
Bell Toggle, Block Palette, Border Glow, Bounce Cards, Bouncy Accordion, Branched Menu, Bubble Menu, Call Chip.
Canvas Toolbar, Card Nav, Card Swap, Carousel, Case Study Flip Stack, Chroma Grid, Circle Input, Circular Carousel.
Circular Gallery, Code Slots, Collection Surfer, Color Picker, Comet Dial, Command Menu, Counter, Curved Drawer.
Curved Input, Decay Card, Depth Carousel, Dithered Logo, Dock, Dodge Field, Dome Gallery, Drag Reorder List.
Drift Wall, Dynamic Island Header, Elastic Slider, Eye Tracking, Flex Carousel, Flight Status Card, Flip Card, Flowing Menu.
Fluid Glass, Flying Posters, Folder, Folder Float, Frosted Navigation, GitHub Calendar, Glass Icons, Glass Surface.
Glide Select, Gooey Dropdown, Gooey Nav, Holo Card, Holo Cloth, Holo Sticker, Hover Transition, Infinite Menu.
Infinite Spiral, Jelly Radio, Lanyard, Lattice Loader, Layered Stack, Lens Clock, Line Sidebar, Liquid Glass Carousel.
Mac Keyboard, Magic Bento, Magnetic Dock, Masonry, Model Viewer, Morph Slider, Music Player, Newsletter Bookshelf.
Node Canvas, Node Diagram, Nostalgia, Notification Center, Option Wheel, Orbit Card Stack, Orbit Images, Paper Crumple.
Peek Rating, Pill Nav, Pixel Card, PlayStation Navbar, Podcast Player, Profile Card, Progress Stepper, Prompt Bar.
Pulse Heart, Receipt Printer, Refine Frame, Reflective Card, Ripple Transition, Rubber Segment, Scroll Choreography, Scroll Split Card.
Scroll Stack, Scroll Tilted Grid, Scrub Field, Scrub Input, Showcase Card, Shredder, Signature, Signature Eraser.
Slide Commit, Slosh Gauge, Specular Button, Spiral 3D Slider, Split Flap Display, Spotlight Card, Spring Check, Squish Switch.
Stack, Stacked List, Staggered Menu, Status Mark, Stepper, Sticky Scroll Cards, Swipe Row, Swipe Toast.
Tear Ticket, Testimonial Marquee, Thought Line, Tilted Card, Timezone Companion, Visual Stepper, Voice Pill, Wake Slider.
Warm Tooltip, Weather Forecast, Wheel Carousel.

Backgrounds

Acid Squares, Aero Shards, Antigravity, Aurora, Balatro, Ballpit, Beams, Color Bends.
CRT Warp, Dark Veil, Dither, Dot Field, Dot Grid, Evil Eye, Faulty Terminal, Ferrofluid.
Floating Lines, Flux Lines, Galaxy, Ghost Fibers, Gradient ASCII, Gradient Blinds, Gradient Waves, Grainient.
Grid Distortion, Grid Motion, Grid Scan, Hyperspeed, Iridescence, Laser Flow, Letter Glitch, Light Pillar.
Light Rays, Light Tunnel, Lightfall, Lightning, Line Waves, Liquid Chrome, Liquid Ether, Metallic Paint.
Micro Slats, Molten Metal, Orb, Particles, Pattern Waves, Pixel Blast, Pixel Snow, Plasma.
Plasma Wave, Prism, Prismatic Burst, Radar, Ripple Grid, Scanner, Shape Grid, Shape Waves.
Side Rays, Silk, Sliced Waves, Soft Aurora, Squares, Threads, Topography, Waves.
Web Threads.

Hero Backgrounds

Animated Gradient, Aurora Flow, Dither Prism Hero, Grain Gradient, Hero Geometric, Prism Gradient, Silk Aurora, Spectral Ribbon.
WebGL Liquid.

Dashboard

Clean Table, Control Card, Data Table, Downtime Log, KPI Card, KPI Carousel, Range Calendar, Status Panel.

Charts

Area Chart, Beeswarm Chart, Donut Chart, Iso Stacked Bars, Pattern Donut, Progress Ring, Radial Gauge, Sparkline.

Visual Effects

Border Beam, Closing Plasma, Dither Gradient, Fisheye Infinite Grid, Image Ripple Effect, Infinite Image Field, Liquid Blob, Magnet Lines.
Matrix Rain, Noise Texture, Particle Galaxy, Pixel Canvas, Pixel Image Trail, Pixel Wave.

Buttons

Chaos Button, Fizzy Button, Flying Button, Fuse Button, Hold Button, Interactive Hover Button, Pulsating Button, Shimmer Button.
Sling Button.

Paper Shaders

Color Panels, Dithering, Dot Grid, Dot Orbit, Fluted Glass, Gem Smoke, God Rays, Grain Gradient.
Halftone CMYK, Halftone Dots, Heatmap, Image Dithering, Lens Distortion, Liquid Metal, Mesh Gradient, Metaballs.
Neuro Noise, Paper Texture, Perlin Noise, Pulsing Border, Simplex Noise, Smoke Ring, Spiral, Static Mesh Gradient.
Static Radial Gradient, Swirl, Voronoi, Warp, Water, Waves.