菜单
Creates an elegant, realistic Vinyl Record Player animation component for Remotion. Use when needing a music player UI, album showcase, or audio-visualizer interface in a video. (Keywords: 黑胶唱片, 音乐播放器, 唱片机, 专辑展示, 音频可视化)
用 Codex 或 Claude 帮你安装 复制这段 Prompt，粘贴到 Codex、Claude 或其他助手里，让它检查 Skill 页面并帮你完成安装。
基于 SOC 职业分类
Build a high-quality, reusable multi-agent collaboration framework for any new project, including agent roles, tool scoping, delegation triggers, verification gates, and self-iteration rules.
实现 Manus 风格的文件规划系统，用于组织和跟踪复杂任务。创建 task_plan.md、findings.md 和 progress.md。在处理多步骤项目、研究任务或任何需要超过 5 个工具调用的工作时使用。
Review a WebsitePresent delivery before declaring it ready. Use when an HTML presentation, redesign, or motion-heavy page is about to be called done and needs checklist validation plus a five-dimension critique.
Lock a fresh WebsitePresent brief before design or implementation. Use when starting a new HTML presentation task, major redesign, new version direction, or any work where audience, tone, delivery shape, or reference style is still open.
Route HTML presentation animation work to the right lane. Use when the user wants stronger web animation, richer scrollytelling, 3D-like presentation effects, or needs to decide between DOM-first motion, special engines, and video/export tooling.
Cloud-first React component library skill for animal-island-ui (Animal Crossing style). Fetches component source from GitHub on demand — no local clone needed. Use when: (1) building UI with Animal Crossing / 动物森友会 style; (2) using animal-island-ui components; (3) creating warm, rounded, cozy React interfaces; (4) matching the animal-island-ui design language. Triggers: "animal island", "动物森友会风格", "animal-island-ui", "可爱圆润风格", "NookPhone".
| name | remotion-vinyl-player |
| description | Creates an elegant, realistic Vinyl Record Player animation component for Remotion. Use when needing a music player UI, album showcase, or audio-visualizer interface in a video. (Keywords: 黑胶唱片, 音乐播放器, 唱片机, 专辑展示, 音频可视化) |
This skill provides a reusable architectural pattern and component for creating a highly aesthetic "Vinyl Record Player" interface in Remotion videos.
The Vinyl Player relies on standard Remotion hooks (useCurrentFrame, useVideoConfig) to drive an infinite rotation, marquee scrolling text, and a synced progress bar.
frame / (fps * secondsPerRev) * 360, the vinyl disc spins continuously, simulating realistic record playback.<h2>Title</h2><h2>Title</h2>) inside a flex container. transform: translateX(-%) maps from 0 to -50% to create a perfect, invisible looping marquee.radial-gradient are applied to the record disc to create the illusion of vinyl grooves, while box-shadow generates edge lighting and depth.assets/VinylPlayer.tsx into the user's src/components/animations/ folder.<VinylPlayer /> component within their Remotion <Composition />.coverUrl, songTitle, artistName) to customize the music player's display.assets/VinylPlayer.tsx: The highly reusable, strongly-typed Remotion component implementing the Vinyl Player layout and animations.