Spring

Component

About

A draggable element connected to its origin by an animated coiled spring line that stretches and snaps back with physics-based motion.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Spring to your project and fits it to your theme.

Code

How Spring is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

"use client";

import * as React from "react";
import {
  SpringProvider,
  Spring,
  SpringElement,
} from "@/components/ui/primitives-animate-spring";

export default function PrimitivesAnimateSpringDemo() {
  return (
    <div className="relative flex h-screen w-full items-center justify-center overflow-hidden bg-background">
      <SpringProvider>
        <Spring className="text-neutral-400 dark:text-neutral-600" />
        <SpringElement>
          <div className="flex h-24 w-24 select-none items-center justify-center rounded-full bg-primary text-sm font-medium text-primary-foreground shadow-lg">
            Drag me
          </div>
        </SpringElement>
      </SpringProvider>
    </div>
  );
}