LivingVineBackground

Heroes 208

About

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.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds LivingVineBackground to your project and fits it to your theme.

Code

How LivingVineBackground is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

import 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>
  );
}