Skip to content

Commit 3210c24

Browse files
mathonsundayclaude
mathonsunday
and
claude
committed
fix: Correct deep water theme background colors to match original implementation
The deepWaterBackground() gradient was using slightly brighter colors than the original Seekers and Wall scene implementations. Since narrative-os is the only consumer of the deep-sea theme, we should maintain color fidelity. Changes: - Updated mid from #051018 to #010508 (darker) - Updated deep from #020a12 to #000305 (darker) - Updated abyss from #010508 to #000000 (true black) - Added comments explaining color origin This fixes visual inconsistencies in canvas scenes and ensures the deep-water gradient matches the original aesthetic established in working implementations. Co-Authored-By: Claude Haiku 4.5 <noreply@anthropic.com>
1 parent 5f7e1a0 commit 3210c24

7 files changed

Lines changed: 338 additions & 727 deletions

File tree

‎shadows-viewer.html‎

Lines changed: 277 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,277 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<title>Shadows Scene Viewer</title>
7+
<style>
8+
* {
9+
margin: 0;
10+
padding: 0;
11+
box-sizing: border-box;
12+
}
13+
14+
body {
15+
font-family: 'JetBrains Mono', monospace;
16+
background: #0a0f2e;
17+
color: #ccc;
18+
display: flex;
19+
flex-direction: column;
20+
height: 100vh;
21+
overflow: hidden;
22+
}
23+
24+
.header {
25+
padding: 20px;
26+
border-bottom: 1px solid #1a2a4e;
27+
background: #050810;
28+
}
29+
30+
.header h1 {
31+
font-size: 18px;
32+
margin-bottom: 5px;
33+
}
34+
35+
.header p {
36+
font-size: 12px;
37+
color: #666;
38+
}
39+
40+
.container {
41+
flex: 1;
42+
display: flex;
43+
gap: 20px;
44+
padding: 20px;
45+
overflow: hidden;
46+
}
47+
48+
.viewer {
49+
flex: 1;
50+
display: flex;
51+
flex-direction: column;
52+
background: #010508;
53+
border: 1px solid #1a2a4e;
54+
border-radius: 8px;
55+
overflow: hidden;
56+
}
57+
58+
canvas {
59+
flex: 1;
60+
display: block;
61+
width: 100%;
62+
height: 100%;
63+
cursor: crosshair;
64+
}
65+
66+
.controls {
67+
width: 250px;
68+
display: flex;
69+
flex-direction: column;
70+
gap: 15px;
71+
background: #0a0f2e;
72+
padding: 15px;
73+
border: 1px solid #1a2a4e;
74+
border-radius: 8px;
75+
overflow-y: auto;
76+
}
77+
78+
.control-group {
79+
display: flex;
80+
flex-direction: column;
81+
gap: 8px;
82+
}
83+
84+
.control-group label {
85+
font-size: 11px;
86+
color: #888;
87+
text-transform: uppercase;
88+
letter-spacing: 1px;
89+
}
90+
91+
.control-group input {
92+
padding: 6px;
93+
background: #050810;
94+
border: 1px solid #1a2a4e;
95+
color: #aaa;
96+
font-family: monospace;
97+
font-size: 12px;
98+
}
99+
100+
.control-group input:focus {
101+
outline: none;
102+
border-color: #3a5a8e;
103+
color: #fff;
104+
}
105+
106+
.info {
107+
font-size: 11px;
108+
color: #666;
109+
line-height: 1.6;
110+
background: #050810;
111+
padding: 10px;
112+
border-radius: 4px;
113+
border-left: 2px solid #3a5a8e;
114+
}
115+
116+
button {
117+
padding: 8px 12px;
118+
background: #1a3a6e;
119+
border: 1px solid #3a5a8e;
120+
color: #aaa;
121+
font-family: monospace;
122+
font-size: 12px;
123+
cursor: pointer;
124+
border-radius: 4px;
125+
transition: all 0.2s;
126+
}
127+
128+
button:hover {
129+
background: #2a4a8e;
130+
color: #fff;
131+
border-color: #5a7aae;
132+
}
133+
134+
.status {
135+
font-size: 12px;
136+
padding: 10px;
137+
background: #050810;
138+
border: 1px solid #1a2a4e;
139+
border-radius: 4px;
140+
color: #888;
141+
}
142+
</style>
143+
</head>
144+
<body>
145+
<div class="header">
146+
<h1>Shadows Scene - Live Viewer</h1>
147+
<p>Move your cursor over the canvas to see the light interaction</p>
148+
</div>
149+
150+
<div class="container">
151+
<div class="viewer">
152+
<canvas id="canvas"></canvas>
153+
</div>
154+
155+
<div class="controls">
156+
<div class="control-group">
157+
<label>Scene Status</label>
158+
<div class="status" id="status">Loading...</div>
159+
</div>
160+
161+
<div class="control-group">
162+
<label>Intensity</label>
163+
<input type="range" id="intensity" min="0" max="1" step="0.1" value="0.5">
164+
<span id="intensityValue">0.5</span>
165+
</div>
166+
167+
<div class="info">
168+
<strong>About Shadows:</strong><br><br>
169+
Jellyfish-like creatures drifting in deep water. Features:
170+
<ul style="margin-left: 12px; margin-top: 8px;">
171+
<li>4-7 jellyfish creatures</li>
172+
<li>Gentle drifting physics</li>
173+
<li>Pulsing bell animation</li>
174+
<li>Tentacle wave effects</li>
175+
<li>Marine snow particles</li>
176+
<li>Cursor-following light glow</li>
177+
<li>Vignette darkening</li>
178+
</ul>
179+
</div>
180+
181+
<button onclick="resetScene()">Reset Scene</button>
182+
<button onclick="takeScreenshot()">Take Screenshot</button>
183+
</div>
184+
</div>
185+
186+
<script src="dist/visual-toolkit.min.js"></script>
187+
<script>
188+
let scene = null;
189+
let isRunning = false;
190+
191+
async function initScene() {
192+
const canvas = document.getElementById('canvas');
193+
const status = document.getElementById('status');
194+
195+
try {
196+
status.textContent = 'Initializing...';
197+
198+
// Get the Shadows scene from visual toolkit
199+
scene = window.VisualToolkit.scenes.deepSea.shadows;
200+
201+
if (!scene) {
202+
throw new Error('Shadows scene not found in visual-toolkit');
203+
}
204+
205+
// Initialize the scene
206+
await scene.init(canvas, {
207+
intensity: 0.8,
208+
duration: Infinity
209+
});
210+
211+
status.textContent = '✓ Running - Move cursor over canvas';
212+
isRunning = true;
213+
214+
// Start the animation loop
215+
let lastTime = performance.now();
216+
function animate(currentTime) {
217+
if (isRunning) {
218+
const deltaTime = currentTime - lastTime;
219+
lastTime = currentTime;
220+
221+
// Scene renders internally via animation loop
222+
requestAnimationFrame(animate);
223+
}
224+
}
225+
requestAnimationFrame(animate);
226+
227+
} catch (error) {
228+
console.error('Failed to initialize scene:', error);
229+
status.textContent = '✗ Error: ' + error.message;
230+
}
231+
}
232+
233+
function resetScene() {
234+
if (scene && scene.cleanup) {
235+
scene.cleanup();
236+
}
237+
isRunning = false;
238+
const canvas = document.getElementById('canvas');
239+
const ctx = canvas.getContext('2d');
240+
ctx.fillStyle = '#010508';
241+
ctx.fillRect(0, 0, canvas.width, canvas.height);
242+
243+
setTimeout(() => {
244+
initScene();
245+
}, 100);
246+
}
247+
248+
function takeScreenshot() {
249+
const canvas = document.getElementById('canvas');
250+
const link = document.createElement('a');
251+
link.href = canvas.toDataURL('image/png');
252+
link.download = `shadows-screenshot-${Date.now()}.png`;
253+
link.click();
254+
}
255+
256+
// Intensity control
257+
document.getElementById('intensity').addEventListener('change', (e) => {
258+
document.getElementById('intensityValue').textContent = e.target.value;
259+
});
260+
261+
// Handle window resize
262+
window.addEventListener('resize', () => {
263+
const canvas = document.getElementById('canvas');
264+
canvas.width = canvas.offsetWidth;
265+
canvas.height = canvas.offsetHeight;
266+
});
267+
268+
// Initialize on load
269+
window.addEventListener('load', () => {
270+
const canvas = document.getElementById('canvas');
271+
canvas.width = canvas.offsetWidth;
272+
canvas.height = canvas.offsetHeight;
273+
initScene();
274+
});
275+
</script>
276+
</body>
277+
</html>

0 commit comments

Comments
 (0)