Contra - A professional network for the jobs and skills of the futureDiscover

Standout projects

Standout projects

More projects we love that are making waves across the web
Cover image for 🛰️ I just shipped Remora
🛰️ I just shipped Remora for the Figma Config Makeathon "a space debris cleanup game", built entirely in Figma and Figma Make with help of Sites. PLAY NOW 💯 Remora - Let's Clean our Space (https://remora.figma.site/) 🚀 Right now, more than 27,000 pieces of debris are orbiting Earth. Broken satellites, lost bolts, leftover rocket stages and nobody's cleaning it up. It sounds distant, but it isn't: this debris threatens the satellites our GPS, communications, and weather systems depend on, and could eventually block our access to space entirely. I named the project Remora; a small fish that swims alongside sharks, cleaning their surroundings. We're the remoras. Space is our ocean. The Makeathon brief was "design something that improves the world," and I wanted my answer to be playable, not just a poster. Some of what's under the hood: 🎮 Two game modes: a free-flying drone collector with zero-G physics and a station-based sorting game where you triage incoming debris into recycling shipments 🤖 Three AI-controlled drones compete alongside you on a live leaderboard, each with its own personality and skill level ✨ Particle bursts, thruster trails, and docking animations — built frame-by-frame on canvas, no game engine 🌍 An animated Earth companion that reacts with rotating messages as you play 📡 Satellites cross your flight path on real trajectories — hit one and you lose cargo and hull integrity 🔼 A milestone-based upgrade system (Speed Boost, Cargo+, Magnet Field, Shield) that triggers mid-flight without pausing the game It won't clean the orbit. But if it makes one more person think about the mess we're leaving up there — it did its job. 🔗 Try it live: Remora - Let's Clean our Space (https://remora.figma.site/) 🎨 Figma file: Project File (https://www.figma.com/site/p5bu8PTmoytjpTY9YL3qwY/Remora---Space-Cleaner?node-id=0-1&t=H5KqKrCraHyBCseN-1&view=code&code-node-id=1-5)
4
11
312
Cover image for Threadline — an interactive visual
Threadline — an interactive visual journaling experience, with walkthrough video project live demo link: https://change-height-01239730.figma.site/ Link of figma project: https://www.figma.com/make/g3yDxPG9HUqPes1raVNhUs/Threadline-interactive-experience?t=GSEKSXhZOoIR3MJR-1 Figma X Contra challenge Most journaling tools flatten memory into text boxes. Threadline turns memory into something you can see and touch. You enter a few real moments from your life, choose a thread color for each, and weave them into a canvas. The heavy ones show up as knots. You can open a knot, sit with what it carried, and reframe it in your own words. Not to erase it.. just to hold it differently. When the thread softens, the memory stays. It just doesn't pull the same way. At the end you're left with a woven cloth made from your own story. I built this for people who carry things they don't always know how to say out loud. Grief, change, loss, starting over.. those don't fit neatly into a journal entry. Sometimes it's tangled. Sometimes you don't know where to start. Threadline gives that a form: memories become threads, weight becomes tension, unresolved moments become knots, and reframed meaning becomes a gold stitch. The flow: add your moments → choose thread colors → generate your Threadline → open a knot → reframe it → keep or share the cloth. It's quiet on purpose. No streaks, no metrics, no gamification. Just a place to put what you've been carrying. And honestly, if you're carrying something right now: you don't have to carry it perfectly. That's the whole point of this thing.
14
9
497
Cover image for Did you know a tornado
Did you know a tornado formed the year you were born? Not a real one. A data one. Type your birth year. Watch the storm react - the speed, the color, the rage of it - all driven by the exact CO₂ levels recorded that year. 🌪️Live Site - https://thedatatornado.figma.site 🎨Figma Make - https://www.figma.com/make/onDJsdMQ3PQV2B8xkSzHKn/TheDataTornado (https://www.figma.com/make/onDJsdMQ3PQV2B8xkSzHKn/TheDataTornado?t=AdZGoKLchp7v8avG-1) 📋FigJam Board - https://www.figma.com/board/2P5FGzsc6faOl2a2JK2GDo/TheDataTornado (https://www.figma.com/board/2P5FGzsc6faOl2a2JK2GDo/TheDataTornado?node-id=0-1&t=fECFM44dgxDR2x3C-1) 💻GitHub Repo - https://github.com/isumenuka/Thedatatornado 🔬 The Problem Climate change is the most documented crisis in human history. Scientists have been collecting data for over 65 years. But most people feel nothing when they see the numbers - because a wall of data doesn't make you care. That is a design problem. The Data Tornado is my answer. ⚙️ How It Was Built I started in FigJam - mapping the full app structure, severity color system (Stable → Elevated → Critical → Extreme), and the 65-year climate timeline before touching any build tool. In Figma Make, I loaded my complete design guidelines first - colors, fonts, spacing rules - so every generated output matched my vision from the first prompt. That one step eliminated hours of corrections. The MCP connector was the most critical technical piece: a custom live pipeline to NOAA's servers, pulling real CO₂ and temperature readings automatically every time someone opens the app. No downloading. No pasting. Always live. The hero background video was generated entirely in Figma Weave - I set a start frame and end frame, and Weave generated the full atmospheric storm footage between them. The Figma Agent handled precision edits throughout -clicking directly on individual elements, repositioning buttons, aligning sections, without touching anything else. Supabase powers the share cards, news gallery, and live data caching. GitHub handles deployment. 🛠️ Tools Used → FigJam: full app structure, severity system & data flow diagrams → Figma Make: prompt-to-code app with custom NOAA MCP connector → Figma MCP: live pipeline direct to NOAA's climate API → Figma Weave: AI video generation for the hero storm background → Figma Agent: precision element-level UI edits throughout the build → Supabase: backend for share cards, news & data caching → GitHub: deployment and version control ✨ Key Feature - Birth Year Telemetry Enter your birth year. The app instantly generates your personal climate log -the exact CO₂ concentration the year you arrived in the world, your temperature anomaly then vs. now, your severity level at birth vs. today. It stops being a global statistic. It becomes yours. Most people go quiet when they see their own number.
67
90
4.6K
Cover image for KeyDash  (https://mind-cinch-79522553.figma.site/)is a web-based
KeyDash (https://mind-cinch-79522553.figma.site/)is a web-based typing game built for the Config Makeathon using Figma Make. The idea came from a simple problem: typing practice is useful, but it can feel repetitive and not very motivating. I wanted to explore how a clean typing-test interface could be combined with a playful game mechanic. In KeyDash (https://mind-cinch-79522553.figma.site/), players type random English words while a pixel-art runner tries to stay ahead of a human chaser. Every correct word increases the lead, while mistakes and slow typing make the chaser get closer. Players can choose difficulty, time duration, character, and map before starting a run. During gameplay, KeyDash (https://mind-cinch-79522553.figma.site/)tracks WPM, accuracy, time, correct words, combo, and lead distance. At the end, players get a result screen with their final WPM as the main score, plus supporting stats and shareable results. I used Figma Make to design and build the working prototype, iterating through the interface, gameplay logic, result screen, and visual style directly from prompts and refinements. Try the live project here: https://mind-cinch-79522553.figma.site/ View the Figma Community file here: https://www.figma.com/community/file/1646235222942005244/keydash-arcade-typing-game-built-with-figma-make LinkedIn post: https://www.linkedin.com/posts/dayensptr_configmakeathon-configmakeathon-ugcPost-7470173128632156160-e3C6/ Threads post: https://www.threads.com/@dayen.dev/post/DZX9FDvjB0X?xmt=AQG07t78aZVsV95iKgbAUrEogrmWWOziR99DQ64r6qkuww Instagram post: https://www.instagram.com/reel/DZX_ISwpF4Z/ KeyDash (https://mind-cinch-79522553.figma.site/)— Type fast. Stay ahead.
45
94
5.4K
Cover image for Here is my submission for
Here is my submission for the #makeathon FocusDock is a calming focus timer designed for work, study, reading, and deep focus sessions. https://detach-lime-09329627.figma.site/ The idea started from a simple problem: most focus timers are functional, but they don’t feel personal or emotionally engaging. I wanted to create a timer that feels more like a small ritual, choosing your environment, placing your clock, setting the mood, and starting a focused session with intention. With FocusDock, users can: Choose a focus duration Pick from different illustrated desk, shelf, and table backgrounds Select a clock style Place the clock naturally inside the scene Start a clean, distraction-free focus session Use ambient sounds or music to support concentration The design direction is soft, calm, and minimal, using 2D illustrated backgrounds with clear surfaces where the clock can sit naturally. The goal is to make the clock feel like an object inside the workspace, not just a floating timer UI. I’m using Figma’s suite of tools to explore the visual system, generate the interface direction, and build the interactive prototype with Figma Make. A big part of the challenge is making the experience feel polished: smooth transitions, thoughtful placement, responsive layouts, and a focus flow that feels simple but meaningful. For me, this project is about turning time management into a calmer, more intentional experience. social post: https://x.com/sir_hsn/status/2063623301201858694?s=20
13
21
1.8K