# Fuda Cards 札 — Collectible card frames for the web

> Collectible card frames for the web: images and live 3D in a card with a true thickness, foil, stacks, wear and a binder.

Install with `npm install @johnmorrisdotca/fuda-cards`. Every page below is also an HTML page at the same address ending in .html; the documentation's home is https://johnmorrisdotca.github.io/fuda-cards/docs/. The examples on the reference pages are run when the site is built, and what they print is shown under them.

## Guides

- [Getting started](https://johnmorrisdotca.github.io/fuda-cards/docs/guides/getting-started.md): Put your first Fuda card on a page, then a stack, a worn card and a collection, in a few minutes and with no build step.
- [The card element](https://johnmorrisdotca.github.io/fuda-cards/docs/guides/card-element.md): Every attribute, property and CSS variable of the fuda-card element, with the default of each and how to size and style a card.
- [Materials and stacks](https://johnmorrisdotca.github.io/fuda-cards/docs/guides/materials-and-stacks.md): Give a card the true thickness of real card stock, plastic or metal, and draw a whole deck as one stack, with a messiness and a seed you control.
- [Wear](https://johnmorrisdotca.github.io/fuda-cards/docs/guides/wear.md): Draw a card that has been played with, from mint to damaged, with presets, a seed and one dial for each kind of wear.
- [Motion and rotation](https://johnmorrisdotca.github.io/fuda-cards/docs/guides/motion-and-spin.md): Pan a tall picture, start it by itself on the card in focus, spin the whole card, and drive the turn from your own controls.
- [Collections](https://johnmorrisdotca.github.io/fuda-cards/docs/guides/collections.md): Show a whole collection with fuda-collection, in ten displays, from a list of items you supply, with the input rules, kinds, metadata and the address.
- [Binders and piles](https://johnmorrisdotca.github.io/fuda-cards/docs/guides/binder-and-piles.md): Turn the pages of a ring or zip binder, fan a pile of cards open, take a card off it and tune every move with animate and speed.
- [Live 3D in a card](https://johnmorrisdotca.github.io/fuda-cards/docs/guides/live-3d.md): Let one card at a time turn in real 3D on a single WebGL context, with every other card a picture, using the live-3d module and your own three.js.
- [HTML and CDN](https://johnmorrisdotca.github.io/fuda-cards/docs/guides/html-and-cdn.md): Put a card on a page with no build step, from jsDelivr or unpkg, or with an import map for the collection and live 3D.
- [Bundlers](https://johnmorrisdotca.github.io/fuda-cards/docs/guides/bundlers.md): Use the card with Vite or webpack: import the element once, in code that runs in the browser, and build with nothing more to configure.
- [Frameworks](https://johnmorrisdotca.github.io/fuda-cards/docs/guides/frameworks.md): Use the card in React, Vue, Svelte and Angular, with the element imported only in the browser, and the whole page in plain HTML, a bundler or an iframe elsewhere.
- [Embed in an iframe](https://johnmorrisdotca.github.io/fuda-cards/docs/guides/embed-in-an-iframe.md): Show a card on a page you do not build, with an iframe of the embed page and the settings in its address.
- [TypeScript and Node](https://johnmorrisdotca.github.io/fuda-cards/docs/guides/typescript-and-node.md): The types of every option, and the tables, the maths and the layouts that run on a server with no DOM.
- [Accessibility and theming](https://johnmorrisdotca.github.io/fuda-cards/docs/guides/accessibility-and-theming.md): What a Fuda card and collection do for keyboards, touch, screen readers and reduced motion, what they leave to you, and every colour and size you can set.
- [Architecture](https://johnmorrisdotca.github.io/fuda-cards/docs/guides/architecture.md): How the package is split into small modules, why a plain card loads almost nothing, and what each file in src does.
- [Troubleshooting and FAQ](https://johnmorrisdotca.github.io/fuda-cards/docs/guides/troubleshooting.md): Fixes for a blank card, a picture that flashes, a collection that shows nothing, a missing zoom bar, a card that does not turn and the other things that go wrong.
- [Upgrading](https://johnmorrisdotca.github.io/fuda-cards/docs/guides/upgrading.md): What changed in each version that you must act on, from 0.1 to 0.10, and what still works from earlier versions.

## Reference

- [@johnmorrisdotca/fuda-cards/element](https://johnmorrisdotca.github.io/fuda-cards/docs/api/element/index.md): The <fuda-card> element
- [@johnmorrisdotca/fuda-cards/element/define](https://johnmorrisdotca.github.io/fuda-cards/docs/api/element-define/index.md): Register both elements
- [@johnmorrisdotca/fuda-cards/live-3d](https://johnmorrisdotca.github.io/fuda-cards/docs/api/live-3d/index.md): Live 3D in cards
- [@johnmorrisdotca/fuda-cards/collection](https://johnmorrisdotca.github.io/fuda-cards/docs/api/collection/index.md): Collections and piles: pure helpers
- [@johnmorrisdotca/fuda-cards/collection-element](https://johnmorrisdotca.github.io/fuda-cards/docs/api/collection-element/index.md): The <fuda-collection> element
- [@johnmorrisdotca/fuda-cards](https://johnmorrisdotca.github.io/fuda-cards/docs/api/main/index.md): Options, materials, stacks and wear

## Optional

- [Changelog](https://johnmorrisdotca.github.io/fuda-cards/docs/changelog.md): every release
- [Every export, in full](https://johnmorrisdotca.github.io/fuda-cards/llms-full.txt)
- [Source](https://github.com/johnmorrisdotca/fuda-cards)