Spring Element

Component 130

About

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

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

Code

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

Usage.tsx

import { SpringElement } from "@/components/ui/spring-element";
import {
  Avatar,
  AvatarFallback,
  AvatarImage,
} from '@/components/ui/avatar';

function DemoOne() {
  return <SpringElement>
    <Avatar className="size-20" >
      <AvatarImage
          draggable={ false }
  src = "https://cdn.21st.dev/assets/localized/dcbd1f440d0c95b1438a854dca3e23c7171ca4703e6d58ee91e98c159b1874c6.png"
    />
    <AvatarFallback>AK < /AvatarFallback>
    </Avatar>
    </SpringElement>
}

export { DemoOne };

export default DemoOne