Image Queue
A stack of images queued behind each other. Drag the front card away and it falls out of frame while the next steps forward — or step through with Next and Prev.
123
125 copies
Image preview
About this component
Image Queue presents a set of images as a physical stack rather than a strip. The
front card sits full size; every card behind it peeks out above by a fixed band,
shrinking and fading into the background so the depth of the queue is visible at a
glance.
Grab the front card and drag it in any direction. Let go and it keeps your momentum,
accelerates downward out of frame, and rejoins the back of the queue while the next
card springs forward. Throw it gently and it settles back into place instead. The
Next button performs the same throw without a drag; Prev pulls the last card back up
into the front, the drop played in reverse.
Nothing moves on its own — there is no autoplay, so the component never competes with
the visitor for control. It is sized entirely from its own frame, so it can be dropped
into any section at any size and will re-fit itself, and every colour, dimension and
physics value is exposed as a property control.
Key features
Drag to throw — grab the front card in any direction; release keeps your real drag momentum and lets gravity take it out of frame.
Next / Prev controls — Next fires the identical throw without a drag; Prev animates the last card back up into the front.
No autoplay — the queue only moves when the visitor moves it, so nothing fights a drag in progress.
True queue depth — each card behind peeks out by an exact band, shrinking and fading, for any card count or size.
Self-fitting layout — supports any width and height; the card box is measured from the frame and re-fits on resize.
Space reserved automatically — captions and arrows never overlap the photo, whatever size the frame is.
Any number of slides — up to 24, each with its own image and caption; the counter follows the count.
Fully themeable — background, text colour, font, aspect ratio, size, corner radius and a B&W toggle.
Tunable physics — peek distance, shrink per step, fade per step, drag tilt, throw threshold and fall speed.
Keyboard accessible — focus the component, then ← / → or Space; arrows carry proper ARIA labels.
Mobile friendly — horizontal drags throw the card while the page still scrolls vertically.
Canvas safe — drag and buttons are disabled on the Framer canvas so the component never fights the editor.
Race-proof animation — landing is driven off the fall animation completing, never a timer beside it, so no card is ever stranded off-screen.
Zero dependencies — only
framerandframer-motion, both already provided by Framer.
API reference
Component: ImageQueue (default export)
Layout: any width × any height · intrinsic 900 × 760
Content
Prop | Type | Default | Description |
|---|---|---|---|
|
| 4 placeholders | Up to 24 slides. |
|
|
| Show the caption beneath the front card. Space for it is reserved in the layout. |
|
|
| Show the |
|
|
| Where the counter sits. |
Appearance
Prop | Type | Range | Default | Description |
|---|---|---|---|---|
|
| — |
| Section background. |
|
| — |
| Counter, caption and arrow colour. |
|
| — | 13px / 0.14em | Typography for the counter and captions. |
|
| 0.4 – 2.5 |
| Card width ÷ height. |
|
| 0.2 – 1 |
| Card size as a share of the available frame. |
|
| 0 – 80 |
| Card corner radius in px. |
|
| — |
| Apply a black-and-white filter to every image. |
Stack
Prop | Type | Range | Default | Description |
|---|---|---|---|---|
|
| 0 – 0.4 |
| How far each card behind peeks out above the one in front, as a share of card height. This is what makes the queue read. |
|
| 0.5 – 1 |
| Scale multiplier per step back in the queue. |
|
| 0 – 0.5 |
| Opacity lost per step back, dissolving cards into the background. |
Interaction
Prop | Type | Range | Default | Description |
|---|---|---|---|---|
|
| 0 – 0.2 |
| Degrees of card rotation per pixel dragged. |
|
| 10 – 300 |
| Drag distance in px needed to release the card. Shorter drags spring back. |
|
| 0.4 – 3 |
| Multiplier on the drop and return animations. |
|
| — |
| Show the Next / Prev arrows. |
|
| — |
| Where the arrows sit. Bottom placements reserve layout space automatically. |
|
| 28 – 88 |
| Arrow button diameter in px. |
Keyboard
Key | Action |
|---|---|
| Throw the front card (Next) |
| Bring the last card back (Prev) |
Notes
Requires no installation —
framerandframer-motionare provided by Framer.Renders numbered placeholder cards when
slidesis empty.Prev is disabled while the tail card is still mid-air from a throw.
Drag and the arrows are inactive on the Framer canvas; both are live in Preview and on the published site.
Details
Category
Carousal
Media
Image
Views
123
Copies
125
Paste directly onto your Framer canvas.
