Building an Authentic Typewriter Simulator: The Story Behind Our Letter Writing Feature which is WIP.

This weekend, I fell down a rabbit hole that started with a simple question: "How can I make digital letter writing feel more authentic?"

I was working on LetterWay, a pen pal app that's been gaining traction in the pen pal community (38 people are currently on the waitlist!). The core concept is simple. But there was something missing from the letter writing experience.

The Inspiration

I stumbled across shifthappens.site - an incredible typewriter simulator that immediately transported me. The mechanical sounds, the paper movement, the way each keystroke felt intentional. It was perfect.

That's when I realized: this could add to the app's letter writing experience cause most digital penpaling apps are missing the soul of what makes letter writing special ie. the tactile, mechanical experience of putting words to paper.

The Technical Challenge

Building an authentic typewriter simulator is deceptively complex. It's not just about making it look like a typewriter - it's about making it feel like one. Credits to the shifthappens.site, I got the sounds from there, but, now how do I recreate this? The tech stack I am using for the penpal app is Next.js for the frontend along with Supabase as my database, but how did shifthappens do it in the first place? I had the inspiration but now I had to build this thing using my own tech stack. I levarged LLMs and my software engineering knowledge to build this thing (or atleast 95% of it) over the weekend.

Here are some challenges (most of which have been solved)

The Core Problems I Had to Solve:

1. Exact Strike Point Positioning: Letters needed to appear exactly where the typewriter needle strikes, not just anywhere on the page
2. Paper Movement: The paper needed to move left as you type, just like a real typewriter
3. Sound Design: Finding authentic typewriter sounds that didn't feel artificial ( Thanks to Shifthappens, I got the sounds from there.)
4. Visual Authenticity: Paper texture, proper positioning, and that satisfying mechanical feel

The trickiest part was ensuring each letter appears exactly where the typewriter needle strikes.

Paper Movement Physics

Real typewriters have a fascinating mechanical dance - the paper moves left as you type, and the carriage returns when you hit Enter.

The paper texture covers the full width and moves underneath the fixed typewriter, creating that authentic feel of paper feeding through a real machine. This is somewhat buggy but I am on it.

The Technical Stack

• Next.js with TypeScript for the UI
• Framer Motion for smooth animations
• HTML5 Audio API for sound effects
• Tailwind CSS for styling

What's Next?

I'm considering adding more authentic features to make the experience even richer:

• Different Typewriter Models: Each with unique sounds and characteristics (Royal, Underwood, IBM Selectric)
• Paper Selection: Lined, blank, or custom paper textures
• Ink Color Options: Black, blue, or even red for corrections
• Stamps and Seals: Digital versions of wax seals, postmarks, and decorative stamps
• Save/Load Drafts: So you can work on letters over multiple sessions
• Print Function: Generate PDFs that look like real typed letters
• Custom Margins: Adjustable margins for different paper sizes
• Correction Features: White-out and correction tape effects
• Envelope Designer: Create matching envelopes for your letters
• Letter Templates: Pre-designed templates for different occasions

DISCLAIMER: THIS WILL TAKE A LOT OF TIME TO BUILD - CAN'T PROMISE TO BUILD ALL OF THESE THOUGH.

But for now, I'm just enjoying the fact that digital letter writing finally feels like it should - intentional, personal, and a little bit magical.

---

Want to try the typewriter feature? Join our waitlist and be among the first to experience authentic digital letter writing.

What do you think? Should I add more typewriter features, or focus on other aspects of the pen pal experience?