Docs · Mascot Assets

Quanta mascot gallery

Official Quanta images for the Quantum Circuit Visualizer. Use the centralized registry in lib/quanta-assets.ts so paths can swap to transparent PNG/WebP later without changing components.

Open BuildAsset TrackerLearn

Recommended usage

Quanta the duck, smiling and ready to help

Welcome

Home Meet Quanta card, onboarding

/assets/quanta/quanta-simple-duck.webp

Baby Quanta hatching from an egg, looking curious

Learning

First steps only: new-learner empty states and Module 1 title cards

/assets/quanta/quanta-hatching-curious.webp

Quanta hugging an egg, ready to help you think it through

Hint

Hints, tips and stuck moments (rubber-duck helper)

/assets/quanta/quanta-rubber-duck.webp

Quanta checking a watch — tick tock

Waiting

Incomplete challenges, streak reminders

/assets/quanta/quanta-tick-tock.webp

Quanta celebrating inside a trophy

Success

Achievements, lesson complete

/assets/quanta/quanta-trophy.webp

Quanta coding with quantum energy

Coding

Challenges header, Build promo

/assets/quanta/quanta-coding-power.webp

Researcher Quanta inspecting a circuit chip

Researcher

Docs, debug, technical help

/assets/quanta/quanta-researcher-chip.webp

Quanta announcing a workshop

Announcement

Events and learning announcements

/assets/quanta/quanta-workshop-announcement-1.webp

Quanta asking Did you code today?

Did you code?

Progress / streak page

/assets/quanta/quanta-did-you-code.webp

Surprised Quanta reacting to a hatching egg

Error

Parser failures, incorrect answers

/assets/quanta/quanta-hatching-surprised.webp

Quanta waiting beside an egg — nothing hatched yet

Empty state

No projects, empty lists

/assets/quanta/quanta-egg-waiting-1.webp

Quanta nervously watching an egg that hasn't hatched

Not found

404 and missing content

/assets/quanta/quanta-egg-waiting-sweat.webp

Quanta head portrait

Avatar

Compact Quanta face accents

/assets/quanta/quanta-head-blue-bg.webp

Chat with Quanta (Gemini)

Chat uses a shared Gemini key when the site is built with NEXT_PUBLIC_QUANTA_GEMINI_API_KEY; visitors can paste their own key instead, stored only in this browser and sent directly to Google. It runs on gemini-3.5-flash-lite (falling back to gemini-2.5-flash-lite if that model isn't available for the key) and keeps replies, history, and page context short to save tokens.

Design notes

  • Assets are transparent WebP files under public/assets/quanta/.
  • Prefer QuantaCard, QuantaTip, QuantaEmptyState, and QuantaAchievement over raw image tags.
  • Keep Build/editor mostly mascot-free — use Quanta only for tips, empty states, errors, or onboarding.
  • Paths go through getQuantaAssetUrl() so GitHub Pages /Quantum-Circuit-Visualizer/ base path works.
  • The 128px buddy sprite set in assets/quanta/buddy/ was ported from the Quanta browser extension. Quanta now greets you, offers tips, follows page clicks, and opens a help menu when you ask.