Fuda Cards documentation
Fuda Cards 札 — Collectible card frames for the web
Collectible card frames for images and live 3D: a true thickness, an edge, foil, stacks, wear and a binder, as two web components.
Install
npm install @johnmorrisdotca/fuda-cardsStart here
Entry points
| Import it | What it is |
|---|---|
@johnmorrisdotca/The <fuda-card> element · 1 exports | |
@johnmorrisdotca/Register both elements · 0 exports | |
@johnmorrisdotca/Live 3D in cards · 6 exports | |
@johnmorrisdotca/Collections and piles: pure helpers · 16 exports | |
@johnmorrisdotca/The <fuda-collection> element · 2 exports | |
@johnmorrisdotca/Options, materials, stacks and wear · 32 exports |
Guides
How-to
- The card elementEvery 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 stacksGive 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.
- WearDraw 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 rotationPan a tall picture, start it by itself on the card in focus, spin the whole card, and drive the turn from your own controls.
- CollectionsShow 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 pilesTurn 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 cardLet 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 CDNPut a card on a page with no build step, from jsDelivr or unpkg, or with an import map for the collection and live 3D.
- BundlersUse the card with Vite or webpack: import the element once, in code that runs in the browser, and build with nothing more to configure.
- FrameworksUse 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 iframeShow a card on a page you do not build, with an iframe of the embed page and the settings in its address.
- TypeScript and NodeThe types of every option, and the tables, the maths and the layouts that run on a server with no DOM.
Explanation
- Accessibility and themingWhat 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.
- ArchitectureHow the package is split into small modules, why a plain card loads almost nothing, and what each file in src does.