# Pluck String: Strum

> Six strings tuned like a guitar: thicker strings are softer and ring longer. Sweep down across all of them.

A shadcn/ui block from the [@keyframeui](https://keyframeui.com) registry, listed on [shadcn.exchange](https://shadcn.exchange/r/keyframeui/pluck-string-strum-demo).

- Page, with a live preview: https://shadcn.exchange/r/keyframeui/pluck-string-strum-demo
- Screenshot: https://abzjhwgwpdpz7ua5.public.blob.vercel-storage.com/shots/keyframeui/pluck-string-strum-demo-light-61138cb271ab8b6c.png
- Registry item: https://keyframeui.com/r/pluck-string-strum-demo.json
- Categories: divider, interaction, svg
- Listed: 2026-10-14, source last changed 2026-10-15

## Install

```bash
npx shadcn@latest add https://keyframeui.com/r/pluck-string-strum-demo.json
```

Run it in a project that has shadcn/ui set up. It adds the files below and installs what they depend on.

## Dependencies

- Registry items: `https://keyframeui.com/r/pluck-string.json`

## Notes from the registry

Live preview, examples and props: https://keyframeui.com/components/pluck-string#pluck-string-strum-demo

## Files

### `registry/demos/pluck-string-strum-demo.tsx`

```tsx
import { PluckString } from "@/components/ui/pluck-string";

// Standard tuning in tab order: thin and quick on top, thick and slow below.
const strings = [
  { note: "e", stiffness: 1500, damping: 7, width: 0.75 },
  { note: "B", stiffness: 1150, damping: 6, width: 1 },
  { note: "G", stiffness: 880, damping: 5, width: 1.25 },
  { note: "D", stiffness: 670, damping: 4.5, width: 1.5 },
  { note: "A", stiffness: 510, damping: 4, width: 1.75 },
  { note: "E", stiffness: 390, damping: 3.5, width: 2 },
];

export function PluckStringStrumDemo() {
  return (
    <div className="w-full max-w-xl rounded-2xl border border-zinc-200 bg-white p-6 shadow-xl shadow-zinc-900/5 sm:p-8 dark:border-zinc-800 dark:bg-zinc-950 dark:shadow-black/40">
      <div className="flex items-baseline justify-between">
        <p className="font-mono text-xs uppercase tracking-widest text-zinc-500">Standard tuning</p>
        <p className="font-mono text-xs text-zinc-400 dark:text-zinc-600">Strum down</p>
      </div>
      <div className="mt-6">
        {strings.map((string) => (
          <div key={string.note} className="flex items-center gap-4">
            <span className="w-3 font-mono text-xs text-zinc-500">{string.note}</span>
            <PluckString
              pull={12}
              stiffness={string.stiffness}
              damping={string.damping}
              strokeWidth={string.width}
              className="h-8 flex-1 text-zinc-300 dark:text-zinc-700"
              highlightClassName="text-amber-500 dark:text-amber-400"
            />
          </div>
        ))}
      </div>
    </div>
  );
}
```