Getting Started
Scroll Animations
Text Animations
Hover & Cursor
Sliders & Carousels
Galleries & Grids
Menus & Navigation
Preloaders & Intros
Page Transitions
3D & WebGL
vinyl-cover-demo
import { VinylCover } from "@/registry/tween/vinyl-cover"
export function VinylCoverDemo() {
return (
<div className="w-full">
<VinylCover />
</div>
)
}
Installation
Usage
import { VinylCover } from "@/components/ui/vinyl-cover"<VinylCover
textsPrimary={[
"Hymns for Low Water",
"Now spinning at 33⅓ RPM",
"Pressed at Harrow Lane",
]}
textSecondary="Side A — First Pressing, 180g"
coverImage="https://images.unsplash.com/photo-1566039541962-d2e5195504f0?q=80&w=900&h=900&fit=crop"
/>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.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
textsPrimary | readonly string[] | 3 × default copy | Lines streamed along the upper arc. Pass N copies for N slots. |
textSecondary | string | "Side A — First…" | Single static line on the lower arc. |
diskImage | string | Bundled disk | Source for the vinyl disk image (/vinyl-cover/disk.png). |
coverImage | string | Remote cover photo | 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. |
Behavior
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.