Inspiration
Inspired by Hank Green’s focus app Focus Friend, we wanted to create a cuter, more interactive, and more gamified productivity tool directly inside the browser. We loved the idea of having a companion who studies alongside you, so we set out to build a witch buddy that makes staying focused feel magical.
What it does
Our project allows users to start a focus session right from their browser to earn potions that unlock customization options for their witch. Users' customized witch can also wander around on any tab they're working on, making for some good company as they study.
How we built it
We started by drafting UI concepts and sprite designs in Figma and Procreate. From there, Olivia built the Chrome extension using HTML, CSS, and JavaScript, while Leslie worked in parallel on high-fidelity character art and backgrounds. The witch animations were hand-drawn in Procreate, exported as sprites, and keyframed using JavaScript. After the core interactions were functional, we integrated the Gemini API to score website productivity and tie it into our focus logic.
Challenges we ran into
One challenge we ran into was implementing the witch running on screen. Since there are very few Chrome extensions with similar features, there was very little documentation online on how to implement the physics and functionality of the character. To fix this, we searched online on image overlaying and keyframing, and made the character a DOM element with two image layers (head and body) positioned via CSS transforms. A physics loop runs at about 60fps: applies gravity, updates position from velocity, handles floor collision, and enforces boundaries. From there, we just had a probability for whether the character would walk or not every few seconds, and the rest of the animations came easily.
Accomplishments that we're proud of
We're proud that the customization works super well and is reflected on the user's screen! This was our first time working with image overlaying and sprite animation in HTML/CSS/JS, and it came out better than we thought was possible in 24 hours. We're also proud of the fact that we were able to bring our idea to life and actually submit the hack, as we came in unsure of whether we would end up submitting something or not.
What we learned
We learned that you can do more than you think in a day, especially with people you enjoy being with. We're really proud of what we've done at Technica and hope to bring more passion projects to life!
What's next for Little Witch Alcove
In the future, we're looking to add more unique customization options and a greater number of options in general. We're also hoping to add the extension to the Chrome extension store. There are also so many features we can add to gamify the app even more, like achievements and collaboration with other witches/players!
Log in or sign up for Devpost to join the conversation.