A deck of cards stacked on top of each other. Swipe (drag) or tap the buttons to advance. Tinder pattern, used everywhere from onboarding flows to product tours.
Several cards occupy the same screen space, stacked like a physical deck. Only the top one is fully visible; the cards underneath show as slightly-offset peeks. The user advances by dragging the top card off to the side, by tapping a directional button, or by swiping on touch. Perfect for onboarding sequences, recipe steps, profile cards, story format content.
All cards share the same parent with position: relative and the same size. Each card is position: absolute; inset: 0. The cards below the top are translated down + scaled slightly to peek. Pointer events on the top card track drag delta and apply transform: translate(dx, dy) rotate(dx * 0.05deg) in real time. On release, if drag distance exceeds a threshold, animate the card off-screen and bring the next one to front. If not, snap back to center.
Drag the top card sideways, or use the buttons below. The deck advances.
A two-minute tour of the things that make this product different. Swipe to begin.
Faster than the editor you used last year. We mean it.
No notifications. No nudges. Aurora gets out of your way.
Tap the button to start your workspace.
Build a swipeable card stack onboarding (Tinder-style). Parent container position:relative, fixed width 360px and aspect-ratio:3/4. Four cards inside, each position:absolute inset:0, border-radius:22px, padding:28px, big shadow. Only the top card receives pointer events. Cards behind: translate Y down by 12-24px and scale 0.96-0.92 so they peek out, with reduced opacity. Each card has different gradient background (violet, pink, cyan, amber) and onboarding content (eyebrow "Step N / 4", big italic-mix headline, paragraph). On pointerdown on the top card, capture pointer, start tracking deltaX/deltaY. On pointermove, apply transform:translate(dx, dy) rotate(dx * 0.05deg) — the rotation gives physical hand-feel. On pointerup: if |dx| > 30% of card width, animate the card off-screen with the swipe-l/swipe-r class (translate -130%/130%, rotate -22/22deg, opacity 0), then advance the deck (move it to back, reset others, bring next card forward). Otherwise snap back to center via transition. Add prev/next arrow buttons below the stack and a "1 / 4" counter. On reaching the end, loop back to start.