Backgrounds

Vortex

Animated particle vortex effect with customizable colors, speed, and density.

The Vortex component creates an animated particle vortex effect using canvas-based rendering. It features customizable particle count, colors, speed, and radius with smooth animations and glow effects.

This component requires the simplex-noise package to be installed in your project.

pnpm add simplex-noise

yarn add simplex-noise

npm install simplex-noise

bun add simplex-noise

Usage

Vortex Effect

Animated particle vortex with customizable parameters

<template>
  <MVortex
    :particle-count="1000"
    :base-hue="200"
    :base-speed="0.1"
    :range-speed="2.0"
    :base-radius="1"
    :range-radius="3"
    background-color="transparent"
    class="rounded-xl h-64"
  >
    <div class="text-center space-y-4">
      <h2 class="text-3xl font-bold text-white">
        Vortex Effect
      </h2>
      <p class="text-lg text-dimmed">
        Animated particle vortex with customizable parameters
      </p>
    </div>
  </MVortex>
</template>

Examples

Basic Vortex

Vortex Effect

Create mesmerizing vortex animations that draw users into your content with dynamic spiral motions

<template>
  <MVortex class="rounded-xl h-80">
    <div class="text-center space-y-6 p-8">
      <div class="mb-4">
        <div class="w-16 h-16 rounded-full bg-gradient-to-r from-purple-500 to-pink-500 flex items-center justify-center mx-auto">
          <UIcon
            name="i-lucide-tornado"
            class="w-8 h-8 text-white"
          />
        </div>
      </div>
      <h2 class="text-3xl font-bold text-white">
        Vortex Effect
      </h2>
      <p class="text-dimmed max-w-md mx-auto">
        Create mesmerizing vortex animations that draw users into your content with dynamic spiral motions
      </p>
      <UButton
        color="neutral"
        variant="solid"
        size="md"
      >
        Experience Vortex
      </UButton>
    </div>
  </MVortex>
</template>

Customize

Build in motion

Layered effects stay out of the way until you need them

Customize

Particle Count700

Range Y100

Base Hue220

Base Speed0

Range Speed1.5

Base Radius1

Range Radius2

Background Color

Props

Prop	Type	Default	Description
`class`	`string`	`''`	CSS classes to apply to the container element.
`containerClass`	`string`	`''`	CSS classes to apply to the outer container.
`particleCount`	`number`	`700`	Number of particles in the vortex.
`rangeY`	`number`	`100`	Vertical range for particle positioning.
`baseHue`	`number`	`220`	Base hue value for particle colors.
`baseSpeed`	`number`	`0.0`	Base speed of particle movement.
`rangeSpeed`	`number`	`1.5`	Range of speed variation for particles.
`baseRadius`	`number`	`1`	Base radius of particle trails.
`rangeRadius`	`number`	`2`	Range of radius variation for particles.
`backgroundColor`	`string`	`'#000000'`	Background color of the canvas. Accepts a Nuxt UI color token (e.g. `primary`) or any CSS color.

UI

This component's theme exposes the slots below. Override any of them per instance with the ui prop, or app-wide under ui.vortex in app.config.ts.

Prop	Type	Default	Description
`ui`	`object`	-	Per-slot classes merged over the theme defaults.

Slot	Props	Description
`root`	-	`relative h-full w-full`
`background`	-	`absolute inset-0 z-0 flex h-full w-full items-center justify-center bg-transparent`
`canvas`	-
`content`	-	`relative z-10`

Edit this pageorReport an issue

Striped Pattern

A diagonal stripe backdrop drawn from a single repeating gradient.

Warp Background

A perspective floor grid that scrolls toward the viewer under a glowing horizon.