A divider between two blocks of text, with the default pull and spring.
@keyframeui
registry/demos/pluck-string-demo.tsx
import { PluckString } from "@/components/ui/pluck-string";
export function PluckStringDemo() {
return (
<div className="w-full max-w-md">
<p className="font-mono text-xs uppercase tracking-widest text-zinc-500">Field notes</p>
<h3 className="mt-3 text-2xl font-semibold tracking-tight text-zinc-900 dark:text-zinc-50">
Small things, done well
</h3>
<p className="mt-2 text-sm leading-relaxed text-zinc-600 dark:text-zinc-400">
Nobody remembers a divider. They remember the one that moved when they brushed past it.
</p>
<PluckString className="my-2" />
<p className="font-mono text-xs text-zinc-500">Sweep across the line, or tap it.</p>
</div>
);
}
Live preview, examples and props: https://keyframeui.com/components/pluck-string#pluck-string-demo










