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.
Infinite Rotation: Using frame / (fps * secondsPerRev) * 360, the vinyl disc spins continuously, simulating realistic record playback.
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.
Progress Bar: Maps the current frame to the total duration of the composition or specified track length to animate a progress fill and knob.
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
Copy the asset: Copy the generic component located at assets/VinylPlayer.tsx into the user's src/components/animations/ folder.
Configure: Guide the user to import and use the <VinylPlayer /> component within their Remotion <Composition />.
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.
1---2name: remotion-vinyl-player3description: Remotion Vinyl Player4---56# Remotion Vinyl Player78This skill provides a reusable architectural pattern and component for creating a highly aesthetic "Vinyl Record Player" interface in Remotion videos.910## How it works1112The Vinyl Player relies on standard Remotion hooks (`useCurrentFrame`, `useVideoConfig`) to drive an infinite rotation, marquee scrolling text, and a synced progress bar.13141. **Infinite Rotation:** Using `frame / (fps * secondsPerRev) * 360`, the vinyl disc spins continuously, simulating realistic record playback.152. **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.163. **Progress Bar:** Maps the current frame to the total duration of the composition or specified track length to animate a progress fill and knob.174. **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.1819## How to use this skill20211. **Copy the asset:** Copy the generic component located at `assets/VinylPlayer.tsx` into the user's `src/components/animations/` folder.222. **Configure:** Guide the user to import and use the `<VinylPlayer />` component within their Remotion `<Composition />`.233. **Adapt Data:** Pass standard props (`coverUrl`, `songTitle`, `artistName`) to customize the music player's display.2425## Provided Assets2627- `assets/VinylPlayer.tsx`: The highly reusable, strongly-typed Remotion component implementing the Vinyl Player layout and animations.
Run npx skillmds@latest add nolangz/remotion-vinyl-player in your terminal (requires Node.js), paste this page's agent-chat prompt into Claude, Cursor, or any MCP-connected agent, or download the SKILL.md file and copy it into your agent's skills directory.
Remotion Vinyl Player It is listed under Coding & Dev Tools on SkillMD.
This skill has not completed SkillMD's automated safety review yet. SkillMD never runs a skill's scripts for you; review the SKILL.md before installing.
This skill is tagged as working with Claude Code, Claude.ai, OpenAI Codex. SKILL.md is an open format, so most agents that read a skills directory can load it too.
Yes. Installing skills from SkillMD is free, and the skill stays under its author's original license.
nolangz (@nolangz) published this skill. Their other Agent Skills are listed on their SkillMD profile.
nolangz