HEXfolio

HEXfolio turns market panic into emotional 3D pets, helping beginner investors pause, spot bias, and learn before panic becomes a trade.

Comment

Inspiration

Picture it: 3 a.m. Your portfolio is red. Samsung is down, SK Hynix is down, every finance post online sounds either like doom or “buy the dip,” and your brain has opened seventeen panic tabs at once.

Most financial literacy tools assume the user is calm enough to read charts, ratios, and market terms. But beginner investors usually need help most when they are not calm at all.

I was inspired by recent volatility in South Korean tech stocks like Samsung and SK Hynix. On August 6, 2026, South Korea’s Kospi dropped about 4.6%, with SK Hynix falling around 10.4% and Samsung Electronics falling around 6.3%. Moments like this show how quickly a market move can become an emotional moment for retail investors.

So I built HEXfolio around a simple idea: before beginner investors master the market, they need to master their reactions to the market.

What it does

HEXfolio turns your stocks into emotional 3D robot pets.

If a stock drops, the pet panics before you do. If the chart climbs, it gets excited. The point is not to make investing cute for no reason. The point is to make the emotional reaction visible before it quietly becomes a trade.

In Emotion Playground, users can still see portfolio details like holdings, value, PnL, and emotion readings. But instead of only staring at red numbers, they can drag playful emotion tools like Curse, Shield, Candle, CEO, Graveyard, and Seal onto the robot.

These tools do not change the stock price. They change the emotional reaction.

For example, when panic bubbles appear around a losing stock, saying things like “SELL NOW??” or “WHY DID I BUY THIS?”, Curse lets users seal those thoughts away. The market may not change, but the user’s reaction can.

The second experience is Time Machine. Users practice with historical stock paths by choosing Buy, Hold, or Sell before the future is revealed. After each answer, HEXfolio explains the behavioral finance bias behind the moment, such as FOMO, loss aversion, anchoring, herd mentality, or panic selling.

After enough cases, users unlock Investor DNA: a shareable-style report that summarizes patterns like patience, FOMO, loss aversion, and self-awareness.

How we built it

I built HEXfolio with React, Vite, JavaScript, Three.js, custom CSS animations, Vercel, and a market data API proxy for live quote movement.

Three.js powers the emotional robot pets. React state controls mood changes, drag-and-drop tools, panic bubbles, chart reveals, and Investor DNA results.

The interface is designed to sit between a finance dashboard, a pet game, and an interactive learning exhibit. I wanted it to feel playful without losing the financial literacy goal.

Challenges we ran into

The biggest challenge was balancing finance and fun. If HEXfolio felt too serious, it became another investing dashboard. If it felt too silly, the behavioral finance lesson became weaker. I kept adjusting the design so the humor supported the learning instead of distracting from it.

Another challenge was fitting a 3D pet, portfolio stats, emotion tools, panic bubbles, and financial context into one screen without making it messy.

Live market data was also tricky because local development proxies do not behave the same way as a deployed website. I had to keep the demo stable while still reflecting real market movement.

Accomplishments that we're proud of

I’m proud that HEXfolio teaches financial literacy as behavior, not just information.

My favorite part is Curse. When panic bubbles appear around a losing stock, users can seal them away. It turns stress into something visible, interactive, and easier to process.

I’m also proud of Time Machine because users do not just read about bias. They make a decision first, then see what actually happened.

What we learned

I learned that financial literacy is not only about knowing more. It is about building better habits before emotions become decisions.

I also learned how powerful playful design can be for education. A warning like “avoid FOMO” is easy to ignore. But a stressed robot pet throwing panic bubbles makes the lesson easier to remember.

Technically, I learned how to combine React state, Three.js characters, live data, animations, and game-like UI into one cohesive web experience.

What's next for HEXfolio

Next, I want to expand Time Machine with more historical cases, add more bias patterns, improve the live market data backend, and make Investor DNA more personalized and shareable.

In the future, HEXfolio could include beginner-friendly lessons, portfolio imports, and more emotional tools that help users pause before making risky decisions.

Built With

Share this project:

Updates

Submission history