Components
Loading preview...
A full-screen, interactive vine simulation that traces the mouse path and autonomously sprouts tendril branches. Built on HTML canvas, this generative art piece evokes organic growth patterns and evolving motion. Ideal for hero backgrounds, ambient UI overlays, or digital art installations.
@dhiluxui
npx shadcn@latest add https://21st.dev/r/dhileepkumargm/living-vine-backgroundimport React from "react";
import LivingVineBackground from "@/components/ui/living-vine-background";
export default function DemoOne() {
const glow = "0 0 5px #2dffbe, 0 0 10px #2dffbe";
return (
<main>
<LivingVineBackground>
<div className="relative z-10 flex h-full w-full flex-col items-center justify-center select-none text-center">
<div className="p-8 sm:p-12">
<h1
className="m-0 font-sans font-bold uppercase tracking-widest text-5xl sm:text-7xl text-emerald-200"
style={{ textShadow: glow }}
>
Genesis
</h1>
<h2 className="m-0 mt-2 font-sans uppercase tracking-[.2em] text-lg sm:text-2xl text-emerald-200/70">
Digital Growth
</h2>
</div>
<p className="absolute bottom-10 text-emerald-200/40 text-sm px-4 font-mono">
The cursor's path gives rise to new forms.
</p>
</div>
</LivingVineBackground>
</main>
);
}