Components
Vortex
Vortex
Mesmerizing vortex effect with swirling animations and floating particles.
UI Studio
Experience the next generation of component libraries with mesmerizing animations and cutting-edge design patterns.
Installation
1
Install the packages
npm i motion clsx tailwind-merge2
Add util file
lib/util.ts
import { ClassValue, clsx } from "clsx";
import { twMerge } from "tailwind-merge";
export function cn(...inputs: ClassValue[]) {
return twMerge(clsx(inputs));
}
import { ClassValue, clsx } from "clsx";
import { twMerge } from "tailwind-merge";
export function cn(...inputs: ClassValue[]) {
return twMerge(clsx(inputs));
}
3
Copy and paste the following code into your project
vortex.tsx
"use client";
import React from "react";
import { motion } from "motion/react";
import { cn } from "@/lib/utils";
export function Vortex() {
return (
<div className="w-[calc(100%-4rem)] mx-auto rounded-md h-[30rem] overflow-hidden relative">
{/* Animated background vortex */}
<div className="absolute inset-0 bg-gradient-to-br from-indigo-900 via-indigo-800 to-black">
{/* Vortex circles */}
{Array.from({ length: 6 }).map((_, i) => (
<motion.div
key={i}
className="absolute inset-0 rounded-full border border-indigo-400/20"
style={{
left: `${10 + i * 5}%`,
top: `${10 + i * 5}%`,
right: `${10 + i * 5}%`,
bottom: `${10 + i * 5}%`,
}}
animate={{
rotate: 360,
scale: [1, 1.1, 1],
}}
transition={{
rotate: {
duration: 20 + i * 2,
repeat: Infinity,
ease: "linear",
},
scale: {
duration: 4 + i,
repeat: Infinity,
ease: "easeInOut",
},
}}
/>
))}
{/* Floating particles */}
{Array.from({ length: 20 }).map((_, i) => (
<motion.div
key={`particle-${i}`}
className="absolute w-1 h-1 bg-indigo-300 rounded-full"
style={{
left: `${Math.random() * 100}%`,
top: `${Math.random() * 100}%`,
}}
animate={{
x: [0, Math.random() * 100 - 50],
y: [0, Math.random() * 100 - 50],
opacity: [0, 1, 0],
}}
transition={{
duration: 3 + Math.random() * 2,
repeat: Infinity,
ease: "easeInOut",
delay: Math.random() * 2,
}}
/>
))}
</div>
{/* Content */}
<div className="relative flex items-center flex-col justify-center px-2 md:px-10 py-4 w-full h-full z-10">
<motion.h2
className="text-white text-2xl md:text-6xl font-bold text-center"
initial={{ opacity: 0, y: 20 }}
animate={{ opacity: 1, y: 0 }}
transition={{ delay: 0.2, duration: 0.8 }}
>
UI Studio
</motion.h2>
<motion.p
className="text-white text-sm md:text-2xl max-w-xl mt-6 text-center"
initial={{ opacity: 0, y: 20 }}
animate={{ opacity: 1, y: 0 }}
transition={{ delay: 0.4, duration: 0.8 }}
>
Experience the next generation of component libraries with mesmerizing animations and cutting-edge design patterns.
</motion.p>
<motion.div
className="flex flex-col sm:flex-row items-center gap-4 mt-6"
initial={{ opacity: 0, y: 20 }}
animate={{ opacity: 1, y: 0 }}
transition={{ delay: 0.6, duration: 0.8 }}
>
<motion.button
className="px-4 py-2 bg-indigo-600 hover:bg-indigo-700 transition duration-200 rounded-lg text-white shadow-[0px_2px_0px_0px_#FFFFFF40_inset]"
whileHover={{ scale: 1.05 }}
whileTap={{ scale: 0.95 }}
>
Explore Components
</motion.button>
<motion.button
className="px-4 py-2 text-white hover:text-indigo-200 transition duration-200"
whileHover={{ scale: 1.05 }}
>
View Documentation
</motion.button>
</motion.div>
</div>
{/* Overlay gradient */}
<div className="absolute inset-0 bg-gradient-to-t from-indigo-900/50 via-transparent to-indigo-900/50 pointer-events-none" />
</div>
);
}
export default Vortex;"use client";
import React from "react";
import { motion } from "motion/react";
import { cn } from "@/lib/utils";
export function Vortex() {
return (
<div className="w-[calc(100%-4rem)] mx-auto rounded-md h-[30rem] overflow-hidden relative">
{/* Animated background vortex */}
<div className="absolute inset-0 bg-gradient-to-br from-indigo-900 via-indigo-800 to-black">
{/* Vortex circles */}
{Array.from({ length: 6 }).map((_, i) => (
<motion.div
key={i}
className="absolute inset-0 rounded-full border border-indigo-400/20"
style={{
left: `${10 + i * 5}%`,
top: `${10 + i * 5}%`,
right: `${10 + i * 5}%`,
bottom: `${10 + i * 5}%`,
}}
animate={{
rotate: 360,
scale: [1, 1.1, 1],
}}
transition={{
rotate: {
duration: 20 + i * 2,
repeat: Infinity,
ease: "linear",
},
scale: {
duration: 4 + i,
repeat: Infinity,
ease: "easeInOut",
},
}}
/>
))}
{/* Floating particles */}
{Array.from({ length: 20 }).map((_, i) => (
<motion.div
key={`particle-${i}`}
className="absolute w-1 h-1 bg-indigo-300 rounded-full"
style={{
left: `${Math.random() * 100}%`,
top: `${Math.random() * 100}%`,
}}
animate={{
x: [0, Math.random() * 100 - 50],
y: [0, Math.random() * 100 - 50],
opacity: [0, 1, 0],
}}
transition={{
duration: 3 + Math.random() * 2,
repeat: Infinity,
ease: "easeInOut",
delay: Math.random() * 2,
}}
/>
))}
</div>
{/* Content */}
<div className="relative flex items-center flex-col justify-center px-2 md:px-10 py-4 w-full h-full z-10">
<motion.h2
className="text-white text-2xl md:text-6xl font-bold text-center"
initial={{ opacity: 0, y: 20 }}
animate={{ opacity: 1, y: 0 }}
transition={{ delay: 0.2, duration: 0.8 }}
>
UI Studio
</motion.h2>
<motion.p
className="text-white text-sm md:text-2xl max-w-xl mt-6 text-center"
initial={{ opacity: 0, y: 20 }}
animate={{ opacity: 1, y: 0 }}
transition={{ delay: 0.4, duration: 0.8 }}
>
Experience the next generation of component libraries with mesmerizing animations and cutting-edge design patterns.
</motion.p>
<motion.div
className="flex flex-col sm:flex-row items-center gap-4 mt-6"
initial={{ opacity: 0, y: 20 }}
animate={{ opacity: 1, y: 0 }}
transition={{ delay: 0.6, duration: 0.8 }}
>
<motion.button
className="px-4 py-2 bg-indigo-600 hover:bg-indigo-700 transition duration-200 rounded-lg text-white shadow-[0px_2px_0px_0px_#FFFFFF40_inset]"
whileHover={{ scale: 1.05 }}
whileTap={{ scale: 0.95 }}
>
Explore Components
</motion.button>
<motion.button
className="px-4 py-2 text-white hover:text-indigo-200 transition duration-200"
whileHover={{ scale: 1.05 }}
>
View Documentation
</motion.button>
</motion.div>
</div>
{/* Overlay gradient */}
<div className="absolute inset-0 bg-gradient-to-t from-indigo-900/50 via-transparent to-indigo-900/50 pointer-events-none" />
</div>
);
}
export default Vortex;4
Update the import paths to match your project setup
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| className | string | Additional CSS classes for the vortex container. |