50:I[267044,["/creators-assets/_next/static/immutable/chunks/356g_j0l71_46.js","/creators-assets/_next/static/immutable/chunks/15s1ft4k9lx-7.js","/creators-assets/_next/static/immutable/chunks/0x8sumr53pdkk.js","/creators-assets/_next/static/immutable/chunks/3pud1dqsw0-_7.js","/creators-assets/_next/static/immutable/chunks/1m75iqpnspynu.js","/creators-assets/_next/static/immutable/chunks/0c6romi9ma0is.js","/creators-assets/_next/static/immutable/chunks/3ohf-5_4hfjuq.js","/creators-assets/_next/static/immutable/chunks/2jjhfe7-w6y9a.js","/creators-assets/_next/static/immutable/chunks/325i2v5l4tnlq.js","/creators-assets/_next/static/immutable/chunks/0kisxyo3aw231.js","/creators-assets/_next/static/immutable/chunks/2b1mm8iiske-y.js","/creators-assets/_next/static/immutable/chunks/0i7m0zg6jfazw.js","/creators-assets/_next/static/immutable/chunks/3-hmotkz_bdv_.js","/creators-assets/_next/static/immutable/chunks/06bqtx1jsc1kz.js","/creators-assets/_next/static/immutable/chunks/3q5wansxm4vp6.js","/creators-assets/_next/static/immutable/chunks/14h9277o22-rl.js","/creators-assets/_next/static/immutable/chunks/3naniu4pnqfyw.js","/creators-assets/_next/static/immutable/chunks/2-y_r3u4wh2s3.js","/creators-assets/_next/static/immutable/chunks/456d4lcv9-syj.js","/creators-assets/_next/static/immutable/chunks/36-o7-3julke0.js","/creators-assets/_next/static/immutable/chunks/2xq6uu2rcdc2i.js","/creators-assets/_next/static/immutable/chunks/2y9gv91n8o3i9.js","/creators-assets/_next/static/immutable/chunks/3z6ke99nzr4_e.js","/creators-assets/_next/static/immutable/chunks/3e73rezw4k1a2.js","/creators-assets/_next/static/immutable/chunks/40oma2w708rd-.js","/creators-assets/_next/static/immutable/chunks/1fkcqskfw4hol.js","/creators-assets/_next/static/immutable/chunks/3ixl4aqv6ylo7.js","/creators-assets/_next/static/immutable/chunks/2x7-2b3jcc9x7.js","/creators-assets/_next/static/immutable/chunks/2di2v55rtz-8i.js","/creators-assets/_next/static/immutable/chunks/3_pg4jxj9aiiw.js","/creators-assets/_next/static/immutable/chunks/0l9v835j421-s.js","/creators-assets/_next/static/immutable/chunks/0qx5rzvbsd7bx.js","/creators-assets/_next/static/immutable/chunks/3b306xa-3tb7g.js","/creators-assets/_next/static/immutable/chunks/3g6klxxyg4m8-.js","/creators-assets/_next/static/immutable/chunks/2fvzgkzqkig_w.js","/creators-assets/_next/static/immutable/chunks/00owjoob9gqs9.js","/creators-assets/_next/static/immutable/chunks/3k6sa9ujkqb5c.js"],"S"] 51:T13fc,

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

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:
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
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
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
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
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
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.
Screenshot showing 2 reords with custom colors
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

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.

4f:["$","$L50",null,{"value":{"fallback":{"$inf$activity-creator-6f8daa40-c63a-4196-b555-49c51d004a44-all:/unified/creator/6f8daa40-c63a-4196-b555-49c51d004a44/activity/":[{"data":[],"pagination":{"next":null,"previous":null},"totalCount":"$undefined","feedSession":"$undefined"}],"$inf$posts:6f8daa40-c63a-4196-b555-49c51d004a44:/unified/posts/?creator=6f8daa40-c63a-4196-b555-49c51d004a44&with=reposts":[{"data":[{"id":"019dfc1f-28c5-7c55-b2ca-bdb3f695aa21","title":null,"body":null,"bodyJson":null,"author":{"framerUserId":"6f8daa40-c63a-4196-b555-49c51d004a44","name":"Andreas Chang","slug":"andreas-chang","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/462257/0Bz50tLCl-Qf9l7GCTTd1Q4GMyi8i1FsaeAQpBMu","followed":false,"followsYou":false},"media":[],"resources":[{"id":"WnbMTBVftbNtamcGUodJ","resolved":true,"title":"Vinyl Record","body":"$51","bodyJson":null,"introduction":"Interactive & customizable vinyl record","slug":"vinyl-record","author":{"framerUserId":"6f8daa40-c63a-4196-b555-49c51d004a44","name":"Andreas Chang","slug":"andreas-chang","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/462257/0Bz50tLCl-Qf9l7GCTTd1Q4GMyi8i1FsaeAQpBMu","followed":false,"followsYou":false},"media":[{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/components/WnbMTBVftbNtamcGUodJ/vinyl-record-3NtnCNQf3Szbtfzw1zPAzEu8m8xZjC","metadata":{"tint":{"h":0,"s":0,"l":58},"width":1600,"height":1200}}],"post":null,"createdAt":"2026-04-18T11:30:34.392Z","updatedAt":"2026-05-05T14:26:41.416Z","publishedAt":"2026-05-06T07:09:53.733Z","featuredAt":null,"approvedAt":null,"type":"component","attributes":{"url":"https://hy.chujiqiqi.com/m/Vinyl-Record-yUlqIh.js@JwfsKH2Gm7tS9Jycn88U","previewUrl":"https://vinyl-record.framer.website/","price":null,"paymentUrl":null,"workshop":false,"categories":[{"id":"ae04a700-60cc-429a-b133-88f3c9709ec0","name":"Players","slug":"players"}],"lastSaveId":"JwfsKH2Gm7tS9Jycn88U","tags":[]}}],"contests":[],"categories":[],"tags":[],"likes":{"count":229,"liked":false},"comments":{"count":1},"reposts":{"count":0,"reposted":false,"repostId":null},"version":1,"edited":false,"editedAt":null,"createdAt":"2026-05-06T07:09:53.733Z","updatedAt":"2026-05-06T07:09:53.733Z"}],"pagination":{"next":null,"previous":null},"totalCount":"$undefined","feedSession":"$undefined"}]}},"children":"$L52"}]