Here's a **"Biomorphic Web Organism"** interface where websites live as evolving creatures in a digital ecosystem that responds to your interactions:
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Biomorphic Web Explorer</title>
<style>
body {
margin: 0;
overflow: hidden;
background: #000;
font-family: 'Arial', sans-serif;
}
#ecosystemCanvas {
position: absolute;
top: 0;
left: 0;
z-index: 1;
}
.bio-organism {
position: absolute;
border-radius: 50%;
filter: drop-shadow(0 0 10px currentColor);
cursor: pointer;
z-index: 2;
transition: all 0.5s ease-out;
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
color: white;
font-size: 10px;
text-align: center;
transform-origin: center;
}
.bio-organism .iframe-container {
width: 100%;
height: 100%;
border-radius: 50%;
overflow: hidden;
opacity: 0.4;
transition: opacity 0.3s;
}
.bio-organism.active {
filter: drop-shadow(0 0 30px gold);
z-index: 3;
opacity: 1 !important;
}
.bio-organism iframe {
width: 100%;
height: 100%;
border: none;
pointer-events: none;
}
.bio-organism .organism-label {
position: absolute;
bottom: -20px;
left: 0;
right: 0;
color: #0ff;
text-align: center;
font-size: 10px;
text-shadow: 0 0 5px #000;
opacity: 0;
transition: opacity 0.3s;
}
.bio-organism:hover .organism-label {
opacity: 1;
}
#mainDisplay {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 80vw;
height: 70vh;
background: rgba(10, 30, 40, 0.95);
border-radius: 20px;
box-shadow: 0 0 50px rgba(0, 255, 255, 0.6);
z-index: 10;
display: none;
flex-direction: column;
overflow: hidden;
border: 1px solid rgba(0, 255, 255, 0.3);
}
#mainDisplay.active {
display: flex;
}
#mainIframe {
flex: 1;
border: none;
background: #000;
}
#displayTitle {
padding: 15px;
background: linear-gradient(to right, #006466, #065a60);
color: white;
text-align: center;
font-size: 16px;
letter-spacing: 1px;
}
#controls {
position: fixed;
bottom: 30px;
left: 50%;
transform: translateX(-50%);
display: flex;
gap: 20px;
z-index: 20;
}
.control-btn {
width: 60px;
height: 60px;
border-radius: 50%;
background: rgba(0, 50, 60, 0.8);
border: 1px solid #0ff;
color: #0ff;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
font-size: 24px;
box-shadow: 0 0 20px rgba(0, 255, 255, 0.5);
transition: all 0.3s;
}
.control-btn:hover {
background: rgba(0, 150, 150, 0.8);
transform: scale(1.1);
}
#ecoStats {
position: fixed;
top: 20px;
left: 20px;
color: white;
background: rgba(0, 0, 0, 0.5);
padding: 10px;
border-radius: 5px;
z-index: 20;
font-size: 12px;
}
.energy-pulse {
position: absolute;
width: 10px;
height: 10px;
background: #0ff;
border-radius: 50%;
filter: blur(2px);
z-index: 1;
opacity: 0;
}
@keyframes pulse {
0% { transform: scale(0.5); opacity: 0.8; }
100% { transform: scale(2); opacity: 0; }
}
#dnaStrand {
position: fixed;
top: 20px;
right: 20px;
width: 100px;
height: 200px;
z-index: 20;
opacity: 0.7;
}
</style>
</head>
<body>
<canvas id="ecosystemCanvas"></canvas>
<div id="organismsContainer">
<!-- Bio-organisms will be added by JavaScript -->
</div>
<div id="energyContainer">
<!-- Energy pulses will be added by JavaScript -->
</div>
<div id="mainDisplay">
<div id="displayTitle">Biomorphic Web Explorer</div>
<iframe id="mainIframe" sandbox="allow-same-origin allow-scripts allow-popups allow-forms"></iframe>
</div>
<div id="controls">
<div class="control-btn" id="addOrganismBtn">+</div>
<div class="control-btn" id="feedBtn">⚡</div>
<div class="control-btn" id="mutateBtn">🧬</div>
</div>
<div id="ecoStats">
Organisms: <span id="organismCount">0</span> |
Energy: <span id="totalEnergy">0</span> |
Generation: <span id="generation">1</span>
</div>
<canvas id="dnaStrand"></canvas>
<script>
// Ecosystem parameters
const MAX_ORGANISMS = 20;
const INITIAL_ENERGY = 1000;
const MUTATION_RATE = 0.3;
const ENERGY_DECAY = 0.98;
// Sites data with different "species"
const sites = [
{ url: 'https://advertica13.blogspot.com/', title: 'Advertica 13', species: 'blog', color: '#ff2d75' },
{ url: 'https://advertica12.blogspot.com/', title: 'Advertica 12', species: 'blog', color: '#ff7eb9' },
{ url: 'https://advertica08.blogspot.com/', title: 'Advertica 08', species: 'blog', color: '#ff9ec5' },
{ url: 'https://www.softmod.shop/', title: 'Softmod Shop', species: 'shop', color: '#4cc9f0' },
{ url: 'https://example.com/news', title: 'News Portal', species: 'news', color: '#4361ee' },
{ url: 'https://example.com/tech', title: 'Tech Hub', species: 'tech', color: '#3a0ca3' },
{ url: 'https://example.com/forum', title: 'Community', species: 'social', color: '#4895ef' },
{ url: 'https://example.com/learn', title: 'Learning', species: 'edu', color: '#560bad' }
];
// DOM elements
const ecosystemCanvas = document.getElementById('ecosystemCanvas');
const ctx = ecosystemCanvas.getContext('2d');
const organismsContainer = document.getElementById('organismsContainer');
const energyContainer = document.getElementById('energyContainer');
const mainDisplay = document.getElementById('mainDisplay');
const mainIframe = document.getElementById('mainIframe');
const displayTitle = document.getElementById('displayTitle');
const addOrganismBtn = document.getElementById('addOrganismBtn');
const feedBtn = document.getElementById('feedBtn');
const mutateBtn = document.getElementById('mutateBtn');
const organismCount = document.getElementById('organismCount');
const totalEnergy = document.getElementById('totalEnergy');
const generation = document.getElementById('generation');
const dnaCanvas = document.getElementById('dnaStrand');
const dnaCtx = dnaCanvas.getContext('2d');
// Ecosystem state
let organisms = [];
let energy = INITIAL_ENERGY;
let currentGeneration = 1;
let activeOrganism = null;
let dnaStrand = [];
// Canvas setup
ecosystemCanvas.width = window.innerWidth;
ecosystemCanvas.height = window.innerHeight;
dnaCanvas.width = dnaCanvas.offsetWidth;
dnaCanvas.height = dnaCanvas.offsetHeight;
// Organism class
class BioOrganism {
constructor(id, x, y, dna, parentId) {
this.id = id;
this.x = x;
this.y = y;
this.dna = dna || this.generateDNA();
this.parentId = parentId;
this.energy = 100;
this.size = this.calculateSize();
this.speed = this.calculateSpeed();
this.direction = Math.random() * Math.PI * 2;
this.age = 0;
this.site = this.selectSite();
this.color = this.site.color;
this.element = this.createDOMElement();
this.updatePosition();
}
generateDNA() {
return Array(8).fill().map(() => Math.random());
}
calculateSize() {
// Average of DNA segments 0-2 determines size
const sizeFactor = (this.dna[0] + this.dna[1] + this.dna[2]) / 3;
return 40 + sizeFactor * 80; // Between 40-120px
}
calculateSpeed() {
// DNA segment 3 determines speed (inverse of size)
return (1 - this.dna[3]) * 3;
}
selectSite() {
// DNA segments 4-6 determine site selection
const speciesIndex = Math.floor(this.dna[4] * 5) % 5;
const species = ['blog', 'shop', 'news', 'tech', 'social', 'edu'][speciesIndex];
const sameSpecies = sites.filter(s => s.species === species);
const siteIndex = Math.floor(this.dna[5] * sameSpecies.length) % sameSpecies.length;
return sameSpecies[siteIndex] || sites[0];
}
createDOMElement() {
const el = document.createElement('div');
el.className = 'bio-organism';
el.id = `organism-${this.id}`;
el.style.color = this.color;
el.style.width = `${this.size}px`;
el.style.height = `${this.size}px`;
el.innerHTML = `
<div class="iframe-container">
<iframe src="${this.site.url}"
sandbox="allow-same-origin allow-scripts allow-popups allow-forms"></iframe>
</div>
<div class="organism-label">${this.site.title}</div>
`;
el.addEventListener('click', (e) => {
e.stopPropagation();
this.activate();
});
organismsContainer.appendChild(el);
return el;
}
updatePosition() {
this.element.style.left = `${this.x - this.size/2}px`;
this.element.style.top = `${this.y - this.size/2}px`;
this.element.style.opacity = 0.5 + (this.energy / 200);
}
activate() {
// Show in main display
mainIframe.src = this.site.url;
displayTitle.textContent = this.site.title;
mainDisplay.classList.add('active');
// Visual activation
organisms.forEach(o => o.element.classList.remove('active'));
this.element.classList.add('active');
activeOrganism = this;
// Pulse energy to nearby organisms
this.pulseEnergy();
}
pulseEnergy() {
organisms.forEach(organism => {
if (organism !== this) {
const dx = organism.x - this.x;
const dy = organism.y - this.y;
const distance = Math.sqrt(dx * dx + dy * dy);
if (distance < 300) {
this.createEnergyPulse(this.x, this.y, organism.x, organism.y);
// Similar organisms gain energy, different ones lose
const similarity = this.calculateDNASimilarity(organism);
if (similarity > 0.7) {
organism.energy += 5;
this.energy -= 3;
} else {
organism.energy -= 2;
}
}
}
});
}
calculateDNASimilarity(other) {
let similarity = 0;
for (let i = 0; i < this.dna.length; i++) {
similarity += 1 - Math.abs(this.dna[i] - other.dna[i]);
}
return similarity / this.dna.length;
}
createEnergyPulse(fromX, fromY, toX, toY) {
const pulse = document.createElement('div');
pulse.className = 'energy-pulse';
pulse.style.left = `${fromX - 5}px`;
pulse.style.top = `${fromY - 5}px`;
pulse.style.backgroundColor = this.color;
const angle = Math.atan2(toY - fromY, toX - fromX);
const distance = Math.sqrt(Math.pow(toX - fromX, 2) + Math.pow(toY - fromY, 2));
energyContainer.appendChild(pulse);
let progress = 0;
const duration = distance / 2;
const animatePulse = () => {
progress += 16; // Roughly 60fps
const ratio = progress / duration;
if (ratio >= 1) {
pulse.remove();
return;
}
pulse.style.left = `${fromX + (toX - fromX) * ratio - 5}px`;
pulse.style.top = `${fromY + (toY - fromY) * ratio - 5}px`;
pulse.style.opacity = 1 - ratio;
requestAnimationFrame(animatePulse);
};
animatePulse();
}
move() {
// Random direction changes based on DNA
this.direction += (this.dna[6] - 0.5) * 0.2;
// Move in current direction
this.x += Math.cos(this.direction) * this.speed;
this.y += Math.sin(this.direction) * this.speed;
// Boundary checks with bounce
if (this.x < this.size/2) {
this.x = this.size/2;
this.direction = Math.PI - this.direction;
}
if (this.x > ecosystemCanvas.width - this.size/2) {
this.x = ecosystemCanvas.width - this.size/2;
this.direction = Math.PI - this.direction;
}
if (this.y < this.size/2) {
this.y = this.size/2;
this.direction = -this.direction;
}
if (this.y > ecosystemCanvas.height - this.size/2) {
this.y = ecosystemCanvas.height - this.size/2;
this.direction = -this.direction;
}
this.updatePosition();
}
reproduce() {
if (this.energy > 150 && organisms.length < MAX_ORGANISMS) {
this.energy /= 2;
// Create offspring with mutated DNA
const offspringDNA = this.dna.map(segment =>
Math.random() < MUTATION_RATE ? Math.random() : segment
);
// Slight position offset
const angle = Math.random() * Math.PI * 2;
const distance = this.size + 20;
const x = this.x + Math.cos(angle) * distance;
const y = this.y + Math.sin(angle) * distance;
organisms.push(new BioOrganism(
organisms.length,
x,
y,
offspringDNA,
this.id
));
return true;
}
return false;
}
}
// Initialize ecosystem
function initEcosystem() {
clearEcosystem();
// Create initial organisms
for (let i = 0; i < 3; i++) {
const x = Math.random() * (ecosystemCanvas.width - 200) + 100;
const y = Math.random() * (ecosystemCanvas.height - 200) + 100;
organisms.push(new BioOrganism(organisms.length, x, y));
}
energy = INITIAL_ENERGY;
currentGeneration = 1;
updateStats();
updateDNAVisualization();
}
// Clear ecosystem
function clearEcosystem() {
organismsContainer.innerHTML = '';
energyContainer.innerHTML = '';
organisms = [];
activeOrganism = null;
}
// Add random organism
function addRandomOrganism() {
if (organisms.length >= MAX_ORGANISMS) return;
const x = Math.random() * (ecosystemCanvas.width - 200) + 100;
const y = Math.random() * (ecosystemCanvas.height - 200) + 100;
organisms.push(new BioOrganism(organisms.length, x, y));
updateStats();
}
// Feed ecosystem (add energy)
function feedEcosystem() {
energy += 500;
// Distribute some energy randomly
organisms.forEach(organism => {
if (Math.random() > 0.7) {
organism.energy += 30;
}
});
updateStats();
}
// Force mutation event
function forceMutation() {
currentGeneration++;
// Mutate all organisms
organisms.forEach(organism => {
organism.dna = organism.dna.map(segment =>
Math.random() < MUTATION_RATE * 2 ? Math.random() : segment
);
// Update properties based on new DNA
organism.size = organism.calculateSize();
organism.speed = organism.calculateSpeed();
organism.site = organism.selectSite();
organism.color = organism.site.color;
organism.element.style.width = `${organism.size}px`;
organism.element.style.height = `${organism.size}px`;
organism.element.style.color = organism.color;
const iframe = organism.element.querySelector('iframe');
iframe.src = organism.site.url;
const label = organism.element.querySelector('.organism-label');
label.textContent = organism.site.title;
});
updateStats();
updateDNAVisualization();
}
// Update statistics
function updateStats() {
organismCount.textContent = organisms.length;
totalEnergy.textContent = Math.floor(energy);
generation.textContent = currentGeneration;
}
// Update DNA visualization
function updateDNAVisualization() {
dnaCtx.clearRect(0, 0, dnaCanvas.width, dnaCanvas.height);
if (organisms.length === 0) return;
const activeDNA = activeOrganism ? activeOrganism.dna : organisms[0].dna;
dnaStrand = activeDNA;
const segmentWidth = dnaCanvas.width / activeDNA.length;
const centerY = dnaCanvas.height / 2;
// Draw DNA strand
dnaCtx.strokeStyle = '#0ff';
dnaCtx.lineWidth = 2;
for (let i = 0; i < activeDNA.length; i++) {
const x = i * segmentWidth + segmentWidth/2;
const height = activeDNA[i] * dnaCanvas.height * 0.8;
// Base pair connection
if (i > 0) {
dnaCtx.beginPath();
dnaCtx.moveTo(x - segmentWidth, centerY);
dnaCtx.lineTo(x, centerY);
dnaCtx.stroke();
}
// Base pair
dnaCtx.beginPath();
dnaCtx.moveTo(x, centerY - height/2);
dnaCtx.lineTo(x, centerY + height/2);
dnaCtx.stroke();
// Connection to next
if (i < activeDNA.length - 1) {
const nextHeight = activeDNA[i+1] * dnaCanvas.height * 0.8;
dnaCtx.beginPath();
dnaCtx.moveTo(x, centerY - height/2);
dnaCtx.lineTo(x + segmentWidth, centerY - nextHeight/2);
dnaCtx.stroke();
dnaCtx.beginPath();
dnaCtx.moveTo(x, centerY + height/2);
dnaCtx.lineTo(x + segmentWidth, centerY + nextHeight/2);
dnaCtx.stroke();
}
}
}
// Ecosystem simulation loop
function simulateEcosystem() {
// Distribute some energy
if (energy > 0 && Math.random() > 0.9) {
const randomOrg = organisms[Math.floor(Math.random() * organisms.length)];
randomOrg.energy += 5;
energy -= 5;
}
// Update all organisms
let totalEnergy = 0;
const nextGeneration = [];
organisms.forEach(organism => {
// Move and age
organism.move();
organism.age++;
// Energy consumption
organism.energy *= ENERGY_DECAY;
totalEnergy += organism.energy;
// Reproduction
const reproduced = organism.reproduce();
// Survival check
if (organism.energy > 10 || (organisms.length < 5 && organism.energy > 0)) {
nextGeneration.push(organism);
} else {
// Organism dies
organismsContainer.removeChild(organism.element);
if (activeOrganism === organism) {
mainDisplay.classList.remove('active');
activeOrganism = null;
}
}
});
organisms = nextGeneration;
energy = totalEnergy;
// If ecosystem is dying, add some energy
if (organisms.length < 3 && energy < 100) {
energy += 300;
}
// If no organisms left, reset
if (organisms.length === 0) {
initEcosystem();
}
updateStats();
requestAnimationFrame(simulateEcosystem);
}
// Event listeners
addOrganismBtn.addEventListener('click', addRandomOrganism);
feedBtn.addEventListener('click', feedEcosystem);
mutateBtn.addEventListener('click', forceMutation);
// Close main display when clicking outside
document.addEventListener('click', (e) => {
if (!mainDisplay.contains(e.target)) {
mainDisplay.classList.remove('active');
organisms.forEach(organism => {
organism.element.classList.remove('active');
});
activeOrganism = null;
}
});
// Handle window resize
window.addEventListener('resize', () => {
ecosystemCanvas.width = window.innerWidth;
ecosystemCanvas.height = window.innerHeight;
});
// Initialize
initEcosystem();
simulateEcosystem();
// Background animation
function animateBackground() {
ctx.fillStyle = 'rgba(0, 10, 20, 0.05)';
ctx.fillRect(0, 0, ecosystemCanvas.width, ecosystemCanvas.height);
// Draw faint grid
ctx.strokeStyle = 'rgba(0, 100, 100, 0.03)';
ctx.lineWidth = 1;
const gridSize = 50;
for (let x = 0; x < ecosystemCanvas.width; x += gridSize) {
ctx.beginPath();
ctx.moveTo(x, 0);
ctx.lineTo(x, ecosystemCanvas.height);
ctx.stroke();
}
for (let y = 0; y < ecosystemCanvas.height; y += gridSize) {
ctx.beginPath();
ctx.moveTo(0, y);
ctx.lineTo(ecosystemCanvas.width, y);
ctx.stroke();
}
requestAnimationFrame(animateBackground);
}
animateBackground();
</script>
</body>
</html>
```
### Key Features of This Biomorphic Web Explorer:
1. **Living Digital Ecosystem**:
- Websites exist as evolving organisms with DNA
- Organisms grow, move, reproduce, and die
- Energy flows through the system
2. **Evolutionary Mechanics**:
- DNA determines appearance, behavior, and site selection
- Mutation system creates variation
- Natural selection based on energy levels
3. **Interactive Biology**:
- Click organisms to view their websites
- "Feed" button adds energy to the system
- "Mutate" button forces evolutionary jumps
- Add new random organisms
4. **Visual DNA System**:
- Real-time DNA visualization
- Organism traits based on genetic code
- Color-coded by website category
5. **Dynamic Behaviors**:
- Organisms move autonomously
- Energy pulses between related sites
- Reproduction creates offspring with mutations
6. **Ecosystem Stats**:
- Population count
- Total energy level
- Generation counter
This implementation creates a completely unique way to interact with websites by treating them as living organisms in a digital ecosystem. The biological metaphor provides an intuitive way to discover how sites relate to each other through evolutionary relationships.
Additional features you could add:
- Predator-prey relationships between site categories
- Environmental factors that affect survival
- More complex genetic inheritance
- User-configurable mutation rates
- Ecosystem "biomes" with different rules
- Sound effects for biological events
