This is a submission for Weekend Challenge: Passion Edition
What if learning about a passion felt less like reading a list of search results—and more like exploring a universe?
That question led me to build Passionaut, an AI-powered, interactive 3D knowledge atlas that transforms almost any passion or domain into an explorable constellation of concepts, sub-disciplines, projects, techniques, and connections.
Enter a topic such as Astrophysics, Mechanical Keyboards, or Procedural Generation, and Passionaut uses Google Gemini AI to generate a structured deep dive into that subject.
The generated knowledge is not presented as another wall of text.
Instead, it becomes a fully navigable 3D constellation.
What I Built
Passionaut is an interactive 3D knowledge graph designed to answer one question:
How deep does my passion go?
A user enters any passion, interest, or domain. Google Gemini then generates a structured map of the subject, including:
- core concepts,
- sub-disciplines,
- important techniques,
- practical projects,
- useful tools,
- and meaningful relationships between them.
Passionaut converts this information into an immersive 3D constellation rendered directly in the browser.
Every node represents part of the selected domain. Connections between nodes reveal how individual ideas belong to the larger knowledge landscape.
Users can navigate the constellation, inspect dynamically scaled 3D labels, select individual nodes, and open a deep-dive panel containing more information and an importance score.
The goal was not to create another linear learning checklist.
I wanted to make curiosity spatial.
Inspiration
People rarely discover a passion in a perfectly organized sequence.
One concept leads to another. A tool introduces a technique. A historical breakthrough reveals an entire discipline. A simple question opens a path toward ten more questions.
Passions behave less like lists and more like constellations: individual points become more meaningful when we can see the connections between them.
Search engines are excellent when we already know what to ask. But when entering an unfamiliar field, the more interesting question is often:
What exists inside this world, and where could I go next?
Passionaut was built to explore that question.
By combining generative AI with a spatial interface, the application turns an abstract and potentially overwhelming subject into a concrete environment that users can navigate.
Try it in four steps
- Open the live application.
- Enter your Google Gemini API key when prompted.
- Search for a passion or domain.
- Explore the generated 3D constellation.
Good topics to try include:
- Astrophysics
- Mechanical Keyboards
- Procedural Generation
- Game Development
- Electronic Music
- Robotics
- Photography
- Artificial Intelligence
- Sustainable Architecture
Select a node to open its detail panel, then move through the graph to discover related ideas.
The application also remembers your five most recent successful searches, allowing you to return to a previously generated atlas.
Share an atlas
Passionaut supports shareable query links.
Click Copy Share Link after generating an atlas. The resulting URL contains the selected topic as a query parameter.
When another user opens the link, Passionaut automatically generates that specific atlas in real time.
For example, a shared link can point directly to an atlas for Astrophysics:
https://johnnylemonny.github.io/passionaut/?q=Astrophysics
About the API key
Passionaut follows a bring-your-own-key model.
Your Gemini API key is stored locally in your browser. The application is statically hosted and does not rely on a custom backend for storing API credentials.
A free Gemini API key can be created in https://aistudio.google.com/apikey.
Code
The complete source code is available on GitHub:
github.com/johnnylemonny/passionaut
Passionaut is open source and licensed under the MIT License.
If you find the project interesting, consider giving it a ⭐ on GitHub.
How I Built It
Passionaut is built around a pipeline that converts an unrestricted natural-language topic into structured data and then turns that data into an interactive environment.
1. Accepting an open-ended passion
The experience begins with a simple search input.
The user does not need to understand the structure of a field before exploring it. Discovering that structure is the purpose of the application.
The input can be broad, specific, technical, or creative.
2. Generating structured knowledge with Gemini
Passionaut uses Gemini 3.1 Flash-Lite through the @google/genai SDK.
Instead of asking Gemini for a conventional article, the application requests structured JSON describing the selected domain.
The generated data represents elements such as:
- sub-disciplines,
- concepts,
- techniques,
- projects,
- descriptions,
- importance values,
- and relationships.
This distinction is essential.
A rendered knowledge graph cannot be built from an unstructured paragraph alone. It needs recognizable entities and connections that can be translated into nodes and links.
Gemini provides enough flexibility to generate these structures for completely different domains without requiring a manually curated database for every possible passion.
3. Converting the response into a graph
The structured Gemini response is transformed into graph data.
Individual concepts become nodes, while relationships between concepts become links.
Importance values can influence how prominently information appears in the visualization, helping users recognize the hierarchy inside a generated atlas.
This stage connects the AI layer with the visualization layer: Gemini defines the knowledge landscape, while the graph system determines how users experience it.
4. Rendering an interactive 3D constellation
The visualization is powered by:
- Three.js
- React Three Fiber
- react-force-graph-3d
- React Spring
Together, these technologies render the generated graph as a fully navigable 3D constellation.
Users can rotate the scene, change their viewing position, inspect connections, and select nodes.
Instead of presenting knowledge as a static hierarchy, the 3D layout communicates that every domain is a network of interconnected ideas.
5. Building dynamic 3D typography
A graph becomes difficult to use if its labels are too small, frequently overlap, or are cut off.
Passionaut uses dynamically sized 3D labels that float beside their corresponding nodes.
The label scale helps communicate importance while keeping concepts identifiable throughout the scene.
This was one of the most important usability considerations because the visualization needed to remain informative rather than becoming purely decorative.
6. Creating the deep-space interface
The interface was built with:
- Next.js 16
- React 19
- Tailwind CSS v4
- Lucide Icons
- React Spring
I wanted the application to feel like a specialized instrument for navigating knowledge rather than a conventional dashboard.
The dark-space HUD, motion, suggestion chips, search history, and detailed node panel all support that direction.
The visual effects are designed to reinforce exploration without making the knowledge harder to read.
7. Synthesizing audio in the browser
Passionaut includes custom interaction sounds created with the native Web Audio API.
The application synthesizes effects such as:
- ticks when hovering,
- a D5 tone when selecting a node,
- and sweeping sounds when starting a search.
These sounds are generated directly in the browser. No external audio asset library is required.
The audio layer makes the interface feel more responsive while preserving the application’s futuristic identity.
8. Managing state and recent searches
Application state is managed with Zustand.
Local storage persistence allows Passionaut to remember the five most recent successful atlases. This gives users a quick way to move between previously explored topics without maintaining a user account.
The Gemini API key is also kept locally in the user’s browser.
9. Generating shareable links
A generated atlas can be shared using a URL query parameter.
When a recipient opens a Passionaut link containing a query, the application reads the selected topic and generates the associated atlas.
This makes the subject itself shareable without requiring a backend database to permanently store every graph.
10. Deploying as a static application
Passionaut uses the Next.js static export workflow and is deployed on GitHub Pages.
The application does not require a dedicated application server. Users provide their own Gemini API key, and the browser communicates with the Gemini API to generate the requested knowledge structure.
This architecture keeps deployment simple and makes the project easy to host as a public demonstration.
Technical Stack
Here is the complete technical stack behind Passionaut:
- Framework: Next.js 16 with App Router and static export
- UI: React 19
- Styling: Tailwind CSS v4
- Icons: Lucide Icons
- Animations: React Spring
- 3D rendering: Three.js and React Three Fiber
- Graph visualization: react-force-graph-3d
- State management: Zustand with local storage persistence
-
AI integration: Google Gemini through
@google/genai - AI model: Gemini 3.1 Flash-Lite
- Audio: Native Web Audio API
- Deployment: GitHub Pages
Interesting Challenges
Making AI output visualization-ready
Natural-language output is flexible, but a graph requires predictable structure.
The generated information must be converted into entities and relationships that the visualization can reliably interpret.
This meant treating prompt design and structured output handling as parts of the application architecture—not as an isolated AI feature.
Supporting completely different passions
Astrophysics, mechanical keyboards, music, and game development have very different vocabularies and internal structures.
Passionaut needs to create a useful constellation for each domain without assuming that every subject can be represented in exactly the same way.
Gemini provides the flexibility to interpret each passion in context while still producing data for a common graph system.
Balancing complexity and readability
A dense 3D graph can look impressive while being practically impossible to use.
The challenge was to communicate the scale and interconnectedness of a passion without letting the visualization become meaningless visual noise.
Dynamic labels, node importance, navigation, and the detail panel all help preserve the graph’s utility.
Combining information with atmosphere
Passionaut is both a knowledge tool and an interactive audiovisual experience.
WebGL, animation, and Web Audio can make the application memorable, but they should never distract users from the generated concepts.
The guiding design principle was:
Every effect should make discovery feel better without getting in the way of discovery.
Running without a custom backend
Static deployment makes Passionaut easy to host, but it also requires a different approach to API access, state persistence, search history, and sharing.
The bring-your-own-key model and browser-based storage allow the application to remain fully static while still generating new atlases on demand.
Best Use of Google AI
I am submitting Passionaut for Best Use of Google AI.
Gemini is not an optional chatbot placed beside the main application. It is the knowledge engine that creates the environment the user explores.
Gemini 3.1 Flash-Lite transforms an unrestricted topic into structured JSON containing concepts, sub-disciplines, projects, techniques, importance values, and relationships.
That output directly determines:
- which nodes appear,
- how the nodes are connected,
- which concepts receive greater visual importance,
- what appears in the deep-dive detail panel,
- and which paths of discovery are available.
Without Gemini, Passionaut would require a manually curated database for every supported domain.
With Gemini, the same visualization system can generate an atlas for subjects as different as astrophysics, mechanical keyboards, procedural generation, music, photography, and game development.
Gemini does not merely describe the universe.
Gemini helps create the universe that the user explores.
What I Learned
Building Passionaut reinforced an important idea:
AI becomes especially powerful when its output changes the interface itself.
A generated paragraph can be helpful, but generated structure can become a visualization, a simulation, a map, or an entire explorable environment.
In Passionaut, AI output is not the final presentation layer. It becomes material for the application.
I also learned that knowledge visualization is not only a rendering problem.
It requires decisions about:
- information hierarchy,
- relationships,
- visual density,
- label readability,
- interaction feedback,
- spatial navigation,
- and where the user’s attention should go first.
The strongest results came from treating AI, 3D rendering, animation, sound, and interface design as parts of one connected system.
What’s Next
There are several directions I would like to explore next:
- saving generated constellations permanently,
- exporting knowledge maps,
- comparing two related passions,
- adding alternative non-3D navigation modes,
- generating guided learning journeys,
- improving keyboard navigation and accessibility,
- expanding nodes into deeper sub-constellations,
- adding collaborative exploration,
- and allowing users to customize the depth and complexity of an atlas.
The direction I find most exciting is recursive exploration.
A user could select one concept inside a constellation and generate a completely new atlas around it. That would turn Passionaut into an almost endless journey through connected knowledge.
Final Thoughts
Passionaut began with a simple idea:
A passion is not a list. It is a universe of connected ideas.
Google Gemini provides the knowledge structure.
Three.js gives that structure a spatial form.
Web Audio adds a responsive layer of feedback.
Together, these technologies turn curiosity into something users can explore.
Top comments (0)