How to Build a Fictional 1890s Victorian Telegraph Simulator in the Browser Using Claude 3.5 Sonnet

Let’s face it: modern user interfaces are dreadfully boring. We are trapped in a purgatory of rounded corners, flat pastel buttons, and sterile minimalism. Sometimes, as creators, we need to escape back to an era when technology was heavy, loud, and made of brass.

Enter the Victorian telegraph.

In this guide, we are going to build a fully functional, interactive 1890s telegraph simulator directly in the browser. Using Claude 3.5 Sonnet, we will generate the interactive logic, write a custom sound engine using the Web Audio API to mimic analogue electric sparks, and build an SVG-driven interface that responds dynamically to your mouse or keyboard clicks. Best of all, it will decode your tapping into real-time text using actual Morse code.

Why a Victorian Telegraph? (The Aesthetic of Clunk)

Building historical simulators isn’t just a fun weekend project—it is one of the best ways to stretch your front-end development skills. Traditional UI components are predictable. A button is clicked, an event fires, and a state changes.

An analogue simulator, however, requires you to think about physical feedback. How does a heavy brass key bounce when released? How do we synthesise the dusty, crackling sound of an electrical current passing through a copper wire in 1895? How do we handle the timing tolerances of human finger taps to distinguish between a dot and a dash?

Claude 3.5 Sonnet is remarkably adept at bridging the gap between historical physics and modern web code. If you ever hit a snag with code rendering or canvas execution, you can find solutions in our Claude troubleshooting hub.

Step 1: Prompting the Skeleton and SVG Interface

To make this feel authentic, we cannot rely on standard HTML buttons. We need a visual asset that looks like an old telegraph key mounted on a mahogany base. Since we want this entire project self-contained in a single HTML file (perfect for Claude's Artifacts window), we will ask Claude to generate a raw SVG code block that we can manipulate with CSS.

Start by opening Claude and feeding it a prompt focused on the visual skeleton. You want to instruct the model to design a top-down or isometric view of a telegraph key. Here is how to structure your prompt:

`text Create a single-file HTML application containing an interactive 1890s telegraph simulator. First, design a detailed vector-style SVG of a Victorian telegraph key. It should feature a dark mahogany wood base, polished brass arms, a black vulcanite knob, and visible copper wiring. The brass arm of the key must be a separate SVG group so we can animate its pivot rotation slightly when pressed. Make the entire interface look like a polished piece of vintage industrial machinery, complete with a parchment paper log sheet to display the transcribed Morse code. `

Claude will generate the base HTML and embed an intricate SVG. Because Claude has an excellent grasp of CSS animations, it will easily set up the transition properties so that when the user presses the spacebar (or clicks the vulcanite knob), the brass lever visibly pivots downward by a few degrees.

Step 2: Crafting the Web Audio API Spark Sound

Now for the most important part: the noise. A telegraph doesn’t beep like a modern microwave. It produces a sharp, mechanical "clack" when the brass contacts meet, accompanied by a faint electrical hum or spark buzz if the connection is slightly dirty.

To achieve this, we can instruct Claude to use the browser's native Web Audio API. We don't want to load external audio files, as they introduce latency and break the self-contained nature of the app.

Ask Claude to construct a synthesiser function with the following characteristics: 1. The Down-Stroke Clack: A rapid, low-pass-filtered burst of white noise combined with a sudden pitch drop of a triangle wave to mimic metal striking metal. 2. The Up-Stroke Release: A slightly quieter, higher-pitched metal release sound. 3. The Electric Hum (Optional but wonderful): A very low-volume 50Hz sine wave that runs only while the key is fully depressed, adding that raw, uninsulated electrical vibe.

By combining these elements, the interaction instantly transforms from a cheap web gimmick into a highly satisfying tactile experience.

Step 3: Implementing the Morse Code Decoder

How do we translate physical keypresses into words? This is where Claude's algorithmic logical reasoning shines. We need the system to track two distinct intervals: The press duration:* To determine if the input is a dot (short press) or a dash (long press). The release duration:* To determine if the user has finished a letter (a short pause) or finished an entire word (a longer pause).

In your prompt, instruct Claude to build a timing-state machine. A standard rule of thumb for Morse code is that a dash is three times longer than a dot. However, human typing is messy. Tell Claude to implement a auto-calibration or a lenient threshold system (e.g., any press under 150ms is a dot; anything over is a dash).

Include a lookup dictionary inside the JavaScript code containing the standard international Morse code alphabet:

`javascript const MORSE_DICTIONARY = { ".-": "A", "-...": "B", "-.-.": "C", "-..": "D", // ... and so on }; `

As the user taps, the current sequence of dots and dashes should render on a small "paper ribbon" on screen, updating in real time. Once the pause threshold is crossed, the simulator decodes the sequence, prints the character onto the parchment paper, and clears the buffer for the next letter.

Step 4: Adding Victorian Polish

To elevate the project from a simple tool to a piece of art, ask Claude to add a few aesthetic flourishes: Parchment Ink Fade:* When letters are printed on the virtual paper log, have them appear in a slightly imperfect typewriter font, with variations in ink opacity to mimic an ink ribbon running dry. An Analogue Galvanometer:* Include a simple SVG dial on the wood panel that deflects wildly to the right whenever the circuit is closed, showing the simulated electrical current.

If you want to style these elements further using modern visual layout techniques, you can explore designing accompanying interface assets inside Figma Weave.

The Result

Once Claude finishes rendering, you will have a beautiful, self-contained historical toy. Tap out .... . .-.. .-.. --- (HELLO) on your spacebar, and watch the brass arm dip, listen to the satisfying metallic clatter, and see the ink letters press onto the aged paper.

It is a great reminder that web development doesn’t have to be about dashboards and analytics. Sometimes, the most inspiring projects are the ones that let us play with the past.