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
Copy/paste the component into your Framer project.
Go to the Properties panel (right side of the screen) and find the section called Vinyl Record.
Use the Variant property to choose between 2 variants:
Hover to Reveal will reveal the record when moving your pointer over the component.
Revealed is a static variant that constantly reveals the record.
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.
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.
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.
The Has 2 Records property is disabled by default. If your product contains 2 records, set this property to Yes.
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.
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.
Use the Link property to add a URL that opens when clicking the component.
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.
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.
