Codestorm hackathon project planning

07/28/2026 23:14:23
[Link]

[Link] I want to create a…

**Build a real-time collaborative focus room app with a landing page tha…
Mor4e creative ideas for making new web experiences
Here are ten, sorted roughly by how well they fit 3 days with 2 backend…
@everyone # 🚀 CodeStorm 2026 #2 – Official Problem Statement…
Theme changed completely, so scrap the "alive website" concepts. They…
THese are the projects of other people
Good intel. Looking at 121 submissions, here's what's already saturated:…
These are all of the projects
Now I have the full picture. Here's what the competition actually looks lik…
The goal is to build a interactuve website, You know a place where the fe…
Got it. Back to the original brief then. The "real world impact" theme is j…
Generate prototypes for all 3
Reading done. Building all three now. All three are single-file, no…
Give me 1-2 more ideas
**Conductor** A workflow builder where you can watch the data move.…
Improve MIrage to the highest degree possible Add all features you think…
Building both. The app first, then the landing page in its own visual…
continue
Balanced. Let me link the landing page's demo font-family bug (the `.pv…
Unable to draw on [Link] only when a template is there
Found it. The `.blank` placeholder ("Nothing drawn yet...") sits on top of…
separate the html js and css and tell me how to structure it in the repo f…
Both `href="[Link]"` links were replaced with `/mirage`. Now verif…
[Link] I want to add styles for all of the styles…
Meta only, no visible list. Let me search for what the 31 styles actually ar…
Where should I add the files in the structure

Powered by Claude Exporter 1/35

Drop them exactly where I already put them in the zip: ``` / ├──…

Powered by Claude Exporter 2/35

 [Link]
I want to create a PROJECT FOR THIS i have 3 days 2 frontend
developers, 2 backend developers

27/07/2026, 22:00:32

Architected real-time collaborative workspace concept for three-day sprint.

Thinking about designing a hackathon project for a four-person team within three days.
CodeStorm 2026 #2 | Devfolio ([Link])
Architected real-time collaborative workspace concept for three-day sprint.
Done
Build a real-time collaborative focus room app with a landing page that is
literally alive. It hits every bucket they listed at once (interactive UI + real-time +
productivity + AI utility), and it uses 2 FE and 2 BE cleanly without anyone idling.
First, a critical check: the hackathon runs Jun 1 to Jul 30. That is 3 days from today.
Confirm the actual submission cutoff on the Schedule page before you commit,
because if it closes on the 30th at some morning IST time, your real window is closer
to 2.5 days.

The project
Working name: Pulse Rooms. Public focus rooms where people work together in real
time.

Landing page that feels alive. Shader/canvas hero that reacts to cursor and
scroll, plus a live counter pulling actual socket data ("47 people are in focus right
now"). Judges see this in the first 5 seconds and it answers the theme directly.
Rooms. Join a room, see live avatars and cursors, presence states (focusing / idle
/ typing). Everyone declares an intent before the block starts.
Server-authoritative shared timer. Pomodoro synced across all clients from
the backend, not local state. This is the technically impressive bit and the one
judges can verify by opening two tabs.

Powered by Claude Exporter 3/35

 Ambient scene that evolves. Background shifts dawn to dusk as the room
accumulates focus minutes. Cheap to build, huge perceived polish.
AI recap. At session end, one API call summarizes what each person committed
to versus completed and generates a shareable room card.

Stack: Vite + React + Tailwind + Framer Motion + a WebGL hero. Node/Express +

[Link] + Postgres (Supabase if you want auth and realtime for free). Deploy Vercel
+ Railway.

Role split
FE1: landing page, design system, motion, WebGL hero, share card.
FE2: room UI, presence layer, socket client, timer display, AI recap view.
BE1: auth, rooms CRUD, schema, session history, stats endpoints, AI recap
endpoint.
BE2: socket server, room state machine, timer authority, presence broadcast,
reconnect handling.

3-day plan
Day 1: First two hours, all four of you lock the DB schema and the socket event
contract in one doc. Nothing else matters more than this. Then build in parallel against
mocked data. Deploy a broken skeleton to prod by end of day 1, not day 3.
Day 2: Integrate by noon. Afternoon is ambient scene, AI recap, stats. Feature freeze
at day 2 midnight.
Day 3: Bug bash morning. Record the demo video by 3pm. Devfolio writeup and
submission by 6pm. Leave a 6 hour buffer because something will break.

Where this dies

Scope creep into chat, DMs, leaderboards, and profiles. Cut all of it. One room type,
one timer, one recap. If sockets fall over on day 2, fall back to optimistic local timers
with a 5 second polling sync and nobody watching the demo will know.
Want me to write the socket event contract and DB schema so your team can start at
9am tomorrow instead of arguing about it?
27/07/2026, 22:01:22

Powered by Claude Exporter 4/35

 Mor4e creative ideas for making new web experiences

27/07/2026, 22:02:42

Synthesized interactive concepts balancing creativity with technical feasibility constraints.

Synthesized interactive concepts balancing creativity with technical feasibility constraints.
Done
Here are ten, sorted roughly by how well they fit 3 days with 2 backend devs who
need real work to do.
1. A site that erodes. One persistent world state shared by every visitor. Walk
through it and you leave footprints that stay for hours, then fade. Others see yours.
Nobody owns it, everyone marks it. Backend is a single global state doc plus decay
job. The demo is opening two browsers and watching one affect the other.
2. Repo as a living organism. Point it at any GitHub repo and it grows a structure
from the commit history, real time via webhooks. Files are cells, hot files pulse, dead
code greys out and drops off. Genuinely useful and it looks like nothing else in the
submission pile.
3. Sonified interface. Every hover, scroll, and keypress feeds a generative [Link]
engine, and everyone currently on the site is playing the same instrument. You hear
other people browsing. Weird, memorable, brutal to get right on mobile.
4. The page that watches back. Turn your own telemetry into the interface. It
shows you your scroll velocity, hesitations, rage clicks, and where your eyes probably
went, rendered live as a heat trail over the page. Ships as an embeddable script, so it
doubles as a real product.
5. Ambient world state. Site pulls live real world feeds (earthquakes, flight
departures, ISS position, solar wind) and renders one continuous scene driven by
them. No user input at all. It just breathes. Very much your aesthetic, and the backend
is a genuine aggregation and normalization layer.
6. Phones as controllers. Landing page shows a QR. Scan it and your phone
becomes an input device for the big screen, gyro and touch. Any number of people
can join and manipulate the same visual. Demo gold if the judging is live.

Powered by Claude Exporter 5/35

7. Async message in a bottle. You write something, it gets locked for 24 hours,
then surfaces to one random stranger who can respond once. Slow social. The whole
product is the constraint. Backend is queues, scheduling, moderation.
8. Agent workspace you can watch think. An AI utility where the reasoning is the
UI, rendered as a spatial graph that builds itself in real time as the model works. Most
AI demos are a chat box, this one is not.
9. Collaborative fiction with an AI player. Three humans and one model take turns
in a shared document, real time, and the model has its own agenda it does not
disclose. Part game, part writing tool.
10. The web without pages. Navigation as continuous space instead of discrete
routes. Content is positioned in a 2D field you pan through, and other visitors'
viewports are visible as rectangles moving around you.
If I had to pick two: #2 (repo organism) if you want to win on technical substance,
#5 (ambient world state) if you want to win on the first ten seconds of the judge's
attention. #1 is the highest ratio of impact to effort and the safest to finish.
The thing that actually decides this: pick whichever one you can demo in 30 seconds
without explaining it. Half these ideas need a paragraph of setup, and that is a losing
hackathon submission.
27/07/2026, 22:03:17

Powered by Claude Exporter 6/35

@everyone

🚀 CodeStorm 2026 #2 – Official

Problem Statement
Theme: Tech for Real-World Impact
Technology has the power to solve real challenges faced by
people every day. For CodeStorm 2026 #2, participants are
challenged to build innovative solutions that create meaningful
impact in the real world.
Your project can focus on areas such as:

🏥 Healthcare
🌱 Agriculture
🎓 Education
🌍 Environment & Sustainability
🏙️ Smart Cities
💰 Finance & Productivity
🤖 Artificial Intelligence
🔒 Cybersecurity
📡 Accessibility & Inclusion
Challenge
Design and develop a solution that addresses a genuine
problem and demonstrates how technology can improve lives,
increase efficiency, or create positive social impact.

Accepted Project Types

Web Applications
Mobile Applications
AI/ML Solutions
Software Tools

Powered by Claude Exporter 7/35

 Hardware-Integrated Projects
Open-Source Projects
Automation Platforms

Judging Criteria
Innovation
Problem Solving
Technical Implementation
User Experience
Scalability & Impact
Build something that matters. Build something that can
change the future.
Good luck, hackers! 🔥
— Team CodeStorm

28/07/2026, 16:30:10

Evaluated real-world problem solutions against hackathon constraints and criteria.

Evaluated real-world problem solutions against hackathon constraints and criteria.
Done
Theme changed completely, so scrap the "alive website" concepts. They no longer fit
the brief. Your landing page craft still earns UX points, but the project itself now has to
solve a real problem.
The trap: with these categories, roughly 60% of submissions will be a crop disease
CNN, a mental health chatbot, or a waste segregation classifier. Any of those and you
lose on Innovation before you start. Pick a problem the judges recognize from their
own life but nobody in the room thought to build for.

Top pick: Scam Shield

UPI and WhatsApp fraud is the single most relatable tech problem in India right now,
and everyone on the judging panel has a parent who has nearly fallen for one.

Powered by Claude Exporter 8/35

Forward or paste a suspicious message, link, or screenshot. Get back a verdict in
seconds with a plain-language explanation of why it is a scam, in Hindi or whatever
language they use, plus what to do next. Elderly-first UI: huge type, voice output,
three colors.
The innovation is not the classifier. It is the crowd corpus. Every report feeds a live
database, so when 200 people report the same fake KYC template, verdict 201 is
instant and free. Show that graph in the demo.

Backend: ingestion pipeline, URL and domain reputation checks, embedding-

based near-duplicate matching against the reported corpus, LLM reasoning layer
for novel messages, report aggregation, rate limiting. Two devs are genuinely
busy.
Demo in 20 seconds: paste a real scam SMS you have on your phone, watch the
verdict land, then paste a variant and watch it match the corpus instantly.

Second: Civic Issue Router

Photograph a pothole, overflowing bin, or dead streetlight. It geotags, classifies the
issue type and severity, identifies the responsible municipal department, drafts a
formal complaint, files it, and tracks the status.
The technical hook that makes it more than a form: spatial and visual clustering. Forty
reports of the same pothole collapse into one issue with a weight of 40, which is
exactly what turns citizen noise into something a municipal body can prioritize. Render
it as a live severity map.

Backend: image classification, geospatial clustering (PostGIS), department

routing rules, dedup, complaint state machine, status polling.
Demo: four phones photograph the same thing from different angles, the map
shows one growing hotspot.

Third: Scheme Navigator

Hundreds of central and state welfare schemes exist and almost nobody knows which
they qualify for. Answer six questions by voice in your own language, get the schemes
you actually qualify for, the documents needed, the nearest office, and a pre-filled
application.

Powered by Claude Exporter 9/35

Highest raw impact story of the three. Weakest on technical novelty unless you build
the eligibility rules engine properly rather than dumping everything into a prompt.
Build it as a real declarative rules engine over a scheme database and say so in the
writeup.

Also viable
Prescription decoder. Photograph a handwritten prescription, get generic
names, Jan Aushadhi equivalents with prices, and interaction warnings. Enormous
impact, spectacular demo, but handwriting OCR may humiliate you on stage.
Needs heavy "not medical advice" framing. High ceiling, high risk.
Teacher workload tool. Upload a chapter, generate differentiated worksheets by
ability level, then grade photographed handwritten answers in bulk. Education
judges respond to this because the pain is measurable in hours per week.

Avoid
Anything where the demo is a chatbot answering a question. Anything requiring
hardware you do not already own. Anything where the impact claim is "raises
awareness."
My call is Scam Shield. It scores on Innovation (corpus network effect), Problem
Solving (specific victim, specific harm), Technical Implementation (real pipeline, not a
prompt wrapper), UX (your strength, and accessibility-first design is visibly deliberate),
and Scalability (marginal cost drops as the corpus grows, which is a clean answer to
the scalability question judges always ask).
Want the schema, the API contract, and the 3-day split for it?
28/07/2026, 16:31:01

Powered by Claude Exporter 10/35

 CodeStorm 2026 #2 _ [Link]

THese are the projects of other people

28/07/2026, 17:16:45

Good intel. Looking at 121 submissions, here's what's already saturated:

Overcrowded (avoid):

AI learning/study tools: Learnhub, MemoSphere, StudyFlow AI, AI StudyMate,

PrepPath, AI StudyMate = 5+ nearly identical
AI health: ClinIQ, Mamora, healthchain = 3
Resume builders, fitness coaches, second brain apps = more clones
Generic "AI + [sector]" wrappers with no real backend work

Gaps nobody has touched:

Scam/fraud detection (my earlier pick still clear)

Civic/government interface
Real-time collaborative anything
Supply chain (SupplyShield exists but "global crises to local insights" sounds like a
dashboard, not a tool)
Accessibility tools for the visually/hearing impaired that actually work

What this tells you about judging:

ClinIQ has 2 likes, Cognivo has 2, PrepPath has 2. The top-liked projects are ones with
personality in the tagline, not just "AI + problem." "Move your cursor. Tie a knot. Build
the web." (Weave) got a like just from the copy.
My revised recommendation: Scam Shield still, but rebrand the story.
The angle that wins: "Your parents will never lose money to a fake KYC call again."
That is a sentence every Indian judge has lived. Nobody in this list of 121 is building it.

Powered by Claude Exporter 11/35

Want the schema and 3-day plan now?
28/07/2026, 17:16:55

Powered by Claude Exporter 12/35

 CodeStorm 2026 #2 _ [Link]

These are all of the projects

28/07/2026, 17:20:05

Now I have the full picture. Here's what the competition actually looks like:
Like counts tell you what judges noticed:

crossx: 13 likes (standout, it's actually useful for devs)

DormSphere: 5 likes
GitHub oracle: 3 likes
SafeNet AI / MailShield: fraud detection already exists (2 teams)

Critical update on Scam Shield: SafeNet AI and MailShield are both already doing
fraud/phishing detection. You'd be a third entry in that slot. Drop it.
What's genuinely missing from 121 projects:
Nobody built anything with real-time multiplayer, live shared state, or WebSockets.
Nobody built something you'd actually open twice. Nobody built for rural India
seriously (VillageWork exists but "rural talent meets digital speed" is vague). Nobody
built a tool with a corpus that grows from usage.
My new top pick: Awaaz ("Voice")
Hyperlocal crisis and civic alert network for areas with low literacy and low internet.
You speak a voice note, it gets transcribed, geotagged, classified
(flood/fire/medical/crime), and broadcast as a voice alert to everyone within 5km who
has the PWA installed. No reading required. Works on 2G.
Why this wins:

Accessibility + Smart Cities + Environment all at once

The demo is visceral: speak into phone, watch the map light up
Nobody in 121 projects touched voice-first + hyperlocal

Powered by Claude Exporter 13/35

 Backend has real work: geospatial broadcast, classification pipeline, audio
transcription, alert routing, offline-first PWA
The impact story writes itself for judges

Role split:

FE1: PWA, voice recorder UI, live alert map (Leaflet/Mapbox), offline support
FE2: admin dashboard, alert feed, category filters, map clustering
BE1: auth, user/location schema, alert CRUD, geospatial queries (PostGIS)
BE2: Whisper transcription pipeline, Gemini classification, broadcast system, push
notifications

Tagline: "When disaster strikes, not everyone can read. Everyone can speak."
Want the schema and day-by-day plan?
28/07/2026, 17:20:19

Powered by Claude Exporter 14/35

 The goal is to build a interactuve website, You know a place
where the fes can really show theri skills

28/07/2026, 17:22:28

Got it. Back to the original brief then. The "real world impact" theme is just flavor text
since the banner literally still says "Next-Gen Web Experiences" and the top liked
project (crossx, 13 likes) is a dev tool, not a social good app.
Looking at all 121 projects, here's the actual gap: nobody built anything visually
ambitious or technically impressive on the frontend. Most are chat UIs and
dashboards. The FE bar is embarrassingly low.
The move: build something where the interface IS the product.

Top pick: Orbit

A spatial, physics-based personal dashboard. Your tasks, links, and notes exist as
objects in a 2D gravitational field. Drag them, they orbit each other. Group them by
proximity. Everything has mass based on priority.
Why it wins:

Opens in 5 seconds and judges immediately want to play with it

Your two FE devs can go deep on canvas physics, drag interactions, spring
animations
Backend is minimal (save/load state, auth) so BE devs aren't bottlenecked by FE
Genuinely novel, zero overlap with 121 submissions
Fits Finance + Productivity track if judges need a category

FE1: Canvas renderer, physics engine ([Link]), drag and drop, collision, zoom/pan
FE2: UI shell, node creation/editing, sidebar, search, keyboard shortcuts, sharing
BE1: Auth, schema, state persistence, snapshot versioning
BE2: Real-time sync so two users can orbit objects together, conflict resolution

Powered by Claude Exporter 15/35

Demo moment: open two browser windows, drag a node in one, watch it move in the
other. That's the 10-second wow.

Second option: Mirage

A website builder where you describe what you want by drawing rough shapes with
your finger or mouse, and it generates the layout live. Sketch a rectangle at the top =
navbar. Sketch three columns = card grid. The sketch is the wireframe is the output.
FE-heavy, AI-powered, immediately impressive, nothing like it in the list.

Third: Chronicle
A storytelling platform where the page itself is the story. Content exists in a 3D
scrollable space, not a linear document. Parallax layers, objects you can pick up and
examine, ambient sound tied to scroll position. Think editorial design meets game
world.
Built for SpaceRock-style long-form content. Your exact aesthetic.

Orbit is my call. Physics canvas + real-time sync is a combination none of the 121
touched, the demo is instant, and your FEs get to actually show off.
Want the component breakdown and day plan for Orbit?
28/07/2026, 17:22:44

Powered by Claude Exporter 16/35

 Generate prototypes for all 3

28/07/2026, 17:27:07

Architected three interactive HTML prototypes with distinct visual themes.

Architecting interactive HTML prototypes for iterative team collaboration.
Reading frontend design skill before building UI prototypes
Architected three interactive HTML prototypes with distinct visual themes.
Done
Reading done. Building all three now.
Architected immersive 3D scrollable narrative about historical scientific event.
Orbit prototype: physics-based spatial task dashboard with canvas simulation, drag
interactions, and simulated collaborator presence
Architected sketch-to-layout tool with component classification and HTML rendering.
Mirage prototype: sketch-to-layout tool where drawn rectangles are classified into real UI
components and rendered live
Debugged styling errors and refined conditional logic.
Fix a corrupted CSS declaration in the code drawer header
Stop row grouping from swallowing boxes the user has manually overridden
Architected immersive 3D scrollable narrative about historical scientific event.
Chronicle prototype: 3D depth-scrolled editorial story space with parallax layers, aurora
canvas, and inspectable artifacts
Presenting file(s)...
Done
All three are single-file, no dependencies, open straight in a browser.
Orbit — hand-rolled n-body sim on canvas. 17 nodes, mass-weighted attraction to
field wells, pairwise repulsion, momentum on release. Click a field in the left rail to
isolate it and watch the rest get flung to the rim. Hit L for the simulated collaborator
so you can see what the real-time story looks like before you build the socket layer.
Mirage — the classifier is the whole product. Drag a wide short box at the top, get a
nav. Same box lower and taller, get a hero. Three similar boxes in a row collapse into a
card grid automatically. Click a box to override its type, right-click to erase. "View
code" shows the markup it would emit. Two presets load instantly for demos.

Powered by Claude Exporter 17/35

Chronicle — CSS 3D depth scroll, seven layers at 1500px intervals, camera eased
toward scroll position. Layers fade in from depth, blur at distance, drift laterally as you
pass them. Aurora canvas underneath reacts to both scroll position and scroll velocity.
Five inspectable artifacts with hand-drawn SVG figures.
Honest read on which to take into the hackathon:
Orbit is the strongest hackathon pick. The physics is real, the demo is instant, and it
leaves your backend devs a clear job (persistence and sync). Chronicle is the most
beautiful and the least defensible under "technical implementation" since it's mostly
CSS transforms and there's nothing for two backend devs to do. Mirage is the most
interesting idea and the riskiest, because the classifier is either uncannily good or
visibly dumb depending on how the judge draws, and you can't control that on stage.
If you want Mirage, the fix is to let the AI handle ambiguous cases and keep the
heuristics as the fast path. That gives your backend devs the pipeline to build and
makes bad sketches degrade gracefully.

orbit
Html

mirage
Html

chronicle
Html

28/07/2026, 17:35:18

Powered by Claude Exporter 18/35

 Give me 1-2 more ideas

28/07/2026, 17:47:23

Weighed competing concepts, ultimately championed two standout prototypes.

Weighed competing concepts, ultimately championed two standout prototypes.
Done
Conductor
A workflow builder where you can watch the data move. Drag nodes onto a canvas,
connect them with bezier edges, hit run, and actual payloads travel along the wires as
glowing packets. Nodes light up while executing, turn red on failure, and you can click
a packet mid-flight to inspect what it's carrying at that exact step.
Everyone has seen n8n and Zapier. Nobody has made the execution legible. The whole
pitch is that debugging a pipeline should be something you watch, not something you
read in a log.

FE showcase: node graph editor is a genuinely hard build. Bezier routing,

snapping ports, pan and zoom, marquee select, edge collision. Plus the particle
system along edges.
BE has real work: an actual execution engine. Topological sort, queue, per-node
runners (HTTP, transform, filter, delay), error propagation, streaming logs over
SSE.
Demo: build a three-node flow live, run it, watch a packet fail at node two and the
edge turn red.

Signal
A shared step sequencer. One grid, many people, in the same room. You toggle a cell,
everyone hears it on the next bar. The visual layer is the point: each person's edits
emit a colored ripple from the cell they touched, so you can see who is playing what.
Real-time, audio, collaborative, and nothing in the 121 submissions touches sound at
all.

Powered by Claude Exporter 19/35

 FE showcase: Web Audio scheduling (lookahead scheduling is a real problem, not
a toy), canvas visualizer, the ripple system, transport UI.
BE has real work: room state, socket sync, and the hard part, keeping
everyone's transport aligned. Server-authoritative clock with drift correction per
client.
Demo: open two tabs, both playing, toggle a cell in one, hear it appear in the
other on the beat.

Conductor is the more serious project and the better fit for judging on technical
implementation. Signal is the better fit if you want the room to actually react during
the demo, since sound does something to a presentation that visuals do not.
Want me to build either?
28/07/2026, 17:47:53

Powered by Claude Exporter 20/35

 Improve MIrage to the highest degree possible Add all features
you think which work as of now there will be improvements
down the road, Build a landing page for it ans tyle it lioke this
only style do not copy evrything
Also add text animations and parallax scrolling
This is a open source frontend builder

28/07/2026, 18:05:40

Architected comprehensive frontend builder with landing page, animations, and extensive
component library.
Architected comprehensive frontend builder with landing page, animations, and extensive
component library.
Done
Building both. The app first, then the landing page in its own visual language (drafting-
table vernacular rather than a FigJam copy).
Architected technical drawing-inspired landing page with animations and parallax scrolling.
Mirage v2: full sketch-to-layout builder with select/move/resize, undo history, inspector, 18
component types, theme system, responsive preview, and multi-format export
Remove v1 so the upgraded build can take its place
Mirage v2: full sketch-to-layout builder with select/move/resize, undo history, inspector, 19
component types, theme system, responsive preview, and multi-format export

Powered by Claude Exporter 21/35

 Architected technical drawing-inspired landing page with animations and parallax scrolling.
Done
Now the landing page.
Created file
Mirage landing page: drafting-table take on the playful annotated-canvas style, with live
cursors, staggered text animation, parallax layers, and an autoplaying sketch-to-component
demo
Done
28/07/2026, 18:20:00

Powered by Claude Exporter 22/35

 continue

28/07/2026, 21:32:40

Ran command
Sanity-check brace balance and script tags on both files
Done
Balanced. Let me link the landing page's demo font-family bug (the .pv .p-hero h4
uses Archivo, fine) and verify the JS in both parses cleanly.
Ran command
Parse-check the inline JS of both files without executing DOM code
Done
Both parse. One thing to fix: in the landing hero, the cursors are positioned with top
from the path but the container isn't the full offset parent I assumed. Let me verify the
cursor and demo logic references resolve, and tighten the one risky spot (cursor x
uses .hero .wrap width which exists).
Ran command
Confirm all element references in the landing page resolve to real ids
Done
All references resolve. Let me do the same check on the app and confirm the critical
interaction paths (classify, export, pointer handlers) have no dangling references.
Ran command
Confirm every $() id reference in the app maps to a real element
Done
Clean across the board. All 60 element references in the app resolve, JS parses in both
files, braces balanced.
Presented file
Presenting file(s)...
Done
Both done. [Link] is the landing page, [Link] is the app. The landing
page's buttons link to [Link] , so keep them in the same folder and it works as
one site.

Powered by Claude Exporter 23/35

What changed in the app (v0.2)
The v1 could only draw and cycle box types. This is a real editor now:

Select, move, resize. Click any box to select it, drag to move, drag the 8
handles to resize. Everything snaps to the column grid.
Inspector panel. Selecting a box swaps the left rail from the structure list to a
full inspector: type override (19 components), span/height/offset sliders, column
count for grids, and editable heading + body copy that flow straight into the
preview.
Confidence. Each auto-read box carries a confidence score. Low-confidence
boxes get an amber dot on the canvas and a warning bar in the inspector, so the
classifier flags ambiguity instead of guessing silently. That's the fix for the failure
mode I flagged earlier.
Undo/redo (80 steps), Tidy (snaps everything into clean rows), Invert (dark
drafting surface), 8/12/16 column grids.
Themes. Plain, Editorial, Brutal, Soft, Terminal, all pure token swaps that never
touch structure.
Responsive preview. Full / tablet / phone.
Export. HTML+CSS, React, Tailwind, and Sketch JSON. Copy or download. JSON
round-trips through Load, so a wireframe becomes a committable file.
Four starter presets, full keyboard shortcuts.

The landing page

Took the feeling of the FigJam reference (annotated canvas, floating labels, live
collaborator cursors, warm play) but built it in Mirage's own drafting-table language
rather than copying it: dotted grid, blueprint column rules, highlighter and hand-drawn
underline marks, a monospace/Archivo pairing. Nothing purple, no speech bubbles
copied.
Animations and parallax as requested: per-word rise on the headline, highlighter
wipes, an SVG underline that draws itself, three drifting named cursors, a hero window
that auto-plays the sketch-to-component loop (box appears left, component pins in
right), scroll-reveal on every section, counting stats, and layered parallax on the dot
fields and app window.

Powered by Claude Exporter 24/35

One honest caveat for the hackathon: this is a strong frontend showcase but it's a
static client-side app, so it gives your two backend devs nothing to do. If you're
committed to Mirage, the backend story is the AI fallback for low-confidence boxes
(route ambiguous sketches to a model), plus saved projects, shareable sketch URLs,
and real-time co-editing on that canvas. That turns the confidence dots into a genuine
full-stack feature instead of a nice touch. Want me to spec that backticks split?

index
Html

mirage
Html

28/07/2026, 21:33:29

Powered by Claude Exporter 25/35

 Unable to draw on [Link] only when a template is there

28/07/2026, 21:36:17

Diagnosed overlay event interception blocking canvas drawing.

Diagnosed overlay event interception blocking canvas drawing.
Done
Found it. The .blank placeholder ("Nothing drawn yet...") sits on top of the canvas,
and it only gets pointer-events:none once you have boxes (via the .gone class). Until
then, it intercepts every click, so drawing does nothing until a preset loads a box.
Edited file
Blank overlay must not block pointer events on the canvas before any boxes exist
Done
Fixed. The overlay text and background no longer intercept clicks, but the four preset
buttons inside it ( .ps ) stay clickable. Drawing should work immediately now, empty
canvas or not.
28/07/2026, 21:36:29

Powered by Claude Exporter 26/35

 separate the html js and css and tell me how to structure it in
the repo for vercel

28/07/2026, 22:27:05

Architected modular file structure with relative path resolution.

Architected modular file structure and Vercel-ready repository organization.
Extract inline CSS/JS from both HTML files into separate files
Architected modular file structure with relative path resolution.
Assemble the Vercel-ready folder layout and fix relative paths
Done
Both href="[Link]" links were replaced with /mirage . Now verify everything's
wired correctly and sanity-check the split files.
Ran command
Verify head references and confirm extracted JS still parses standalone
Done
All references resolve, both JS files parse standalone. Now finalize the repo with a
couple of small Vercel niceties and deliver it as a zip.
Created 2 files, ran command
Vercel config for clean static hosting of the split repo
Short README documenting the repo layout and deploy steps
Zip the finished repo structure for download
Done
Also copying the individual files to outputs so you can inspect them directly without
unzipping.
Ran command, presented file
Also lay out the split files unzipped for direct viewing
Presenting file(s)...
Done
Split, wired up, and zipped. Structure:

Powered by Claude Exporter 27/35

 /
├── [Link] → / (landing)
├── mirage/
│ └── [Link] → /mirage (the editor)
├── css/
│ ├── [Link]
│ └── [Link]
├── js/
│ ├── [Link]
│ └── [Link]
├── [Link]
└── [Link]

The key decision: the editor lives at mirage/[Link] , not a sibling [Link] .
Combined with "cleanUrls": true in [Link] , that's what gets you /mirage as
the URL instead of /[Link] . All href="[Link]" links on the landing page
are already updated to /mirage , and the editor's CSS/JS paths are adjusted for the
extra folder depth ( ../css/[Link] , ../js/[Link] ).
To deploy: unzip, cd into it, run vercel (framework preset "Other," no build step
needed since it's plain static files), or push it to GitHub and import the repo in the
Vercel dashboard. Either way it's zero-config.
If you later want more pages, the README spells out the pattern: new folder named
after the route, [Link] inside it, matching CSS/JS files in the shared folders.

mirage-repo
Zip

index
Html

index
Html

Powered by Claude Exporter 28/35

 README
Md

28/07/2026, 22:28:12

Powered by Claude Exporter 29/35

 [Link]
I want to add styles for all of the styles available on this website

28/07/2026, 22:43:43

Fetched page
Design Prompts - AI-Powered Design Style Explorer ([Link])
Done
Meta only, no visible list. Let me search for what the 31 styles actually are.
Searched the web
[Link] list of design styles
Done
Perfect — the fourth result gives me the exact list of all 31 [Link] styles
with light/dark and typography metadata. Let me pull the full reference to make sure I
have every style.
Fetched page
DesignPrompts AI-Ready Styles Reference | Some Claude Skills | AI Know-How Used at
Curiositech ([Link])
Done
I have all 30 styles with mode + typography metadata. Let me build them as a proper
token layer for Mirage. Push back on one thing first: 30 themes is a lot of code and a
lot of UI, and honestly most of them are near-neighbors (SaaS ≈ Professional ≈
Enterprise ≈ Modern Dark). For a hackathon demo, judges will only see a handful. I'd
suggest keeping all 30 in the file for the "we support 30 styles" claim, but grouping
them so the UI stays sane.
Building it now.
Viewed file
Find the existing theme block in [Link]
Done
Now I'll build a separate [Link] with all 30 designprompts styles, load extra fonts
on demand in the HTML, and rewire the theme picker as a grouped dropdown so 30
options don't blow up the toolbar.

Powered by Claude Exporter 30/35

Created file
All 30 [Link] styles as CSS token blocks, keyed to Mirage's #sheet variables
Done
Now update the editor HTML: link the new stylesheet, load the extra fonts, and replace
the 5-button theme segment with a grouped <select> that carries all 30 styles.
Viewed file, edited file
Locate the font link and theme segment in the editor
Load every font family the 30 themes reference, plus the themes stylesheet
Done
Now find and replace the theme segment.
Ran command, viewed file, edited file
Find where the theme selector lives
Read the current theme UI block
Replace the 5-button theme picker with a grouped select that lists all 34 themes (original 4
kept + 30 designprompts)
Done
Add styles for the select and update the JS to bind it.
Ran command, edited file
Find a good spot to add the select styling
Add themed select styling next to the segment styles
Done
Now update the JS binding. The current code loops over #segTheme children, which no
longer exist.
Ran command, viewed 2 files, edited 2 files
Locate the theme JS binding
Read the theme binding block and its context around Load JSON
Replace segmented theme binding with the new grouped select
Read the Load-JSON restore block that also referenced segTheme
Restore theme on Load by setting the select value instead of toggling old button classes
Done
Also update the export function so all 30 themes emit correct CSS tokens.
Ran 2 commands, viewed file, edited file
Find hardcoded theme logic in the exporter
Read the exporter theme lines to replace them wholesale

Powered by Claude Exporter 31/35

 Drive the exported CSS from a full token table covering all 34 themes
Validate JS, confirm HTML wiring, sync to canonical repo, rebuild the zip
Done
All wired up. 35 options = 1 blank Plain + 4 house themes + 30 [Link]
styles. JS parses, no stale references.
Presented file
Presenting file(s)...
Done
All 30 [Link] styles are in, plus the original four house themes. Structure:

New file: css/[Link] — every style is a scoped token block on #[Link]-

<name> , plus a handful of style-specific accents (Bauhaus primary-color cards,
Newsprint columns, Terminal scanlines, Cyberpunk neon glow, Art Deco double
rule, Vaporwave horizon grid, Sketch dashed borders, Retro monitor bezel,
Industrial exposed frame).
Updated: the theme picker is now a grouped <select> in the preview toolbar,
organized as House → Editorial → Product → Expressive → Dark. Cramming
34 buttons into the header would have been unusable.
Updated: the code exporter now drives every generated stylesheet from a single
token table, so switching to Vaporwave and hitting Export gets you Vaporwave
CSS, not Plain.
Updated: all the extra Google Fonts these themes need (Playfair Display,
Cormorant Garamond, EB Garamond, Fraunces, Space Grotesk, Archivo Black,
Roboto, Oswald, Bebas Neue, JetBrains Mono, Orbitron, Poiret One, VT323, Caveat,
Kalam, Nunito, IBM Plex Sans, Space Mono, Inter) are loaded in a single stylesheet
request.

One naming note: their "Terminal" and my existing house "Terminal" collide, so I
labelled the new one Terminal (green) in the picker and used the class th-terminal-
dp internally.

Zip is ready to drop into Vercel. Same deploy story as before, nothing changes about
the build.

Powered by Claude Exporter 32/35

 mirage-repo
Zip

index
Html

themes
Css

Sources
Sidebar | Domain: [Link] ([Link])
50 Design Styles Every Designer Should Know for Better Prompting | [Link] ([Link])
GitHub - NakanoSanku/OhMySkills: useful anthropic skills · GitHub ([Link])
DesignPrompts AI-Ready Styles Reference | Some Claude Skills | AI Know-How Used at
Curiositech ([Link])
50 Design Styles Every Designer Should Know for Better Prompting | by Himanshu
Bhardwaj | UX Planet ([Link])
DEV Community ([Link])
Dataset Viewer ([Link])

28/07/2026, 22:48:00

Powered by Claude Exporter 33/35

 Where should I add the files in the structure

28/07/2026, 23:03:12

Drop them exactly where I already put them in the zip:

/
├── [Link]
├── mirage/
│ └── [Link]
├── css/
│ ├── [Link]
│ ├── [Link]
│ └── [Link] ← new
├── js/
│ ├── [Link]
│ └── [Link]
└── [Link]

Two things matter:

1. [Link] goes in css/ , next to [Link] , not inside mirage/ . The editor's
HTML references it as ../css/[Link] since mirage/[Link] is one folder
deep.
2. Load order in mirage/[Link] — [Link] has to come after [Link]
in the <head> , since some of its rules override defaults set there:

<link rel="stylesheet" href="../css/[Link]">

<link rel="stylesheet" href="../css/[Link]">

That's already how the zip is laid out, so if you're updating an existing deploy: just add
the one new css/[Link] file, and replace your existing mirage/[Link] ,

Powered by Claude Exporter 34/35

css/[Link] , and js/[Link] with the versions from this zip. [Link] ,
css/[Link] , js/[Link] , and [Link] are unchanged from before.
28/07/2026, 23:03:16

Powered by Claude Exporter 35/35