The Necronomicon Mirror: AI Conversion Ghost

Spooky UX, serious ROI. Extension turns passive browsing into interactive, data-driven sales. Our ghost hijacks, runs A/B test to collect preferences, then rewards with coupons for conversion.

Comment

Inspiration

How I built 👻 The Necronomicon Mirror: An AI-Driven Conversion Story

💡 Inspiration: The Power of Provocation

The primary inspiration for The Necronomicon Mirror came from two observations:

The Kiroween Theme: I wanted to move beyond a simple "spooky skin" and create a truly haunting, yet fun, interactive experience where the user's sense of control is playfully challenged—a classic "Trick or Treat" scenario.

Marketing Fatigue: Traditional e-commerce UIs are passive. What if we used provocation marketing? By having the Kiro Ghost "hijack" the purchase (e.g., "I'm taking your seat before you!") and turning the interaction into a challenge, I trigger a strong sense of FOMO (Fear of Missing Out) and control reassertion, which acts as a powerful motivator for conversion.

The project transformed from a Costume Contest entry into a Best Startup Project prototype by integrating a core hypothesis: Can playful, AI-driven interference lead to higher-value consumer data and conversion rates?

🔨 How We Built It: AI-First Architecture

I built the project using a highly strategic AI-First architecture where Kiro managed complexity and strategy, allowing me to focus on creative storytelling within the 7-day, zero-budget constraint.

Phase 1: Foundation and UX Flow (Vibe Coding)

I started by using Vibe Coding to rapidly scaffold the Chrome Extension files (manifest.json, content_script.js) and generate the initial UX flow.

The crucial pivot was establishing the Progressive Interruption model: a gentle webpage shake and an "Yes/No" invitation (A or B) to join the game. This solved the critical UX challenge of avoiding negative interruption.

Phase 2: Strategy and Data Automation (Agent Hooks)

The Agent Hook (content_classifier_hook.js) became the project's strategy engine. It automatically identifies the webpage category (e.g., Flight, Apparel) and generates the entire payload, ensuring the animation is relevant.

Crucially, the Hook generates the three-layer A/B test data:

  • Layer 1 (Provocation): Randomly selecting the high- or low-provocation text ($P_{high}$ vs. $P_{low}$).

  • Layer 2 (Negotiation): Generating the three high-value marketing questions (e.g., "Window seat or aisle seat?") used for real-time consumer preference data collection.

This automated data generation is the source of the project's high Potential Value.

Phase 3: High-Fidelity Rendering (Vibe Coding & Canvas)

I leveraged Vibe Coding to generate the universal animation engine (animation_engine.js) using the native HTML Canvas API (zero external dependencies!).

Kiro generated complex SVG and Canvas logic for the narrative animations: the Kiro Ghost flying a micro-plane, the stylish confidence show-off, the data packet flying into the "Castle" endpoint, and the dramatic coupon "reveal" from the ghost's pocket.

🚧 Challenges I Faced and Lessons Learned

  • MV3 Resource Loading Failure Challenge: The extension initially failed to fetch crucial resources like the configuration file (theme_config.json) due to strict Manifest V3 security rules.

Solution & Kiro's Role: Kiro quickly identified the necessary fix: adding the web_accessible_resources field to manifest.json.

Lesson Learned: Even simple environment configuration requires AI oversight in complex platform constraints (like Manifest V3).

  • Complex Plot Animation and State Challenge: Manually coding the "Ghost flying to option" Canvas animation and the three-question state machine was too complex and time-consuming for the timeline.

Solution & Kiro's Role: We used Vibe Coding to generate the state management and Canvas drawing logic simultaneously.

Lesson Learned: Kiro's ability to fuse complex logic (state) and complex rendering (Canvas) drastically reduced debugging time for the hybrid DOM/Canvas UI.

  • Negative UX Interference Challenge: The risk of immediate uninstalls due to aggressive, full-screen animation interrupting a user's flow.

Solution & Kiro's Role: We developed the 'Invitation-to-Play' UX model.

Lesson Learned: User consent is paramount. The aggressive animation must only be triggered after the user actively opts in (clicks "Yes, Join!"), which Kiro implemented via careful event-hijacking code.

  • Generalizing Animation Logic Challenge: Avoiding a new script for every product category (e.g., Flight, Bras) to meet the Black Friday scalability goal.

Solution & Kiro's Role: We developed the Universal Animation Engine logic.

Lesson Learned: Kiro generated code that accepts dynamic parameters (e.g., animationType: 'Consumption/Steal', mainAssetUrl: '...') rather than hardcoding logic, ensuring scalability for future marketing campaigns.

Built With

Share this project:

Updates