web dna

Inspiration

Modern cybersecurity is mostly reactive — systems wait to be attacked, then respond. I was inspired by biological systems, where DNA continuously repairs itself and the immune system learns from every threat.

This led me to explore a new idea: what if websites could behave like living organisms — detecting damage, repairing themselves, and evolving over time?

What it does

WebDNA is an interactive cybersecurity simulation that demonstrates self-healing, adaptive security.

Users can simulate real-world attacks such as SQL injection, XSS, DDoS, and more. As attacks occur, the system:

Detects threats in real time
Repairs vulnerabilities dynamically
Updates its internal “memory”
Evolves stronger defenses after each attack

It also features a live code engine that shows how the system rewrites its own logic during attacks, along with an AI guide that explains what is happening in real time.

How I built it

I built WebDNA using a modern web stack focused on performance and interactivity.

Next.js 15 and React 19 for a scalable frontend architecture
Tailwind CSS and ShadCN UI for a clean, cinematic interface
Framer Motion for scroll-based storytelling and real-time animations
A Canvas-based rendering system for the DNA repair visualization
A GitHub-style code interface to simulate live code evolution

I actively used Google AI tools, especially Gemini via Genkit, to design system logic, generate realistic attack scenarios, and build an AI guide that explains system behavior dynamically.

Challenges I ran into

One of the biggest challenges was performance. Rendering hundreds of animation frames while keeping the experience smooth required careful optimization.

Managing large assets and dealing with Git limitations was another hurdle, which pushed me to rethink how I handle and optimize media.

Synchronizing multiple systems — animations, code updates, logs, and interactions — into one cohesive real-time experience was also complex and required careful coordination.

Accomplishments that I'm proud of

Building a fully interactive system that feels alive and responsive
Creating a unique DNA-based metaphor for cybersecurity
Implementing a GitHub-style live code evolution system
Designing an experience that combines visuals, logic, and interaction
Effectively integrating Google AI to enhance both development and user experience

What I learned

This project taught me how to think in terms of systems, not just interfaces.

I gained experience in performance optimization, real-time interaction design, and structuring complex frontend logic. I also learned how to use AI tools like Gemini to accelerate development and improve user understanding.

git link -- https://github.com/suhaniarya-eterna/dna.git