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
Proud to share my submission for the #ConfigMakeathon 🚀
For this challenge, I created The Last Archive which is an interactive speculative experience that allows visitors to travel across the complete timeline of humanity, from the present day to the final surviving memory of civilization 100 trillion years in the future.
The idea began with a question:
If humanity disappeared, what would be the last thing we leave behind?
Rather than building a traditional website, I wanted to create somewhat a machine. A retro-futuristic archival system inspired by NASA mission control, CRT terminals, scientific instruments, cosmic cartography, and classic science-fiction interfaces.
The experience guides users through multiple stages:
🛰️ Archive Identification Protocol
Visitors enter their name, age, and birth month to establish a temporal link with the archive.
🌌 Temporal Transit Sequence
A deep-time navigation experience that propels users across millions, billions, and eventually trillions of years into the future.
🗺️ Personal Timeline Navigator
An orbital timeline system that visualizes humanity's evolution across vast cosmic timescales.
📡 Era Reconstruction Systems
Each era is presented as an archival reconstruction, combining speculative worldbuilding, scientific imagination, and interactive storytelling.
🧠 Personal Archive Messages
Throughout the experience, the archive references the visitor directly, transforming an abstract timeline into something personal and emotional.
🌑 The Last Archive
The journey ends at the final surviving record of humanity, preserved long after stars have faded and civilizations have disappeared.
This project explores the intersection of storytelling, interaction design, worldbuilding, and speculative futures. It was built to feel less like browsing a website and more like operating an ancient machine designed to remember us.
Built with Figma Make.
Check out my entire process using Claude Opus on Figma Make
https://www.figma.com/make/hSRdmT9lVYr0ChNi2ikfXU/Last-Archive?t=RIuTYsOqY5dtd1CN-1
#ConfigMakeathon #Figma #FigmaMake #UXDesign #ProductDesign #CreativeCoding #InteractionDesign #SpeculativeDesign
This is a super cool idea!! 👏
This feels super well thought out nice balance, clean structure, and the visuals communicate clearly. Really strong execution.
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
Related posts
Clean shop
I’m building the lab I wish my students had. 🧪✨
For years, I taught brilliant minds in empty labs. We described reactions instead of seeing them. This "STEM Interaction Gap" drove my submission for the #ConfigMakeathon.
🚀 Introducing: LabCraft AI
Turn static lesson plans into interactive web simulations in seconds. No code—just curriculum.
⚡ The Workflow (via @Figma Make):
AI Design: Generated responsive "Teacher Dashboard" & "Simulation Canvas" layouts instantly.
Logic Mapping: Used Figma Variables to link sliders to real-time flask visual states.
It’s personal. It’s EdTech. It’s the future of STEM.
👇 Explore the Lab:
🚀 Live Prototype: thus-clad-63683861.figma.site
X Post Link: https://x.com/i/status/2064876112128127280
📂 Remix the Prompt: (See the section below!)
📂 The "Secret Sauce" (Remix Prompt)
SYSTEM ROLE: Principal Product Architect. GOAL: Generate a 3-screen STEM web app "LabCraft AI" (1440px) using Clean Neobrutalism (2px borders, 8px corners, 4px hard shadows). SCREENS: 1. Prompt Input Dashboard: Sidebar navigation + center AI input bar (48px height) with hover/focus states. 2. Interactive Lab Canvas: Split view. Left: 2 Sliders (8px track, 24px thumb) in Chemical Green (#01C38D). Right: Simulation viewport with an Erlenmeyer Flask showing dynamic fluid levels. 3. Performance Analytics: Grid of 3 metric cards + line chart with interactive nodes in Science Blue (#2A697). CONSTRAINTS: Use Auto Layout for everything. Semantic layer naming. Accessible palette (#2A6F97, #01C38D, #FF6B6B).
🛠️ Quick Setup for Remixers 😊
If you're trying this prompt in Figma Make, follow these two steps for the best results:
StepAction1. Variable BindBind the generated colors to Local Variables to keep the Neobrutalist palette consistent.2. Prototype SyncLink the "Generate" button to the Lab Canvas using Smart Animate to show off the STEM interaction.
Amazing!
7 DAYS LEFT ⏳
Jumped into the Figma’s Config Makeathon to finally build the idea that's been living rent-free in my head:
A community app where AI transforms tired public spaces into before/after visions. Vote, remix, repeat.
First design's done. What do you think?
ok this is looking so sharp 👀
Trending
Claude
Claude has entered the design space. How are you using Claude Design?
Contra University
Learn from expert creatives how to earn more using next-gen AI tools.
MagicPath
The canvas is infinite, and exploration is becoming the workflow. How are you using MagicPath?
creativeaiflow
Creative AI workflows are evolving. What tools do you use, and what are their strengths and weaknesses?
freelancerlife
Freelancer life is wins, pivots, and everything in between. What’s yours right now?