DEV Community

Mohammad Sami shaikh
Mohammad Sami shaikh

Posted on

# AniMix 🌿 — Touch Grass, Photograph Real Animals & Fuse Them into AI Monster Cards!

#devchallenge #hf26challenge #ai #nextjs



This is a submission for the Hacktoberfest Open-Source AI Challenge Week 1: Touch Grass

What I Built

AniMix is an offline-first, client-side web application built to get gamers and tech enthusiasts off their screens, out of their rooms, and into the wild.

The concept is simple: Touch Grass. Photograph Animals. Fuse Monsters.

🌿 How It Works:

  1. Explore the Outdoors: Venture outside into your yard, neighborhood, or local hiking trail to search for real living fauna—dogs, cats, birds, squirrels, butterflies, or bugs.
  2. On-Device Vision AI: Snap a photo using your smartphone or laptop camera. AniMix runs an open-weight vision classification model directly inside your browser to identify the animal species instantaneously.
  3. Monster Fusion: Select any two captured animals from your deck (for instance, a Golden Retriever + a Blue Jay) and fuse them together! AniMix procedurally calculates combat stats, element affinities (Bio, Aero, Pyro, etc.), and generates a custom hybrid monster collectible card.
  4. Collect & Share: Export high-resolution holographic trading cards to build your creature deck or share them with friends via the Web Share API.

Demo

Code

https://github.com/Mohammad1sami/animix

How I Built It

AniMix is built around client-side open-source AI and modern web technologies:

  • Open-Source AI & Local Inference: Powered by Transformers.js using the open-weight MobileViT-small model (Xenova/mobilevit-small). The model runs entirely in-browser via WebAssembly and ONNX Runtime, performing vision classification without any backend API call.
  • Frontend Framework: Built with Next.js 16 (React 19) for fast server-rendered shells and optimized client hydration.
  • Styling & Aesthetics: Styled using Tailwind CSS v4 featuring dark mode, glassmorphism, and dynamic animations.
  • Card Rendering & Export: Utilizes the HTML5 Canvas API and html-to-image for generating high-DPI monster trading cards with procedurally assigned stats based on classification confidence scores.

Why Does Open Innovation Matter?

Open innovation is what made AniMix possible. Here is why open-weight models and client-side inference matter:

  1. 100% Offline Wilderness Usability: When hiking in remote parks or nature trails with zero cell signal, traditional cloud vision APIs fail completely. Open weights running locally via WebAssembly allow AniMix to function anywhere off-grid.
  2. Absolute User Privacy: Outdoor photos of surroundings stay on the user's device. No images are ever uploaded to third-party servers.
  3. Zero API Cost & Unlimited Scalability: Proprietary AI APIs charge per request. Open innovation enables unlimited real-time image scans for $0 in server costs.

🌐 Community Wisdom

When building browser-based AI applications with Transformers.js, the developer community on DEV has shared key insights on WebAssembly performance and model caching:

Prize Categories

  • Overall Winner
  • Best Use of Open-Source AI / Local Inference

Top comments (0)