Gradient Tracing

Component 47

About

An animated line component with a moving gradient and optional logos at the endpoints.

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

Code

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

Usage.tsx

import { GradientTracing } from "@/components/ui/gradient-tracing";

const Demo = () => (
  <GradientTracing
    width={300}
    height={250}
    path="M150,30 C150,30 125,0 75,0 S0,30 0,75 C0,150 150,170 150,170 C150,170 300,150 300,75 C300,30 270,0 225,0 S150,30 150,30"
    gradientColors={["#FF85A2", "#FF85A2", "#FFC300"]}
  />
);

export { Demo };