Components
Loading preview...
The MouseSpark component is a visually appealing, interactive cursor particle effect for web applications. It automatically adjusts to light and dark themes, seamlessly blending with white or black backgrounds. When the user moves their mouse, colorful particles are spawned at the cursor position, leaving smooth, fading trails that create a dynamic, sparkling effect. The component is fully responsive, covering the entire viewport and adapting to window resizing, while remaining non-intrusive with pointer-events disabled so it doesn’t interfere with user interactions. Designed for elegance and performance, it continuously removes old particles to ensure smooth animation, providing a modern and engaging visual enhancement for websites or applications without requiring any props or configuration.
npx shadcn@latest add https://21st.dev/r/ruixen.ui/mouse-spark"use client";
import React, { useState } from "react";
import MouseSpark from "@/components/ui/mouse-spark";
export default function HomePage() {
const [theme, setTheme] = useState<"light" | "dark">("dark");
return (
<div style={{ width: "100vw", height: "100vh", overflow: "hidden" }}>
<MouseSpark />
<div
style={{
position: "absolute",
top: "50%",
left: "50%",
transform: "translate(-50%, -50%)",
color: theme === "dark" ? "#000" : "#fff",
fontSize: "1rem",
textAlign: "center",
}}
>
Move your mouse to see the splash effect!
</div>
</div>
);
}