59:I[333483,["/creators-assets/_next/static/immutable/chunks/356g_j0l71_46.js","/creators-assets/_next/static/immutable/chunks/40ipl9wdtrm_x.js","/creators-assets/_next/static/immutable/chunks/1bd061yvfby7i.js","/creators-assets/_next/static/immutable/chunks/2ii8lkleumgkk.js","/creators-assets/_next/static/immutable/chunks/1jubx4t_1hq7l.js","/creators-assets/_next/static/immutable/chunks/0c6romi9ma0is.js","/creators-assets/_next/static/immutable/chunks/1amcd-eostlux.js","/creators-assets/_next/static/immutable/chunks/06b9gh03a5itu.js","/creators-assets/_next/static/immutable/chunks/19qq0hy3mz_vv.js","/creators-assets/_next/static/immutable/chunks/2oixy7hansmjm.js","/creators-assets/_next/static/immutable/chunks/2rczsbgoa3afm.js","/creators-assets/_next/static/immutable/chunks/3kkqflhmmpg9p.js","/creators-assets/_next/static/immutable/chunks/2504rifrkrd_l.js","/creators-assets/_next/static/immutable/chunks/3xzkckc77quth.js","/creators-assets/_next/static/immutable/chunks/0ib-rcz4b0eq3.js","/creators-assets/_next/static/immutable/chunks/14h9277o22-rl.js","/creators-assets/_next/static/immutable/chunks/25aeqr2ydtz4o.js","/creators-assets/_next/static/immutable/chunks/2hfz7h1vpjv9v.js","/creators-assets/_next/static/immutable/chunks/2-y_r3u4wh2s3.js","/creators-assets/_next/static/immutable/chunks/2a63j-5qkrdf4.js","/creators-assets/_next/static/immutable/chunks/0mgwzh6o644jl.js","/creators-assets/_next/static/immutable/chunks/41glpbsahf_22.js","/creators-assets/_next/static/immutable/chunks/0xd4yj8g3g-ci.js","/creators-assets/_next/static/immutable/chunks/0ebkvqksdxj8m.js","/creators-assets/_next/static/immutable/chunks/02ciyo_cdpkrz.js","/creators-assets/_next/static/immutable/chunks/2zqx3_h6kju09.js","/creators-assets/_next/static/immutable/chunks/1xkjm3oyldl_r.js","/creators-assets/_next/static/immutable/chunks/2bej0vd4kut9m.js","/creators-assets/_next/static/immutable/chunks/3wk6_kr5br5aj.js","/creators-assets/_next/static/immutable/chunks/19r4rf2zyng-y.js","/creators-assets/_next/static/immutable/chunks/2r15b2hek61lg.js","/creators-assets/_next/static/immutable/chunks/3f4d4x4z1mrzh.js","/creators-assets/_next/static/immutable/chunks/31uxrh745m-yq.js","/creators-assets/_next/static/immutable/chunks/3eh5q_6ksmw0l.js","/creators-assets/_next/static/immutable/chunks/2ee50z0bknh40.js","/creators-assets/_next/static/immutable/chunks/3o1z26bd2_9eh.js","/creators-assets/_next/static/immutable/chunks/0e-wwv74y78f7.js","/creators-assets/_next/static/immutable/chunks/14pxn0b6e1dc9.js","/creators-assets/_next/static/immutable/chunks/2qeyp4zfa4qwb.js","/creators-assets/_next/static/immutable/chunks/03j_erjzu_t0-.js","/creators-assets/_next/static/immutable/chunks/2rdaqkxiyeq_6.js","/creators-assets/_next/static/immutable/chunks/0rfcd366io6r9.js"],"PostDetailCard"] 5b:I[539959,["/creators-assets/_next/static/immutable/chunks/356g_j0l71_46.js","/creators-assets/_next/static/immutable/chunks/40ipl9wdtrm_x.js","/creators-assets/_next/static/immutable/chunks/1bd061yvfby7i.js","/creators-assets/_next/static/immutable/chunks/2ii8lkleumgkk.js","/creators-assets/_next/static/immutable/chunks/1jubx4t_1hq7l.js","/creators-assets/_next/static/immutable/chunks/0c6romi9ma0is.js","/creators-assets/_next/static/immutable/chunks/1amcd-eostlux.js","/creators-assets/_next/static/immutable/chunks/06b9gh03a5itu.js","/creators-assets/_next/static/immutable/chunks/19qq0hy3mz_vv.js","/creators-assets/_next/static/immutable/chunks/2oixy7hansmjm.js","/creators-assets/_next/static/immutable/chunks/2rczsbgoa3afm.js","/creators-assets/_next/static/immutable/chunks/3kkqflhmmpg9p.js","/creators-assets/_next/static/immutable/chunks/2504rifrkrd_l.js","/creators-assets/_next/static/immutable/chunks/3xzkckc77quth.js","/creators-assets/_next/static/immutable/chunks/0ib-rcz4b0eq3.js","/creators-assets/_next/static/immutable/chunks/14h9277o22-rl.js","/creators-assets/_next/static/immutable/chunks/25aeqr2ydtz4o.js","/creators-assets/_next/static/immutable/chunks/2hfz7h1vpjv9v.js","/creators-assets/_next/static/immutable/chunks/2-y_r3u4wh2s3.js","/creators-assets/_next/static/immutable/chunks/2a63j-5qkrdf4.js","/creators-assets/_next/static/immutable/chunks/0mgwzh6o644jl.js","/creators-assets/_next/static/immutable/chunks/41glpbsahf_22.js","/creators-assets/_next/static/immutable/chunks/0xd4yj8g3g-ci.js","/creators-assets/_next/static/immutable/chunks/0ebkvqksdxj8m.js","/creators-assets/_next/static/immutable/chunks/02ciyo_cdpkrz.js","/creators-assets/_next/static/immutable/chunks/2zqx3_h6kju09.js","/creators-assets/_next/static/immutable/chunks/1xkjm3oyldl_r.js","/creators-assets/_next/static/immutable/chunks/2bej0vd4kut9m.js","/creators-assets/_next/static/immutable/chunks/3wk6_kr5br5aj.js","/creators-assets/_next/static/immutable/chunks/19r4rf2zyng-y.js","/creators-assets/_next/static/immutable/chunks/2r15b2hek61lg.js","/creators-assets/_next/static/immutable/chunks/3f4d4x4z1mrzh.js","/creators-assets/_next/static/immutable/chunks/31uxrh745m-yq.js","/creators-assets/_next/static/immutable/chunks/3eh5q_6ksmw0l.js","/creators-assets/_next/static/immutable/chunks/2ee50z0bknh40.js","/creators-assets/_next/static/immutable/chunks/3o1z26bd2_9eh.js","/creators-assets/_next/static/immutable/chunks/0e-wwv74y78f7.js","/creators-assets/_next/static/immutable/chunks/14pxn0b6e1dc9.js","/creators-assets/_next/static/immutable/chunks/2qeyp4zfa4qwb.js","/creators-assets/_next/static/immutable/chunks/03j_erjzu_t0-.js","/creators-assets/_next/static/immutable/chunks/2rdaqkxiyeq_6.js","/creators-assets/_next/static/immutable/chunks/0rfcd366io6r9.js"],"CommentSection"] 5a:T461,

Features

Pill-Shaped Layout
- Left: Circular album art with animated progress ring.
- Right: Track info (song + artist) and control buttons.
Progress Ring with extraWidth
- Circular playback indicator wraps around the album art.
- Adjustable thickness using the extraWidth property.
Playlist Support
- Upload an array of music files.
- Skip forward/backward between tracks.
Playback Controls
- Play/Pause, Next, Previous buttons.
- Smooth transitions and button animations.
Track Info Display
- Shows current song name and artist.
- Optional display of elapsed and total time.
Customization Options
- Change pill background color, icons, and progress bar style.
- Swap album art dynamically per track.

56:[["$","$L59",null,{"post":{"id":"0199c414-2a65-7547-82f3-f6998b53e0ba","title":null,"body":"

Music pill for you website

","bodyJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"Music pill for you website"}]}]},"author":{"framerUserId":"7a58d31d-aa55-4ac0-a2ed-16c87d121d1c","name":"VMake Studios","slug":"vmakestudios","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/7a58d31d-aa55-4ac0-a2ed-16c87d121d1c/3yzxoqo3","followed":false,"followsYou":false},"media":[],"resources":[{"id":"TK84t4y1Pw4KOagalfAK","resolved":true,"title":"Music Pill","body":"$5a","bodyJson":null,"introduction":"A sleek, minimal music player ","slug":"musicpill","author":{"framerUserId":"7a58d31d-aa55-4ac0-a2ed-16c87d121d1c","name":"VMake Studios","slug":"vmakestudios","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/7a58d31d-aa55-4ac0-a2ed-16c87d121d1c/3yzxoqo3","followed":false,"followsYou":false},"media":[{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/components/TK84t4y1Pw4KOagalfAK/musicpill-XUdr5OdJ50HntsgG2C84kM9lUUeC1f","metadata":{"tint":{"h":0,"s":0,"l":3},"width":1600,"height":1200}}],"post":null,"createdAt":"2025-10-02T09:35:00.891Z","updatedAt":"2026-06-25T12:19:07.901Z","publishedAt":"2025-10-08T13:47:59.973Z","featuredAt":null,"approvedAt":null,"type":"component","attributes":{"url":null,"previewUrl":"https://warmhearted-begin-217368.framer.app/","price":"2","paymentUrl":"https://jrvzdesigns.lemonsqueezy.com/checkout/buy/e0985e49-738e-428c-9ef9-9bca8c9f1c4e","workshop":true,"categories":[{"id":"ae04a700-60cc-429a-b133-88f3c9709ec0","name":"Players","slug":"players"}],"lastSaveId":"wpwFnipklUMd5p6EvlmF","tags":[]}}],"contests":[],"categories":[],"tags":[],"likes":{"count":26,"liked":false},"comments":{"count":0},"reposts":{"count":0,"reposted":false,"repostId":null},"version":2,"edited":true,"editedAt":"2026-06-25T12:19:08.359Z","createdAt":"2025-10-08T13:47:59.973Z","updatedAt":"2026-06-25T12:19:08.359Z","reported":false}}],["$","$L5b",null,{"target":{"kind":"post","postId":"0199c414-2a65-7547-82f3-f6998b53e0ba"},"postId":"0199c414-2a65-7547-82f3-f6998b53e0ba","postAuthor":"$56:0:props:post:author","targetCommentId":"$undefined"}]]

Suggested for you