Components
Gradient Tracing
An animated line component with a moving gradient and optional logos at the endpoints.
import { GradientTracing } from "@/components/ui/gradient-tracing";
const Demo = () => (
<GradientTracing width={300} height={100} path="M0,50 Q150,0 300,50" />
);
export { Demo };More examples
DefaultOpen page →
Sine waveOpen page →
Heart shapeOpen page →
Double helixOpen page →
SpiralOpen page →
Infinity symbolOpen page →
Bouncing ballOpen page →
Lightning boltOpen page →
Zigzag pathOpen page →
Loop pathOpen page →
Dependencies
Source
Published
Similar components
Explore more
Part of HextaUI — browse the full library on 21st.dev.