HopSpark

Transform into your magical bunny self with AI-powered designs and instant shopping lists for everyone.

Comment

🐰✨ HopSpark - Magical Bunny Cosplay Generator

Inspiration

As students passionate about both technology and creative self-expression, we've seen firsthand how intimidating cosplay can be. The barrier to entry is often too high because you need design skills, sewing expertise, hours of research, and often hundreds of dollars. We asked ourselves: What if AI could bridge the gap between imagination and execution?

HopperHacks 2026's Harry Potter theme sparked the perfect fusion of magical bunny cosplay. We chose bunnies because they symbolize creativity, transformation, and joy, and we chose magic because everyone deserves to feel a little enchanted. Cosplay is not about perfection but about possibility, and we wanted to make that possibility accessible to everyone. Our inspiration crystallized into HopSpark, an AI-powered platform that transforms a simple text description into a personalized cosplay design and a real purchasable shopping list. No sewing is required and there is no guesswork, just magic.

What it does

HopSpark is a beginner-friendly web application that analyzes your cosplay description using Groq's Llama 3.3-70B to extract colors, themes, costume pieces, and aesthetic preferences. It generates a stunning HD preview image via the Dedalus API (DALL-E 3) to show exactly what your costume could look like. The app curates a smart shopping list with real products from trusted retailers that are filtered by budget and sustainability. It connects imagination to reality because every item in your AI-generated preview is actually purchasable.

For example, a user can input a request for "a boy cosplaying as a black and white cute bunny dress with a magical staff" and the system will output an AI-generated concept art of the costume along with eight curated products like ears, dress, staff, and accessories with prices around $150 total. The interface highlights eco-friendly badges for sustainable options and provides direct links to Amazon or Etsy product pages.

How we built it

We engineered a stateless session-persistent flow where AI decisions cascade into commerce actions using a monorepo structure with separate frontend and backend directories.

  • Frontend: Built with React, Vite, and TailwindCSS to create a fast magical UI with hot reload capabilities.
  • Backend: Runs on Express and Node.js to handle API orchestration and business logic.
  • AI Reasoning: Used the Groq API with Llama 3.3-70B for natural language processing and prompt engineering.
  • Image Generation: Used the Dedalus API to access DALL-E 3 for high definition cosplay concept art.
  • Data: Curated a JSON database of over 25 mock products with metadata to handle product matching without needing live retailer APIs during the hackathon.

The architecture follows a six-step processing flow:

  1. Input: The user describes their dream cosplay.
  2. Analysis: Llama extracts structured data (colors, themes).
  3. Query Gen: AI creates optimized product search keywords.
  4. Matching: The algorithm finds items from the curated database.
  5. Prompting: Llama generates a detailed DALL-E 3 prompt.
  6. Generation: The Dedalus API renders the image alongside the shopping list.

Challenges we ran into

Prompt Engineering for Visual Consistency: Early DALL-E generations ignored key costume details. We solved this by engineering a two-stage prompt pipeline where Llama first extracts structured data and then generates the DALL-E prompt, reducing visual drift by approximately 80%.

API Rate Limits and Cost Management: DALL-E generation takes 15 to 30 seconds. We implemented loading states with magical animations to manage user expectations and added fallback placeholder images for rate-limited scenarios.

Product Matching Without Real APIs: We could not integrate live Amazon or Etsy APIs in 24 hours. We built a curated mock database with realistic cosplay items and rich metadata to prove the concept while leaving real APIs for version two.

Environment Variable Complexity: Vite requires VITE_ prefixed variables for frontend exposure while Node.js uses regular names. We documented the dual-key pattern clearly to save hours of debugging.

Base64 Image Loading Detection: React's onLoad does not fire for data URLs. We added a useEffect hook that checks for the data prefix to ensure the loading spinner hides correctly.

Accomplishments that we're proud of

  • End-to-End Flow in 24 Hours: Built a full-stack AI application with two external API integrations, responsive UI, and magical theming.
  • Real Product Links: Every shopping list item links to an actual purchasable product so there are no mock "add to cart" dead ends.
  • Image-Product Alignment: The AI-generated image is based on the shopping list items which creates a coherent vision-to-execution pipeline.
  • Social Good by Design: Ensured accessibility for those without crafting skills, inclusivity for all body types and budgets, and sustainability by highlighting eco-friendly products.
  • Beginner-Friendly Documentation: Clear README and troubleshooting guide because we believe in lifting others up.
  • Harry Potter Theme Execution: Sparkles, wand cursors, and parchment colors throughout so judges will feel the magic.

What we learned

AI Commerce Requires Trust Bridges: Users will not act on AI suggestions without transparency. We show why products were chosen and how the image was generated.

Prompt Engineering is More Important Than Raw Model Power: Llama 3.3-70B is incredibly capable, but its output quality depends entirely on prompt structure. We spent more time refining system prompts than debugging code.

Fallbacks Are Features and Not Afterthoughts: Building graceful degradation from day one made our app more robust and demo-ready. If an API fails, the user still gets value.

Design Systems Accelerate Development: TailwindCSS and predefined magical colors let us iterate on UI without CSS debt.

Social Good is Not a Checkbox but a Lens: Every technical decision was evaluated through whether it makes cosplay more accessible.

What's next for HopSpark

Short-Term: Integrate real product APIs like Amazon Affiliate and Etsy for live pricing and inventory. Add user accounts to save favorite designs and build a community gallery for public showcase of generated cosplays.

Mid-Term: Implement AR try-on via WebXR so users can see costumes in their space before buying. Create a tutorial generator for AI DIY instructions to bridge digital design to physical creation.

Long-Term: Envision a convention calendar integration to auto-schedule build timelines for Comic-Con deadlines and a thrift store finder to promote eco-friendly cosplay choices. We also plan to add an AI fabric assistant to recommend fabric types and calculate yardage.

HopSpark is not about replacing creativity but about removing the friction between imagination and execution because when you spend less time worrying about wigs and more time embodying wonder—that is when magic happens.

Built for HopperHacks 2026 by Jawad Zaman, Suraj Chaudhary, and Shahreen Zaman.

Built With

Share this project:

Updates