The network for creativity
Join 1.25M professional creatives like you
Connect with clients, get discovered, and run your business 100% commission-free
Creatives on Contra have earned over $150M and we are just getting started
Back to feedPost
DONT MISS THIS ONE:
I've spent the last few weeks building something I've wanted to finish for a while and add new skills to my pipeline while working on the project: a cinematic, terminal/HUD-style interface for a fictional tactical operations system, entirely in the browser. (I believe this might be a really good solution to run some type of motion projects during filmmaking time directly on the visible probs)
Here are some details: Behind a simulated boot sequence (fake network handshakes, IP auth, animated logo reveal) sit four consoles:
→ STATICPEN: a satellite recon view with live target tracking that shifts from optical to thermal scan on inspection
→ SILENTPEN: a ground tactical console with four switchable sensor modes: Direct, Lidar, Heat Scan, Ghost
→ SEERPEN: the deep one. A real 3D globe (Cesium) rendering 26 live/static intelligence layers, conflict zones, ship traffic, flight tracking, GPS jamming, orbital satellites, paired with a live news feed and a local-LLM "analyst" that reads the map context and can act on it through chat
→ STRATUM: locked for now. Select it, and the system denies you clearance and logs the attempt. A dead end on purpose.
Design-wise, the goal was to make it feel like a live system, not a mockup; every terminal readout, scan line, and boot log is actually animating in real time, not a static screenshot dressed up to look busy.
Designed fully in Figma, first run and perfected on a local server and moved to GitHub with some changes to able to fit the webpage format. It was built with React 19, TypeScript, Vite, Tailwind v4, Cesium, and a small Express backend aggregating real news and live layer data.
While I've FE skills, they were limited in most cases; I've tried a new MCP server system inside Figma, and with VSC and Claude, I was able to pull out my design, put more detailed meaning to it and run it fully with interactions. While I'm against the ML systems to some degree, my approach is to use that as a tool to solve my technical problems. And my design project became a fully functional project. I believe designers will evolve their mindset to create more valuable products with more extensive tool options.
Let me know what do you think =)
Full case study on Behance: https://lnkd.in/dNd_PRqu
Live demo: https://lnkd.in/d2cp9mcN
Amazing! Great Work! 👍
Thank you a lot =)
Naming each console STATICPEN, SEERPEN, and locking STRATUM as a dead end on purpose is such a good detail, most people would have stopped at making it look busy. If you did a version 2 of this, what would you push further?
Hey Maty, yea I spend lots of time on the naming.
Project came out as SPEN - Silent Predictive Enforcement Network, same for the Static and Seer, Stratum is another level of the product vision. It has full layer of control and this is why I put that names on them. All of them...
looks great
Thank you a lot, happy you like it.
This is Anduril style!🔥
YEa I love their style a lot. Defence systems should have bit dark vibe =)
Stunning attention to detail! Every single element feels intentional and perfectly placed. Great job!
Hey Boluwatife, thank you a lot. =) happy to see u like the details of the whole work
Well done! 🏆
Thank you a lot =)
Thank you a lot
wait this runs in the browser??
yeap, I move the whole figma design to html based nonserver github project to able to test. I also planed to move it to Unreal or Unity but have another project atm.
yes ofcourse, u can run in browser also u can download from the source and run localy, in that way u can also use the Ollama AI tool as helper
this looks too good
This is peak 🫡
Just so great, Kudos
This is great work. Love the concept. Is it running Ollama under the hood for that local chat, or something else?
yes u can download and run with Ollama in local, with this way you can have the whole news and additional AI elements inside the system
Awesome
The network for creativity
Join 1.25M professional creatives like you
Connect with clients, get discovered, and run your business 100% commission-free
Creatives on Contra have earned over $150M and we are just getting started
Trending
retrofuturism
Share your favorite designs from the past exploring the distant future. Or your own take on the aesthetic 🚀
halftone
Dots. Texture. Grain. Let's see your designs using the halftone technique.
Midjourney
Creatives are showing off what they're making with Midjourney.
colorgrade
Video editors sound off: How do you enhance the mood of your video in color grading?
Related posts
When building a fashion brand identity, most designers start with the logo.
We usually do too. It feels like the natural anchor point.
But when we worked on Evolur, we started with the touchpoint that gets touched last the packaging.
Because for a fashion label, the unboxing moment is the brand. The first impression doesn't happen on Instagram. It happens when someone pulls a ribbon-wrapped box out of a delivery bag.
So we built the identity outward from there. The wordmark came from asking what needed to look right on a swing tag at 2cm and on a tote bag at full size simultaneously. The crimson and blush palette came from asking what felt confident on kraft shipping boxes without needing a campaign photo around it.
This is what fashion branding looks like when every detail is treated like the hero shot.
What we noticed was that designing for physical touchpoints first made every digital decision easier. The hierarchy was already solved. The personality was already clear.
"Fresh styles. Timeless confidence." The brand found its own tagline by the end.
Does this feel like a brand worth wearing? 👇
Amazing branding
Hi! I’ve been working on this app for the past three hours, and I’d love to share my prototype with you. Could you test it using the link below and let me know what you think? Your feedback would be really helpful as I work to build a great app for students.
The app’s main purpose is to help students organize their assignments, develop concepts, keep track of their ideas, and ultimately pass their classes!
Andromeda is a great name for a study app, gives it some ambition. The "each task you complete illuminates it" hook is fun, did that gamification angle come first or did it get bolted on after the core assignment tracking was working?
Digital Business Website UI/UX Design. 👇
A modern, bold, and visually engaging website concept designed for a digital business. The layout combines strong typography, creative visuals, structured content sections, service highlights, project showcases, team profiles, testimonials, and clear CTAs to create a professional and conversion-focused experience.
The design focuses on clean UI, visual storytelling, strong hierarchy, and a contemporary digital aesthetic—making the website both engaging and easy to navigate.
