Riffle · User guide
Everything Riffle can do.
Riffle is a deck of cards that deals itself apart as the page scrolls. Each card lifts off the top of the pile, rotates through three axes and throws clear, while the stack behind it steps up to take its place. This page covers every control, every preset and every direction, with live sections you can scroll.
6 presets · 5 deal directions · 2 scroll mappings · 37 controls
How it works
The section you place Riffle in is the scroll track. As you travel through it, Riffle turns your position into a single progress value between 0 and 1, then deals the deck across that range. Nothing runs on a timer, so scrolling back rewinds the deal exactly.
The pile rests
Cards stack with a downward shift, a step back in Z, and a little scale and tilt on each layer. Only the top few are drawn, so the pile can be any length.
Scroll drives progress
Your position in the section becomes a number from 0 to 1. Smoothing eases that number so a fast flick does not snap the deck, then the loop stops as soon as it settles.
Cards deal off the top
Each card in turn lifts, spins on Z, flips on X, throws in the chosen direction and fades. The card beneath it moves up a layer. Overlap decides whether they leave one at a time or cascade.
Quick start
01 Drop it in
Place Riffle on the page and set its width to 100% so it runs edge to edge. It has no intrinsic height, so whatever height you give the frame becomes the scroll track.
02 Give it room
Around 3000px is a good desktop starting height for six cards. Shorter sections deal faster. The maths is in Scroll modes below.
03 Load your cards
Open Cards in the properties panel and give each one an image, a title and a tag. Leave an image empty and Riffle falls back to its built-in set, so the deck never renders blank.
04 Pick a preset
Start from one of the six presets, then tune anything on top of it. A preset sets starting values, it never locks a control, and any value you set yourself wins.
Scroll modes
Two ways to map scroll position onto the deal. Leave it on Preset Default unless the section is short.
Pin
Progress runs from the moment the section’s top reaches the top of the viewport until its bottom reaches the bottom. The deck holds still on screen while the deal plays out. This is the classic pinned effect and the right choice whenever the section is taller than the viewport.
Through
Progress runs across the section’s whole journey through the viewport, from entering at the bottom to leaving at the top. Use it when the section is too short to pin, or when you want the deal to read as part of the page flow rather than a held moment.
How tall should the section be?
In Pin mode the deal happens over: section height − viewport height. A 3000px section on a 900px viewport gives 2100px of travel. Divide by your card count for the distance per card — 2100 ÷ 6 = 350px each. Below roughly 250px per card the deal starts to feel rushed, and above 600px it drags. Raise Overlap if you want more cards in the same distance.
The six presets
Every preset below is a live section — scroll it. Each one sets a starting point you can tune afterwards; nothing here is locked. These demo sections run in Through mode so they deal as they cross the viewport, which is why they are shorter than a real pinned section would be.
01 — Classic Deal
The default. Cards lift straight up, spin a little and flip back as they clear the pile.
Up · Throw 620 · Spin 22° · Flip 46° · Overlap 1.00 · Visible 5
02 — Fan Out
A looser pile with more tilt per layer and a long, fast throw to the upper right. Overlap above 1 means the next card starts moving before the one above it has gone.
Up Right · Throw 760 · Spin 40° · Flip 26° · Overlap 1.70 · Stack Tilt 5.5°
03 — Tight Stack
A dense, quiet pile with a short throw. Seven layers are drawn and Overlap below 1 keeps them leaving strictly one at a time. Good when the deck is a supporting element rather than the hero.
Up · Throw 420 · Spin 10° · Flip 24° · Overlap 0.75 · Visible 7
04 — Deep Corridor
Close perspective and a deep Z step, so the pile recedes down a tunnel instead of stacking flat. Cards flip hard toward the camera on the way out.
Up · Perspective 760 · Stack Depth 150 · Flip 64° · Stack Tilt 0° · Visible 7
05 — Toss
The most physical setting. A long throw to the upper left with heavy spin, like a card flicked across a table. Give this one a taller section so the throw has room to read.
Up Left · Throw 980 · Spin 78° · Flip 30° · Overlap 1.35
06 — Flat Slide
No 3D rotation at all. Cards slide left off a flat stack with the sheen turned off. The one to reach for when the deck sits behind text or next to other motion.
Left · Throw 700 · Spin 0° · Flip 0° · Overlap 0.90 · Sheen off
Deal direction
Where a card goes once it leaves the pile. Direction also sets which way the spin turns, so the card rotates into its travel rather than against it. Four of the five appear in the presets above; the fifth runs directly below.
Up
Straight off the top of the pile, spinning anticlockwise. The neutral choice and the one used by Classic Deal, Tight Stack and Deep Corridor.
Up Left
Diagonal, anticlockwise. Reads as a left-handed flick. Used by Toss.
Up Right
Diagonal, clockwise. Pairs well with copy sitting on the left of the section. Used by Fan Out.
Left
Almost horizontal, with a slight lift. The flattest option and the basis of Flat Slide.
Right
The mirror of Left, spinning clockwise. No preset uses it, so it is running live below on top of Classic Deal.
Control reference
Every control in the properties panel, in panel order. Most style values are optional: leave one unset and the active preset supplies it, set it and your value wins. Enum controls carry a Preset Default option that does the same thing.
Content
Preset
Six starting points: Classic Deal, Fan Out, Tight Stack, Deep Corridor, Toss and Flat Slide. Pick Custom to start from the raw defaults instead. Default: Classic Deal.
Cards
The deck itself. Each card takes an image, a title and a tag. Leave an image empty and the built-in fallback for that position is used, so the deck never renders blank. Up to 24 cards.
Title Font
Typeface, size, weight, spacing and line height for the card title. Default: 22px Semibold.
Tag Font
The same, for the small line above the title. Default: 11px Medium with wide tracking.
Scroll and fit
Scroll
Pin or Through, as described above. Default: Preset Default, which resolves to Pin.
Stage
Height of the visible stage as a percentage of the viewport. Lower it when you want the deck to sit in a band rather than fill the screen. Default: 100vh.
Perspective
Camera distance. Lower numbers exaggerate depth and make flips far more dramatic. Range 400 to 3000. Default: 1400.
Card Width
Card width in pixels. Range 160 to 620. Default: 320.
Card Height
Card height in pixels. Range 200 to 820. Default: 430.
Radius
Corner radius on every card. Range 0 to 48. Default: 18.
The stack
Visible
How many layers are drawn behind the top card. Anything deeper is hidden, so a 40-card deck costs no more to render than a 6-card one. Range 1 to 10. Default: 5.
Stack Shift
Downward offset per layer, in pixels. Default: 26.
Stack Depth
How far each layer steps back in Z. Raise it for a corridor, drop it to zero for a flat pile. Default: 60.
Stack Scale
How much smaller each layer gets. Default: 0.05.
Stack Tilt
Alternating rotation per layer, which is what makes the pile read as hand-stacked rather than machine-cut. Default: 1.6°.
The throw
Deal
Which way a card travels once it leaves the pile. Default: Preset Default, which resolves to Up.
Throw
How far it travels, in pixels. Range 100 to 1400. Default: 620.
Spin
Rotation on Z during the throw. Direction decides which way it turns. Range 0 to 120°. Default: 22°.
Flip
Rotation on X, tipping the card face away from you as it goes. Range 0 to 90°. Default: 46°.
Overlap
How much one card’s exit overlaps the next. Below 1 they leave strictly one at a time; above 1 they cascade. Range 0.4 to 2.5. Default: 1.00.
Smoothing
Easing between the raw scroll position and the deck. 0 tracks the scrollbar exactly, 0.95 glides well behind it. Default: 0.82.
Appearance
Stage Color
Background behind the deck. Default: #0A0A0C.
Card Fill
Colour showing through wherever a card image has not loaded. Default: #141418.
Card Border
Colour, style and width of the card edge. Default: 1px solid white at 9%.
Shadow
Turns the card shadow on or off. Default: on.
Shadow Style
Colour, offset, blur and spread of that shadow. Hidden while Shadow is off. Default: 0 30 70, black at 55%.
Sheen
A diagonal highlight across each card. Switched off by Flat Slide. Default: on.
Labels
Shows the title and tag over the bottom of each card. Default: on.
Progress
The hairline scroll indicator along the bottom of the stage. Default: on.
Progress Fill
Colour of the filled part of that bar. Default: white at 90%.
Progress Track
Colour of the unfilled part. Default: white at 14%.
Overlay panel
Overlay
Shows the in-canvas control panel to visitors. Default: off.
Box Position
Which corner the panel sits in: top left, top right, bottom left, bottom centre or bottom right. Menus open upward from the bottom positions. Default: Top Left.
Preset Menu
Shows the preset dropdown inside the panel. Default: on.
Deal Menu
Shows the direction dropdown. Default: on.
Motion Menu
Shows Throw, Spin, Flip and Smoothing. Default: on.
Labels Menu
Shows the labels switch. Default: on.
The overlay panel
Riffle can show a small glass control panel on top of itself so visitors can play with the deck rather than just watch it. Switch on Overlay in the properties panel, then choose a corner with Box Position. It starts collapsed behind a single header pill and is hidden on the Framer canvas, so it never gets in the way while you design.
Preset
Swaps all six values at once. Picking a preset here also clears anything a visitor has already changed.
Deal
All five directions.
Throw, Spin, Flip
The three axes of the throw, live.
Smoothing
How closely the deck tracks the scrollbar.
Labels
Card titles on or off.
The panel is deliberately short. Every knob it exposes also exists in the properties panel, but not the other way round — sizing, colours and the stack settings stay with you rather than the visitor. Use the four menu switches to strip it down further per instance.
Good to know
On the canvas
Framer’s canvas has no scroll position to read, so Riffle draws a still frame with the top card just breaking away. That is the preview, not a bug — scroll it in preview or on the published site to see the deal.
Reduced motion
If a visitor has reduced motion turned on at the system level, Riffle drops all rotation and easing and simply moves the cards. Nothing spins or flips.
Performance
There is no animation loop running in the background. Riffle measures on scroll, eases to the new position and stops. It also stops entirely while the section is off screen, and only draws the visible layers, so deck length costs nothing.
Accessibility
Cards are plain images with alt text taken from each card’s image. The overlay panel is fully keyboard reachable with proper switch, listbox and slider roles.
Images
Portrait crops at the card’s aspect ratio look best. Any image works — Riffle covers and centres it — but a landscape photo in a tall card will crop tightly to the middle.
Mobile
Card Width and Card Height are pixel values, so set them per breakpoint. Around 240 × 320 with Visible at 4 works well on phones.
Riffle · Built for Framer · Scroll-driven, no timers, no animation loop