Christmas Tree

Component

About

A fully animated SVG Christmas tree with particle effects using GSAP.

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

Code

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

Usage.tsx

import { ChristmasTree } from "@/components/ui/christmas-tree";

export default function DemoOne() {
  return  <ChristmasTree
        width="90%"
        height="90%"
        speed={2}
        particleCount={100}
        colors={["#E8F6F8","#ACE8F8","#F6FBFE","#A2CBDC","#B74551","#5DBA72","#910B28","#446D39"]}
        bgColor="#151522"
        showEndMessage
      />;
}