card-wheel

v0.1.0npm github

Radial gallery that fans a hand of cards on a ring. One click pulls the chosen card to the centre and the rest fall back. React, Vue and Svelte.

Hand size

Card back

Rotation

Deck

How it works

Ring layoutPetals space themselves evenly around a ring, tilted to face outward.

Centre selectA click pulls the chosen petal to the centre and dims the rest.

Two-sided cardsGive a stamp a back image — only the selected one turns to reveal it.

Installation

Usage

1
2
3
4
5
6
7
8import { CardWheel } from "card-wheel/react";
import "card-wheel/style.css";

<CardWheel
  cards={cards}
  radius={190}
  onChange={setActive}
/>1
2
3
4
5
6
7
8import { CardWheel } from "card-wheel/vue";
import "card-wheel/style.css";

<CardWheel
  :cards="cards"
  :radius="190"
  @change="onChange"
/>1
2
3
4
5
6
7
8
9import { cardWheel } from "card-wheel/svelte";
import "card-wheel/style.css";

<div
  use:cardWheel={{
    cards,
    radius: 190,
  }}
></div>