Spring

"use client"

import {
  Spring,
  SpringElement,
  SpringProvider,
} from "@animate-ui/react/primitives/spring"

export default function SpringDemo() {
  return (
    <SpringProvider>
      <Spring className="z-10 text-muted-foreground" />
      <SpringElement className="relative z-20">
        <div
          aria-label="Drag me"
          className="flex size-14 items-center justify-center rounded-full bg-primary text-sm font-medium text-primary-foreground shadow-md select-none"
        >
          Drag
        </div>
      </SpringElement>
    </SpringProvider>
  )
}

InstallationCopy Anchor Link

npm install @animate-ui/react motion

pnpm add @animate-ui/react motion

yarn add @animate-ui/react motion

bun add @animate-ui/react motion

UsageCopy Anchor Link

import {
  Spring,
  SpringElement,
  SpringProvider,
} from '@animate-ui/react/primitives/spring';

export function Avatar() {
  return (
    <SpringProvider>
      <Spring className="text-muted-foreground" />
      <SpringElement>
        <img src="/avatar.png" alt="Avatar" draggable={false} />
      </SpringElement>
    </SpringProvider>
  );
}

AnimationCopy Anchor Link

• Dragging stretches a coil between the element's place and the element. The coil tightens as it stretches.
• On release, the element springs back with a bounce, the coil following it.
• Spring is a full-viewport SVG that never catches the pointer.
• Under reduced motion, the element is back in place at once on release.

API ReferenceCopy Anchor Link

SpringProviderCopy Anchor Link

SpringPathConfigCopy Anchor Link

SpringCopy Anchor Link

The coil. Its color is currentColor.

SpringElementCopy Anchor Link

useSpringCopy Anchor Link

Returns the spring state: the x/y and springX/springY motion values, isDragging / setIsDragging, the coil path and childRef.

CreditsCopy Anchor Link

• Inspired by Anh's post.