Elastic Frame

Cards

About

An interactive card/frame outline that behaves like a tensioned string, visually plucking and rippling when the pointer passes near its edge.

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

Code

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

Usage.tsx

"use client";

import ElasticFrame from "@/components/ui/elastic-frame";

export default function ElasticFrameDemo() {
  return (
    <div className="flex h-full w-full items-center justify-center p-10">
      <ElasticFrame className="max-w-sm" radius={24} padding={32}>
        <div
          className="flex h-40 w-full flex-col items-center justify-center gap-1 bg-neutral-900 text-center text-neutral-100"
          style={{ borderRadius: 24 - 32 / 2 }}
        >
          <p className="text-sm font-medium">Elastic Frame</p>
          <p className="text-xs text-neutral-400">
            Move your pointer near the edge
          </p>
        </div>
      </ElasticFrame>
    </div>
  );
}