51: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"] 52:T78c,

Peek Drawer Pro turns any layer into a polished, draggable panel — a floating peek that docks to any edge, or a classic slide-in drawer. You design the handle and the content; the component handles the motion, the gestures, and the responsive behavior.

Two patterns, one component

Floating — a peeking handle your users tap or drag to reveal a panel. It snaps to the nearest edge, repositions freely, and can stay fixed to the screen or live inside a section.
Drawer — a full slide-in panel from left, right, top, or bottom, with an optional backdrop and drag-to-close.

Bring your own design

Connect any frame or component as the handle and as the content — no restyling, no limits.
Or use the built-in pill handle for an instant, zero-setup start.

Built to feel right

Smooth spring animations, tap or drag to open, optional attention hint.
Mobile-first: safe-area aware, body-scroll lock, buttery on touch.
Accessible: keyboard-friendly and respects Reduce Motion.
Fit-to-content or custom sizing, shadow, radius, scrim, close button, and more.

Set up in seconds

Pick a mode, connect your handle and content — done.
A clean Simple view by default, with an Advanced panel when you want full control.
CMS-bindable settings for dynamic, data-driven panels.

Perfect for side navigation, filters, carts, chat widgets, cookie banners, info panels, and floating CTAs.

Demo Page

53:T78c,

Two patterns, one component

Floating — a peeking handle your users tap or drag to reveal a panel. It snaps to the nearest edge, repositions freely, and can stay fixed to the screen or live inside a section.
Drawer — a full slide-in panel from left, right, top, or bottom, with an optional backdrop and drag-to-close.

Bring your own design

Connect any frame or component as the handle and as the content — no restyling, no limits.
Or use the built-in pill handle for an instant, zero-setup start.

Built to feel right

Smooth spring animations, tap or drag to open, optional attention hint.
Mobile-first: safe-area aware, body-scroll lock, buttery on touch.
Accessible: keyboard-friendly and respects Reduce Motion.
Fit-to-content or custom sizing, shadow, radius, scrim, close button, and more.

Set up in seconds

Pick a mode, connect your handle and content — done.
A clean Simple view by default, with an Advanced panel when you want full control.
CMS-bindable settings for dynamic, data-driven panels.

Perfect for side navigation, filters, carts, chat widgets, cookie banners, info panels, and floating CTAs.

Demo Page

50:["$","$L51",null,{"value":{"fallback":{"$inf$activity-creator-cd8965f2-65ab-4cf1-9d60-0ec694ab10f3-all:/unified/creator/cd8965f2-65ab-4cf1-9d60-0ec694ab10f3/activity/":[{"data":[{"id":"01a10ce5-2897-731b-acd0-f6e6eb478426","type":"creator.followed","target":{"type":"creator","id":"7b34ca5d-5f1b-47da-9ab6-dbafa98f7c64","preview":"Elias ALVES","previewJson":null,"thumbnail":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/1986765/ZQCDW6564-Rd4a11uLlTKRXXJMOFXxqWVm8c2e46","slug":"elias-alves","targetDeleted":false,"owned":false,"actions":null},"context":null,"actors":[{"id":"cd8965f2-65ab-4cf1-9d60-0ec694ab10f3","name":"Vague agency","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/69306/avatar-xLJF9U1l9BGtavo7w28q4JihbAbE3q.jpg","slug":"vague-agency","followed":false,"followsYou":false}],"actorCount":1,"message":null,"resourceType":null,"visibility":"public","startedAt":"2026-10-05T16:28:27.094Z","latestAt":"2026-10-05T16:28:27.094Z"},{"id":"01a10ce5-136b-77e3-a466-b89acd670291","type":"comment.liked","target":{"type":"comment","id":"01a0af3b-dce8-728d-8dac-8a0e5af5d800","preview":"I'm doing my best; the plugin is going to be incredible.","previewJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"I'm doing my best; the plugin is going to be incredible."}]}]},"thumbnail":null,"targetDeleted":false,"owned":false,"actions":{"postId":"019e21e9-a19f-7739-9216-3d90cc067732","like":{"count":2,"liked":false},"reply":{"parentCommentId":"01a0a5c2-fe1a-769e-9944-a9461786deb7"},"repost":null}},"context":{"type":"post","id":"019e21e9-a19f-7739-9216-3d90cc067732","preview":"Frameloc","previewJson":null,"thumbnail":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/plugins/1003-ULBgZFguk7C8hieUpR03i7SHImO2a5","targetDeleted":false,"owned":false,"actions":{"postId":"019e21e9-a19f-7739-9216-3d90cc067732","like":{"count":43,"liked":false},"reply":{"parentCommentId":null},"repost":{"count":0,"reposted":false,"repostId":null}}},"actors":[{"id":"cd8965f2-65ab-4cf1-9d60-0ec694ab10f3","name":"Vague agency","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/69306/avatar-xLJF9U1l9BGtavo7w28q4JihbAbE3q.jpg","slug":"vague-agency","followed":false,"followsYou":false}],"actorCount":1,"message":null,"resourceType":null,"visibility":"public","startedAt":"2026-10-05T16:28:21.732Z","latestAt":"2026-10-05T16:28:21.732Z"},{"id":"01a10c95-b312-76a7-bd7d-5a6eb5e509df","type":"site.created","target":{"type":"site","id":"18041","preview":"AllSense","previewJson":null,"thumbnail":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/cd8965f2-65ab-4cf1-9d60-0ec694ab10f3/01a10c80-1e6e-723f-b927-c246195bd704.png","targetDeleted":false,"owned":false,"actions":null},"context":null,"actors":[{"id":"cd8965f2-65ab-4cf1-9d60-0ec694ab10f3","name":"Vague agency","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/69306/avatar-xLJF9U1l9BGtavo7w28q4JihbAbE3q.jpg","slug":"vague-agency","followed":false,"followsYou":false}],"actorCount":1,"message":null,"resourceType":"site","visibility":"public","startedAt":"2026-10-05T15:01:39.730Z","latestAt":"2026-10-05T15:01:39.730Z"},{"id":"01a0a5c2-fe35-73bf-9aa5-a2b2d533bf29","type":"comment.created","target":{"type":"post","id":"019e21e9-a19f-7739-9216-3d90cc067732","preview":"Frameloc","previewJson":null,"thumbnail":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/plugins/1003-ULBgZFguk7C8hieUpR03i7SHImO2a5","targetDeleted":false,"owned":false,"actions":{"postId":"019e21e9-a19f-7739-9216-3d90cc067732","like":{"count":43,"liked":false},"reply":{"parentCommentId":null},"repost":{"count":0,"reposted":false,"repostId":null}}},"context":{"type":"comment","id":"01a0a5c2-fe1a-769e-9944-a9461786deb7","preview":"Any news on the launch date?","previewJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"Any news on the launch date?"}]}]},"thumbnail":null,"targetDeleted":false,"owned":true,"actions":{"postId":"019e21e9-a19f-7739-9216-3d90cc067732","like":{"count":0,"liked":false},"reply":{"parentCommentId":"01a0a5c2-fe1a-769e-9944-a9461786deb7"},"repost":null}},"actors":[{"id":"cd8965f2-65ab-4cf1-9d60-0ec694ab10f3","name":"Vague agency","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/69306/avatar-xLJF9U1l9BGtavo7w28q4JihbAbE3q.jpg","slug":"vague-agency","followed":false,"followsYou":false}],"actorCount":1,"message":null,"resourceType":null,"visibility":"public","startedAt":"2026-09-15T15:50:14.837Z","latestAt":"2026-09-15T15:50:14.837Z"},{"id":"01a0a5c2-c478-774e-a8cd-919ef134a617","type":"plugin.liked","target":{"type":"plugin","id":"1003","preview":"Frameloc","previewJson":null,"thumbnail":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/plugins/1003-ULBgZFguk7C8hieUpR03i7SHImO2a5","targetDeleted":false,"owned":false,"actions":null},"context":null,"actors":[{"id":"cd8965f2-65ab-4cf1-9d60-0ec694ab10f3","name":"Vague agency","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/69306/avatar-xLJF9U1l9BGtavo7w28q4JihbAbE3q.jpg","slug":"vague-agency","followed":false,"followsYou":false}],"actorCount":1,"message":null,"resourceType":"plugin","visibility":"public","startedAt":"2026-09-15T15:50:00.050Z","latestAt":"2026-09-15T15:50:00.050Z"},{"id":"019f5135-f1fc-7408-8ac0-1245bd985f1f","type":"template.liked","target":{"type":"template","id":"69214","preview":"Newsio","previewJson":null,"thumbnail":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/830039ba-56b1-42fc-a371-361e8f7a1e4c/wksrw23r","targetDeleted":false,"owned":false,"actions":null},"context":null,"actors":[{"id":"cd8965f2-65ab-4cf1-9d60-0ec694ab10f3","name":"Vague agency","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/69306/avatar-xLJF9U1l9BGtavo7w28q4JihbAbE3q.jpg","slug":"vague-agency","followed":false,"followsYou":false}],"actorCount":1,"message":null,"resourceType":"template","visibility":"public","startedAt":"2026-07-11T12:45:17.681Z","latestAt":"2026-07-11T12:45:17.681Z"},{"id":"019f3748-66c4-7751-96db-861e17af9525","type":"comment.reply","target":{"type":"post","id":"019eda7e-fc68-7352-9e17-2dfc13d9bb51","preview":"Peek Drawer Pro","previewJson":null,"thumbnail":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/cd8965f2-65ab-4cf1-9d60-0ec694ab10f3/uj090c07","targetDeleted":false,"owned":true,"actions":{"postId":"019eda7e-fc68-7352-9e17-2dfc13d9bb51","like":{"count":2,"liked":false},"reply":{"parentCommentId":null},"repost":{"count":0,"reposted":false,"repostId":null}}},"context":{"type":"comment","id":"019f3748-66a6-75ab-af77-cba5a30606a9","preview":"Thanks ☺","previewJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"Thanks "},{"type":"emoji","attrs":{"name":"relaxed","emoji":"☺"}}]}]},"thumbnail":null,"targetDeleted":false,"owned":true,"actions":{"postId":"019eda7e-fc68-7352-9e17-2dfc13d9bb51","like":{"count":0,"liked":false},"reply":{"parentCommentId":"019efe50-9250-731c-af49-4c7a72fd04f0"},"repost":null}},"actors":[{"id":"cd8965f2-65ab-4cf1-9d60-0ec694ab10f3","name":"Vague agency","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/69306/avatar-xLJF9U1l9BGtavo7w28q4JihbAbE3q.jpg","slug":"vague-agency","followed":false,"followsYou":false}],"actorCount":1,"message":null,"resourceType":null,"visibility":"public","startedAt":"2026-07-06T11:55:19.620Z","latestAt":"2026-07-06T11:55:19.620Z"},{"id":"019f3748-29de-70ae-a3f1-851e8399cc91","type":"comment.liked","target":{"type":"comment","id":"019efe50-9250-731c-af49-4c7a72fd04f0","preview":"Cool concept!","previewJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"Cool concept!"}]}]},"thumbnail":null,"targetDeleted":false,"owned":false,"actions":{"postId":"019eda7e-fc68-7352-9e17-2dfc13d9bb51","like":{"count":1,"liked":false},"reply":{"parentCommentId":"019efe50-9250-731c-af49-4c7a72fd04f0"},"repost":null}},"context":{"type":"post","id":"019eda7e-fc68-7352-9e17-2dfc13d9bb51","preview":"Peek Drawer Pro","previewJson":null,"thumbnail":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/cd8965f2-65ab-4cf1-9d60-0ec694ab10f3/uj090c07","targetDeleted":false,"owned":true,"actions":{"postId":"019eda7e-fc68-7352-9e17-2dfc13d9bb51","like":{"count":2,"liked":false},"reply":{"parentCommentId":null},"repost":{"count":0,"reposted":false,"repostId":null}}},"actors":[{"id":"cd8965f2-65ab-4cf1-9d60-0ec694ab10f3","name":"Vague agency","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/69306/avatar-xLJF9U1l9BGtavo7w28q4JihbAbE3q.jpg","slug":"vague-agency","followed":false,"followsYou":false}],"actorCount":1,"message":null,"resourceType":null,"visibility":"public","startedAt":"2026-07-06T11:55:04.027Z","latestAt":"2026-07-06T11:55:04.027Z"},{"id":"019eda8e-20c5-714b-a640-fa031f93d539","type":"component.liked","target":{"type":"component","id":"cLARd15NXrXGA3GpqonB","preview":"Submenu Sidebar Nav","previewJson":null,"thumbnail":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/0365a5a1-29eb-426a-bb58-af7fe6b72ccf/5cjnn7r8","targetDeleted":false,"owned":false,"actions":null},"context":null,"actors":[{"id":"cd8965f2-65ab-4cf1-9d60-0ec694ab10f3","name":"Vague agency","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/69306/avatar-xLJF9U1l9BGtavo7w28q4JihbAbE3q.jpg","slug":"vague-agency","followed":false,"followsYou":false}],"actorCount":1,"message":null,"resourceType":"component","visibility":"public","startedAt":"2026-06-18T11:46:48.117Z","latestAt":"2026-06-18T11:46:48.117Z"},{"id":"019eda1c-e152-71cf-a2a0-35410eadc476","type":"component.created","target":{"type":"component","id":"X1iX7u9wzt9cFccaXN0j","preview":"Peek Drawer Pro","previewJson":null,"thumbnail":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/cd8965f2-65ab-4cf1-9d60-0ec694ab10f3/uj090c07","targetDeleted":false,"owned":false,"actions":null},"context":null,"actors":[{"id":"cd8965f2-65ab-4cf1-9d60-0ec694ab10f3","name":"Vague agency","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/69306/avatar-xLJF9U1l9BGtavo7w28q4JihbAbE3q.jpg","slug":"vague-agency","followed":false,"followsYou":false}],"actorCount":1,"message":null,"resourceType":"component","visibility":"public","startedAt":"2026-06-18T09:43:06.322Z","latestAt":"2026-06-18T09:43:06.322Z"},{"id":"019ed7d6-6705-774f-81c8-af9fb0d69502","type":"template.liked","target":{"type":"template","id":"61898","preview":"Nudge","previewJson":null,"thumbnail":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/templates/61898/nudge-wdAGEa9o4Syg6QuRvWUJOoY5zy7L9q","targetDeleted":false,"owned":false,"actions":null},"context":null,"actors":[{"id":"cd8965f2-65ab-4cf1-9d60-0ec694ab10f3","name":"Vague agency","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/69306/avatar-xLJF9U1l9BGtavo7w28q4JihbAbE3q.jpg","slug":"vague-agency","followed":false,"followsYou":false}],"actorCount":1,"message":null,"resourceType":"template","visibility":"public","startedAt":"2026-06-17T23:06:53.057Z","latestAt":"2026-06-17T23:06:53.057Z"}],"pagination":{"next":null,"previous":null},"totalCount":"$undefined","feedSession":"$undefined"}],"$inf$posts:cd8965f2-65ab-4cf1-9d60-0ec694ab10f3:/unified/posts/?creator=cd8965f2-65ab-4cf1-9d60-0ec694ab10f3&with=reposts":[{"data":[{"id":"01a10c95-b049-73cf-92d8-9bea26826262","title":null,"body":"

AllSense, a communication partner that makes language accessible to everyone. We built their site around the same idea, with accessible navigation, clear structure and a calm, readable design. 🔗 all-sense.com

","bodyJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"AllSense, a communication partner that makes language accessible to everyone. We built their site around the same idea, with accessible navigation, clear structure and a calm, readable design. "},{"type":"emoji","attrs":{"name":"link","emoji":"🔗"}},{"type":"text","text":" "},{"type":"text","text":"all-sense.com","marks":[{"type":"link","attrs":{"rel":"noopener noreferrer nofollow","href":"http://all-sense.com","target":"_blank"}}]}]}]},"author":{"framerUserId":"cd8965f2-65ab-4cf1-9d60-0ec694ab10f3","name":"Vague agency","slug":"vague-agency","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/69306/avatar-xLJF9U1l9BGtavo7w28q4JihbAbE3q.jpg","followed":false,"followsYou":false},"media":[],"resources":[{"id":"18041","resolved":true,"title":"AllSense","body":"

AllSense — Communication without barriers

AllSense was founded by interpreters and translators who believe communication should reach everyone. The website had to practise what they preach. We designed and built it in Framer around Universal Design: keyboard-friendly navigation with a skip-to-content link, descriptive alt text throughout, and a calm, readable layout. Five service areas, from interpreting and legal paperwork to educational travel and LIS accessibility, are organised into dedicated hub pages, with a CMS blog sharing the team's stories.

","bodyJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"AllSense — Communication without barriers","marks":[{"type":"bold"}]}]},{"type":"paragraph","content":[{"type":"text","text":"AllSense was founded by interpreters and translators who believe communication should reach everyone. The website had to practise what they preach. We designed and built it in Framer around Universal Design: keyboard-friendly navigation with a skip-to-content link, descriptive alt text throughout, and a calm, readable layout. Five service areas, from interpreting and legal paperwork to educational travel and LIS accessibility, are organised into dedicated hub pages, with a CMS blog sharing the team's stories."}]}]},"introduction":"","slug":"allsense","author":{"framerUserId":"cd8965f2-65ab-4cf1-9d60-0ec694ab10f3","name":"Vague agency","slug":"vague-agency","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/69306/avatar-xLJF9U1l9BGtavo7w28q4JihbAbE3q.jpg","followed":false,"followsYou":false},"media":[{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/cd8965f2-65ab-4cf1-9d60-0ec694ab10f3/01a10c80-1e6e-723f-b927-c246195bd704.png","metadata":{"tint":{"h":0,"s":0,"l":57},"width":1600,"height":1200}},{"type":"video","url":"https://stream.mux.com/aFQQM00tgyyotczxv5iXeFz6700DiEoxTVUKsPW8WF7hk.m3u8","metadata":{"posterUrl":"https://image.mux.com/aFQQM00tgyyotczxv5iXeFz6700DiEoxTVUKsPW8WF7hk/thumbnail.webp?time=45.762","aspectRatio":"403:230","duration":53.15}}],"post":null,"createdAt":"2026-10-05T15:01:38.259Z","updatedAt":"2026-10-05T15:01:38.259Z","publishedAt":"2026-10-05T15:01:38.256Z","featuredAt":null,"approvedAt":null,"type":"site","attributes":{"url":"https://www.all-sense.com/","categories":[{"id":"4e292c6b-a094-4031-be7b-7affa4349187","name":"Agency","slug":"agency"},{"id":"ddd39099-5b17-42e0-b333-7b7c480a114f","name":"Business","slug":"business"}],"mainCategory":null,"tags":[]}}],"contests":[],"categories":[],"tags":[],"likes":{"count":2,"liked":false},"comments":{"count":0},"reposts":{"count":0,"reposted":false,"repostId":null},"version":1,"edited":false,"editedAt":null,"createdAt":"2026-10-05T15:01:39.017Z","updatedAt":"2026-10-05T15:01:39.017Z"},{"id":"019eda7e-fc68-7352-9e17-2dfc13d9bb51","title":null,"body":"

Excited to share PeekDrawer Pro — a new Framer component for building floating drawers, bottom sheets, and peekable edge panels.

Most drawer components solve one pattern. I wanted something more flexible: a single component that could work as a classic drawer, a mobile-style bottom sheet, or a floating utility panel that stays partially visible and easy to access.

With PeekDrawer Pro you can:

- dock to any edge

- add a visible peek handle

- open with drag or tap

- choose between floating and drawer behavior

- size the panel dynamically or with custom dimensions

- use it for carts, filters, menus, support panels, and more

The goal was to make a component that feels more like a UI system than a one-off interaction.

Would love your feedback from the Framer community.

","bodyJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"Excited to share PeekDrawer Pro — a new Framer component for building floating drawers, bottom sheets, and peekable edge panels."}]},{"type":"paragraph","content":[{"type":"text","text":"Most drawer components solve one pattern. I wanted something more flexible: a single component that could work as a classic drawer, a mobile-style bottom sheet, or a floating utility panel that stays partially visible and easy to access."}]},{"type":"paragraph","content":[{"type":"text","text":"With PeekDrawer Pro you can:"}]},{"type":"paragraph","content":[{"type":"text","text":"- dock to any edge"}]},{"type":"paragraph","content":[{"type":"text","text":"- add a visible peek handle"}]},{"type":"paragraph","content":[{"type":"text","text":"- open with drag or tap"}]},{"type":"paragraph","content":[{"type":"text","text":"- choose between floating and drawer behavior"}]},{"type":"paragraph","content":[{"type":"text","text":"- size the panel dynamically or with custom dimensions"}]},{"type":"paragraph","content":[{"type":"text","text":"- use it for carts, filters, menus, support panels, and more"}]},{"type":"paragraph","content":[{"type":"text","text":"The goal was to make a component that feels more like a UI system than a one-off interaction."}]},{"type":"paragraph","content":[{"type":"text","text":"Would love your feedback from the Framer community."}]}]},"author":{"framerUserId":"cd8965f2-65ab-4cf1-9d60-0ec694ab10f3","name":"Vague agency","slug":"vague-agency","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/69306/avatar-xLJF9U1l9BGtavo7w28q4JihbAbE3q.jpg","followed":false,"followsYou":false},"media":[],"resources":[{"id":"X1iX7u9wzt9cFccaXN0j","resolved":true,"title":"Peek Drawer Pro","body":"$52","bodyJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"Peek Drawer Pro turns any layer into a polished, draggable panel","marks":[{"type":"bold"}]},{"type":"text","text":" — a floating peek that docks to any edge, or a classic slide-in drawer. You design the handle and the content; the component handles the motion, the gestures, and the responsive behavior."}]},{"type":"paragraph","content":[{"type":"text","text":"Two patterns, one component","marks":[{"type":"bold"}]}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Floating","marks":[{"type":"bold"}]},{"type":"text","text":" — a peeking handle your users tap or drag to reveal a panel. It snaps to the nearest edge, repositions freely, and can stay fixed to the screen or live inside a section."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Drawer","marks":[{"type":"bold"}]},{"type":"text","text":" — a full slide-in panel from left, right, top, or bottom, with an optional backdrop and drag-to-close."}]}]}]},{"type":"paragraph","content":[{"type":"text","text":"Bring your own design","marks":[{"type":"bold"}]}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Connect any frame or component as the handle and as the content — no restyling, no limits."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Or use the built-in pill handle for an instant, zero-setup start."}]}]}]},{"type":"paragraph","content":[{"type":"text","text":"Built to feel right","marks":[{"type":"bold"}]}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Smooth spring animations, tap or drag to open, optional attention hint."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Mobile-first: safe-area aware, body-scroll lock, buttery on touch."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Accessible: keyboard-friendly and respects Reduce Motion."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Fit-to-content or custom sizing, shadow, radius, scrim, close button, and more."}]}]}]},{"type":"paragraph","content":[{"type":"text","text":"Set up in seconds","marks":[{"type":"bold"}]}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Pick a mode, connect your handle and content — done."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"A clean "},{"type":"text","text":"Simple","marks":[{"type":"bold"}]},{"type":"text","text":" view by default, with an "},{"type":"text","text":"Advanced","marks":[{"type":"bold"}]},{"type":"text","text":" panel when you want full control."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"CMS-bindable","marks":[{"type":"bold"}]},{"type":"text","text":" settings for dynamic, data-driven panels."}]}]}]},{"type":"paragraph","content":[{"type":"text","text":"Perfect for "},{"type":"text","text":"side navigation, filters, carts, chat widgets, cookie banners, info panels, and floating CTAs.","marks":[{"type":"bold"}]}]},{"type":"paragraph","content":[{"type":"text","text":"Demo Page","marks":[{"type":"link","attrs":{"rel":"noopener noreferrer nofollow","href":"https://www.vagueagency.com/en/resources/peekdrawerpro","target":"_blank"}}]}]}]},"introduction":"Floating Panels & Drawers","slug":"peek-drawer-pro","author":{"framerUserId":"cd8965f2-65ab-4cf1-9d60-0ec694ab10f3","name":"Vague agency","slug":"vague-agency","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/69306/avatar-xLJF9U1l9BGtavo7w28q4JihbAbE3q.jpg","followed":false,"followsYou":false},"media":[{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/cd8965f2-65ab-4cf1-9d60-0ec694ab10f3/uj090c07","metadata":{"tint":{"h":0,"s":0,"l":3},"width":1600,"height":1200}}],"post":null,"createdAt":"2026-06-18T11:30:15.756Z","updatedAt":"2026-06-21T16:45:30.698Z","publishedAt":"2026-06-18T11:30:15.752Z","featuredAt":null,"approvedAt":null,"type":"component","attributes":{"url":null,"previewUrl":"https://peekdrawerpro.framer.website/","price":"19","paymentUrl":"https://vagueagency.lemonsqueezy.com/checkout/buy/a7a0b194-4f9d-410e-b41e-48420367a893?discount=0","workshop":false,"categories":[{"id":"7677fa83-43ce-41a2-a3fe-db438ec0fd33","name":"Interactive","slug":"interactive"}],"lastSaveId":"F2iCxdDsWcRIoIBIl7XJ","tags":[]}}],"contests":[],"categories":[],"tags":[],"likes":{"count":2,"liked":false},"comments":{"count":3},"reposts":{"count":0,"reposted":false,"repostId":null},"version":1,"edited":false,"editedAt":null,"createdAt":"2026-06-18T11:30:15.784Z","updatedAt":"2026-06-18T11:30:15.784Z"},{"id":"019eda1c-e108-76cc-8e8f-7b9ed7c9d545","title":null,"body":"

Excited to share PeekDrawer Pro — a new Framer component for building floating drawers, bottom sheets, and peekable edge panels.

With PeekDrawer Pro you can:

- dock to any edge

- add a visible peek handle

- open with drag or tap

- choose between floating and drawer behavior

- size the panel dynamically or with custom dimensions

- use it for carts, filters, menus, support panels, and more

The goal was to make a component that feels more like a UI system than a one-off interaction.

Would love your feedback from the Framer community.

","bodyJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"Excited to share PeekDrawer Pro — a new Framer component for building floating drawers, bottom sheets, and peekable edge panels."}]},{"type":"paragraph","content":[{"type":"text","text":"Most drawer components solve one pattern. I wanted something more flexible: a single component that could work as a classic drawer, a mobile-style bottom sheet, or a floating utility panel that stays partially visible and easy to access."}]},{"type":"paragraph","content":[{"type":"text","text":"With PeekDrawer Pro you can:"}]},{"type":"paragraph","content":[{"type":"text","text":"- dock to any edge"}]},{"type":"paragraph","content":[{"type":"text","text":"- add a visible peek handle"}]},{"type":"paragraph","content":[{"type":"text","text":"- open with drag or tap"}]},{"type":"paragraph","content":[{"type":"text","text":"- choose between floating and drawer behavior"}]},{"type":"paragraph","content":[{"type":"text","text":"- size the panel dynamically or with custom dimensions"}]},{"type":"paragraph","content":[{"type":"text","text":"- use it for carts, filters, menus, support panels, and more"}]},{"type":"paragraph","content":[{"type":"text","text":"The goal was to make a component that feels more like a UI system than a one-off interaction."}]},{"type":"paragraph","content":[{"type":"text","text":"Would love your feedback from the Framer community."}]}]},"author":{"framerUserId":"cd8965f2-65ab-4cf1-9d60-0ec694ab10f3","name":"Vague agency","slug":"vague-agency","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/69306/avatar-xLJF9U1l9BGtavo7w28q4JihbAbE3q.jpg","followed":false,"followsYou":false},"media":[],"resources":[{"id":"X1iX7u9wzt9cFccaXN0j","resolved":true,"title":"Peek Drawer Pro","body":"$53","bodyJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"Peek Drawer Pro turns any layer into a polished, draggable panel","marks":[{"type":"bold"}]},{"type":"text","text":" — a floating peek that docks to any edge, or a classic slide-in drawer. You design the handle and the content; the component handles the motion, the gestures, and the responsive behavior."}]},{"type":"paragraph","content":[{"type":"text","text":"Two patterns, one component","marks":[{"type":"bold"}]}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Floating","marks":[{"type":"bold"}]},{"type":"text","text":" — a peeking handle your users tap or drag to reveal a panel. It snaps to the nearest edge, repositions freely, and can stay fixed to the screen or live inside a section."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Drawer","marks":[{"type":"bold"}]},{"type":"text","text":" — a full slide-in panel from left, right, top, or bottom, with an optional backdrop and drag-to-close."}]}]}]},{"type":"paragraph","content":[{"type":"text","text":"Bring your own design","marks":[{"type":"bold"}]}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Connect any frame or component as the handle and as the content — no restyling, no limits."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Or use the built-in pill handle for an instant, zero-setup start."}]}]}]},{"type":"paragraph","content":[{"type":"text","text":"Built to feel right","marks":[{"type":"bold"}]}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Smooth spring animations, tap or drag to open, optional attention hint."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Mobile-first: safe-area aware, body-scroll lock, buttery on touch."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Accessible: keyboard-friendly and respects Reduce Motion."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Fit-to-content or custom sizing, shadow, radius, scrim, close button, and more."}]}]}]},{"type":"paragraph","content":[{"type":"text","text":"Set up in seconds","marks":[{"type":"bold"}]}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Pick a mode, connect your handle and content — done."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"A clean "},{"type":"text","text":"Simple","marks":[{"type":"bold"}]},{"type":"text","text":" view by default, with an "},{"type":"text","text":"Advanced","marks":[{"type":"bold"}]},{"type":"text","text":" panel when you want full control."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"CMS-bindable","marks":[{"type":"bold"}]},{"type":"text","text":" settings for dynamic, data-driven panels."}]}]}]},{"type":"paragraph","content":[{"type":"text","text":"Perfect for "},{"type":"text","text":"side navigation, filters, carts, chat widgets, cookie banners, info panels, and floating CTAs.","marks":[{"type":"bold"}]}]},{"type":"paragraph","content":[{"type":"text","text":"Demo Page","marks":[{"type":"link","attrs":{"rel":"noopener noreferrer nofollow","href":"https://www.vagueagency.com/en/resources/peekdrawerpro","target":"_blank"}}]}]}]},"introduction":"Floating Panels & Drawers","slug":"peek-drawer-pro","author":{"framerUserId":"cd8965f2-65ab-4cf1-9d60-0ec694ab10f3","name":"Vague agency","slug":"vague-agency","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/69306/avatar-xLJF9U1l9BGtavo7w28q4JihbAbE3q.jpg","followed":false,"followsYou":false},"media":[{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/cd8965f2-65ab-4cf1-9d60-0ec694ab10f3/uj090c07","metadata":{"tint":{"h":0,"s":0,"l":3},"width":1600,"height":1200}}],"post":null,"createdAt":"2026-06-18T11:30:15.756Z","updatedAt":"2026-06-21T16:45:30.698Z","publishedAt":"2026-06-18T11:30:15.752Z","featuredAt":null,"approvedAt":null,"type":"component","attributes":{"url":null,"previewUrl":"https://peekdrawerpro.framer.website/","price":"19","paymentUrl":"https://vagueagency.lemonsqueezy.com/checkout/buy/a7a0b194-4f9d-410e-b41e-48420367a893?discount=0","workshop":false,"categories":[{"id":"7677fa83-43ce-41a2-a3fe-db438ec0fd33","name":"Interactive","slug":"interactive"}],"lastSaveId":"F2iCxdDsWcRIoIBIl7XJ","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-06-18T09:43:06.248Z","updatedAt":"2026-06-21T16:45:30.708Z"}],"pagination":{"next":null,"previous":null},"totalCount":"$undefined","feedSession":"$undefined"}]}},"children":"$L54"}]