How to Build a Fictional 1990s Virtual Cryptid Pet in the Browser Using Claude 3.5 Sonnet

Resurrecting the Keychain Cryptid

If you were anywhere near a school playground in 1997, you remember the absolute tyranny of the virtual pet. The constant bleeping, the desperate demands for digital food, and the tragic inevitability of returning from maths class to find your beloved digital companion had departed this mortal coil.

But why settle for raising a generic pixelated cat when you can foster an elusive beast of North American folklore?

In this guide, we are going to build a fully functional, self-contained 1990s-style virtual cryptid pet simulator in the browser. We will be using /platforms/claude to write the code, utilizing CSS grid-based pixel art and HTML5 Web Audio to replicate that piercing, nostalgic piezoceramic buzzer sound.

To see what makes these digital cryptids tick, you don’t need an expensive backend or complex databases—just a single, beautifully crafted HTML file that you can run locally or host on GitHub Pages.

The Design System: Low-Res and High-Vibe

To make this feel authentic, we need to bypass modern, smooth vector graphics. A genuine 1990s virtual pet lived on a low-resolution, monochrome, non-backlit LCD screen. The sprites weren't smooth; they were chunky, binary grids of black pixels on a slightly greenish-grey background.

Instead of loading external image files (which breaks the single-file magic), we can instruct Claude to generate CSS pixel art. By utilizing the CSS box-shadow property on a single div, we can render 16x16 pixel grids that look exactly like the LCD screens of yesteryear.

Our simulator will feature three classic cryptids, each with their own unique maintenance requirements: Mothman:* Highly sensitive to light. Needs to be fed 60-watt incandescent bulbs. If neglected, he flies into the local bridge infrastructure. Bigfoot:* Requires regular grooming to prevent extreme matting. Feeds on beef jerky and wanders off into the Pacific Northwest if bored. The Nessie:* Needs her loch water temperature constantly regulated. Feeds on local salmon and dislikes tourists.

Step 1: The UI Frame and the Classic "Lobby"

To get started, we need to frame our application. A classic virtual pet wasn't just a floating screen; it was housed in a brightly coloured, egg-shaped plastic shell with three mushy rubber buttons: Select, Decide, and Cancel.

Open up Claude 3.5 Sonnet and feed it this foundational prompt to establish our visual shell:

`text Create a single-file HTML/CSS/JS application that simulates a 1990s virtual pet. The UI should render a retro, physical, brightly-coloured plastic toy casing on the screen. Inside this casing, there should be a distinct LCD-style screen with a greenish-grey background, a subtle pixel-grid overlay, and visible retro icons lining the top and bottom of the display (e.g., Food, Light, Game, Medicine, Clean, Status).

Below the screen, render three physical-looking buttons labelled "Select", "Decide", and "Cancel".

Use purely CSS for the physical toy casing, giving it a 3D feel with shadows and highlight gradients, reminiscent of 90s toy design. `

Claude will generate a beautifully styled container. If the layout needs tweaking, or if you encounter rendering anomalies in your browser, check our troubleshooting resources at /platforms/claude/articles to get your styling back on track.

Step 2: Coding the Cryptid States and CSS Pixel Art

Once the physical shell is in place, we need to write the core logic. Traditional virtual pets are simple finite state machines. Your pet has metrics—Hunger, Boredom, Hygiene, and Energy—that deplete over time.

Let's write a prompt that handles the logic and constructs our pixel-art animations. Copy and paste this into Claude:

`text Now, let's implement the core gameplay logic and graphics. Write the JavaScript to manage the state of our cryptid pet.

1. Pet Selection: At startup, the user chooses from three cryptids: Mothman, Bigfoot, or Nessie. 2. Metrics: Implement 4 core stats (Hunger, Boredom, Hygiene, Wildness) that range from 0 to 100. Stats should degrade every 10 seconds. 3. CSS Pixel Art Sprites: For each cryptid, define two-frame walking/idle animations using a single div and CSS box-shadow grids (16x16 or 24x24). Mothman should flap his wings, Bigfoot should lumber back and forth, and Nessie should bob in the water. 4. Icons and Actions: The three physical buttons should allow the player to cycle through the UI icons (Select), perform the action (Decide), or back out of a menu (Cancel). The actions are: - Feed (Give custom food like lightbulbs for Mothman or jerky for Bigfoot) - Play (A simple mini-game where you guess which direction the cryptid will turn) - Clean (Sweep away footprints or shed hair) - Discipline (When they screech or hide unnecessarily) `

Because Claude 3.5 Sonnet excels at generating structured CSS data, it will build highly accurate, vintage-looking box-shadow strings. The resulting animations will feel beautifully clunky, capturing that stuttery, low-refresh-rate aesthetic perfectly.

Step 3: Generating Authentic Web Audio Beeps

Nothing makes a virtual pet feel more real—and more wonderfully annoying—than the audio. Real virtual pets didn't use MP3 files; they used cheap, high-pitch piezo buzzers that produced raw square waves.

We can recreate this using the browser's native Web Audio API. Ask Claude to implement the following function:

`javascript function playBeep(frequency, duration) { const audioCtx = new (window.AudioContext || window.webkitAudioContext)(); const oscillator = audioCtx.createOscillator(); const gainNode = audioCtx.createGain(); oscillator.type = 'square'; oscillator.frequency.value = frequency; gainNode.gain.setValueAtTime(0.1, audioCtx.currentTime); gainNode.gain.exponentialRampToValueAtTime(0.01, audioCtx.currentTime + duration); oscillator.connect(gainNode); gainNode.connect(audioCtx.destination); oscillator.start(); oscillator.stop(audioCtx.currentTime + duration); } `

Instruct Claude to bind this playBeep helper to every button press, with a slightly higher double-beep (e.g., 2000Hz, then 2400Hz) when the cryptid demands attention because its hunger stat has dropped below 20.

Refinement and Polishing

Once Claude delivers the unified file, open it in your browser. You will have a fully interactive, clickable, bleeping piece of 1990s cryptozoology sitting right on your screen.

If you want to customise your interface further or generate more complex behaviour loops, you can use our advanced prompt construction techniques at /prompts to design custom event schedules, like Mothman occasionally leaving mysterious crop circles on your display.

Now, go feed your Mothman. Those lightbulbs won't consume themselves, and you certainly don't want a grumpy, half-shaved Bigfoot running amok in your digital browser.