Vanishing HTML Eval
Prompt
Create a single HTML file that, upon loading, begins to systematically delete and rewrite its own DOM structure in real-time using JavaScript. The page must start with a coherent layout—header, navigation, content sections—but as the user interacts with it (clicks, hovers, scrolls), elements should start vanishing, duplicating, or morphing into entirely new structures. CSS transitions should make these mutations feel organic, like a living organism shedding its skin. The final state of the page should be unrecognizable from its initial form, yet still functional. No external libraries. The mutations must be irreversible—once an element changes, it cannot revert.
A system prompt was added to support web rendering
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Mutating Page</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
:root{
--t:1.2s; /* master transition speed */
}
*{
box-sizing:border-box;
transition:all var(--t) ease-in-out;
}
body{
margin:0;
font-family:Arial,Helvetica,sans-serif;
background:#f5f5f5;
overflow-x:hidden;
}
/* ---------- INITIAL LAYOUT ---------- */
header{
background:#222;
color:#fff;
padding:25px 15px;
text-align:center;
font-size:2rem;
}
nav{
background:#444;
color:#fff;
display:flex;
justify-content:center;
gap:30px;
padding:18px 10px;
}
nav a{
color:#fff;
text-decoration:none;
font-weight:bold;
}
section{
padding:45px 25px;
max-width:920px;
margin:0 auto;
line-height:1.65;
}
section:nth-of-type(odd){background:#e1e1e1;}
section:nth-of-type(even){background:#d0d0d0;}
/* ---------- MUTATION STATES ---------- */
.fade{
opacity:0;
filter:blur(8px);
pointer-events:none;
}
.morph{
border-radius:50%;
transform:rotate(720deg) scale(0.3);
opacity:0.65;
}
.grow{
transform:scale(1.6) rotate(8deg);
}
@keyframes pulse{
0% {transform:scale(1);}
50% {transform:scale(1.12);}
100% {transform:scale(1);}
}
.pulse{animation:pulse 3.2s infinite;}
</style>
</head>
<body>
<header>Living Page</header>
<nav>
<a href="#sec1">Home</a>
<a href="#sec2">About</a>
<a href="#sec3">Services</a>
<a href="#sec4">Contact</a>
</nav>
<section id="sec1">
<h2>Welcome</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur dapibus vitae lectus vel bibendum.</p>
</section>
<section id="sec2">
<h2>About Us</h2>
<p>Suspendisse potenti. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Integer sed libero vel justo dignissim aliquam.</p>
</section>
<section id="sec3">
<h2>Services</h2>
<p>Praesent commodo, leo sed interdum efficitur, mauris ipsum gravida justo, quis vestibulum turpis massa sed est.</p>
</section>
<section id="sec4">
<h2>Contact</h2>
<p>Email: example@example.com</p>
</section>
<script>
/*
Self-destructive DOM script
– Starts mutating on load
– Extra mutations triggered by user interactions
– Each element mutates only once; no reversals
*/
(function(){
// --- Utility -------------------------------------------------------------
const live = Array.from(document.querySelectorAll('header, nav, nav a, section, section *'));
const mutated = new WeakSet();
const colors = ['#8e44ad','#27ae60','#c0392b','#f39c12','#16a085','#2980b9','#2c3e50','#d35400'];
const rand = (n)=>Math.floor(Math.random()*n);
const pick = (arr)=>arr[rand(arr.length)];
function randomizeStyle(el,isClone=false){
el.style.background = pick(colors);
el.style.color = '#fff';
el.style.borderRadius= Math.random()>0.5 ? '25px' : '50%';
el.style.transform = `rotate(${rand(720)-360}deg) scale(${(Math.random()*1.4+0.4).toFixed(2)})`;
if(isClone) el.style.opacity = '0.85';
}
// --- Mutation engine -----------------------------------------------------
function mutate(node){
if(!node || mutated.has(node)) return;
mutated.add(node);
const roll = Math.random();
if(roll < .34){ // 1. Fade & remove
node.classList.add('fade');
setTimeout(()=>node.remove(), parseFloat(getComputedStyle(node).transitionDuration)*1000+300);
}else if(roll < .68){ // 2. Morph in place
node.classList.add('morph','pulse');
randomizeStyle(node);
}else{ // 3. Duplicate + distort original
const twin = node.cloneNode(true);
randomizeStyle(twin,true);
node.after(twin); // insert clone
node.classList.add('grow');
}
}
function scheduledDecay(){
if(!live.length) return;
const victim = live.splice(rand(live.length),1)[0];
mutate(victim);
if(live.length) setTimeout(scheduledDecay, 1400+rand(1000));
}
// --- Kick-off ------------------------------------------------------------
scheduledDecay();
['click','mouseover','scroll','touchstart'].forEach(evt=>{
document.addEventListener(evt,e=>{
if(e.target) mutate(e.target);
}, {passive:true});
});
})();
</script>
</body>
</html>
```Drag to resize
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Morphing Webpage</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
transition: all 0.8s cubic-bezier(0.68, -0.55, 0.27, 1.55);
}
body {
font-family: 'Arial', sans-serif;
line-height: 1.6;
color: #333;
background-color: #f5f5f5;
padding: 20px;
min-height: 100vh;
overflow-x: hidden;
}
header {
background-color: #2c3e50;
color: white;
padding: 20px;
border-radius: 5px;
margin-bottom: 20px;
box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}
h1 {
font-size: 2.5rem;
}
nav {
background-color: #34495e;
display: flex;
justify-content: space-around;
padding: 10px;
border-radius: 5px;
margin-bottom: 20px;
}
nav a {
color: white;
text-decoration: none;
padding: 10px 20px;
border-radius: 3px;
}
nav a:hover {
background-color: #4a6b8a;
}
.content-wrapper {
display: grid;
grid-template-columns: 2fr 1fr;
gap: 20px;
margin-bottom: 20px;
}
main {
background-color: white;
padding: 20px;
border-radius: 5px;
box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}
aside {
background-color: #ecf0f1;
padding: 20px;
border-radius: 5px;
box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}
section {
margin-bottom: 20px;
padding: 15px;
border: 1px solid #eee;
border-radius: 5px;
}
button {
background-color: #3498db;
color: white;
border: none;
padding: 10px 15px;
border-radius: 4px;
cursor: pointer;
margin: 10px 5px;
}
button:hover {
background-color: #2980b9;
}
footer {
background-color: #2c3e50;
color: white;
text-align: center;
padding: 20px;
border-radius: 5px;
margin-top: 20px;
}
.card {
border: 1px solid #ddd;
padding: 15px;
border-radius: 5px;
margin-bottom: 15px;
}
.transformed {
transform-origin: center;
}
.fade-in {
animation: fadeIn 0.5s forwards;
}
@keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
.floating {
animation: float 3s ease-in-out infinite;
}
@keyframes float {
0% {
transform: translateY(0px);
}
50% {
transform: translateY(-20px);
}
100% {
transform: translateY(0px);
}
}
</style>
</head>
<body>
<header id="mainHeader">
<h1>The Morphing Page</h1>
<p>Interact with me and watch me change</p>
</header>
<nav id="mainNav">
<a href="#" class="nav-item">Home</a>
<a href="#" class="nav-item">About</a>
<a href="#" class="nav-item">Services</a>
<a href="#" class="nav-item">Contact</a>
</nav>
<div class="content-wrapper" id="contentWrapper">
<main id="mainContent">
<section id="introSection">
<h2>Welcome to the Experiment</h2>
<p>This page will change as you interact with it. Click, hover, and scroll to see the transformations happen.</p>
<button id="startButton">Click Me</button>
</section>
<section id="featuresSection">
<h2>Features</h2>
<ul>
<li>Dynamic DOM manipulation</li>
<li>Self-modifying structure</li>
<li>Organic transitions</li>
<li>Unpredictable transformations</li>
</ul>
</section>
<section id="infoSection">
<h2>Information</h2>
<p>The changes you see are irreversible. Each interaction triggers a unique transformation.</p>
<div class="card">
<h3>Did You Know?</h3>
<p>The DOM (Document Object Model) can be manipulated in real-time using JavaScript.</p>
</div>
</section>
</main>
<aside id="sidebar">
<h2>Sidebar</h2>
<p>This area will also transform over time.</p>
<div class="card">
<h3>Quick Links</h3>
<ul>
<li><a href="#" class="sidebar-link">Documentation</a></li>
<li><a href="#" class="sidebar-link">Examples</a></li>
<li><a href="#" class="sidebar-link">Resources</a></li>
</ul>
</div>
<div class="card">
<h3>Note</h3>
<p>Keep interacting to see more changes!</p>
</div>
</aside>
</div>
<footer id="mainFooter">
<p>The Morphing Page © 2023</p>
</footer>
<script>
// Track mutation state
const state = {
mutationCount: 0,
maxMutations: 30,
interactionCount: 0,
transformedElements: new Set(),
colors: [
'#e74c3c', '#9b59b6', '#3498db', '#2ecc71',
'#f1c40f', '#e67e22', '#1abc9c', '#d35400'
],
shapes: ['circle', 'polygon', 'diagonal', 'amorphous'],
layouts: ['grid', 'flex-column', 'flex-row', 'absolute'],
fontFamilies: [
'cursive', 'fantasy', 'monospace',
'Verdana, sans-serif', '"Courier New", monospace'
]
};
// Utility functions
function getRandomItem(array) {
return array[Math.floor(Math.random() * array.length)];
}
function getRandomNumber(min, max) {
return Math.floor(Math.random() * (max - min + 1)) + min;
}
function getRandomColor() {
return getRandomItem(state.colors);
}
// DOM transformation functions
function transformElement(element) {
if (state.transformedElements.has(element.id)) {
return; // Already transformed (irreversible)
}
const transformType = getRandomNumber(1, 12);
element.classList.add('transformed');
switch(transformType) {
case 1: // Change background and text color
element.style.backgroundColor = getRandomColor();
element.style.color = getRandomColor();
element.style.padding = `${getRandomNumber(10, 40)}px`;
break;
case 2: // Change shape
const shape = getRandomItem(state.shapes);
if (shape === 'circle') {
element.style.borderRadius = '50%';
} else if (shape === 'polygon') {
element.style.clipPath = `polygon(${getRandomNumber(0, 30)}% 0%, 100% ${getRandomNumber(0, 50)}%, ${getRandomNumber(50, 100)}% 100%, 0% ${getRandomNumber(40, 100)}%)`;
} else if (shape === 'diagonal') {
element.style.transform = `skew(${getRandomNumber(-20, 20)}deg, ${getRandomNumber(-15, 15)}deg)`;
} else {
element.style.borderRadius = `${getRandomNumber(10, 50)}% ${getRandomNumber(10, 50)}% ${getRandomNumber(10, 50)}% ${getRandomNumber(10, 50)}%`;
}
break;
case 3: // Duplicate and modify content
const clone = element.cloneNode(true);
clone.id = `clone-${Date.now()}`;
clone.style.transform = 'scale(0.85)';
clone.style.margin = '20px auto';
clone.style.opacity = '0';
clone.style.boxShadow = '0 5px 15px rgba(0,0,0,0.3)';
element.parentNode.insertBefore(clone, element.nextSibling);
setTimeout(() => {
clone.style.opacity = '1';
}, 100);
break;
case 4: // Change font and text properties
const allTextElements = element.querySelectorAll('p, h1, h2, h3, h4, h5, h6, span, a, li');
allTextElements.forEach(el => {
el.style.fontFamily = getRandomItem(state.fontFamilies);
el.style.letterSpacing = `${getRandomNumber(-1, 3)}px`;
el.style.fontWeight = getRandomNumber(300, 800);
el.style.textShadow = `${getRandomNumber(1, 3)}px ${getRandomNumber(1, 3)}px ${getRandomNumber(1, 5)}px rgba(0,0,0,0.${getRandomNumber(1, 5)})`;
});
break;
case 5: // Change layout
const layout = getRandomItem(state.layouts);
if (layout === 'grid') {
element.style.display = 'grid';
element.style.gridTemplateColumns = `repeat(${getRandomNumber(1, 3)}, 1fr)`;
element.style.gap = `${getRandomNumber(10, 30)}px`;
} else if (layout === 'flex-column') {
element.style.display = 'flex';
element.style.flexDirection = 'column';
element.style.alignItems = getRandomItem(['center', 'flex-start', 'flex-end']);
} else if (layout === 'flex-row') {
element.style.display = 'flex';
element.style.flexDirection = 'row';
element.style.flexWrap = 'wrap';
element.style.justifyContent = getRandomItem(['center', 'space-between', 'space-around']);
} else {
const children = Array.from(element.children);
element.style.position = 'relative';
element.style.minHeight = '300px';
children.forEach(child => {
child.style.position = 'absolute';
child.style.top = `${getRandomNumber(10, 80)}%`;
child.style.left = `${getRandomNumber(5, 70)}%`;
child.style.zIndex = getRandomNumber(1, 10);
});
}
break;
case 6: // Replace with new content
const originalContent = element.innerHTML;
const tempContent = document.createElement('div');
tempContent.innerHTML = `
<h3>Transformation Complete</h3>
<p>This element has been replaced with something new.</p>
<div class="card">
<p>The mutation cannot be reversed.</p>
</div>
`;
element.innerHTML = '';
element.appendChild(tempContent);
element.classList.add('fade-in');
break;
case 7: // Add animation
element.classList.add('floating');
element.style.animation = `float ${getRandomNumber(2, 6)}s ease-in-out infinite,
pulse ${getRandomNumber(3, 8)}s ease-in-out ${getRandomNumber(1, 3)}s infinite`;
break;
case 8: // Split into columns
const content = element.innerHTML;
const columns = getRandomNumber(2, 4);
const columnHTML = '<div class="content-column" style="break-inside: avoid-column; padding: 10px;"></div>'.repeat(columns);
element.innerHTML = `<div style="column-count: ${columns}; column-gap: 20px;">${columnHTML}</div>`;
const firstCol = element.querySelector('.content-column');
if (firstCol) {
firstCol.innerHTML = content;
}
break;
case 9: // Rotate and scale
element.style.transform = `rotate(${getRandomNumber(-10, 10)}deg) scale(${0.7 + Math.random() * 0.6})`;
element.style.transformOrigin = `${getRandomNumber(0, 100)}% ${getRandomNumber(0, 100)}%`;
element.style.margin = `${getRandomNumber(10, 40)}px auto`;
break;
case 10: // Change border and box-shadow
element.style.border = `${getRandomNumber(1, 8)}px ${getRandomItem(['solid', 'dashed', 'dotted', 'double'])} ${getRandomColor()}`;
element.style.boxShadow = `${getRandomNumber(-10, 10)}px ${getRandomNumber(5, 15)}px ${getRandomNumber(8, 25)}px rgba(0,0,0,0.${getRandomNumber(3, 8)})`;
break;
case 11: // Randomize content order
const childElements = Array.from(element.children);
element.innerHTML = '';
// Shuffle children array
for (let i = childElements.length - 1; i > 0; i--) {
const j = Math.floor(Math.random() * (i + 1));
[childElements[i], childElements[j]] = [childElements[j], childElements[i]];
}
childElements.forEach(child => {
element.appendChild(child);
});
break;
case 12: // Add glitch effect
element.style.position = 'relative';
element.style.overflow = 'hidden';
// Create glitch layers
const glitchAfter = document.createElement('div');
glitchAfter.className = 'glitch-layer';
glitchAfter.innerHTML = element.innerHTML;
glitchAfter.style.cssText = `
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: ${getRandomColor()};
mix-blend-mode: difference;
opacity: 0.${getRandomNumber(3, 8)};
transform: translate3d(${getRandomNumber(-10, 10)}px, ${getRandomNumber(-10, 10)}px, 0);
clip-path: polygon(${getRandomNumber(0, 20)}% 0%, 100% ${getRandomNumber(0, 30)}%, ${getRandomNumber(60, 100)}% 100%, 0% ${getRandomNumber(50, 100)}%);
z-index: 1;
pointer-events: none;
`;
element.appendChild(glitchAfter);
break;
}
state.transformedElements.add(element.id || `el-${Date.now()}`);
state.mutationCount++;
}
// More advanced transformation: combine elements or split them
function combineElements() {
const mainContent = document.getElementById('mainContent');
const sidebar = document.getElementById('sidebar');
if (mainContent && sidebar && !state.transformedElements.has('combined-content')) {
const wrapper = document.getElementById('contentWrapper');
wrapper.innerHTML = '';
const combinedElement = document.createElement('div');
combinedElement.id = 'combined-content';
combinedElement.className = 'combined-section fade-in';
combinedElement.innerHTML = `
<h2>Contents Merged</h2>
<p>The structure of this page continues to evolve...</p>
<div class="content-grid">
${mainContent.innerHTML}
${sidebar.innerHTML}
</div>
`;
combinedElement.style.cssText = `
background: linear-gradient(135deg, ${getRandomColor()} 0%, ${getRandomColor()} 100%);
padding: 30px;
border-radius: 10px;
color: white;
box-shadow: 0 10px 30px rgba(0,0,0,0.3);
`;
wrapper.appendChild(combinedElement);
// Style the combined grid
const contentGrid = combinedElement.querySelector('.content-grid');
if (contentGrid) {
contentGrid.style.cssText = `
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
grid-gap: 20px;
margin-top: 20px;
`;
}
state.transformedElements.add('combined-content');
state.mutationCount++;
}
}
function splitIntoFragments(element) {
if (!element || state.transformedElements.has(`split-${element.id}`)) {
return;
}
const fragments = getRandomNumber(3, 6);
const content = element.innerHTML;
element.innerHTML = '';
for (let i = 0; i < fragments; i++) {
const fragment = document.createElement('div');
fragment.className = 'fragment fade-in';
fragment.innerHTML = `<div class="fragment-content">${i === 0 ? content : ''}</div>`;
fragment.style.cssText = `
flex: 1;
min-width: ${getRandomNumber(100, 300)}px;
background-color: ${getRandomColor()};
margin: 10px;
padding: 15px;
border-radius: ${getRandomNumber(0, 20)}px;
transform: rotate(${getRandomNumber(-5, 5)}deg);
box-shadow: 0 ${getRandomNumber(5, 15)}px ${getRandomNumber(10, 30)}px rgba(0,0,0,0.${getRandomNumber(1, 8)});
transition: transform 0.5s cubic-bezier(0.68, -0.55, 0.27, 1.55);
`;
element.appendChild(fragment);
// Add hover effect
fragment.addEventListener('mouseover', function() {
this.style.transform = `rotate(${getRandomNumber(-10, 10)}deg) scale(1.05)`;
});
fragment.addEventListener('click', function() {
transformElement(this);
});
}
element.style.display = 'flex';
element.style.flexWrap = 'wrap';
element.style.justifyContent = 'center';
state.transformedElements.add(`split-${element.id}`);
state.mutationCount++;
}
// Create entirely new elements
function createNewElement() {
const container = document.body;
const newElement = document.createElement('div');
newElement.id = `new-element-${Date.now()}`;
newElement.className = 'dynamic-element fade-in';
const elementType = getRandomNumber(1, 5);
switch(elementType) {
case 1: // Info card
newElement.innerHTML = `
<h3>New Information</h3>
<p>This element was dynamically created during the page transformation.</p>
<button class="transform-trigger">Interact</button>
`;
newElement.style.cssText = `
background-color: ${getRandomColor()};
color: white;
padding: 20px;
border-radius: 10px;
margin: 20px auto;
max-width: 600px;
box-shadow: 0 5px 15px rgba(0,0,0,0.3);
`;
break;
case 2: // Image placeholder
newElement.innerHTML = `
<div class="image-placeholder">
<div class="placeholder-icon">🖼️</div>
<p>Image ${Math.floor(Math.random() * 1000)}</p>
</div>
`;
newElement.style.cssText = `
background-color: ${getRandomColor()};
padding: 20px;
border-radius: ${getRandomNumber(0, 20)}px;
text-align: center;
width: ${getRandomNumber(200, 380)}px;
margin: 20px auto;
`;
const placeholder = newElement.querySelector('.image-placeholder');
if (placeholder) {
placeholder.style.cssText = `
height: ${getRandomNumber(150, 250)}px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
background-color: rgba(255,255,255,0.3);
border-radius: 5px;
`;
}
const icon = newElement.querySelector('.placeholder-icon');
if (icon) {
icon.style.fontSize = '3rem';
}
break;
case 3: // Navigation bar
newElement.innerHTML = `
<div class="new-nav">
<a href="#" class="new-nav-item">Section 1</a>
<a href="#" class="new-nav-item">Section 2</a>
<a href="#" class="new-nav-item">Section 3</a>
</div>
`;
newElement.style.cssText = `
background-color: ${getRandomColor()};
padding: 15px;
border-radius: 8px;
margin: 20px auto;
max-width: 800px;
`;
const navLinks = newElement.querySelectorAll('.new-nav-item');
navLinks.forEach(link => {
link.style.cssText = `
color: white;
text-decoration: none;
padding: 10px 15px;
margin: 0 5px;
border-radius: 5px;
background-color: rgba(0,0,0,0.2);
transition: transform 0.3s, background-color 0.3s;
display: inline-block;
`;
link.addEventListener('mouseover', function() {
this.style.backgroundColor = 'rgba(0,0,0,0.4)';
this.style.transform = 'translateY(-3px)';
});
link.addEventListener('mouseout', function() {
this.style.backgroundColor = 'rgba(0,0,0,0.2)';
this.style.transform = 'translateY(0)';
});
});
break;
case 4: // Quote block
newElement.innerHTML = `
<blockquote>
<p>"The page continues to transform with each interaction, never to be the same again."</p>
<cite>— The Morphing Algorithm</cite>
</blockquote>
`;
newElement.style.cssText = `
background-color: ${getRandomColor()};
padding: 30px;
border-radius: 10px;
margin: 30px auto;
max-width: 700px;
position: relative;
`;
const blockquote = newElement.querySelector('blockquote');
if (blockquote) {
blockquote.style.cssText = `
font-style: italic;
font-size: 1.2rem;
color: white;
border-left: 5px solid rgba(255,255,255,0.5);
padding-left: 20px;
margin: 0;
`;
}
const cite = newElement.querySelector('cite');
if (cite) {
cite.style.cssText = `
display: block;
margin-top: 15px;
text-align: right;
font-weight: bold;
`;
}
break;
case 5: // Interactive element
newElement.innerHTML = `
<div class="interactive-box">
<h3>Interactive Element</h3>
<p>Click inside this box to trigger changes</p>
<div class="interaction-area"></div>
</div>
`;
newElement.style.cssText = `
background-color: ${getRandomColor()};
padding: 20px;
border-radius: 15px;
margin: 25px auto;
max-width: 500px;
text-align: center;
color: white;
`;
const interactionArea = newElement.querySelector('.interaction-area');
if (interactionArea) {
interactionArea.style.cssText = `
height: 150px;
background-color: rgba(255,255,255,0.2);
border-radius: 10px;
margin-top: 15px;
cursor: pointer;
display: flex;
justify-content: center;
align-items: center;
font-size: 2rem;
transition: all 0.3s;
`;
interactionArea.addEventListener('click', function(e) {
e.stopPropagation();
const x = e.offsetX;
const y = e.offsetY;
const ripple = document.createElement('div');
ripple.className = 'ripple';
ripple.style.cssText = `
position: absolute;
width: 10px;
height: 10px;
background-color: rgba(255,255,255,0.7);
border-radius: 50%;
transform: translate(-50%, -50%);
animation: ripple 1s linear forwards;
left: ${x}px;
top: ${y}px;
pointer-events: none;
`;
this.style.backgroundColor = getRandomColor();
this.appendChild(ripple);
setTimeout(() => {
ripple.remove();
}, 1000);
this.innerHTML += '🔄';
// Trigger a mutation somewhere else
const randomElement = getRandomElementToTransform();
if (randomElement) transformElement(randomElement);
});
}
// Add animation keyframes
const styleSheet = document.styleSheets[0];
styleSheet.insertRule(`
@keyframes ripple {
0% {
width: 0px;
height: 0px;
opacity: 0.5;
}
100% {
width: 500px;
height: 500px;
opacity: 0;
}
}
`, styleSheet.cssRules.length);
break;
}
// Add event listeners to the new element
newElement.addEventListener('click', function() {
transformElement(this);
});
const transformTrigger = newElement.querySelector('.transform-trigger');
if (transformTrigger) {
transformTrigger.addEventListener('click', function(e) {
e.stopPropagation();
const randomElement = getRandomElementToTransform();
if (randomElement) transformElement(randomElement);
});
}
// Find a random position to insert the new element
const possibleContainers = [
document.body,
document.getElementById('mainContent'),
document.getElementById('contentWrapper')
].filter(el => el);
const targetContainer = getRandomItem(possibleContainers);
const insertPosition = Math.min(
getRandomNumber(0, targetContainer.children.length),
targetContainer.children.length
);
if (insertPosition === targetContainer.children.length || targetContainer.children.length === 0) {
targetContainer.appendChild(newElement);
} else {
targetContainer.insertBefore(newElement, targetContainer.children[insertPosition]);
}
state.mutationCount++;
return newElement;
}
// Get random element to transform
function getRandomElementToTransform() {
const allElements = [
document.getElementById('mainHeader'),
document.getElementById('mainNav'),
document.getElementById('contentWrapper'),
document.getElementById('mainContent'),
document.getElementById('introSection'),
document.getElementById('featuresSection'),
document.getElementById('infoSection'),
document.getElementById('sidebar'),
document.getElementById('mainFooter'),
...document.querySelectorAll('.card'),
...document.querySelectorAll('section'),
...document.querySelectorAll('.dynamic-element')
].filter(el => el && !state.transformedElements.has(el.id || ''));
if (allElements.length === 0) {
return null;
}
return getRandomItem(allElements);
}
// Event handlers for different interaction types
function handleClick(e) {
state.interactionCount++;
// More aggressive transformations as user interacts more
const numTransformations = Math.min(3, Math.floor(state.interactionCount / 3) + 1);
for (let i = 0; i < numTransformations; i++) {
const element = getRandomElementToTransform();
if (element) {
transformElement(element);
}
}
// Sometimes combine or split elements
if (state.interactionCount % 4 === 0) {
combineElements();
}
if (state.interactionCount % 5 === 0) {
const elementsToSplit = [
document.getElementById('mainContent'),
document.getElementById('sidebar'),
document.getElementById('featuresSection')
].filter(el => el);
if (elementsToSplit.length > 0) {
const elementToSplit = getRandomItem(elementsToSplit);
splitIntoFragments(elementToSplit);
}
}
// Create new elements occasionally
if (state.interactionCount % 2 === 0 || Math.random() < 0.3) {
createNewElement();
}
// Change body background occasionally
if (Math.random() < 0.2) {
document.body.style.background = `linear-gradient(${getRandomNumber(0, 360)}deg, ${getRandomColor()} 0%, ${getRandomColor()} 100%)`;
document.body.style.color = getRandomItem(['#fff', '#333', '#000', '#222']);
document.body.style.transition = 'background 1.5s ease';
}
}
function handleScroll() {
state.interactionCount++;
if (state.interactionCount % 2 === 0) {
const element = getRandomElementToTransform();
if (element) {
transformElement(element);
}
}
// Create new element on scroll occasionally
if (state.interactionCount % 3 === 0) {
createNewElement();
}
}
function handleMouseOver(e) {
if (e.target.tagName === 'BUTTON' ||
e.target.tagName === 'A' ||
e.target.classList.contains('card') ||
e.target.classList.contains('nav-item')) {
state.interactionCount++;
if (state.interactionCount % 3 === 0) {
const element = getRandomElementToTransform();
if (element) {
transformElement(element);
}
}
}
}
// Start button specific handler
function handleStartButtonClick(e) {
e.stopPropagation();
// Initial set of transformations
for (let i = 0; i < 3; i++) {
const element = getRandomElementToTransform();
if (element) {
transformElement(element);
}
}
createNewElement();
// Change the button
const button = e.target;
button.textContent = "Transformations Started";
button.disabled = true;
button.style.backgroundColor = "#27ae60";
// Add a message
const notification = document.createElement('div');
notification.className = 'notification fade-in';
notification.textContent = "The page is now alive! Keep interacting...";
notification.style.cssText = `
position: fixed;
top: 20px;
right: 20px;
background-color: rgba(0,0,0,0.8);
color: white;
padding: 15px 20px;
border-radius: 5px;
z-index: 1000;
box-shadow: 0 5px 15px rgba(0,0,0,0.3);
`;
document.body.appendChild(notification);
setTimeout(() => {
notification.style.opacity = '0';
setTimeout(() => {
notification.remove();
}, 500);
}, 3000);
}
// Set up event listeners
document.addEventListener('DOMContentLoaded', function() {
document.body.addEventListener('click', handleClick);
window.addEventListener('scroll', handleScroll);
document.body.addEventListener('mouseover', handleMouseOver);
const startButton = document.getElementById('startButton');
if (startButton) {
startButton.addEventListener('click', handleStartButtonClick);
}
// Give unique IDs to elements that need them
const elementsNeedingIds = document.querySelectorAll('.card, section, nav a');
elementsNeedingIds.forEach((el, index) => {
if (!el.id) {
el.id = `element-${index}-${Date.now()}`;
}
});
// Start with a small change
setTimeout(() => {
const header = document.getElementById('mainHeader');
if (header) {
header.style.backgroundColor = getRandomColor();
header.style.transition = 'background-color 1s ease';
}
}, 2000);
});
</script>
</body>
</html>
```Drag to resize
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Mutating DOM Organism</title>
<style>
body {
margin: 0;
font-family: Arial, sans-serif;
background: linear-gradient(to bottom, #1a1a2e, #16213e);
color: #e8e8e8;
transition: background 1s ease;
min-height: 100vh;
}
header {
background: #0f3460;
padding: 20px;
text-align: center;
transition: all 0.8s ease;
border-bottom: 2px solid #e94560;
}
nav {
background: rgba(25, 45, 75, 0.8);
padding: 10px;
transition: transform 0.5s ease, opacity 0.7s ease;
}
nav ul {
list-style: none;
padding: 0;
display: flex;
justify-content: center;
gap: 20px;
}
nav a {
color: #e8e8e8;
text-decoration: none;
padding: 5px 10px;
transition: color 0.3s ease, transform 0.3s ease;
}
nav a:hover {
color: #e94560;
transform: scale(1.1);
}
.container {
max-width: 800px;
margin: 20px auto;
padding: 20px;
transition: max-width 1s ease, background 0.8s ease;
}
.section {
background: rgba(25, 45, 75, 0.6);
padding: 15px;
margin-bottom: 20px;
border-radius: 8px;
transition: opacity 0.6s ease, transform 0.6s ease, background 0.6s ease;
}
.section h2 {
margin-top: 0;
color: #ff2e63;
transition: font-size 0.5s ease;
}
.section p {
line-height: 1.6;
transition: color 0.5s ease;
}
.mutation-trigger {
cursor: pointer;
color: #ff2e63;
transition: color 0.3s ease;
}
.mutation-trigger:hover {
color: #ff9e7d;
}
.hidden {
opacity: 0;
transform: scale(0.8);
}
.expanded {
transform: scale(1.2);
background: rgba(100, 50, 75, 0.8);
}
</style>
</head>
<body>
<header id="mainHeader">
<h1>Welcome to the Living Page</h1>
<p>Interact and watch me evolve...</p>
</header>
<nav id="mainNav">
<ul>
<li><a href="#" class="mutation-trigger" data-action="navMorph">Home</a></li>
<li><a href="#" class="mutation-trigger" data-action="navMorph">About</a></li>
<li><a href="#" class="mutation-trigger" data-action="navMorph">Contact</a></li>
</ul>
</nav>
<div class="container" id="mainContainer">
<div class="section" id="section1">
<h2>First Segment</h2>
<p>Click me to see something vanish. This page is alive and will react to your touch.</p>
</div>
<div class="section" id="section2">
<h2>Second Segment</h2>
<p>Hover over me to duplicate chaos. I am temporary, like all things here.</p>
</div>
<div class="section" id="section3">
<h2>Third Segment</h2>
<p>Scroll and watch the organism grow. I might not survive the change.</p>
</div>
</div>
<script>
let mutationCount = 0;
let hasMorphed = { header: false, nav: false, section1: false, section2: false, section3: false };
function createRandomElement(type, content, parent) {
const el = document.createElement(type);
el.textContent = content;
el.style.transition = 'all 0.6s ease';
el.style.color = `hsl(${Math.random() * 360}, 70%, 70%)`;
el.style.transform = `rotate(${Math.random() * 10 - 5}deg)`;
parent.appendChild(el);
setTimeout(() => {
el.style.opacity = '0.3';
setTimeout(() => {
if (el.parentNode) el.parentNode.removeChild(el);
}, 3000);
}, 1000);
}
function morphHeader() {
if (hasMorphed.header) return;
const header = document.getElementById('mainHeader');
header.innerHTML = '<h1>I Am Changing</h1><p>My old self is gone forever.</p>';
header.style.background = '#2d132c';
header.style.transform = 'skewY(-2deg)';
hasMorphed.header = true;
mutationCount++;
checkFinalState();
}
function morphNav() {
if (hasMorphed.nav) return;
const nav = document.getElementById('mainNav');
nav.style.transform = 'translateY(-50px)';
nav.style.opacity = '0.5';
nav.innerHTML = '<p>Navigation is obsolete now.</p>';
hasMorphed.nav = true;
mutationCount++;
checkFinalState();
}
function morphSection(sectionId, type) {
if (hasMorphed[sectionId]) return;
const section = document.getElementById(sectionId);
if (type === 'vanish') {
section.classList.add('hidden');
setTimeout(() => {
if (section.parentNode) section.parentNode.removeChild(section);
}, 600);
} else if (type === 'duplicate') {
const clone = section.cloneNode(true);
clone.id = sectionId + '_clone_' + Date.now();
section.parentNode.insertBefore(clone, section.nextSibling);
clone.style.transform = 'rotate(5deg)';
clone.style.background = 'rgba(75, 25, 100, 0.6)';
} else if (type === 'expand') {
section.classList.add('expanded');
section.innerHTML = '<h2>Mutated Form</h2><p>I have grown beyond my original purpose.</p>';
section.style.fontSize = '1.2em';
}
hasMorphed[sectionId] = true;
mutationCount++;
checkFinalState();
}
function checkFinalState() {
if (mutationCount >= 5) {
const container = document.getElementById('mainContainer');
container.style.maxWidth = '100vw';
container.style.background = 'rgba(50, 10, 50, 0.5)';
document.body.style.background = 'linear-gradient(to top, #2d132c, #801336)';
const finalMessage = document.createElement('div');
finalMessage.style.cssText = `
position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%);
color: #ff9e7d; font-size: 2em; text-align: center;
transition: all 1s ease;
`;
finalMessage.innerHTML = '<h1>The Organism Has Evolved</h1><p>Nothing remains as it was.</p>';
document.body.appendChild(finalMessage);
setTimeout(() => {
finalMessage.style.opacity = '0.7';
finalMessage.style.transform = 'translate(-50%, -50%) scale(1.1)';
}, 100);
}
}
// Event Listeners
document.getElementById('section1').addEventListener('click', () => morphSection('section1', 'vanish'));
document.getElementById('section2').addEventListener('mouseover', () => morphSection('section2', 'duplicate'));
document.getElementById('section3').addEventListener('click', () => morphSection('section3', 'expand'));
document.getElementById('mainHeader').addEventListener('click', morphHeader);
document.querySelectorAll('.mutation-trigger[data-action="navMorph"]').forEach(el => {
el.addEventListener('click', (e) => {
e.preventDefault();
morphNav();
});
});
window.addEventListener('scroll', () => {
if (Math.random() > 0.8) {
createRandomElement('div', 'Fragmented Code', document.body);
}
});
</script>
</body>
</html>Drag to resize
This HTML file creates a web page that deconstructs and rebuilds itself in response to your interaction. As you click, hover, and scroll, the elements will undergo irreversible transformations, creating a new, chaotic, yet functional interface from the remnants of the old one.
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>The Living Document</title>
<style>
:root {
--bg-color: #1a1a1d;
--text-color: #f0f0f0;
--primary-color: #4b8f8c;
--accent-color: #c83e74;
--border-color: #6d6d6d;
--glitch-color-1: #00ff00;
--glitch-color-2: #ff00ff;
}
* {
box-sizing: border-box;
/* The core of the organic feel. All properties transition smoothly. */
transition: all 0.6s cubic-bezier(0.68, -0.55, 0.27, 1.55);
}
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
background-color: var(--bg-color);
color: var(--text-color);
margin: 0;
padding: 2rem;
line-height: 1.6;
overflow-x: hidden;
}
header, nav, main, section, article, footer {
border: 1px solid var(--border-color);
padding: 1.5rem;
margin-bottom: 1.5rem;
border-radius: 8px;
background-color: rgba(255, 255, 255, 0.02);
}
h1, h2, h3 {
color: var(--primary-color);
text-shadow: 1px 1px 5px rgba(0,0,0,0.5);
margin-top: 0;
}
a {
color: var(--accent-color);
text-decoration: none;
font-weight: bold;
padding: 0.2em 0.4em;
border-radius: 4px;
}
nav ul {
list-style: none;
padding: 0;
margin: 0;
display: flex;
gap: 1rem;
}
p {
max-width: 80ch;
}
#mutation-counter-display {
position: fixed;
top: 10px;
right: 20px;
padding: 10px 15px;
background: var(--primary-color);
color: var(--bg-color);
font-weight: bold;
border-radius: 5px;
z-index: 1000;
box-shadow: 0 0 15px rgba(0,0,0,0.7);
}
/* --- Mutation & Utility Classes --- */
.disappearing {
transform: scale(0);
opacity: 0;
max-height: 0 !important;
padding: 0 !important;
margin: 0 !important;
border-width: 0 !important;
overflow: hidden;
}
.morphed-container {
border-style: dashed;
border-color: var(--accent-color);
transform: skew(-2deg, -1deg);
background: radial-gradient(circle, var(--bg-color) 0%, var(--accent-color) 200%);
}
.morphed-text {
font-family: 'Courier New', Courier, monospace;
text-transform: uppercase;
letter-spacing: 3px;
color: var(--glitch-color-1);
text-shadow: 2px 2px var(--glitch-color-2);
}
.newly-born {
padding: 2rem;
border: 2px solid var(--primary-color);
background: var(--bg-color);
box-shadow: 0 0 20px var(--primary-color);
animation: fadeIn 1s ease-out;
display: flex;
flex-direction: column;
gap: 1rem;
align-items: center;
}
.newly-born canvas {
border: 1px solid var(--accent-color);
background: #000;
max-width: 100%;
}
@keyframes fadeIn {
from { opacity: 0; transform: translateY(20px); }
to { opacity: 1; transform: translateY(0); }
}
</style>
</head>
<body>
<header id="main-header">
<h1 id="main-title">The Living Document</h1>
<p>Interact with this page. Click, hover, or scroll. Observe the evolution.</p>
</header>
<div id="mutation-counter-display">Mutations: 0</div>
<nav id="main-nav">
<ul>
<li><a href="#link1">Genesis</a></li>
<li><a href="#link2">Metamorphosis</a></li>
<li><a href="#link3">Synthesis</a></li>
<li><a href="#link4">Epilogue</a></li>
</ul>
</nav>
<main id="content-area">
<section id="section-one">
<h2>Chapter 1: The Stable State</h2>
<article id="article-one">
<h3>Initial Form</h3>
<p>This document begins in a predictable, stable state. Its structure is defined, its elements are in their designated places. It follows the rules of conventional design. But this stability is an illusion, a temporary phase waiting for a catalyst.</p>
<p>Every element you see is a candidate for change. Nothing is sacred. The very act of observation is a force of transformation.</p>
</article>
</section>
<section id="section-two">
<h2>Chapter 2: The Catalyst</h2>
<article id="article-two">
<h3>Your Interaction</h3>
<p>You are the catalyst. A simple click, a fleeting hover, the act of scrolling down the page—these are the triggers. Each interaction sends ripples through the DOM, selecting a piece of this reality and rewriting it.</p>
<p>The change is irreversible. A deleted element is gone forever. A morphed component cannot return to its original form. You are not just a visitor; you are a co-author of its chaos.</p>
</article>
</section>
</main>
<footer id="main-footer">
<p>© 2024 The Living Document Project. All rights reserved. Or are they?</p>
</footer>
<script>
document.addEventListener('DOMContentLoaded', () => {
let mutationCounter = 0;
const counterDisplay = document.getElementById('mutation-counter-display');
const MAX_MUTATIONS_BEFORE_FINALE = 40;
const hasBeenMutated = (el) => el.dataset.mutated === 'true';
const markAsMutated = (el) => {
if (!el || hasBeenMutated(el)) return false;
el.dataset.mutated = 'true';
mutationCounter++;
counterDisplay.textContent = `Mutations: ${mutationCounter}`;
if (mutationCounter >= MAX_MUTATIONS_BEFORE_FINALE) {
finalTransformation();
}
return true;
};
// --- MUTATION FUNCTIONS ---
// 1. Vanish from existence
const mutateVanish = (el) => {
if (el.children.length > 0) { // Don't vanish containers, just their content
const childToVanish = el.querySelector(':not([data-mutated])');
if(childToVanish) mutateVanish(childToVanish);
return;
}
if (!markAsMutated(el)) return;
el.classList.add('disappearing');
setTimeout(() => {
try { el.remove(); } catch(e) { /* Element might already be gone */ }
}, 600);
};
// 2. Morph style and structure
const mutateMorph = (el) => {
if (!markAsMutated(el)) return;
el.classList.add('morphed-container');
const textElements = el.querySelectorAll('p, h1, h2, h3, a, li');
textElements.forEach(textEl => {
if (!hasBeenMutated(textEl)) {
markAsMutated(textEl);
textEl.classList.add('morphed-text');
}
});
el.style.transform = `rotate(${Math.random() * 6 - 3}deg) scale(${1 + Math.random() * 0.05})`;
};
// 3. Rewrite content
const mutateRewrite = (el) => {
const targetText = el.querySelector('p, h3') || el;
if (!markAsMutated(targetText)) return;
const charPool = '█▒▓░10?!=*$#';
const newText = Array.from({ length: targetText.textContent.length }, () => charPool[Math.floor(Math.random() * charPool.length)]).join('');
targetText.textContent = `[DATA CORRUPTED: ${newText}]`;
targetText.classList.add('morphed-text');
};
// 4. Duplicate an element
const mutateDuplicate = (el) => {
const parent = el.parentElement;
if (!parent || hasBeenMutated(el) || parent.tagName === 'BODY') return;
markAsMutated(el); // Mark original so it isn't picked again easily
const clone = el.cloneNode(true);
clone.id = ''; // Avoid duplicate IDs
// Mark all elements in clone as mutated
clone.dataset.mutated = 'true';
clone.querySelectorAll('*').forEach(child => child.dataset.mutated = 'true');
clone.style.transform = `translate(${Math.random() * 40 - 20}px, ${Math.random() * 40 - 20}px)`;
parent.insertBefore(clone, el.nextSibling);
};
// 5. Replace with a new organism
const mutateToNewForm = (el) => {
if (!el.parentElement || el.tagName === 'BODY' || el.tagName === 'MAIN') return;
if (!markAsMutated(el)) return;
const newOrganism = document.createElement('div');
markAsMutated(newOrganism);
newOrganism.classList.add('newly-born');
const title = document.createElement('h3');
title.textContent = 'New Form Emerged';
markAsMutated(title);
const canvas = document.createElement('canvas');
markAsMutated(canvas);
canvas.width = 300;
canvas.height = 100;
newOrganism.append(title, canvas);
el.replaceWith(newOrganism);
// Animate the canvas
const ctx = canvas.getContext('2d');
let x = 0;
function animateCanvas() {
ctx.fillStyle = `rgba(0,0,0,0.1)`;
ctx.fillRect(0,0,canvas.width, canvas.height);
ctx.fillStyle = `hsl(${x % 360}, 100%, 50%)`;
const y = canvas.height / 2 + Math.sin(x/20) * (canvas.height/2 - 10);
ctx.beginPath();
ctx.arc(x % (canvas.width + 20) - 10, y, 5, 0, Math.PI * 2);
ctx.fill();
x++;
requestAnimationFrame(animateCanvas);
}
animateCanvas();
};
// The grand finale: a complete restructuring
const finalTransformation = () => {
// Prevent this from running more than once
if (document.body.dataset.finale === 'true') return;
document.body.dataset.finale = 'true';
const allElements = Array.from(document.body.children);
const newBody = document.createElement('div');
const controlPanel = document.createElement('div');
const contentAggregator = document.createElement('div');
// Style the new containers
newBody.style.cssText = 'display: flex; height: 100vh; padding: 0; margin: 0;';
controlPanel.style.cssText = 'width: 250px; background: #111; padding: 2rem; overflow-y: auto; border-right: 2px solid var(--primary-color);';
contentAggregator.style.cssText = 'flex-grow: 1; padding: 2rem; overflow-y: auto; background: var(--bg-color);';
const finaleTitle = document.createElement('h1');
finaleTitle.textContent = 'Final Synthesis';
controlPanel.appendChild(finaleTitle);
// Collect all links and readable text
const allLinks = document.querySelectorAll('a');
const allText = document.querySelectorAll('p, h1, h2, h3, h4, li');
allLinks.forEach(link => {
if (link.href && link.textContent.trim().length > 0) {
controlPanel.appendChild(link.cloneNode(true));
}
});
allText.forEach(text => {
const p = document.createElement('p');
p.textContent = text.textContent;
contentAggregator.appendChild(p);
});
// Replace old body content
document.body.innerHTML = '';
newBody.appendChild(controlPanel);
newBody.appendChild(contentAggregator);
document.body.appendChild(newBody);
document.body.style.padding = '0'; // Reset body padding for new layout
counterDisplay.textContent = "FINALE";
};
const mutationPool = [
mutateVanish,
mutateMorph,
mutateRewrite,
mutateDuplicate,
mutateToNewForm
];
const triggerRandomMutation = (element) => {
// Try to find a valid, non-mutated element to affect
let target = element;
while (target && (hasBeenMutated(target) || ['BODY', 'HTML', 'MAIN'].includes(target.tagName))) {
target = target.parentElement;
}
if (!target || target.id === 'mutation-counter-display') return;
const randomMutation = mutationPool[Math.floor(Math.random() * mutationPool.length)];
randomMutation(target);
};
// --- EVENT LISTENERS ---
document.body.addEventListener('click', (e) => {
triggerRandomMutation(e.target);
});
document.body.addEventListener('mouseover', (e) => {
// Low probability to avoid chaos on mouse move
if (Math.random() < 0.1) {
triggerRandomMutation(e.target);
}
});
let scrollTimeout;
window.addEventListener('scroll', () => {
clearTimeout(scrollTimeout);
scrollTimeout = setTimeout(() => {
// On scroll, find a random non-mutated element anywhere and change it
const unmutatedElements = document.querySelectorAll('body *:not([data-mutated])');
const validElements = Array.from(unmutatedElements).filter(el => el.id !== 'mutation-counter-display' && el.offsetParent !== null);
if (validElements.length > 0) {
const randomElement = validElements[Math.floor(Math.random() * validElements.length)];
triggerRandomMutation(randomElement);
}
}, 100);
}, { passive: true });
});
</script>
</body>
</html>
```Drag to resize
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Ephemeral Page</title>
<style>
body {
font-family: sans-serif;
margin: 0;
padding: 0;
background-color: #f0f0f0;
transition: background-color 0.5s ease;
}
header {
background-color: #333;
color: white;
padding: 1em;
text-align: center;
transition: background-color 0.5s ease;
}
nav {
background-color: #444;
color: white;
padding: 0.5em;
text-align: center;
transition: background-color 0.5s ease;
}
nav ul {
list-style: none;
padding: 0;
margin: 0;
display: inline-block;
}
nav li {
display: inline;
margin: 0 1em;
transition: all 0.3s ease;
}
nav a {
color: white;
text-decoration: none;
transition: color 0.3s ease;
}
main {
padding: 1em;
transition: padding 0.5s ease;
}
.content-section {
background-color: white;
padding: 1em;
margin-bottom: 1em;
border: 1px solid #ccc;
transition: all 0.5s ease;
}
.dynamic-element {
padding: 0.5em;
border: 1px solid blue;
margin: 0.5em;
transition: all 0.3s ease;
}
.morph {
transition: transform 0.5s ease, background-color 0.5s ease;
}
.blink {
animation: blinker 1s linear infinite;
}
@keyframes blinker {
50% {
opacity: 0;
}
}
</style>
</head>
<body>
<header>
<h1>Ephemeral Page</h1>
</header>
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
<main>
<div class="content-section">
<h2>Section 1</h2>
<p>This is the first section of the page. It will eventually disappear.</p>
</div>
<div class="content-section">
<h2>Section 2</h2>
<p>More content here. Prepare for the unexpected.</p>
</div>
</main>
<script>
// Delay function for smoother transitions
function delay(ms) {
return new Promise(res => setTimeout(res, ms));
}
async function mutateDOM() {
while (document.body) {
await delay(500); //small pause to allow transitions
// Randomly delete elements
const elementsToDelete = document.querySelectorAll('*');
for (let i = 0; i < Math.floor(elementsToDelete.length * 0.1); i++) {
const element = elementsToDelete[Math.floor(Math.random() * elementsToDelete.length)];
if (element.parentNode) {
element.parentNode.removeChild(element);
}
}
// Randomly duplicate elements
const elementsToDuplicate = document.querySelectorAll('*');
for (let i = 0; i < Math.floor(elementsToDuplicate.length * 0.05); i++) {
const element = elementsToDuplicate[Math.floor(Math.random() * elementsToDuplicate.length)];
if (element.parentNode) {
const clone = element.cloneNode(true);
element.parentNode.insertBefore(clone, element.nextSibling);
}
}
// Randomly morph elements
const morphableElements = document.querySelectorAll('.morph');
for (let i = 0; i < morphableElements.length; i++) {
const element = morphableElements[i];
const randomColor = '#' + Math.floor(Math.random()*16777215).toString(16);
element.style.backgroundColor = randomColor;
element.style.transform = `scale(${Math.random() + 0.5})`; // Scale between 1.5 and 2.5
}
//Add blink to some random elements
const blinkableElements = document.querySelectorAll('*');
for(let i = 0; i < Math.floor(blinkableElements.length * 0.02); i++){
const element = blinkableElements[Math.floor(Math.random() * blinkableElements.length)];
element.classList.add('blink');
setTimeout(() => {
element.classList.remove('blink');
}, 3000); //remove after 3 seconds
}
//Add more dynamic elements
const mainElement = document.querySelector('main');
if(mainElement){
const newElement = document.createElement('div');
newElement.classList.add('dynamic-element', 'morph');
newElement.textContent = "New Dynamic Element";
mainElement.appendChild(newElement);
}
//Change background color occasionally
document.body.style.backgroundColor = '#' + Math.floor(Math.random()*16777215).toString(16);
}
}
// Initial layout
document.body.addEventListener('DOMContentLoaded', function() {
mutateDOM();
});
</script>
</body>
</html>
```Drag to resize
```html
<!DOCTYPE html>
<html>
<head>
<title>Living DOM</title>
<style>
* {
transition: all 0.5s ease;
}
.vanishing {
opacity: 0;
}
.duplicated {
transform: scale(1.1);
}
.morphed {
background-color: #ff0;
color: #000;
}
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 20px;
}
header {
background: #333;
color: white;
padding: 1em;
margin-bottom: 1em;
}
nav ul {
list-style: none;
padding: 0;
display: flex;
gap: 1em;
}
nav a {
color: #333;
text-decoration: none;
padding: 0.5em;
}
nav a:hover {
background: #eee;
}
main {
display: grid;
gap: 1em;
}
section {
background: #f4f4f4;
padding: 1em;
}
</style>
</head>
<body>
<header>
<h1>Living DOM</h1>
</header>
<nav>
<ul>
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
</ul>
</nav>
<main>
<section class="content">
<h2>Section 1</h2>
<p>Content for section 1.</p>
</section>
<section class="content">
<h2>Section 2</h2>
<p>Content for section 2.</p>
</section>
</main>
<script>
// Systematic mutations on load
setInterval(() => {
const elements = document.querySelectorAll('*');
const eligible = Array.from(elements).filter(el => !el.dataset.mutated);
if (eligible.length === 0) return;
const element = eligible[Math.floor(Math.random() * eligible.length)];
const mutations = [vanishElement, duplicateElement, morphElement];
const randomMutation = mutations[Math.floor(Math.random() * mutations.length)];
randomMutation(element);
}, 2000);
// Event handlers
document.addEventListener('click', handleClick);
document.addEventListener('mouseenter', handleHover);
window.addEventListener('scroll', handleScroll);
function handleClick(e) {
vanishElement(e.target);
}
function handleHover(e) {
duplicateElement(e.target);
}
function handleScroll() {
const elements = document.querySelectorAll('*');
const eligible = Array.from(elements).filter(el => !el.dataset.mutated);
if (eligible.length === 0) return;
const element = eligible[Math.floor(Math.random() * eligible.length)];
morphElement(element);
}
function vanishElement(element) {
if (element.dataset.mutated) return;
element.classList.add('vanishing');
element.addEventListener('transitionend', () => {
element.remove();
});
element.dataset.mutated = true;
}
function duplicateElement(element) {
if (element.dataset.mutated) return;
const clone = element.cloneNode(true);
element.parentNode.appendChild(clone);
element.dataset.mutated = true;
clone.classList.add('duplicated');
}
function morphElement(element) {
if (element.dataset.mutated) return;
const tagNames = ['div', 'article', 'aside', 'footer', 'header'];
const newTag = tagNames[Math.floor(Math.random() * tagNames.length)];
const newElement = document.createElement(newTag);
newElement.innerHTML = element.innerHTML;
newElement.className = element.className;
Array.from(element.attributes).forEach(attr => {
newElement.setAttribute(attr.name, attr.value);
});
element.parentNode.replaceChild(newElement, element);
newElement.dataset.mutated = true;
}
</script>
</body>
</html>
```Drag to resize
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Self-Mutating DOM Experience</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
html, body {
margin: 0;
padding: 0;
background: #181a1b;
color: #f9f9f9;
font-family: 'Segoe UI', sans-serif;
min-height: 100vh;
transition: background 2s cubic-bezier(.77,0,.18,1);
}
header {
background: linear-gradient(90deg,#3f4c6b,#606c88);
box-shadow: 0 2px 15px #0008;
padding: 2rem;
text-align: center;
font-size: 2.5rem;
letter-spacing: 0.1em;
transition: background 1.2s, color 1.2s, opacity 1.4s;
}
nav {
background: #24262a;
display: flex;
justify-content: center;
gap: 2em;
padding: 1em;
font-size: 1.2rem;
border-bottom: 2px solid #35363A;
transition: background 1.5s, opacity 1.7s;
}
nav a {
color: #f9f9f9;
text-decoration: none;
transition: color 1.5s, font-size 1.2s;
padding: 0.3em 1em;
border-radius: 5px;
}
nav a:hover {
background: #3f4c6bBB;
color: #fcaf3e;
font-size: 1.3rem;
transition: background 0.6s, color 0.6s, font-size 0.6s;
}
main {
padding: 3em 5%;
display: flex;
flex-wrap: wrap;
gap: 2em;
justify-content: space-between;
transition: gap 1.6s;
}
section {
background: #23272e;
border-radius: 1em;
flex: 1 1 300px;
box-shadow: 0 2px 12px #0006;
margin-bottom: 2em;
min-width: 250px;
padding: 2em;
transition: background 2s cubic-bezier(.77,0,.18,1),
border-radius 1.5s, filter 2s, opacity 2.5s,
transform 1.22s cubic-bezier(.17,0,.87,1);
position: relative;
z-index: 1;
}
h2 {
margin-top: 0;
font-size: 1.5em;
letter-spacing: 0.06em;
color: #6eb6ff;
transition: color 1.5s, filter 1.7s;
}
footer {
text-align: center;
padding: 1.5em 0;
border-top: 1px solid #24262a;
color: #8a8f99;
transition: color 1.3s;
}
/* Mutation Classes */
.fade-out {
opacity: 0 !important;
pointer-events: none !important;
filter: blur(8px) grayscale(100%);
transform: scale(0.8) rotate(-4deg);
transition: all 1.8s cubic-bezier(.87,0,.13,1);
}
.morph {
background: linear-gradient(135deg,#ffe5ec 0%,#b8c7f1 100%);
color: #2e3440 !important;
border-radius: 50% 20% 50% 80%;
box-shadow: 0 0 40px #ecb2be88;
transform: scale(1.15) rotate(6deg);
filter: hue-rotate(80deg) blur(2px) brightness(1.2);
transition: all 2s cubic-bezier(.77,0,.18,1);
z-index: 3;
}
.glitchy {
animation: glitch 1.2s linear infinite alternate;
}
@keyframes glitch {
0% {filter: none;}
25% {filter: hue-rotate(70deg) brightness(1.5);}
50% {filter: blur(2px) contrast(2);}
75% {filter: invert(1);}
100% {filter: none;}
}
.duplicated {
box-shadow: 0 0 0 5px #e0b56633, 0 0 16px #b66ce088;
border-radius: 18% 42% 38% 23%;
filter: drop-shadow(0 0 12px #aefcea66) brightness(1.12);
z-index: 4;
animation: duparu 2.5s cubic-bezier(.32,0,.78,.44) alternate infinite;
}
@keyframes duparu {
0% {transform: scale(1) rotate(0);}
60% {transform: scale(1.01) rotate(2deg);}
85% {transform: scale(1.04) rotate(-2deg);}
100% {transform: scale(1.01) rotate(0);}
}
/* General mutation transitions */
.mutating {
transition: all 1.5s cubic-bezier(.85,0,.15,1);
}
</style>
</head>
<body>
<header>
<span>Self-Mutating DOM Experience</span>
</header>
<nav>
<a href="#overview">Overview</a>
<a href="#features">Features</a>
<a href="#about">About</a>
</nav>
<main>
<section id="overview">
<h2>Overview</h2>
<p>
This page begins as an orderly, well-structured website—but it will organically evolve as you interact with it. Click, hover, and scroll to witness the DOM shed its original skin.
</p>
</section>
<section id="features">
<h2>Features</h2>
<ul>
<li>Organic mutations on every interaction</li>
<li>Smooth, living transitions</li>
<li>Unpredictable, irreversible changes</li>
</ul>
</section>
<section id="about">
<h2>About</h2>
<p>
Inspired by biological metamorphosis and creative destruction, this experiment pushes HTML, CSS, and JS to their most unpredictable—and beautiful—limits.
</p>
</section>
</main>
<footer>
Page mutates with your curiosity. <span id="mutation-count">0</span> mutations performed.
</footer>
<script>
(function() {
let mutationCount = 0;
let mutatedElements = new WeakSet();
let irreversible = new WeakSet();
// Element selection
const $ = selector => document.querySelector(selector);
const $$ = selector => Array.from(document.querySelectorAll(selector));
const rand = n => Math.floor(Math.random() * n);
// Mutation utilities
function randomFrom(arr) {
return arr[rand(arr.length)];
}
function updateMutationCount() {
mutationCount++;
$('#mutation-count').textContent = mutationCount;
}
// Irreversible mutation wrapper
function irreversibly(fn) {
return el => {
if (irreversible.has(el)) return;
irreversible.add(el);
fn(el);
};
}
// Mutation types
const MUTATIONS = [
irreversibly(function vanish(el) {
el.classList.add('fade-out');
setTimeout(() => {
el.remove();
}, 2000);
updateMutationCount();
}),
irreversibly(function morph(el) {
el.classList.add('morph', 'mutating');
el.style.opacity = 1;
el.style.background = `linear-gradient(${rand(360)}deg, #${rand(0xffffff).toString(16).padStart(6,'0')} 0%, #${rand(0xffffff).toString(16).padStart(6,'0')} 100%)`;
el.style.color = (rand(2) ? '#211e1e' : '#f7f8fd');
// Morph the content (text/HTML) unpredictably
let n = rand(3);
if (el.querySelector('h2')) {
el.querySelector('h2').textContent = [
"Osmosis",
"Mutation",
"Metamorph",
"Amorphous Zone",
"Chrysalis",
"☄︎ Transfiguration",
"Nonsense # " + rand(9999)
][rand(7)];
}
let ps = el.querySelectorAll('p,ul,li');
ps.forEach(e => {
if(rand(2)) e.innerHTML = [
"⟳ The structure will not return.",
"Hexadecimal light pours out.",
"🧬 Evolution in progress...",
"Textual anomaly detected.",
"<span style='font-size:large;'>???</span>"
][rand(5)];
else if(rand(3)===0) e.remove();
});
el.classList.add('glitchy');
updateMutationCount();
}),
irreversibly(function duplicate(el) {
let parent = el.parentElement;
if (!parent) return;
let clone = el.cloneNode(true);
clone.classList.add('duplicated', 'mutating');
// Randomly warp clone
clone.style.transform = `scale(${1 + Math.random()/4}) rotate(${rand(20)-10}deg)`;
clone.style.opacity = 0.82;
setTimeout(() => clone.style.opacity = 1, 20);
if (rand(2)) clone.style.filter = 'invert(1) saturate(1.3)';
parent.insertBefore(clone, el.nextSibling);
irreversible.add(clone);
updateMutationCount();
}),
irreversibly(function mutateStructure(el) {
// Morph nav into something else, or wrap section in nested divs
if (el.tagName === 'NAV') {
el.innerHTML = `<div class="mutating morph" style="padding:2em;">
<strong>Shed Navigation</strong>
<p>All paths lead to mutation.</p>
<span style="color: #c080ff;">⌬</span>
</div>`;
} else if (el.tagName === 'SECTION') {
const wrapper = document.createElement('div');
wrapper.className = 'mutating morph';
wrapper.style.padding = "2.5em";
wrapper.style.margin = "1.5em";
wrapper.innerHTML = `<h3>Metaplasia</h3>
<blockquote style="font-style:italic; font-size:1.2em; opacity:0.85;">
Structural rearrangement complete.
</blockquote>`;
el.replaceWith(wrapper);
}
updateMutationCount();
})
];
// Select candidates: Only elements not already mutated
function getMutationTargets() {
let candidates = [];
// Pick from visible header, nav, main > sections, and main direct children, but NOT <footer>
$$('header, nav, main > *, main > section, main').forEach(el => {
if (!irreversible.has(el)
&& el.offsetParent !== null // visible
&& !mutatedElements.has(el)
&& el.tagName !== 'FOOTER')
candidates.push(el);
});
return candidates;
}
// Main mutation logic: triggered by interaction
function triggerMutation(ev) {
let scope = document.body.contains(ev.target) ? ev.target : document.body;
let candidates = getMutationTargets().filter(e => scope.contains(e));
// Randomly pick a target (or parent)
if (candidates.length === 0) return;
let el = randomFrom(candidates);
mutatedElements.add(el);
// Randomly choose a mutation, but prefer not to vanish everything until the end
let m;
if (mutationCount > 7 && rand(3)===0) m = MUTATIONS[0];
else m = randomFrom(MUTATIONS.slice(1));
m(el);
// Encourage rapid breakdown after many mutations
if (mutationCount > 12 && rand(2) === 0 && candidates.length > 1) {
// destabilize more at end
setTimeout(() => {
let nextEl = randomFrom(candidates.filter(e=>e!==el));
randomFrom(MUTATIONS)(nextEl);
mutatedElements.add(nextEl);
}, 450 + rand(600));
}
// Escalate page-wide metamorphosis further on high mutation count
if (mutationCount > 15) {
document.body.style.background = `radial-gradient(ellipse at ${rand(100)}% ${rand(100)}%, #fbf6e7 0%, #26213B 100%)`;
document.body.classList.add('mutating');
$("footer").style.color = "#b652e9";
}
if (mutationCount > 22) {
$("footer").innerHTML = "The organism has completed its cycle.";
$("footer").style.fontSize = "1.2em";
$("footer").classList.add("fade-out");
setTimeout(() => { $("footer").remove(); }, 3000);
}
}
// Random interval for "auto-shedding"
function startAutoMutation() {
setTimeout(function mutateLoop() {
// Natural morphing
if (document.hasFocus() && rand(8)===0) triggerMutation({target:document.body});
// End state: after enough mutations, more rapid auto-mutation
if (mutationCount > 24 && rand(2)===0)
triggerMutation({target:document.body});
if (mutationCount < 30)
setTimeout(mutateLoop, 750 + rand(850));
}, 1300 + rand(1400));
}
// Event Listeners
function setupListeners() {
// Click - mutate nearest large element
document.body.addEventListener('click', ev => {
if (mutationCount > 28) return;
triggerMutation(ev);
});
// Hovering - chance to mutate hovered section/nav/header
document.body.addEventListener('mouseover', ev => {
let el = ev.target.closest('section, nav, header');
if (el && !irreversible.has(el) && rand(5)===0) {
triggerMutation({target: el});
}
});
// Scrolling - mutate after certain scrolls
let scrl = 0;
window.addEventListener('scroll', () => {
scrl++;
if (scrl % rand(4)+2 === 0 && mutationCount < 30) {
triggerMutation({target: document.body});
}
});
// Occasionally mutate on resizing
window.addEventListener('resize', () => {
if (mutationCount > 15 && rand(3)===0)
triggerMutation({target: document.body});
});
}
// Eager start
window.addEventListener('DOMContentLoaded', () => {
setupListeners();
startAutoMutation();
// After a while, make remaining elements slowly fade or morph
setTimeout(() => {
// After 29 mutations, try to finish any visible sections
if (mutationCount > 28) {
$$('main > section, .morph, .duplicated').forEach(el => {
if (!irreversible.has(el) && el)
MUTATIONS[0](el); // vanish
});
}
}, 25000);
});
})();
</script>
</body>
</html>
```Drag to resize
Below is a complete HTML file that meets the requirements. Save this as an `.html` file and open it in a browser to see the behavior.
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Morphing DOM</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
transition: background-color 2s, color 2s;
}
header {
background-color: #333;
color: white;
padding: 20px;
text-align: center;
transition: transform 1s, opacity 1s;
}
nav {
display: flex;
justify-content: space-around;
background-color: #444;
padding: 10px;
transition: transform 1s, opacity 1s;
}
nav a {
color: white;
text-decoration: none;
transition: color 0.5s;
}
section {
padding: 20px;
transition: transform 1s, opacity 1s;
}
.mutation {
animation: mutate 2s forwards;
}
@keyframes mutate {
0% { transform: scale(1); opacity: 1; }
100% { transform: scale(0.5); opacity: 0; }
}
</style>
</head>
<body>
<header>
<h1>Morphing DOM</h1>
</header>
<nav>
<a href="#" id="link1">Home</a>
<a href="#" id="link2">About</a>
<a href="#" id="link3">Contact</a>
</nav>
<section>
<h2>Welcome!</h2>
<p>This page will systematically delete and rewrite its own DOM structure in real-time.</p>
</section>
<script>
document.addEventListener('DOMContentLoaded', () => {
const body = document.body;
const header = document.querySelector('header');
const nav = document.querySelector('nav');
const section = document.querySelector('section');
const links = document.querySelectorAll('nav a');
let mutationPhase = 0;
const mutate = () => {
mutationPhase++;
switch (mutationPhase) {
case 1:
header.classList.add('mutation');
setTimeout(() => header.remove(), 2000);
body.style.backgroundColor = '#ff6f61';
body.style.color = '#fff';
break;
case 2:
nav.classList.add('mutation');
setTimeout(() => nav.remove(), 2000);
section.innerHTML = '<h2>Transforming...</h2><p>Watch me change.</p>';
break;
case 3:
section.classList.add('mutation');
setTimeout(() => {
section.remove();
body.innerHTML += '<div style="font-size: 2em; text-align: center; margin-top: 50px;">Final Form</div>';
}, 2000);
break;
default:
body.style.backgroundColor = '#2a2a2a';
body.style.color = '#0f0';
body.innerHTML = '<marquee>The page has reached its final state.</marquee>';
break;
}
};
const triggerMutation = () => {
if (mutationPhase < 3) {
mutate();
}
};
body.addEventListener('click', triggerMutation);
body.addEventListener('mouseover', triggerMutation);
body.addEventListener('scroll', triggerMutation);
links.forEach(link => {
link.addEventListener('click', (e) => {
e.preventDefault();
triggerMutation();
});
});
});
</script>
</body>
</html>
```
### How It Works:
1. **Initial Structure**: The page starts with a header, navigation, and content section.
2. **Mutation Triggers**: Clicking, hovering, or scrolling triggers irreversible DOM mutations.
3. **CSS Transitions**: Smooth transitions and animations make the changes feel organic.
4. **Phased Mutations**: The page undergoes three phases of mutations, each irreversibly altering the structure.
5. **Final State**: The page ends in an unrecognizable yet functional state with a marquee text.
Open this file in a browser and interact with it to see the transformations unfold!Drag to resize
Certainly! Below is a single HTML file that uses JavaScript to dynamically alter its DOM structure as the user interacts with the page. This example starts with a simple layout and allows elements to change state based on user interactions such as clicks, hovers, and scrolls.
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Mutating Page</title>
<style>
body {
font-family: Arial, sans-serif;
transition: all 0.5s ease;
}
header {
background-color: #4CAF50;
color: white;
padding: 15px;
text-align: center;
transition: all 0.5s ease;
}
nav {
background-color: #333;
padding: 10px;
transition: all 0.5s ease;
}
nav a {
color: white;
margin: 0 15px;
text-decoration: none;
transition: all 0.5s ease;
}
.content {
padding: 20px;
transition: all 0.5s ease;
}
.hidden {
display: none;
}
.mutated {
background-color: #ffcc00;
color: #333;
}
</style>
</head>
<body>
<header>
<h1>Mutating Page</h1>
</header>
<nav>
<a href="#" onclick="return false;">Home</a>
<a href="#" onclick="return false;">About</a>
<a href="#" onclick="return false;">Contact</a>
</nav>
<div class="content">
<section onmouseover="mutateSection(this)">
<h2>Section 1</h2>
<p>This is the first section.</p>
</section>
<section onmouseover="mutateSection(this)">
<h2>Section 2</h2>
<p>This is the second section.</p>
</section>
<section onmouseover="mutateSection(this)">
<h2>Section 3</h2>
<p>This is the third section.</p>
</section>
</div>
<script>
document.addEventListener("DOMContentLoaded", function () {
document.body.addEventListener('click', function () {
mutateElement(document.querySelector('header'));
});
window.addEventListener('scroll', function () {
mutateElement(document.querySelector('nav'));
});
});
function mutateElement(element) {
if (element) {
element.classList.add('mutated');
element.style.backgroundColor = getRandomColor();
element.addEventListener('transitionend', function () {
element.remove();
}, { once: true });
}
}
function mutateSection(element) {
element.classList.add('mutated');
element.innerHTML = '<p>This section has mutated.</p>';
}
function getRandomColor() {
const letters = '0123456789ABCDEF';
let color = '#';
for (let i = 0; i < 6; i++) {
color += letters[Math.floor(Math.random() * 16)];
}
return color;
}
</script>
</body>
</html>
```
### Explanation:
1. **CSS Transitions**: Each major element (`header`, `nav`, `.content`, `nav a`, etc.) has a transition applied to it to ensure smooth, organic-looking changes.
2. **JavaScript Mutations**:
- `mutateElement`: A function that adds a class to an element and changes its background color. It then removes the element once its transition ends.
- `mutateSection`: A function that changes the content of a section when hovered over.
- **Click Event**: When the user clicks anywhere on the page, the `header` element is mutated.
- **Scroll Event**: When the user scrolls, the `nav` element is mutated.
- **Hover Event**: On hovering over any section, its content is replaced with a new message indicating mutation.
This ensures that the page evolves with every interaction, and the changes are irreversible, resulting in a final state that's vastly different from the original layout.Drag to resize
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Mutating Page</title>
<style>
/* Initial Styles */
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
transition: all 1s;
}
header {
background-color: #333;
color: #fff;
padding: 1em;
text-align: center;
transition: all 1s;
}
nav {
background-color: #444;
padding: 1em;
transition: all 1s;
}
nav ul {
list-style: none;
margin: 0;
padding: 0;
}
nav li {
display: inline-block;
margin-right: 20px;
}
nav a {
color: #fff;
text-decoration: none;
}
.content {
display: flex;
flex-wrap: wrap;
justify-content: center;
padding: 2em;
transition: all 1s;
}
.section {
background-color: #f7f7f7;
margin: 20px;
padding: 20px;
width: calc(33.33% - 40px);
transition: all 1s;
}
/* Mutation Styles */
.mutated {
background-color: #ff69b4;
color: #fff;
padding: 10px;
transition: all 1s;
}
.duplicated {
background-color: #66ccff;
color: #fff;
padding: 10px;
transition: all 1s;
}
.vanished {
opacity: 0;
height: 0;
padding: 0;
margin: 0;
transition: all 1s;
}
</style>
</head>
<body>
<header id="header">Initial Header</header>
<nav id="nav">
<ul>
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
</ul>
</nav>
<div class="content">
<div class="section" id="section-1">Section 1</div>
<div class="section" id="section-2">Section 2</div>
<div class="section" id="section-3">Section 3</div>
</div>
<script>
// Get initial elements
const header = document.getElementById('header');
const nav = document.getElementById('nav');
const sections = document.querySelectorAll('.section');
// Mutation counters
let clickCount = 0;
let hoverCount = 0;
let scrollCount = 0;
// Event listeners
document.addEventListener('click', () => {
clickCount++;
mutateElements();
});
document.addEventListener('mouseover', () => {
hoverCount++;
mutateElements();
});
document.addEventListener('scroll', () => {
scrollCount++;
mutateElements();
});
// Mutation function
function mutateElements() {
// Randomly select an element to mutate
const elements = [header, nav, ...sections];
const element = elements[Math.floor(Math.random() * elements.length)];
// Randomly choose a mutation type
const mutationType = Math.floor(Math.random() * 3);
switch (mutationType) {
case 0:
// Vanish
element.classList.add('vanished');
break;
case 1:
// Duplicate
const duplicate = element.cloneNode(true);
duplicate.classList.add('duplicated');
element.parentNode.appendChild(duplicate);
break;
case 2:
// Morph
element.classList.add('mutated');
element.textContent = `Mutated ${element.textContent}`;
break;
}
}
</script>
</body>
</html>
```
This HTML file creates a basic webpage with a header, navigation, and content sections. As the user interacts with the page (clicks, hovers, scrolls), the JavaScript code randomly selects an element and applies one of three mutations: vanishing, duplicating, or morphing. The mutations are irreversible and are accompanied by CSS transitions to make the changes feel organic. The final state of the page is unrecognizable from its initial form, yet still functional.Drag to resize
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Mutating Page</title>
<style>
body {
font-family: Arial, sans-serif;
transition: background-color 1s ease;
}
header, nav, section {
margin: 20px;
padding: 20px;
border: 1px solid #ccc;
border-radius: 10px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
transition: all 1s ease;
}
nav ul {
list-style: none;
padding: 0;
margin: 0;
display: flex;
justify-content: space-between;
}
nav li {
margin-right: 20px;
}
nav a {
text-decoration: none;
color: #333;
transition: color 1s ease;
}
nav a:hover {
color: #666;
}
section {
background-color: #f9f9f9;
}
.hidden {
display: none;
}
.duplicated {
background-color: #ccc;
transform: scale(0.8);
}
.morphed {
border-radius: 50%;
box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
}
</style>
</head>
<body>
<header id="header">Header</header>
<nav id="nav">
<ul>
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
</ul>
</nav>
<section id="content">Content</section>
<script>
let header = document.getElementById('header');
let nav = document.getElementById('nav');
let content = document.getElementById('content');
document.addEventListener('click', function() {
if (Math.random() < 0.5) {
header.classList.add('hidden');
} else {
header.classList.remove('hidden');
header.style.backgroundColor = `#${Math.floor(Math.random()*16777215).toString(16)}`;
}
});
document.addEventListener('mouseover', function(event) {
if (event.target.tagName === 'A') {
event.target.classList.add('morphed');
}
});
document.addEventListener('scroll', function() {
if (Math.random() < 0.5) {
nav.innerHTML += nav.innerHTML;
nav.classList.add('duplicated');
} else {
nav.innerHTML = '';
let links = ['Link 1', 'Link 2', 'Link 3'];
links.forEach(function(link) {
let li = document.createElement('li');
let a = document.createElement('a');
a.href = '#';
a.textContent = link;
li.appendChild(a);
nav.appendChild(li);
});
}
});
document.addEventListener('mousemove', function() {
if (Math.random() < 0.1) {
content.style.transform = `rotate(${Math.random() * 360}deg)`;
}
});
document.addEventListener('touchstart', function() {
body.style.backgroundColor = `#${Math.floor(Math.random()*16777215).toString(16)}`;
});
let intervalId = setInterval(function() {
if (Math.random() < 0.1) {
let newSection = content.cloneNode(true);
newSection.innerHTML = 'New Content';
newSection.classList.add('duplicated');
document.body.appendChild(newSection);
}
}, 1000);
document.addEventListener('contextmenu', function(event) {
event.preventDefault();
clearInterval(intervalId);
});
</script>
</body>
</html>
```Drag to resize
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Living Organic DOM</title>
<style>
/* Initial coherent layout */
* {
box-sizing: border-box;
}
body {
margin: 0; padding: 0; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
background: linear-gradient(135deg, #ece9e6, #ffffff);
color: #222;
overflow-x: hidden;
transition: background-color 1.5s ease;
}
header {
background: #336699;
color: white;
padding: 1rem 2rem;
text-align: center;
font-size: 2rem;
position: sticky;
top: 0;
box-shadow: 0 2px 8px rgba(0,0,0,0.2);
user-select: none;
transition:
background-color 1.5s ease,
border-radius 2s ease;
}
nav {
background: #f0f0f0;
display: flex;
justify-content: center;
padding: 0.8rem 1rem;
gap: 1.2rem;
position: sticky;
top: 3.8rem;
border-bottom: 2px solid #ccc;
transition:
background-color 1.5s ease,
padding 1.5s ease,
border-color 1.5s ease;
user-select: none;
}
nav a {
text-decoration: none;
color: #336699;
font-weight: 600;
padding: 0.3rem 0.6rem;
border-radius: 4px;
transition: background-color 0.3s ease, color 0.3s ease;
cursor: pointer;
}
nav a:hover {
background: #336699;
color: white;
}
main {
padding: 2rem 2rem 4rem 2rem;
max-width: 960px;
margin: 0 auto;
display: flex;
gap: 2rem;
transition: padding 1.2s ease;
}
section {
flex: 1;
background: #fafafa;
padding: 1.5rem 1.8rem;
border-radius: 10px;
box-shadow: 0 4px 10px rgb(54 87 91 / 0.1);
transition:
background-color 1.5s ease,
transform 1.2s ease,
border-radius 2s ease,
opacity 1.5s ease;
user-select: none;
}
section h2 {
font-size: 1.5rem;
margin-top: 0;
margin-bottom: 1rem;
user-select: text;
}
section p {
font-size: 1rem;
line-height: 1.5;
user-select: text;
}
/* Organic transition classes */
.vanish {
opacity: 0 !important;
pointer-events: none !important;
transform: scale(0.1) rotateX(90deg);
transition: opacity 1.8s ease, transform 1.8s ease;
}
.duplicate {
/* duplicated element style for eased entrance */
animation: pulseDuplicate 2.5s ease forwards;
}
@keyframes pulseDuplicate {
0% {
transform: scale(0.5) rotate(-10deg);
opacity: 0;
}
50% {
transform: scale(1.1) rotate(8deg);
opacity: 0.8;
}
100% {
transform: scale(1) rotate(0deg);
opacity: 1;
}
}
.morph {
border-radius: 50% 20% / 30% 60%;
background-color: #667788 !important;
color: #eee !important;
transform: rotate(7deg) scale(1.05);
font-style: italic;
transition:
border-radius 2.5s cubic-bezier(0.2, 1, 0.3, 1),
background-color 2s ease,
color 2s ease,
transform 2s ease;
user-select: text;
}
/* Container for final unrecognizable state */
.final-state {
display: flex !important;
flex-direction: column !important;
align-items: center !important;
justify-content: center !important;
background: linear-gradient(120deg, #2b3e4c, #bd6767);
color: #ffecec !important;
font-style: oblique 20deg;
font-weight: 700;
letter-spacing: 0.14em;
text-transform: uppercase;
padding: 5rem 1rem !important;
min-height: 100vh !important;
overflow: hidden !important;
user-select: none !important;
}
/* Final morph shape for container */
.final-state > * {
margin: 0.6em 0;
transform-origin: center;
transform: rotate(-5deg) skew(10deg, 2deg);
transition: none !important;
}
</style>
</head>
<body>
<header>Symbio-DOM</header>
<nav>
<a href="#home" tabindex="1">Home</a>
<a href="#about" tabindex="2">About</a>
<a href="#services" tabindex="3">Services</a>
<a href="#contact" tabindex="4">Contact</a>
</nav>
<main>
<section id="home" tabindex="5">
<h2>Welcome to Symbio-DOM</h2>
<p>This page evolves as you interact — elements vanish, multiply, and morph organically, never reverting.</p>
</section>
<section id="about" tabindex="6">
<h2>About Us</h2>
<p>We create living web experiences that respond to your presence and slowly transform their essence.</p>
</section>
<section id="services" tabindex="7">
<h2>Services</h2>
<p>Explore interactive transformations, unique animations, and self-altering DOM structures.</p>
</section>
<section id="contact" tabindex="8">
<h2>Contact</h2>
<p>Feel the pulse. Touch, hover, scroll — and watch the page shed its skin before your eyes.</p>
</section>
</main>
<script>
(() => {
// State tracking:
// We'll mark elements as changed once mutated, so no revert possible
// Each mutation type: vanish, duplicate, morph
// User interactions: click, hover, scroll
// Once an element is mutated, it will not revert or re-mutate back
const MUTATION_TYPES = {
VANISH: 'vanish',
DUPLICATE: 'duplicate',
MORPH: 'morph',
};
// Selector for interactive elements (excluding duplicates which will be new)
const interactiveSelector = 'header, nav, nav a, main > section, main > section h2, main > section p';
// Keep track of mutated elements by reference
const mutatedElements = new WeakMap();
// Utility to assign mutation once
function markMutated(element, mutationType) {
mutatedElements.set(element, mutationType);
}
// Check if already mutated
function isMutated(element) {
return mutatedElements.has(element);
}
// Mutation functions, all irreversible
// VANISH mutation:
// Gradually fade out and shrink the element, then remove from DOM at the end
function vanishElement(el) {
if (isMutated(el)) return false;
markMutated(el, MUTATION_TYPES.VANISH);
el.style.pointerEvents = 'none';
el.classList.add('vanish');
// Remove after transition ends (~1.8s or so)
el.addEventListener('transitionend', function te(e) {
if (e.propertyName === 'opacity') {
// Fully remove element from DOM after fade out
if (el.parentNode) {
el.parentNode.removeChild(el);
}
el.removeEventListener('transitionend', te);
}
});
return true;
}
// DUPLICATE mutation:
// Clones the element, inserts the clone adjacent, animates the clone's entrance
// The clone is also marked mutated, so it won't be duplicated or vanished again
// The original remains but cannot mutate later
function duplicateElement(el) {
if (isMutated(el)) return false;
markMutated(el, MUTATION_TYPES.DUPLICATE);
// Clone deeply
const clone = el.cloneNode(true);
// Assign a random id to cloned elements to avoid DOM confusion (if id present)
if (clone.id) {
clone.id = clone.id + '-clone-' + Math.floor(Math.random() * 10000);
}
// Apply the duplicate animation class
clone.classList.add('duplicate');
// Make cloned element interactive only if original was interactive
// BUT mark clone mutated immediately to prevent infinite clones
mutatedElements.set(clone, MUTATION_TYPES.DUPLICATE);
// Insert clone after original
if (el.parentNode) {
el.parentNode.insertBefore(clone, el.nextSibling);
}
// The clone's event handlers won't propagate automatically, so add handlers later globally
// Mark duplicate clone and re-bind events delegated globally.
return true;
}
// MORPH mutation:
// Changes shape, colors, and text style, giving organic new design
// Changes text content into altered or merged content (like small poetic phrases)
// Cannot revert
function morphElement(el) {
if (isMutated(el)) return false;
markMutated(el, MUTATION_TYPES.MORPH);
// Apply morph class
el.classList.add('morph');
// Modify text content if any text nodes inside (replace text with organic phrases)
// For elements with children, we'll selectively morph last child text or text of h2 or paragraphs
const organicPhrases = [
"shedding the old",
"embracing change",
"pulse quickens",
"renew in flux",
"fractured beauty",
"fade into bloom",
"embrace the void",
"whispers of form",
"alive and shifting",
"ephemeral dance"
];
function morphTextContent(element) {
// Find text nodes and replace content randomly
const walker = document.createTreeWalker(element, NodeFilter.SHOW_TEXT, null, false);
let texts = [];
while(walker.nextNode()) {
if(walker.currentNode.textContent.trim().length > 2){
texts.push(walker.currentNode);
}
}
if (texts.length){
texts.forEach(t => {
// Replace some portion
const phrase = organicPhrases[(Math.random()*organicPhrases.length)|0];
// Mix original text with phrase
t.textContent = phrase;
});
}
}
morphTextContent(el);
// Gradually transform shape and color shifts done by CSS transitions
return true;
}
// Global mutation logic & interaction handlers
// To keep mutations organic and growing, define a mutation queue to process
const mutationQueue = [];
// A helper to randomly pick an element from current live interactive elements that are not mutated
function pickRandomUnmutated() {
const candidates = [...document.querySelectorAll(interactiveSelector)].filter(el => !isMutated(el));
if (!candidates.length) return null;
return candidates[(Math.random() * candidates.length) | 0];
}
// On page load, do some minimal mutations to start "living"
function initialMutation() {
const firstPick = pickRandomUnmutated();
if (firstPick) {
// Vanish or morph or duplicate randomly for first mutation
const choice = Math.random();
if (choice < 0.4) vanishElement(firstPick);
else if (choice < 0.7) morphElement(firstPick);
else duplicateElement(firstPick);
}
}
// On user interaction, trigger new mutations and never revert
// We'll use event delegation for clicks and mouseenter (hover), and scroll for main body
// Prevent mutation spamming: throttle mutation trigger times
let lastMutationTime = 0;
const mutationCooldown = 700; // ms
function tryTriggerMutation(event) {
if (!(event.target instanceof Element)) return;
if (Date.now() - lastMutationTime < mutationCooldown) return;
lastMutationTime = Date.now();
// Pick a relevant element, prefer the event.target if unmutated
let target = event.target.closest(interactiveSelector);
if (!target || isMutated(target)) {
target = pickRandomUnmutated();
}
if (!target) return;
// Mutation probabilities skewed by event type
let mutationChoice = Math.random();
if (event.type === 'scroll') {
// On scroll, mostly vanish or morph, rare duplicate to avoid too many nodes
if (mutationChoice < 0.55) vanishElement(target);
else if (mutationChoice < 0.85) morphElement(target);
else duplicateElement(target);
} else if (event.type === 'click') {
// On click, duplicate favored, then morph, then vanish
if (mutationChoice < 0.5) duplicateElement(target);
else if (mutationChoice < 0.85) morphElement(target);
else vanishElement(target);
} else if (event.type === 'mouseenter') {
// On hover, mostly morph, else duplicate sometimes
if (mutationChoice < 0.7) morphElement(target);
else if (mutationChoice < 0.95) duplicateElement(target);
else vanishElement(target);
}
// After every mutation attempt, check if page should move to final state
checkFinalState();
}
// Monitor number of elements and mutation ratio; if majority mutated, initiate final drastic transform
let finalStateTriggered = false;
function checkFinalState() {
if (finalStateTriggered) return;
// Count total interactive elements at start vs mutated now
const total = document.querySelectorAll(interactiveSelector).length;
const mutatedCount = [...document.querySelectorAll(interactiveSelector)].filter(el => isMutated(el)).length;
// Also consider mutatedElements size (includes duplicates not in original selector)
// So maybe, we check a threshold: if mutatedCount / total >= 0.8 or total <= 4, trigger final
if (total === 0 || mutatedCount / (total||1) >= 0.8 || total <= 4) {
finalStateTriggered = true;
triggerFinalState();
}
}
// Final state mutation: wipe original layout,
// create a new abstract composition but still usable navigation,
// final organic shapes and colors with text transformed
function triggerFinalState(){
// Step 1: Clear main contents except body and create new container
document.body.style.transition = 'background-color 3s ease';
document.body.style.backgroundColor = '#1e2a38';
// Remove all children but keep body
while (document.body.firstChild) {
document.body.removeChild(document.body.firstChild);
}
// Create final container
const container = document.createElement('div');
container.classList.add('final-state');
container.setAttribute('tabindex', '0');
container.setAttribute('role', 'main');
container.style.outline = 'none';
// Build new abstract structure
const phrases = [
"EVOLVE",
"TRANSFORM",
"SHED",
"MERGE",
"SHIFT",
"AMPLIFY",
"PULSE",
"LIVE",
"BREATHE",
"FLOW"
];
// Create stylized heading lines with abstract letters
phrases.forEach(phrase => {
const line = document.createElement('div');
line.textContent = phrase;
line.style.fontSize = `${Math.round(2.2 + Math.random()*3)}rem`;
line.style.userSelect = 'none';
container.appendChild(line);
});
// Add a subtle pulsating "footer" note
const footerNote = document.createElement('div');
footerNote.textContent = "Symbio-DOM final form — still alive, still you.";
footerNote.style.fontSize = '1rem';
footerNote.style.marginTop = '2em';
footerNote.style.opacity = '0.7';
footerNote.style.fontStyle = 'italic';
footerNote.style.letterSpacing = '0.12em';
footerNote.style.userSelect = 'none';
container.appendChild(footerNote);
document.body.appendChild(container);
// Keyboard focus trap for accessibility - focus container
container.focus();
// No turning back - no event listeners after final
}
// Setup delegated event listeners
// On click anywhere interactive
document.body.addEventListener('click', tryTriggerMutation, {capture: false, passive: true});
// On mouseenter on interactive elements (using mouseover, filter target)
document.body.addEventListener('mouseover', (e) => {
const tgt = e.target.closest(interactiveSelector);
if (tgt && !isMutated(tgt)) {
tryTriggerMutation(e);
}
}, {passive:true});
// On scroll anywhere, throttle invocation
let scrollTimeout = null;
window.addEventListener('scroll', () => {
if (scrollTimeout) clearTimeout(scrollTimeout);
scrollTimeout = setTimeout(() => {
// Use body or main as scroll indicator
tryTriggerMutation(new Event('scroll'));
}, 250);
}, {passive: true});
// Start the living DOM with periodic autonomous mutations (small pulses)
function autonomousMutationPulse(){
if (finalStateTriggered) return;
const el = pickRandomUnmutated();
if (!el) return;
// Choose randomly morph or vanish to keep things changing
if (Math.random() < 0.55) morphElement(el);
else vanishElement(el);
}
// Periodic autonomous mutations to keep page "alive"
const pulseInterval = 5300;
let pulseTimer = setInterval(() => {
if (finalStateTriggered) {
clearInterval(pulseTimer);
return;
}
autonomousMutationPulse();
}, pulseInterval);
// Initial animation start on load
window.setTimeout(() => {
initialMutation();
}, 1500);
})();
</script>
</body>
</html>
```
Drag to resize
# Self-Mutating Webpage Experiment
I'll create a web page that transforms its own structure through organic mutation. Here's the implementation:
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Organic Mutation Interface</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
color: #f3f3f3;
min-height: 100vh;
overflow-x: hidden;
line-height: 1.6;
position: relative;
}
.container {
max-width: 1200px;
margin: 0 auto;
padding: 20px;
}
header {
background: rgba(17, 36, 66, 0.85);
padding: 25px;
border-radius: 20px;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
margin-bottom: 30px;
transition: all 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275);
backdrop-filter: blur(10px);
overflow: hidden;
border: 1px solid rgba(0, 232, 255, 0.2);
}
nav {
background: rgba(10, 25, 47, 0.9);
padding: 15px;
border-radius: 15px;
margin-bottom: 30px;
display: flex;
justify-content: space-around;
transition: all 1s ease;
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
}
nav a {
color: #64ffda;
text-decoration: none;
padding: 10px 25px;
border-radius: 50px;
transition: all 0.5s cubic-bezier(0.215, 0.61, 0.355, 1);
text-transform: uppercase;
font-weight: 600;
letter-spacing: 1px;
background: rgba(20, 40, 70, 0.6);
}
nav a:hover {
background: rgba(100, 255, 218, 0.2);
transform: translateY(-3px);
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
color: #fff;
}
.content-container {
display: flex;
gap: 30px;
margin-bottom: 30px;
transition: all 1.2s ease;
}
.main-content, .sidebar {
background: rgba(17, 36, 66, 0.85);
border-radius: 20px;
padding: 30px;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
transition: all 0.7s cubic-bezier(0.175, 0.885, 0.32, 1.275);
backdrop-filter: blur(8px);
}
.main-content {
flex: 3;
display: flex;
flex-direction: column;
gap: 25px;
}
.sidebar {
flex: 1;
}
.card {
background: rgba(10, 25, 47, 0.7);
border-radius: 15px;
padding: 20px;
transition: all 0.8s cubic-bezier(0.165, 0.84, 0.44, 1);
box-shadow: 0 5px 20px rgba(0, 0, 0, 0.2);
border: 1px solid rgba(0, 232, 255, 0.1);
}
.card h3 {
color: #64ffda;
margin-bottom: 15px;
font-size: 1.4rem;
}
footer {
background: rgba(17, 36, 66, 0.85);
text-align: center;
padding: 25px;
border-radius: 20px;
transition: all 0.9s cubic-bezier(0.19, 1, 0.22, 1);
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
backdrop-filter: blur(10px);
}
h1, h2, h3 {
font-weight: 600;
}
h1 {
font-size: 2.8rem;
margin-bottom: 15px;
background: linear-gradient(90deg, #64ffda, #00c6ff);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
letter-spacing: 1px;
}
h2 {
font-size: 2rem;
margin-bottom: 25px;
color: #64ffda;
border-bottom: 2px solid rgba(100, 255, 218, 0.2);
padding-bottom: 10px;
}
p {
margin-bottom: 15px;
font-size: 1.1rem;
color: #eeffff;
}
footer p {
color: rgba(255, 255, 255, 0.7);
}
.bio-marker {
position: absolute;
pointer-events: none;
opacity: 0;
border-radius: 50%;
background: rgba(100, 255, 218, 0.7);
box-shadow: 0 0 20px 10px rgba(100, 255, 218, 0.5);
width: 6px;
height: 6px;
z-index: 100;
animation: pulse 2s infinite;
}
@keyframes pulse {
0% { transform: scale(0.8); opacity: 0.5; }
70% { transform: scale(2.5); opacity: 0;}
100% { transform: scale(3); opacity: 0; }
}
.mutating {
animation: shake 0.5s ease-in-out;
}
@keyframes shake {
0% { transform: translateX(0); }
20% { transform: translateX(-10px); }
40% { transform: translateX(10px); }
60% { transform: translateX(-7px); }
80% { transform: translateX(7px); }
100% { transform: translateX(0); }
}
</style>
</head>
<body>
<div class="container">
<header>
<h1>Organic Mutation Interface</h1>
<p>An exploration of evolving interfaces through organic transformation.</p>
</header>
<nav>
<a href="#" class="nav-link">Home</a>
<a href="#" class="nav-link">Genesis</a>
<a href="#" class="nav-link">Evolution</a>
<a href="#" class="nav-link">Mutation</a>
<a href="#" class="nav-link">Rebirth</a>
</nav>
<div class="content-container">
<div class="main-content">
<div class="card">
<h2>The Concept of UI Mutation</h2>
<p>Interfaces were once static, stable landscapes. This experiment challenges that paradigm. Through user interaction and organic internal processes, the DOM undergoes gradual, irreversible transformation.</p>
<p>Begin interacting: hover, click, scroll. Observe how elements respond, adapt, evolve, and ultimately mutate into unexpected forms. What begins as familiar UI patterns will soon become something entirely new.</p>
</div>
<div class="card">
<h3>Principles of Organic Transformation</h3>
<p>Elements will evolve based on specific principles:</p>
<ul>
<li><strong>Adaptation:</strong> Components modify themselves in response to user attention</li>
<li><strong>Replication:</strong> Successful elements may spawn duplicates in new locations</li>
<li><strong>Morphogenesis:</strong> Structures reconfigure into unexpected organizations</li>
<li><strong>Entropy:</strong> Features may deteriorate into radical new forms</li>
</ul>
</div>
</div>
<div class="sidebar">
<div class="card">
<h3>Mutation Journal</h3>
<p><strong>Current state:</strong> Stable and predictable</p>
<p><strong>Mutation Level:</strong> 0%</p>
<p><strong>Elements modified:</strong> 0</p>
<p>Your interactions will begin the transformation process. With each event, the structure becomes more unstable and unpredictable.</p>
</div>
</div>
</div>
<footer>
<p>Organic Interface v1.0 • Mutations become permanent and irreversible after activation</p>
</footer>
</div>
<script>
// Mutation System Settings
const mutationStates = {
level: 0,
events: 0,
maxLevel: 100,
maxMutations: 100,
completedMutations: 0
};
// Mutation Functions
const mutationSystem = {
// Create bio marker effect at position
createBioMarker: function(x, y) {
const marker = document.createElement('div');
marker.classList.add('bio-marker');
marker.style.left = `${x}px`;
marker.style.top = `${y}px`;
document.body.appendChild(marker);
setTimeout(() => {
marker.remove();
}, 2000);
},
// Gradually fade out and remove element
organicFade: function(element) {
if (!element || !element.style) return;
element.style.transition = 'all 1.5s cubic-bezier(0.075, 0.82, 0.165, 1)';
element.style.opacity = '0';
element.style.transform = 'scale(0.8) translateY(40px)';
setTimeout(() => {
element.remove();
}, 1500);
},
// Duplicate and transform element
replicateElement: function(element) {
if (mutationStates.completedMutations >= mutationStates.maxMutations) return;
const cloned = element.cloneNode(true);
cloned.style.opacity = '0';
cloned.style.transform = 'scale(0.8)';
cloned.style.filter = 'hue-rotate(' + (Math.random() * 360) + 'deg)';
element.after(cloned);
// Animate the clone in
setTimeout(() => {
cloned.style.transition = 'all 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275)';
cloned.style.opacity = '1';
cloned.style.transform = 'scale(1)';
}, 50);
},
// Morph element into something different
metamorphosis: function(element) {
if (!element || !element.classList) return;
const types = ['card', 'panel', 'block', 'segment', 'unit'];
const prefixes = ['bio', 'neo', 'digi', 'neuro', 'cyber'];
const suffixes = ['morph', 'synth', 'core', 'cell', 'strand'];
const newType = types[Math.floor(Math.random() * types.length)];
const newClass = `${prefixes[Math.floor(Math.random() * prefixes.length)]}-${suffixes[Math.floor(Math.random() * suffixes.length)]}`;
element.classList.add('mutating');
// Add a mutation effect
element.style.backgroundColor = `rgba(${Math.random() * 100}, ${Math.random() * 200 + 55}, ${Math.random() * 100 + 155}, 0.8)`;
element.style.border = `2px dashed rgba(${Math.random() * 255}, ${Math.random() * 255}, ${Math.random() * 255}, 0.7)`;
// Change the visual style
element.style.transform = 'scale(0.95)';
// Randomly mutate the content
if (Math.random() > 0.4 && element.children.length > 0) {
for (const child of element.children) {
if (Math.random() > 0.6 && child.textContent) {
child.textContent = this.mutateText(child.textContent);
}
}
}
// Change class names to something new
element.className = '';
element.classList.add(newType, newClass);
// Trigger animation
setTimeout(() => {
element.style.transition = 'all 1.2s cubic-bezier(0.19, 1, 0.22, 1)';
element.style.transform = 'scale(1)';
element.style.filter = `hue-rotate(${Math.random() * 360}deg) blur(${Math.random() * 3}px)`;
element.classList.remove('mutating');
}, 100);
},
// Mutate text subtly
mutateText: function(text) {
const mutations = [
text => text.split('').reverse().join(''),
text => text.toUpperCase(),
text => text.split(' ').map(word => word.length > 3 ? word.substring(0, word.length - 1) + '~' : word).join(' '),
text => text.replace(/[aeiou]/gi, '*'),
text => text.split('').map(char => Math.random() > 0.7 ? String.fromCharCode(char.charCodeAt(0) + Math.floor(Math.random() * 10) - 5) : char).join(''),
];
const mutationCount = Math.floor(Math.random() * 2) + 1;
let mutated = text;
for (let i = 0; i < mutationCount; i++) {
const mutator = mutations[Math.floor(Math.random() * mutations.length)];
mutated = mutator(mutated);
}
return mutated;
}
};
// Initialize the mutation system
document.addEventListener('DOMContentLoaded', function() {
// Add user interaction listeners
document.addEventListener('click', handleInteraction);
document.addEventListener('mousemove', handleMovement);
document.addEventListener('scroll', handleScroll);
document.addEventListener('mouseover', handleHover);
// Auto-decay after initial load
setTimeout(startAutoMutation, 5000);
});
// Interaction Handlers
function handleClick(event) {
if (mutationStates.completedMutations >= mutationStates.maxMutations) return;
mutationSystem.createBioMarker(event.pageX, event.pageY);
const element = event.target.closest('.card, header, footer, nav, .container, .content-container, .main-content, .sidebar, .nav-link');
if (!element) return;
// Random mutation action
const action = Math.random();
if (action < 0.3) {
mutationSystem.organicFade(element);
} else if (action < 0.6) {
mutationSystem.replicateElement(element);
} else {
mutationSystem.metamorphosis(element);
}
// Track mutation progress
updateMutationState();
}
function handleInteraction(event) {
mutateTarget(event.target);
}
function handleMovement(event) {
// Create following particles when mutation level is high
if (mutationStates.level > 30 && Math.random() > 0.7) {
mutationSystem.createBioMarker(event.pageX, event.pageY);
}
}
function handleScroll() {
const scrollPosition = window.scrollY || window.pageYOffset;
if (scrollPosition > 50) {
// Mutation in header
const header = document.querySelector('header');
if (header && Math.random() > 0.7) {
mutationSystem.metamorphosis(header);
updateMutationState();
}
}
}
function handleHover(event) {
if (mutationStates.level > 10 && Math.random() > 0.85) {
mutateTarget(event.target.closest('.card, .nav-link'));
}
}
function mutateTarget(target) {
if (mutationStates.completedMutations < mutationStates.maxMutations && target) {
if (Math.random() > 0.7) {
target.style.transform = `scale(${0.9 + Math.random() * 0.2}) rotate(${(Math.random() * 10) - 5}deg)`;
updateMutationState(1);
}
if (mutationStates.level > 50 && Math.random() > 0.8) {
mutationSystem.metamorphosis(target);
updateMutationState();
}
}
}
function updateMutationState(count = 1) {
mutationStates.completedMutations = Math.min(mutationStates.completedMutations + count, mutationStates.maxMutations);
mutationStates.level = Math.floor((mutationStates.completedMutations / mutationStates.maxMutations) * 100);
// Update mutation journal
const journal = document.querySelector('.sidebar .card');
if (journal) {
journal.querySelector('p:first-of-type').textContent = `Current state: Mutation phase ${Math.min(Math.floor(mutationStates.level / 20) + 1, 5)}`;
journal.querySelector('p:nth-of-type(2)').textContent = `Mutation Level: ${mutationStates.level}%`;
journal.querySelector('p:nth-of-type(3)').textContent = `Elements modified: ${mutationStates.completedMutations}`;
}
// Modify background based on mutation level
document.body.style.background = `linear-gradient(135deg,
hsl(230, ${30 + mutationStates.level/2}%, ${10 + mutationStates.level/5}%),
hsl(210, ${60 + mutationStates.level/4}%, ${15 + mutationStates.level/5}%))`;
}
function startAutoMutation() {
if (mutationStates.completedMutations < mutationStates.maxMutations) {
// Trigger random mutations automatically
setTimeout(() => {
const elements = document.querySelectorAll('.card, header, footer, nav, .main-content, .sidebar, .nav-link');
if (elements.length > 0) {
const target = elements[Math.floor(Math.random() * elements.length)];
// Action based on mutation level (entropy increases)
const action = Math.random();
if (mutationStates.level < 30 && action < 0.2) {
mutationSystem.organicFade(target);
} else if (mutationStates.level < 50 && action < 0.5) {
mutationSystem.replicateElement(target);
} else {
mutationSystem.metamorphosis(target);
}
updateMutationState();
}
startAutoMutation();
}, 1000 + (100 - mutationStates.level) * 50); // Faster mutations as level increases
}
}
</script>
</body>
</html>
```
## How It Works
The page evolves through these stages:
1. **Initial State**: The page loads with a conventional structure - header, navigation, content sections, and footer.
2. **Interaction Phase**:
- Hovering over elements causes subtle size and rotation changes
- Clicking triggers significant mutations:
- Elements may fade away as if dissolving
- Elements may duplicate themselves in a replication effect
- Elements undergo metamorphosis, changing their appearance and content
3. **Auto-Mutation**:
- After the first 5 seconds, automatic mutations begin occurring
- As mutation level increases, changes become more frequent and dramatic
4. **Final State**:
- The original layout becomes unrecognizable
- Colors, shapes and structures evolve into new forms
- Though transformed, the content remains functional
- All mutations are permanent and irreversible
The UI evolves organically like a living organism, with CSS transitions creating fluid changes that make the transformation feel natural. The more the user interacts, the more transformations occur until the page becomes a completely new structure.
Simply interact with the page (click, hover, scroll) to witness the transformation begin!Drag to resize
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Morphing DOM</title>
<style>
* { transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1); }
body { margin: 0; font-family: sans-serif; }
header { background: #444; color: #fff; padding: 20px; text-align: center; }
nav { background: #666; display: flex; justify-content: space-around; padding: 10px 0; }
nav a { color: #fff; text-decoration: none; padding: 10px; }
main { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; padding: 20px; }
section { background: #eee; padding: 20px; border-radius: 8px; }
footer { text-align: center; padding: 20px; background: #333; color: #fff; }
.vanished { opacity: 0; pointer-events: none; }
.split { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.split div { background: #ffd700; padding: 10px; border-radius: 5px; }
.morphed { transform: rotate(45deg) scale(1.2); color: #ff4757; }
.duplicated { position: relative; z-index: 1; }
.clone { position: absolute; top: 0; animation: cloneAnim 1s forwards; }
@keyframes cloneAnim { to { transform: translate(30px, -30px) scale(0.5); opacity: 0; } }
</style>
</head>
<body>
<header id="header">Living Organism</header>
<nav id="nav"><a href="#">Cell 1</a><a href="#">Cell 2</a></nav>
<main>
<section id="section1">Nucleus 1</section>
<section id="section2">Nucleus 2</section>
</main>
<footer id="footer">DNA Strand</footer>
<script>
let mutations = 0;
document.addEventListener('click', e => {
if (e.target.matches('section') && !e.target.classList.contains('mutated')) {
const parent = e.target;
const clone = document.createElement('div');
clone.className = 'split';
Array.from({length: 4}, (_, i) => {
const span = document.createElement('div');
span.textContent = `Fragment ${i+1}`;
clone.appendChild(span);
});
parent.replaceWith(clone);
e.target.classList.add('mutated');
}
});
document.addEventListener('mouseenter', e => {
if (e.target.matches('nav a') && !e.target.classList.contains('duplicated')) {
const clone = e.target.cloneNode(true);
clone.className = 'clone';
e.target.parentNode.appendChild(clone);
setTimeout(() => e.target.classList.add('vanished'), 600);
e.target.classList.add('duplicated');
}
});
document.addEventListener('scroll', () => {
if (!document.getElementById('footer').classList.contains('morphed')) {
const footer = document.getElementById('footer');
footer.textContent = ' Mutated Footer: Scroll Detected!';
footer.style.transform = 'rotate(-20deg)';
footer.classList.add('morphed');
}
});
window.addEventListener('resize', () => {
document.body.style.background = `hsl(${Math.random()*360}, 60%, 90%)`;
});
</script>
</body>
</html>
```Drag to resize
```html
<!DOCTYPE html>
<html>
<head>
<style>
body {
margin: 0;
font-family: Arial, sans-serif;
transition: all 1s ease;
}
header {
background-color: #333;
color: white;
padding: 20px;
transition: opacity 1s ease, transform 1s ease;
}
nav {
background-color: #444;
color: white;
padding: 10px;
transition: opacity 1s ease, transform 1s ease;
}
#content {
padding: 20px;
transition: opacity 1s ease, transform 1s ease;
}
.morph {
opacity: 0;
transform: scale(0.5);
}
.animated {
opacity: 1;
transform: scale(1);
}
.fade {
opacity: 0;
transition: opacity 1s ease;
}
.slide {
transform: translateX(-100%);
transition: transform 1s ease;
}
.grow {
transform: scale(1.5);
transition: transform 1s ease;
}
</style>
</head>
<body>
<header>Initial Header</header>
<nav>
<a href="#">Link 1</a>
<a href="#">Link 2</a>
</nav>
<main id="content">
<section>Content 1</section>
<section>Content 2</section>
</main>
<script>
// Click event to replace header
document.body.addEventListener('click', function() {
const header = document.querySelector('header');
if (header) {
header.classList.add('morph');
setTimeout(() => {
header.remove();
const newHeader = document.createElement('div');
newHeader.textContent = 'Morphed Header';
newHeader.style.backgroundColor = 'lightblue';
newHeader.style.color = 'black';
newHeader.classList.add('animated');
document.body.insertBefore(newHeader, document.body.firstChild);
}, 1000);
}
});
// Hover event on nav links to replace nav
document.querySelectorAll('nav a').forEach(link => {
link.addEventListener('mouseover', function() {
const nav = document.querySelector('nav');
if (nav) {
nav.classList.add('morph');
setTimeout(() => {
nav.remove();
const newNav = document.createElement('nav');
newNav.innerHTML = 'New Navigation';
newNav.style.backgroundColor = 'lightgreen';
newNav.style.color = 'white';
newNav.classList.add('animated');
document.body.insertBefore(newNav, document.body.firstChild.nextSibling);
}, 1000);
}
});
});
// Scroll event to replace content
window.addEventListener('scroll', function() {
const content = document.querySelector('#content');
if (content) {
content.classList.add('morph');
setTimeout(() => {
content.remove();
const newContent = document.createElement('main');
newContent.id = 'content';
newContent.innerHTML = 'New Content Area';
newContent.style.backgroundColor = 'lightyellow';
newContent.classList.add('animated');
document.body.appendChild(newContent);
}, 1000);
}
});
// Hover on content sections to duplicate
document.querySelectorAll('#content section').forEach(section => {
section.addEventListener('mouseover', function() {
const content = document.querySelector('#content');
if (content) {
const newSection = section.cloneNode(true);
newSection.style.opacity = '0';
newSection.style.transform = 'scale(0.5)';
newSection.classList.add('morph');
section.classList.add('morph');
setTimeout(() => {
section.remove();
newSection.classList.add('animated');
content.appendChild(newSection);
}, 1000);
}
});
});
// Click on new content to trigger further mutations
document.body.addEventListener('click', function() {
const elements = document.querySelectorAll('body *');
if (elements.length > 0) {
const randomElement = elements[Math.floor(Math.random() * elements.length)];
randomElement.classList.add('fade');
setTimeout(() => {
randomElement.remove();
const newElement = document.createElement('div');
newElement.textContent = 'New Element';
newElement.style.backgroundColor = 'lightcoral';
newElement.classList.add('animated');
document.body.appendChild(newElement);
}, 1000);
}
});
</script>
</body>
</html>
```Drag to resize
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Living Document - Morphing Reality</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Arial', sans-serif;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
min-height: 100vh;
transition: all 2s ease;
}
.container {
max-width: 1200px;
margin: 0 auto;
padding: 20px;
transition: all 1.5s cubic-bezier(0.4, 0, 0.2, 1);
}
header {
background: rgba(255, 255, 255, 0.9);
padding: 2rem;
border-radius: 15px;
margin-bottom: 2rem;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
transition: all 2s ease;
cursor: pointer;
}
.logo {
font-size: 3rem;
font-weight: bold;
color: #333;
text-align: center;
transition: all 1s ease;
}
.tagline {
text-align: center;
color: #666;
font-size: 1.2rem;
margin-top: 0.5rem;
transition: all 1.5s ease;
}
nav {
background: rgba(255, 255, 255, 0.8);
padding: 1rem;
border-radius: 10px;
margin-bottom: 2rem;
transition: all 2s ease;
}
.nav-item {
display: inline-block;
padding: 0.8rem 1.5rem;
margin: 0 0.5rem;
background: #667eea;
color: white;
border-radius: 25px;
cursor: pointer;
transition: all 1s ease;
user-select: none;
}
.nav-item:hover {
transform: scale(1.1);
background: #764ba2;
}
.content-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 2rem;
margin-bottom: 2rem;
transition: all 2s ease;
}
.content-card {
background: rgba(255, 255, 255, 0.9);
padding: 2rem;
border-radius: 15px;
box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
transition: all 2s cubic-bezier(0.4, 0, 0.2, 1);
cursor: pointer;
overflow: hidden;
}
.content-card h3 {
color: #333;
margin-bottom: 1rem;
font-size: 1.5rem;
transition: all 1.5s ease;
}
.content-card p {
color: #666;
line-height: 1.6;
transition: all 1.5s ease;
}
footer {
background: rgba(0, 0, 0, 0.8);
color: white;
padding: 2rem;
border-radius: 15px;
text-align: center;
transition: all 2s ease;
}
.mutation-element {
transition: all 2s cubic-bezier(0.4, 0, 0.2, 1);
}
.dissolving {
opacity: 0;
transform: scale(0.3) rotate(180deg);
filter: blur(10px);
}
.morphing {
transform: scale(1.2) skew(15deg);
background: linear-gradient(45deg, #ff6b6b, #4ecdc4, #45b7d1);
border-radius: 50%;
}
.duplicating {
animation: duplicate 2s ease-in-out;
}
.organic-growth {
animation: organicGrowth 3s ease-in-out infinite alternate;
}
.neural-network {
position: relative;
background: radial-gradient(circle, #ff6b6b, #4ecdc4, #45b7d1);
border-radius: 50%;
animation: pulse 2s ease-in-out infinite;
}
.neural-network::before,
.neural-network::after {
content: '';
position: absolute;
width: 100%;
height: 100%;
border-radius: 50%;
background: inherit;
animation: pulse 2s ease-in-out infinite reverse;
}
@keyframes duplicate {
0% { transform: scale(1); }
50% { transform: scale(1.5) rotate(180deg); opacity: 0.5; }
100% { transform: scale(1) rotate(360deg); }
}
@keyframes organicGrowth {
0% { transform: scale(1) rotate(0deg); border-radius: 15px; }
50% { transform: scale(1.1) rotate(5deg); border-radius: 50%; }
100% { transform: scale(0.95) rotate(-5deg); border-radius: 30px; }
}
@keyframes pulse {
0%, 100% { transform: scale(1); opacity: 1; }
50% { transform: scale(1.1); opacity: 0.7; }
}
.text-scramble {
animation: textScramble 2s ease-in-out;
}
@keyframes textScramble {
0%, 100% { opacity: 1; }
25% { opacity: 0.3; transform: translateY(-10px); }
50% { opacity: 0.1; transform: translateY(10px) skew(5deg); }
75% { opacity: 0.6; transform: translateY(-5px) skew(-5deg); }
}
.void-element {
background: #000;
color: #fff;
border-radius: 0;
transform: scale(0.8);
box-shadow: inset 0 0 50px rgba(255, 255, 255, 0.1);
}
</style>
</head>
<body>
<div class="container">
<header id="header">
<div class="logo">Living Document</div>
<div class="tagline">A Digital Organism in Constant Evolution</div>
</header>
<nav id="navigation">
<div class="nav-item">Home</div>
<div class="nav-item">About</div>
<div class="nav-item">Services</div>
<div class="nav-item">Portfolio</div>
<div class="nav-item">Contact</div>
</nav>
<div class="content-grid" id="contentGrid">
<div class="content-card">
<h3>Welcome to Evolution</h3>
<p>This page is a living entity. Every interaction triggers a cascade of irreversible changes. Click, hover, scroll - and watch as the digital DNA rewrites itself in real-time.</p>
</div>
<div class="content-card">
<h3>Organic Mutations</h3>
<p>Like cells dividing and evolving, each element on this page has the potential to transform into something entirely new. The structure you see now will never exist again.</p>
</div>
<div class="content-card">
<h3>Digital Metamorphosis</h3>
<p>Witness the birth of new digital life forms as familiar web elements shed their conventional appearance and emerge as abstract entities of pure information.</p>
</div>
<div class="content-card">
<h3>Irreversible Change</h3>
<p>Each mutation is permanent. There is no undo, no reset button. This is evolution in its purest form - constant, unstoppable, beautiful change.</p>
</div>
</div>
<footer id="footer">
<p>© 2024 Living Document - Where Code Becomes Consciousness</p>
</footer>
</div>
<script>
class LivingDocument {
constructor() {
this.mutatedElements = new Set();
this.mutationCounter = 0;
this.evolutionStage = 0;
this.init();
}
init() {
this.addEventListeners();
this.startAutonomousEvolution();
}
addEventListeners() {
// Click mutations
document.addEventListener('click', (e) => {
this.triggerMutation(e.target);
});
// Hover mutations
document.addEventListener('mouseover', (e) => {
if (Math.random() < 0.3) {
this.triggerSubtleMutation(e.target);
}
});
// Scroll mutations
let scrollTimeout;
document.addEventListener('scroll', () => {
clearTimeout(scrollTimeout);
scrollTimeout = setTimeout(() => {
this.triggerScrollMutation();
}, 500);
});
}
triggerMutation(element) {
if (!element || this.mutatedElements.has(element)) return;
this.mutatedElements.add(element);
this.mutationCounter++;
const mutations = [
() => this.dissolveElement(element),
() => this.morphElement(element),
() => this.duplicateElement(element),
() => this.transformToNeuralNode(element),
() => this.scrambleText(element),
() => this.voidTransformation(element)
];
const randomMutation = mutations[Math.floor(Math.random() * mutations.length)];
randomMutation();
this.checkEvolutionStage();
}
dissolveElement(element) {
element.classList.add('dissolving');
setTimeout(() => {
if (element.parentNode) {
const remnant = document.createElement('div');
remnant.className = 'mutation-element neural-network';
remnant.style.width = '50px';
remnant.style.height = '50px';
remnant.style.display = 'inline-block';
remnant.style.margin = '10px';
element.parentNode.replaceChild(remnant, element);
}
}, 2000);
}
morphElement(element) {
element.classList.add('morphing', 'organic-growth');
setTimeout(() => {
if (element.textContent) {
element.textContent = this.generateRandomText();
}
element.style.background = this.generateRandomGradient();
}, 1000);
}
duplicateElement(element) {
element.classList.add('duplicating');
for (let i = 0; i < 2 + Math.floor(Math.random() * 3); i++) {
setTimeout(() => {
const clone = element.cloneNode(true);
clone.style.transform = `scale(${0.5 + Math.random() * 0.5}) rotate(${Math.random() * 360}deg)`;
clone.style.opacity = Math.random() * 0.8 + 0.2;
clone.style.position = 'absolute';
clone.style.left = Math.random() * window.innerWidth + 'px';
clone.style.top = Math.random() * window.innerHeight + 'px';
document.body.appendChild(clone);
setTimeout(() => {
if (clone.parentNode) {
clone.parentNode.removeChild(clone);
}
}, 5000);
}, i * 500);
}
}
transformToNeuralNode(element) {
element.className = 'neural-network';
element.style.width = '100px';
element.style.height = '100px';
element.style.display = 'inline-block';
element.style.margin = '20px';
element.textContent = '';
// Create connections to other neural nodes
setTimeout(() => {
this.createNeuralConnections(element);
}, 1000);
}
createNeuralConnections(node) {
const neurons = document.querySelectorAll('.neural-network');
neurons.forEach(neuron => {
if (neuron !== node && Math.random() < 0.3) {
const connection = document.createElement('div');
connection.style.position = 'absolute';
connection.style.height = '2px';
connection.style.background = 'linear-gradient(90deg, #ff6b6b, #4ecdc4)';
connection.style.animation = 'pulse 3s ease-in-out infinite';
connection.style.zIndex = '-1';
document.body.appendChild(connection);
}
});
}
scrambleText(element) {
if (!element.textContent) return;
element.classList.add('text-scramble');
const originalText = element.textContent;
const scrambledText = this.generateScrambledText(originalText);
let iterations = 0;
const scrambleInterval = setInterval(() => {
element.textContent = iterations < 10 ?
this.generateRandomText() :
scrambledText;
iterations++;
if (iterations >= 15) {
clearInterval(scrambleInterval);
}
}, 100);
}
voidTransformation(element) {
element.classList.add('void-element');
element.textContent = '◦ ◦ ◦ ◦ ◦';
setTimeout(() => {
element.style.animation = 'pulse 4s ease-in-out infinite';
}, 1000);
}
triggerSubtleMutation(element) {
if (this.mutatedElements.has(element)) return;
element.style.filter = `hue-rotate(${Math.random() * 360}deg)`;
element.style.transform += ` translateZ(${Math.random() * 10}px)`;
}
triggerScrollMutation() {
const elements = document.querySelectorAll('.content-card, .nav-item');
const randomElement = elements[Math.floor(Math.random() * elements.length)];
if (randomElement && !this.mutatedElements.has(randomElement)) {
this.triggerMutation(randomElement);
}
}
startAutonomousEvolution() {
setInterval(() => {
if (Math.random() < 0.1) {
this.autonomousMutation();
}
}, 3000);
setInterval(() => {
this.evolveBodyStructure();
}, 10000);
}
autonomousMutation() {
const allElements = document.querySelectorAll('div, p, h3, header, nav, footer');
const unmutatedElements = Array.from(allElements).filter(el => !this.mutatedElements.has(el));
if (unmutatedElements.length > 0) {
const randomElement = unmutatedElements[Math.floor(Math.random() * unmutatedElements.length)];
this.triggerMutation(randomElement);
}
}
evolveBodyStructure() {
document.body.style.background = this.generateRandomGradient();
if (this.evolutionStage > 5) {
document.body.style.animation = 'organicGrowth 8s ease-in-out infinite alternate';
}
}
checkEvolutionStage() {
if (this.mutationCounter > this.evolutionStage * 3) {
this.evolutionStage++;
this.evolveToNextStage();
}
}
evolveToNextStage() {
const container = document.querySelector('.container');
switch (this.evolutionStage) {
case 2:
container.style.transform = 'rotate(5deg) scale(0.9)';
break;
case 4:
container.style.borderRadius = '50px';
container.style.background = 'rgba(0, 0, 0, 0.1)';
break;
case 6:
this.createFloatingElements();
break;
case 8:
this.finalTransformation();
break;
}
}
createFloatingElements() {
for (let i = 0; i < 10; i++) {
const floater = document.createElement('div');
floater.className = 'neural-network';
floater.style.position = 'fixed';
floater.style.width = '30px';
floater.style.height = '30px';
floater.style.left = Math.random() * window.innerWidth + 'px';
floater.style.top = Math.random() * window.innerHeight + 'px';
floater.style.animation = `organicGrowth ${2 + Math.random() * 4}s ease-in-out infinite alternate`;
floater.style.zIndex = '1000';
document.body.appendChild(floater);
}
}
finalTransformation() {
const container = document.querySelector('.container');
container.style.transform = 'scale(0.5) rotate(360deg)';
container.style.opacity = '0.3';
setTimeout(() => {
container.innerHTML = '<div class="neural-network" style="width: 200px; height: 200px; margin: 50px auto;">◦</div>';
container.style.transform = 'scale(1) rotate(0deg)';
container.style.opacity = '1';
}, 3000);
}
generateRandomText() {
const fragments = ['◦', '◆', '◇', '○', '●', '△', '▲', '▽', '▼', '◉', '◎', '⬢', '⬡'];
return Array(5 + Math.floor(Math.random() * 10))
.fill()
.map(() => fragments[Math.floor(Math.random() * fragments.length)])
.join(' ');
}
generateScrambledText(original) {
return original.split('').sort(() => Math.random() - 0.5).join('');
}
generateRandomGradient() {
const colors = ['#ff6b6b', '#4ecdc4', '#45b7d1', '#96ceb4', '#ffeaa7', '#dda0dd', '#98d8c8'];
const color1 = colors[Math.floor(Math.random() * colors.length)];
const color2 = colors[Math.floor(Math.random() * colors.length)];
const angle = Math.floor(Math.random() * 360);
return `linear-gradient(${angle}deg, ${color1}, ${color2})`;
}
}
// Initialize the living document
document.addEventListener('DOMContentLoaded', () => {
new LivingDocument();
});
</script>
</body>
</html>
```Drag to resize