# AniMix 🌿 — Touch Grass, Photograph Real Animals & Fuse Them into AI Monster Cards!
!Image description
!Image description
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
- 🌐 Live Web Application: animix-touchgrass.vercel.app
- 🎬 GitHub Repo: Mohammad1sami/animix
---
Code
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:
- Running Hugging Face Transformers in the Browser with Transformers.js by @xenova
---
Prize Categories
- Overall Winner
- Best Use of Open-Source AI / Local Inference
Mentions
# AniMix 🌿 — Touch Grass, Photograph Real Animals & Fuse Them into AI Monster Cards! !Image description !Image description 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 - 🌐 Live Web Application: animix-touchgrass.vercel.app - 🎬 GitHub Repo: Mohammad1sami/animix --- Code 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: - Running Hugging Face Transformers in the Browser with Transformers.js by @xenova --- Prize Categories - Overall Winner - Best Use of Open-Source AI / Local Inference