---
title: "DiscDrop — Framer component · Best of Framer"
description: "$7.00 · Framer component · by Velnium HQ · Players. DiscDrop Music Player for Framer Bring your Framer projects to life with a rich, immersive music player that feels as good as it looks."
canonical: "https://framer.elliotli.dev/component/discdrop"
---

[Home](/)/[Components](/components)/[Players](/components/category/players)/DiscDrop

# DiscDrop

Animated vinyl music player for Framer

[View on Framer](https://framer.com/marketplace/components/discdrop/?via=elliot-li)

![DiscDrop preview image 1](https://framer.elliotli.dev/og/component/discdrop/8d1a0a1661da57c3/1600x1200.jpg)

## Summary

DiscDrop Music Player for Framer Bring your Framer projects to life with a rich, immersive music player that feels as good as it looks.

## Description

**DiscDrop — DiscDrop Music Player for Framer**

Bring your Framer projects to life with a rich, immersive music player that feels as good as it looks. DiscDrop features a spinning vinyl disc that rotates while your track plays and pauses when it stops — giving every song a tactile, real-world feel.

### Key Features

**Playlist Support** Add unlimited songs via the property panel. Each song has its own title, artist name, cover art, audio file, and lyrics. The player auto-advances through the playlist and shows an elegant end-of-playlist screen with a Replay option.

**Global Accent Color** One color control styles everything — the play button, progress bar, lyrics pill, volume slider, dot navigation, and vinyl ring — keeping your UI perfectly consistent across all tracks.

**Custom Font Control** Use Framer's native Font picker to change the typeface, weight, size, and style of the song title, artist name, and lyrics to match your brand.

**Lyrics Overlay** Each song supports a full lyrics panel. Tap the Lyrics button to open a beautiful frosted-glass overlay. Tap outside or press Close to dismiss it.

**Live Progress Bar** A fully interactive seek bar shows real-time playback position. Drag the thumb to scrub to any point in the song instantly.

**Volume Control** Built-in volume slider with a mute toggle. Can be shown or hidden via the property panel toggle.

**Canvas-Accurate Background** The canvas background color fills the entire frame — what you see in the Framer editor is exactly what renders in preview and published sites. No more white background surprises.

**Property Controls** Every visual option is configurable without touching code — accent color, card background, canvas background, title color, subtext color, font, volume visibility, and all song data.

### How to Use

1.  **Add the component** to your Framer project from the Marketplace
    
2.  **Open the property panel** and expand the Songs array
    
3.  **For each song**, fill in: Song Title, Artist Name, Cover Image, Audio File, and Lyrics
    
4.  **Upload audio** using the Audio File picker (MP3, WAV, OGG, AAC, M4A, FLAC supported). Framer hosts the file automatically
    
5.  **Set your Accent Color** to match your brand — it updates all UI elements at once
    
6.  **Choose a font** using the Custom Font picker
    
7.  **Set Canvas Background** to match your frame's background color so preview matches the editor
    
8.  **Resize the frame** freely — the player card stays centered at 340px while the background fills the canvas
    

### Audio Tips

-   Spotify, Apple Music, and YouTube links **cannot** be played — their content is DRM-protected
    
-   Download free, licensable MP3s from **Pixabay Music** (pixabay.com/music) or **Mixkit** (mixkit.co/free-music) — no attribution required
    
-   Recommended format: **MP3** for best compatibility and file size
    

## Rank history [How rankings work →](/terms#rankings)

-   All · #8705

## Details

- **Author**: Velnium HQ
- **Price**: $7.00
- **Published**: 2026-04-24
- **Updated**: 2026-04-24
- **Added**: 2026-04-16
- **Categories**: Players

## More like this

-   [Cozy Video Card](/component/cozy-video-card) — 日香理 / hikari · $1 — A cozy card for your YouTube video
-   [A/B Audio Player Pro](/component/a-b-audio-player-pro) — Injamul Haque Somrat · $24 — Master Audio Comparison Player
-   [Reelflow](/component/reelflow) — Quaders · Free — An auto video ticker for reels
-   [Mux Video](/component/mux-video) — NorthGarden · $3 — Drop Mux video into any Framer site with full control over playback, UI, and interaction.