Physics Card Slider with Drag Snap
A physics card slider tracks the pointer during a drag, then hands the release velocity to a spring that snaps to the nearest card. The same index input lets your app jump to a card without replaying the gesture.
Drag the cards sideways, or change the index input.
Technical Specifications
Interaction Phases
The scene keeps one Idle state. These phases are driven by its inputs and pointer events; the same values appear in the code below.
Use the scene
import { ExodeUICanvas } from 'exodeui';
// swipe-card.bexode goes in /public
export function SwipeCard() {
return (
<ExodeUICanvas
src="/animations/react-image-slider.bexode"
fit="Layout"
autoPlay
interactive
inputs={{
index: 0,
titles: 'Aurora,Canyon,Glacier,Dunes,Reef',
accent: '#f472b6',
ink: '#fdf2f8',
bg: '#100a0e',
}}
onTrigger={(name) => {
// fires: 'change'
}}
style={{ width: '100%', height: 500 }}
/>
);
}This snippet loads /animations/react-image-slider.bexode with the same inputs shown in the live stage.
Architectural Breakdown
Card rails often recompute layout on every pointer move, which drops frames during a drag.
This scene keeps drag offset and spring velocity inside the canvas runtime, so the card follows the pointer without touching page layout.
The index input is the bridge to your app: it can drive the rail from a router, a keyboard shortcut or a pagination control.
Frequently Asked Questions
Explore Related Motion Guides & Tooling
Build your next living interface today.
Design fluid physics and visual logic in ExodeUI and export directly to React, Swift, and Flutter.