Paper Zoo

Inspiration

The inspiration for Paper Zoo came from our childhood memories of what activities and games we found difficult, and what we could implement to ease those difficulties. Eventually, our thoughts landed on origami as something that seemed to be quite difficult to us as children, and we decided to create a solution that could inspire more children to stick with the art of origami.

Through this inspiration, Paper Zoo was formed, and this project was what we were able to come up with!

What it does

Paper Zoo is an end-to-end origami learning platform. Users select a model (from simple chicks to complex dragons), follow AI-generated tutorials, and use their camera to verify each fold.

Key features include:

AI Tutoring: A Gemini-powered chat interface that provides real-time hints and clarifies confusing steps.
Vision Verification: Using Gemini 3.1 Flash Lite's vision capabilities to analyze a user's progress and grade the final result.
The Digital Zoo: Every successful fold unlocks a custom pixel-art sprite that lives in an interactive zoo. Users can build habitats, explore community zoos, and watch their creations come to life with dynamic animations (flapping, jumping, and even dragon fireball attacks).

How we built it

We built Paper Zoo during Wildhacks 2026 using a modern, scalable stack:

Frontend: Next.js 16 with Tailwind CSS for a fun, interactive aesthetic for children.
AI Core: Gemini 3.1 Flash Lite was our main API artificial intelligence. We used it for two distinct roles:
1. Tutor: A specialized system prompt that allows the model to "talk through" SVG-based diagrams.
2. Examiner: A vision prompt that maps raw image data to a grading rubric, returning structured JSON for the frontend.
Backend & Persistence: Supabase handles authentication and the PostgreSQL database. We store custom 'World' data for the zoo, allowing users to build and save their own block-based habitats.
Graphics Engine: A custom React-based Canvas engine for the Zoo, featuring a sprite system that supports frame-based animations and "physics" (flying physics for butterflies/dragons, floating for ghosts, and jumping for frogs).

Technical Implementation: The Vision Pipeline

The most challenging technical hurdle was the Verification Pipeline. Bridging the gap between 2D camera frames and 3D paper geometry was an important aspect of our web app.

We implemented a rubric-based grading system. Instead of generic image classification, we provide Gemini with the specific verificationRubric for each model. For instance, for the Crane, the prompt evaluates:

The sharpness of the wings.
The neck-to-body angle.
The "depth" of the paper folds.

The model responds with a JSON object:

{
  "pass": true,
  "grade": 9,
  "observation": "The petal folds on the wings are exceptionally clean.",
  "suggestion": "Try pinching the beak more firmly next time."
}

Challenges we ran into

Prompt Hallucination in Vision: Early iterations of the Vision API were too generous. We had to implement a "Strict Grading" philosophy in our verify.txt prompt, forcing the model to look for specific visual landmarks (e.g., "The tail should be pointing $45^\circ$ away from the head").
SVG Serialization: Generating dynamic SVG diagrams for complex models like the Dragon required careful manipulation of path data. We had to ensure the diagrams remained legible regardless of screen size.
The "Z-Index" Zoo: Managing a canvas-based zoo with dozens of moving sprites, each with their own animation state and physics, required optimizing the requestAnimationFrame loop to maintain 60FPS on mobile.

Accomplishments that we're proud of

End-to-End Magic: Seeing a user fold a real piece of paper, take a photo, and then see a pixel-art version of that exact bird "pop" into their digital zoo is a magical UX moment.
Robust Verification: Our verification system maintains high accuracy across varying lighting conditions and backgrounds.
Performance: Despite the AI-heavy backend, the app feels quick and responsive because of Next.js streaming and local state management for the Zoo Canvas.

What we learned

UI for Children Matters: Moving from a generic bootstrap-style UI to a child-friendly, interactive design increased our fun factor, which kept us motivated during the late-night sessions.

What's next for Paper Zoo

AR Overlays: Using WebXR to project diagram lines directly onto the user's paper through their phone screen.
Social Zoos: Allowing users to visit their friends' zoos, "feed" their paper pets, and even engage in friendly "origami battles."
Community Models: A platform where origami masters can upload their own crease patterns and let the AI generate tutorials for them automatically.