# Elastic Line

> A wobbly svg line with a spring cursor interaction.  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.

- Author: [Daniel Petho](https://21st.dev/@danielpetho)
- Library: [Fancy Components](https://21st.dev/@danielpetho/library/fancy-components)
- License: mit
- Tags: Animation, Landing Page, Physics
- npm dependencies: framer-motion
- Live preview: https://21st.dev/@danielpetho/components/elastic-line

## Install

```bash
npx shadcn@latest add "https://21st.dev/r/danielpetho/elastic-line?api_key=$API_KEY_21ST"
```

Requires a 21st API key (generate one at https://21st.dev/mcp) passed as `API_KEY_21ST`. Free accounts get a limited number of installs per day; unlimited on a paid plan — see https://21st.dev/pricing.

Full component directory: https://21st.dev/llms.txt · More like this: https://21st.dev/community/components/s/animation.md