50:I[267044,["/creators-assets/_next/static/immutable/chunks/356g_j0l71_46.js","/creators-assets/_next/static/immutable/chunks/05lj3a0qaa006.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/382a8k30zyobj.js","/creators-assets/_next/static/immutable/chunks/368p63l4oh_7-.js","/creators-assets/_next/static/immutable/chunks/325i2v5l4tnlq.js","/creators-assets/_next/static/immutable/chunks/228u8o-g1d1_g.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/413kuej600yyw.js","/creators-assets/_next/static/immutable/chunks/1v3f42-oqro9g.js","/creators-assets/_next/static/immutable/chunks/3e73rezw4k1a2.js","/creators-assets/_next/static/immutable/chunks/2di2v55rtz-8i.js","/creators-assets/_next/static/immutable/chunks/1fkcqskfw4hol.js","/creators-assets/_next/static/immutable/chunks/146b7x-3yl4nl.js","/creators-assets/_next/static/immutable/chunks/3g6klxxyg4m8-.js","/creators-assets/_next/static/immutable/chunks/40oma2w708rd-.js","/creators-assets/_next/static/immutable/chunks/3_pg4jxj9aiiw.js","/creators-assets/_next/static/immutable/chunks/2fvzgkzqkig_w.js","/creators-assets/_next/static/immutable/chunks/0qx5rzvbsd7bx.js","/creators-assets/_next/static/immutable/chunks/0l9v835j421-s.js","/creators-assets/_next/static/immutable/chunks/3b306xa-3tb7g.js","/creators-assets/_next/static/immutable/chunks/3k6sa9ujkqb5c.js","/creators-assets/_next/static/immutable/chunks/00owjoob9gqs9.js","/creators-assets/_next/static/immutable/chunks/2x7-2b3jcc9x7.js"],"S"] 51:T9a6,

This component turns any YouTube video or playlist into a soft, player that looks designed rather than embedded. Paste a link, match the colors to your site, and you're done. It handles light/dark mode, playlists and visitors get custom controls.

What you get

Video or playlist from one link: Softplay detects which it is. Playlists get previous/next and an optional track list with thumbnails and titles.
Light and dark mode: set it to Light, Dark or Auto (follows the visitor's system). A small toggle in the player lets visitors switch themselves.
Full color control: separate light and dark palettes (surface, highlight, shadow, icons and text, accent), plus depth, corner radius and font.
A poster that fits your page: uses the video's thumbnail automatically or your own image, with an optional title, tint and adjustable play button.
Compact modes: minimize to a slim bar, or hide the controls and keep just the video.
Built to behave: the player loads as it nears the screen, the layout is responsive, controls are keyboard-accessible with labels and focus rings, and animations respect reduced-motion settings.

Set up

Add the component to your page.
Paste a YouTube video or playlist link into YouTube link.
Match the colors and set the theme in the property panel.
Click Preview to try playback. The canvas shows a static poster.

Good to know

The video needs embedding enabled. Private videos and videos with embedding turned off won't play.
Playlists must be public or unlisted. Auto-generated YouTube Mix links can't be embedded.
Browsers allow autoplay only when muted, and YouTube allows one autoplaying player per page.
"Captions: Off" is best effort, because YouTube offers no official way to force captions off.
The player connects to YouTube's servers, so mention that in your privacy policy.
This component isn't affiliated with or endorsed by YouTube or Google. YouTube is a trademark of Google LLC.

Support

Questions or issues: email joendua@gmail.com

52:T790,

A fully functional scientific calculator component. Real math engine, memory and DEG/RAD. Drop it in and it works.

It respects order of operations, nested parentheses, and implicit multiplication, and supports the full range of scientific functions: trig, inverse trig, hyperbolic, logs, powers, roots, factorials, and more.

Why it's different

It's a real calculator, not a picture of one. Every key does what it says. Type an expression, hit equals, get a correct answer.
Proper math, not string hacks. A hand-written parser handles operator precedence, parentheses, and implicit multiplication (like 2π or 3(4+5)) correctly.
Scientific-grade functionality. SHIFT and HYP keys unlock inverse and hyperbolic variants of sin/cos/tan, e^x, 10^x, cube, nth root, and more, just like a physical scientific calculator.
Reads like a calculator, not a code editor. Large numbers auto-format with thousands separators as you type, so results stay readable at a glance.
Fully keyboard-operable. Every key has a keyboard equivalent, so it's just as usable with a mouse, on touch, or from a keyboard.
One file, no dependencies. Self-contained code component, nothing else to install.
Optional key-click sound

Great for

Finance, engineering, or science-focused landing pages and product demos
Portfolio pieces that need a genuinely interactive UI element
Internal tools or prototypes that need real on-page calculation
Anywhere you want a tactile, hardware-inspired UI moment

No configuration required, drag it onto a frame and it's ready to use.

53:T8eb,

About

Drop in one image, set a grid size, and this component does the rest. Pieces tumble in under real physics (drag, throw, watch them bounce and settle), snap together as you place them correctly, and celebrate with confetti the moment the picture's complete.

What's Included

Real Matter.js physics - pieces fall, bounce, and drag naturally, no fake animation
Works at any screen size - the win check is relational, not pixel-based
Auto-detects mobile and can swap in a separate crop for portrait screens
Best-time tracking with a "New Best" celebration, built entirely on local storage - no database, no signup
Reference thumbnail with a tap-to-enlarge lightbox, so solvers can check their progress against the original
Full custom sound design (impact, "getting warm," piece-merge, solve) with mobile-safe audio handling
One-click restart button
About 40 property controls - tune gravity, bounciness, tile size, colors, fonts, and every sound and flash color from the Framer panel, zero code required
Zero backend - everything runs client-side, so there's nothing to configure or maintain after install

Who it's for

Photography portfolios and galleries - turn your best shot into something visitors spend two minutes with instead of five seconds
Museums, exhibitions, and art sites - pair it with the built-in title / artist / year reveal card
Editorial and blog sites - a daily puzzle brings people back the way a daily crossword does
Any brand that wants one genuinely playful moment on an otherwise static site

FAQ

Does this need a database or backend? No. Best times and puzzle state live in the visitor's browser. Drop it in and it works.
Can I use my own images? Yes. Any image, swappable any time from the Framer panel, including a separate crop for mobile.
Can I change how it looks and sounds? Yes. Colors, fonts, tile size, bounce, gravity, every sound effect, and more are all exposed as properties — no code required.

4f:["$","$L50",null,{"value":{"fallback":{"$inf$activity-creator-7d3f292e-a75e-42d9-82ea-98438c532705-all:/unified/creator/7d3f292e-a75e-42d9-82ea-98438c532705/activity/":[{"data":[{"id":"01a0c93d-3599-7224-9ec4-6ce4a1bfb9b1","type":"comment.reply","target":{"type":"post","id":"01a0c573-a7c9-76b8-af6e-954736902858","preview":"YouTube Player","previewJson":null,"thumbnail":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/7d3f292e-a75e-42d9-82ea-98438c532705/01a0c572-77df-7205-a114-254eba0108e1.png","targetDeleted":false,"owned":true,"actions":{"postId":"01a0c573-a7c9-76b8-af6e-954736902858","like":{"count":0,"liked":false},"reply":{"parentCommentId":null},"repost":{"count":0,"reposted":false,"repostId":null}}},"context":{"type":"comment","id":"01a0c93d-357b-706c-842f-8b446fe25d29","preview":"Appreciated 🙏","previewJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"Appreciated 🙏"}]}]},"thumbnail":null,"targetDeleted":false,"owned":true,"actions":{"postId":"01a0c573-a7c9-76b8-af6e-954736902858","like":{"count":0,"liked":false},"reply":{"parentCommentId":"01a0c589-31ec-7124-8865-5138db0affe6"},"repost":null}},"actors":[{"id":"7d3f292e-a75e-42d9-82ea-98438c532705","name":"Joe N","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/7d3f292e-a75e-42d9-82ea-98438c532705/ct4zvnlt","slug":"joe-ndua","followed":false,"followsYou":false}],"actorCount":1,"message":null,"resourceType":null,"visibility":"public","startedAt":"2026-09-22T13:10:26.969Z","latestAt":"2026-09-22T13:10:26.969Z"},{"id":"01a0c93c-f890-75f5-b683-2e9c7d36c31a","type":"comment.liked","target":{"type":"comment","id":"01a0c589-31ec-7124-8865-5138db0affe6","preview":"Lovely design work","previewJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"Lovely design work"}]}]},"thumbnail":null,"targetDeleted":false,"owned":false,"actions":{"postId":"01a0c573-a7c9-76b8-af6e-954736902858","like":{"count":1,"liked":false},"reply":{"parentCommentId":"01a0c589-31ec-7124-8865-5138db0affe6"},"repost":null}},"context":{"type":"post","id":"01a0c573-a7c9-76b8-af6e-954736902858","preview":"YouTube Player","previewJson":null,"thumbnail":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/7d3f292e-a75e-42d9-82ea-98438c532705/01a0c572-77df-7205-a114-254eba0108e1.png","targetDeleted":false,"owned":true,"actions":{"postId":"01a0c573-a7c9-76b8-af6e-954736902858","like":{"count":0,"liked":false},"reply":{"parentCommentId":null},"repost":{"count":0,"reposted":false,"repostId":null}}},"actors":[{"id":"7d3f292e-a75e-42d9-82ea-98438c532705","name":"Joe N","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/7d3f292e-a75e-42d9-82ea-98438c532705/ct4zvnlt","slug":"joe-ndua","followed":false,"followsYou":false}],"actorCount":1,"message":null,"resourceType":null,"visibility":"public","startedAt":"2026-09-22T13:10:12.536Z","latestAt":"2026-09-22T13:10:12.536Z"},{"id":"01a0c573-aa1b-7753-b29b-f929b76da89d","type":"component.created","target":{"type":"component","id":"rbNnFrjexheKmF8eG7YL","preview":"YouTube Player","previewJson":null,"thumbnail":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/7d3f292e-a75e-42d9-82ea-98438c532705/01a0c572-77df-7205-a114-254eba0108e1.png","targetDeleted":false,"owned":false,"actions":null},"context":null,"actors":[{"id":"7d3f292e-a75e-42d9-82ea-98438c532705","name":"Joe N","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/7d3f292e-a75e-42d9-82ea-98438c532705/ct4zvnlt","slug":"joe-ndua","followed":false,"followsYou":false}],"actorCount":1,"message":null,"resourceType":"component","visibility":"public","startedAt":"2026-09-21T19:31:26.875Z","latestAt":"2026-09-21T19:31:26.875Z"},{"id":"01a0c3c7-79c6-750f-abe5-e3ba8cea0a31","type":"comment.reply","target":{"type":"post","id":"01a0aa62-e339-7579-9305-c6860826fa75","preview":"Simple Calculator","previewJson":null,"thumbnail":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/7d3f292e-a75e-42d9-82ea-98438c532705/01a0aa61-31d9-7371-9721-51b0fe00ab71.png","targetDeleted":false,"owned":true,"actions":{"postId":"01a0aa62-e339-7579-9305-c6860826fa75","like":{"count":9,"liked":false},"reply":{"parentCommentId":null},"repost":{"count":0,"reposted":false,"repostId":null}}},"context":{"type":"comment","id":"01a0c3c7-79ae-72ca-9b2d-9c69c4d662ad","preview":"Appreciated 🙏","previewJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"Appreciated 🙏"}]}]},"thumbnail":null,"targetDeleted":false,"owned":true,"actions":{"postId":"01a0aa62-e339-7579-9305-c6860826fa75","like":{"count":0,"liked":false},"reply":{"parentCommentId":"01a0abc6-1b5b-7241-a81b-0b8c0d7837c9"},"repost":null}},"actors":[{"id":"7d3f292e-a75e-42d9-82ea-98438c532705","name":"Joe N","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/7d3f292e-a75e-42d9-82ea-98438c532705/ct4zvnlt","slug":"joe-ndua","followed":false,"followsYou":false}],"actorCount":1,"message":null,"resourceType":null,"visibility":"public","startedAt":"2026-09-21T11:43:45.094Z","latestAt":"2026-09-21T11:43:45.094Z"},{"id":"01a0c3c7-300b-75dd-9756-0b3be7cc6909","type":"comment.liked","target":{"type":"comment","id":"01a0abc6-1b5b-7241-a81b-0b8c0d7837c9","preview":"This calculator component feels both useful and thoughtfully designed.","previewJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"This calculator component feels both useful and thoughtfully designed."}]}]},"thumbnail":null,"targetDeleted":false,"owned":false,"actions":{"postId":"01a0aa62-e339-7579-9305-c6860826fa75","like":{"count":1,"liked":false},"reply":{"parentCommentId":"01a0abc6-1b5b-7241-a81b-0b8c0d7837c9"},"repost":null}},"context":{"type":"post","id":"01a0aa62-e339-7579-9305-c6860826fa75","preview":"Simple Calculator","previewJson":null,"thumbnail":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/7d3f292e-a75e-42d9-82ea-98438c532705/01a0aa61-31d9-7371-9721-51b0fe00ab71.png","targetDeleted":false,"owned":true,"actions":{"postId":"01a0aa62-e339-7579-9305-c6860826fa75","like":{"count":9,"liked":false},"reply":{"parentCommentId":null},"repost":{"count":0,"reposted":false,"repostId":null}}},"actors":[{"id":"7d3f292e-a75e-42d9-82ea-98438c532705","name":"Joe N","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/7d3f292e-a75e-42d9-82ea-98438c532705/ct4zvnlt","slug":"joe-ndua","followed":false,"followsYou":false}],"actorCount":1,"message":null,"resourceType":null,"visibility":"public","startedAt":"2026-09-21T11:43:26.214Z","latestAt":"2026-09-21T11:43:26.214Z"},{"id":"01a0ac06-4ee6-726d-8d56-e77d331829a8","type":"component.created","target":{"type":"component","id":"SAQLRIwZmMgENEhqBPyH","preview":"Sci Calculator","previewJson":null,"thumbnail":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/7d3f292e-a75e-42d9-82ea-98438c532705/01a0abff-df15-77bd-b18d-c0bf6ae9eab9.png","targetDeleted":false,"owned":false,"actions":null},"context":null,"actors":[{"id":"7d3f292e-a75e-42d9-82ea-98438c532705","name":"Joe N","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/7d3f292e-a75e-42d9-82ea-98438c532705/ct4zvnlt","slug":"joe-ndua","followed":false,"followsYou":false}],"actorCount":1,"message":null,"resourceType":"component","visibility":"public","startedAt":"2026-09-16T21:01:29.702Z","latestAt":"2026-09-16T21:01:29.702Z"},{"id":"01a0aa62-e581-713a-919a-0e357c288b7e","type":"component.created","target":{"type":"component","id":"us1h2sOA8zrHsShv9rpF","preview":"Simple Calculator","previewJson":null,"thumbnail":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/7d3f292e-a75e-42d9-82ea-98438c532705/01a0aa61-31d9-7371-9721-51b0fe00ab71.png","targetDeleted":false,"owned":false,"actions":null},"context":null,"actors":[{"id":"7d3f292e-a75e-42d9-82ea-98438c532705","name":"Joe N","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/7d3f292e-a75e-42d9-82ea-98438c532705/ct4zvnlt","slug":"joe-ndua","followed":false,"followsYou":false}],"actorCount":1,"message":null,"resourceType":"component","visibility":"public","startedAt":"2026-09-16T13:23:23.137Z","latestAt":"2026-09-16T13:23:23.137Z"},{"id":"01a0a9c4-099c-74eb-8344-0606f3f164ba","type":"component.created","target":{"type":"component","id":"OcoRzPnZLKePf8UaTOun","preview":"Physics Based Puzzle","previewJson":null,"thumbnail":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/7d3f292e-a75e-42d9-82ea-98438c532705/01a0a9c3-7a61-729a-bc3d-11dbd2053e1e.png","targetDeleted":false,"owned":false,"actions":null},"context":null,"actors":[{"id":"7d3f292e-a75e-42d9-82ea-98438c532705","name":"Joe N","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/7d3f292e-a75e-42d9-82ea-98438c532705/ct4zvnlt","slug":"joe-ndua","followed":false,"followsYou":false}],"actorCount":1,"message":null,"resourceType":"component","visibility":"public","startedAt":"2026-09-16T10:29:52.155Z","latestAt":"2026-09-16T10:29:52.155Z"},{"id":"019f4666-0aef-728e-a798-a5aeec08da3b","type":"component.liked","target":{"type":"component","id":"Zl9KpiqHZHJ2sxUVEua0","preview":"Parallax Marquee","previewJson":null,"thumbnail":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/components/Zl9KpiqHZHJ2sxUVEua0/parallax-marquee-maa40XOnjTjYb6Abzlkb2ZMUT7HbMX","targetDeleted":false,"owned":false,"actions":null},"context":null,"actors":[{"id":"7d3f292e-a75e-42d9-82ea-98438c532705","name":"Joe N","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/7d3f292e-a75e-42d9-82ea-98438c532705/ct4zvnlt","slug":"joe-ndua","followed":false,"followsYou":false}],"actorCount":1,"message":null,"resourceType":"component","visibility":"public","startedAt":"2026-07-09T10:22:00.426Z","latestAt":"2026-07-09T10:22:00.426Z"},{"id":"019f465f-b68b-743c-baa1-83f976b07f32","type":"component.liked","target":{"type":"component","id":"VRqqOWAOysBZ8HS7rKce","preview":"Free 3D Earth Globe","previewJson":null,"thumbnail":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/components/VRqqOWAOysBZ8HS7rKce/free-3d-earth-globe-WtvTOt9WfaJ4ScPuFkX7dIUBV0sxtZ","targetDeleted":false,"owned":false,"actions":null},"context":null,"actors":[{"id":"7d3f292e-a75e-42d9-82ea-98438c532705","name":"Joe N","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/7d3f292e-a75e-42d9-82ea-98438c532705/ct4zvnlt","slug":"joe-ndua","followed":false,"followsYou":false}],"actorCount":1,"message":null,"resourceType":"component","visibility":"public","startedAt":"2026-07-09T10:15:05.606Z","latestAt":"2026-07-09T10:15:05.606Z"},{"id":"019f465e-18a5-763d-8387-d2dfbd667236","type":"component.liked","target":{"type":"component","id":"wugRknFXcWiqgh9GgMF9","preview":"Phantom Gallery","previewJson":null,"thumbnail":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/components/wugRknFXcWiqgh9GgMF9/phantom-gallery-Qgq1QPAKfyaUS91sNaMtnwu9P01uvs","targetDeleted":false,"owned":false,"actions":null},"context":null,"actors":[{"id":"7d3f292e-a75e-42d9-82ea-98438c532705","name":"Joe N","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/7d3f292e-a75e-42d9-82ea-98438c532705/ct4zvnlt","slug":"joe-ndua","followed":false,"followsYou":false}],"actorCount":1,"message":null,"resourceType":"component","visibility":"public","startedAt":"2026-07-09T10:13:19.648Z","latestAt":"2026-07-09T10:13:19.648Z"},{"id":"019f4649-840b-7343-bf9c-3570d63fb755","type":"component.liked","target":{"type":"component","id":"TUzVAphc1D3VfKWiN1td","preview":"Dragable Carousel","previewJson":null,"thumbnail":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/components/TUzVAphc1D3VfKWiN1td/dragable-carousel-D4m0xmHZfZBESlCKl9Fg1TZBcxQm7A","targetDeleted":false,"owned":false,"actions":null},"context":null,"actors":[{"id":"7d3f292e-a75e-42d9-82ea-98438c532705","name":"Joe N","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/7d3f292e-a75e-42d9-82ea-98438c532705/ct4zvnlt","slug":"joe-ndua","followed":false,"followsYou":false}],"actorCount":1,"message":null,"resourceType":"component","visibility":"public","startedAt":"2026-07-09T09:50:50.885Z","latestAt":"2026-07-09T09:50:50.885Z"},{"id":"019f4643-6a9b-74bd-b50b-31b246374bb9","type":"component.liked","target":{"type":"component","id":"S3etrgDaCUPnbDznlYrk","preview":"Interactive Ticker","previewJson":null,"thumbnail":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/components/S3etrgDaCUPnbDznlYrk/interactive-ticker-OUrlV6nrJaijXUKZ7UGIXYDrcTtKKb","targetDeleted":false,"owned":false,"actions":null},"context":null,"actors":[{"id":"7d3f292e-a75e-42d9-82ea-98438c532705","name":"Joe N","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/7d3f292e-a75e-42d9-82ea-98438c532705/ct4zvnlt","slug":"joe-ndua","followed":false,"followsYou":false}],"actorCount":1,"message":null,"resourceType":"component","visibility":"public","startedAt":"2026-07-09T09:44:11.152Z","latestAt":"2026-07-09T09:44:11.152Z"},{"id":"019f1e28-3b94-730d-99b3-139d5bb8373c","type":"component.liked","target":{"type":"component","id":"On5r5eXkwGkYhyfbKmf4","preview":"Apple Navigation","previewJson":null,"thumbnail":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/components/On5r5eXkwGkYhyfbKmf4/apple-dock-nav-cxTG164OiutC9iUuT3EB1PogJfLRTa","targetDeleted":false,"owned":false,"actions":null},"context":null,"actors":[{"id":"7d3f292e-a75e-42d9-82ea-98438c532705","name":"Joe N","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/7d3f292e-a75e-42d9-82ea-98438c532705/ct4zvnlt","slug":"joe-ndua","followed":false,"followsYou":false}],"actorCount":1,"message":null,"resourceType":"component","visibility":"public","startedAt":"2026-07-01T14:49:41.008Z","latestAt":"2026-07-01T14:49:41.008Z"},{"id":"019f1e16-c7f2-7648-99d2-0eadb43af2c8","type":"component.liked","target":{"type":"component","id":"vybaxS7cvvVyBVVq16nZ","preview":"Swtich on hover tabs","previewJson":null,"thumbnail":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/components/vybaxS7cvvVyBVVq16nZ/swtich-on-hover-tabs-WbZcLGvYXuzLP6Q4wmQ1fVHGWEqLOG","targetDeleted":false,"owned":false,"actions":null},"context":null,"actors":[{"id":"7d3f292e-a75e-42d9-82ea-98438c532705","name":"Joe N","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/7d3f292e-a75e-42d9-82ea-98438c532705/ct4zvnlt","slug":"joe-ndua","followed":false,"followsYou":false}],"actorCount":1,"message":null,"resourceType":"component","visibility":"public","startedAt":"2026-07-01T14:30:37.290Z","latestAt":"2026-07-01T14:30:37.290Z"},{"id":"019f1e15-5b51-75bc-89cf-32e7f2aaf69d","type":"component.liked","target":{"type":"component","id":"Lg6OLwJjMKdDeH8jyTHN","preview":"Product Stage","previewJson":null,"thumbnail":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/2179b778-b2d7-4c1e-ab27-60e7e12a6593/019fbd56-669e-76f2-a1dd-db727c9f272f.jpg","targetDeleted":false,"owned":false,"actions":null},"context":null,"actors":[{"id":"7d3f292e-a75e-42d9-82ea-98438c532705","name":"Joe N","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/7d3f292e-a75e-42d9-82ea-98438c532705/ct4zvnlt","slug":"joe-ndua","followed":false,"followsYou":false}],"actorCount":1,"message":null,"resourceType":"component","visibility":"public","startedAt":"2026-07-01T14:29:03.948Z","latestAt":"2026-07-01T14:29:03.948Z"},{"id":"019f1e04-e07c-7008-9dbd-8e347dd515da","type":"component.liked","target":{"type":"component","id":"prXJdN8MxY6U0GakVC63","preview":"CursorTrail","previewJson":null,"thumbnail":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/components/prXJdN8MxY6U0GakVC63/cursortrail-ubLzWZ2zxINkh54cDS1ql5ZoWGGW83","targetDeleted":false,"owned":false,"actions":null},"context":null,"actors":[{"id":"7d3f292e-a75e-42d9-82ea-98438c532705","name":"Joe N","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/7d3f292e-a75e-42d9-82ea-98438c532705/ct4zvnlt","slug":"joe-ndua","followed":false,"followsYou":false}],"actorCount":1,"message":null,"resourceType":"component","visibility":"public","startedAt":"2026-07-01T14:11:03.924Z","latestAt":"2026-07-01T14:11:03.924Z"},{"id":"019f1e02-d03b-7724-8dbc-c3971f76cd2d","type":"component.liked","target":{"type":"component","id":"77dts2wVPEeu3XpPuaCC","preview":"Cursor Mask Reveal","previewJson":null,"thumbnail":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/components/77dts2wVPEeu3XpPuaCC/cursor-mask-reveal-xmDwCnxVbj65qcmMh2P8CiQEv7gfcL","targetDeleted":false,"owned":false,"actions":null},"context":null,"actors":[{"id":"7d3f292e-a75e-42d9-82ea-98438c532705","name":"Joe N","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/7d3f292e-a75e-42d9-82ea-98438c532705/ct4zvnlt","slug":"joe-ndua","followed":false,"followsYou":false}],"actorCount":1,"message":null,"resourceType":"component","visibility":"public","startedAt":"2026-07-01T14:08:48.693Z","latestAt":"2026-07-01T14:08:48.693Z"},{"id":"019f1d8a-46c7-7452-809f-37886240c556","type":"component.liked","target":{"type":"component","id":"wNddqcZFoWLQq5SpwRor","preview":"Ripple","previewJson":null,"thumbnail":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/components/wNddqcZFoWLQq5SpwRor/ripple-ZgAqPJjFqwJ8DFs8gjMdgFPO3S1WyF","targetDeleted":false,"owned":false,"actions":null},"context":null,"actors":[{"id":"7d3f292e-a75e-42d9-82ea-98438c532705","name":"Joe N","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/7d3f292e-a75e-42d9-82ea-98438c532705/ct4zvnlt","slug":"joe-ndua","followed":false,"followsYou":false}],"actorCount":1,"message":null,"resourceType":"component","visibility":"public","startedAt":"2026-07-01T11:57:09.183Z","latestAt":"2026-07-01T11:57:09.183Z"},{"id":"019f1d86-47ad-7557-8b60-c057f1c7b92f","type":"component.liked","target":{"type":"component","id":"coWoj9DKQ23UfQW51jHN","preview":"GravityGallery","previewJson":null,"thumbnail":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/components/coWoj9DKQ23UfQW51jHN/gravitygallery-v6xbGTa0zHS70LhbhaXjWuG38k4JBS","targetDeleted":false,"owned":false,"actions":null},"context":null,"actors":[{"id":"7d3f292e-a75e-42d9-82ea-98438c532705","name":"Joe N","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/7d3f292e-a75e-42d9-82ea-98438c532705/ct4zvnlt","slug":"joe-ndua","followed":false,"followsYou":false}],"actorCount":1,"message":null,"resourceType":"component","visibility":"public","startedAt":"2026-07-01T11:52:47.270Z","latestAt":"2026-07-01T11:52:47.270Z"}],"pagination":{"next":"MjAyNi0wNy0wMVQxMTo1Mjo0Ny4yNzBafDAxOWYxZDg2LTQ3YWQtNzU1Ny04YjYwLWMwNTdmMWM3YjkyZg","previous":null},"totalCount":"$undefined","feedSession":"$undefined"}],"$inf$posts:7d3f292e-a75e-42d9-82ea-98438c532705:/unified/posts/?creator=7d3f292e-a75e-42d9-82ea-98438c532705&with=reposts":[{"data":[{"id":"01a0c573-a7c9-76b8-af6e-954736902858","title":null,"body":"

I built this component because YouTube's default embed never matched the sites I was designing. It's a soft, tactile player that looks like part of your page. Try it out

","bodyJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"I built this component because YouTube's default embed never matched the sites I was designing. It's a soft, tactile player that looks like part of your page. Try it out"}]}]},"author":{"framerUserId":"7d3f292e-a75e-42d9-82ea-98438c532705","name":"Joe N","slug":"joe-ndua","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/7d3f292e-a75e-42d9-82ea-98438c532705/ct4zvnlt","followed":false,"followsYou":false},"media":[],"resources":[{"id":"rbNnFrjexheKmF8eG7YL","resolved":true,"title":"YouTube Player","body":"$51","bodyJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"This component turns any YouTube video or playlist into a soft, player that looks designed rather than embedded. Paste a link, match the colors to your site, and you're done. It handles light/dark mode, playlists and visitors get custom controls."}]},{"type":"customHeading","content":[{"type":"text","text":"What you get"}],"attrs":{"level":2}},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Video or playlist from one link:","marks":[{"type":"bold"}]},{"type":"text","text":" Softplay detects which it is. Playlists get previous/next and an optional track list with thumbnails and titles."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Light and dark mode:","marks":[{"type":"bold"}]},{"type":"text","text":" set it to Light, Dark or Auto (follows the visitor's system). A small toggle in the player lets visitors switch themselves."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Full color control:","marks":[{"type":"bold"}]},{"type":"text","text":" separate light and dark palettes (surface, highlight, shadow, icons and text, accent), plus depth, corner radius and font."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"A poster that fits your page:","marks":[{"type":"bold"}]},{"type":"text","text":" uses the video's thumbnail automatically or your own image, with an optional title, tint and adjustable play button."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Compact modes:","marks":[{"type":"bold"}]},{"type":"text","text":" minimize to a slim bar, or hide the controls and keep just the video."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Built to behave:","marks":[{"type":"bold"}]},{"type":"text","text":" the player loads as it nears the screen, the layout is responsive, controls are keyboard-accessible with labels and focus rings, and animations respect reduced-motion settings."}]}]}]},{"type":"customHeading","content":[{"type":"text","text":"Set up"}],"attrs":{"level":2}},{"type":"orderedList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Add the component to your page."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Paste a YouTube video or playlist link into YouTube link."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Match the colors and set the theme in the property panel."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Click Preview to try playback. The canvas shows a static poster."}]}]}],"attrs":{"type":null,"start":1}},{"type":"customHeading","content":[{"type":"text","text":"Good to know"}],"attrs":{"level":2}},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"The video needs embedding enabled. Private videos and videos with embedding turned off won't play."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Playlists must be public or unlisted. Auto-generated YouTube Mix links can't be embedded."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Browsers allow autoplay only when muted, and YouTube allows one autoplaying player per page."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"\"Captions: Off\" is best effort, because YouTube offers no official way to force captions off."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"The player connects to YouTube's servers, so mention that in your privacy policy."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"This component isn't affiliated with or endorsed by YouTube or Google. YouTube is a trademark of Google LLC."}]}]}]},{"type":"customHeading","content":[{"type":"text","text":"Support"}],"attrs":{"level":2}},{"type":"paragraph","content":[{"type":"text","text":"Questions or issues: email "},{"type":"text","text":"joendua@gmail.com","marks":[{"type":"link","attrs":{"rel":"noopener noreferrer nofollow","href":"mailto:joendua@gmail.com","target":"_blank"}}]}]},{"type":"paragraph"}]},"introduction":"A beautifully designed player","slug":"youtube-player","author":{"framerUserId":"7d3f292e-a75e-42d9-82ea-98438c532705","name":"Joe N","slug":"joe-ndua","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/7d3f292e-a75e-42d9-82ea-98438c532705/ct4zvnlt","followed":false,"followsYou":false},"media":[{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/7d3f292e-a75e-42d9-82ea-98438c532705/01a0c572-77df-7205-a114-254eba0108e1.png","metadata":{"tint":{"h":0,"s":0,"l":57},"width":1600,"height":1200}}],"post":null,"createdAt":"2026-09-21T19:31:25.323Z","updatedAt":"2026-09-21T19:41:11.145Z","publishedAt":"2026-09-21T19:31:25.319Z","featuredAt":null,"approvedAt":null,"type":"component","attributes":{"url":null,"previewUrl":"https://youtubeplayer.framer.website/","price":"10","paymentUrl":"https://www.paypal.com/ncp/payment/C4C5TFDNT9XTA","workshop":false,"categories":[{"id":"ae04a700-60cc-429a-b133-88f3c9709ec0","name":"Players","slug":"players"}],"lastSaveId":"paH0yPBRmsVb984hJeob","tags":[]}}],"contests":[],"categories":[],"tags":[],"likes":{"count":0,"liked":false},"comments":{"count":2},"reposts":{"count":0,"reposted":false,"repostId":null},"version":1,"edited":false,"editedAt":null,"createdAt":"2026-09-21T19:31:26.281Z","updatedAt":"2026-09-21T19:31:26.281Z"},{"id":"01a0ac06-4ca8-73b4-b2ab-ce3d7866aa52","title":null,"body":"

I may have gone abit overboard on the functionalities of this calculator. Try it out 🙂

","bodyJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"I may have gone abit overboard on the functionalities of this calculator. Try it out 🙂"}]}]},"author":{"framerUserId":"7d3f292e-a75e-42d9-82ea-98438c532705","name":"Joe N","slug":"joe-ndua","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/7d3f292e-a75e-42d9-82ea-98438c532705/ct4zvnlt","followed":false,"followsYou":false},"media":[],"resources":[{"id":"SAQLRIwZmMgENEhqBPyH","resolved":true,"title":"Sci Calculator","body":"$52","bodyJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"A fully functional scientific calculator component. Real math engine, memory and DEG/RAD. Drop it in and it works."}]},{"type":"paragraph","content":[{"type":"text","text":"It respects order of operations, nested parentheses, and implicit multiplication, and supports the full range of scientific functions: trig, inverse trig, hyperbolic, logs, powers, roots, factorials, and more."}]},{"type":"paragraph"},{"type":"customHeading","content":[{"type":"text","text":"Why it's different"}],"attrs":{"level":2}},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"It's a real calculator, not a picture of one.","marks":[{"type":"bold"}]},{"type":"text","text":" Every key does what it says. Type an expression, hit equals, get a correct answer."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Proper math, not string hacks.","marks":[{"type":"bold"}]},{"type":"text","text":" A hand-written parser handles operator precedence, parentheses, and implicit multiplication (like "},{"type":"text","text":"2π","marks":[{"type":"code"}]},{"type":"text","text":" or "},{"type":"text","text":"3(4+5)","marks":[{"type":"code"}]},{"type":"text","text":") correctly."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Scientific-grade functionality.","marks":[{"type":"bold"}]},{"type":"text","text":" SHIFT and HYP keys unlock inverse and hyperbolic variants of sin/cos/tan, e^x, 10^x, cube, nth root, and more, just like a physical scientific calculator."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Reads like a calculator, not a code editor.","marks":[{"type":"bold"}]},{"type":"text","text":" Large numbers auto-format with thousands separators as you type, so results stay readable at a glance."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Fully keyboard-operable.","marks":[{"type":"bold"}]},{"type":"text","text":" Every key has a keyboard equivalent, so it's just as usable with a mouse, on touch, or from a keyboard."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"One file, no dependencies.","marks":[{"type":"bold"}]},{"type":"text","text":" Self-contained code component, nothing else to install."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Optional key-click sound","marks":[{"type":"bold"}]}]}]}]},{"type":"customHeading","content":[{"type":"text","text":"Great for"}],"attrs":{"level":2}},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Finance, engineering, or science-focused landing pages and product demos"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Portfolio pieces that need a genuinely interactive UI element "}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Internal tools or prototypes that need real on-page calculation"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Anywhere you want a tactile, hardware-inspired UI moment"}]}]}]},{"type":"paragraph"},{"type":"paragraph","content":[{"type":"text","text":"No configuration required, drag it onto a frame and it's ready to use."}]},{"type":"paragraph"}]},"introduction":"A real, working scientific calc","slug":"sci-calculator","author":{"framerUserId":"7d3f292e-a75e-42d9-82ea-98438c532705","name":"Joe N","slug":"joe-ndua","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/7d3f292e-a75e-42d9-82ea-98438c532705/ct4zvnlt","followed":false,"followsYou":false},"media":[{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/7d3f292e-a75e-42d9-82ea-98438c532705/01a0abff-df15-77bd-b18d-c0bf6ae9eab9.png","metadata":{"tint":{"h":0,"s":0,"l":57},"width":1600,"height":1200}}],"post":null,"createdAt":"2026-09-16T21:01:28.538Z","updatedAt":"2026-09-16T21:08:56.900Z","publishedAt":"2026-09-16T21:01:28.535Z","featuredAt":null,"approvedAt":null,"type":"component","attributes":{"url":null,"previewUrl":"https://scientific-calculator.framer.website/","price":"5","paymentUrl":"https://www.paypal.com/ncp/payment/DDW37MXTYXD6Q","workshop":false,"categories":[{"id":"7677fa83-43ce-41a2-a3fe-db438ec0fd33","name":"Interactive","slug":"interactive"}],"lastSaveId":"Xqz6tCMNRpMhkjTPWccW","tags":[]}}],"contests":[],"categories":[],"tags":[],"likes":{"count":1,"liked":false},"comments":{"count":0},"reposts":{"count":0,"reposted":false,"repostId":null},"version":1,"edited":false,"editedAt":null,"createdAt":"2026-09-16T21:01:29.128Z","updatedAt":"2026-09-16T21:01:29.128Z"},{"id":"01a0aa62-e339-7579-9305-c6860826fa75","title":null,"body":"

Built this calculator with a nostalgic design to it. With Full keyboard input support too. Try it out

","bodyJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"Built this calculator with a nostalgic design to it. With Full keyboard input support too. Try it out "}]}]},"author":{"framerUserId":"7d3f292e-a75e-42d9-82ea-98438c532705","name":"Joe N","slug":"joe-ndua","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/7d3f292e-a75e-42d9-82ea-98438c532705/ct4zvnlt","followed":false,"followsYou":false},"media":[],"resources":[{"id":"us1h2sOA8zrHsShv9rpF","resolved":true,"title":"Simple Calculator","body":"

A beautifully designed scientific calculator.

Every key is wired up to a real arithmetic engine, so it adds, multiplies, takes square roots, and runs trig functions.

Built entirely from CSS gradients and shadows, so there are no image assets to load and no attribution needed.

What it can do

Standard arithmetic: add, subtract, multiply, divide
Scientific functions: sin, cos, tan, log, ln, √, x², xʸ
SHIFT key unlocks inverse functions: sin⁻¹, cos⁻¹, tan⁻¹, 10ˣ, eˣ
AC (all clear) and CE (clear entry)
Results auto-format with thousands separators
Full keyboard input support (digits, operators, Enter, Escape)

","bodyJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"A beautifully designed scientific calculator. "}]},{"type":"paragraph","content":[{"type":"text","text":"Every key is wired up to a real arithmetic engine, so it adds, multiplies, takes square roots, and runs trig functions."}]},{"type":"paragraph","content":[{"type":"text","text":"Built entirely from CSS gradients and shadows, so there are no image assets to load and no attribution needed."}]},{"type":"paragraph"},{"type":"customHeading","content":[{"type":"text","text":"What it can do"}],"attrs":{"level":2}},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Standard arithmetic: add, subtract, multiply, divide"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Scientific functions: sin, cos, tan, log, ln, √, x², xʸ"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"SHIFT key unlocks inverse functions: sin⁻¹, cos⁻¹, tan⁻¹, 10ˣ, eˣ"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"AC (all clear) and CE (clear entry)"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Results auto-format with thousands separators"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Full keyboard input support (digits, operators, Enter, Escape)"}]}]}]}]},"introduction":"A stylish scientific calculator","slug":"simple-calculator","author":{"framerUserId":"7d3f292e-a75e-42d9-82ea-98438c532705","name":"Joe N","slug":"joe-ndua","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/7d3f292e-a75e-42d9-82ea-98438c532705/ct4zvnlt","followed":false,"followsYou":false},"media":[{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/7d3f292e-a75e-42d9-82ea-98438c532705/01a0aa61-31d9-7371-9721-51b0fe00ab71.png","metadata":{"tint":{"h":0,"s":0,"l":57},"width":1600,"height":1200}}],"post":null,"createdAt":"2026-09-16T13:23:21.958Z","updatedAt":"2026-09-16T13:23:21.958Z","publishedAt":"2026-09-16T13:23:21.955Z","featuredAt":null,"approvedAt":null,"type":"component","attributes":{"url":null,"previewUrl":"https://simple-calculator.framer.website/","price":"2","paymentUrl":"https://www.paypal.com/ncp/payment/9YCDMJ3ZUKPJJ","workshop":false,"categories":[{"id":"7677fa83-43ce-41a2-a3fe-db438ec0fd33","name":"Interactive","slug":"interactive"}],"lastSaveId":"rhvkmAmJRo61ZH57i1yx","tags":[]}}],"contests":[],"categories":[],"tags":[],"likes":{"count":9,"liked":false},"comments":{"count":2},"reposts":{"count":0,"reposted":false,"repostId":null},"version":1,"edited":false,"editedAt":null,"createdAt":"2026-09-16T13:23:22.553Z","updatedAt":"2026-09-16T13:23:22.553Z"},{"id":"01a0a9c4-0770-71a9-a76b-5652e28e922f","title":null,"body":"

Just got done updating this physics-based interactive puzzle component. You can add any image and it automatically gets turned into a puzzle with the timer baked in. Try it out

","bodyJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"Just got done updating this physics-based interactive puzzle component. You can add any image and it automatically gets turned into a puzzle with the timer baked in. Try it out"}]}]},"author":{"framerUserId":"7d3f292e-a75e-42d9-82ea-98438c532705","name":"Joe N","slug":"joe-ndua","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/7d3f292e-a75e-42d9-82ea-98438c532705/ct4zvnlt","followed":false,"followsYou":false},"media":[],"resources":[{"id":"OcoRzPnZLKePf8UaTOun","resolved":true,"title":"Physics Based Puzzle","body":"$53","bodyJson":{"type":"doc","content":[{"type":"customHeading","content":[{"type":"text","text":"About "}],"attrs":{"level":2}},{"type":"paragraph","content":[{"type":"text","text":"Drop in one image, set a grid size, and this component does the rest. Pieces tumble in under real physics (drag, throw, watch them bounce and settle), snap together as you place them correctly, and celebrate with confetti the moment the picture's complete."}]},{"type":"customHeading","content":[{"type":"text","text":"What's Included"}],"attrs":{"level":2}},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Real Matter.js physics - pieces fall, bounce, and drag naturally, no fake animation"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Works at any screen size - the win check is relational, not pixel-based"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Auto-detects mobile and can swap in a separate crop for portrait screens"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Best-time tracking with a \"New Best\" celebration, built entirely on local storage - no database, no signup"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Reference thumbnail with a tap-to-enlarge lightbox, so solvers can check their progress against the original"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Full custom sound design (impact, \"getting warm,\" piece-merge, solve) with mobile-safe audio handling"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"One-click restart button"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"About 40 property controls - tune gravity, bounciness, tile size, colors, fonts, and every sound and flash color from the Framer panel, zero code required"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Zero backend - everything runs client-side, so there's nothing to configure or maintain after install"}]}]}]},{"type":"customHeading","content":[{"type":"text","text":"Who it's for"}],"attrs":{"level":2}},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Photography portfolios and galleries - turn your best shot into something visitors spend two minutes with instead of five seconds"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Museums, exhibitions, and art sites - pair it with the built-in title / artist / year reveal card"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Editorial and blog sites - a daily puzzle brings people back the way a daily crossword does"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Any brand that wants one genuinely playful moment on an otherwise static site"}]}]}]},{"type":"customHeading","content":[{"type":"text","text":"FAQ"}],"attrs":{"level":2}},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Does this need a database or backend? No. Best times and puzzle state live in the visitor's browser. Drop it in and it works."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Can I use my own images? Yes. Any image, swappable any time from the Framer panel, including a separate crop for mobile."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Can I change how it looks and sounds? Yes. Colors, fonts, tile size, bounce, gravity, every sound effect, and more are all exposed as properties — no code required."}]}]}]}]},"introduction":"Interactive physics puzzle","slug":"physics-based-puzzle","author":{"framerUserId":"7d3f292e-a75e-42d9-82ea-98438c532705","name":"Joe N","slug":"joe-ndua","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/7d3f292e-a75e-42d9-82ea-98438c532705/ct4zvnlt","followed":false,"followsYou":false},"media":[{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/7d3f292e-a75e-42d9-82ea-98438c532705/01a0a9c3-7a61-729a-bc3d-11dbd2053e1e.png","metadata":{"tint":{"h":347,"s":76,"l":31},"width":1600,"height":1200}}],"post":null,"createdAt":"2026-09-16T10:29:51.042Z","updatedAt":"2026-09-16T12:04:49.113Z","publishedAt":"2026-09-16T10:29:51.040Z","featuredAt":null,"approvedAt":null,"type":"component","attributes":{"url":null,"previewUrl":"https://physics-based-puzzle.framer.website/","price":"12","paymentUrl":"https://www.paypal.com/ncp/payment/CQUBGAYZLF7JN","workshop":false,"categories":[{"id":"7677fa83-43ce-41a2-a3fe-db438ec0fd33","name":"Interactive","slug":"interactive"}],"lastSaveId":"UrdxvBKt4Dw7HDxTsVKC","tags":[]}}],"contests":[],"categories":[],"tags":[],"likes":{"count":1,"liked":false},"comments":{"count":0},"reposts":{"count":0,"reposted":false,"repostId":null},"version":1,"edited":false,"editedAt":null,"createdAt":"2026-09-16T10:29:51.600Z","updatedAt":"2026-09-16T10:29:51.600Z"}],"pagination":{"next":null,"previous":null},"totalCount":"$undefined","feedSession":"$undefined"}]}},"children":"$L54"}]