Docs
Elastic Line

Elastic Line

A wobbly svg line with a spring cursor interaction.

FANCY COMPONENTS

Ready to use, fancy, animated React components & microinteractions for creative developers.

Installation


npx shadcn@latest add "https://fancycomponents.dev/r/elastic-line.json"

Understanding the component


This component is made with a simple svg quadratic curve, with 2+1 points. The start and end points of the curve positioned at the two edges of the parent container, either horizontally or vertically, depending on the isVertical prop. This means, the line will always be centered in the container, and it will always fill up the entire container, so make sure to position your container properly.

The third point of the line is the control point, named Q, which is positioned at the center of the container by default. When the cursor moves close to the line (within grabThreshold), the control point will be controlled by the cursor's position. When the distance between them is greater than the releaseThreshold prop, the control point is animated back to the center of the container, with the help of motion's animate function.

For better readability — the calculation of the control point's position, and the signal it's grabbed — done in a separate hook, called useElasticLineEvents.

To achiave the elastic effect we use a springy transition by default, but feel free to experiment with other type of animations, easings, durations, etc.

The compoment also have an animateInTransition prop, which is used when the line is initially rendered. If you want to skip this, just set the transiton's duration to 0.

Resources


Props


PropTypeDefaultDescription
isVerticalbooleanfalseWhether the line is vertical or horizontal
grabThresholdnumber5The distance threshold for grabbing the line
releaseThresholdnumber100The distance threshold for releasing the line
strokeWidthnumber1The width of the line stroke
transitionTransition{ type: "spring", stiffness: 400, damping: 5, delay: 0 }The transition object of the line. Refer to motion docs for more details
animateInTransitionTransition{ type: "spring", stiffness: 400, damping: 5, delay: 0 }The transition object of the line when it is initially rendered. Refer to motion docs for more details
classNamestring-Additional CSS classes for styling on the svg container