5d:I[333483,["/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/41i4r4u9uolgz.js","/creators-assets/_next/static/immutable/chunks/02ciyo_cdpkrz.js","/creators-assets/_next/static/immutable/chunks/3e73rezw4k1a2.js","/creators-assets/_next/static/immutable/chunks/15q00pdqk0br3.js","/creators-assets/_next/static/immutable/chunks/293prjxu_wz0c.js","/creators-assets/_next/static/immutable/chunks/0l9v835j421-s.js","/creators-assets/_next/static/immutable/chunks/40oma2w708rd-.js","/creators-assets/_next/static/immutable/chunks/2x7-2b3jcc9x7.js","/creators-assets/_next/static/immutable/chunks/3_pg4jxj9aiiw.js","/creators-assets/_next/static/immutable/chunks/3k6sa9ujkqb5c.js","/creators-assets/_next/static/immutable/chunks/3l2h8slpbzxqo.js","/creators-assets/_next/static/immutable/chunks/2xgtw4s-tlhet.js","/creators-assets/_next/static/immutable/chunks/3b306xa-3tb7g.js","/creators-assets/_next/static/immutable/chunks/2fvzgkzqkig_w.js","/creators-assets/_next/static/immutable/chunks/3g6klxxyg4m8-.js","/creators-assets/_next/static/immutable/chunks/0qx5rzvbsd7bx.js","/creators-assets/_next/static/immutable/chunks/1cphzzg2t2qo2.js"],"PostDetailCard"] 5e:T901,

Upgrade your website’s media experience with the Minimal Video Player, a custom-built HTML5 video component designed natively for Framer. Gone are the days of rigid, unstyleable default browser players. This component introduces a soft, neumorphic aesthetic with buttery-smooth micro-interactions, while fully supporting the native capabilities you expect from Framer's default video component.

Key Features:

- Native Framer Power: Supports URL or direct file uploads, autoplay, looping, muting, object-fit settings, and custom poster images—just like Framer's native player.

- Neumorphic Design: Soft, transitioning shadows give the player a tactile, physical feel.

- Morphing Play Controls: A custom SVG play/pause button that smoothly animates and depresses when activated.

- Interactive Timeline: A fully custom progress bar that supports smooth click-and-drag scrubbing to easily seek through your videos.

Customization Options:

- Colors & Styles: Full control over the player background, icon colors, and video background.

- Progress Bar: Choose between a solid color or a customizable two-color gradient for the timeline fill.

- Shadows: Customize both the light and dark shadow colors (with RGBA support) to perfectly match your site's background, whether it's light, dark, or tinted.

- Border Radii: Independently adjust the corner roundness of the outer container, the inner video, and even the play/pause button.

- Start Time: Set a specific percentage for the video to begin playing from.

- Disable Animations: A built-in toggle to disable the morphing icons and shadow transitions for accessibility or performance preferences.

Performance & Accessibility:

- Highly optimized using Framer's `useIsStaticRenderer` to ensure zero performance overhead while editing on the canvas.

- Smooth `requestAnimationFrame` loop for progress updates, which automatically cleans up when paused.

- Fully semantic HTML5 video tag usage.

5a:[["$","$L5d",null,{"post":{"id":"019ddd4b-fd9e-7b37-b145-d6167285d211","title":null,"body":null,"bodyJson":null,"author":{"framerUserId":"ff3d8eca-ae13-4845-bd7e-9c26d1085c71","name":"Jirei","slug":"jirei","avatar":null,"followed":false,"followsYou":false},"media":[],"resources":[{"id":"iHwV5lrnF8BDwcxFR6Yi","resolved":true,"title":"Minimal Video Player","body":"$5e","bodyJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"Upgrade your website’s media experience with the "},{"type":"text","text":"Minimal Video Player","marks":[{"type":"bold"}]},{"type":"text","text":", a custom-built HTML5 video component designed natively for Framer. Gone are the days of rigid, unstyleable default browser players. This component introduces a soft, neumorphic aesthetic with buttery-smooth micro-interactions, while fully supporting the native capabilities you expect from Framer's default video component."}]},{"type":"paragraph","content":[{"type":"text","text":"Key Features:","marks":[{"type":"bold"}]}]},{"type":"paragraph","content":[{"type":"text","text":"- "},{"type":"text","text":"Native Framer Power:","marks":[{"type":"bold"}]},{"type":"text","text":" Supports URL or direct file uploads, autoplay, looping, muting, object-fit settings, and custom poster images—just like Framer's native player."}]},{"type":"paragraph","content":[{"type":"text","text":"- "},{"type":"text","text":"Neumorphic Design:","marks":[{"type":"bold"}]},{"type":"text","text":" Soft, transitioning shadows give the player a tactile, physical feel."}]},{"type":"paragraph","content":[{"type":"text","text":"- "},{"type":"text","text":"Morphing Play Controls:","marks":[{"type":"bold"}]},{"type":"text","text":" A custom SVG play/pause button that smoothly animates and depresses when activated."}]},{"type":"paragraph","content":[{"type":"text","text":"- "},{"type":"text","text":"Interactive Timeline:","marks":[{"type":"bold"}]},{"type":"text","text":" A fully custom progress bar that supports smooth click-and-drag scrubbing to easily seek through your videos."}]},{"type":"paragraph","content":[{"type":"text","text":"Customization Options:","marks":[{"type":"bold"}]}]},{"type":"paragraph","content":[{"type":"text","text":"- "},{"type":"text","text":"Colors & Styles:","marks":[{"type":"bold"}]},{"type":"text","text":" Full control over the player background, icon colors, and video background."}]},{"type":"paragraph","content":[{"type":"text","text":"- "},{"type":"text","text":"Progress Bar:","marks":[{"type":"bold"}]},{"type":"text","text":" Choose between a solid color or a customizable two-color gradient for the timeline fill."}]},{"type":"paragraph","content":[{"type":"text","text":"- "},{"type":"text","text":"Shadows:","marks":[{"type":"bold"}]},{"type":"text","text":" Customize both the light and dark shadow colors (with RGBA support) to perfectly match your site's background, whether it's light, dark, or tinted."}]},{"type":"paragraph","content":[{"type":"text","text":"- "},{"type":"text","text":"Border Radii:","marks":[{"type":"bold"}]},{"type":"text","text":" Independently adjust the corner roundness of the outer container, the inner video, and even the play/pause button."}]},{"type":"paragraph","content":[{"type":"text","text":"- "},{"type":"text","text":"Start Time:","marks":[{"type":"bold"}]},{"type":"text","text":" Set a specific percentage for the video to begin playing from."}]},{"type":"paragraph","content":[{"type":"text","text":"- "},{"type":"text","text":"Disable Animations:","marks":[{"type":"bold"}]},{"type":"text","text":" A built-in toggle to disable the morphing icons and shadow transitions for accessibility or performance preferences."}]},{"type":"paragraph","content":[{"type":"text","text":"Performance & Accessibility:","marks":[{"type":"bold"}]}]},{"type":"paragraph","content":[{"type":"text","text":"- Highly optimized using Framer's `useIsStaticRenderer` to ensure zero performance overhead while editing on the canvas."}]},{"type":"paragraph","content":[{"type":"text","text":"- Smooth `requestAnimationFrame` loop for progress updates, which automatically cleans up when paused."}]},{"type":"paragraph","content":[{"type":"text","text":"- Fully semantic HTML5 video tag usage."}]}]},"introduction":"Elegant neumorphic video player.","slug":"minimal-video-player","author":{"framerUserId":"ff3d8eca-ae13-4845-bd7e-9c26d1085c71","name":"Jirei","slug":"jirei","avatar":null,"followed":false,"followsYou":false},"media":[{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/components/iHwV5lrnF8BDwcxFR6Yi/minimal-video-player-4UtdgB3AmRxudSnGXH2WMxO2NbyVsg","metadata":{"tint":{"h":240,"s":53,"l":70},"width":1600,"height":1200}}],"post":null,"createdAt":"2026-04-29T09:19:25.771Z","updatedAt":"2026-07-30T21:31:08.211Z","publishedAt":"2026-04-30T07:30:38.110Z","featuredAt":null,"approvedAt":null,"type":"component","attributes":{"url":"https://re.chujiqiqi.com/m/Video-Player-HLP2rt.js@6uLpuY5WxssdoJdMqFa7","previewUrl":"https://knowingly-instance-113623.framer.app/preview","price":null,"paymentUrl":null,"workshop":false,"categories":[{"id":"ae04a700-60cc-429a-b133-88f3c9709ec0","name":"Players","slug":"players"}],"lastSaveId":"6uLpuY5WxssdoJdMqFa7","tags":[]}}],"contests":[],"categories":[],"tags":[],"likes":{"count":14,"liked":false},"comments":{"count":0},"reposts":{"count":0,"reposted":false,"repostId":null},"version":1,"edited":false,"editedAt":null,"createdAt":"2026-04-30T07:30:38.110Z","updatedAt":"2026-04-30T07:30:38.110Z","reported":false}}],"$L5f"]

Suggested for you