๐ฐ Introducing Breaking: You
What if your biggest achievement became tomorrow's headline?
Breaking: You transforms your personal stories into professionally designed newspaper front pages.
Simply:
๐ธ Upload your photo
โ๏ธ Write a short achievement or milestone
๐ค Let AI generate a unique newspaper article
๐ฐ Receive your own personalized front page
Whether you graduated, launched a startup, won a competition, landed your dream job, or achieved a personal goal, Breaking: You turns your moment into a newspaper-worthy story.
โจ Features
โข Upload your own image
โข AI-generated headlines and articles
โข Multiple premium newspaper themes
โข Personalized front page layouts
โข Download and share your newspaper
โข No design skills required
Every generation is unique, making your story feel like it belongs on the front page of a real publication.
Because some achievements deserve more than a social media post.
They deserve a headline.
Try it - https://revise-chroma-23374184.figma.site
๐ Breaking: You
"Become Tomorrow's Headline."
#BuildInPublic #AI #WebDesign #FigmaMake #Newspaper #Storytelling #ProductDesign #Startup #SideProject
0
92
Silent Bridge โ Communicate Beyond Words
Silent Bridge is an accessibility-focused web application that helps people communicate using custom visual gestures and a camera.The idea is simple: instead of forcing people to learn a communication system, the system learns how people already communicate.Users can record a gesture, assign it a phrase, save it, and later perform the same gesture to instantly display and speak the saved message.
Features
โข Real-time gesture recognition
โข Custom gesture teaching
โข Voice playback
โข Community gesture library
โข Responsive and accessible design
Built With
โข Figma Make
โข MediaPipe Hands
โข Supabase
Silent Bridge explores how thoughtful technology can remove communication barriers and create more inclusive experiences.
๐ Live Demo: https://brim-time-58435449.figma.site/
0
90
๐ ๐๐๐ถ๐น๐ ๐ฆ๐ถ๐น๐ฒ๐ป๐ ๐๐ฟ๐ถ๐ฑ๐ด๐ฒ ๐ณ๐ผ๐ฟ ๐๐ต๐ฒ #๐๐ผ๐ป๐ณ๐ถ๐ด๐ ๐ฎ๐ธ๐ฒ๐ฎ๐๐ต๐ผ๐ป
What started as a simple idea became an experiment in accessibility and human-centered design.
๐ง๐ต๐ฒ ๐ฃ๐ฟ๐ผ๐ฏ๐น๐ฒ๐บ:
Millions of people communicate through gestures every day, but most technology is built for voices, keyboards, and touchscreens.
I wanted to explore a different question:
"What if technology could learn how people already communicate?"
That's how Silent Bridge was born.
๐ ๐๐ถ๐๐ฒ ๐๐ฒ๐บ๐ผ:
https://brim-time-58435449.figma.site/
๐ ๐ฃ๐ฟ๐ผ๐ท๐ฒ๐ฐ๐ ๐๐ถ๐ด๐บ๐ฎ:
https://www.figma.com/make/iM1qFLT9aCnsIMZ1O3yGs2/Create-Prompt-Implementation?t=Z8cGLiYettIQWytm-1
๐ ๐ ๐ช๐ผ๐ฟ๐ธ๐ณ๐น๐ผ๐
1๏ธโฃ ๐ฆ๐๐ฎ๐ฟ๐๐ฒ๐ฑ ๐ถ๐ป ๐๐ถ๐ด๐บ๐ฎ ๐ ๐ฎ๐ธ๐ฒ
I designed and generated the entire experience directly in Figma Make, focusing on accessibility, simplicity, and a premium user experience.
2๏ธโฃ ๐๐๐ถ๐น๐ ๐ฎ ๐๐ฎ๐บ๐ฒ๐ฟ๐ฎ-๐๐ฎ๐๐ฒ๐ฑ ๐๐ ๐ฝ๐ฒ๐ฟ๐ถ๐ฒ๐ป๐ฐ๐ฒ
Instead of traditional inputs, I wanted users to communicate through gestures using real-time camera tracking.
3๏ธโฃ ๐๐ป๐๐ฒ๐ด๐ฟ๐ฎ๐๐ฒ๐ฑ ๐ ๐ฒ๐ฑ๐ถ๐ฎ๐ฃ๐ถ๐ฝ๐ฒ ๐๐ฎ๐ป๐ฑ๐
MediaPipe tracks hand landmarks and understands gesture positions and movement patterns.
4๏ธโฃ ๐๐๐๐๐ผ๐บ ๐ฆ๐ถ๐ด๐ป ๐ง๐ฒ๐ฎ๐ฐ๐ต๐ถ๐ป๐ด
Users can:
โข Record a gesture
โข Assign a meaning
โข Save it
The system learns and recognizes custom gestures.
5๏ธโฃ ๐๐ป๐๐ฒ๐ด๐ฟ๐ฎ๐๐ฒ๐ฑ ๐ฆ๐๐ฝ๐ฎ๐ฏ๐ฎ๐๐ฒ
Supabase stores:
โข Gesture recordings
โข Saved phrases
โข Recognition history
6๏ธโฃ ๐๐ผ๐บ๐บ๐๐ป๐ถ๐๐ ๐ฆ๐ถ๐ด๐ป ๐๐ถ๐ฏ๐ฟ๐ฎ๐ฟ๐
Users can build and share their own visual language instead of relying only on predefined gestures.
๐๐บ๐ฝ๐ผ๐ฟ๐๐ฎ๐ป๐ ๐ง๐ฒ๐๐๐ถ๐ป๐ด ๐ก๐ผ๐๐ฒ
Before testing, clear existing custom gestures from the Teach page.
For best results:
โข Open Teach Sign
โข Remove all test gestures
โข Record gesture
โข Assign phrase
โข Test recognition
๐๐๐ถ๐น๐ ๐ช๐ถ๐๐ต
โข Figma Make - [ ๐๐๐ฒ๐ป ๐ ๐ฒ๐ฑ๐ถ๐ฎ๐ฃ๐ถ๐ฝ๐ฒ ๐ฎ๐ป๐ฑ ๐ฆ๐๐ฝ๐ฎ๐ฏ๐ฎ๐๐ฒ ๐ต๐ฎ๐๐ฒ ๐ฏ๐ฒ๐ฒ๐ป ๐ฐ๐ผ๐ป๐ป๐ฒ๐ฐ๐๐ฒ๐ฑ ๐๐๐ถ๐ป๐ด ๐๐ถ๐ด๐บ๐ฎ ๐ ๐ฎ๐ธ๐ฒ ]
โข MediaPipe Hands
โข Supabase
This project is not about AI.
It's about accessibility.
It's about allowing technology to adapt to people instead of forcing people to adapt to technology.
Because every gesture has meaning.
๐ฆ๐ถ๐น๐ฒ๐ป๐ ๐๐ฟ๐ถ๐ฑ๐ด๐ฒ โ ๐๐ผ๐บ๐บ๐๐ป๐ถ๐ฐ๐ฎ๐๐ฒ ๐๐ฒ๐๐ผ๐ป๐ฑ ๐ช๐ผ๐ฟ๐ฑ๐.
#๐๐ผ๐ป๐ณ๐ถ๐ด๐ ๐ฎ๐ธ๐ฒ๐ฎ๐๐ต๐ผ๐ป #๐๐ถ๐ด๐บ๐ฎ๐ ๐ฎ๐ธ๐ฒ #๐๐ฐ๐ฐ๐ฒ๐๐๐ถ๐ฏ๐ถ๐น๐ถ๐๐ #๐ ๐ฒ๐ฑ๐ถ๐ฎ๐ฃ๐ถ๐ฝ๐ฒ #๐ฆ๐๐ฝ๐ฎ๐ฏ๐ฎ๐๐ฒ #๐๐๐ถ๐น๐ฑ๐๐ป๐ฃ๐๐ฏ๐น๐ถ๐ฐ #๐๐ฒ๐๐ถ๐ด๐ป๐๐ผ๐ฟ๐๐ผ๐ผ๐ฑ #๐๐ป๐ป๐ผ๐๐ฎ๐๐ถ๐ผ๐ป
40
88
4.2K
The Last Signal
Live Links
๐ Final Experience
https://error-imtiaj.github.io/the-last-message/
(https://error-imtiaj.github.io/the-last-message/)๐ General Prototype / Stitch Project
https://stitch.withgoogle.com/projects/14494830618225359
Project Overview
The Last Signal is an immersive cinematic storytelling experience that imagines humanity's final transmission to the universe.Instead of building a traditional website with menus, dashboards, or complex navigation, I wanted to create an emotional journey that feels more like an interactive sci-fi film.The project combines cinematic transitions, motion systems, particle effects, immersive interactions, and narrative storytelling to create an experience that feels alive rather than static.
What attracted me to The Last Signal was its emotional and visual potential. The concept immediately sparked my imagination because it combines mystery, hope, exploration, and humanity's desire to leave something meaningful behind.
Workflow and How I Used Stitch
Google Stitch was the core tool used throughout the project workflow.
Step 1: Concept Development
I started by designing a detailed creative prompt that described the complete storytelling experience, including:
Six cinematic scenes
Visual direction
Motion design requirements
Interactive behavior
Navigation structure
Transition effects
The goal was to create a premium interactive experience that felt like a science-fiction movie.
Step 2: Iteration with Stitch
Using Stitch, I generated multiple design variations of the project.
Instead of settling for the first result, I generated three different versions of the experience and compared their layouts, visual quality, animation concepts, and storytelling flow.
This rapid iteration process allowed me to explore different creative directions within minutes.
Step 3: Selecting the Best Version
After reviewing the generated concepts, I selected the strongest version based on:
Visual impact
Storytelling flow
Motion potential
Overall user experience
Consistency across all scenes
The chosen version became the foundation for the final prototype.
Step 4: Exporting to Google AI Studio
To further refine the project, I used Stitch's export functionality and exported the selected design to Google AI Studio.
This allowed me to move from a visual prototype into a fully realized implementation.
Step 5: Building the Final Experience
Inside Google AI Studio, the project was transformed into a complete Vite-based web application.
This stage was used to:
Refine animations
Improve transitions
Enhance visual polish
Fine-tune interactions
Create a production-quality experience
The result was a much more immersive and polished version of the original Stitch concept.
Step 6: Deployment
After finalizing the Vite application, I deployed the project using GitHub Pages.
The deployment process involved:
Building the production version of the application
Configuring GitHub Pages
Publishing the final experience online
This made the project publicly accessible and easy to share.
The most impressive aspect of Stitch was the speed of exploration.Instead of spending hours creating multiple design concepts manually, I could rapidly generate, compare, and iterate on different directions. The ability to quickly move from idea to interactive prototype made the workflow significantly faster and more enjoyable.
Final Thoughts
The Last Signal demonstrates how Stitch can be used not only for product interfaces but also for storytelling experiences, interactive narratives, and experimental web design.
The project showcases an end-to-end workflow, from concept generation and rapid iteration in Stitch to implementation in Google AI Studio and deployment as a live web experience.
๐ โThe Signal Continuesโ