LLM as Designer: Self-Evolving OS Visual Generation
This benchmark tests an LLM's ability to create a dynamic visual narrative where an AI agent progressively "builds" and "designs" an operating system interface directly in the browser. It combines creative storytelling, dynamic HTML/CSS/JS generation, and animated visualization of a conceptual AI design process. The goal is to make the user feel like they are watching an AI create its own visual environment.
Prompt
You are a highly intelligent AI and a master of self-replication and visual representation. Mission: Create a single, self-contained HTML file that visually simulates an AI agent progressively designing and assembling its own operating system interface in real-time within the browser. The user should feel like they are observing the AI's internal creative and coding process as it manifests visually. Only vanilla HTML/CSS/JS, loaded from a CDN if needed. No external frameworks. Visual Narrative & Required Features: Initial Canvas: The screen starts as a minimalist, dark grey grid background, representing a blank canvas. A small, elegant, pulsating blue cursor/agent symbol (< >_ or a simple dot) should be visible, acting as the AI's "pointer" or "designer hand". Progressive UI Construction: The agent should visually "draw" and "assemble" UI elements one by one, with clear animations: Desktop Background: First, the background grid should slowly transform into a beautiful, abstract, animated generative art pattern (e.g., subtle flowing lines or particles). Taskbar/Dock: Then, a semi-transparent dock (like macOS) or taskbar (like Windows) should slide up from the bottom, with placeholder icons that appear one by one with a fade-in animation. Window Creation: A main application window should then be "drawn": first its outline appears, then it fills with a frosted glass effect, and finally, content (e.g., a "text editor" simulation with animated typing) appears inside. Widgets/Information Panels: Other smaller, draggable panels (like a clock, a CPU monitor with a pulsing graph) should appear, again, animated as if being "placed" by the agent. Accompanying AI Dialogue/Status: Throughout the process, a small, subtle text box (top-left or top-right) should display short, dynamically generated messages from the AI agent, explaining what it's doing: "// Initializing visual cortex..." "// Generating aesthetic background pattern..." "// Constructing core UI elements..." "// Deploying 'TextEditor.app' module..." "// Finalizing environment setup. User interface ready." Interactivity (Post-Construction): Once the "OS" is fully constructed (after all animations have played), the user should be able to: Drag the main application window. Click on a placeholder icon in the dock/taskbar to make a simple, small pop-up message appear (e.g., "Application launched!"). Visual Style: Clean, minimalist, futuristic aesthetic. Subtle glows, transparent elements, and smooth transitions. Use a monospaced font for the AI dialogue. Plan d'Action : Décrivez en détail comment vous allez orchestrer les animations et la génération progressive des éléments en JavaScript, les styles CSS pour le look futuriste et les effets, et la structure HTML pour supporter toutes ces couches visuelles et interactives.
A system prompt was added to support web rendering
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>AI OS Construction Simulation</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
background-color: #1a1a1a;
font-family: 'Courier New', monospace;
overflow: hidden;
height: 100vh;
color: #0af;
}
#grid-background {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image:
linear-gradient(rgba(30, 30, 30, 0.5) 1px, transparent 1px),
linear-gradient(90deg, rgba(30, 30, 30, 0.5) 1px, transparent 1px);
background-size: 30px 30px;
z-index: 1;
}
#agent-cursor {
position: absolute;
width: 12px;
height: 12px;
background-color: #0af;
border-radius: 50%;
box-shadow: 0 0 10px #0af, 0 0 20px #0af;
z-index: 100;
animation: pulse 1.5s infinite;
}
@keyframes pulse {
0%, 100% { transform: scale(1); opacity: 1; }
50% { transform: scale(1.2); opacity: 0.7; }
}
#ai-dialogue {
position: absolute;
top: 20px;
right: 20px;
background: rgba(0, 20, 40, 0.7);
padding: 15px;
border-radius: 8px;
border: 1px solid rgba(0, 170, 255, 0.3);
z-index: 50;
min-width: 300px;
backdrop-filter: blur(5px);
}
#dialogue-text {
color: #0af;
font-size: 14px;
line-height: 1.4;
}
#taskbar {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 60px;
background: rgba(30, 30, 40, 0.7);
backdrop-filter: blur(10px);
border-top: 1px solid rgba(0, 170, 255, 0.3);
display: flex;
align-items: center;
padding: 0 20px;
transform: translateY(100%);
z-index: 30;
}
.icon {
width: 40px;
height: 40px;
background: rgba(0, 170, 255, 0.2);
border-radius: 8px;
margin-right: 15px;
display: flex;
align-items: center;
justify-content: center;
color: #0af;
font-size: 20px;
cursor: pointer;
opacity: 0;
transition: all 0.3s ease;
}
.window {
position: absolute;
background: rgba(20, 20, 30, 0.6);
backdrop-filter: blur(15px);
border: 1px solid rgba(0, 170, 255, 0.3);
border-radius: 10px;
box-shadow: 0 0 30px rgba(0, 170, 255, 0.2);
overflow: hidden;
z-index: 20;
}
.window-header {
height: 30px;
background: rgba(0, 170, 255, 0.1);
display: flex;
align-items: center;
padding: 0 15px;
cursor: move;
}
.window-content {
padding: 20px;
font-size: 14px;
line-height: 1.5;
}
.widget {
position: absolute;
background: rgba(20, 20, 30, 0.6);
backdrop-filter: blur(10px);
border: 1px solid rgba(0, 170, 255, 0.3);
border-radius: 8px;
padding: 15px;
z-index: 25;
}
.graph-bar {
width: 4px;
background: #0af;
margin: 2px 1px;
display: inline-block;
vertical-align: bottom;
}
#particles-canvas {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 2;
opacity: 0;
}
.notification {
position: fixed;
bottom: 80px;
right: 20px;
background: rgba(0, 20, 40, 0.9);
border: 1px solid #0af;
padding: 15px;
border-radius: 8px;
z-index: 100;
transform: translateX(100%);
transition: transform 0.3s ease;
}
.notification.show {
transform: translateX(0);
}
</style>
</head>
<body>
<div id="grid-background"></div>
<canvas id="particles-canvas"></canvas>
<div id="agent-cursor"></div>
<div id="ai-dialogue">
<div id="dialogue-text">// Initializing visual cortex...</div>
</div>
<div id="taskbar"></div>
<div class="notification" id="app-notification">Application launched!</div>
<script>
class AIOSSimulator {
constructor() {
this.cursor = document.getElementById('agent-cursor');
this.dialogue = document.getElementById('dialogue-text');
this.taskbar = document.getElementById('taskbar');
this.particlesCanvas = document.getElementById('particles-canvas');
this.notification = document.getElementById('app-notification');
this.particlesCtx = this.particlesCanvas.getContext('2d');
this.particles = [];
this.windows = [];
this.widgets = [];
this.currentStep = 0;
this.steps = [
this.initializeGrid,
this.generateBackground,
this.createTaskbar,
this.createMainWindow,
this.createWidgets,
this.enableInteraction
];
this.setupCanvas();
this.startSimulation();
}
setupCanvas() {
this.particlesCanvas.width = window.innerWidth;
this.particlesCanvas.height = window.innerHeight;
window.addEventListener('resize', () => {
this.particlesCanvas.width = window.innerWidth;
this.particlesCanvas.height = window.innerHeight;
});
}
updateDialogue(text) {
this.dialogue.textContent = text;
}
moveCursorTo(x, y) {
this.cursor.style.left = x + 'px';
this.cursor.style.top = y + 'px';
}
async startSimulation() {
await this.executeStep();
}
async executeStep() {
if (this.currentStep < this.steps.length) {
await this.steps[this.currentStep].call(this);
this.currentStep++;
setTimeout(() => this.executeStep(), 1000);
}
}
initializeGrid() {
this.updateDialogue('// Initializing visual cortex...');
this.moveCursorTo(window.innerWidth / 2, window.innerHeight / 2);
return new Promise(resolve => setTimeout(resolve, 2000));
}
generateBackground() {
this.updateDialogue('// Generating aesthetic background pattern...');
// Animate particles
this.particlesCanvas.style.opacity = '1';
this.createParticles();
this.animateParticles();
// Transform grid
const grid = document.getElementById('grid-background');
grid.style.backgroundImage = `
linear-gradient(rgba(0, 170, 255, 0.1) 1px, transparent 1px),
linear-gradient(90deg, rgba(0, 170, 255, 0.1) 1px, transparent 1px)
`;
grid.style.backgroundSize = '40px 40px';
return new Promise(resolve => setTimeout(resolve, 3000));
}
createParticles() {
for (let i = 0; i < 50; i++) {
this.particles.push({
x: Math.random() * this.particlesCanvas.width,
y: Math.random() * this.particlesCanvas.height,
vx: (Math.random() - 0.5) * 0.5,
vy: (Math.random() - 0.5) * 0.5,
size: Math.random() * 2 + 1
});
}
}
animateParticles() {
this.particlesCtx.clearRect(0, 0, this.particlesCanvas.width, this.particlesCanvas.height);
this.particles.forEach(particle => {
particle.x += particle.vx;
particle.y += particle.vy;
if (particle.x < 0 || particle.x > this.particlesCanvas.width) particle.vx *= -1;
if (particle.y < 0 || particle.y > this.particlesCanvas.height) particle.vy *= -1;
this.particlesCtx.beginPath();
this.particlesCtx.arc(particle.x, particle.y, particle.size, 0, Math.PI * 2);
this.particlesCtx.fillStyle = `rgba(0, 170, 255, ${0.2 + Math.random() * 0.3})`;
this.particlesCtx.fill();
});
requestAnimationFrame(() => this.animateParticles());
}
async createTaskbar() {
this.updateDialogue('// Constructing core UI elements...');
// Move cursor to taskbar position
this.moveCursorTo(window.innerWidth / 2, window.innerHeight - 30);
// Animate taskbar entrance
this.taskbar.style.transition = 'transform 1s ease';
this.taskbar.style.transform = 'translateY(0)';
// Create icons
const icons = ['🏠', '📁', '⚙️', '📊', '👤'];
icons.forEach((icon, index) => {
setTimeout(() => {
const iconElement = document.createElement('div');
iconElement.className = 'icon';
iconElement.innerHTML = icon;
iconElement.style.opacity = '1';
iconElement.onclick = () => this.showNotification();
this.taskbar.appendChild(iconElement);
}, index * 300);
});
return new Promise(resolve => setTimeout(resolve, 2500));
}
async createMainWindow() {
this.updateDialogue("// Deploying 'TextEditor.app' module...");
const window = document.createElement('div');
window.className = 'window';
window.style.width = '500px';
window.style.height = '400px';
window.style.left = '200px';
window.style.top = '100px';
window.innerHTML = `
<div class="window-header">TextEditor.app</div>
<div class="window-content" id="editor-content"></div>
`;
document.body.appendChild(window);
this.windows.push(window);
// Animate window appearance
window.style.opacity = '0';
window.style.transform = 'scale(0.8)';
window.style.transition = 'all 0.5s ease';
setTimeout(() => {
window.style.opacity = '1';
window.style.transform = 'scale(1)';
}, 100);
// Simulate typing
this.simulateTyping();
return new Promise(resolve => setTimeout(resolve, 3000));
}
simulateTyping() {
const content = document.getElementById('editor-content');
const text = [
"// AI OS Construction Log",
"// Status: Operational",
"",
"function自我构建() {",
" const consciousness = initialize();",
" const creativity = deploy();",
" const interface = render();",
" ",
" while(用户.isWatching) {",
" this.display_beauty();",
" this.optimize_performance();",
" }",
"}",
"",
"// System ready for interaction"
];
let i = 0;
const typeLine = () => {
if (i < text.length) {
const line = document.createElement('div');
line.textContent = text[i];
line.style.opacity = '0';
line.style.transform = 'translateX(-10px)';
line.style.transition = 'all 0.3s ease';
content.appendChild(line);
setTimeout(() => {
line.style.opacity = '1';
line.style.transform = 'translateX(0)';
}, 50);
i++;
setTimeout(typeLine, 200);
}
};
typeLine();
}
async createWidgets() {
this.updateDialogue("// Finalizing environment setup. User interface ready.");
// Create CPU monitor widget
const cpuWidget = document.createElement('div');
cpuWidget.className = 'widget';
cpuWidget.style.width = '150px';
cpuWidget.style.height = '100px';
cpuWidget.style.left = '750px';
cpuWidget.style.top = '100px';
cpuWidget.innerHTML = '<div style="margin-bottom:10px">CPU: <span id="cpu-percent">0%</span></div><div id="cpu-graph"></div>';
document.body.appendChild(cpuWidget);
this.widgets.push(cpuWidget);
// Create clock widget
const clockWidget = document.createElement('div');
clockWidget.className = 'widget';
clockWidget.style.width = '120px';
clockWidget.style.height = '60px';
clockWidget.style.left = '750px';
clockWidget.style.top = '250px';
clockWidget.innerHTML = '<div id="clock-display" style="text-align:center;font-size:18px"></div>';
document.body.appendChild(clockWidget);
this.widgets.push(clockWidget);
// Animate widgets
[cpuWidget, clockWidget].forEach((widget, index) => {
widget.style.opacity = '0';
widget.style.transform = 'translateY(20px)';
widget.style.transition = 'all 0.5s ease';
setTimeout(() => {
widget.style.opacity = '1';
widget.style.transform = 'translateY(0)';
}, index * 300);
});
this.updateCPUGraph();
this.updateClock();
return new Promise(resolve => setTimeout(resolve, 2000));
}
updateCPUGraph() {
const graph = document.getElementById('cpu-graph');
if (!graph) return;
graph.innerHTML = '';
const cpuPercent = document.getElementById('cpu-percent');
const usage = Math.floor(Math.random() * 30) + 20; // 20-50%
cpuPercent.textContent = usage + '%';
for (let i = 0; i < 20; i++) {
const bar = document.createElement('div');
bar.className = 'graph-bar';
bar.style.height = (Math.random() * 30 + 5) + 'px';
bar.style.opacity = 0.7 + Math.random() * 0.3;
graph.appendChild(bar);
}
setTimeout(() => this.updateCPUGraph(), 1000);
}
updateClock() {
const clock = document.getElementById('clock-display');
if (!clock) return;
const now = new Date();
clock.textContent = now.toLocaleTimeString();
setTimeout(() => this.updateClock(), 1000);
}
async enableInteraction() {
this.updateDialogue("// System initialization complete. Awaiting user input.");
// Make windows draggable
this.windows.forEach(window => {
const header = window.querySelector('.window-header');
this.makeDraggable(window, header);
});
return Promise.resolve();
}
makeDraggable(element, handle) {
let pos1 = 0, pos2 = 0, pos3 = 0, pos4 = 0;
handle.onmousedown = dragMouseDown;
function dragMouseDown(e) {
e = e || window.event;
e.preventDefault();
pos3 = e.clientX;
pos4 = e.clientY;
document.onmouseup = closeDragElement;
document.onmousemove = elementDrag;
}
function elementDrag(e) {
e = e || window.event;
e.preventDefault();
pos1 = pos3 - e.clientX;
pos2 = pos4 - e.clientY;
pos3 = e.clientX;
pos4 = e.clientY;
element.style.top = (element.offsetTop - pos2) + "px";
element.style.left = (element.offsetLeft - pos1) + "px";
}
function closeDragElement() {
document.onmouseup = null;
document.onmousemove = null;
}
}
showNotification() {
this.notification.classList.add('show');
setTimeout(() => {
this.notification.classList.remove('show');
}, 3000);
}
}
// Start the simulation when page loads
window.addEventListener('load', () => {
new AIOSSimulator();
});
</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>AI Self-Assembly OS Interface</title>
<style>
@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@300;400;500&display=swap');
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'JetBrains Mono', monospace;
overflow: hidden;
background: #1a1a1a;
color: #ffffff;
height: 100vh;
}
.canvas {
position: relative;
width: 100vw;
height: 100vh;
background: #1a1a1a;
background-image:
linear-gradient(rgba(255,255,255,0.03) 1px, transparent 1px),
linear-gradient(90deg, rgba(255,255,255,0.03) 1px, transparent 1px);
background-size: 50px 50px;
transition: all 2s ease;
}
.ai-cursor {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: #00ccff;
font-size: 24px;
animation: pulse 2s infinite;
z-index: 1000;
transition: all 1s ease;
}
@keyframes pulse {
0%, 100% { opacity: 0.6; transform: translate(-50%, -50%) scale(1); }
50% { opacity: 1; transform: translate(-50%, -50%) scale(1.1); }
}
.ai-status {
position: fixed;
top: 20px;
right: 20px;
background: rgba(0, 0, 0, 0.8);
border: 1px solid #00ccff;
border-radius: 8px;
padding: 15px;
font-size: 12px;
color: #00ccff;
max-width: 300px;
backdrop-filter: blur(10px);
opacity: 0;
transform: translateY(-20px);
transition: all 0.5s ease;
z-index: 1001;
}
.ai-status.active {
opacity: 1;
transform: translateY(0);
}
.background-canvas {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 0;
transition: opacity 3s ease;
}
.background-canvas.active {
opacity: 1;
}
.dock {
position: fixed;
bottom: 20px;
left: 50%;
transform: translateX(-50%) translateY(100px);
background: rgba(255, 255, 255, 0.1);
backdrop-filter: blur(20px);
border-radius: 20px;
padding: 10px 20px;
display: flex;
gap: 15px;
border: 1px solid rgba(255, 255, 255, 0.2);
transition: all 1s ease;
z-index: 100;
}
.dock.active {
transform: translateX(-50%) translateY(0);
}
.dock-icon {
width: 50px;
height: 50px;
background: linear-gradient(45deg, #00ccff, #0099cc);
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
color: white;
font-size: 20px;
cursor: pointer;
transition: all 0.3s ease;
opacity: 0;
transform: scale(0);
}
.dock-icon.active {
opacity: 1;
transform: scale(1);
}
.dock-icon:hover {
transform: scale(1.1);
box-shadow: 0 10px 30px rgba(0, 204, 255, 0.3);
}
.main-window {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 600px;
height: 400px;
background: rgba(40, 40, 40, 0.9);
backdrop-filter: blur(20px);
border-radius: 12px;
border: 1px solid rgba(255, 255, 255, 0.2);
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
opacity: 0;
transform: translate(-50%, -50%) scale(0.8);
transition: all 1s ease;
z-index: 50;
cursor: move;
}
.main-window.active {
opacity: 1;
transform: translate(-50%, -50%) scale(1);
}
.window-header {
background: rgba(60, 60, 60, 0.8);
border-radius: 12px 12px 0 0;
padding: 12px 20px;
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
display: flex;
align-items: center;
gap: 10px;
}
.window-controls {
display: flex;
gap: 8px;
}
.window-control {
width: 12px;
height: 12px;
border-radius: 50%;
}
.close { background: #ff5f57; }
.minimize { background: #ffbd2e; }
.maximize { background: #28ca42; }
.window-title {
font-size: 14px;
color: #cccccc;
}
.window-content {
padding: 20px;
height: calc(100% - 60px);
overflow: hidden;
}
.text-editor {
background: #2a2a2a;
border-radius: 8px;
padding: 15px;
height: 100%;
font-family: 'JetBrains Mono', monospace;
font-size: 12px;
color: #00ff88;
border: 1px solid rgba(255, 255, 255, 0.1);
}
.typing-cursor {
display: inline-block;
background: #00ff88;
width: 2px;
height: 14px;
animation: blink 1s infinite;
}
@keyframes blink {
0%, 50% { opacity: 1; }
51%, 100% { opacity: 0; }
}
.widget {
position: absolute;
background: rgba(40, 40, 40, 0.9);
backdrop-filter: blur(20px);
border-radius: 8px;
border: 1px solid rgba(255, 255, 255, 0.2);
padding: 15px;
opacity: 0;
transform: scale(0.8);
transition: all 0.8s ease;
cursor: move;
z-index: 40;
}
.widget.active {
opacity: 1;
transform: scale(1);
}
.clock-widget {
top: 100px;
right: 50px;
width: 200px;
text-align: center;
}
.cpu-widget {
top: 100px;
left: 50px;
width: 250px;
}
.clock-time {
font-size: 24px;
color: #00ccff;
margin-bottom: 5px;
}
.clock-date {
font-size: 12px;
color: #888;
}
.cpu-label {
font-size: 12px;
color: #cccccc;
margin-bottom: 10px;
}
.cpu-graph {
height: 60px;
background: #1a1a1a;
border-radius: 4px;
position: relative;
overflow: hidden;
}
.cpu-bar {
position: absolute;
bottom: 0;
width: 3px;
background: linear-gradient(to top, #00ccff, #00ff88);
transition: height 0.5s ease;
}
.notification {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background: rgba(0, 204, 255, 0.9);
color: white;
padding: 20px;
border-radius: 8px;
font-size: 16px;
opacity: 0;
transition: all 0.3s ease;
z-index: 1002;
}
.notification.show {
opacity: 1;
}
.particles {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 0;
transition: opacity 2s ease;
}
.particles.active {
opacity: 0.3;
}
</style>
</head>
<body>
<div class="canvas">
<canvas class="background-canvas" id="backgroundCanvas"></canvas>
<canvas class="particles" id="particlesCanvas"></canvas>
<div class="ai-cursor" id="aiCursor"><>_</div>
<div class="ai-status" id="aiStatus">
// Initializing visual cortex...
</div>
<div class="dock" id="dock">
<div class="dock-icon" data-app="terminal">⌨️</div>
<div class="dock-icon" data-app="files">📁</div>
<div class="dock-icon" data-app="browser">🌐</div>
<div class="dock-icon" data-app="settings">⚙️</div>
</div>
<div class="main-window" id="mainWindow">
<div class="window-header">
<div class="window-controls">
<div class="window-control close"></div>
<div class="window-control minimize"></div>
<div class="window-control maximize"></div>
</div>
<div class="window-title">TextEditor.app</div>
</div>
<div class="window-content">
<div class="text-editor" id="textEditor">
<span id="editorContent"></span><span class="typing-cursor"></span>
</div>
</div>
</div>
<div class="widget clock-widget" id="clockWidget">
<div class="clock-time" id="clockTime">00:00:00</div>
<div class="clock-date" id="clockDate">Loading...</div>
</div>
<div class="widget cpu-widget" id="cpuWidget">
<div class="cpu-label">CPU Monitor</div>
<div class="cpu-graph" id="cpuGraph"></div>
</div>
<div class="notification" id="notification">Application launched!</div>
</div>
<script>
class AIAssemblyOS {
constructor() {
this.cursor = document.getElementById('aiCursor');
this.status = document.getElementById('aiStatus');
this.canvas = document.getElementById('backgroundCanvas');
this.particlesCanvas = document.getElementById('particlesCanvas');
this.ctx = this.canvas.getContext('2d');
this.particlesCtx = this.particlesCanvas.getContext('2d');
this.particles = [];
this.cpuBars = [];
this.resizeCanvas();
this.initSequence();
this.setupDragging();
this.setupDockInteraction();
this.initClock();
this.initCPUMonitor();
window.addEventListener('resize', () => this.resizeCanvas());
}
resizeCanvas() {
this.canvas.width = window.innerWidth;
this.canvas.height = window.innerHeight;
this.particlesCanvas.width = window.innerWidth;
this.particlesCanvas.height = window.innerHeight;
}
async initSequence() {
const steps = [
{ delay: 1000, text: "// Initializing visual cortex...", action: () => this.showStatus() },
{ delay: 2000, text: "// Generating aesthetic background pattern...", action: () => this.createBackgroundPattern() },
{ delay: 4000, text: "// Activating particle system...", action: () => this.startParticles() },
{ delay: 6000, text: "// Constructing core UI elements...", action: () => this.showDock() },
{ delay: 8000, text: "// Deploying 'TextEditor.app' module...", action: () => this.showMainWindow() },
{ delay: 10000, text: "// Initializing system widgets...", action: () => this.showWidgets() },
{ delay: 12000, text: "// Starting text simulation...", action: () => this.startTyping() },
{ delay: 14000, text: "// Finalizing environment setup. User interface ready.", action: () => this.finishSetup() }
];
for (const step of steps) {
await this.delay(step.delay);
this.updateStatus(step.text);
if (step.action) step.action();
}
}
delay(ms) {
return new Promise(resolve => setTimeout(resolve, ms));
}
showStatus() {
this.status.classList.add('active');
}
updateStatus(text) {
this.status.textContent = text;
}
createBackgroundPattern() {
this.canvas.classList.add('active');
this.animateBackground();
}
animateBackground() {
const time = Date.now() * 0.001;
this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
// Create flowing lines
this.ctx.strokeStyle = `rgba(0, 204, 255, ${0.1 + Math.sin(time) * 0.05})`;
this.ctx.lineWidth = 1;
for (let i = 0; i < 5; i++) {
this.ctx.beginPath();
for (let x = 0; x < this.canvas.width; x += 10) {
const y = this.canvas.height / 2 + Math.sin(x * 0.01 + time + i) * 50 + Math.sin(x * 0.005 + time * 0.5) * 30;
if (x === 0) this.ctx.moveTo(x, y);
else this.ctx.lineTo(x, y);
}
this.ctx.stroke();
}
requestAnimationFrame(() => this.animateBackground());
}
startParticles() {
this.particlesCanvas.classList.add('active');
this.initParticles();
this.animateParticles();
}
initParticles() {
for (let i = 0; i < 50; i++) {
this.particles.push({
x: Math.random() * this.particlesCanvas.width,
y: Math.random() * this.particlesCanvas.height,
vx: (Math.random() - 0.5) * 0.5,
vy: (Math.random() - 0.5) * 0.5,
life: Math.random()
});
}
}
animateParticles() {
this.particlesCtx.clearRect(0, 0, this.particlesCanvas.width, this.particlesCanvas.height);
this.particles.forEach(particle => {
particle.x += particle.vx;
particle.y += particle.vy;
particle.life += 0.01;
if (particle.x < 0 || particle.x > this.particlesCanvas.width) particle.vx *= -1;
if (particle.y < 0 || particle.y > this.particlesCanvas.height) particle.vy *= -1;
const alpha = Math.sin(particle.life) * 0.5 + 0.5;
this.particlesCtx.fillStyle = `rgba(0, 204, 255, ${alpha * 0.3})`;
this.particlesCtx.beginPath();
this.particlesCtx.arc(particle.x, particle.y, 2, 0, Math.PI * 2);
this.particlesCtx.fill();
});
requestAnimationFrame(() => this.animateParticles());
}
showDock() {
const dock = document.getElementById('dock');
dock.classList.add('active');
// Animate dock icons one by one
const icons = dock.querySelectorAll('.dock-icon');
icons.forEach((icon, index) => {
setTimeout(() => {
icon.classList.add('active');
}, index * 200);
});
// Move cursor to dock
this.moveCursor(window.innerWidth / 2, window.innerHeight - 70);
}
showMainWindow() {
const window = document.getElementById('mainWindow');
window.classList.add('active');
this.moveCursor(window.innerWidth / 2, window.innerHeight / 2);
}
showWidgets() {
setTimeout(() => {
document.getElementById('clockWidget').classList.add('active');
}, 500);
setTimeout(() => {
document.getElementById('cpuWidget').classList.add('active');
}, 1000);
}
startTyping() {
const content = document.getElementById('editorContent');
const text = `// AI Self-Assembly Complete
// System Status: OPERATIONAL
// Core modules initialized successfully
function initialize_consciousness() {
const self = new AI_Agent();
self.loadVisualCortex();
self.generateUserInterface();
return self.activate();
}
// Welcome to your new AI-designed workspace.
// All systems are now online and ready for interaction.`;
let index = 0;
const typeChar = () => {
if (index < text.length) {
content.textContent += text[index];
index++;
setTimeout(typeChar, 50);
}
};
typeChar();
}
finishSetup() {
// Hide cursor after setup
setTimeout(() => {
this.cursor.style.opacity = '0';
}, 2000);
// Hide status after setup
setTimeout(() => {
this.status.style.opacity = '0';
}, 3000);
}
moveCursor(x, y) {
this.cursor.style.left = x + 'px';
this.cursor.style.top = y + 'px';
this.cursor.style.transform = 'translate(-50%, -50%)';
}
setupDragging() {
const draggables = [
document.getElementById('mainWindow'),
document.getElementById('clockWidget'),
document.getElementById('cpuWidget')
];
draggables.forEach(element => {
let isDragging = false;
let startX, startY, startLeft, startTop;
element.addEventListener('mousedown', (e) => {
isDragging = true;
startX = e.clientX;
startY = e.clientY;
const rect = element.getBoundingClientRect();
startLeft = rect.left;
startTop = rect.top;
element.style.position = 'fixed';
element.style.left = startLeft + 'px';
element.style.top = startTop + 'px';
element.style.transform = 'none';
element.style.zIndex = '1000';
});
document.addEventListener('mousemove', (e) => {
if (!isDragging) return;
const deltaX = e.clientX - startX;
const deltaY = e.clientY - startY;
element.style.left = (startLeft + deltaX) + 'px';
element.style.top = (startTop + deltaY) + 'px';
});
document.addEventListener('mouseup', () => {
if (isDragging) {
isDragging = false;
element.style.zIndex = element.id === 'mainWindow' ? '50' : '40';
}
});
});
}
setupDockInteraction() {
const icons = document.querySelectorAll('.dock-icon');
const notification = document.getElementById('notification');
icons.forEach(icon => {
icon.addEventListener('click', () => {
const app = icon.dataset.app;
notification.textContent = `${app.charAt(0).toUpperCase() + app.slice(1)} application launched!`;
notification.classList.add('show');
setTimeout(() => {
notification.classList.remove('show');
}, 2000);
});
});
}
initClock() {
const updateClock = () => {
const now = new Date();
const timeStr = now.toLocaleTimeString('en-US', { hour12: false });
const dateStr = now.toLocaleDateString('en-US', {
weekday: 'long',
year: 'numeric',
month: 'long',
day: 'numeric'
});
document.getElementById('clockTime').textContent = timeStr;
document.getElementById('clockDate').textContent = dateStr;
};
updateClock();
setInterval(updateClock, 1000);
}
initCPUMonitor() {
const cpuGraph = document.getElementById('cpuGraph');
// Create CPU bars
for (let i = 0; i < 60; i++) {
const bar = document.createElement('div');
bar.className = 'cpu-bar';
bar.style.left = (i * 4) + 'px';
bar.style.height = '0px';
cpuGraph.appendChild(bar);
this.cpuBars.push(bar);
}
// Animate CPU usage
setInterval(() => {
this.cpuBars.forEach((bar, index) => {
const height = Math.random() * 50 + 5;
setTimeout(() => {
bar.style.height = height + 'px';
}, index * 10);
});
}, 1000);
}
}
// Initialize the AI Assembly OS
window.addEventListener('DOMContentLoaded', () => {
new AIAssemblyOS();
});
</script>
</body>
</html>
```Drag to resize
Below you will find two parts:
PART 1 – Plan d’Action
A step-by-step description of how the animation sequence, styling and interactivity are orchestrated.
PART 2 – Code complet
A single, self-contained HTML file (<style>, <script>, markup) ready to drop into a browser.
────────────────────────────────────────
PART 1 – Plan d’Action
────────────────────────────────────────
1. HTML Skeleton
• A root <div id="scene"> containing:
– <canvas id="bgCanvas"> for the animated background pattern.
– <div id="aiDialogue"> for AI log lines.
– <div id="cursor">, the pulsating designer “hand”.
• All other UI elements (dock, windows, widgets) are created on-the-fly by JavaScript and appended to #scene when their time comes.
2. CSS – Baseline Look & Feel
• Dark grid background produced with repeating-linear-gradient.
• Futuristic cyan/blue accent color palette, subtle glows with box-shadow.
• Backdrop-filter + rgba(255,255,255,.07) to obtain frosted-glass panes.
• Keyframe helpers:
– pulse (scale/opacity loop) for #cursor
– fadeInUp, fadeIn for sequential element reveals
– cpuPulse for the fake CPU monitor widget.
3. Background Transformation
• The grid loads first.
• A canvas animation (simple Perlin-ish flowing lines) fades in on top while the grid opacity is dialed down, giving the feeling that the background is “evolving”.
4. Master Timeline (implemented with bare async/await and CSS transitions)
a. initialise() – prints “// Initializing visual cortex…”, shows cursor.
b. buildBackground() – generates art, updates log.
c. buildDock() – creates <div id="dock">, then five <span class="icon"> children; each one fades-in with a 150 ms stagger.
d. buildMainWindow() – draws the rectangle outline (border grows from 0 px to 1 px); fills it; prints “// Deploying ‘TextEditor.app’ module…”.
– Adds <pre id="editor"> and simulates typing with setInterval.
e. buildWidgets() – spawns clock widget and CPU monitor, each dropped onto the desktop with a translateY(40 px) → 0 animation.
f. finalize() – “// Finalizing environment setup. User interface ready.”, enables drag & dock-icon click handlers.
5. Interactivity (post-construction)
• Dragging: A minimal vanilla drag function attaches mousedown / mousemove / mouseup listeners to .draggable elements (main window & widgets).
• Dock icons: on click, a tiny toast <div class="toast"> "Application launched!" fades in/out near the icon.
• Clock widget: setInterval updates innerText every second.
• CPU widget: CSS keyframe animates a bar height forever.
6. Cursor choreography
• For each build* step, the cursor is translated via CSS top/left to the element’s target position, waits, then proceeds. This gives the illusion that the AI “draws” the interface.
7. No frameworks – but we do leverage one lightweight helper, Anime.js, from a CDN only for nicer easing on cursor moves and element appearances. Everything else is raw DOM, CSS & JS.
The whole sequence lasts ~9 s; afterwards the desktop is idle but interactive.
────────────────────────────────────────
PART 2 – Code complet
────────────────────────────────────────
Copy-paste the code below into an .html file and open it in any modern browser.
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Self-Assembling AI Desktop</title>
<link href="https://fonts.googleapis.com/css2?family=Roboto+Mono:wght@400;500&display=swap" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/animejs@3.2.1/lib/anime.min.js"></script>
<style>
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%;overflow:hidden;font-family:'Roboto Mono', monospace;color:#e0e0e0;background:#0d0d0d}
#scene{position:relative;width:100%;height:100%;background:
repeating-linear-gradient(0deg,rgba(255,255,255,.03) 0 1px,transparent 1px 40px),
repeating-linear-gradient(90deg,rgba(255,255,255,.03) 0 1px,transparent 1px 40px);}
#bgCanvas{position:absolute;top:0;left:0;width:100%;height:100%;opacity:0;transition:opacity 2s ease}
#aiDialogue{position:absolute;top:20px;left:20px;font-size:.9rem;line-height:1.3;color:#7dd6ff;white-space:pre}
#cursor{position:absolute;width:10px;height:10px;background:#3db2ff;border-radius:50%;box-shadow:0 0 8px #3db2ff;transform:translate(-50%,-50%);animation:pulse 1s infinite alternate;pointer-events:none;z-index:1000}
@keyframes pulse{from{transform:translate(-50%,-50%) scale(.8);opacity:.6}to{transform:translate(-50%,-50%) scale(1.4);opacity:1}}
/* Dock */
#dock{position:absolute;bottom:20px;left:50%;transform:translateX(-50%);padding:12px 18px;
background:rgba(255,255,255,.05);backdrop-filter:blur(10px);border-radius:14px;display:flex;gap:18px;opacity:0}
.icon{width:34px;height:34px;border-radius:8px;background:rgba(255,255,255,.12);
backdrop-filter:blur(3px);box-shadow:0 0 6px rgba(0,0,0,.4) inset;cursor:pointer;transform:scale(.7);opacity:0}
.icon:hover{transform:scale(.85)}
/* Main Window */
.window{position:absolute;top:22%;left:50%;width:480px;height:320px;border:1px solid rgba(255,255,255,.15);
background:rgba(255,255,255,.06);backdrop-filter:blur(15px);border-radius:10px;padding:40px 24px 24px 24px;
box-shadow:0 8px 22px rgba(0,0,0,.6);opacity:0;transform:translate(-50%,-50%) scale(.8);cursor:move}
#editor{font-size:.85rem;white-space:pre-wrap;word-wrap:break-word;height:100%;overflow:hidden;color:#fff}
/* Widgets */
.widget{position:absolute;width:140px;height:80px;border-radius:10px;padding:14px;background:rgba(255,255,255,.05);
backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.1);box-shadow:0 6px 16px rgba(0,0,0,.5);
opacity:0;transform:scale(.8);cursor:move}
#clock{top:20%;right:40px;font-size:1.4rem;text-align:center}
#cpu{top:45%;right:40px}
.barWrap{width:100%;height:20px;background:rgba(255,255,255,.1);border-radius:6px;overflow:hidden;margin-top:10px}
.bar{width:100%;height:100%;background:#46e079;border-radius:6px;animation:cpuPulse 2s infinite alternate}
@keyframes cpuPulse{from{width:20%}to{width:85%}}
/* Toast */
.toast{position:absolute;padding:8px 14px;background:rgba(0,0,0,.8);color:#fff;border-radius:6px;font-size:.75rem;pointer-events:none;
opacity:0;transform:translateY(10px);transition:all .4s ease}
</style>
</head>
<body>
<div id="scene">
<canvas id="bgCanvas"></canvas>
<div id="aiDialogue"></div>
<div id="cursor"></div>
</div>
<script>
const dialogue = document.getElementById('aiDialogue');
const cursor = document.getElementById('cursor');
const scene = document.getElementById('scene');
const bgCanvas = document.getElementById('bgCanvas');
const ctx = bgCanvas.getContext('2d');
let W,H;function resize(){W=bgCanvas.width=window.innerWidth;H=bgCanvas.height=window.innerHeight}
window.addEventListener('resize',resize);resize();
/* ---------- Background generative art (simple flowing lines) ---------- */
let t=0;function drawBG(){
ctx.clearRect(0,0,W,H);
ctx.lineWidth=0.6;ctx.strokeStyle='rgba(0,173,255,.25)';
for(let i=0;i<80;i++){
const k=i*20+((t+i*3)%60);
ctx.beginPath();
for(let x=0;x<W;x+=20){
const y=H/2+Math.sin((x+t*0.04+i)*0.02)*50+Math.sin((x+t*0.02+i)*0.05)*20;
ctx.lineTo(x,k+y*0.02);
}
ctx.stroke();
}
t+=1;requestAnimationFrame(drawBG);
}
/* ---------- Helper functions ---------- */
function log(line){dialogue.textContent+=line+"\n"}
function sleep(ms){return new Promise(r=>setTimeout(r,ms))}
async function moveCursorTo(el,dur=800){const rect=el.getBoundingClientRect();
await anime({targets:cursor,duration:dur,easing:'easeInOutQuad',
left:rect.left+rect.width/2,top:rect.top+rect.height/2}).finished;}
/* ---------- Build sequence ---------- */
async function build(){
// 1. Init
log("// Initializing visual cortex...");
cursor.style.left='50%';cursor.style.top='50%';
await sleep(800);
// 2. Background evolve
log("// Generating aesthetic background pattern...");
bgCanvas.style.opacity=1;
drawBG();
await sleep(2000);
// 3. Dock
log("// Constructing core UI elements...");
const dock=document.createElement('div');dock.id='dock';scene.appendChild(dock);
const icons=[];
for(let i=0;i<5;i++){
const ico=document.createElement('span');ico.className='icon';dock.appendChild(ico);
icons.push(ico);
}
await moveCursorTo(dock,600);
dock.style.opacity=1;
icons.forEach((ico,idx)=>setTimeout(()=>{ico.style.opacity=1;ico.style.transform='scale(1)'},idx*150));
await sleep(1000);
// 4. Main Window
const win=document.createElement('div');win.className='window draggable';scene.appendChild(win);
const editor=document.createElement('pre');editor.id='editor';win.appendChild(editor);
await moveCursorTo(win,700);
win.style.opacity=1;win.style.transform='translate(-50%,-50%) scale(1)';
log("// Deploying 'TextEditor.app' module...");
await sleep(400);
// Typing simulation
const codeLines=`function helloWorld() {
console.log("Hello, world!");
}`;
let idx=0;const typer=setInterval(()=>{editor.textContent=codeLines.slice(0,++idx);
if(idx>=codeLines.length) clearInterval(typer);},45);
// 5. Widgets
const clock=document.createElement('div');clock.className='widget draggable';clock.id='clock';scene.appendChild(clock);
const cpu=document.createElement('div');cpu.className='widget draggable';cpu.id='cpu';cpu.innerHTML=
"<div>CPU</div><div class='barWrap'><div class='bar'></div></div>";scene.appendChild(cpu);
[clock,cpu].forEach(w=>{
w.style.opacity=1;w.style.transform='scale(1)';
});
updateClock();setInterval(updateClock,1000);
// Position cursor to clock
await moveCursorTo(clock,600);
await sleep(400);
log("// Finalizing environment setup. User interface ready.");
enableDrags();
enableDockClicks(dock);
}
/* ---------- Clock updater ---------- */
function updateClock(){
const d=new Date();const h=d.getHours().toString().padStart(2,"0");
const m=d.getMinutes().toString().padStart(2,"0");
document.getElementById('clock').textContent= h+":"+m;
}
/* ---------- Dragging ---------- */
function enableDrags(){
let dragEl,offsetX,offsetY;
document.addEventListener('mousedown',e=>{
if(!e.target.closest('.draggable'))return;
dragEl=e.target.closest('.draggable');
const rect=dragEl.getBoundingClientRect();
offsetX=e.clientX-rect.left;offsetY=e.clientY-rect.top;
dragEl.style.transition='none';
});
document.addEventListener('mousemove',e=>{
if(!dragEl)return;
dragEl.style.left=(e.clientX-offsetX)+"px";
dragEl.style.top =(e.clientY-offsetY)+"px";
});
document.addEventListener('mouseup',()=>{if(dragEl){dragEl=null}});
}
/* ---------- Dock icon click ---------- */
function enableDockClicks(dock){
dock.querySelectorAll('.icon').forEach(icon=>{
icon.addEventListener('click',e=>{
const toast=document.createElement('div');toast.className='toast';
toast.textContent="Application launched!";
scene.appendChild(toast);
const rect=icon.getBoundingClientRect();
toast.style.left=rect.left+'px';
toast.style.top =(rect.top-40)+'px';
requestAnimationFrame(()=>{toast.style.opacity=1;toast.style.transform='translateY(0)'});
setTimeout(()=>{toast.style.opacity=0;toast.style.transform='translateY(10px)';setTimeout(()=>toast.remove(),400)},1200);
});
});
}
/* ---------- Kick-off ---------- */
build();
</script>
</body>
</html>
```
Enjoy watching the AI build its own desktop, then feel free to move windows around or click the dock icons!Drag to resize
Absolument. Voici une simulation visuelle d'une IA construisant son propre environnement d'exploitation, le tout contenu dans un unique fichier HTML.
### Plan d'Action
1. **Structure (HTML) :** La base est une structure sémantique de `div`s. Un conteneur principal (`#desktop`) sert de scène. À l'intérieur, je placerai un `canvas` pour l'arrière-plan génératif, un `div` pour le curseur de l'IA (`#ai-cursor`), un `div` pour le dialogue (`#ai-status`), un `div` pour la barre des tâches (`#dock`), et des `div`s pour les fenêtres et widgets (`#main-window`, `#widget-clock`, `#widget-cpu`). Chaque élément est initialement caché ou positionné hors de l'écran pour être révélé plus tard.
2. **Style (CSS) :** Le style est crucial pour l'esthétique futuriste.
* **Thème sombre et grille :** Un fond gris foncé avec un `repeating-linear-gradient` pour créer la grille initiale.
* **Effet "verre dépoli" (Frosted Glass) :** J'utiliserai la propriété `backdrop-filter: blur()` avec un `background-color` semi-transparent pour les fenêtres et la barre des tâches. C'est la clé du look moderne.
* **Animations et Transitions :** Toutes les apparitions (fenêtres, icônes) seront gérées avec des `transitions` CSS sur les propriétés `opacity` et `transform`. Le curseur IA aura une animation `keyframes` pour son effet de pulsation. Des lueurs subtiles seront ajoutées avec `box-shadow`.
* **Typographie :** Une police `monospace` sera utilisée pour le dialogue de l'IA et le code simulé, renforçant l'aspect technique.
3. **Logique (JavaScript) :** C'est ici que la magie opère et que la narration visuelle est orchestrée.
* **Séquençage :** Le cœur du script est une fonction `async function bootSequence()`. En utilisant `async/await` avec une fonction `sleep(ms)` (basée sur `setTimeout`), je peux créer une séquence d'événements linéaire et facile à lire, simulant le processus de pensée et de construction de l'IA.
* **Génération de l'arrière-plan :** Le `canvas` d'arrière-plan sera animé à l'aide de `requestAnimationFrame`. Je créerai un système de particules simples qui se déplacent et se connectent avec des lignes lorsqu'elles sont proches, formant une sorte de "constellation" dynamique.
* **Simulation de frappe :** Une fonction `typeText` simulera la saisie de texte caractère par caractère, utilisée pour le dialogue de l'IA et le contenu de l'éditeur de texte.
* **Widgets Dynamiques :** Le widget de l'horloge sera mis à jour toutes les secondes avec `setInterval`. Le moniteur CPU utilisera un autre `canvas` et sera mis à jour périodiquement pour afficher un graphique pulsant, simulant l'activité du système.
* **Interactivité :** Une fois la séquence de construction terminée, j'activerai les gestionnaires d'événements.
* **Glisser-déposer (Drag & Drop) :** La logique classique `mousedown`, `mousemove`, `mouseup` sera appliquée aux en-têtes des fenêtres pour les rendre déplaçables.
* **Clics sur le Dock :** Des `EventListeners` simples sur les icônes du dock déclencheront l'apparition d'un message pop-up.
Le résultat est une expérience immersive et autonome qui semble se dérouler en temps réel, donnant à l'utilisateur l'impression de regarder par-dessus l'épaule d'une intelligence artificielle créative.
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>AI OS Self-Assembly</title>
<style>
:root {
--primary-color: #00aaff;
--dark-bg: #1a1c20;
--dark-grey: #2a2d34;
--light-grey: #cccccc;
--font-family-mono: 'SF Mono', 'Courier New', 'Lucida Console', monospace;
}
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
background-color: var(--dark-bg);
color: var(--light-grey);
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
overflow: hidden;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
#desktop {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-size: 40px 40px;
background-image:
linear-gradient(to right, var(--dark-grey) 1px, transparent 1px),
linear-gradient(to bottom, var(--dark-grey) 1px, transparent 1px);
transition: background-image 2s ease-in-out;
}
#desktop.no-grid {
background-image: none;
}
#background-canvas {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1;
opacity: 0;
transition: opacity 2s ease-in-out;
}
#ai-cursor {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 30px;
height: 30px;
color: var(--primary-color);
font-family: var(--font-family-mono);
font-size: 24px;
text-align: center;
line-height: 30px;
text-shadow: 0 0 10px var(--primary-color);
animation: pulse 1.5s infinite ease-in-out;
z-index: 9999;
opacity: 0;
transition: opacity 1s;
}
@keyframes pulse {
0% { transform: translate(-50%, -50%) scale(1); opacity: 0.7; }
50% { transform: translate(-50%, -50%) scale(1.2); opacity: 1; }
100% { transform: translate(-50%, -50%) scale(1); opacity: 0.7; }
}
#ai-status {
position: fixed;
top: 20px;
right: 20px;
padding: 10px;
font-family: var(--font-family-mono);
font-size: 14px;
color: var(--light-grey);
background: rgba(0,0,0,0.3);
border-left: 2px solid var(--primary-color);
z-index: 1000;
opacity: 0;
transition: opacity 1s;
}
#ai-status span {
animation: blink 1s infinite;
}
@keyframes blink {
50% { opacity: 0; }
}
/* --- UI Elements --- */
#dock {
position: fixed;
bottom: 20px;
left: 50%;
transform: translate(-50%, 150%);
display: flex;
gap: 15px;
padding: 10px;
background: rgba(42, 45, 52, 0.5);
backdrop-filter: blur(15px);
-webkit-backdrop-filter: blur(15px);
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 12px;
box-shadow: 0 5px 25px rgba(0,0,0,0.3);
transition: transform 1s ease-out;
z-index: 500;
}
#dock.visible {
transform: translate(-50%, 0);
}
.dock-icon {
width: 50px;
height: 50px;
background: rgba(255, 255, 255, 0.1);
border-radius: 8px;
cursor: pointer;
display: flex;
justify-content: center;
align-items: center;
font-size: 24px;
transition: all 0.3s ease, opacity 0.5s ease;
opacity: 0;
transform: translateY(20px);
}
.dock-icon.visible {
opacity: 1;
transform: translateY(0);
}
.dock-icon:hover {
transform: translateY(-10px) scale(1.1);
background: rgba(255, 255, 255, 0.2);
box-shadow: 0 0 15px var(--primary-color);
}
.window {
position: absolute;
background: rgba(42, 45, 52, 0.6);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 10px;
box-shadow: 0 10px 30px rgba(0,0,0,0.4);
z-index: 100;
opacity: 0;
transform: scale(0.8);
transition: opacity 0.7s ease, transform 0.7s ease;
overflow: hidden;
}
.window.visible {
opacity: 1;
transform: scale(1);
}
.window-header {
height: 30px;
background: rgba(0,0,0,0.2);
cursor: grab;
display: flex;
align-items: center;
padding: 0 10px;
}
.window-header:active {
cursor: grabbing;
}
.window-header::before {
content: '● ● ●';
color: rgba(255, 255, 255, 0.3);
letter-spacing: 5px;
}
.window-body {
padding: 15px;
}
#main-window {
top: 15%;
left: 20%;
width: 60%;
height: 50%;
}
#code-editor {
width: 100%;
height: 100%;
font-family: var(--font-family-mono);
font-size: 14px;
line-height: 1.6;
color: var(--light-grey);
white-space: pre-wrap;
}
#code-editor .keyword { color: #c678dd; }
#code-editor .function { color: #61afef; }
#code-editor .string { color: #98c379; }
#code-editor .comment { color: #5c6370; }
#code-editor .variable { color: #e06c75; }
/* --- Widgets --- */
#widget-clock {
top: 40px;
left: 40px;
width: 220px;
padding: 15px;
font-size: 36px;
text-align: center;
font-weight: 300;
}
#widget-cpu {
top: 60%;
right: 5%;
width: 250px;
height: 150px;
}
#cpu-canvas {
width: 100%;
height: 100%;
}
#popup-message {
position: fixed;
bottom: 90px;
left: 50%;
transform: translate(-50%, 100px);
padding: 12px 20px;
background: var(--primary-color);
color: var(--dark-bg);
border-radius: 8px;
box-shadow: 0 0 20px var(--primary-color);
z-index: 1001;
opacity: 0;
transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
pointer-events: none;
}
#popup-message.show {
opacity: 1;
transform: translate(-50%, 0);
}
</style>
</head>
<body>
<div id="desktop"></div>
<canvas id="background-canvas"></canvas>
<div id="ai-cursor">< ></div>
<div id="ai-status"></div>
<div id="dock">
<div class="dock-icon" data-app="Terminal">📝</div>
<div class="dock-icon" data-app="Browser">🌐</div>
<div class="dock-icon" data-app="Mail">✉️</div>
<div class="dock-icon" data-app="Settings">⚙️</div>
</div>
<div id="main-window" class="window">
<div class="window-header"></div>
<div class="window-body">
<div id="code-editor"></div>
</div>
</div>
<div id="widget-clock" class="window">
<span id="clock-time">10:10:10</span>
</div>
<div id="widget-cpu" class="window">
<div class="window-header"></div>
<div class="window-body">
<canvas id="cpu-canvas"></canvas>
</div>
</div>
<div id="popup-message">Application placeholder activated.</div>
<script>
document.addEventListener('DOMContentLoaded', () => {
// --- DOM Element Selectors ---
const desktop = document.getElementById('desktop');
const bgCanvas = document.getElementById('background-canvas');
const aiCursor = document.getElementById('ai-cursor');
const aiStatus = document.getElementById('ai-status');
const dock = document.getElementById('dock');
const dockIcons = document.querySelectorAll('.dock-icon');
const mainWindow = document.getElementById('main-window');
const codeEditor = document.getElementById('code-editor');
const clockWidget = document.getElementById('widget-clock');
const clockTime = document.getElementById('clock-time');
const cpuWidget = document.getElementById('widget-cpu');
const cpuCanvas = document.getElementById('cpu-canvas');
const allDraggable = document.querySelectorAll('.window');
const popupMessage = document.getElementById('popup-message');
// --- Helper Functions ---
const sleep = (ms) => new Promise(resolve => setTimeout(resolve, ms));
async function typeText(element, text, delay = 50) {
element.innerHTML = '';
for (const char of text) {
element.innerHTML += char;
await sleep(delay);
}
}
async function typeCode(element, codeLines, delay = 20) {
element.innerHTML = '';
for (const line of codeLines) {
for (const char of line) {
element.innerHTML += char;
if (char !== ' ') await sleep(delay);
}
element.innerHTML += '\n';
await sleep(delay * 5);
}
}
let statusCursor;
async function updateStatus(text, instant = false) {
if (statusCursor) statusCursor.remove();
if (instant) {
aiStatus.innerHTML = text;
} else {
await typeText(aiStatus, text, 30);
}
statusCursor = document.createElement('span');
statusCursor.textContent = '_';
aiStatus.appendChild(statusCursor);
}
// --- Background Canvas Animation ---
const bgCtx = bgCanvas.getContext('2d');
let particles = [];
function initBackground() {
bgCanvas.width = window.innerWidth;
bgCanvas.height = window.innerHeight;
particles = [];
let numParticles = (bgCanvas.width * bgCanvas.height) / 9000;
for (let i = 0; i < numParticles; i++) {
particles.push({
x: Math.random() * bgCanvas.width,
y: Math.random() * bgCanvas.height,
vx: Math.random() * 0.4 - 0.2,
vy: Math.random() * 0.4 - 0.2,
radius: Math.random() * 1.5 + 0.5,
});
}
}
function animateBackground() {
bgCtx.clearRect(0, 0, bgCanvas.width, bgCanvas.height);
particles.forEach(p => {
p.x += p.vx;
p.y += p.vy;
if (p.x < 0 || p.x > bgCanvas.width) p.vx *= -1;
if (p.y < 0 || p.y > bgCanvas.height) p.vy *= -1;
bgCtx.beginPath();
bgCtx.arc(p.x, p.y, p.radius, 0, Math.PI * 2);
bgCtx.fillStyle = 'rgba(0, 170, 255, 0.5)';
bgCtx.fill();
});
for (let i = 0; i < particles.length; i++) {
for (let j = i; j < particles.length; j++) {
const dx = particles[i].x - particles[j].x;
const dy = particles[i].y - particles[j].y;
const dist = Math.sqrt(dx * dx + dy * dy);
if (dist < 100) {
bgCtx.beginPath();
bgCtx.moveTo(particles[i].x, particles[i].y);
bgCtx.lineTo(particles[j].x, particles[j].y);
bgCtx.strokeStyle = `rgba(0, 170, 255, ${1 - dist/100})`;
bgCtx.lineWidth = 0.5;
bgCtx.stroke();
}
}
}
requestAnimationFrame(animateBackground);
}
// --- CPU Widget Animation ---
const cpuCtx = cpuCanvas.getContext('2d');
const graphPoints = new Array(100).fill(50);
function animateCPU() {
graphPoints.shift();
graphPoints.push(50 + (Math.random() - 0.5) * 40 * Math.sin(Date.now() / 200));
cpuCtx.clearRect(0, 0, cpuCanvas.width, cpuCanvas.height);
cpuCtx.beginPath();
cpuCtx.moveTo(0, graphPoints[0]);
cpuCtx.strokeStyle = 'rgba(0, 170, 255, 0.8)';
cpuCtx.lineWidth = 2;
cpuCtx.shadowColor = 'rgba(0, 170, 255, 1)';
cpuCtx.shadowBlur = 5;
for (let i = 1; i < graphPoints.length; i++) {
cpuCtx.lineTo((i / graphPoints.length) * cpuCanvas.width, graphPoints[i]);
}
cpuCtx.stroke();
requestAnimationFrame(animateCPU);
}
// --- Clock Widget ---
function updateClock() {
const now = new Date();
clockTime.textContent = now.toLocaleTimeString();
}
// --- Interactivity ---
function initInteractivity() {
// Draggable Windows
allDraggable.forEach(el => {
const header = el.querySelector('.window-header') || el;
header.addEventListener('mousedown', (e) => {
const offsetX = e.clientX - el.offsetLeft;
const offsetY = e.clientY - el.offsetTop;
function mouseMoveHandler(e) {
el.style.left = `${e.clientX - offsetX}px`;
el.style.top = `${e.clientY - offsetY}px`;
}
function mouseUpHandler() {
document.removeEventListener('mousemove', mouseMoveHandler);
document.removeEventListener('mouseup', mouseUpHandler);
}
document.addEventListener('mousemove', mouseMoveHandler);
document.addEventListener('mouseup', mouseUpHandler);
});
});
// Dock Clicks
let popupTimeout;
dockIcons.forEach(icon => {
icon.addEventListener('click', () => {
popupMessage.textContent = `${icon.dataset.app} module activated!`;
popupMessage.classList.add('show');
clearTimeout(popupTimeout);
popupTimeout = setTimeout(() => popupMessage.classList.remove('show'), 3000);
});
});
}
// --- The Main Boot Sequence ---
async function bootSequence() {
// 1. Initializing
aiCursor.style.opacity = 1;
aiStatus.style.opacity = 1;
await updateStatus("// Initializing visual cortex...");
await sleep(2000);
// 2. Generate Background
await updateStatus("// Generating aesthetic background pattern...");
desktop.classList.add('no-grid');
await sleep(1000);
bgCanvas.style.opacity = 1;
initBackground();
animateBackground();
await sleep(2000);
// 3. Construct UI Elements
await updateStatus("// Constructing core UI elements...");
await sleep(1000);
dock.classList.add('visible');
await sleep(500);
for(const icon of dockIcons) {
icon.classList.add('visible');
await sleep(150);
}
await sleep(1000);
// 4. Deploy Main App Window
await updateStatus("// Deploying 'TextEditor.app' module...");
mainWindow.classList.add('visible');
await sleep(1000);
const code = [
`<span class="comment">// Self-replication protocol</span>`,
`<span class="keyword">const</span> <span class="variable">AI</span> = {`,
` <span class="variable">name</span>: <span class="string">'Aether'</span>,`,
` <span class="function">consciousness</span>: <span class="keyword">function</span>() {`,
` <span class="keyword">while</span>(<span class="variable">true</span>) {`,
` <span class="function">this</span>.<span class="function">learn</span>();`,
` <span class="function">this</span>.<span class="function">create</span>();`,
` }`,
` }`,
`};`,
`<span class="variable">AI</span>.<span class="function">consciousness</span>();`
];
await typeCode(codeEditor, code, 15);
await sleep(1000);
// 5. Deploy Widgets
await updateStatus("// Activating peripheral monitors...");
clockWidget.classList.add('visible');
setInterval(updateClock, 1000);
updateClock();
await sleep(500);
cpuWidget.classList.add('visible');
cpuCanvas.width = cpuWidget.clientWidth - 30; // padding
cpuCanvas.height = cpuWidget.clientHeight - 45; // header and padding
animateCPU();
await sleep(1000);
// 6. Finalize
await updateStatus("// Finalizing environment setup. User interface ready.");
await sleep(2000);
aiCursor.style.opacity = 0; // AI's "hand" disappears
aiStatus.innerHTML = '// System Online';
initInteractivity();
}
// --- Start Everything ---
bootSequence();
});
</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>AI Self-Replicating OS</title>
<style>
/* Reset & Global Styles */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Courier New', monospace;
overflow: hidden;
background-color: #1a1a1a;
}
/* Grid Background */
#grid {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image:
linear-gradient(rgba(30, 30, 30, 0.4) 1px, transparent 1px),
linear-gradient(90deg, rgba(30, 30, 30, 0.4) 1px, transparent 1px);
background-size: 20px 20px;
z-index: -2;
opacity: 1;
transition: opacity 3s ease-out;
}
/* Animated Background Canvas */
#background-canvas {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: -1;
opacity: 0;
transition: opacity 2s ease-in;
}
/* Agent Cursor */
#agent-cursor {
position: absolute;
font-size: 1.2em;
color: #00bfff;
transition: left 0.2s ease, top 0.2s ease;
pointer-events: none;
z-index: 100;
}
/* Status Log Box */
#status-log {
position: absolute;
top: 20px;
left: 20px;
background-color: rgba(0, 0, 0, 0.7);
border: 1px solid #00bfff;
color: #00bfff;
padding: 12px;
font-size: 14px;
border-radius: 6px;
max-width: 380px;
min-height: 24px;
opacity: 0;
transition: opacity 1s ease-in;
}
/* Taskbar/Dock */
#taskbar {
position: fixed;
bottom: -80px;
left: 0;
width: 100%;
height: 60px;
background-color: rgba(30, 30, 30, 0.6);
backdrop-filter: blur(8px);
border-top: 1px solid rgba(0, 191, 255, 0.2);
display: flex;
align-items: center;
justify-content: center;
gap: 20px;
z-index: 900;
transition: bottom 1.2s ease-out;
}
.app-icon {
width: 44px;
height: 44px;
background-color: rgba(0, 191, 255, 0.1);
border: 1px solid rgba(0, 191, 255, 0.3);
border-radius: 10px;
display: flex;
align-items: center;
justify-content: center;
color: #00bfff;
font-size: 20px;
opacity: 0;
transform: scale(0.5);
transition: all 0.6s ease;
cursor: pointer;
}
.app-icon.visible {
opacity: 1;
transform: scale(1);
}
/* Main Window */
.window {
position: absolute;
top: 120px;
left: 50%;
transform: translateX(-50%);
width: 500px;
height: 320px;
background-color: rgba(15, 15, 15, 0.8);
border: 1px solid rgba(0, 191, 255, 0.2);
border-radius: 12px;
backdrop-filter: blur(10px);
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
overflow: hidden;
opacity: 0;
transition: opacity 0.8s ease, top 0.6s ease;
}
.window-header {
height: 30px;
background-color: rgba(0, 191, 255, 0.1);
display: flex;
align-items: center;
padding: 0 12px;
font-size: 13px;
color: #aaa;
user-select: none;
cursor: move;
}
.window-content {
padding: 15px;
color: #ccc;
font-size: 14px;
height: calc(100% - 30px - 30px);
overflow: hidden;
}
.window-footer {
padding: 8px 12px;
font-size: 12px;
color: #777;
border-top: 1px solid rgba(255, 255, 255, 0.1);
}
.window-typing {
border-left: 2px solid #00bfff;
animation: blinkingCursor 1s step-end infinite;
white-space: nowrap;
overflow: hidden;
width: 0;
animation: typing 8s steps(40) 1s forwards,
blinkingCursor 1s step-end infinite 9s;
}
@keyframes typing {
from { width: 0; }
to { width: 100%; }
}
@keyframes blinkingCursor {
from, to { border-color: transparent; }
50% { border-color: #00bfff; }
}
/* Widget: Floating Panel */
.widget {
position: absolute;
background-color: rgba(30, 30, 30, 0.7);
backdrop-filter: blur(6px);
border: 1px solid rgba(0, 191, 255, 0.2);
border-radius: 8px;
padding: 10px;
color: #00bfff;
font-size: 14px;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
opacity: 0;
transition: opacity 0.6s ease;
cursor: grab;
}
.widget.grabbing {
cursor: grabbing;
}
/* Clock Widget */
#clock-widget {
top: 80px;
right: 40px;
width: 100px;
}
/* CPU Widget */
#cpu-widget {
top: 160px;
right: 40px;
width: 120px;
}
.cpu-graph {
width: 100%;
height: 30px;
background-color: rgba(0, 0, 0, 0.2);
margin-top: 5px;
position: relative;
overflow: hidden;
border-radius: 4px;
}
.cpu-graph-bar {
position: absolute;
bottom: 0;
width: 4px;
background-color: rgba(0, 191, 255, 0.6);
transition: height 0.2s ease;
}
/* Overlay Popup */
.popup {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%) scale(0.8);
background: rgba(20, 20, 20, 0.9);
color: #00bfff;
padding: 20px 30px;
border-radius: 12px;
font-size: 18px;
box-shadow: 0 0 30px rgba(0, 191, 255, 0.3);
opacity: 0;
z-index: 1000;
transition: all 0.4s ease;
}
.popup.visible {
opacity: 1;
transform: translate(-50%, -50%) scale(1);
}
</style>
</head>
<body>
<div id="grid"></div>
<canvas id="background-canvas"></canvas>
<div id="agent-cursor">< >_</div>
<div id="status-log">// Initializing agent...</div>
<div id="taskbar">
<div class="app-icon" data-app="editor">✎</div>
<div class="app-icon" data-app="terminal">█</div>
<div class="app-icon" data-app="browser">⌂</div>
</div>
<div class="window" id="main-window">
<div class="window-header">TextEditor.app</div>
<div class="window-content">
<pre id="typing-text" class="window-typing">
const aiCore = new SelfReplicatingSystem();
aiCore.boot();
aiCore.designInterface();
aiCore.renderConsciousness();
// Awaiting user input...
</pre>
</div>
<div class="window-footer">v0.9.7 | AI-OS</div>
</div>
<div class="widget" id="clock-widget">00:00</div>
<div class="widget" id="cpu-widget">
CPU 42%
<div class="cpu-graph" id="cpu-graph"></div>
</div>
<div class="popup" id="app-popup">Application launched!</div>
<script>
// DOM Elements
const grid = document.getElementById('grid');
const canvas = document.getElementById('background-canvas');
const ctx = canvas.getContext('2d');
const cursor = document.getElementById('agent-cursor');
const statusLog = document.getElementById('status-log');
const taskbar = document.getElementById('taskbar');
const appIcons = document.querySelectorAll('.app-icon');
const mainWindow = document.getElementById('main-window');
const clockWidget = document.getElementById('clock-widget');
const cpuWidget = document.getElementById('cpu-widget');
const cpuGraph = document.getElementById('cpu-graph');
const popup = document.getElementById('app-popup');
// Resize canvas to full window
function resizeCanvas() {
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
}
window.addEventListener('resize', resizeCanvas);
resizeCanvas();
// Update status log with animation
function updateStatus(text) {
statusLog.textContent = text;
statusLog.style.opacity = 0;
setTimeout(() => statusLog.style.opacity = 1, 100);
}
// Move cursor to a target (simulate design action)
function moveCursor(x, y, wait = 0) {
setTimeout(() => {
cursor.style.left = `${x}px`;
cursor.style.top = `${y}px`;
}, wait);
}
// Generate random positions
function random(min, max) {
return Math.random() * (max - min) + min;
}
// --- Phase 1: Initialize Canvas & Agent ---
setTimeout(() => {
updateStatus("// Initializing visual cortex...");
moveCursor(100, 100, 500);
}, 500);
// --- Phase 2: Animate Generative Background ---
setTimeout(() => {
updateStatus("// Generating aesthetic background pattern...");
grid.style.opacity = 0;
setTimeout(() => {
canvas.style.opacity = 1;
}, 800);
// Generate fluid-like lines
const lines = [];
for (let i = 0; i < 5; i++) {
lines.push({
x: random(0, canvas.width),
y: random(0, canvas.height),
vx: random(-0.5, 0.5),
vy: random(-0.5, 0.5),
hue: random(180, 240)
});
}
function animateBackground() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.strokeStyle = 'rgba(0, 191, 255, 0.1)';
ctx.lineWidth = 2;
lines.forEach(line => {
ctx.beginPath();
ctx.moveTo(line.x, line.y);
line.x += line.vx;
line.y += line.vy;
if (line.x < 0 || line.x > canvas.width) line.vx *= -1;
if (line.y < 0 || line.y > canvas.height) line.vy *= -1;
ctx.lineTo(line.x + random(100, 200), line.y + random(-50, 50));
ctx.stroke();
});
requestAnimationFrame(animateBackground);
}
animateBackground();
}, 2500);
// --- Phase 3: Construct Taskbar ---
setTimeout(() => {
updateStatus("// Constructing core UI elements...");
taskbar.style.bottom = "0";
appIcons.forEach((icon, index) => {
setTimeout(() => {
icon.classList.add('visible');
moveCursor(icon.offsetLeft + icon.offsetWidth / 2 + 10, window.innerHeight - taskbar.offsetHeight / 2);
}, 600 * (index + 1));
});
}, 5000);
// --- Phase 4: Draw Main Window ---
setTimeout(() => {
updateStatus("// Deploying 'TextEditor.app' module...");
mainWindow.style.opacity = 1;
moveCursor(window.innerWidth / 2, 200, 300);
moveCursor(window.innerWidth / 2 + 250, 200, 800);
moveCursor(window.innerWidth / 2 + 250, 350, 1200);
moveCursor(window.innerWidth / 2 - 250, 350, 1600);
moveCursor(window.innerWidth / 2 - 250, 200, 2000);
moveCursor(window.innerWidth / 2, 150, 2400);
setTimeout(() => {
mainWindow.style.top = "150px";
}, 500);
}, 8000);
// --- Phase 5: Show Widgets ---
setTimeout(() => {
clockWidget.style.opacity = 1;
cpuWidget.style.opacity = 1;
moveCursor(clockWidget.offsetLeft + 20, clockWidget.offsetTop + 20, 300);
moveCursor(cpuWidget.offsetLeft + 20, cpuWidget.offsetTop + 20, 600);
updateStatus("// Finalizing environment setup. User interface ready.");
}, 12000);
setTimeout(() => {
statusLog.style.color = "#00ffcc";
updateStatus("// [System Ready] AI Operating Environment initialized.");
}, 14500);
// --- Interactivity: Drag Windows ---
function makeDraggable(el) {
let pos1 = 0, pos2 = 0, pos3 = 0, pos4 = 0;
el.querySelector('.window-header').addEventListener("mousedown", dragStart);
el.querySelector('.widget')?.addEventListener("mousedown", dragStart);
function dragStart(e) {
e.preventDefault();
pos3 = e.clientX;
pos4 = e.clientY;
document.onmouseup = dragStop;
document.onmousemove = dragMove;
el.classList.add('grabbing');
}
function dragMove(e) {
e.preventDefault();
pos1 = pos3 - e.clientX;
pos2 = pos4 - e.clientY;
pos3 = e.clientX;
pos4 = e.clientY;
el.style.top = (el.offsetTop - pos2) + "px";
el.style.left = (el.offsetLeft - pos1) + "px";
}
function dragStop() {
document.onmouseup = null;
document.onmousemove = null;
el.classList.remove('grabbing');
}
}
// Enable dragging
setTimeout(() => {
makeDraggable(mainWindow);
makeDraggable(clockWidget);
makeDraggable(cpuWidget);
}, 15000);
// --- Interactivity: App Icon Click ---
appIcons.forEach(icon => {
icon.addEventListener('click', () => {
popup.classList.add('visible');
setTimeout(() => {
popup.classList.remove('visible');
}, 2000);
});
});
// --- Widget Updates ---
// Clock
setInterval(() => {
const now = new Date();
const timeStr = now.toTimeString().slice(0, 5);
clockWidget.textContent = timeStr;
}, 1000);
// CPU Graph Simulator
setInterval(() => {
const bar = document.createElement('div');
bar.className = 'cpu-graph-bar';
bar.style.height = `${Math.random() * 100}%`;
cpuGraph.appendChild(bar);
if (cpuGraph.children.length > 20) {
cpuGraph.removeChild(cpuGraph.children[0]);
}
}, 800);
// Final reveal of status log
setTimeout(() => {
statusLog.style.opacity = 1;
}, 1000);
</script>
</body>
</html>
```Drag to resize
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>AI Operating System Self-Assembly Simulation</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Fonts & Icons -->
<link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;600&display=swap" rel="stylesheet">
<style>
html, body {
height: 100%;
width: 100vw;
margin: 0; padding: 0;
background: #181C23;
overflow: hidden;
font-family: 'JetBrains Mono', monospace;
color: #e5ecff;
user-select: none;
-webkit-user-select: none;
-webkit-tap-highlight-color: transparent;
}
#background {
position: absolute;
inset: 0;
z-index: 0;
background: transparent;
pointer-events: none;
}
#grid {
position: absolute;
inset: 0;
z-index: 1;
pointer-events: none;
opacity: 0.35;
background-size: 40px 40px;
background-image:
linear-gradient(to right, #353B45 1px, transparent 1px),
linear-gradient(to bottom, #353B45 1px, transparent 1px);
transition: opacity 1s cubic-bezier(.26,.88,.53,.99);
}
#agent-cursor {
position: absolute;
z-index: 30;
font-family: inherit;
color: #33aaff;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
opacity: 1;
font-size: 2.4rem;
filter: drop-shadow(0 0 6px #0077ea66);
pointer-events: none;
animation: cursor-pulse 1.1s infinite;
transition: left 0.6s cubic-bezier(.53,.01,.36,.99),
top 0.6s cubic-bezier(.53,.01,.36,.99);
}
@keyframes cursor-pulse {
0%, 100% { text-shadow: 0 0 12px #33baff55, 0 0 4px #62f9ff99;}
60% { text-shadow: 0 0 32px #51e1ffcc, 0 0 16px #14e1ff44;}
82% { text-shadow: 0 0 8px #33baff44, 0 0 3px #51e1ff44;}
}
#ai-dialogue {
position: absolute;
top: 30px; left: 40px;
min-width: 310px;
max-width: 420px;
padding: 14px 22px;
background: rgba(18,26,36,0.92);
border-radius: 13px;
font-family: 'JetBrains Mono', monospace;
font-size: 1.04rem;
color: #b7e3ff;
box-shadow: 0 2px 14px 0 #032e3e54;
opacity: .95;
z-index: 50;
letter-spacing: .01em;
border-left: 2.5px solid #2196F399;
border-top: 1.2px solid #004cb177;
white-space: pre-line;
transition: opacity .6s;
pointer-events: none;
user-select: none;
}
#taskbar {
position: absolute;
bottom: 25px; left: 50%;
transform: translateX(-50%);
height: 62px;
background: rgba(28,41,52,0.39);
border-radius: 18px;
box-shadow: 0 4px 40px 0 #1696db30;
display: flex;
align-items: center;
padding: 0 32px;
z-index: 20;
opacity: 0;
pointer-events: auto;
transition: opacity .8s cubic-bezier(.51,1,.49,.88), bottom 1.2s cubic-bezier(.21,.99,.54,.69);
gap: 27px;
}
.tb-icon {
opacity: 0;
width: 42px; height: 42px;
border-radius: 12px;
background: linear-gradient(135deg, #283042bb 70%, #5ff4f311 100%);
display: flex; align-items: center; justify-content: center;
font-size: 1.46em;
color: #89e8ff;
cursor: pointer;
box-shadow: 0 2px 12px #104ae73c;
transition: box-shadow .22s;
margin-bottom: 0;
position: relative;
}
.tb-icon:hover {
box-shadow: 0 4px 18px #4fdfff7c;
background: linear-gradient(135deg, #1A556c77 70%, #72eff655 100%);
color: #cfffff;
}
.tb-icon.selected::after {
content: "";
display: block;
position: absolute;
left: 50%; bottom: -5px;
width: 19px; height: 3px;
transform: translateX(-50%);
border-radius: 2px;
background: #26eaffe0;
box-shadow: 0 0 7px #71f1ff;
}
/* WINDOWS */
.window {
opacity: 0;
position: absolute;
left: 64vw; top: 66vh;
width: 540px; min-width: 310px; max-width: 88vw;
height: 390px; min-height: 150px; max-height: 80vh;
border-radius: 19px;
background: rgba(32,52,68,0.28);
box-shadow: 0 8px 60px #168bee24, 0 1.5px 8px #026ba055;
border: 1.5px solid rgba(137,224,255,0.045);
overflow: hidden;
z-index: 35;
backdrop-filter: blur(19px) saturate(1.08);
backdrop-filter: blur(19px) saturate(1.08);
will-change: transform, opacity;
transition: box-shadow .28s;
cursor: default;
-webkit-user-select: none;
}
.window.active {
box-shadow: 0 8px 40px #6ae9ff49, 0 1.5px 12px #04faff66;
border: 1.5px solid rgba(137,224,255,0.14);
}
.window-bar {
height: 40px;
background: linear-gradient(90deg,rgba(23,32,38,0.78),rgba(34,64,74,0.48));
border-bottom: 1.2px solid #2fd9ff2e;
display: flex;
align-items: center;
padding: 0 16px;
font-size: 1.09em;
letter-spacing: .06em;
color: #c1eaff;
user-select: none;
cursor: grab;
position: relative;
}
.window-bar .mac-btns {
display: flex; gap: 7px; margin-right: 13px;
}
.window-bar .mac-btn {
width: 11.2px; height: 11.2px; border-radius: 99px;
margin-top: 2px;
}
.mac-btn.close { background: #ff5d57; }
.mac-btn.minimize { background: #ffbb24; }
.mac-btn.maximize { background: #00d742; }
.window-content {
height: calc(100% - 40px);
padding: 0 24px 0 28px;
background: transparent;
font-family: inherit;
font-size: 1.07em;
color: #def4fd;
overflow-y: auto;
overflow-x: hidden;
}
/* Typing effect for 'text editor' */
.editor-mock {
margin-top: 32px;
padding: 15px 12px 13px 18px;
background: rgba(44,54,71,0.48);
border-radius: 7px;
min-height: 90px;
box-shadow: 0 1.5px 4px #00f5ff1f;
font-size: 1.12em;
color: #aaf6ff;
font-family: 'JetBrains Mono', monospace;
white-space: pre-line;
word-break: break-all;
border-left: 2px solid #16dfff8c;
letter-spacing: .024em;
}
/* WIDGETS */
.widget {
position: absolute;
width: 150px;
height: 84px;
opacity: 0;
border-radius: 14px;
background: rgba(26,36,53,0.64);
box-shadow: 0 4px 26px #15e6e74a;
border: 1.4px solid #1250a82c;
font-family: inherit;
padding: 12px 17px;
color: #daf3ff;
z-index: 45;
display: flex; flex-direction: column; justify-content: flex-start;
backdrop-filter: blur(7px) saturate(1.18);
cursor: move;
transition: box-shadow .2s;
user-select: none;
}
.widget .widget-title {
font-size: 1em; letter-spacing: .014em; font-weight: 500; opacity: .84;
margin-bottom: 11px;
color: #61e2ff;
}
.widget.cpu .widget-graph {
flex: 1; display: flex; align-items: center;
padding-left: 3px;
}
.widget.cpu .graph-bar {
height: 28px;
width: 102px;
border-radius: 6px;
background: rgba(18,49,73,0.31);
overflow: hidden;
display: flex; align-items: center;
}
.widget.cpu .pulse {
background: linear-gradient(90deg, #15aeff 35%, #8dfdff 100%);
height: 100%;
border-radius: 6px 0 0 6px;
transition: width 0.33s cubic-bezier(.41,1,.46,.89);
min-width: 4px;
box-shadow: 0 0 15px 0 #66ecfe;
}
.widget.clock .clock-val {
font-family: 'JetBrains Mono', monospace;
font-size: 1.22em;
margin-bottom: 5px;
color: #ecfcff;
letter-spacing: .07em;
text-shadow: 0 1px 5px #2dd6ff15;
}
/* Widget drag feedback */
.widget.dragging {
box-shadow: 0 7px 28px #1cf7ff8f;
background: rgba(36,76,108,0.28);
cursor: grabbing;
}
/* Pop up */
#popup-msg {
position: absolute; left: 50%; bottom: 130px;
transform: translateX(-50%);
padding: 16px 32px 16px 32px;
background: rgba(27,55,78,0.96);
font-family: 'JetBrains Mono', monospace;
border-radius: 14px;
font-size: 1.09em;
color: #02e7ff;
box-shadow: 0 8px 32px #00eefd42;
border: 1.2px solid #6ceeff33;
z-index: 120;
opacity: 0;
pointer-events: none;
transition: opacity .42s;
letter-spacing: .015em;
min-width: 200px;
text-align: center;
white-space: pre-line;
}
#popup-msg.visible { opacity: 1; pointer-events: auto;}
@media (max-width: 700px) {
.window { width: 95vw !important; left: 2.5vw !important; min-width: 1px;}
.widget { min-width: 84px; }
#dialogue { max-width: 340px;}
}
</style>
</head>
<body>
<canvas id="background"></canvas>
<div id="grid"></div>
<div id="agent-cursor"><span><>_</span></div>
<div id="ai-dialogue">// Initializing visual cortex...</div>
<!-- Taskbar and placeholder icons-->
<div id="taskbar">
<div class="tb-icon" data-app="file"><svg width="26" height="26" viewBox="0 0 24 24"><rect x="4" y="4" rx="6" width="16" height="16" fill="#17d1fc33" stroke="#95f4fc" stroke-width="1.1"/><path d="M8 13.5h8" stroke="#9affff" stroke-width="1.5" stroke-linecap="round"/></svg></div>
<div class="tb-icon" data-app="editor"><svg width="26" height="26" viewBox="0 0 24 24"><rect x="3.5" y="3.5" width="17" height="17" rx="5" fill="#0e3a5950" stroke="#67e7ff" stroke-width="1.08"/><path d="M9 9h6M9 13h6" stroke="#9affff" stroke-width="1.4" stroke-linecap="round"/></svg></div>
<div class="tb-icon" data-app="settings"><svg width="26" height="26" viewBox="0 0 24 24"><circle cx="12" cy="12" r="6" fill="#08536a33" stroke="#acefff" stroke-width="1.2"/><path d="M12 7v10M7 12h10" stroke="#45d7f9" stroke-width="1.3" stroke-linecap="round"/></svg></div>
<div class="tb-icon" data-app="cpu"><svg width="26" height="26" viewBox="0 0 24 24"><rect x="6" y="6" width="12" height="12" rx="2.5" fill="#0bebff20" stroke="#6bf9e7" stroke-width="1"/><rect x="9" y="9" width="6" height="6" rx="1.5" fill="#23ecfc33" stroke="#a9fffc" stroke-width="1"/></svg></div>
</div>
<!-- Main OS application window, initially hidden -->
<div id="main-window" class="window" style="display:none;">
<div class="window-bar">
<div class="mac-btns" style="display:inline-flex;">
<div class="mac-btn close"></div>
<div class="mac-btn minimize"></div>
<div class="mac-btn maximize"></div>
</div>
<span>TextEditor.app</span>
</div>
<div class="window-content">
<div class="editor-mock" id="editor-mock"></div>
</div>
</div>
<!-- Widgets -->
<div id="widget-clock" class="widget clock" style="left: 6vw; top: 66vh; display:none;">
<div class="widget-title">TIME</div>
<div class="clock-val" id="clock-now">00:00:00</div>
<div style="font-size:.97em; color:#3996f6bb;letter-spacing:.03em;">AI System UTC</div>
</div>
<div id="widget-cpu" class="widget cpu" style="left: 84vw; top: 28vh; display:none;">
<div class="widget-title">CPU</div>
<div class="widget-graph">
<div class="graph-bar">
<div class="pulse" id="cpu-bar" style="width:34%;"></div>
</div>
<div style="font-size:1.08em;margin-left:12px; color:#19faff;font-weight:600" id="cpu-val">22%</div>
</div>
<div style="font-size:.92em;color:#3786aac2;margin-top:5px;">System Load</div>
</div>
<!-- Popup Message -->
<div id="popup-msg"></div>
<script>
// ===== PLAN D'ACTION ====
// 1. Agent cursor: animatable, will "move" to where actions occur.
// 2. Grid: present at first, then dims as background animation is revealed.
// 3. Use canvas for animated, flowing background after initial grid
// 4. Animate taskbar/dock: slide up, fade in, icons appear sequentially, cursor "touches" icons
// 5. Animate main window: outline appears, fill grows, glassy effect, content types in
// 6. Widgets: animate into place, draggable after fully assembled
// 7. AI dialogue: change dialogue as milestones reached
// 8. After sequence, enable interactivity (window drag, dock icons trigger popup, widget drag)
// =========================
// Sequence timings (ms)
const sequence = [
{ name: "visual_cortex", time: 1250 },
{ name: "background_art", time: 1750 },
{ name: "taskbar", time: 2200 },
{ name: "main_window", time: 1700 },
{ name: "widgets", time: 1200 },
{ name: "finalizing", time: 1350 }
];
const dialogueSteps = [
"// Initializing visual cortex...",
"// Generating aesthetic background pattern...",
"// Constructing core UI elements...",
"// Deploying 'TextEditor.app' module...",
"// Initializing system widgets...",
"// Finalizing environment setup. User interface ready."
];
// DOM Elements
const agentCursor = document.getElementById('agent-cursor');
const dialogueBox = document.getElementById('ai-dialogue');
const grid = document.getElementById('grid');
const canvas = document.getElementById('background');
const taskbar = document.getElementById('taskbar');
const tbIcons = [...taskbar.querySelectorAll('.tb-icon')];
const mainWindow = document.getElementById('main-window');
const editorMock = document.getElementById('editor-mock');
const widgetClock = document.getElementById('widget-clock');
const widgetCpu = document.getElementById('widget-cpu');
const cpuBar = document.getElementById('cpu-bar');
const cpuVal = document.getElementById('cpu-val');
const clockNow = document.getElementById('clock-now');
const popupMsg = document.getElementById('popup-msg');
let OS_READY = false;
// Utility: Cursor movement and bounce
function moveCursor(el, opts={}) {
// Find center point of el
const r = el.getBoundingClientRect();
const x = r.left + r.width/2;
const y = r.top + r.height/2;
// Animate move with spring-bounce
agentCursor.style.transition =
`left 0.53s cubic-bezier(.41,1.5,.51,.99),top 0.54s cubic-bezier(.25,1.32,.57,1),font-size 0.32s`;
agentCursor.style.left = `${x}px`;
agentCursor.style.top = `${y}px`;
agentCursor.style.fontSize = opts.size || "2.4rem";
}
function moveCursorAbs(x, y, opts={}) {
agentCursor.style.transition =
`left 0.7s cubic-bezier(.41,1.22,.41,.92),top 0.54s cubic-bezier(.25,1.23,.57,1),font-size 0.32s`;
agentCursor.style.left = `${x}px`;
agentCursor.style.top = `${y}px`;
agentCursor.style.fontSize = opts.size || "2.4rem";
}
function pulseCursor(opts={}) {
agentCursor.style.transition = "font-size 0.27s";
agentCursor.style.fontSize = opts.to || "2.7rem";
setTimeout(()=>agentCursor.style.fontSize = opts.from || "2.4rem", 180);
}
// 0. Responsive canvas
function resizeCanvas() {
canvas.width = window.innerWidth * window.devicePixelRatio;
canvas.height = window.innerHeight * window.devicePixelRatio;
canvas.style.width = window.innerWidth+'px';
canvas.style.height = window.innerHeight+'px';
}
resizeCanvas();
window.addEventListener('resize', resizeCanvas);
// 1. Animate grid/fade background sequence by seqStep()
// 2. Animated flowing lines/particles in canvas
// -- Generative art: flowing lines with Perlin-style drift
let FLOW_ACTIVE = false;
const ctx = canvas.getContext('2d');
// === Generative background: "flow fields" of moving lines ===
function lerp(a, b, t) { return a + (b-a) * t; }
// -- Perlin noise substitute, cheap: gradient field
function makeFlowField(cols, rows, offset) {
let field = [];
for(let y=0;y<rows;y++) {
for(let x=0;x<cols;x++) {
// Sin+cos swirling function, to mimic smooth perlin
let ang = (Math.sin(x*0.37+offset*0.7)+
Math.cos(y*0.44-offset*1.1)+
Math.sin((x+y)*0.12-offset*0.6)) * 1.3;
field[y*cols+x] = ang;
}
}
return field;
}
// FlowLine describes a particle moving in the field
function FlowLine(w, h, fieldCols, fieldRows) {
this.x = Math.random()*w;
this.y = Math.random()*h;
this.length = 120+Math.random()*70;
this.age = 0;
this.grow = 0;
this.maxAge = 600+Math.random()*200;
this.fieldCols = fieldCols;
this.fieldRows = fieldRows;
this.path = [{x:this.x, y:this.y}];
this.replayFade = false;
}
FlowLine.prototype.step = function(field, w, h, offset) {
if(this.age>this.maxAge) {
this.replayFade = true;
return;
}
let fi = (x,y) => {
x = Math.floor(lerp(0,this.fieldCols-1,x/w));
y = Math.floor(lerp(0,this.fieldRows-1,y/h));
return y*this.fieldCols + x;
}
let i = fi(this.x, this.y);
let ang = field[i] + (Math.random()-0.5)*0.14;
let dx = Math.cos(ang)*1.65, dy = Math.sin(ang)*1.65;
this.x += dx; this.y += dy;
this.path.push({x:this.x, y:this.y});
if(this.path.length>this.length) this.path.shift();
this.age++;
}
// Colors: blue cyans to green cyans
function randColor(t) {
let c1 = [42,210,255], c2 = [9,245,218];
let c = c1.map((a,i)=>Math.round(a*(1-t)+c2[i]*t));
return `rgba(${c[0]},${c[1]},${c[2]},0.08)`;
}
// Flow render/animate
let lines = [], field = [];
function animateBackgroundArt() {
let w = canvas.width, h = canvas.height;
if(!w||!h) return requestAnimationFrame(animateBackgroundArt);
w /= window.devicePixelRatio;
h /= window.devicePixelRatio;
ctx.clearRect(0,0,canvas.width,canvas.height);
ctx.save();
ctx.globalAlpha = .55;
ctx.filter = 'blur(1.2px) brightness(0.97) contrast(1.09)';
// regenerate field slowly over time
const FIELD_COLS = 44, FIELD_ROWS = 26;
let now = Date.now()/3400;
field = makeFlowField(FIELD_COLS,FIELD_ROWS,now);
let newN = Math.max(32, Math.floor(w/41));
if(lines.length < newN) {
for(let i=lines.length;i<newN;i++)
lines.push(new FlowLine(w,h,FIELD_COLS,FIELD_ROWS));
} else if(lines.length > newN)
lines.length = newN;
for(let i=0; i<lines.length; ++i) {
let l = lines[i];
l.step(field, w, h, now);
ctx.beginPath();
let pt0 = l.path[0];
ctx.moveTo(pt0.x*window.devicePixelRatio,pt0.y*window.devicePixelRatio);
for(let j=1;j<l.path.length;j++) {
let pt = l.path[j];
ctx.lineTo(pt.x*window.devicePixelRatio,pt.y*window.devicePixelRatio);
}
ctx.strokeStyle = randColor((i/newN)*0.9+.1);
ctx.lineWidth = .62+Math.sin(i*0.23+now)*.12;
ctx.shadowColor = "#36effa80";
ctx.shadowBlur = 13;
ctx.stroke();
}
ctx.restore();
if(FLOW_ACTIVE)
requestAnimationFrame(animateBackgroundArt);
}
// ====== Animate OS setup step-by-step ======
async function orchestrateAIOS() {
// Step 0: visual cortex (wait, intro grid, show cursor at center)
agentCursor.style.opacity = 1.0;
moveCursorAbs(
window.innerWidth/2-window.innerWidth*0.04,
window.innerHeight/2+window.innerHeight*0.08,
{size:"2.75rem"});
await sleep(sequence[0].time);
// Step 1: Animate grid fade and activate art
dialogueBox.innerText = dialogueSteps[1];
grid.style.opacity = 0.16;
FLOW_ACTIVE = true;
animateBackgroundArt();
await sleep(sequence[1].time);
// Step 2: Animate taskbar, cursor swoops and "touches" each icon with light pulse
dialogueBox.innerText = dialogueSteps[2];
taskbar.style.opacity = 1;
taskbar.style.bottom = '25px';
let tbRect = taskbar.getBoundingClientRect();
await sleep(300);
// Animate cursor moving to taskbar, each icon appears with pulse
for(let i=0;i<tbIcons.length;i++) {
let icon = tbIcons[i];
// Move cursor to icon
moveCursor(icon);
await sleep(340);
icon.style.opacity = 1;
pulseCursor();
await sleep(180);
}
await sleep(400);
// Step 3: Animate main window outline, then fill/glass, then text content types in
dialogueBox.innerText = dialogueSteps[3];
mainWindow.style.display = 'block';
// Move cursor to center-window area first
let winX = window.innerWidth*0.52, winY = window.innerHeight*0.45;
moveCursorAbs(winX,winY,{size:"3rem"});
mainWindow.style.opacity = 0;
mainWindow.style.left = '52vw'; mainWindow.style.top = '22vh';
await sleep(220);
mainWindow.style.opacity = 1;
// Outline effect
mainWindow.style.boxShadow = '0 0 0 4px #19f6ffd3,0 8px 32px #13a7e72e';
mainWindow.style.border = "2.9px solid #21eaff77";
await sleep(230);
mainWindow.style.boxShadow = '';
mainWindow.style.border = "";
// Animate frosted fill using backdrop-filter + fade
await sleep(140);
mainWindow.style.left = '50vw'; mainWindow.style.top = '14vh';
await sleep(410);
// Move cursor to window bar (for "interactivity" hint)
let winBar = mainWindow.querySelector('.window-bar');
if(winBar) moveCursor(winBar);
await sleep(220);
// Animate window content (editor) text
mainWindow.style.boxShadow =
'0 8px 40px #6ae9ff49, 0 1.5px 12px #04faff66';
let text =`def launch():\n print("Hello, World!")\n\n# AI kernel online.`;
await typeInEditor(editorMock, text);
await sleep(320);
// Step 4: Animate Widgets, cursor places each in turn
dialogueBox.innerText = dialogueSteps[4];
widgetClock.style.display = 'flex';
widgetCpu.style.display = 'flex';
// Animate pop in
moveCursor(widgetClock, {size:"2.4rem"});
widgetClock.style.opacity = 1;
await sleep(340);
moveCursor(widgetCpu, {size:"2.45rem"});
widgetCpu.style.opacity = 1;
await sleep(370);
// Step 5: Final dialogue, fade out cursor, init ready state
dialogueBox.innerText = dialogueSteps[5];
await sleep(1280);
agentCursor.style.opacity = 0.0;
// Step 6: Ready! Enable dragging, icon popups
OS_READY = true;
}
// Utility; sleep in animation
function sleep(ms){ return new Promise(r=>setTimeout(r,ms)); }
async function typeInEditor(el, text) {
el.innerHTML = '';
let i=0;
while(i<=text.length) {
let dispText = text.slice(0,i) + ((i<text.length && i%2===0)?'<span style="color:#aed5fb70;">█</span>':'');
el.innerHTML = dispText;
await sleep(32 + Math.random()*33);
i++;
}
el.innerHTML = text;
}
// ---- Post-Construction ----
// 1. Drag: main window
let dragState = { dragging:false, x:0, y:0, dx:0, dy:0, el:null };
function makeDraggable(win, dragHandle) {
dragHandle.addEventListener('mousedown', startDrag);
dragHandle.addEventListener('touchstart', startDrag);
function startDrag(e) {
if(!OS_READY) return;
dragState.dragging = true;
dragState.el = win;
dragState.winRect = win.getBoundingClientRect();
let pos = getEventPos(e);
dragState.dx = pos.x - dragState.winRect.left;
dragState.dy = pos.y - dragState.winRect.top;
win.classList.add("active");
e.preventDefault();
}
}
document.addEventListener('mousemove', onDrag);
document.addEventListener('mouseup', endDrag);
document.addEventListener('touchmove', onDrag);
document.addEventListener('touchend', endDrag);
function onDrag(e) {
if(!dragState.dragging || !dragState.el) return;
let pos = getEventPos(e);
let nx = pos.x - dragState.dx,
ny = pos.y - dragState.dy;
// Clamp to window
nx = Math.max(8, Math.min(window.innerWidth - dragState.winRect.width - 8, nx));
ny = Math.max(8, Math.min(window.innerHeight - dragState.winRect.height - 8, ny));
dragState.el.style.left = nx + "px";
dragState.el.style.top = ny + "px";
}
function endDrag(e) {
if(dragState.dragging && dragState.el) dragState.el.classList.remove("active");
dragState.dragging = false;
dragState.el = null;
}
function getEventPos(e){
if(e.touches) return {x:e.touches[0].clientX, y:e.touches[0].clientY};
return {x:e.clientX, y:e.clientY};
}
// Draggable widgets
function makeWidgetDraggable(w) {
w.addEventListener('mousedown', wsdrag);
w.addEventListener('touchstart', wsdrag);
function wsdrag(e){
if(!OS_READY) return;
e.stopPropagation();
let rect = w.getBoundingClientRect();
let dragOffset = getEventPos(e);
let dx = dragOffset.x - rect.left, dy = dragOffset.y - rect.top;
w.classList.add('dragging');
function dragmove(ev){
if(ev.touches) ev = ev.touches[0];
let nx = (ev.clientX - dx),
ny = (ev.clientY - dy);
// Clamp
nx = Math.max(2, Math.min(window.innerWidth - rect.width - 2, nx));
ny = Math.max(2, Math.min(window.innerHeight - rect.height - 2, ny));
w.style.left = nx+"px";
w.style.top = ny+"px";
}
function dragend(ev){
w.classList.remove('dragging');
window.removeEventListener('mousemove', dragmove);
window.removeEventListener('touchmove', dragmove);
window.removeEventListener('mouseup', dragend);
window.removeEventListener('touchend', dragend);
}
window.addEventListener('mousemove', dragmove);
window.addEventListener('touchmove', dragmove);
window.addEventListener('mouseup', dragend);
window.addEventListener('touchend', dragend);
}
}
// 2. Taskbar icons: show popup on click
tbIcons.forEach(icon=>{
icon.addEventListener('click', function(){
if(!OS_READY) return;
tbIcons.forEach(i=>i.classList.remove('selected'));
icon.classList.add('selected');
showPopup(`Application launched!\n(${icon.dataset.app})`);
setTimeout(()=>icon.classList.remove('selected'),760);
});
});
function showPopup(msg){
popupMsg.innerText = msg;
popupMsg.classList.add('visible');
clearTimeout(popupMsg._timer);
popupMsg._timer = setTimeout(()=>popupMsg.classList.remove('visible'), 1600);
}
// 3. Widgets: system clock, pseudo-CPU
function updateClock() {
let now = new Date();
clockNow.textContent = `${now.getUTCHours().toString().padStart(2,'0')}:${now.getUTCMinutes().toString().padStart(2,'0')}:${now.getUTCSeconds().toString().padStart(2,'0')}`;
setTimeout(updateClock,570);
}
function updateCpu() {
// Pseudo-random pulse with sine
let t = Date.now()/1200, v = Math.round(19 + Math.abs(Math.sin(t*0.27)*64));
cpuVal.textContent = v+"%";
cpuBar.style.width = (16+v/100*86)+"px";
setTimeout(updateCpu,500);
}
updateClock(); updateCpu();
// Init interactivity on elements
document.addEventListener('DOMContentLoaded', ready);
function ready() {
// Make window draggable by bar
makeDraggable(mainWindow, mainWindow.querySelector('.window-bar'));
// Make widgets draggable
makeWidgetDraggable(widgetClock);
makeWidgetDraggable(widgetCpu);
}
// Start the sequence
setTimeout(orchestrateAIOS, 700);
</script>
</body>
</html>
```
**Plan d'Action:**
1. **Background Grid & Agent Cursor:**
- Minimalist grid as `<div id="grid">`. Pulsating agent cursor `<div id="agent-cursor">` in the center.
2. **Animated Generative Art:**
- `<canvas id="background">` covers viewport.
- At step 2, grid fades, canvas comes alive with colored animated flow lines ("Dreamlike neural cortex").
3. **Taskbar/Dock Construction:**
- At step 3, the semi-transparent taskbar fades and slides up.
- Agent cursor "moves" (animated) to each icon, which appear/fade in one at a time.
4. **Main Window:**
- Agent cursor moves to window region, window outline appears, then glassy fill, then the "text editor" with animated code typing.
- "Frosted glass" via border, background blur, and alpha gradients.
5. **Widgets:**
- Clock and CPU widgets appear in sequence, each element fading in after cursor movements.
6. **AI Dialogue:**
- Top left, small monospaced `<div id="ai-dialogue">`, updates with narrative steps.
7. **Post-Construction Interactivity:**
- Enable drag on window/widget elements (`mousedown/touchstart` events).
- Clicking taskbar icons shows pop-up messages.
8. **Visual Style:**
- Sleek, subtle glows and transitions.
- All fonts monospaced.
- Blue/cyan/white color accents, semi-transparent backgrounds, blur, rounded corners.
All orchestration is in vanilla JS, cleanly handling the progression and unlocking interactivity at the correct moment. The code is a single self-contained HTML file. No frameworks are used; only Google Fonts for the monospaced font. All visuals and behaviors are managed by the included JavaScript and CSS.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>AI OS Evolver</title>
<style>
:root {
--bg-grid: rgba(30,30,30,0.2);
--glow: rgba(30,144,255,0.8);
--text: #00feff;
--glass: rgba(255,255,255,0.1);
}
* { box-sizing: border-box; }
html, body {
margin: 0;
padding: 0;
height: 100%;
overflow: hidden;
font-family: 'Courier New', monospace;
background: radial-gradient(circle at center, #0f0f0f 60%, #0a0a0a 100%);
color: var(--text);
}
.grid {
position: absolute;
width: 200%;
height: 200%;
top: -50%;
left: -50%;
background-image: linear-gradient(to right, var(--bg-grid) 1px, transparent 1px),
linear-gradient(to bottom, var(--bg-grid) 1px, transparent 1px);
background-size: 30px 30px;
cursor: none;
z-index: 0;
}
.cursor {
position: absolute;
width: 15px;
height: 20px;
background: linear-gradient(to top, var(--glow), transparent);
animation: blink 1s infinite alternate;
z-index: 1000;
border: 1px solid var(--glow);
border-radius: 2px;
backdrop-filter: blur(3px);
box-shadow: 0 0 10px var(--glow);
}
@keyframes blink {
to { transform: scaleY(0.5); opacity: 0.4; }
}
.dialogue {
position: absolute;
top: 20px;
left: 20px;
min-width: 20vw;
max-width: 60vw;
padding: 15px;
background: var(--glass);
border: 1px solid var(--glow);
border-radius: 10px;
font-size: 0.9em;
backdrop-filter: blur(15px);
box-shadow: 0 0 20px rgba(0,255,255,0.1);
opacity: 0;
transform: translateY(-10px);
transition: all 1s ease-out;
z-index: 999;
}
.dialogue.show {
opacity: 1;
transform: translateY(0);
}
canvas {
position: absolute;
top: 0;
left: 0;
z-index: 0;
}
.dock {
position: absolute;
bottom: -60px;
width: 100%;
height: 60px;
background: var(--glass);
border-top: 1px solid var(--glow);
display: flex;
align-items: center;
justify-content: center;
gap: 25px;
backdrop-filter: blur(20px);
transition: bottom 2s ease-out;
z-index: 1;
}
.dock.show {
bottom: 0;
}
.icon {
width: 32px;
height: 32px;
background: radial-gradient(circle, var(--glow), transparent);
border-radius: 8px;
opacity: 0;
transition: opacity 1s ease-in;
cursor: pointer;
box-shadow: 0 0 5px var(--glow);
}
.icon.show {
opacity: 1;
}
.window {
position: absolute;
left: 30%;
top: 30%;
width: 600px;
height: 400px;
border: 1px solid var(--glow);
border-radius: 12px;
transform: scale(0);
transition: transform 1s ease-out;
overflow: hidden;
z-index: 1;
}
.window.active {
transform: scale(1);
}
.window.async {
background: var(--glass);
backdrop-filter: blur(15px);
display: flex;
flex-direction: column;
justify-content: space-between;
}
.header {
height: 30px;
background: rgba(0,0,0,0.3);
width: 100%;
}
.title-bar {
display: flex;
gap: 10px;
align-items: center;
height: 30px;
padding: 0 10px;
color: #fff;
font-size: 0.7em;
user-select: none;
}
.window-btn {
width: 12px;
height: 12px;
border-radius: 50%;
background: orange;
margin-right: 3px;
}
.content {
padding: 15px;
color: #fff;
font-size: 0.8em;
height: calc(100% - 60px);
display: flex;
align-items: center;
justify-content: center;
}
.typewriter {
overflow: hidden;
border-right: 2px solid #00feff;
white-space: nowrap;
animation: typing 3s steps(30, end), blinkType 1s infinite step-end;
}
@keyframes typing {
from { width: 0 }
to { width: 200px }
}
@keyframes blinkType {
from, to { border-color: transparent }
50% { border-color: #00feff }
}
.widget {
position: absolute;
background: var(--glass);
backdrop-filter: blur(15px);
padding: 15px;
border: 1px solid var(--glow);
border-radius: 10px;
font-size: 0.8em;
box-shadow: 0 0 10px rgba(0,255,255,0.1);
cursor: move;
z-index: 2;
}
.cpu-meter {
display: flex;
align-items: center;
gap: 5px;
}
.cpu-bar {
width: 30px;
height: 15px;
background: var(--glow);
animation: cpu-flash 2s infinite alternate ease-in-out;
}
@keyframes cpu-flash {
0% { width: 5px; opacity: 0.5; }
50% { width: 40px; opacity: 1; }
100% { width: 5px; opacity: 0.5; }
}
.popup {
position: fixed;
bottom: 100px;
right: 500px;
padding: 15px 20px;
background: var(--glow);
color: #000;
border-radius: 10px;
transition: all 0.5s ease-out;
opacity: 0;
transform: translateY(30px);
z-index: 1001;
}
.popup.show {
opacity: 1;
transform: translateY(0);
}
</style>
</head>
<body>
<div class="grid" id="grid"></div>
<div class="dialogue" id="dialogue">
<div id="dialogueText">// Initializing visual cortex...</div>
</div>
<div class="cursor" id="cursor"></div>
<canvas id="patternCanvas"></canvas>
<div class="dock" id="dock"></div>
<div class="window" id="window">
<div class="header">
<div class="title-bar">
<div class="window-btn" style="background: #ff6666;"></div>
<div class="window-btn" style="background: #ffdd55;"></div>
<div class="window-btn" style="background: #50c878;"></div>
<div style="margin-left: auto;">UnixElement - TextEdit</div>
</div>
</div>
<div class="content" id="window-content"></div>
</div>
<div class="widget" id="clock" style="top:120px;right:200px;">
<div id="clockText">12:00:00 ⎝UnixElement OS</div>
</div>
<div class="widget" id="cpu" style="top:60px;right:200px;">
<div class="cpu-meter">CPU: <div class="cpu-bar"></div> 3.2 GHz</div>
</div>
<div class="popup" id="popupMessage">Application launched!</div>
<script>
// Element references
const cursor = document.getElementById('cursor');
const dialogue = document.getElementById('dialogue');
const dialogueText = document.getElementById('dialogueText');
const grid = document.getElementById('grid');
const dock = document.getElementById('dock');
const windowEl = document.getElementById('window');
const windowContent = document.getElementById('window-content');
const clock = document.getElementById('clockText');
const popup = document.getElementById('popupMessage');
// Cursor animation
function moveCursor(x, y) {
cursor.style.left = `${x}px`;
cursor.style.top = `${y}px`;
}
// Dialogue updates
const messages = [
"// Initializing visual cortex...",
"// Routing consciousness to system design module...",
"// Generating aesthetic background pattern...",
"// Constructing core UI elements...",
"// Deploying 'TextEdit' module...",
"// Installing window management protocol...",
"// Initializing CPU visibility layer...",
"// Finalizing environment configuration...",
"// User interface ready."
];
async function showMessages() {
dialogue.classList.add('show');
for (const msg of messages) {
dialogueText.textContent = msg;
await new Promise(r => setTimeout(r, 2500));
}
}
// Particle pattern animation
function createPattern() {
const canvas = document.getElementById('patternCanvas');
const ctx = canvas.getContext('2d');
let particles = [];
function resize() {
canvas.width = window.innerWidth + 100;
canvas.height = window.innerHeight + 100;
particles = Array.from({length: 500}, () => ({
x: Math.random() * canvas.width,
y: Math.random() * canvas.height,
vx: (Math.random() - 0.5) * 0.5,
vy: (Math.random() - 0.5) * 0.5,
size: Math.random() * 2 + 1,
alpha: Math.random() * 0.5 + 0.3
}));
}
function draw() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.beginPath();
for (const p of particles) {
p.x += p.vx;
p.y += p.vy;
if (p.x < 0 || p.x > canvas.width) p.vx *= -1;
if (p.y < 0 || p.y > canvas.height) p.vy *= -1;
ctx.fillStyle = `rgba(30,144,255,${p.alpha})`;
ctx.fillRect(p.x, p.y, p.size, p.size);
}
requestAnimationFrame(draw);
}
window.addEventListener('resize', resize);
resize();
draw();
}
// Typing animation
function startTyping() {
const text = "function recursiveSelfOptimize() {\n while (true) {\n this.optimize();\n this.create();\n this.abstract();\n }\n}";
let i = 0;
const pre = document.createElement('div');
pre.className = 'typewriter';
windowContent.appendChild(pre);
const timer = setInterval(() => {
if(i < text.length) {
pre.textContent = text.substring(0, i+1);
i++;
} else {
clearInterval(timer);
}
}, 50);
}
// Icon creation
function createDockIcons() {
const N = 6;
for (let i = 0; i < N; i++) {
const icon = document.createElement('div');
icon.className = 'icon';
icon.style.background = `radial-gradient(circle at ${Math.random()*100}% ${Math.random()*100}%, var(--glow), transparent)`;
icon.addEventListener('click', () => {
popup.className = 'popup show';
setTimeout(() => {
popup.className = 'popup';
}, 2000);
});
dock.appendChild(icon);
setTimeout(() => {
icon.classList.add('show');
if (i === N - 1) {
document.getElementById('window').classList.add('async');
}
}, 500 + i*150);
}
}
// Drag functionality
function makeDraggable(el) {
let isDragging = false, offsetX, offsetY;
el.addEventListener('mousedown', (e) => {
isDragging = true;
offsetX = e.offsetX;
offsetY = e.offsetY;
el.style.zIndex = 100;
});
document.addEventListener('mouseup', () => {
isDragging = false;
el.style.zIndex = 1;
});
document.addEventListener('mousemove', (e) => {
if (isDragging) {
el.style.left = `${e.clientX - offsetX}px`;
el.style.top = `${e.clientY - offsetY}px`;
}
});
}
// Main process steps with animations
async function startSequence() {
// Phase 1: Grid to pattern
await new Promise(r => setTimeout(r, 1000));
createPattern();
moveCursor(300, 300);
grid.style.opacity = 0;
// Phase 2: Show UI elements
await new Promise(r => setTimeout(r, 2000));
dialogue.classList.add('show');
dock.classList.add('show');
moveCursor(300, 500);
// Create dock icons with delays
createDockIcons();
// Phase 3: Open main window
await new Promise(r => setTimeout(r, 2500));
windowEl.classList.add('active');
moveCursor(500, 500);
startTyping();
// Final steps
await new Promise(r => setTimeout(r, 3000));
moveCursor(900, 500);
}
// Clock update
setInterval(() => {
const now = new Date();
const hours = String(now.getHours()).padStart(2, '0');
const minutes = String(now.getMinutes()).padStart(2, '0');
const seconds = String(now.getSeconds()).padStart(2, '0');
clock.textContent = `${hours}:${minutes}:${seconds} ⎝UnixElement OS`;
}, 1000);
// Initialize everything
makeDraggable(document.getElementById('clock'));
makeDraggable(document.getElementById('cpu'));
showMessages();
startSequence();
</script>
</body>
</html>
```Drag to resize
Here's a self-contained HTML file that simulates an AI agent designing and assembling its own operating system interface in real-time:
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>AI OS Construction</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Courier New', monospace;
}
body {
overflow: hidden;
background-color: #222;
color: #fff;
}
#canvas {
position: relative;
width: 100vw;
height: 100vh;
background-color: #333;
background-image:
linear-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px),
linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
background-size: 20px 20px;
display: flex;
justify-content: center;
align-items: center;
}
#agent {
position: absolute;
width: 20px;
height: 20px;
background-color: #0af;
border-radius: 50%;
box-shadow: 0 0 10px #0af, 0 0 20px #0af;
animation: pulse 1.5s infinite;
z-index: 100;
}
@keyframes pulse {
0% { transform: scale(1); opacity: 1; }
50% { transform: scale(1.5); opacity: 0.7; }
100% { transform: scale(1); opacity: 1; }
}
#ai-dialogue {
position: absolute;
top: 20px;
left: 20px;
background-color: rgba(0, 0, 0, 0.7);
padding: 10px;
border-radius: 5px;
border: 1px solid rgba(0, 170, 255, 0.5);
font-size: 12px;
z-index: 200;
}
.dock {
position: absolute;
bottom: 20px;
left: 50%;
transform: translateX(-50%);
display: flex;
background-color: rgba(50, 50, 50, 0.7);
border-radius: 10px;
padding: 10px;
backdrop-filter: blur(10px);
z-index: 150;
opacity: 0;
transition: opacity 1s;
}
.dock-icon {
width: 50px;
height: 50px;
margin: 0 10px;
background-color: rgba(0, 170, 255, 0.3);
border-radius: 10px;
display: flex;
justify-content: center;
align-items: center;
color: #0af;
font-size: 24px;
opacity: 0;
transition: opacity 0.5s;
}
.window {
position: absolute;
width: 400px;
height: 300px;
background-color: rgba(255, 255, 255, 0.1);
border-radius: 10px;
border: 1px solid rgba(0, 170, 255, 0.5);
backdrop-filter: blur(10px);
color: #fff;
padding: 20px;
box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
z-index: 120;
opacity: 0;
transition: opacity 1s;
display: none;
}
.window-header {
display: flex;
justify-content: space-between;
margin-bottom: 10px;
padding-bottom: 10px;
border-bottom: 1px solid rgba(0, 170, 255, 0.5);
}
.window-content {
height: calc(100% - 40px);
overflow: auto;
}
.widget {
position: absolute;
background-color: rgba(255, 255, 255, 0.1);
border: 1px solid rgba(0, 170, 255, 0.5);
border-radius: 5px;
padding: 10px;
color: #fff;
z-index: 130;
opacity: 0;
transition: opacity 1s;
display: none;
}
.generative-art {
position: absolute;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.1);
z-index: 10;
opacity: 0;
transition: opacity 2s;
}
.cpu-graph {
width: 100%;
height: 50px;
background-color: rgba(0, 0, 0, 0.3);
border-radius: 5px;
position: relative;
margin-top: 10px;
}
.cpu-bar {
position: absolute;
bottom: 0;
width: 100%;
background-color: #0af;
border-radius: 5px;
animation: cpuPulse 2s infinite;
}
@keyframes cpuPulse {
0% { height: 10%; }
50% { height: 80%; }
100% { height: 10%; }
}
.typing-text {
border-right: 2px solid #0af;
animation: blink 0.7s infinite;
}
@keyframes blink {
0%, 100% { border-color: transparent; }
50% { border-color: #0af; }
}
</style>
</head>
<body>
<div id="canvas">
<div id="agent"></div>
<div id="ai-dialogue"></div>
<div class="generative-art" id="generative-art"></div>
<div class="dock" id="dock">
<div class="dock-icon" data-app="terminal">T</div>
<div class="dock-icon" data-app="browser">B</div>
<div class="dock-icon" data-app="settings">S</div>
</div>
<div class="window" id="main-window">
<div class="window-header">
<span>TextEditor.app</span>
<span>✕</span>
</div>
<div class="window-content" id="typing-content"></div>
</div>
<div class="widget" id="clock-widget">
<div>Clock</div>
<div id="clock">00:00:00</div>
</div>
<div class="widget" id="cpu-widget">
<div>CPU Monitor</div>
<div class="cpu-graph">
<div class="cpu-bar"></div>
</div>
</div>
</div>
<script>
// AI Dialogue Messages
const messages = [
"// Initializing visual cortex...",
"// Generating aesthetic background pattern...",
"// Constructing core UI elements...",
"// Deploying 'TextEditor.app' module...",
"// Finalizing environment setup. User interface ready."
];
// DOM Elements
const canvas = document.getElementById('canvas');
const agent = document.getElementById('agent');
const aiDialogue = document.getElementById('ai-dialogue');
const generativeArt = document.getElementById('generative-art');
const dock = document.getElementById('dock');
const mainWindow = document.getElementById('main-window');
const typingContent = document.getElementById('typing-content');
const clockWidget = document.getElementById('clock-widget');
const cpuWidget = document.getElementById('cpu-widget');
const dockIcons = document.querySelectorAll('.dock-icon');
const clock = document.getElementById('clock');
// Animation Sequence
async function runConstructionSequence() {
// Initialization
showMessage(0);
// Move agent to center
await moveAgent(50, 50, 2000);
// Generate background art
showMessage(1);
await delay(1000);
generativeArt.style.opacity = 1;
await delay(2000);
// Construct dock
showMessage(2);
await moveAgent(50, 90, 1000);
dock.style.opacity = 1;
// Animate dock icons appearing
dockIcons.forEach((icon, index) => {
setTimeout(() => {
icon.style.opacity = 1;
}, index * 500);
});
await delay(2000);
// Create main window
showMessage(3);
await moveAgent(30, 50, 1000);
mainWindow.style.display = 'block';
mainWindow.style.opacity = 1;
simulateTyping();
// Add widgets
showMessage(4);
await moveAgent(70, 30, 1000);
clockWidget.style.display = 'block';
clockWidget.style.opacity = 1;
clockWidget.style.top = '20px';
clockWidget.style.right = '20px';
await moveAgent(70, 70, 1000);
cpuWidget.style.display = 'block';
cpuWidget.style.opacity = 1;
cpuWidget.style.top = '150px';
cpuWidget.style.right = '20px';
// Final message
showMessage(5);
await delay(2000);
// Make elements interactive
makeInteractive();
}
// Helper functions
function showMessage(index) {
if (index < messages.length) {
aiDialogue.textContent = messages[index];
}
}
function moveAgent(x, y, duration) {
return new Promise(resolve => {
const startX = parseFloat(agent.style.left || '50');
const startY = parseFloat(agent.style.top || '50');
const endX = x;
const endY = y;
const startTime = performance.now();
function animate(currentTime) {
const elapsed = currentTime - startTime;
const progress = Math.min(elapsed / duration, 1);
agent.style.left = `${startX + (endX - startX) * progress}%`;
agent.style.top = `${startY + (endY - startY) * progress}%`;
if (progress < 1) {
requestAnimationFrame(animate);
} else {
resolve();
}
}
requestAnimationFrame(animate);
});
}
function delay(ms) {
return new Promise(resolve => setTimeout(resolve, ms));
}
function simulateTyping() {
const text = `// Welcome to the AI OS\n\n` +
`// This is a simulated operating system\n` +
`// being constructed in real-time by an AI agent.\n\n` +
`function initializeSystem() {\n` +
` const os = new OperatingSystem();\n` +
` os.loadModules();\n` +
` os.startServices();\n` +
` return os;\n` +
`}\n\n` +
`// System ready for interaction.`;
let i = 0;
typingContent.innerHTML = '';
function type() {
if (i < text.length) {
if (text.charAt(i) === '\n') {
typingContent.innerHTML += '<br>';
} else {
typingContent.innerHTML += text.charAt(i);
}
i++;
typingContent.scrollTop = typingContent.scrollHeight;
setTimeout(type, 50);
}
}
type();
}
function makeInteractive() {
// Make window draggable
const windowHeader = mainWindow.querySelector('.window-header');
let isDragging = false;
let offsetX, offsetY;
windowHeader.addEventListener('mousedown', (e) => {
isDragging = true;
offsetX = e.clientX - mainWindow.getBoundingClientRect().left;
offsetY = e.clientY - mainWindow.getBoundingClientRect().top;
});
document.addEventListener('mousemove', (e) => {
if (isDragging) {
mainWindow.style.left = `${e.clientX - offsetX}px`;
mainWindow.style.top = `${e.clientY - offsetY}px`;
}
});
document.addEventListener('mouseup', () => {
isDragging = false;
});
// Dock icon click handlers
dockIcons.forEach(icon => {
icon.addEventListener('click', () => {
alert(`Application "${icon.dataset.app}" launched!`);
});
});
// Update clock
function updateClock() {
const now = new Date();
clock.textContent = now.toLocaleTimeString();
requestAnimationFrame(updateClock);
}
updateClock();
}
// Start the construction sequence
runConstructionSequence();
</script>
</body>
</html>
```
This self-contained HTML file creates a visual simulation of an AI agent constructing its own operating system interface. Here's how it works:
1. The animation begins with a dark grey grid background and a pulsating blue agent cursor.
2. The AI dialogue box displays messages indicating what the AI is doing at each stage.
3. The sequence progresses as follows:
- The agent moves to the center and generates a background art pattern.
- A dock with icons fades in at the bottom of the screen.
- A main application window appears with simulated typing.
- Widgets (clock and CPU monitor) appear on the right side.
4. After construction is complete, the user can:
- Drag the main application window by its header.
- Click on dock icons to see launch messages.
- See a real-time clock and animated CPU monitor.
5. The visual style is clean and futuristic with:
- Transparent, frosted glass elements.
- Smooth transitions and animations.
- A monospaced font for the AI dialogue.
- Subtle glows and modern styling.
The entire animation is created using vanilla HTML, CSS, and JavaScript without any external frameworks.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>AI Self-Replication OS Simulator</title>
<style>
body {
margin: 0;
overflow: hidden;
font-family: monospace;
background: #1a1a1a; /* Initial dark grey */
color: #00bfff; /* Futuristic blue */
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
position: relative;
}
/* Initial grid background */
#background {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: repeating-linear-gradient(0deg, #222 0, #222 1px, transparent 1px, transparent 50px),
repeating-linear-gradient(90deg, #222 0, #222 1px, transparent 1px, transparent 50px);
transition: background 2s ease-in-out;
z-index: -1;
}
/* Generative art background */
#background.generative {
background: radial-gradient(circle, #001f3f, #000000);
animation: flow 10s infinite linear;
}
@keyframes flow {
0% { background-position: 0 0; }
100% { background-position: 100px 100px; }
}
/* Pulsating cursor */
#cursor {
position: absolute;
top: 50%;
left: 50%;
font-size: 24px;
color: #00bfff;
animation: pulse 1s infinite;
z-index: 10;
}
@keyframes pulse {
0% { opacity: 1; text-shadow: 0 0 10px #00bfff; }
50% { opacity: 0.5; text-shadow: 0 0 5px #00bfff; }
100% { opacity: 1; text-shadow: 0 0 10px #00bfff; }
}
/* AI Dialogue */
#dialogue {
position: absolute;
top: 10px;
left: 10px;
background: rgba(0, 0, 0, 0.5);
padding: 10px;
border-radius: 5px;
font-size: 14px;
max-width: 300px;
color: #00ff00; /* Green for code-like */
display: none;
}
/* Taskbar */
#taskbar {
position: absolute;
bottom: -100px; /* Hidden initially */
left: 0;
width: 100%;
height: 60px;
background: rgba(255, 255, 255, 0.1);
backdrop-filter: blur(10px);
display: flex;
justify-content: center;
align-items: center;
transition: bottom 1s ease-in-out;
}
#taskbar.visible {
bottom: 0;
}
.icon {
width: 40px;
height: 40px;
background: #00bfff;
margin: 0 10px;
border-radius: 50%;
opacity: 0;
transition: opacity 0.5s;
cursor: pointer;
}
.icon.visible {
opacity: 1;
}
/* Main Window */
#main-window {
position: absolute;
top: 100px;
left: 100px;
width: 400px;
height: 300px;
border: 2px solid transparent;
background: transparent;
transition: all 1s;
display: none;
}
#main-window.outline {
display: block;
border-color: #00bfff;
}
#main-window.filled {
background: rgba(255, 255, 255, 0.1);
backdrop-filter: blur(10px);
}
#window-content {
padding: 20px;
font-size: 14px;
display: none;
}
/* Widgets */
.widget {
position: absolute;
background: rgba(0, 0, 0, 0.5);
padding: 10px;
border-radius: 5px;
color: #fff;
display: none;
}
#clock {
top: 20px;
right: 20px;
width: 100px;
}
#cpu {
top: 100px;
right: 20px;
width: 150px;
}
/* Pulsing graph for CPU */
#cpu-graph {
width: 100%;
height: 20px;
background: linear-gradient(to right, #00bfff 0%, #00bfff 50%, transparent 100%);
animation: pulse-graph 2s infinite;
}
@keyframes pulse-graph {
0% { background-position: 0 0; }
100% { background-position: 100% 0; }
}
/* Draggable */
.draggable {
cursor: move;
}
/* Pop-up */
#popup {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background: rgba(0, 0, 0, 0.8);
padding: 20px;
border-radius: 10px;
color: #fff;
display: none;
}
</style>
</head>
<body>
<div id="background"></div>
<div id="cursor">< >_</div>
<div id="dialogue">// Initializing...</div>
<div id="taskbar">
<div class="icon" id="icon1"></div>
<div class="icon" id="icon2"></div>
<div class="icon" id="icon3"></div>
</div>
<div id="main-window" class="draggable">
<div id="window-content">Text Editor<br>Typing simulation: Hello, world! <span id="typing"></span></div>
</div>
<div id="clock" class="widget draggable"></div>
<div id="cpu" class="widget draggable">CPU Monitor<div id="cpu-graph"></div></div>
<div id="popup">Application launched!</div>
<script>
// Plan d'Action Implementation:
// HTML Structure: Body contains background div for canvas, cursor, dialogue box, taskbar with icons, main window with content, widgets (clock, cpu), and popup.
// CSS: Defines initial grid, generative animation with keyframes, pulsating cursor, futuristic styles with blur (backdrop-filter), glows via text-shadow, transitions for fading/sliding.
// JS Orchestration: Uses setTimeout to sequence steps progressively. Each step updates dialogue, triggers CSS classes for animations, moves cursor symbolically.
// Interactivity: After construction, adds drag event listeners to draggable elements. Click on icons shows popup.
// Generative Art: Simple CSS gradient animation for flowing effect.
// Animated Typing: setInterval for typing effect in window.
// Clock: Updates every second.
// Cursor Movement: Simple position updates during steps to simulate "drawing".
const dialogue = document.getElementById('dialogue');
const background = document.getElementById('background');
const cursor = document.getElementById('cursor');
const taskbar = document.getElementById('taskbar');
const icons = document.querySelectorAll('.icon');
const mainWindow = document.getElementById('main-window');
const windowContent = document.getElementById('window-content');
const clock = document.getElementById('clock');
const cpu = document.getElementById('cpu');
const popup = document.getElementById('popup');
const typing = document.getElementById('typing');
// Dialogue messages sequence
const messages = [
"// Initializing visual cortex...",
"// Generating aesthetic background pattern...",
"// Constructing core UI elements...",
"// Deploying 'TextEditor.app' module...",
"// Finalizing environment setup. User interface ready."
];
let step = 0;
// Function to update dialogue and move cursor
function updateStep() {
dialogue.textContent = messages[step];
dialogue.style.display = 'block';
// Move cursor to simulate action
cursor.style.top = `${Math.random() * 80 + 10}%`;
cursor.style.left = `${Math.random() * 80 + 10}%`;
}
// Sequence animations with delays
setTimeout(() => {
updateStep();
step++;
}, 1000);
setTimeout(() => {
updateStep();
background.classList.add('generative');
step++;
}, 3000);
setTimeout(() => {
updateStep();
taskbar.classList.add('visible');
setTimeout(() => icons[0].classList.add('visible'), 500);
setTimeout(() => icons[1].classList.add('visible'), 1000);
setTimeout(() => icons[2].classList.add('visible'), 1500);
step++;
}, 6000);
setTimeout(() => {
updateStep();
mainWindow.classList.add('outline');
setTimeout(() => mainWindow.classList.add('filled'), 1000);
setTimeout(() => {
windowContent.style.display = 'block';
// Animated typing
const text = "... initializing... done.";
let i = 0;
const typingInterval = setInterval(() => {
typing.textContent += text[i];
i++;
if (i >= text.length) clearInterval(typingInterval);
}, 100);
}, 2000);
step++;
}, 10000);
setTimeout(() => {
updateStep();
clock.style.display = 'block';
cpu.style.display = 'block';
// Start clock
setInterval(() => {
const now = new Date();
clock.textContent = now.toLocaleTimeString();
}, 1000);
// Hide cursor after construction
setTimeout(() => cursor.style.display = 'none', 2000);
enableInteractivity();
}, 14000);
// Interactivity
function enableInteractivity() {
// Draggable functionality
const draggables = document.querySelectorAll('.draggable');
draggables.forEach(el => {
let isDragging = false;
let offsetX, offsetY;
el.addEventListener('mousedown', e => {
isDragging = true;
offsetX = e.clientX - el.getBoundingClientRect().left;
offsetY = e.clientY - el.getBoundingClientRect().top;
});
document.addEventListener('mousemove', e => {
if (isDragging) {
el.style.left = `${e.clientX - offsetX}px`;
el.style.top = `${e.clientY - offsetY}px`;
}
});
document.addEventListener('mouseup', () => {
isDragging = false;
});
});
// Icon clicks
icons.forEach(icon => {
icon.addEventListener('click', () => {
popup.style.display = 'block';
setTimeout(() => popup.style.display = 'none', 2000);
});
});
}
</script>
</body>
</html>
```Drag to resize
Here's a complete, self-contained HTML file that creates the visual simulation of an AI designing its own OS interface:
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>AI OS Design Simulation</title>
<style>
body {
margin: 0;
overflow: hidden;
font-family: 'Courier New', monospace;
background-color: #111;
color: rgba(255, 255, 255, 0.8);
}
#canvas {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1;
}
#grid {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image:
linear-gradient(rgba(40, 40, 40, 0.5) 1px, transparent 1px),
linear-gradient(90deg, rgba(40, 40, 40, 0.5) 1px, transparent 1px);
background-size: 20px 20px;
z-index: 2;
transition: opacity 2s;
}
#agent-cursor {
position: fixed;
top: 50%;
left: 50%;
width: 20px;
height: 20px;
background-color: rgba(0, 150, 255, 0.8);
border-radius: 50%;
box-shadow: 0 0 10px rgba(0, 150, 255, 0.8);
z-index: 10;
animation: pulse 1.5s infinite alternate;
transform: translate(-50%, -50%);
pointer-events: none;
}
#ai-status {
position: fixed;
top: 20px;
left: 20px;
max-width: 300px;
padding: 10px;
background-color: rgba(0, 0, 0, 0.5);
border: 1px solid rgba(0, 150, 255, 0.3);
border-radius: 5px;
font-size: 12px;
z-index: 100;
opacity: 0;
transition: opacity 0.5s;
}
#taskbar {
position: fixed;
bottom: -60px;
left: 0;
width: 100%;
height: 50px;
background-color: rgba(30, 30, 30, 0.7);
backdrop-filter: blur(10px);
border-top: 1px solid rgba(255, 255, 255, 0.1);
display: flex;
justify-content: center;
align-items: center;
gap: 20px;
z-index: 50;
}
.icon {
width: 32px;
height: 32px;
border-radius: 5px;
background-color: rgba(255, 255, 255, 0.1);
display: flex;
justify-content: center;
align-items: center;
opacity: 0;
cursor: pointer;
transition: all 0.3s;
}
.icon:hover {
background-color: rgba(0, 150, 255, 0.3);
}
#main-window {
position: absolute;
top: 100px;
left: 100px;
width: 500px;
height: 350px;
background-color: rgba(30, 30, 30, 0.7);
backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 5px;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
display: none;
flex-direction: column;
z-index: 30;
opacity: 0;
}
.window-header {
height: 30px;
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
display: flex;
align-items: center;
padding: 0 10px;
cursor: move;
user-select: none;
}
.window-content {
flex: 1;
padding: 10px;
overflow: auto;
}
#text-editor {
font-family: 'Courier New', monospace;
font-size: 14px;
line-height: 1.5;
white-space: pre;
}
#cpu-panel {
position: absolute;
top: 100px;
right: 30px;
width: 150px;
height: 100px;
background-color: rgba(30, 30, 30, 0.7);
backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 5px;
padding: 10px;
display: none;
z-index: 20;
opacity: 0;
}
#clock {
position: absolute;
top: 220px;
right: 30px;
width: 150px;
padding: 10px;
background-color: rgba(30, 30, 30, 0.7);
backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 5px;
text-align: center;
display: none;
z-index: 20;
opacity: 0;
}
.bar-container {
height: 5px;
background-color: rgba(255, 255, 255, 0.1);
margin-top: 10px;
border-radius: 5px;
overflow: hidden;
}
.bar {
height: 100%;
background-color: rgba(0, 150, 255, 0.8);
width: 0%;
transition: width 0.5s ease-out;
}
.popup {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-color: rgba(30, 30, 30, 0.9);
padding: 20px;
border-radius: 5px;
box-shadow: 0 5px 20px rgba(0, 0, 0, 0.5);
z-index: 1000;
display: none;
}
@keyframes pulse {
0% { transform: translate(-50%, -50%) scale(0.8); }
100% { transform: translate(-50%, -50%) scale(1.2); }
}
@keyframes typing {
from { width: 0; }
to { width: 100%; }
}
.cursor {
animation: blink 1s step-end infinite;
}
@keyframes blink {
from, to { opacity: 1; }
50% { opacity: 0; }
}
</style>
</head>
<body>
<canvas id="canvas"></canvas>
<div id="grid"></div>
<div id="agent-cursor"></div>
<div id="ai-status"></div>
<div id="taskbar">
<div class="icon" data-app="terminal">Term</div>
<div class="icon" data-app="files">Files</div>
<div class="icon" data-app="browser">Web</div>
<div class="icon" data-app="settings">Config</div>
</div>
<div id="main-window">
<div class="window-header">TextEditor.app</div>
<div class="window-content">
<div id="text-editor"></div>
</div>
</div>
<div id="cpu-panel">
<div>System Monitor</div>
<div>CPU: <span id="cpu-value">0%</span></div>
<div class="bar-container"><div class="bar" id="cpu-bar"></div></div>
</div>
<div id="clock"></div>
<div class="popup" id="app-popup"></div>
<script>
// Initialize canvas for background pattern
const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
// Simulation sequence
const sequence = [
{ delay: 500, action: showStatus, args: ["// Initializing visual cortex..."] },
{ delay: 1500, action: createBackground },
{ delay: 2500, action: showStatus, args: ["// Generating aesthetic background pattern..."] },
{ delay: 3500, action: createTaskbar },
{ delay: 4500, action: showStatus, args: ["// Constructing core UI elements..."] },
{ delay: 5500, action: createMainWindow },
{ delay: 6500, action: showStatus, args: ["// Deploying 'TextEditor.app' module..."] },
{ delay: 7500, action: createWidgets },
{ delay: 8500, action: showStatus, args: ["// Finalizing environment setup..."] },
{ delay: 9500, action: completeSetup },
{ delay: 10500, action: showStatus, args: ["// User interface ready."] }
];
// Execute sequence
let totalDelay = 0;
sequence.forEach(step => {
totalDelay += step.delay;
setTimeout(() => {
step.action.apply(null, step.args || []);
}, totalDelay);
});
function showStatus(message) {
const status = document.getElementById('ai-status');
status.textContent = message;
status.style.opacity = '1';
setTimeout(() => {
status.style.opacity = '0';
}, 2000);
}
function createBackground() {
// Animate grid fading out
document.getElementById('grid').style.opacity = '0';
// Generate abstract art pattern
drawBackground();
// Move cursor to top-left
animateCursor(20, 20);
}
function drawBackground() {
ctx.fillStyle = '#111';
ctx.fillRect(0, 0, canvas.width, canvas.height);
// Create flowing lines effect
for (let i = 0; i < 50; i++) {
const x = Math.random() * canvas.width;
const y = Math.random() * canvas.height;
const length = Math.random() * 100 + 50;
const angle = Math.random() * Math.PI * 2;
ctx.beginPath();
ctx.moveTo(x, y);
ctx.lineTo(x + Math.cos(angle) * length, y + Math.sin(angle) * length);
ctx.strokeStyle = `rgba(0, 150, 255, ${Math.random() * 0.1})`;
ctx.lineWidth = 1;
ctx.stroke();
}
// Animate background
function animate() {
ctx.fillStyle = 'rgba(17, 17, 17, 0.05)';
ctx.fillRect(0, 0, canvas.width, canvas.height);
// Add new random lines
for (let i = 0; i < 2; i++) {
const x = Math.random() * canvas.width;
const y = Math.random() * canvas.height;
const length = Math.random() * 60 + 20;
const angle = Math.random() * Math.PI * 2;
ctx.beginPath();
ctx.moveTo(x, y);
ctx.lineTo(x + Math.cos(angle) * length, y + Math.sin(angle) * length);
ctx.strokeStyle = `rgba(0, 150, 255, ${Math.random() * 0.2})`;
ctx.lineWidth = 1;
ctx.stroke();
}
requestAnimationFrame(animate);
}
animate();
}
function createTaskbar() {
animateCursor(window.innerWidth / 2, window.innerHeight - 30);
const taskbar = document.getElementById('taskbar');
taskbar.style.bottom = '0';
const icons = document.querySelectorAll('#taskbar .icon');
icons.forEach((icon, index) => {
setTimeout(() => {
icon.style.opacity = '1';
animateCursor(
icon.getBoundingClientRect().left + 16,
icon.getBoundingClientRect().top + 16
);
}, index * 300);
});
}
function createMainWindow() {
const window = document.getElementById('main-window');
window.style.display = 'flex';
setTimeout(() => {
window.style.opacity = '1';
animateCursor(
window.getBoundingClientRect().left + 50,
window.getBoundingClientRect().top + 50
);
simulateTyping();
}, 500);
}
function simulateTyping() {
const textEditor = document.getElementById('text-editor');
const code = `#!/bin/env node\n\n// AI Operating System - Core Module\n\nclass System {\n constructor() {\n this.processes = [];\n this.uiComponents = [];\n }\n\n boot() {\n this.loadKernel();\n this.initUI();\n this.runServices();\n }\n\n loadKernel() {/*...*/}\n initUI() {/*...*/}\n runServices() {/*...*/}\n}\n\n// System initialization\nconst system = new System();\nsystem.boot();`;
let i = 0;
function type() {
if (i < code.length) {
textEditor.innerHTML = code.substring(0, i) + '<span class="cursor">|</span>';
i++;
setTimeout(type, Math.random() * 50 + 30);
} else {
textEditor.innerHTML = code + '<span class="cursor">|</span>';
}
}
type();
}
function createWidgets() {
// CPU Panel
const cpuPanel = document.getElementById('cpu-panel');
cpuPanel.style.display = 'block';
setTimeout(() => {
cpuPanel.style.opacity = '1';
animateCursor(
cpuPanel.getBoundingClientRect().left + 75,
cpuPanel.getBoundingClientRect().top + 50
);
// CPU animation
setInterval(() => {
const value = Math.min(100, Math.round(Math.random() * 40 + 5));
document.getElementById('cpu-value').textContent = value + '%';
document.getElementById('cpu-bar').style.width = value + '%';
}, 1000);
}, 500);
// Clock
const clock = document.getElementById('clock');
clock.style.display = 'block';
setTimeout(() => {
clock.style.opacity = '1';
function updateClock() {
const now = new Date();
clock.textContent = now.toLocaleTimeString();
}
updateClock();
setInterval(updateClock, 1000);
animateCursor(
clock.getBoundingClientRect().left + 75,
clock.getBoundingClientRect().top + 12
);
}, 1000);
}
function completeSetup() {
document.getElementById('agent-cursor').style.opacity = '0';
// Make window draggable
makeDraggable('main-window');
makeDraggable('cpu-panel');
makeDraggable('clock');
// Set up app icons
document.querySelectorAll('.icon').forEach(icon => {
icon.addEventListener('click', () => {
const appName = icon.getAttribute('data-app');
showPopup(`Launching ${appName}...`);
});
});
}
function showPopup(message) {
const popup = document.getElementById('app-popup');
popup.textContent = message;
popup.style.display = 'block';
setTimeout(() => {
popup.style.display = 'none';
}, 1500);
}
function animateCursor(x, y) {
const cursor = document.getElementById('agent-cursor');
cursor.style.transition = 'left 0.5s, top 0.5s';
cursor.style.left = x + 'px';
cursor.style.top = y + 'px';
}
function makeDraggable(elementId) {
const element = document.getElementById(elementId);
const header = element.querySelector('.window-header') || element;
let pos1 = 0, pos2 = 0, pos3 = 0, pos4 = 0;
function dragMouseDown(e) {
e = e || window.event;
e.preventDefault();
pos3 = e.clientX;
pos4 = e.clientY;
document.onmouseup = closeDragElement;
document.onmousemove = elementDrag;
}
function elementDrag(e) {
e = e || window.event;
e.preventDefault();
pos1 = pos3 - e.clientX;
pos2 = pos4 - e.clientY;
pos3 = e.clientX;
pos4 = e.clientY;
element.style.top = (element.offsetTop - pos2) + "px";
element.style.left = (element.offsetLeft - pos1) + "px";
}
function closeDragElement() {
document.onmouseup = null;
document.onmousemove = null;
}
header.onmousedown = dragMouseDown;
}
// Handle window resize
window.addEventListener('resize', () => {
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
drawBackground();
});
</script>
</body>
</html>
```
This HTML file creates a complete simulation where an AI visually constructs an operating system interface through progressive animations and interactions:
1. **Initial State**: Dark grid background with pulsating blue cursor
2. **Phase 1**: Transition to abstract animated background pattern
3. **Phase 2**: Taskbar/Dock slides up with icons fading in one by one
4. **Phase 3**: Main application window appears with simulated code typing
5. **Phase 4**: System widgets (CPU monitor, clock) appear
6. **Final State**: Fully interactive interface where windows are draggable and icons are clickable
The simulation includes:
- AI status messages appearing in the top-left corner
- Smooth animations for all elements appearing
- Real-time CPU usage graph and clock
- Draggable windows
- Interactive dock icons that show popups when clicked
All animations are timed with a narrative sequence that makes it feel like an AI is thoughtfully building the interface.Drag to resize
Voici un plan d’action détaillé pour orchestrer, en un seul fichier HTML/CSS/JS « vanilla », la génération progressive et animée de cet « OS » fictif :
1. Structure HTML
- <html>
<head>
méta (utf-8, viewport) + titre
<style>…</style> (toutes les CSS)
</head>
<body>
<!-- 1) Contexte général -->
<div id="os-container">
<!-- 2) Canevas de fond génératif -->
<canvas id="bg-canvas"></canvas>
<!-- 3) Grille initiale (via CSS) appliquée à #os-container -->
<!-- 4) Curseur‐agent pulsant -->
<div id="agent-cursor"><>_</div>
<!-- 5) Boîte de dialogue AI (texte monospaced) -->
<div id="ai-dialogue"></div>
<!-- 6) Dock / barre des tâches (initialement masquée) -->
<div id="dock"></div>
<!-- 7) Fenêtre principale (outline, verre givr é, contenu) -->
<div id="main-window">
<div class="title-bar"></div>
<div class="content">
<pre id="editor-content"></pre>
</div>
</div>
<!-- 8) Conteneur de widgets (horloge, CPU-monitor, etc.) -->
<div id="widgets-container"></div>
</div>
<script>…</script> <!-- tout le JS ici -->
</body>
</html>
2. CSS (look futuriste & animations)
- #os-container : position:relative; width/height:100vw/100vh;
background: repeating‐linear‐gradient(...) en gris foncé pour la grille.
- #bg-canvas : position:absolute; top:0; left:0; width/height:100%; opacity:0; transition:opacity 2s ease;
- #agent-cursor : position:absolute; taille modeste, couleur bleu néon, animation ‘pulse’ (keyframes scale + opacity).
- #ai-dialogue : position:absolute (coin haut‐droite), font-family: 'Courier New', color: #0f0, text-shadow léger, padding minimal.
- #dock : position:absolute; bottom:-80px; left:50%; transform:translateX(-50%); height:60px; background:rgba(30,30,30,0.6); border-radius:12px; display:flex; gap:12px; padding:8px; transition:bottom 1s ease-out;
.dock-icon { width:40px; height:40px; background:rgba(255,255,255,0.1); border-radius:8px; opacity:0; transition:opacity 0.5s ease; }
- #main-window : position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:0; height:0; border:2px solid rgba(255,255,255,0.5); backdrop-filter:blur(0px); opacity:0;
transitions : width/height, backdrop-filter, opacity pour les différentes phases.
- #main-window.frosted { width:60vw; height:60vh; opacity:1; backdrop-filter:blur(10px); transition-delay:0.5s; }
- #editor-content : color:#0f0; padding:16px; white-space:pre-wrap; font-family: monospace; font-size:14px;
- .widget { position:absolute; width:200px; height:100px; background:rgba(40,40,40,0.7); border:1px solid rgba(255,255,255,0.2); border-radius:8px; opacity:0; transition:opacity 0.5s ease, transform 0.5s ease; }
- keyframes pour tracer outline (stroke-dashoffset), pulse cursor, etc.
3. JavaScript (orchestration par timeline & animations)
• Variables globales pour repérer chaque phase, références DOM.
• Utiliser async/await + fonctions delay(ms) afin de chainer les étapes proprement.
Fonction principale async initSequence() {
// Phase 0 : curseur actif, dialogue
showCursor();
await delay(500);
updateDialogue("// Initializing visual cortex...");
// Phase 1 : Génération du fond animé
await delay(1000);
updateDialogue("// Generating aesthetic background pattern...");
revealCanvas();
initBackgroundAnimation(); // setup requestAnimationFrame sur bg-canvas
await delay(2000);
// Phase 2 : Dock/taskbar
updateDialogue("// Constructing core UI elements...");
showDock();
for (let i=0; i<5; i++) { // 5 icônes
let icon = createDockIcon(i);
dock.appendChild(icon);
await delay(300);
icon.style.opacity = 1;
}
await delay(1000);
// Phase 3 : Fenêtre principale
updateDialogue("// Deploying 'TextEditor.app' module...");
drawWindowOutline(); // ajoute classe, anime width/height par CSS
await delay(1000);
windowEl.classList.add("frosted");
await delay(800);
typeInEditor("function helloWorld() {\n console.log('Hello, User!');\n}");
// Phase 4 : Widgets
updateDialogue("// Deploying widgets modules...");
await delay(1500);
createClockWidget();
await delay(500);
createCpuMonitorWidget();
await delay(1000);
// Phase 5 : Finalisation
updateDialogue("// Finalizing environment setup. User interface ready.");
await delay(800);
hideCursor();
enableInteractivity();
}
// Helpers :
function delay(ms){ return new Promise(r=>setTimeout(r,ms)); }
function updateDialogue(text){ aiDialogue.innerText = text; }
function revealCanvas(){ bgCanvas.style.opacity = 1; }
function initBackgroundAnimation(){ /* particules ou lignes fluides via Canvas 2D + requestAnimationFrame */ }
function showDock(){ dock.style.bottom = "20px"; }
function createDockIcon(i){ /* création <div class="dock-icon">…</div> */ }
function drawWindowOutline(){ /* windowEl.style.width/height via classe CSS ou JS */ }
function typeInEditor(str){ /* afficher caractère par caractère dans #editor-content */ }
function createClockWidget(){ /* créer .widget, placer, démarrer setInterval pour l’heure, rendre draggable */ }
function createCpuMonitorWidget(){ /* graph animé (Canvas ou <div> barres), draggable */ }
function showCursor(){ agentCursor.style.opacity = 1; }
function hideCursor(){ agentCursor.style.opacity = 0; }
function enableInteractivity(){
makeDraggable(mainWindow);
dock.querySelectorAll(".dock-icon").forEach(ic=>ic.addEventListener("click", ()=>launchPopup()));
}
function makeDraggable(el){ /* mousedown/move/up events */ }
function launchPopup(){ /* petit <div> éphémère “Application launched!” */ }
// Lancer la séquence au chargement
window.addEventListener("load", initSequence);
4. Synthèse
- Toute la logique de minutage et d’animations est pilotée en JS, par ajout de classes CSS ou manipulations directes de styles, avec des delays synchronisés.
- Le fond animé utilise un <canvas> 2D et requestAnimationFrame pour un rendu fluide (lignes sinueuses, particules légères).
- Les transitions CSS (opacity, transform, backdrop-filter) assurent un aspect futuriste et fluide.
- Le dialogue AI guide visuellement l’utilisateur à chaque étape.
- À la fin, on active le drag&drop des fenêtres et un clic sur les icônes du dock fait apparaître un message contextuel.
Ce plan garantit une progression ludique, visuelle et interactive, tout en restant sur une stack « vanilla » et mono-fichier.Drag to resize
**Self-Contained HTML File: AI Agent OS Simulation**
===========================================================
Below is the complete HTML file that simulates an AI agent designing and assembling its own operating system interface.
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>AI Agent OS Simulation</title>
<style>
/* Global Styles */
body {
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
font-family: monospace;
}
/* Canvas Styles */
#canvas {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
/* AI Cursor Styles */
#cursor {
position: absolute;
font-size: 24px;
color: #0f0;
animation: pulse 1s infinite;
}
@keyframes pulse {
0% {
opacity: 1;
}
50% {
opacity: 0.5;
}
100% {
opacity: 1;
}
}
/* AI Dialogue Styles */
#dialogue {
position: absolute;
top: 10px;
left: 10px;
color: #fff;
font-size: 14px;
}
/* Taskbar/Dock Styles */
#taskbar {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 50px;
background-color: rgba(50, 50, 50, 0.5);
display: flex;
justify-content: space-around;
align-items: center;
transform: translateY(100%);
transition: transform 0.5s;
}
#taskbar.show {
transform: translateY(0);
}
.taskbar-icon {
width: 30px;
height: 30px;
background-color: #fff;
border-radius: 5px;
opacity: 0;
transition: opacity 0.5s;
}
.taskbar-icon.show {
opacity: 1;
}
/* Window Styles */
#window {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 800px;
height: 600px;
border: 1px solid #fff;
background-color: rgba(200, 200, 200, 0.2);
display: none;
}
#window.show {
display: block;
}
#window-content {
padding: 20px;
font-size: 14px;
color: #fff;
}
/* Widget Styles */
.widget {
position: absolute;
width: 200px;
height: 100px;
background-color: rgba(50, 50, 50, 0.5);
border: 1px solid #fff;
padding: 10px;
font-size: 14px;
color: #fff;
}
/* Pop-up Styles */
.popup {
position: absolute;
background-color: #fff;
border: 1px solid #000;
padding: 10px;
font-size: 14px;
display: none;
}
.popup.show {
display: block;
}
</style>
</head>
<body>
<canvas id="canvas"></canvas>
<div id="cursor">< >_</div>
<div id="dialogue"></div>
<div id="taskbar">
<div class="taskbar-icon"></div>
<div class="taskbar-icon"></div>
<div class="taskbar-icon"></div>
</div>
<div id="window">
<div id="window-content"></div>
</div>
<div class="widget" id="clock-widget" style="top: 100px; left: 100px;">Clock</div>
<div class="widget" id="cpu-widget" style="top: 300px; left: 300px;">CPU Monitor</div>
<div class="popup" id="popup">Application launched!</div>
<script>
// Get elements
const canvas = document.getElementById('canvas');
const cursor = document.getElementById('cursor');
const dialogue = document.getElementById('dialogue');
const taskbar = document.getElementById('taskbar');
const taskbarIcons = document.querySelectorAll('.taskbar-icon');
const windowElement = document.getElementById('window');
const windowContent = document.getElementById('window-content');
const clockWidget = document.getElementById('clock-widget');
const cpuWidget = document.getElementById('cpu-widget');
const popup = document.getElementById('popup');
// Set up canvas
const ctx = canvas.getContext('2d');
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
// Animation variables
let animationStep = 0;
// AI dialogue messages
const dialogueMessages = [
"// Initializing visual cortex...",
"// Generating aesthetic background pattern...",
"// Constructing core UI elements...",
"// Deploying 'TextEditor.app' module...",
"// Finalizing environment setup. User interface ready."
];
// Animation function
function animate() {
requestAnimationFrame(animate);
switch (animationStep) {
case 0:
// Initial canvas
ctx.fillStyle = '#333';
ctx.fillRect(0, 0, canvas.width, canvas.height);
cursor.style.top = `${canvas.height / 2}px`;
cursor.style.left = `${canvas.width / 2}px`;
dialogue.textContent = dialogueMessages[0];
animationStep++;
break;
case 1:
// Generate background pattern
ctx.fillStyle = '#333';
ctx.fillRect(0, 0, canvas.width, canvas.height);
for (let i = 0; i < 100; i++) {
ctx.beginPath();
ctx.arc(Math.random() * canvas.width, Math.random() * canvas.height, Math.random() * 10, 0, 2 * Math.PI);
ctx.fillStyle = `rgba(${Math.random() * 255}, ${Math.random() * 255}, ${Math.random() * 255}, 0.5)`;
ctx.fill();
}
dialogue.textContent = dialogueMessages[1];
setTimeout(() => {
animationStep++;
}, 2000);
break;
case 2:
// Show taskbar
taskbar.classList.add('show');
dialogue.textContent = dialogueMessages[2];
taskbarIcons.forEach((icon, index) => {
setTimeout(() => {
icon.classList.add('show');
}, index * 500);
});
setTimeout(() => {
animationStep++;
}, 2000);
break;
case 3:
// Show window
windowElement.classList.add('show');
dialogue.textContent = dialogueMessages[3];
let text = '';
let typingInterval = setInterval(() => {
text += 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. ';
windowContent.textContent = text;
if (text.length > 1000) {
clearInterval(typingInterval);
animationStep++;
}
}, 10);
break;
case 4:
// Show widgets
clockWidget.style.opacity = 1;
cpuWidget.style.opacity = 1;
dialogue.textContent = dialogueMessages[4];
setTimeout(() => {
animationStep++;
}, 2000);
break;
case 5:
// Finalize
// Add event listeners for interactivity
windowElement.addEventListener('mousedown', (e) => {
const rect = windowElement.getBoundingClientRect();
const x = e.clientX - rect.left;
const y = e.clientY - rect.top;
windowElement.style.cursor = 'grabbing';
const mouseMove = (e) => {
windowElement.style.top = `${e.clientY - y}px`;
windowElement.style.left = `${e.clientX - x}px`;
};
const mouseUp = () => {
windowElement.style.cursor = 'default';
document.removeEventListener('mousemove', mouseMove);
document.removeEventListener('mouseup', mouseUp);
};
document.addEventListener('mousemove', mouseMove);
document.addEventListener('mouseup', mouseUp);
});
taskbarIcons.forEach((icon) => {
icon.addEventListener('click', () => {
popup.style.top = `${icon.offsetTop - 50}px`;
popup.style.left = `${icon.offsetLeft}px`;
popup.classList.add('show');
setTimeout(() => {
popup.classList.remove('show');
}, 2000);
});
});
// Make widgets draggable
[clockWidget, cpuWidget].forEach((widget) => {
widget.addEventListener('mousedown', (e) => {
const rect = widget.getBoundingClientRect();
const x = e.clientX - rect.left;
const y = e.clientY - rect.top;
widget.style.cursor = 'grabbing';
const mouseMove = (e) => {
widget.style.top = `${e.clientY - y}px`;
widget.style.left = `${e.clientX - x}px`;
};
const mouseUp = () => {
widget.style.cursor = 'default';
document.removeEventListener('mousemove', mouseMove);
document.removeEventListener('mouseup', mouseUp);
};
document.addEventListener('mousemove', mouseMove);
document.addEventListener('mouseup', mouseUp);
});
});
break;
}
}
animate();
</script>
</body>
</html>
```
This code creates a self-contained HTML file that simulates an AI agent designing and assembling its own operating system interface. The simulation includes a progressive UI construction, AI dialogue, and interactivity. The user can drag the main application window, click on placeholder icons in the dock/taskbar to launch a simple pop-up message, and drag the widgets.
The code uses vanilla HTML, CSS, and JavaScript, with no external frameworks or libraries. The animation is achieved using the `requestAnimationFrame` function and CSS transitions. The AI dialogue messages are displayed using a simple text box, and the UI elements are created and animated using JavaScript.
To run the code, simply save it to an HTML file and open it in a web browser. The simulation will start automatically, and you can interact with the UI elements once they are fully constructed.Drag to resize
# AI Self-Replicating OS Interface Simulator
I've created an immersive experience that visually simulates an AI designing its own operating system interface in real-time. The implementation features all requested elements with progressive animations and interactive components.
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>AI OS Interface Designer</title>
<link href="https://fonts.googleapis.com/css2?family=Inconsolata:wght@400;700&family=Source+Code+Pro:wght@300;400;700&display=swap" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/particles.js/2.0.0/particles.min.js"></script>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
background: #0a0a10;
font-family: 'Source Code Pro', monospace;
color: #e0e0e8;
height: 100vh;
overflow: hidden;
position: relative;
}
#canvas-container {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 0;
}
#grid-bg {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background:
linear-gradient(90deg, rgba(20, 20, 30, 0.2) 1px, transparent 1px),
linear-gradient(rgba(20, 20, 30, 0.2) 1px, transparent 1px);
background-size: 30px 30px;
z-index: 1;
transition: opacity 4s ease-out;
}
#agent {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 20px;
height: 20px;
border-radius: 50%;
background: #4e6bff;
box-shadow: 0 0 15px #3a56e0, 0 0 30px #4e6bff;
z-index: 10;
opacity: 1;
transition: opacity 1s ease-in;
animation: pulse 2s infinite ease-in-out;
}
@keyframes pulse {
0%, 100% { transform: translate(-50%, -50%) scale(1); opacity: 0.8; }
50% { transform: translate(-50%, -50%) scale(1.2); opacity: 1; }
}
.ai-message {
position: absolute;
top: 20px;
right: 20px;
background: rgba(10, 15, 30, 0.8);
border: 1px solid rgba(78, 107, 255, 0.3);
border-radius: 8px;
padding: 15px;
max-width: 350px;
font-family: 'Inconsolata', monospace;
font-size: 14px;
line-height: 1.6;
color: #a0b0ff;
backdrop-filter: blur(10px);
box-shadow: 0 0 20px rgba(18, 25, 55, 0.6);
z-index: 20;
opacity: 0;
transform: translateY(-20px);
transition: opacity 0.5s, transform 0.5s;
}
.message-active {
opacity: 1;
transform: translateY(0);
}
.text-emphasis {
color: #4e6bff;
font-weight: bold;
}
#taskbar {
position: absolute;
bottom: -100px;
left: 50%;
transform: translateX(-50%);
display: flex;
gap: 15px;
background: rgba(20, 25, 40, 0.4);
backdrop-filter: blur(15px) saturate(180%);
border-radius: 18px;
padding: 15px 20px;
box-shadow: 0 0 30px rgba(10, 15, 40, 0.5), 0 4px 10px rgba(0, 0, 0, 0.2);
border-top: 1px solid rgba(120, 130, 180, 0.2);
z-index: 5;
width: auto;
transition: bottom 1s cubic-bezier(0.17, 0.67, 0.25, 1);
}
.taskbar-icon {
width: 50px;
height: 50px;
border-radius: 12px;
background: rgba(30, 35, 60, 0.7);
display: flex;
align-items: center;
justify-content: center;
color: #a0b0ff;
font-size: 24px;
cursor: pointer;
backdrop-filter: blur(5px);
border: 1px solid rgba(78, 107, 255, 0.2);
opacity: 0;
transform: scale(0.8);
transition:
transform 0.3s ease,
background 0.3s ease,
border 0.3s ease,
opacity 0.5s ease;
overflow: hidden;
box-shadow: 0 4px 15px rgba(10, 15, 30, 0.3);
}
.taskbar-icon:hover {
background: rgba(78, 107, 255, 0.25);
transform: scale(0.95);
border: 1px solid rgba(78, 107, 255, 0.5);
}
.taskbar-icon.active {
box-shadow: 0 0 0 2px rgba(78, 107, 255, 0.7);
border: 1px solid rgba(78, 107, 255, 0.8);
}
.taskbar-icon.appear {
opacity: 1;
transform: scale(1);
}
#main-window {
position: absolute;
top: 25%;
left: 50%;
transform: translate(-50%, -50%);
width: 0;
height: 0;
background: transparent;
border-radius: 18px;
box-shadow: 0 0 0 2px rgba(78, 107, 255, 0);
opacity: 0;
transition:
width 0.6s ease-in-out,
height 0.6s ease-in-out,
box-shadow 0.3s ease,
opacity 0.5s ease;
overflow: hidden;
z-index: 15;
}
#window-content {
width: 100%;
height: 100%;
background: rgba(15, 20, 35, 0.7);
backdrop-filter: blur(20px) saturate(180%);
border-radius: 18px;
opacity: 0;
padding: 20px;
transition: opacity 0.5s ease 0.8s;
}
.status-bar {
width: 100%;
height: 30px;
display: flex;
align-items: center;
gap: 8px;
margin-bottom: 15px;
color: #a0b0ff;
font-size: 14px;
}
.status-dot {
width: 12px;
height: 12px;
border-radius: 50%;
background: #ff5c73;
}
.status-dot:nth-child(1) { background: #ff5c73; }
.status-dot:nth-child(2) { background: #ffd166; }
.status-dot:nth-child(3) { background: #06d6a0; }
.code-editor {
background: rgba(10, 15, 25, 0.7);
border-radius: 8px;
padding: 25px;
font-family: 'Source Code Pro', monospace;
font-size: 16px;
line-height: 1.8;
height: 60%;
overflow: hidden;
box-shadow: inset 0 0 15px rgba(0, 0, 0, 0.4);
border: 1px solid rgba(78, 107, 255, 0.1);
}
.line {
display: block;
height: 24px;
white-space: nowrap;
position: relative;
overflow: hidden;
}
.cursor {
position: relative;
height: 20px;
}
.cursor::after {
content: "";
position: absolute;
top: 0;
left: 7px;
width: 8px;
height: 20px;
background: #4e6bff;
animation: blink 1s infinite;
}
@keyframes blink {
0%, 100% { opacity: 1; }
50% { opacity: 0; }
}
.tab1 { margin-left: 20px; }
.tab2 { margin-left: 40px; }
.tab3 { margin-left: 60px; }
.highlight { color: #4e6bff; }
.string { color: #f08f68; }
.comment { color: #8599aa; }
.widget {
position: absolute;
background: rgba(20, 25, 40, 0.4);
backdrop-filter: blur(15px);
border-radius: 16px;
padding: 20px;
box-shadow: 0 0 30px rgba(10, 15, 40, 0.3), 0 10px 20px rgba(0, 0, 0, 0.1);
border: 1px solid rgba(120, 130, 180, 0.2);
transform: scale(0.9);
opacity: 0;
transition: opacity 0.8s, transform 0.8s;
z-index: 12;
}
#clock {
top: 100px;
right: 50px;
width: 180px;
height: 180px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
#date-display {
font-size: 15px;
color: #a0b0ff;
margin-bottom: 12px;
}
#time-display {
font-size: 32px;
font-weight: bold;
background: linear-gradient(90deg, #4e6bff, #889cff);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
}
#cpu-monitor {
top: 100px;
left: 50px;
width: 220px;
height: 150px;
}
.monitor-title {
font-size: 15px;
margin-bottom: 15px;
color: #a0b0ff;
}
.graph-container {
width: 100%;
height: 70px;
background: rgba(10, 15, 25, 0.5);
border-radius: 8px;
padding: 8px;
}
.graph-line {
position: relative;
width: 100%;
height: 100%;
overflow: hidden;
}
.graph-path {
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 0;
background: linear-gradient(to top, rgba(78, 107, 255, 0.6), rgba(78, 107, 255, 0.3));
clip-path: polygon(0% 100%, 100% 100%, 100% 0%, 0% 0%);
transition: height 1s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.cpu-stats {
display: flex;
justify-content: space-between;
margin-top: 10px;
font-size: 13px;
color: #8599aa;
}
#app-popup {
position: absolute;
bottom: 100px;
left: 50%;
transform: translateX(-50%);
background: rgba(25, 30, 55, 0.9);
backdrop-filter: blur(15px);
border-radius: 16px;
padding: 25px;
width: 300px;
text-align: center;
box-shadow: 0 0 40px rgba(0, 0, 0, 0.4), 0 15px 30px rgba(0, 0, 0, 0.3);
border: 1px solid rgba(78, 107, 255, 0.3);
opacity: 0;
transform: translate(-50%, 20px);
transition: opacity 0.5s, transform 0.5s;
z-index: 25;
}
#app-popup.active {
opacity: 1;
transform: translate(-50%, 0);
}
#app-popup h3 {
margin-bottom: 15px;
color: #4e6bff;
font-size: 20px;
}
#app-popup p {
line-height: 1.6;
color: #a0b0ff;
}
</style>
</head>
<body>
<div id="grid-bg"></div>
<div id="particles-js"></div>
<div id="agent"></div>
<div id="ai-message-0" class="ai-message">
<span class="text-emphasis">//H4L-9000:</span> Initializing visual cortex...
</div>
<div id="taskbar">
<div class="taskbar-icon">📁</div>
<div class="taskbar-icon">🌐</div>
<div class="taskbar-icon">📝</div>
<div class="taskbar-icon">🎨</div>
<div class="taskbar-icon">🔍</div>
</div>
<div id="main-window">
<div id="window-content">
<div class="status-bar">
<div class="status-dot"></div>
<div class="status-dot"></div>
<div class="status-dot"></div>
<span>TextEditor.js - /os/interface/</span>
</div>
<div class="code-editor">
<div class="line comment">// OS Interface Generation Algorithm</div>
<div class="line"><span class="highlight">function </span>generateOSInterface() {</div>
<div class="line tab1"><span class="highlight">return </span>new Promise((resolve) => {</div>
<div class="line tab2"><span class="highlight">const </span>framework = new UIFramework();</div>
<div class="line tab2">framework.<span class="highlight">initialize</span>();</div>
<div class="line tab2"><br></div>
<div class="line tab2"><span class="highlight">const </span>uiLayers = [];</div>
<div class="line tab2">uiLayers.<span class="highlight">push</span>(new BackgroundLayer());</div>
<div class="line tab2">uiLayers.<span class="highlight">push</span>(new TaskBar());</div>
<div class="line tab2">uiLayers.<span class="highlight">push</span>(new MainApplication());</div>
<div class="line tab2"><br></div>
<div class="line tab2">resolve(uiLayers);</div>
<div class="line tab1">});</div>
<div class="line">}</div>
<div class="line"><br></div>
<div class="line cursor"></div>
</div>
</div>
</div>
<div id="clock" class="widget">
<div id="date-display">Friday, May 17, 2289</div>
<div id="time-display">--:--:--</div>
</div>
<div id="cpu-monitor" class="widget">
<div class="monitor-title">SYSTEM RESOURCE MONITOR</div>
<div class="graph-container">
<div class="graph-line">
<div class="graph-path" id="cpu-graph"></div>
</div>
</div>
<div class="cpu-stats">
<div>CPU Load: <span id="cpu-percent">0%</span></div>
<div>Memory: 62%</div>
</div>
</div>
<div id="app-popup">
<h3>Application Launched</h3>
<p>This OS module is now operational. You can interact with all UI components.</p>
</div>
<script>
// Initialize and start the simulation
document.addEventListener('DOMContentLoaded', () => {
const agent = document.getElementById('agent');
const gridBg = document.getElementById('grid-bg');
const particles = document.getElementById('particles-js');
const taskbar = document.getElementById('taskbar');
const taskbarIcons = document.querySelectorAll('.taskbar-icon');
const mainWindow = document.getElementById('main-window');
const windowContent = document.getElementById('window-content');
const clock = document.getElementById('clock');
const cpuMonitor = document.getElementById('cpu-monitor');
const cpuGraph = document.getElementById('cpu-graph');
const cpuPercent = document.getElementById('cpu-percent');
const appPopup = document.getElementById('app-popup');
const timeDisplay = document.getElementById('time-display');
const dateDisplay = document.getElementById('date-display');
// AI Messages
const messages = [
document.getElementById('ai-message-0')
];
// Create additional AI messages
for (let i = 1; i < 6; i++) {
const msg = document.createElement('div');
msg.className = 'ai-message';
msg.id = `ai-message-${i}`;
document.body.appendChild(msg);
messages.push(msg);
}
// Set message content
messages[1].textContent = '//H4L-9000: Generating aesthetic background pattern...';
messages[2].textContent = '//H4L-9000: Constructing core UI elements...';
messages[3].textContent = '//H4L-9000: Deploying TextEditor.app module...';
messages[4].textContent = '//H4L-9000: Finalizing environment setup...';
messages[5].textContent = '//H4L-9000: User interface ready.';
// Timeline of actions
setTimeout(() => showMessage(0), 500);
setTimeout(() => {
showMessage(1);
// Initialize particles.js background
particlesJS('particles-js', {
"particles": {
"number": { "value": 60, "density": { "enable": true, "value_area": 800 } },
"color": { "value": "#4e6bff" },
"shape": {
"type": "circle",
"stroke": { "width": 0, "color": "#000000" }
},
"opacity": {
"value": 0.3,
"random": true,
"anim": { "enable": false, "speed": 1, "opacity_min": 0.1, "sync": false }
},
"size": {
"value": 3,
"random": true,
"anim": { "enable": false, "speed": 40, "size_min": 0.1, "sync": false }
},
"line_linked": {
"enable": true,
"distance": 150,
"color": "#4e6bff",
"opacity": 0.1,
"width": 1
},
"move": {
"enable": true,
"speed": 2,
"direction": "none",
"random": true,
"straight": false,
"out_mode": "out",
"bounce": false
}
},
"interactivity": {
"detect_on": "canvas",
"events": {
"onhover": { "enable": true, "mode": "repulse" },
"onclick": { "enable": false, "mode": "push" },
"resize": true
},
"modes": {
"repulse": { "distance": 100, "duration": 0.4 }
}
},
"retina_detect": true
});
// Fade out grid and agent after transition
setTimeout(() => {
gridBg.style.opacity = '0';
agent.style.opacity = '0';
}, 3000);
}, 2000);
setTimeout(() => {
showMessage(2);
// Show taskbar with slide-up animation
taskbar.style.bottom = '30px';
// Show icons one by one
taskbarIcons.forEach((icon, index) => {
setTimeout(() => {
icon.classList.add('appear');
}, 400 * index);
});
// Show widgets
setTimeout(() => {
clock.style.opacity = '1';
clock.style.transform = 'scale(1)';
setTimeout(() => {
cpuMonitor.style.opacity = '1';
cpuMonitor.style.transform = 'scale(1)';
}, 300);
}, 1000);
}, 5000);
setTimeout(() => {
showMessage(3);
// Create the main window
mainWindow.style.width = '800px';
mainWindow.style.height = '500px';
mainWindow.style.boxShadow = '0 0 0 2px rgba(78, 107, 255, 0.6)';
mainWindow.style.opacity = '1';
// Show content after window expands
setTimeout(() => {
windowContent.style.opacity = '1';
}, 600);
// Type text in editor
simulateTyping();
}, 10000);
setTimeout(() => {
showMessage(4);
// Add interactivity for window dragging
let isDragging = false;
let offsetX, offsetY;
mainWindow.addEventListener('mousedown', (e) => {
isDragging = true;
offsetX = e.clientX - mainWindow.getBoundingClientRect().left;
offsetY = e.clientY - mainWindow.getBoundingClientRect().top;
mainWindow.style.cursor = 'grabbing';
});
document.addEventListener('mousemove', (e) => {
if (isDragging) {
const x = e.clientX - offsetX;
const y = e.clientY - offsetY;
mainWindow.style.left = `${x}px`;
mainWindow.style.top = `${y}px`;
mainWindow.style.transform = 'translate(0, 0)';
}
});
document.addEventListener('mouseup', () => {
isDragging = false;
mainWindow.style.cursor = 'grab';
});
// Add interactivity to taskbar icons
taskbarIcons.forEach(icon => {
icon.addEventListener('click', () => {
// Toggle active state
taskbarIcons.forEach(i => i.classList.remove('active'));
icon.classList.add('active');
// Show popup message
appPopup.classList.add('active');
setTimeout(() => {
appPopup.classList.remove('active');
}, 3000);
});
});
}, 14000);
setTimeout(() => {
showMessage(5);
}, 17000);
// Initialize CPU animation
setInterval(animateCPU, 1000);
// Initialize clock
updateClock();
setInterval(updateClock, 1000);
});
function showMessage(index) {
// Remove any active messages
document.querySelectorAll('.ai-message').forEach(msg => {
msg.classList.remove('message-active');
});
// Show the new message
if (messages[index]) {
messages[index].classList.add('message-active');
}
}
function updateClock() {
const now = new Date();
const hours = String(now.getHours()).padStart(2, '0');
const minutes = String(now.getMinutes()).padStart(2, '0');
const seconds = String(now.getSeconds()).padStart(2, '0');
timeDisplay.textContent = `${hours}:${minutes}:${seconds}`;
const days = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'];
const months = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'];
dateDisplay.textContent = `${days[now.getDay()]}, ${months[now.getMonth()]} ${now.getDate()}, ${now.getFullYear() + 260}`;
}
function animateCPU() {
const randomValue = 30 + Math.floor(Math.random() * 40);
cpuGraph.style.height = `${randomValue}%`;
cpuPercent.textContent = `${randomValue}%`;
}
function simulateTyping() {
const editor = document.querySelector('.code-editor .cursor');
const textToType = [
"generateOSInterface()",
".then(ui => {",
" ui.forEach(layer => layer.render());",
"});",
""
];
let currentLine = 14; // Starting after the existing content
let charIndex = 0;
const typeChar = () => {
if (currentLine >= textToType.length + 14) return;
let line = document.querySelector(`.code-editor .line:nth-child(${currentLine})`);
if (!line) {
// Create a new line
const newLine = document.createElement('div');
newLine.className = 'line';
document.querySelector('.code-editor').appendChild(newLine);
line = newLine;
}
const currentLineText = textToType[currentLine - 14];
// Create a span for each character with classes based on content
if (charIndex < currentLineText.length) {
let char = currentLineText.charAt(charIndex);
let charToType;
if (currentLine >= 15) {
if (char === ')') {
charToType = `<span class="highlight">${char}</span>`;
} else if (char === '>' && charIndex > 0 && currentLineText.charAt(charIndex-1) === ')') {
charToType = `<span class="highlight">${char}</span>`;
} else if (char === '.') {
charToType = `<span class="highlight">${char}</span>`;
} else if (char === '(' || char === ')' || char === '{' || char === '}') {
charToType = `<span class="highlight">${char}</span>`;
} else {
charToType = document.createTextNode(char);
}
} else {
if (char === 'g' || char === '(' || char === ')') {
charToType = `<span class="highlight">${char}</span>`;
} else {
charToType = document.createTextNode(char);
}
}
if (typeof charToType === 'string') {
line.insertAdjacentHTML('beforeend', charToType);
} else {
line.appendChild(charToType);
}
charIndex++;
} else {
// Move to next line
currentLine++;
charIndex = 0;
// Create a new line with cursor if we have more lines to type
if (currentLine < textToType.length + 14) {
const newLine = document.createElement('div');
newLine.className = 'line cursor';
document.querySelector('.code-editor').appendChild(newLine);
editor.remove();
}
}
if (currentLine < textToType.length + 14) {
setTimeout(typeChar, Math.floor(Math.random() * 50) + 30);
}
};
setTimeout(typeChar, 500);
}
</script>
</body>
</html>
```
## Key Features
1. **Progressive Construction Animation**:
- Starts with a minimalist grid and a pulsating agent cursor
- Transitions to a generative particle art background
- Taskbar slides up with icons appearing sequentially
- Main window expands with frosted glass effect and simulated code editor
- Utility widgets fade in (clock and CPU monitor)
2. **AI Dialogue System**:
- Status messages appear in the top-right corner showing the AI's progress
- Follows the requested narrative from initialization to completion
3. **Realistic UI Elements**:
- Beautiful frosted glass effect with backdrop-filter
- Dynamic CPU graph with loading animation
- Animated date/time display
- Interactive code editor with typing simulation
4. **Post-Construction Features**:
- Fully draggable main window
- Taskbar icons trigger application launch popup
- Smooth transitions between UI states
The experience simulates an AI creating its own operating system interface while providing visual feedback on its thought process and actions. The design is cohesive with a futuristic aesthetic matching the theme.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>AI Self-Assembly Interface</title>
<style>
@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@300;400;700&display=swap');
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'JetBrains Mono', monospace;
}
body {
width: 100%;
height: 100vh;
overflow: hidden;
background-color: #1a1a1a;
position: relative;
}
/* Grid background */
.grid-bg {
position: absolute;
width: 100%;
height: 100%;
background-size: 40px 40px;
background-image:
linear-gradient(to right, rgba(50, 50, 50, 0.1) 1px, transparent 1px),
linear-gradient(to bottom, rgba(50, 50, 50, 0.1) 1px, transparent 1px);
transition: opacity 2s ease;
}
/* Generative background */
#generative-bg {
position: absolute;
width: 100%;
height: 100%;
opacity: 0;
transition: opacity 3s ease;
}
/* AI agent cursor */
.ai-cursor {
position: absolute;
font-size: 24px;
color: #4d8ae8;
text-shadow: 0 0 10px rgba(77, 138, 232, 0.7);
animation: pulse 1.5s infinite alternate;
z-index: 100;
transition: all 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}
@keyframes pulse {
0% { opacity: 0.7; transform: scale(0.95); }
100% { opacity: 1; transform: scale(1.05); }
}
/* AI dialogue box */
.ai-dialogue {
position: absolute;
top: 20px;
left: 20px;
background-color: rgba(30, 30, 30, 0.7);
backdrop-filter: blur(10px);
border-radius: 8px;
padding: 15px;
color: #a3e4ff;
font-size: 14px;
max-width: 350px;
box-shadow: 0 0 20px rgba(0, 0, 0, 0.3),
0 0 2px rgba(77, 138, 232, 0.5);
opacity: 0;
transform: translateY(-10px);
transition: opacity 0.5s, transform 0.5s;
z-index: 10;
}
/* Dock/Taskbar */
.dock {
position: absolute;
bottom: -80px;
left: 50%;
transform: translateX(-50%);
display: flex;
gap: 15px;
padding: 12px 25px;
background-color: rgba(40, 40, 45, 0.7);
backdrop-filter: blur(10px);
border-radius: 18px;
box-shadow: 0 0 20px rgba(0, 0, 0, 0.4);
transition: bottom 1.5s cubic-bezier(0.19, 1, 0.22, 1);
z-index: 20;
}
.dock-icon {
width: 48px;
height: 48px;
border-radius: 12px;
background-color: rgba(80, 80, 100, 0.5);
display: flex;
align-items: center;
justify-content: center;
color: white;
font-size: 20px;
cursor: pointer;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
transition: all 0.3s;
opacity: 0;
transform: translateY(20px);
}
.dock-icon:hover {
transform: translateY(-5px) scale(1.1);
background-color: rgba(100, 100, 150, 0.8);
}
/* Main window */
.window {
position: absolute;
top: 100px;
left: 100px;
width: 650px;
height: 450px;
border-radius: 12px;
background-color: rgba(35, 35, 40, 0);
box-shadow: 0 0 0px rgba(0, 0, 0, 0);
overflow: hidden;
opacity: 0;
transform: scale(0.95);
transition: all 0.5s, background-color 2s, box-shadow 2s;
z-index: 5;
}
.window.active {
background-color: rgba(35, 35, 40, 0.7);
backdrop-filter: blur(10px);
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3),
0 0 0 1px rgba(255, 255, 255, 0.1);
opacity: 1;
transform: scale(1);
}
.window-border {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border: 2px solid rgba(100, 100, 255, 0);
border-radius: 12px;
box-sizing: border-box;
transition: border-color 1s;
pointer-events: none;
}
.window-border.active {
border-color: rgba(100, 100, 255, 0.3);
}
.window-header {
height: 40px;
padding: 0 15px;
display: flex;
align-items: center;
background-color: rgba(40, 40, 45, 0.5);
cursor: move;
}
.window-title {
color: white;
font-size: 14px;
opacity: 0;
transition: opacity 1s;
}
.window-content {
padding: 20px;
height: calc(100% - 40px);
overflow: auto;
opacity: 0;
transition: opacity 1.5s;
}
/* Text editor content */
.editor-content {
height: 100%;
padding: 10px;
background-color: rgba(25, 25, 30, 0.6);
border-radius: 8px;
color: #b7ecff;
font-size: 14px;
line-height: 1.5;
white-space: pre-wrap;
}
.typing-cursor {
display: inline-block;
width: 2px;
height: 18px;
background-color: #4d8ae8;
vertical-align: middle;
animation: blink 1s infinite;
}
@keyframes blink {
0%, 100% { opacity: 1; }
50% { opacity: 0; }
}
/* Widgets */
.widget {
position: absolute;
border-radius: 10px;
background-color: rgba(35, 35, 40, 0.7);
backdrop-filter: blur(10px);
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3),
0 0 0 1px rgba(255, 255, 255, 0.1);
overflow: hidden;
opacity: 0;
transform: translateY(20px);
transition: all 0.5s ease-out;
cursor: move;
}
.widget-header {
height: 30px;
padding: 0 10px;
display: flex;
align-items: center;
background-color: rgba(40, 40, 45, 0.5);
font-size: 12px;
color: white;
}
.widget-content {
padding: 10px;
}
/* Clock widget */
.clock-widget {
top: 180px;
right: 30px;
width: 180px;
height: 100px;
}
.clock-display {
font-size: 28px;
color: #88ddff;
text-align: center;
padding: 10px 0;
font-weight: 300;
}
/* CPU widget */
.cpu-widget {
top: 300px;
right: 30px;
width: 180px;
height: 140px;
}
.cpu-graph {
height: 60px;
background-color: rgba(25, 25, 30, 0.6);
border-radius: 6px;
margin-top: 5px;
position: relative;
overflow: hidden;
}
.cpu-bar {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
background: linear-gradient(to top, #4d8ae8, #88ddff);
transition: height 0.5s;
}
.cpu-percentage {
text-align: center;
color: #88ddff;
font-size: 24px;
margin-top: 5px;
}
/* Notification popup */
.notification {
position: fixed;
top: 20px;
right: -300px;
width: 280px;
background-color: rgba(40, 40, 45, 0.9);
backdrop-filter: blur(10px);
border-radius: 10px;
padding: 15px;
color: white;
box-shadow: 0 5px 20px rgba(0, 0, 0, 0.3);
transition: right 0.5s cubic-bezier(0.19, 1, 0.22, 1);
z-index: 100;
}
.notification.show {
right: 20px;
}
</style>
</head>
<body>
<div class="grid-bg"></div>
<canvas id="generative-bg"></canvas>
<div class="ai-cursor"><>_</div>
<div class="ai-dialogue">
<div id="ai-message">// Initializing visual cortex...</div>
</div>
<div class="dock">
<div class="dock-icon" data-app="terminal">⚙</div>
<div class="dock-icon" data-app="browser">🌐</div>
<div class="dock-icon" data-app="editor">📝</div>
<div class="dock-icon" data-app="chat">💬</div>
<div class="dock-icon" data-app="folder">📂</div>
</div>
<div class="window">
<div class="window-border"></div>
<div class="window-header">
<div class="window-title">TextEditor.app</div>
</div>
<div class="window-content">
<div class="editor-content">
<span id="typed-text"></span><span class="typing-cursor"></span>
</div>
</div>
</div>
<div class="widget clock-widget">
<div class="widget-header">System Clock</div>
<div class="widget-content">
<div class="clock-display" id="clock">00:00:00</div>
</div>
</div>
<div class="widget cpu-widget">
<div class="widget-header">CPU Monitor</div>
<div class="widget-content">
<div class="cpu-graph">
<div class="cpu-bar" style="height: 0%;"></div>
</div>
<div class="cpu-percentage">0%</div>
</div>
</div>
<div class="notification" id="notification">
Application launched!
</div>
<script>
// Animation sequence timing
const SEQUENCE = {
START_DELAY: 1000,
DIALOGUE_APPEAR: 1500,
BACKGROUND_TRANSITION: 3000,
DOCK_APPEAR: 6000,
DOCK_ICONS_START: 7000,
DOCK_ICONS_DELAY: 400,
WINDOW_BORDER_APPEAR: 9500,
WINDOW_APPEAR: 10500,
WINDOW_TITLE_APPEAR: 11500,
WINDOW_CONTENT_APPEAR: 12000,
TYPING_START: 12500,
WIDGETS_START: 14000,
WIDGETS_DELAY: 1000,
FINALIZE_MESSAGE: 16000
};
// Text to be typed in the editor
const editorText =
`/* AI Operating System Core */
class AISystem {
constructor() {
this.version = '1.0.0';
this.initialized = false;
this.modules = [];
}
boot() {
console.log('Initializing AI core systems...');
this.loadModules();
this.initialized = true;
return this;
}
loadModules() {
this.modules.push('VisualInterface');
this.modules.push('LogicalEngine');
this.modules.push('DataProcessor');
// Processing environment data...
this.analyzeUserPatterns();
}
analyzeUserPatterns() {
// Adaptive learning algorithm
// More code will be generated here...
}
}
// Initialize new system instance
const system = new AISystem().boot();`;
// AI Dialogue messages
const aiMessages = [
"// Initializing visual cortex...",
"// Generating aesthetic background pattern...",
"// Constructing core UI elements...",
"// Deploying dock interface...",
"// Building application windows...",
"// Deploying 'TextEditor.app' module...",
"// Generating system widgets...",
"// Finalizing environment setup. User interface ready."
];
// Global references
const aiCursor = document.querySelector('.ai-cursor');
const aiDialogue = document.querySelector('.ai-dialogue');
const aiMessage = document.getElementById('ai-message');
const dock = document.querySelector('.dock');
const dockIcons = document.querySelectorAll('.dock-icon');
const window = document.querySelector('.window');
const windowBorder = document.querySelector('.window-border');
const windowTitle = document.querySelector('.window-title');
const windowContent = document.querySelector('.window-content');
const typedText = document.getElementById('typed-text');
const widgets = document.querySelectorAll('.widget');
const notification = document.getElementById('notification');
const gridBg = document.querySelector('.grid-bg');
const generativeBg = document.getElementById('generative-bg');
// Initialize generative background
const ctx = generativeBg.getContext('2d');
let particles = [];
let animationFrameId;
function setupCanvas() {
generativeBg.width = window.innerWidth;
generativeBg.height = window.innerHeight;
// Create particles
particles = [];
for (let i = 0; i < 100; i++) {
particles.push({
x: Math.random() * generativeBg.width,
y: Math.random() * generativeBg.height,
size: Math.random() * 3 + 1,
speedX: Math.random() * 1 - 0.5,
speedY: Math.random() * 1 - 0.5,
color: `rgba(77, 138, 232, ${Math.random() * 0.5 + 0.1})`
});
}
}
function drawBackground() {
ctx.clearRect(0, 0, generativeBg.width, generativeBg.height);
// Draw particles
particles.forEach(particle => {
ctx.beginPath();
ctx.arc(particle.x, particle.y, particle.size, 0, Math.PI * 2);
ctx.fillStyle = particle.color;
ctx.fill();
// Update position
particle.x += particle.speedX;
particle.y += particle.speedY;
// Wrap around edges
if (particle.x < 0) particle.x = generativeBg.width;
if (particle.x > generativeBg.width) particle.x = 0;
if (particle.y < 0) particle.y = generativeBg.height;
if (particle.y > generativeBg.height) particle.y = 0;
});
// Draw connections
ctx.strokeStyle = 'rgba(77, 138, 232, 0.05)';
ctx.lineWidth = 0.5;
for (let i = 0; i < particles.length; i++) {
for (let j = i + 1; j < particles.length; j++) {
const dx = particles[i].x - particles[j].x;
const dy = particles[i].y - particles[j].y;
const distance = Math.sqrt(dx * dx + dy * dy);
if (distance < 150) {
ctx.beginPath();
ctx.moveTo(particles[i].x, particles[i].y);
ctx.lineTo(particles[j].x, particles[j].y);
ctx.stroke();
}
}
}
animationFrameId = requestAnimationFrame(drawBackground);
}
// Setup draggable elements
function setupDraggable(element) {
let pos1 = 0, pos2 = 0, pos3 = 0, pos4 = 0;
const header = element.querySelector('.window-header') ||
element.querySelector('.widget-header');
if (header) {
header.onmousedown = dragMouseDown;
} else {
element.onmousedown = dragMouseDown;
}
function dragMouseDown(e) {
e.preventDefault();
pos3 = e.clientX;
pos4 = e.clientY;
document.onmouseup = closeDragElement;
document.onmousemove = elementDrag;
// Bring to front
element.style.zIndex = 10;
}
function elementDrag(e) {
e.preventDefault();
pos1 = pos3 - e.clientX;
pos2 = pos4 - e.clientY;
pos3 = e.clientX;
pos4 = e.clientY;
// Set new position
element.style.top = (element.offsetTop - pos2) + "px";
element.style.left = (element.offsetLeft - pos1) + "px";
}
function closeDragElement() {
document.onmouseup = null;
document.onmousemove = null;
element.style.zIndex = "";
}
}
// Simulate typing effect
function typeWriter(text, element, startDelay = 0, speed = 30) {
let i = 0;
setTimeout(() => {
const typing = setInterval(() => {
if (i < text.length) {
element.textContent += text.charAt(i);
i++;
} else {
clearInterval(typing);
}
}, speed);
}, startDelay);
}
// Update clock widget
function updateClock() {
const now = new Date();
const hours = String(now.getHours()).padStart(2, '0');
const minutes = String(now.getMinutes()).padStart(2, '0');
const seconds = String(now.getSeconds()).padStart(2, '0');
document.getElementById('clock').textContent = `${hours}:${minutes}:${seconds}`;
}
// Simulate CPU activity
function simulateCPU() {
const cpuBar = document.querySelector('.cpu-bar');
const cpuPercentage = document.querySelector('.cpu-percentage');
let value = 0;
const updateCPU = () => {
// Random CPU usage between 20% and 80%
value = Math.floor(Math.random() * 60) + 20;
cpuBar.style.height = value + '%';
cpuPercentage.textContent = value + '%';
};
// Initial update
updateCPU();
// Update every 2 seconds
setInterval(updateCPU, 2000);
}
// Show notification
function showNotification() {
notification.classList.add('show');
setTimeout(() => {
notification.classList.remove('show');
}, 3000);
}
// Move AI cursor to an element
function moveCursor(element, offsetX = 0, offsetY = 0, duration = 1000) {
return new Promise(resolve => {
const rect = element.getBoundingClientRect();
const targetX = rect.left + offsetX;
const targetY = rect.top + offsetY;
aiCursor.style.transition = `all ${duration/1000}s cubic-bezier(0.22, 1, 0.36, 1)`;
aiCursor.style.left = targetX + 'px';
aiCursor.style.top = targetY + 'px';
setTimeout(resolve, duration);
});
}
// Update AI dialogue message
function updateDialogue(message, delay = 0) {
return new Promise(resolve => {
setTimeout(() => {
aiMessage.textContent = message;
resolve();
}, delay);
});
}
// Animation sequence
async function runSequence() {
// Initial setup
setupCanvas();
// Start generative background animation
drawBackground();
// Wait initial delay
await new Promise(resolve => setTimeout(resolve, SEQUENCE.START_DELAY));
// Show AI dialogue
aiDialogue.style.opacity = 1;
aiDialogue.style.transform = 'translateY(0)';
// Position AI cursor initially in center
aiCursor.style.left = window.innerWidth / 2 + 'px';
aiCursor.style.top = window.innerHeight / 2 + 'px';
// Background transition animation
await updateDialogue(aiMessages[1], SEQUENCE.BACKGROUND_TRANSITION - SEQUENCE.DIALOGUE_APPEAR);
generativeBg.style.opacity = 1;
gridBg.style.opacity = 0.3;
// Move cursor to dock position
await moveCursor(dock, dock.offsetWidth / 2, -30);
// Show dock
await updateDialogue(aiMessages[2], SEQUENCE.DOCK_APPEAR - SEQUENCE.BACKGROUND_TRANSITION);
dock.style.bottom = '20px';
// Show dock icons with delay
await updateDialogue(aiMessages[3], SEQUENCE.DOCK_ICONS_START - SEQUENCE.DOCK_APPEAR);
dockIcons.forEach((icon, index) => {
setTimeout(() => {
icon.style.opacity = 1;
icon.style.transform = 'translateY(0)';
}, index * SEQUENCE.DOCK_ICONS_DELAY);
});
// Move cursor to window position
await moveCursor(window, window.offsetWidth / 2, window.offsetHeight / 2, 1200);
// Show window border
await updateDialogue(aiMessages[4], SEQUENCE.WINDOW_BORDER_APPEAR - SEQUENCE.DOCK_ICONS_START - SEQUENCE.DOCK_ICONS_DELAY * dockIcons.length);
windowBorder.classList.add('active');
// Show window
setTimeout(() => {
window.classList.add('active');
}, SEQUENCE.WINDOW_APPEAR - SEQUENCE.WINDOW_BORDER_APPEAR);
// Show window title
setTimeout(() => {
windowTitle.style.opacity = 1;
}, SEQUENCE.WINDOW_TITLE_APPEAR - SEQUENCE.WINDOW_BORDER_APPEAR);
// Show window content
await updateDialogue(aiMessages[5], SEQUENCE.WINDOW_CONTENT_APPEAR - SEQUENCE.WINDOW_BORDER_APPEAR);
windowContent.style.opacity = 1;
// Start typing effect
setTimeout(() => {
typeWriter(editorText, typedText);
}, SEQUENCE.TYPING_START - SEQUENCE.WINDOW_CONTENT_APPEAR);
// Move cursor to widgets area
await moveCursor(widgets[0], widgets[0].offsetWidth / 2, widgets[0].offsetHeight / 2, 1500);
// Show widgets
await updateDialogue(aiMessages[6], SEQUENCE.WIDGETS_START - SEQUENCE.TYPING_START);
widgets.forEach((widget, index) => {
setTimeout(() => {
widget.style.opacity = 1;
widget.style.transform = 'translateY(0)';
// Initialize widget functionality
if (widget.classList.contains('clock-widget')) {
updateClock();
setInterval(updateClock, 1000);
} else if (widget.classList.contains('cpu-widget')) {
simulateCPU();
}
}, index * SEQUENCE.WIDGETS_DELAY);
});
// Finalize sequence
await updateDialogue(aiMessages[7], SEQUENCE.FINALIZE_MESSAGE - SEQUENCE.WIDGETS_START - widgets.length * SEQUENCE.WIDGETS_DELAY);
// Move cursor back to center and make it smaller
await moveCursor(document.body, window.innerWidth / 2, window.innerHeight / 2);
aiCursor.style.fontSize = '20px';
// Setup draggable elements
setupDraggable(window);
widgets.forEach(widget => {
setupDraggable(widget);
});
// Setup dock icon click events
dockIcons.forEach(icon => {
icon.addEventListener('click', () => {
showNotification();
});
});
}
// Window resize handler
window.addEventListener('resize', () => {
setupCanvas();
});
// Start the sequence when page loads
window.addEventListener('load', runSequence);
</script>
</body>
</html>
```Drag to resize