User guide
Flick Deck
A physical card deck. Throw the top card and momentum plus tilt carry it off the stack. Let go short of the threshold and it springs back. This guide covers the gesture, every preset, every cursor style and every control on the component.
10 deck presets / 7 cursor styles / 47 controls
The gesture
Throw past the threshold
Drag the top card further than the Throw Threshold, or flick it faster than the velocity cut off, and it ejects along the vector you threw it.
Short drag springs back
Release before the threshold and a spring pulls the card home. Springiness controls how tight that return feels.
Tilt follows your grab
Grab the top half and the card rakes one way, the bottom half the other, the way a real card pivots around your thumb.
Undo flies it back
Every eject is recorded. Press Z or Backspace, or use the Undo button in the overlay, to bring the last card back.
Quick start
1. Drop it on the canvas
Find Flick Deck in your project components. Give it a size. Portrait suits most decks, landscape suits Gallery and Filmstrip.
2. Point Cards at your images
Open the Cards array and set an image, title and subtitle per card. Leave it empty and the deck falls back to five sample gradients.
3. Pick a preset
Preset is the first control. It sets a coherent starting point for stack, physics and styling, and nothing else stops working.
4. Tune whatever you want
Number and boolean controls are optional. Leave one unset to follow the preset, set it to override. Enums have a Preset Default option that does the same.
Ten deck presets
Each preset is a coherent starting point, not a lock. Pick one, then override any control on top of it. Every deck below is live, so throw them.
Classic
Straight stack below, moderate tilt. The default.
Deck
Fanned stack five deep with a high tilt.
Polaroid
Paper mat, scattered jitter, slow and heavy.
Rolodex
Vertical axis. Throws up and down, no tilt.
Snap
Short throw, stiff spring, minimal stack.
Loose
Free 2D axis, floaty physics, long travel.
Fan
Six card fan with a wide spread angle.
Gallery
Sideways stack, no tilt, clean corners.
Chaos
Free axis, heavy jitter, wild tilt.
Filmstrip
Stacks upward, dark mat, captions off.
Seven cursor styles
The component replaces the pointer over the card area with a labelled cursor. Hover each deck below to see its style. Set the wording with Cursor Label, or switch the whole thing off with Drag Cursor.
Liquid Glass
Frosted bead that refracts the card beneath it.
Chrome
Polished metal with a conic gradient sweep.
Solid
Opaque pill with a dark label. Reads on any image.
Outline
Hairline ring with an almost invisible fill.
Invert
Inverts the artwork under it with a difference blend.
Dot
Small precise bead with the label alongside.
Arrows
Chevrons that follow the current throw axis.
Every control
Numbers and booleans are optional. Unset means follow the preset, set means override. Enums carry a Preset Default option that does the same thing.
Deck
Preset
Enum
Custom plus the ten presets. Sets the starting values for stack, physics and styling, and locks nothing.
Cards
Array
An image, title and subtitle per card. Leave it empty and the deck falls back to five sample gradients.
Loop
Boolean
Recycle the deck endlessly. Switch it off to reach the empty state after the last card.
Empty Label
String
Wording on the empty state, above the reset button.
Motion
Axis
Enum
Horizontal, Vertical or Free. Free lets a card leave in any direction, including diagonally.
Throw Threshold
Number, px
How far you must drag before release commits. A fast enough flick commits regardless of distance.
Tilt
Number, deg
Maximum rotation as the card travels. Zero keeps it flat, which is what Gallery and Rolodex use.
Physics
Eject Speed
Number
How fast a committed card leaves the frame.
Eject Travel
Number
How far past the frame it flies, as a multiple of the longest edge.
Springiness
Number
How tight the return feels when a drag falls short of the threshold.
Stack
Stack
Enum
Where the cards behind sit: Below, Above, Right, Left, Fan or Centred.
Depth
Number
How many cards are visible behind the top one.
Offset
Number, px
How far each card behind peeks out. The height lost to scaling is added back, so the peek is always exactly this.
Scale Falloff
Number
How much smaller each card behind gets.
Fan Angle
Number, deg
Spread per card. Only appears when Stack is set to Fan.
Jitter
Number, deg
Random rotation per card, seeded from its position in the deck so it never reshuffles on rerender.
Card
Corner Radius
Number, px
Rounding on the card and its mat.
Mat Width
Number, px
Border of mat around the image, as on a Polaroid or a film frame.
Mat
Color
Colour of that mat.
Backdrop
Color
Fill behind the deck. Fully transparent by default, so the deck sits on your page rather than in a box.
Shadow
Boolean
Drop shadow under every card.
Captions
Boolean
Show the title and subtitle over the bottom of each card.
Title Font, Caption Font
Font
Typography for the caption block.
Clip Cards
Boolean
Off by default, so a thrown card keeps travelling past the component bounds. Switch it on to cut the card at the edge.
Cursor
Drag Cursor
Boolean
Replace the pointer over the card area with a labelled cursor.
Cursor Style
Enum
Liquid Glass, Chrome, Solid, Outline, Invert, Dot or Arrows.
Cursor Label
String
The word on the cursor. Drag by default.
Overlay panel
Overlay
Boolean
Show the in canvas control panel to visitors. Off by default.
Box Position
Enum
Which corner the panel sits in. Five positions.
Preset, Actions, Motion Menu
Boolean
On by default. The preset picker, undo and reset, and axis, tilt and threshold.
Upload, Physics, Stack, Style, Color, Toggle Menu
Boolean
Off by default so the panel opens small. Switch on whichever groups your visitors need.
Input
Keyboard
Boolean
Arrow keys throw the top card, Z and Backspace undo. The deck becomes focusable.
Idle Hint
Boolean
Nudge the top card periodically when nothing has happened, to signal that it is draggable. Pauses when off screen.
Events
On Eject Left, Right, Up, Down
Event
Fires once the card has left, with the direction it went. Wire these up in the prototype panel.
On Deck Empty
Event
Fires when the last card leaves and Loop is off.
Good to know
Presets never lock anything
A preset sets starting values. Every control keeps working on top of it, so you can pick Polaroid and still change the tilt.
Unset means follow the preset
Optional controls you have not touched inherit from the preset. Setting one pins it until you clear it again.
Cards fly outside the frame
Clip Cards is off by default, so leave room around the component or switch clipping on.
Reduced motion is respected
Visitors who ask for less motion get the same behaviour with the fling collapsed to a cut and the cursor lag removed.
Static rendering is safe
On the Framer canvas and in exports the deck draws its resting stack, with no animation, overlay or custom cursor.
Touch and pointer
Dragging works on touch. The custom cursor is mouse only, since there is no pointer to replace on a phone.
Flick Deck / user guide