Components
Vortex
Animated particle vortex effect with customizable colors, speed, and density.
Vortex
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-gray-300">
Animated particle vortex with customizable parameters
</p>
</div>
</MVortex>
</template>
Props
class
string
CSS classes to apply to the container element.
containerClass
string
CSS classes to apply to the outer container.
particleCount
number
Number of particles in the vortex.
rangeY
number
Vertical range for particle positioning.
baseHue
number
Base hue value for particle colors.
baseSpeed
number
Base speed of particle movement.
rangeSpeed
number
Range of speed variation for particles.
baseRadius
number
Base radius of particle trails.
rangeRadius
number
Range of radius variation for particles.
backgroundColor
string
Background color of the canvas.
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-64">
<div class="text-center space-y-4">
<h2 class="text-2xl font-bold text-white">
Basic Vortex
</h2>
<p class="text-gray-300">
Default vortex effect
</p>
</div>
</MVortex>
</template>
Custom Vortex
Purple Vortex
Custom purple color scheme
<template>
<MVortex
:particle-count="500"
:base-hue="300"
:base-speed="0.5"
:range-speed="1.0"
:base-radius="2"
:range-radius="4"
background-color="transparent"
class="rounded-xl h-64"
>
<div class="text-center space-y-4">
<h2 class="text-2xl font-bold text-white">
Purple Vortex
</h2>
<p class="text-gray-300">
Custom purple color scheme
</p>
</div>
</MVortex>
</template>