# Remotion Vinyl Player

> Remotion Vinyl Player

- Skill: `nolangz/remotion-vinyl-player` (Agent Skill, multi-file: 3 files)
- Install (CLI): `npx skillmds@latest add nolangz/remotion-vinyl-player`
- Raw SKILL.md: https://api.skillmd.com/api/skills/nolangz/remotion-vinyl-player/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Coding & Dev Tools
- Author: nolangz (https://skillmd.com/u/nolangz)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/nolangz/remotion-vinyl-player

---


# Remotion Vinyl Player

This skill provides a reusable architectural pattern and component for creating a highly aesthetic "Vinyl Record Player" interface in Remotion videos.

## How it works

The Vinyl Player relies on standard Remotion hooks (`useCurrentFrame`, `useVideoConfig`) to drive an infinite rotation, marquee scrolling text, and a synced progress bar.

1. **Infinite Rotation:** Using `frame / (fps * secondsPerRev) * 360`, the vinyl disc spins continuously, simulating realistic record playback.
2. **Seamless Marquee:** To handle long song titles, the text is duplicated (`<h2>Title</h2><h2>Title</h2>`) inside a flex container. `transform: translateX(-%)` maps from 0 to -50% to create a perfect, invisible looping marquee.
3. **Progress Bar:** Maps the current frame to the total duration of the composition or specified track length to animate a progress fill and knob.
4. **Realistic Textures:** CSS tricks like `radial-gradient` are applied to the record disc to create the illusion of vinyl grooves, while `box-shadow` generates edge lighting and depth.

## How to use this skill

1. **Copy the asset:** Copy the generic component located at `assets/VinylPlayer.tsx` into the user's `src/components/animations/` folder.
2. **Configure:** Guide the user to import and use the `<VinylPlayer />` component within their Remotion `<Composition />`.
3. **Adapt Data:** Pass standard props (`coverUrl`, `songTitle`, `artistName`) to customize the music player's display.

## Provided Assets

- `assets/VinylPlayer.tsx`: The highly reusable, strongly-typed Remotion component implementing the Vinyl Player layout and animations.