Card Stack
A deck you throw from the top. The top card follows the finger and leans the way it is pulled, a hairline of heat warming its leading edge; past the line or with enough speed it flies off and the cards behind rise one place, otherwise it springs home.
$149 once · every Pro piece
Customize
Undo brings the last card back in from the side it left.
Install
npx shadcn@latest add @obsyde/card-stackNeeds your licence key · Get Pro
Usage
Import it from where the CLI puts it, or copy the files below by hand.
import { CardStack } from '@/components/obsyde/ember/card-stack/CardStack';
export function Example() {
return (
<CardStack />
);
}
Files
What you get with Pro: plain React, TypeScript and CSS, with no dependencies.
ember/card-stack/CardStack.tsxcomponentember/card-stack/card-stack-demo.cssstylesember/card-stack/card-stack.cssstylesember/card-stack/CardStackDemo.tsxdemoember/kit2-kit/kit.tssharedember/shared/spring.tssharedember/shared/accent.tssharedember/shared/ember.cssshared
API
| Prop | Type | Default |
|---|---|---|
accentAccent | 'ember' | 'volt' | 'arc' | 'ember' |
countCards | number | 6 |
thresholdThrow distance | number | 0.4 |
depthVisible behind | number | 3 |
tiltLean | number | 14 |