Spring Element

A flexible, animated spring component that attaches a draggable element (avatar, text, icon, or any React node) to its origin with a spring line.

Open in

Installation

Usage

<SpringElement>
  <Avatar className="size-12">
    <AvatarImage draggable={false} src={USER.src} />
    <AvatarFallback>{USER.fallback}</AvatarFallback>
  </Avatar>
</SpringElement>

Note: Add draggable={false} to your element (avatar, image, etc.) when passing it as children. This prevents the browser's native drag image from interfering with the spring drag animation.

Props

SpringElement

Prop	Type	Default
`springPathConfig?`	`{ coilCount?: number; amplitudeMin?: number; amplitudeMax?: number; curveRatioMin?: number; curveRatioMax?: number; bezierOffset?: number; }`	`{ coilCount: 8, amplitudeMin: 8, amplitudeMax: 20, curveRatioMin: 0.5, curveRatioMax: 1, bezierOffset: 8 }`
`springConfig?`	`{ stiffness?: number; damping?: number }`	`{ stiffness: 200, damping: 16 }`
`dragElastic?`	`number`	`0.4`
`springClassName?`	`string`	-
`className?`	`string`	-
`children`	`React.ReactElement`	-

Credits

Credits to Anh for this X post as inspiration

Built by Skyleen. The source code is available on GitHub.