Let RNG deal your fortune. An interactive three-card tarot reading using the famous RWS deck. Made with React, Tailwind CSS and Framer Motion, and hosted on GitHub Pages.
Case Study
This miniature web app was an exercise in applied and interactive RNG (random number generation). I once had a deep interest in tarot reading, and still own two artistic decks today.
A reading session is fairly simple: the client or querent—the person seeking an answer—usually has a question in mind. The reader randomly draws a fixed number of cards and arranges them in a pattern, something called a spread. A spread can be complex, sometimes going up to fifteen cards in a single reading. The querent’s “question” is answered using a combination of each drawn card’s meaning as well as the position/order it appeared in. Phew! To keep this simple, the web app combines a single-card and a three-card reading.
So our target features were as follows:
- a single card-of-the-day (COTD) reading that would only be rendered every calendar day
- a three-card reading the visitor could re-generate an unlimited number of times
- a card cannot appear twice in the same spread
- a card should not be drawn as the card-of-the-day two days in a row
The web app uses the visitor’s local storage to store the date of their last visit, as well as the last card they drew. If the visitor opens the page in the same day, their COTD will be picked from local storage. Otherwise, a fresh COTD is drawn. The three-card reading can be generated unlimited times per visit or per day, so there is no need to store the information. Instead, the three-card function compares its own draws to make sure there are no repeat cards.
Many of my past querents enjoyed the experience of touching or drawing the cards themselves and flipping them over. While you cannot physically touch the cards through the screen, you can enjoy a simulated picking and flipping experience with the use of Framer Motion animation. Each card meaning is also hidden until you tap the revealed card.
GitHub user @geraldfingburke supplied the base tarot meanings, which I’ve used as JSON data instead of using the API in case I wish to customize the meanings from my own experience. Itch.io user @luciellaes supplied the Rider-Waite Smith tarot image scans.