║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║

---

title: Spring description: A flexible, animated spring component that attaches a draggable element to its origin with a spring line. author: name: arhamkhnz url: https://github.com/arhamkhnz releaseDate: 2025-09-07

<ComponentPreview name="demo-primitives-animate-spring" />

Installation

<ComponentInstallation name="primitives-animate-spring" />

Usage

<SpringProvider>
  <Spring />
  <SpringElement>
    <p>Hello</p>
  </SpringElement>
</SpringProvider>

<Callout type="info"> **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. </Callout>

API Reference

SpringProvider

<TypeTable type={{ children: { description: 'The children of the SpringProvider', type: 'React.ReactNode', required: true, }, dragElastic: { description: 'How elastic the drag interaction feels. Lower values = less stretch.', type: 'number', required: false, default: '0.2', }, transition: { description: 'The transition of the SpringProvider', type: 'SpringOptions', required: false, default: '{ type: "spring", stiffness: 200, damping: 16 }', }, pathConfig: { description: 'Config for the spring path itself: number of coils, amplitude, curve ratios, etc.', type: 'SpringPathConfig', required: false, default: '{}', }, }} />

Spring

<TypeTable type={{ '...props': { description: 'The props of the Spring component.', type: 'React.SVGProps<SVGSVGElement>', required: false, }, }} />

SpringElement

<TypeTable type={{ children: { description: 'The children of the SpringElement', type: 'React.ReactElement', required: true, }, '...props': { description: 'The props of the SpringElement component.', type: 'HTMLMotionProps<"div">', required: false, }, }} />

Credits

• Updated by imskyleen
• Credits to Anh for this X post as inspiration

║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║