Silhouette

About the Project

Inspiration

Silhouette was inspired by the Dr. Jekyll and Mr. Hyde theme of Mountain Madness 2026. We wanted to explore how modern platforms personalize experiences based on subtle user inputs. The idea was to create a seemingly helpful self-improvement platform that demonstrates how digital systems can analyze behavior and respond in unexpected ways as well as the human nature of agreeing to terms and conditions.

What We Learned

During the hackathon we learned how to:

Build session-based personalization in Flask
Construct a secure cache based data pipeline with Jason file backup
Integrate real-time text-to-speech using an external API
Design interactive storytelling through web interfaces
Create engaging user experiences under tight time constraints

How We Built It

We built Silhouette using Flask (Python) for the backend and HTML, CSS, and JavaScript for the frontend. User responses are stored in session-based JSON files, which are analyzed to generate personalized content. We integrated the ElevenLabs API to convert generated text into narrated audio, creating a cinematic and immersive experience.

Challenges

Making personalization feel unique instead of generic and figuring out how we can make speech from ElevenLabs API's more expressive and real.
Synchronizing audio playback with on-screen text (at the same time)
Building a polished experience within a 24-hour hackathon timeframe
Balancing technical development with storytelling and design

Accomplishments that we're proud of

We have working prototype that we are satisfied with and we had lots of fun developing this.
Our project was fun and targets multiple reward paths such as ElevenLabs and Mr. Hyde's path (you shall see in the presentation), and we are also qualified for beginner award since more than half of our team is first timer and will be making their first hackathone submission today.

Built With

browser-apis
cach
css
elevenlabs-api
flask
html5
jasons
javascript
python

Submitted to

Mountain Madness 2026

Created by

I worked on the backend part. I have used Flask before but it has been so long since I made full scale project with Flask. It was great learning experience. I also ElevenLabs API integration and we learned a lot about how that is done. I also worked on the README.md and file architecture design choice. And working with my teammates for the story aspect of the story made me step out my comfort zone and show my creativity. Overall this project was really enjoyable and interesting in terms of tech stack integration, and I am grateful that I got to contribute in this hackathon and this project. Thanks.

Yash Patel
ElevenLabs API Integration: Integrated the ElevenLabs text-to-speech API, selecting a voice that perfectly matched Mr. Hyde's sinister personality, enhancing the immersive narration.

Character Design: Created the Mr. Hyde character image, ensuring it aligned with the project's eerie theme and added a strong visual identity.

UI/UX Enhancements: Simplified the design by removing the building background from the title page, focusing on a cleaner and more impactful layout. Improved the page's visibility with a red color scheme and refined the overall aesthetic for a cohesive user experience.

Personalized Roasting with Grok: Enhanced the personalized roasting feature, which was originally implemented by teammate Yash. Leveraged Grok to analyze user data and generate toxic, contextually relevant roasts, adding a unique and engaging layer to the project and making interactions feel more tailored and impactful.

I am thankful to have been a part of this amazing team and happy to have made a small contribution to this project.

Japdeep Singh Sidhu
I was deeply involved in shaping the creative vision and narrative that made Silhouette. The concept of using Dr. Jekyll and Mr. Hyde as a metaphor for the duality of trustworthy-looking software hiding malicious intent was something I helped develop and pitch to the team. Especially because we wanted to portray how easy it is to be deceived and compromised. We wanted to go beyond a typical security demo and build something that actually felt like a betrayal. An app that starts beautiful and altruistic, then reveals itself to be watching you the entire time. My goal was to demonstrate how easily users, particularly students, can be compromised when they are blindly trusting websites and terms and conditions.

On the technical side, I took ownership of the cybersecurity demonstration layer, which is what makes this project genuinely educational rather than just a flashy demo. I researched and implemented the real browser fingerprinting techniques that run silently throughout the experience. This includes the Battery Status API, a real, permission-free API that exposes your device's battery level and charging state, which ad networks have historically used to track users across sites and even across incognito windows. I implemented the Canvas Fingerprinting technique, which renders invisible text to a hidden canvas element, captures the pixel data, and hashes it to produce a device-unique identifier based on GPU and driver differences. I also integrated the Geolocation AP and implemented real-time mouse tracking that updates the live audit sidebar as the user moves their cursor. All of these run simultaneously and silently, making the website genuinely unsettling. The left sidebar displaying live device data, battery with an animated fill bar, live GPS coordinates, simulated IP, screen resolution, real-time mouse position, canvas fingerprint, and browser hash was something I designed both visually and functionally, making sure it updated in real time and contributed to the feeling that the page genuinely knows too much about you. That sense of creeping surveillance was intentional.

Beyond the fingerprinting, I was responsible for helping with the front-end architecture and visual design. I built the red-on-black terminal aesthetic that defines the Hyde phase. I designed the exit lock mechanic, where the EXIT button remains greyed out until the avatar finishes speaking. The audit overlay that fades in on exit, matching the dark card aesthetic with the Jekyll/Hyde headline, findings grid, and restart button. I also styled the speech bubble with its downward-pointing tail so it visually looks like the avatar is speaking upward into it, reinforcing the character's presence on screen.

Working with the team on this project pushed me creatively and technically. I stepped outside my comfort zone in thinking about how design, storytelling, and security education can work together, and I'm proud of what we built. Can’t wait for more!

Vincent Suen
Hello! I am a third-year undergraduate at SFU Computing Science aspiring to pursue a career in Cybersecurity.

Updates

Yash Patel started this project — Mar 01, 2026 02:13 PM EST

Leave feedback in the comments!

Log in or sign up for Devpost to join the conversation.