Björk UI

Components•Elastic frame

Elastic frame

A frame drawn as a tensioned string. Bring the pointer to an edge to pluck it, and it rings back to rest. Focus inside the frame sends a small breath through the string.

Dependencies

Motion clsx

Copy below cli

npx shadcn add @bjork-ui/elastic-frame

How to use

import { ElasticFrame } from "@/components/bjork-ui/interactive/elastic-frame";export function Demo() {  return (    <ElasticFrame coupling={900} damping={14} radius={24} padding={32}>      <Card className="rounded-[8px]" />    </ElasticFrame>  );}