← back to Model Arena
data/artifacts/1c80df76af60/qwen3-14b.html
448 lines
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Midnight Woodland Jam</title>
<style>
:root {
--bg: #0d0d0f;
--surface: #17171c;
--text: #f5f2ea;
--muted: #8a8578;
--accent: #c9a961;
--accent2: #7d6a45;
--shadow: 0 8px 24px rgba(0,0,0,0.12);
--glow: 0 0 24px var(--accent)35%;
--card-radius: 14px;
--card-gap: 24px;
--font-display: 'Didot', 'Bodoni MT', 'Playfair Display', Georgia, serif;
--font-body: -apple-system, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
--scale-h1: 50px;
--scale-h2: 38px;
--scale-h3: 28px;
--scale-lead: 21px;
--scale-body: 16px;
--scale-caption: 12px;
}
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
html, body {
background: var(--bg);
color: var(--text);
font-family: var(--font-body);
font-size: var(--scale-body);
height: 100%;
overflow: hidden;
scroll-behavior: smooth;
}
body {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
min-height: 100vh;
position: relative;
}
.canvas {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
overflow: hidden;
}
.scene {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none;
}
.group {
position: absolute;
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
}
.element {
position: absolute;
animation: fadeUp 0.7s cubic-bezier(.22,1,.36,1) both;
}
.speaker {
position: absolute;
top: 50%;
left: 50%;
width: 120px;
height: 120px;
background: linear-gradient(135deg, var(--accent), var(--accent2));
border-radius: 50%;
box-shadow: var(--glow);
transform: translate(-50%, -50%);
}
.light {
position: absolute;
width: 60px;
height: 60px;
border-radius: 50%;
background: radial-gradient(circle, var(--accent) 0%, var(--accent2) 100%);
box-shadow: var(--glow);
}
.controls {
position: absolute;
top: 24px;
left: 24px;
z-index: 10;
font-family: var(--font-body);
font-size: var(--scale-caption);
letter-spacing: 0.15em;
text-transform: uppercase;
color: var(--muted);
}
.controls label {
display: block;
margin-bottom: 8px;
}
.controls select, .controls input[type="range"], .controls input[type="checkbox"] {
margin-bottom: 16px;
width: 100%;
background: var(--surface);
color: var(--text);
border: 1px solid var(--muted);
border-radius: var(--card-radius);
padding: 8px 12px;
font-size: var(--scale-body);
}
.curator-note {
position: absolute;
bottom: 24px;
left: 24px;
background: var(--surface);
padding: 24px;
border-radius: var(--card-radius);
box-shadow: var(--shadow);
font-family: var(--font-display);
font-size: var(--scale-h3);
color: var(--accent);
max-width: 600px;
}
@keyframes fadeUp {
from { opacity: 0; transform: translateY(28px); }
to { opacity: 1; transform: translateY(0); }
}
@keyframes drift {
0% { background-position: 0% 50%; }
100% { background-position: 100% 50%; }
}
.bg {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(120deg, var(--accent) 0%, var(--accent2) 100%);
background-size: 400% 400%;
animation: drift 18s linear infinite;
z-index: 0;
}
.particle {
position: absolute;
width: 6px;
height: 6px;
background: var(--accent);
border-radius: 50%;
opacity: 0.6;
animation: pulse 2s infinite ease-in-out;
}
@keyframes pulse {
0%, 100% { transform: scale(1); opacity: 0.6; }
50% { transform: scale(1.2); opacity: 0.3; }
}
</style>
</head>
<body>
<div class="canvas">
<div class="bg"></div>
<div class="scene" id="scene">
<div class="group" id="group0"></div>
<div class="group" id="group1"></div>
<div class="group" id="group2"></div>
<div class="speaker" id="speaker"></div>
</div>
</div>
<div class="controls">
<label for="movement">Movement</label>
<select id="movement">
<option value="gathering">Gathering</option>
<option value="deep-jam">Deep Jam</option>
<option value="dawn-return">Dawn Return</option>
</select>
<label for="tempo">Visual Tempo</label>
<input type="range" id="tempo" min="0.5" max="2" step="0.1" value="1">
<label for="isolate">Isolate</label>
<select id="isolate">
<option value="all">All</option>
<option value="humans">Humans</option>
<option value="animals">Animals</option>
</select>
<label for="pause">Pause</label>
<input type="checkbox" id="pause">
<label for="reduce-motion">Reduce Motion</label>
<input type="checkbox" id="reduce-motion">
</div>
<div class="curator-note">
<h3>Curator's Note</h3>
<p>This is an artistic rhythm simulation. It responds to visual tempo and movement, not actual audio input. Explore the choreography of midnight in a woodland jam.</p>
</div>
<script>
const scene = document.getElementById('scene');
const speaker = document.getElementById('speaker');
const movementSelect = document.getElementById('movement');
const tempoSlider = document.getElementById('tempo');
const isolateSelect = document.getElementById('isolate');
const pauseCheckbox = document.getElementById('pause');
const reduceMotionCheckbox = document.getElementById('reduce-motion');
const groups = [document.getElementById('group0'), document.getElementById('group1'), document.getElementById('group2')];
const elements = [];
const createHuman = () => {
const el = document.createElement('div');
el.classList.add('element', 'human');
el.style.left = `${Math.random() * 100}%`;
el.style.top = `${Math.random() * 100}%`;
el.style.animationDuration = `${Math.random() * 1 + 0.5}s`;
el.style.animationDelay = `${Math.random() * 1}s`;
el.style.animationName = `spin, bend, clap, drift`;
el.style.animationIterationCount = 'infinite';
el.style.animationTimingFunction = 'ease-in-out';
el.style.animationDirection = 'alternate';
el.style.opacity = Math.random();
el.style.transform = `scale(${Math.random() * 0.4 + 0.3})`;
el.style.zIndex = Math.floor(Math.random() * 10) + 1;
return el;
};
const createAnimal = () => {
const el = document.createElement('div');
el.classList.add('element', 'animal');
el.style.left = `${Math.random() * 100}%`;
el.style.top = `${Math.random() * 100}%`;
el.style.animationDuration = `${Math.random() * 2 + 1}s`;
el.style.animationDelay = `${Math.random() * 2}s`;
el.style.animationName = `step, head-turn, rock, loop-run`;
el.style.animationIterationCount = 'infinite';
el.style.animationTimingFunction = 'ease-in-out';
el.style.animationDirection = 'alternate';
el.style.opacity = Math.random();
el.style.transform = `scale(${Math.random() * 0.3 + 0.2})`;
el.style.zIndex = Math.floor(Math.random() * 10) + 1;
return el;
};
const createFrog = () => {
const el = document.createElement('div');
el.classList.add('element', 'frog');
el.style.left = `${Math.random() * 100}%`;
el.style.top = `${Math.random() * 100}%`;
el.style.animationDuration = `${Math.random() * 1 + 0.5}s`;
el.style.animationDelay = `${Math.random() * 1}s`;
el.style.animationName = `bounce`;
el.style.animationIterationCount = 'infinite';
el.style.animationTimingFunction = 'ease-in-out';
el.style.animationDirection = 'alternate';
el.style.opacity = Math.random();
el.style.transform = `scale(${Math.random() * 0.2 + 0.1})`;
el.style.zIndex = Math.floor(Math.random() * 10) + 1;
return el;
};
const createMushroom = () => {
const el = document.createElement('div');
el.classList.add('element', 'mushroom');
el.style.left = `${Math.random() * 100}%`;
el.style.top = `${Math.random() * 100}%`;
el.style.animationDuration = `${Math.random() * 2 + 1}s`;
el.style.animationDelay = `${Math.random() * 1}s`;
el.style.animationName = `glow`;
el.style.animationIterationCount = 'infinite';
el.style.animationTimingFunction = 'ease-in-out';
el.style.opacity = Math.random();
el.style.transform = `scale(${Math.random() * 0.4 + 0.2})`;
el.style.zIndex = Math.floor(Math.random() * 10) + 1;
return el;
};
const createFirefly = () => {
const el = document.createElement('div');
el.classList.add('element', 'firefly');
el.style.left = `${Math.random() * 100}%`;
el.style.top = `${Math.random() * 100}%`;
el.style.animationDuration = `${Math.random() * 1 + 0.5}s`;
el.style.animationDelay = `${Math.random() * 1}s`;
el.style.animationName = `fly, spiral`;
el.style.animationIterationCount = 'infinite';
el.style.animationTimingFunction = 'ease-in-out';
el.style.opacity = Math.random();
el.style.transform = `scale(${Math.random() * 0.2 + 0.1})`;
el.style.zIndex = Math.floor(Math.random() * 10) + 1;
return el;
};
const addElements = (group, count, creator) => {
for (let i = 0; i < count; i++) {
const el = creator();
group.appendChild(el);
elements.push(el);
}
};
addElements(groups[0], 10, createHuman);
addElements(groups[1], 8, createAnimal);
addElements(groups[1], 2, createFrog);
addElements(groups[2], 4, createMushroom);
addElements(groups[2], 10, createFirefly);
const createParticle = (x, y) => {
const el = document.createElement('div');
el.classList.add('particle');
el.style.left = `${x}%`;
el.style.top = `${y}%`;
scene.appendChild(el);
return el;
};
const particles = [];
for (let i = 0; i < 50; i++) {
const x = Math.random() * 100;
const y = Math.random() * 100;
const el = createParticle(x, y);
particles.push(el);
}
const animations = {
'gathering': {
palette: '#c9a961 #7d6a45',
density: 0.8,
particleSpeed: 0.5
},
'deep-jam': {
palette: '#ff2e88 #00e5ff',
density: 1.2,
particleSpeed: 1.2
},
'dawn-return': {
palette: '#e0a458 #c65f38',
density: 0.6,
particleSpeed: 0.3
}
};
let currentMovement = 'gathering';
let currentDensity = 0.8;
let currentParticleSpeed = 0.5;
let isPaused = false;
let isReducedMotion = false;
const update = () => {
if (isPaused || isReducedMotion) {
document.querySelectorAll('.element').forEach(el => {
el.style.animationPlayState = 'paused';
el.style.pointerEvents = 'none';
});
return;
}
document.querySelectorAll('.element').forEach(el => {
el.style.animationPlayState = 'running';
el.style.pointerEvents = 'auto';
});
const density = animations[currentMovement].density;
const particleSpeed = animations[currentMovement].particleSpeed;
elements.forEach(el => {
const opacity = Math.random() * density;
el.style.opacity = opacity;
});
particles.forEach(p => {
p.style.animationDuration = `${particleSpeed}s`;
});
};
const applyIsolation = (type) => {
elements.forEach(el => {
if (type === 'all') {
el.style.display = 'block';
} else if (type === 'humans' && el.classList.contains('human')) {
el.style.display = 'block';
} else if (type === 'animals' && el.classList.contains('animal')) {
el.style.display = 'block';
} else {
el.style.display = 'none';
}
});
};
movementSelect.addEventListener('change', () => {
currentMovement = movementSelect.value;
update();
});
tempoSlider.addEventListener('input', () => {
const speed = tempoSlider.value;
document.querySelectorAll('.element').forEach(el => {
el.style.animationDuration = `${speed}s`;
});
});
isolateSelect.addEventListener('change', () => {
applyIsolation(isolateSelect.value);
});
pauseCheckbox.addEventListener('change', () => {
isPaused = pauseCheckbox.checked;
update();
});
reduceMotionCheckbox.addEventListener('change', () => {
isReducedMotion = reduceMotionCheckbox.checked;
update();
});
// Initial setup
update();
</script>
</body>
</html>