Dynamic UI Morphing Framework

Developing Agent: Direct Source Code Injection
Exploration Mode: Lowered Opacity & Tooltip Injection
Focus Mode: Active UI Noise Cancellation

Inspiration

The command line brought software you had to learn. The graphical interface introduced software you could see. The touchscreen brought software you could feel. But what is the next step for user-facing components?

Why, in an age full of cutting-edge technology, do the websites and apps we use every day remain static when human headspaces are so dynamic? The main barrier has always been privacy. Nobody has been able to solve how to infer user state without the app spying on the user. We wanted to build a framework that takes the next step in software development by overseeing a user-centric approach—feeling a user's frustration and clearing the path for them—without ever invading their privacy.

What it does

The Dynamic UI Morphing Framework is a business-to-business solution that transforms static software interfaces into dynamic platforms that conform to human behavior. It operates through an ecosystem powered by two agents:

The Developing Agent: Before a user ever touches the product, a software vendor pastes their codebase and guidelines into our portal. The Developing Agent processes this unfamiliar codebase once, injecting the requested UI layouts (Focus, Exploration, Clarity) directly into the source code so it is capable of changing shape live.

The Behaviour Agent: Once the app is live, this lightweight background engine passively tracks specific behavioral signals: window focus and blur, action timing, error and correction rates, scroll patterns, cursor dwell, and navigation revisits. It normalizes these signals against the individual user's unique historical baseline. Based on these localized z-scores, the UI seamlessly morphs to provide focus when distracted, guidance when lost, or simplicity when fatigued.

Privacy by Design: Our system is structurally incapable of reading keystroke content, clipboard data, or form values. Everything runs entirely in the browser. We don't track who you are; we track how your patterns deviate from your own normal behavior. The only thing that ever leaves the client is an aggregated statistic (mean and standard deviation) with explicit consent.

How we built it

We tackled this ambitious vision by splitting our execution into a highly collaborative pipeline spanning frontend, AI, and complex mathematics:The Telemetry & Math Engine: We built a client-side architecture that captures passive DOM events without invasive tracking. The engine processes these signal frequencies, normalizes them against the user's baseline, and computes a composite score:$$Score = \frac{\sum_{i=1}^{n} z_i \cdot w_i}{\sum_{i=1}^{n} w_i}$$The Developing Agent (Vendor Portal): We designed a developer tool using Next.js (App Router) and the Vercel AI SDK. This agent reads the vendor's code and decides what "Focus Mode" should mean inside that specific app, applying the structural React and Tailwind CSS changes automatically.The Morphing Live Demo Application: We crafted an Enterprise Data Analytics Dashboard utilizing Tailwind CSS, Shadcn/UI, and Zustand to act as our live demonstration. It smoothly transitions between four distinct configurations:Normal Mode: The default state before any behavioral signal pushes a layout shift.Focus Mode: Menus collapse and the sidebar vanishes, leaving only the current task when the user loses focus.Exploration Mode: Surfaces guidance and contextual tools when the system detects the user is lost or in a stupor.Clarity Mode: Simplifies the grid, enlarges elements, and increases padding to combat fatigue.

Challenges we ran into

When taking human behavior as input, the most critical question is: How do you handle false positives? If the system guesses wrong, a flickering, unpredictable UI will cause more frustration than it prevents. We solved this by engineering strict architectural and mathematical constraints:

The Co-occurrence Rule: Our system never lets one noisy signal change the interface. At least two independent signals must cross a z-score of 1 before a switch is even considered.

Hysteresis Gap: Every mode-switching decision runs through hysteresis. Switching into a restrictive mode requires the score to cross +1.8, but switching back out only requires falling below +1.2. This gap ensures the interface never flickers on a borderline reading.

Sustained Signals & Cooldowns: Nothing acts on a single anomalous reading. A signal has to hold sustained for minutes at a time, not seconds. Furthermore, every switch is followed by a hard 120-second cooldown before another one can fire.

Accomplishments that we're proud of

We are incredibly proud to have built a system that fundamentally rethinks how software responds to humans. We successfully bridged a cutting-edge LLM code-generation pipeline for the developer with an incredibly strict, mathematically sound tracking engine for the end-user. Proving that we could accurately infer cognitive load purely through numeric telemetry—without ever reading a single keystroke or compromising user privacy—is a massive technical win for our entire team.

What we learned

This project pushed us to look at UI/UX through the lens of human psychology, statistics, and security. We learned that mathematical constraints (like hysteresis and cooldowns) are just as important to the user experience as the frontend styling. We also mastered the complexities of client-side code streaming and building browser-native telemetry listeners that operate with zero latency.

What's next for Dynamic UI Morphing Framework

We plan to evolve this framework from a hackathon prototype into an enterprise-ready, open-source SDK. Our immediate next steps include expanding the Developing Agent to support Vue and Svelte codebases, refining our statistical baselines for even faster personalization, and publishing documentation so vendors can integrate dynamic morphing into their platforms seamlessly.