Spooky Landing Page with MCP Integration

A haunted, animated landing page powered by MCP—fetching spooky quotes, facts, and images through dynamic API connections for a truly eerie interactive experience.

Comment 2

🎃 Inspiration

We wanted to see how far we could go using natural language + agent-driven development. The idea started as a simple web page fetching spooky quotes—but quickly evolved into a fully animated, haunted landing page with API integration through MCP (Model Context Protocol). The goal was to combine creativity with cutting-edge infrastructure and see how fast an AI-assisted workflow could ship a complete, polished app.

👻 What it does

Spooky Landing Page with MCP Integration is a fully interactive Halloween-themed page.
It fetches live spooky quotes and facts via MCP-connected APIs like ZenQuotes, decorates them with cartoon-style images, and brings everything to life with flickering animations and ghostly sound effects.

Main features:

  • Dynamic quotes & facts from REST APIs via MCP
  • 3 interactive card modes (ghost explosion, crystal ball, moon)
  • Sound effects, particle trails, and hidden easter eggs
  • Themed illustrations generated through the DiceBear API
  • Config-based API management—no hardcoding needed

🧰 How we built it

Built collaboratively with Kiro AI, completely through natural conversation.
Starting from “connect REST API via MCP,” the project evolved end-to-end in about 2.5 hours.

Key tools & technologies:

  • MCP (Model Context Protocol) for dynamic API integration
  • HTML / CSS / JavaScript for front-end interactivity
  • DiceBear API for cartoon-style avatars
  • ZenQuotes API for spooky quotes

The process used both vibe-driven prototyping (creative iteration through chat) and spec-driven development (tracked via .kiro and markdown specs).

😱 Challenges we ran into

  • Integrating multiple APIs cleanly under MCP structure
  • Ensuring consistent spooky styling across all animations
  • Managing complex CSS animations with over 15 keyframes
  • Keeping image, sound, and effect assets synchronized
  • Handling rate limits and fallback data for APIs

Despite these, using MCP hooks greatly reduced debugging time and automated connectivity checks.

🏆 Accomplishments that we're proud of

  • Built a complete, integrated app in 2.5 hours using conversational coding
  • Achieved 60% less manual testing through MCP hooks
  • Created 3 complex animated card modes in one flow (150+ lines generated instantly)
  • Established reusable styling and animation standards
  • Seamlessly switched from one API to another using only config edits

🧠 What we learned

  • Vibe + Spec is a winning combo: rapid creative exploration first, structured documentation second.
  • MCP makes REST API integration simpler, reusable, and testable.
  • AI collaboration can yield robust, production-grade outcomes faster than expected.
  • Small hooks (like “test MCP on save”) have huge quality-of-life benefits.

🚀 What's next for Spooky Landing Page with MCP Integration

  • Add user customization (themes, haunted messages, difficulty modes for interactions)
  • Extend MCP support for more APIs (e.g., horror trivia or random spooky art)
  • Bundle into a deployable template for seasonal landing pages
  • Integrate soundscapes and ambient background effects
  • Open collaboration for community-contributed card modes

Built With

Share this project:

Updates