Getting Started
Components
TweenCommand Palette
Search for a command to run...
TweenSearch for a command to run...
import { VinylCover } from "@/registry/tween/vinyl-cover"
export function VinylCoverDemo() {
return (
<div className="w-full">
<VinylCover />
</div>
)
}
import { VinylCover } from "@/components/ui/vinyl-cover"<VinylCover
textsPrimary={[
"Midnight Sessions — Side A",
"Now spinning at 33â…“ RPM",
"Remastered Edition · 2026",
]}
textSecondary="Throwback Music for Late Nights"
diskImage="/vinyl-cover/disk.png"
coverImage="/vinyl-cover/sample-cover.jpg"
/>The disk rotates continuously while the album cover stays fixed at its center. Each line in textsPrimary travels along the upper arc in turn, and textSecondary sits statically on the lower arc beneath the record.
| Prop | Type | Default | Description |
|---|---|---|---|
textsPrimary | readonly string[] | 3 × default copy | Lines streamed along the upper arc. Pass N copies for N slots. |
textSecondary | string | "Throwback Music…" | Single static line on the lower arc. |
diskImage | string | Default disk | Source for the vinyl disk image. |
coverImage | string | Default cover | Source for the album cover at the center. |
height | number | string | var(--preview-h…) | Outer container height. |
diskSize | number | 550 | Disk diameter in pixels. |
coverSize | number | 250 | Cover diameter in pixels. |
rotationDuration | number | 2 | Seconds for one full disk rotation. |
textDuration | number | 6 | Seconds for one pass of a single text line along the upper arc. |
className | string | — | Extra classes on the outer container. |
When prefers-reduced-motion: reduce is set, the disk stops spinning and the arc text holds in place so the layout stays legible without continuous motion.