How to Build a Fictional 1920s Automatic Tarot Reading Machine in the Browser Using Claude 3.5 Sonnet

There is something deeply satisfying about forcing modern, hyper-intelligent silicon to pretend it is a clunky, creaking pile of brass gears and vacuum tubes from 1924. While the rest of the web is busy building identical SaaS dashboards, we are going to build something with a soul: a fictional, penny-operated 1920s Automatic Tarot Reading Machine that runs entirely in your browser.

Using Claude 3.5 Sonnet, we will generate a fully interactive retro terminal complete with brass trim, physical coin-clunking animations, flickering dial lights, and beautifully written, slightly unsettling fortunes.

Here is how to coax Claude into building a vintage mechanical masterpiece, from code-generation strategies to crafting the perfect historical aesthetic.

The Concept: The "Madame Esmeralda" Automaton

To make this simulator feel authentic, we want to avoid boring flat design. We are aiming for a virtual cabinet that feels heavy, mechanical, and slightly dusty. Here is what our browser-based machine needs: 1. A Physical Cabinet Interface: A wooden frame, ornate brass borders, a glowing crystal ball (or vacuum-tube display), and a metal slot demanding a copper penny. 2. Tactile Interaction: Clicking the slot drops a penny with a satisfying mechanical clunk, spinning a series of brass wheels. 3. SVG-Based Tarot Cards: Beautifully styled, minimalist cards that emerge from a dispenser slot using CSS transitions. 4. Eerie Edwardian Copywriting: Fortunes that read like they were written by an eccentric occultist in a smoke-filled London parlor, rather than a generic modern horoscope.

Step 1: Prompting Claude for the Visual Engine

If you ask Claude to "build a vintage tarot machine," you will likely get a generic Tailwind dashboard with a purple gradient. To get that genuine brass-and-steam look, we need to be highly specific about the materials, lighting, and rendering techniques.

When using our prompt generator or prompting Claude directly, use this structural blueprint:

`text Write a single-file HTML/CSS/JS application simulating a 1920s mechanical Tarot reading machine named "Madame Esmeralda's Electro-Spiritual Advisor".

Visual Aesthetic: - Use a deep walnut wood background for the cabinet, with ornate brass or gold filigree borders (created via inline SVG patterns or CSS box-shadows). - Include a central "viewing window" with a glass glare effect, containing three rotating mechanical reels or a glowing vacuum-tube filament. - Design a physical coin slot labeled "INSERT ONE PENNY". - The color palette must be restricted to aged parchment, tarnished brass (#b5a642), dark mahogany, and a single flickering amber glow from an indicator bulb.

Animations and Physics: - When a button representing the penny is dragged or clicked into the slot, trigger a CSS screen shake and a mechanical "clunk-whir" animation using CSS keyframes. - The Tarot cards should physically slide out of a narrow "dispenser slot" at the bottom of the cabinet, utilizing 3D CSS transforms to tilt towards the user. `

This prompt forces the LLM to think about materials, shadows, and physics, ensuring the output feels like a physical object rather than a flat web page.

Step 2: Designing the Retro Mechanical UI with CSS

To make the machine feel heavy, we rely on heavy-handed box shadows and gradients to simulate depth. What makes this machine tick is its vintage lighting.

Claude is incredibly adept at writing inline SVGs. Instead of loading external image files, ask Claude to generate ornate Victorian scrollwork directly in the code using SVG <path> elements. For example, a brass plate border can be achieved using a repeating pattern:

`xml <svg width="100%" height="20"> <pattern id="brass-scroll" width="40" height="20" patternUnits="userSpaceOnUse"> <path d="M0 10 Q 10 0, 20 10 T 40 10" fill="none" stroke="#8B7355" stroke-width="2"/> </pattern> </svg> `

Combine this with a CSS radial gradient over the entire cabinet to mimic the dim, flickering amber glow of early incandescent bulbs. Add a subtle CSS filter: contrast(110%) brightness(95%) to the main container to give it a dusty, celluloid-film quality.

Step 3: Generating the Gothic Tarot Fortunes

Generic LLM writing is polite and overly optimistic. We do not want that. "Madame Esmeralda" should feel mysterious, slightly ominous, and deeply poetic.

To achieve this, we will program Claude's generation array with structured arrays of classic Tarot archetypes (The Fool, The Tower, Death, The Moon) paired with vintage fortune text. Tell Claude to write the fortune pool using these copywriting rules:

• No Modern Vernacular: Avoid words like "energy," "positivity," "wellness," or "vibe."
• Use Melodramatic Edwardian Warning: Use phrases like "The iron gates of opportunity swing wide, yet the path is slick with rain," or "A silver-tongued stranger approaches from the east; check your waistcoat pockets."
• Acknowledge the Machinery: Occasionally reference the steam and gears of the machine itself ("The brass cylinders have aligned to reveal...").

Step 4: Adding the Mechanical Interaction Loop

Your JavaScript loop should manage three distinct states, which Claude can implement using simple DOM manipulation:

1. The Idle State: The indicator light pulse-flickers using a CSS @keyframes animation. The text display reads "Awaiting Tribute: Insert One Copper Penny."
2. The Crank State: Upon "inserting" the coin, disable all buttons. Add a CSS shaking class to the cabinet wrapper. Start a CSS transition that spins three inline SVG wheels behind the glass window.
3. The Dispense State: Translate a beautifully styled <div class="tarot-card"> upwards and forwards from the dispenser slot. Use a 3D perspective CSS property (perspective: 1000px) to make the card appear to lean forward out of the screen toward the user's face.

If you find Claude getting stuck or producing broken layouts during generation, head over to our troubleshooting guides at /platforms/claude/articles to learn how to debug canvas and coordinate rendering issues.

The Joy of the Digital Toy

Building interfaces like this reminds us that software can be whimsical. By combining the layout capabilities of modern CSS, the geometric precision of inline SVGs, and the eerie, atmospheric writing style of Claude 3.5 Sonnet, you can construct a digital artifact that feels genuinely alive.

Fire up your code editor, feed the prompt to Sonnet, and let the brass gears start turning.