Peek Drawer Pro

What is PeekDrawer Pro?

PeekDrawer Pro is a “secondary surface” component: it lets you keep helpful content (chat/help, filters, navigation, promos, mini controls) always accessible without permanently occupying page space.

• In Floating Peek, the panel stays docked to a screen edge. When closed, only a portion of the handle remains visible (the “peek”), making it discoverable. The whole group can be dragged and (when Dock = Auto) it snaps to the nearest allowed edge.

• In ClickDraw, it behaves like a standard drawer: tap/click the trigger → overlay → panel slides in with a spring animation, with optional drag-to-close.

✅ Quick Start (in 60 seconds)

A) Floating Peek

1. Drop PeekDrawer Pro onto the page.

2. Set Mode → Floating Peek

3. Connect:

   • Handle / Trigger (optional if using the internal pill)

   • Panel Content (the panel’s content)

4. Configure:

   • Dock → Auto (recommended) or Left/Right/Top/Bottom

   • Peek → how much of the handle stays visible when closed

   • Panel Size → Fit (measure content) or Custom (vw/vh)

B) ClickDraw (Drawer)

1. Set Mode → ClickDraw

2. Choose drawer.slide (left/right/top/bottom)

3. Set drawer.triggerSource → Connected or Internal Pill

4. Connect Panel Content

🧠 How it works (mental model)

Floating Peek = Panel + Handle as a single docked group

• The group is positioned with fixed x/y motion values and can be dragged.

• When closed, most of the group sits offscreen, leaving only Peek visible.

• Snapping uses spring motion; the main axis depends on dock orientation:

  • Left/Right dock → slides on X

  • Top/Bottom dock → slides on Y

• With Dock = auto, it can preview the next edge while dragging (live dock flip) and then choose the best edge on release.

Drawer = overlay + sliding panel

• Full-screen overlay/backdrop plus a panel that slides in.

• Can close via ESC and/or backdrop click.

• Optional drag-to-close gestures with threshold + velocity logic.

🎛️ PROPERTY CONTROLS OVERVIEW

1) Mode & Slots

• Mode: Floating Peek | ClickDraw

• Handle / Trigger: optional connected custom trigger/handle

• Panel Content: any content inside the panel

2) Floating Peek — Docking & Start

• Dock: Auto / Left / Right / Top / Bottom
  Auto picks the nearest allowed edge.

• Allowed (Auto): Sides (L/R) / Vertical (T/B) / All

• Start Edge: initial dock edge

• Start Open: start opened

Start Position (cross-axis)

• Start Pos: % or px

• Start % / Start px: initial position on the cross-axis

  • Dock Left/Right → controls Y

  • Dock Top/Bottom → controls X

Note: until the user drags, Start Position updates live; after the first drag, the position is treated as user-controlled.

3) Floating Peek — Handle

• Handle Source: Connected | Internal Pill

• Handle Visibility: Always / Only Closed / Only Open / Hidden

• Handle Size:

  • Custom (explicit W/H)

  • Fixed (Stable) (Auto W/H as a stable box)

  • Fit (Connected) (measures the connected node’s actual pixel size)

Connected handle helpers

• Force Fill (Connected): forces width/height: 100% on the connected node (helps Stacks/Frames fill properly)

• Fit Mode (Connected):

  • Stretch (fills the box, may distort)

  • Contain (preserves aspect ratio using the measured size)

• Contain: Allow Upscale: when OFF, contain only scales down (never enlarges)

Handle Auto Transform

• None: no rotation/mirroring

• Mirror: keeps top/bottom parallel, mirrors on right

• Inward (Smart): assumes artwork is designed for LEFT and rotates so it always points toward the panel on any dock

Handle alignment vs panel

• Handle Align: Start / Center / End

• Align Offset: visual offset only (doesn’t change layout)

4) Floating Peek — Peek, Margin, Gap

• Peek Unit: px or %

• Peek: how much of the handle remains visible when closed
  (% uses handle size along the sliding axis)

• Margin: distance from viewport edge (negative = can stick out)

• Gap: distance between handle and panel (negative = overlap)

5) Panel Size & Scroll

• Panel Size:

  • Fit: measures content (with min/max constraints)

  • Custom: uses vw/vh

• Scroll: enables internal scrolling in the panel content area

6) Behavior & Stacking

• Portal: Auto / Always / Never

  • Auto (recommended): portals outside Canvas for more reliable stacking.

• Z-Index: stacking level for portal/overlay

• Canvas: Only Handle: shows only the handle in Framer Canvas for easier placement

• Close on ESC: closes on Escape

• Lock Body Scroll: prevents page scrolling while open

7) Styling (Panel / Shadow / Header)

• Panel Style: background + radius

• Shadow: x/y/blur/spread/color

• Header & Close:

  • close button toggle + size + color

  • header padding

8) Floating — Interaction

• Tap Toggle: tap the handle to open/close

• Drag: drag the whole group

• Live Dock Preview: previews the next edge while dragging (Auto dock only)

• Hit Area: invisible padding for easier grabbing/tapping

• Elastic: drag elasticity

• Vel Thresh: velocity threshold used to decide open/close on release

• Spring K / Spring D: snap feel

9) Floating — Scrim

• Scrim Enabled: overlay when open

• Scrim Color

• Close on Scrim

10) Floating — Attention (On Load)

A small hint animation to draw attention to the handle:

• Enabled, Play in Canvas, Only When Closed

• Style: Float (cross-axis) / Nudge (toward opening direction)

• Distance (px or %), Delay, Duration, Repeats, Repeat Delay

11) ClickDraw (Drawer)

• Slide: left/right/top/bottom

• Trigger: Connected / Internal Pill (+ pill size when internal)

• Backdrop + Close on Backdrop

• Drag to Close (gestures)

• Size Mode:

  • Fit Content (Max %) or Viewport (vw/vh)

• Spring K / Spring D

🧩 Key Features at a Glance

• Always-available Floating Peek with discoverable handle peek

• Auto Dock with configurable allowed edges

• Start Position on cross-axis in % or px

• Smart handle transforms (inward/mirror) for consistent edge orientation

• Connected handle measurement + fill/contain options

• Portal + z-index for reliable layering

• Lock scroll / scrim / ESC for modal-like UX

• Drawer with drag-to-close for mobile-friendly behavior

💡 Use Cases

• Support / Chat bubble: Floating Peek on the right with 100% peek and a subtle scrim

• Filter panel: ClickDraw from the left with body scroll locked

• Promo / Newsletter: bottom drawer with Fit sizing and close on backdrop

• Mini player / controls: floating bottom with negative gap for overlap

• Quick navigation: floating left using the internal pill + icon

🎨 Suggested Presets

Preset 1 — “Chat Bubble”

• Mode: Floating Peek

• Dock: Auto | Allowed: Sides

• Start Edge: Right | Start %: 60

• Peek: 100% | Scrim: ON (low alpha)

• Tap Toggle: ON | Drag: ON | Live Dock Preview: ON

Preset 2 — “Filters Drawer”

• Mode: ClickDraw

• Slide: Left

• Trigger: Connected (a “Filters” button)

• Size: 70vw / 100vh

• Close on backdrop: ON | Lock body scroll: ON

Preset 3 — “Bottom Sheet”

• Mode: ClickDraw

• Slide: Bottom

• Size: Fit Content (Max height 90vh)

• Gestures: ON (drag-to-close)

📌 Notes & Best Practices

• If a connected handle isn’t filling correctly, keep Force Fill (Connected) ON.

• If you need to preserve the handle’s aspect ratio, use Fit Mode: Contain (and enable “Allow Upscale” only when you truly want enlargement).

• If layering conflicts happen (sticky headers, modals), use Portal: Auto/Always and set a clear Z-Index.

• In Canvas, Canvas: Only Handle makes placement and layout much easier.