I Built a Haunted Journal

Key Concepts

• AI-Assisted Development: Utilizing AI tools like Anti-gravity and Cursor for code generation and troubleshooting.
• OpenRouter: An AI provider used for accessing various AI models.
• OCR (Optical Character Recognition): Technology for converting handwritten text into digital text.
• Replicate: A platform for hosting and accessing AI models, specifically IBM’s vision model in this case.
• 3JS: A JavaScript library for creating 3D graphics in the browser.
• TesseractJS: An OCR library initially attempted for handwriting recognition, but found unsuitable for messy handwriting.
• IBM Vision Model: An AI model used for image analysis and handwriting recognition, offering a cost-effective solution.
• Prompt Engineering: The process of crafting effective prompts to guide AI models towards desired outputs.
• Vibe Coding: An iterative development approach focused on achieving a desired aesthetic and feel, often resulting in less-optimized code.

Building a Haunted Journal with AI: A Detailed Breakdown

This project details the creation of an interactive “haunted journal” application, leveraging AI for code generation, handwriting recognition, and a compelling gameplay experience. The build evolved significantly from its initial concept, facing numerous challenges and ultimately resulting in a polished and engaging application.

1. Initial Concept & Planning

The project originated from a desire to recreate Tom Riddle’s diary from the Harry Potter series. The core idea involved an application where users could write into a digital journal, and an AI “ghost” would respond. The initial plan focused on three key components:

• UI (User Interface): A visually appealing interface for writing and receiving responses. This was identified as the most challenging aspect.
• Server: A backend to handle communication with the AI API (OpenRouter).
• OCR: Utilizing Optical Character Recognition to convert handwritten input into text for the AI.

The developer initially outlined high-level requirements and intended to use Google’s Anti-gravity AI code editor, alongside OpenRouter for AI access and a UI-based OCR library.

2. Development with Anti-gravity & Initial Challenges

The build commenced in Anti-gravity, leveraging AI agents to generate code. While the initial version produced a functional journal with a fading-text effect, several issues arose:

• Code Errors: The generated code contained errors, requiring manual debugging.
• Handwriting Animation Failure: Attempts to implement a smooth handwriting effect for the AI’s responses repeatedly failed, resulting in “cursed text” and complex, unmanageable code.
• API Credit Limits: The developer encountered usage limits for Gemini 3 Pro and subsequently Sonnet 45, necessitating a switch to Cursor.

A notable feature discovered within Anti-gravity was the AI agent’s ability to control the browser for self-troubleshooting. The AI also generated a unique texture used as the journal’s background.

3. Transition to Cursor & Server-Side OCR

Due to the limitations of Anti-gravity and the persistent handwriting animation issues, the project transitioned to Cursor. The developer decided to move the OCR process to the server-side to reduce UI complexity and avoid exposing API keys.

• TesseractJS Incompatibility: Initial attempts to use TesseractJS for OCR proved unsuccessful. The library is optimized for printed text and struggled with messy, angled handwriting.
• IBM Vision Model Integration: The developer discovered an IBM AI model hosted on Replicate, offering image analysis capabilities at a cost of $0.25 per million output tokens. This model successfully extracted text from handwritten input.
• Replicate Integration: Cursor was used to integrate with Replicate, enabling server-side OCR and sending the transcribed text to the AI for responses.

4. UI Enhancement & 3D Implementation

With the core functionality established, the developer focused on enhancing the UI.

• 3JS Integration: To create a more immersive experience, the developer integrated 3JS, a JavaScript library for 3D graphics. Initial results were underwhelming, but iterative refinement, including the application of the journal texture and a crease effect, yielded a visually appealing 3D scene.
• Pen Input: An attempt was made to use a stylus designed for iPads with a touchscreen PC, requiring a DIY modification with aluminum foil (which ultimately didn't work).
• Ambient Soundtrack: A soundtrack was added to enhance the atmosphere, utilizing AI-generated music tracks.
• Trellis 3D AI Model: The developer incorporated candles generated using the Trellis 3D AI model to further enrich the scene.

5. Optimization & Gameplay Integration

The final stages involved optimizing the application’s performance and adding a gameplay element.

• Performance Optimization: The “vibe coding” approach resulted in laggy and poorly organized code. Anthropic’s Claude Opus 4.5 was used to identify and fix key performance issues.
• Gameplay Development: A ghost interaction mechanic was added, allowing users to engage with the AI in a more structured way. This involved brainstorming with Claude and utilizing Cursor to implement the game’s core functionality.
• Mobile Compatibility & Refinement: The gameplay was refined for mobile devices, and prompt engineering was used to balance the experience and prevent immediate answers. An animation was added to enhance the user experience.

6. Final Product & Key Takeaways

The final application is a visually and audibly engaging haunted journal with an interactive gameplay element. The developer highlighted the project as a favorite build, emphasizing the iterative process, the challenges overcome, and the unexpected benefits of exploring different AI tools.

Notable Quote: “It only took me a couple of days to get to this point. But after I started working on the game, it took me another week to refine the gameplay, make it work well on mobile, deploy it, banner, logo, handling all of the prompt engineering so that it was well balanced and didn't just give you the answer right away.”

Data & Statistics

• IBM Vision Model Cost: $0.25 per million output tokens.
• Development Time: Several days for initial functionality, an additional week for gameplay refinement and deployment.

This project demonstrates the power of AI-assisted development, but also highlights the importance of adaptability, problem-solving, and iterative refinement in achieving a desired outcome. The journey from initial concept to final product was marked by unexpected challenges and discoveries, ultimately resulting in a unique and engaging application.