---
title: "Vinyl Record — Free Framer component · Best of Framer"
description: "Free Framer component · by Andreas Chang · Players. Go to the Properties panel (right side of the screen) and find the section called Vinyl Record."
canonical: "https://framer.elliotli.dev/component/vinyl-record"
---

[Home](/)/[Components](/components)/[Players](/components/category/players)/Vinyl Record

# Vinyl Record

Interactive & customizable vinyl record

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

![Vinyl Record preview image 1](https://framer.elliotli.dev/og/component/vinyl-record/304b7b194e89970e/1600x1200.jpg)

## Summary

Go to the Properties panel (right side of the screen) and find the section called Vinyl Record.

## Description

## Features

-   Choose between an interactive and a static variant
    
-   Insert your own album cover
    
-   Insert your own vinyl label
    
-   Add up to 2 vinyls
    
-   Colorize each vinyl independently
    
-   Resize the component freely to suit your needs
    

## Instructions

1.  Copy/paste the component into your Framer project.
    
2.  Go to the **Properties** panel (right side of the screen) and find the section called **Vinyl Record**.
    
3.  Use the **Variant** property to choose between 2 variants:
    
    1.  **Hover to Reveal** will reveal the record when moving your pointer over the component.
        
    2.  **Revealed** is a static variant that constantly reveals the record.
        
        Screenshot showing where to pick a component variant
4.  Use the **Cover Image** property to change the album cover, by clicking the image thumbnail and uploading your own image. The recommended size is 640×640 px, but this ultimately depends on how large or small you plan to make the component.
    
    ![Screenshot showing where to change the album cover](https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/components/description-image-bqite31b-lImYDMXpIse7wj0yYbcTap4dw7X3I0)Screenshot showing where to change the album cover
5.  Use the **Label Image** property to change the label on the record, by clicking the image thumbnail and uploading your own image. The recommended size is 256×256 px, but again, this depends on the final size of the component.
    
    ![Screenshot showing where to change the vinyl label](https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/components/description-image-bqite31b-06nTH7UHFhnG6I3jiNqjqjmS4QapAx)Screenshot showing where to change the vinyl label
6.  The **Show Lighting** property is enabled by default and adds a subtle light reflection to the vinyl cover, adding to the component's realism. If you prefer to show your album cover without any effects, set this property to **No**.
    
    ![Screenshot showing where to toggle lighting effects on the album cover](https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/components/description-image-bqite31b-3MnQah5tNuwITo6UynQzDItdU1mVS8)Screenshot showing where to toggle lighting effects on the album cover
7.  The **Has 2 Records** property is disabled by default. If your product contains 2 records, set this property to **Yes**.
    
    ![Screenshot showing 2 records enabled](https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/components/description-image-bqite31b-QZZoOdlNL3IG5cVtNsiGjYYDGVQA31)Screenshot showing 2 records enabled
8.  The properties for **Colorize Record 1/2** are disabled by default. If your records are a color other than black, set these properties to **Yes** to enable custom colors for one or both of the records.
    
9.  The **Record 1/2 Color** properties are color pickers where you can choose any color for your records. If your record is white, avoid using pure white (#FFFFFF)—instead, opt for an off-white or light grey color. **Note:** because this is a digital representation, colors may not accurately reflect what physical merchandise actually looks like.
    
    ![Screenshot showing 2 reords with custom colors](https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/components/description-image-bqite31b-8x2HOSRpFy6ZfDt35cL0pe4wNdwPGa)Screenshot showing 2 reords with custom colors
10.  Use the **Link** property to add a URL that opens when clicking the component.
     
     ![Screenshot showing where to add a URL that opens when the component is clicked](https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/components/description-image-bqite31b-lYVagw4xDxe65vSYvnXPGuNtC1BmAz)Screenshot showing where to add a URL that opens when the component is clicked

## Use cases

-   Record labels and online retailers who want to bring their product catalogues to life.
    
-   Artists and producers who want to show off their previous work with impact.
    
-   Music databases and archives who want to make their browsing experience more interactive and fun.
    

## From the creator

I hope this component adds value to your website. I put a lot of love into it, and I have some cool updates planned for it.

For questions or help, reach out to @\_andchang on X.

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

-   All · #410

## Details

- **Author**: Andreas Chang
- **Published**: 2026-05-06
- **Updated**: 2026-05-05
- **Added**: 2026-04-18
- **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.