Components
Loading preview...
This component, RisingGlow, is a visually engaging UI element designed to create a dynamic ambient effect beneath a heading or text. It generates a series of glowing particles that rise from the bottom of a container, gradually fading out as they ascend, simulating a magical or ethereal glow. The component is fully customizable, allowing you to adjust the number of particles, their color, size, and the overall width and height of the effect, making it adaptable to different sections of a page. Built with React and Framer Motion, it leverages smooth, infinite looping animations to maintain continuous movement, adding depth and a modern, futuristic aesthetic to your interface. This component works especially well for hero sections, promotional banners, or any UI element where subtle animated accents can enhance visual appeal without overwhelming the content.
npx shadcn@latest add https://21st.dev/r/ruixen.ui/rising-glow"use client";
import React from "react";
import { RisingGlow } from "@/components/ui/rising-glow";
export default function RisingGlowDemo() {
return (
<div className="flex flex-col items-center justify-center p-6">
<h1 className="text-6xl md:text-8xl font-bold relative z-10">
Lumina
</h1>
{/* Rising Glow animation below text */}
<div className="w-full max-w-4xl">
<RisingGlow
particleCount={80}
particleColor="#7CF734"
height={100}
width="100%"
/>
</div>
</div>
);
}