-
Spirit Animal Quiz Website Homepage
-
Fox Spirit Animal
-
Bat Spirit Animal
Inspiration
Most online personality quizzes feel incredibly binary and rushed. I wanted to build something deeper. I have always been fascinated by Jungian archetypes and shamanic traditions, where animals serve as a mirror to our subconscious. I wanted to create a serene, beautifully designed digital sanctuary where people could pause, self-reflect, and connect with their inner nature through an interactive matrix of over 60 totems.
What it does
Spirit Animal Quiz is an immersive personality assessment tool. By answering 21 multi-dimensional questions covering habitats, natural elements, and emotional processing, users are matched with a specific soul totem. Instead of a shallow result, the algorithm categorizes guides into four distinct Elemental Quadrants (Earth, Air, Water, Fire/Spirit) and bridges the results with Western and Chinese zodiac systems. Users can also search through a dynamic database of 60+ animals to learn about their symbolic meanings.
How I built it
To make the site load instantaneously and feel incredibly lightweight, I deliberately skipped heavy frameworks and built everything from scratch using standard files like index.html.
UI/UX: Crafted entirely with responsive CSS3, utilizing custom properties for a cohesive color palette (ocean deeps, warm sands, and soft skies).
The Engine: Wrote a custom tag-matching algorithm in Vanilla JavaScript. Each quiz option injects specific behavioral tags into an array, which is then scored against the animal database.
Semantics: Hand-coded dense JSON-LD architecture for FAQ schemas, video object integration, and item list grids to make the spiritual realm fully readable by search engine crawlers.
Challenges I ran into
The trickiest part was maintaining a 60fps rendering speed while filtering a large DOM tree during live search. Originally, typing fast in the animal finder caused minor UI stuttering. I solved this by optimizing the display-toggle logic and injecting a dynamic "no results" layout fallback directly into the grid container. Mathematically balancing the archetype weights was another hurdle. I needed to ensure that generic traits didn't drown out highly specific user choices. The scoring algorithm follows a precise intersection model:$$Score = \sum (SelectedTags \cap AnimalTags) + 3 \times \delta_{NameMatch}$$I ended up self-testing the 21 questions hundreds of times late at night just to fine-tune the calibration.
Accomplishments that I'm proud of
I am thrilled with how seamlessly the site handles psychological projection theory. By referencing the cognitive projection model of Dr. Shen Heyong, the platform reframes "spirit animals" from internet memes into genuine tools for identifying one's shadow self and hidden potential. On top of that, keeping the codebase completely native yielded near-perfect Lighthouse performance scores.
What I learned
This project forced me to maximize what Vanilla JS and modern CSS can achieve without the crutch of modern build tools. I also learned a massive amount about structured data deployment and behavioral algorithmic design. It proved to me that you don't need a bloated tech stack to build a highly engaging, meaningful web application.
What's next for Spirit Animal Quiz
Right now, index.html hosts the primary universal test. Next, I am rolling out individual, highly granular sub-quizzes specifically for popular totems like the Snake, Wolf, Cat, and Owl. Down the line, I also hope to integrate subtle WebGL background shaders to make the moment your soul totem is revealed feel truly magical and visually stunning.
Log in or sign up for Devpost to join the conversation.