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
Prop | Type | Default | Description |
---|---|---|---|
isVertical | boolean | false | Whether the line is vertical or horizontal |
grabThreshold | number | 5 | The distance threshold for grabbing the line |
releaseThreshold | number | 100 | The distance threshold for releasing the line |
strokeWidth | number | 1 | The width of the line stroke |
transition | Transition | { type: "spring", stiffness: 400, damping: 5, delay: 0 } | The transition object of the line. Refer to motion docs for more details |
animateInTransition | Transition | { 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 |
className | string | - | Additional CSS classes for styling on the svg container |