Components
Loading preview...
This component is a reusable animated background generator built with WebGL (via the OGL library). Instead of relying on static images or repetitive patterns, it dynamically creates floating geometric characters (letters, numbers, or symbols) that drift and fade across the screen. The design makes it suitable as a hero section background for websites, since it adds subtle visual motion without overwhelming the foreground content. Because the characters are randomized, each render feels unique, giving a modern and minimalistic aesthetic. The abstraction also allows developers to swap character sets, adjust speed, opacity, or colors, making the component highly customizable and theme-friendly for both light and dark modes.
npx shadcn@latest add https://21st.dev/r/ruixen.ui/falling-symbols-backgroundimport FallingSymbolsBackground from "@/components/ui/falling-symbols-background";
export default function DemoOne() {
return (
<div className= "relative w-full h-screen overflow-hidden" >
<FallingSymbolsBackground />
<div className = "relative z-10 flex items-center justify-center h-full" >
<h1 className="text-5xl text-white" > Foreground Content </h1>
</div>
</div>
);
}