Hugging Face's logo

Spaces:
benner3000
/
test
Running

App Files Community
benner3000 commited on
Commit
b1ae6b5
·
verified ·
1 Parent(s): f0dd5e1

Add 3 files

Browse files
Files changed (3) hide show
  1. README.md +7 -5
  2. index.html +593 -19
  3. prompts.txt +2 -0
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Test
3
- emoji: 🏃
4
- colorFrom: gray
5
- colorTo: green
6
  sdk: static
7
  pinned: false
 
 
8
  ---
9
 
10
- Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
 
1
  ---
2
+ title: test
3
+ emoji: 🐳
4
+ colorFrom: blue
5
+ colorTo: purple
6
  sdk: static
7
  pinned: false
8
+ tags:
9
+ - deepsite
10
  ---
11
 
12
+ Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
index.html CHANGED
@@ -1,19 +1,593 @@
1
- <!doctype html>
2
- <html>
3
- <head>
4
- <meta charset="utf-8" />
5
- <meta name="viewport" content="width=device-width" />
6
- <title>My static Space</title>
7
- <link rel="stylesheet" href="style.css" />
8
- </head>
9
- <body>
10
- <div class="card">
11
- <h1>Welcome to your static Space!</h1>
12
- <p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
13
- <p>
14
- Also don't forget to check the
15
- <a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
16
- </p>
17
- </div>
18
- </body>
19
- </html>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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>Interactive Mesh Gradient Creator</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js"></script>
9
+ <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;700&display=swap">
10
+ <style>
11
+ :root {
12
+ --dark-gray: #4B4B4B;
13
+ --light-gray: #DDDDDD;
14
+ --medium-blue: #3B7AF0;
15
+ --light-blue: #69A3FF;
16
+ --pale-blue: #A8D8F0;
17
+ --mint-green: #8CD3A7;
18
+ --lighter-mint: #B6E2C8;
19
+ --very-pale-mint: #DAF2E1;
20
+ --pale-peach: #F0D4A8;
21
+ --light-beige: #F0E1C8;
22
+ --off-white: #F5F5F7;
23
+ }
24
+
25
+ body {
26
+ font-family: 'Inter', sans-serif;
27
+ margin: 0;
28
+ padding: 0;
29
+ overflow: hidden;
30
+ background-color: #000;
31
+ }
32
+
33
+ #gradient-container {
34
+ position: absolute;
35
+ top: 0;
36
+ left: 0;
37
+ width: 100%;
38
+ height: 100%;
39
+ z-index: 0;
40
+ }
41
+
42
+ canvas {
43
+ display: block;
44
+ width: 100%;
45
+ height: 100%;
46
+ }
47
+
48
+ .control-panel {
49
+ position: fixed;
50
+ top: 0;
51
+ right: 0;
52
+ width: 320px;
53
+ height: 100vh;
54
+ background-color: rgba(0, 0, 0, 0.85);
55
+ backdrop-filter: blur(10px);
56
+ z-index: 10;
57
+ padding: 20px;
58
+ box-sizing: border-box;
59
+ overflow-y: auto;
60
+ transition: transform 0.3s ease;
61
+ color: white;
62
+ box-shadow: -5px 0 15px rgba(0, 0, 0, 0.3);
63
+ }
64
+
65
+ .mobile .control-panel {
66
+ transform: translateX(100%);
67
+ }
68
+
69
+ .mobile .control-panel.open {
70
+ transform: translateX(0);
71
+ }
72
+
73
+ .panel-toggle {
74
+ position: fixed;
75
+ right: 20px;
76
+ top: 20px;
77
+ z-index: 20;
78
+ background-color: var(--medium-blue);
79
+ color: white;
80
+ border: none;
81
+ width: 40px;
82
+ height: 40px;
83
+ border-radius: 50%;
84
+ display: flex;
85
+ align-items: center;
86
+ justify-content: center;
87
+ cursor: pointer;
88
+ box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
89
+ }
90
+
91
+ .color-preview {
92
+ width: 24px;
93
+ height: 24px;
94
+ border-radius: 4px;
95
+ display: inline-block;
96
+ margin-right: 8px;
97
+ vertical-align: middle;
98
+ border: 1px solid rgba(255, 255, 255, 0.2);
99
+ }
100
+
101
+ .slider-container {
102
+ margin-bottom: 15px;
103
+ }
104
+
105
+ .slider-label {
106
+ display: flex;
107
+ justify-content: space-between;
108
+ margin-bottom: 5px;
109
+ font-size: 14px;
110
+ }
111
+
112
+ input[type="range"] {
113
+ width: 100%;
114
+ height: 6px;
115
+ -webkit-appearance: none;
116
+ background: rgba(255, 255, 255, 0.1);
117
+ border-radius: 3px;
118
+ outline: none;
119
+ }
120
+
121
+ input[type="range"]::-webkit-slider-thumb {
122
+ -webkit-appearance: none;
123
+ width: 16px;
124
+ height: 16px;
125
+ background: var(--medium-blue);
126
+ border-radius: 50%;
127
+ cursor: pointer;
128
+ }
129
+
130
+ .btn {
131
+ background-color: var(--medium-blue);
132
+ color: white;
133
+ border: none;
134
+ padding: 10px 15px;
135
+ border-radius: 6px;
136
+ cursor: pointer;
137
+ font-weight: 500;
138
+ font-size: 14px;
139
+ transition: background-color 0.2s;
140
+ display: inline-flex;
141
+ align-items: center;
142
+ justify-content: center;
143
+ }
144
+
145
+ .btn:hover {
146
+ background-color: var(--light-blue);
147
+ }
148
+
149
+ .btn svg {
150
+ margin-right: 8px;
151
+ }
152
+
153
+ .btn-group {
154
+ display: flex;
155
+ gap: 8px;
156
+ margin-bottom: 15px;
157
+ }
158
+
159
+ .btn-group .btn {
160
+ flex: 1;
161
+ }
162
+
163
+ .btn.active {
164
+ background-color: var(--light-blue);
165
+ }
166
+
167
+ .section-title {
168
+ font-size: 16px;
169
+ font-weight: 700;
170
+ margin: 20px 0 10px;
171
+ padding-bottom: 5px;
172
+ border-bottom: 1px solid rgba(255, 255, 255, 0.1);
173
+ }
174
+
175
+ .color-option {
176
+ display: flex;
177
+ align-items: center;
178
+ margin-bottom: 8px;
179
+ cursor: pointer;
180
+ padding: 6px;
181
+ border-radius: 4px;
182
+ transition: background-color 0.2s;
183
+ }
184
+
185
+ .color-option:hover {
186
+ background-color: rgba(255, 255, 255, 0.1);
187
+ }
188
+
189
+ .color-option.active {
190
+ background-color: rgba(59, 122, 240, 0.3);
191
+ }
192
+
193
+ .color-grid {
194
+ display: grid;
195
+ grid-template-columns: repeat(2, 1fr);
196
+ gap: 8px;
197
+ }
198
+
199
+ .recording-indicator {
200
+ display: inline-block;
201
+ width: 12px;
202
+ height: 12px;
203
+ background-color: red;
204
+ border-radius: 50%;
205
+ margin-right: 8px;
206
+ animation: pulse 1.5s infinite;
207
+ }
208
+
209
+ @keyframes pulse {
210
+ 0% { opacity: 1; }
211
+ 50% { opacity: 0.3; }
212
+ 100% { opacity: 1; }
213
+ }
214
+
215
+ .status-message {
216
+ font-size: 12px;
217
+ color: var(--light-gray);
218
+ margin-top: 5px;
219
+ min-height: 18px;
220
+ }
221
+
222
+ @media (max-width: 768px) {
223
+ .control-panel {
224
+ width: 280px;
225
+ }
226
+ }
227
+ </style>
228
+ </head>
229
+ <body>
230
+ <div id="gradient-container">
231
+ <canvas id="gradient-canvas"></canvas>
232
+ </div>
233
+
234
+ <button class="panel-toggle mobile:hidden" id="toggle-panel">
235
+ <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
236
+ <line x1="3" y1="12" x2="21" y2="12"></line>
237
+ <line x1="3" y1="6" x2="21" y2="6"></line>
238
+ <line x1="3" y1="18" x2="21" y2="18"></line>
239
+ </svg>
240
+ </button>
241
+
242
+ <div class="control-panel" id="control-panel">
243
+ <h2 class="text-xl font-bold mb-6">Mesh Gradient Creator</h2>
244
+
245
+ <div class="section-title">Animation Settings</div>
246
+
247
+ <div class="slider-container">
248
+ <div class="slider-label">
249
+ <span>Speed</span>
250
+ <span id="speed-value">1.0x</span>
251
+ </div>
252
+ <input type="range" id="speed-slider" min="0.5" max="2" step="0.1" value="1">
253
+ </div>
254
+
255
+ <div class="slider-container">
256
+ <div class="slider-label">
257
+ <span>Distortion X</span>
258
+ <span id="distortion-x-value">50</span>
259
+ </div>
260
+ <input type="range" id="distortion-x-slider" min="0" max="100" value="50">
261
+ </div>
262
+
263
+ <div class="slider-container">
264
+ <div class="slider-label">
265
+ <span>Distortion Y</span>
266
+ <span id="distortion-y-value">50</span>
267
+ </div>
268
+ <input type="range" id="distortion-y-slider" min="0" max="100" value="50">
269
+ </div>
270
+
271
+ <div class="flex items-center mb-4">
272
+ <input type="checkbox" id="loop-toggle" class="mr-2">
273
+ <label for="loop-toggle">Enable 15-second loop</label>
274
+ </div>
275
+
276
+ <div class="section-title">Aspect Ratio</div>
277
+ <div class="btn-group">
278
+ <button class="btn active" data-ratio="16:9">16:9</button>
279
+ <button class="btn" data-ratio="1:1">1:1</button>
280
+ <button class="btn" data-ratio="9:16">9:16</button>
281
+ </div>
282
+
283
+ <div class="section-title">Color Palette</div>
284
+ <div class="color-grid">
285
+ <div class="color-option active" data-color="#4B4B4B">
286
+ <span class="color-preview" style="background-color: #4B4B4B;"></span>
287
+ <span>Dark Gray</span>
288
+ </div>
289
+ <div class="color-option" data-color="#DDDDDD">
290
+ <span class="color-preview" style="background-color: #DDDDDD;"></span>
291
+ <span>Light Gray</span>
292
+ </div>
293
+ <div class="color-option" data-color="#3B7AF0">
294
+ <span class="color-preview" style="background-color: #3B7AF0;"></span>
295
+ <span>Medium Blue</span>
296
+ </div>
297
+ <div class="color-option" data-color="#69A3FF">
298
+ <span class="color-preview" style="background-color: #69A3FF;"></span>
299
+ <span>Light Blue</span>
300
+ </div>
301
+ <div class="color-option" data-color="#A8D8F0">
302
+ <span class="color-preview" style="background-color: #A8D8F0;"></span>
303
+ <span>Pale Blue</span>
304
+ </div>
305
+ <div class="color-option" data-color="#8CD3A7">
306
+ <span class="color-preview" style="background-color: #8CD3A7;"></span>
307
+ <span>Mint Green</span>
308
+ </div>
309
+ <div class="color-option" data-color="#B6E2C8">
310
+ <span class="color-preview" style="background-color: #B6E2C8;"></span>
311
+ <span>Lighter Mint</span>
312
+ </div>
313
+ <div class="color-option" data-color="#DAF2E1">
314
+ <span class="color-preview" style="background-color: #DAF2E1;"></span>
315
+ <span>Very Pale Mint</span>
316
+ </div>
317
+ <div class="color-option" data-color="#F0D4A8">
318
+ <span class="color-preview" style="background-color: #F0D4A8;"></span>
319
+ <span>Pale Peach</span>
320
+ </div>
321
+ <div class="color-option" data-color="#F0E1C8">
322
+ <span class="color-preview" style="background-color: #F0E1C8;"></span>
323
+ <span>Light Beige</span>
324
+ </div>
325
+ <div class="color-option" data-color="#F5F5F7">
326
+ <span class="color-preview" style="background-color: #F5F5F7;"></span>
327
+ <span>Off-White</span>
328
+ </div>
329
+ </div>
330
+
331
+ <div class="section-title">Export</div>
332
+ <button class="btn w-full mb-2" id="record-btn">
333
+ <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
334
+ <circle cx="12" cy="12" r="10"></circle>
335
+ <circle cx="12" cy="12" r="3"></circle>
336
+ </svg>
337
+ <span>Start Recording</span>
338
+ </button>
339
+ <div class="status-message" id="status-message"></div>
340
+ </div>
341
+
342
+ <script>
343
+ document.addEventListener('DOMContentLoaded', function() {
344
+ // Check if mobile
345
+ const isMobile = window.matchMedia('(max-width: 768px)').matches;
346
+ if (isMobile) {
347
+ document.body.classList.add('mobile');
348
+ document.getElementById('control-panel').classList.add('mobile');
349
+ }
350
+
351
+ // Canvas setup
352
+ const canvas = document.getElementById('gradient-canvas');
353
+ const container = document.getElementById('gradient-container');
354
+ const ctx = canvas.getContext('2d');
355
+
356
+ // Set initial canvas size
357
+ function resizeCanvas() {
358
+ const aspectRatio = document.querySelector('.btn-group .btn.active').dataset.ratio;
359
+ let width, height;
360
+
361
+ if (aspectRatio === '16:9') {
362
+ width = window.innerWidth;
363
+ height = (width * 9) / 16;
364
+ } else if (aspectRatio === '1:1') {
365
+ width = Math.min(window.innerWidth, window.innerHeight);
366
+ height = width;
367
+ } else { // 9:16
368
+ height = window.innerHeight;
369
+ width = (height * 9) / 16;
370
+ }
371
+
372
+ canvas.width = width;
373
+ canvas.height = height;
374
+
375
+ // Center the canvas
376
+ container.style.width = `${width}px`;
377
+ container.style.height = `${height}px`;
378
+ container.style.left = `${(window.innerWidth - width) / 2}px`;
379
+ container.style.top = `${(window.innerHeight - height) / 2}px`;
380
+ }
381
+
382
+ resizeCanvas();
383
+ window.addEventListener('resize', resizeCanvas);
384
+
385
+ // Gradient animation
386
+ let animationId;
387
+ let time = 0;
388
+ let speed = 1;
389
+ let distortionX = 50;
390
+ let distortionY = 50;
391
+ let currentColor = '#4B4B4B';
392
+ let isLooping = false;
393
+ let loopStartTime = 0;
394
+ const loopDuration = 15; // seconds
395
+
396
+ function hexToRgb(hex) {
397
+ const r = parseInt(hex.slice(1, 3), 16);
398
+ const g = parseInt(hex.slice(3, 5), 16);
399
+ const b = parseInt(hex.slice(5, 7), 16);
400
+ return { r, g, b };
401
+ }
402
+
403
+ function animate() {
404
+ time += 0.01 * speed;
405
+
406
+ if (isLooping) {
407
+ const loopTime = (Date.now() - loopStartTime) / 1000;
408
+ if (loopTime >= loopDuration) {
409
+ loopStartTime = Date.now();
410
+ }
411
+ }
412
+
413
+ // Clear canvas
414
+ ctx.clearRect(0, 0, canvas.width, canvas.height);
415
+
416
+ // Create gradient
417
+ const gradient = ctx.createLinearGradient(0, 0, canvas.width, canvas.height);
418
+ const rgb = hexToRgb(currentColor);
419
+
420
+ // Add color stops with distortion
421
+ for (let i = 0; i <= 1; i += 0.1) {
422
+ const pos = i + Math.sin(time + i * 10) * (distortionX / 500);
423
+ const r = Math.min(255, rgb.r + Math.sin(time + i * 5) * 30);
424
+ const g = Math.min(255, rgb.g + Math.cos(time + i * 7) * 30);
425
+ const b = Math.min(255, rgb.b + Math.sin(time + i * 3) * 30);
426
+ gradient.addColorStop(pos, `rgb(${r}, ${g}, ${b})`);
427
+ }
428
+
429
+ // Fill with gradient
430
+ ctx.fillStyle = gradient;
431
+ ctx.fillRect(0, 0, canvas.width, canvas.height);
432
+
433
+ animationId = requestAnimationFrame(animate);
434
+ }
435
+
436
+ // Start animation
437
+ animate();
438
+
439
+ // Control panel interactions
440
+ document.getElementById('toggle-panel').addEventListener('click', function() {
441
+ document.getElementById('control-panel').classList.toggle('open');
442
+ });
443
+
444
+ // Speed slider
445
+ const speedSlider = document.getElementById('speed-slider');
446
+ const speedValue = document.getElementById('speed-value');
447
+ speedSlider.addEventListener('input', function() {
448
+ speed = parseFloat(this.value);
449
+ speedValue.textContent = `${speed.toFixed(1)}x`;
450
+ });
451
+
452
+ // Distortion sliders
453
+ const distortionXSlider = document.getElementById('distortion-x-slider');
454
+ const distortionXValue = document.getElementById('distortion-x-value');
455
+ distortionXSlider.addEventListener('input', function() {
456
+ distortionX = parseInt(this.value);
457
+ distortionXValue.textContent = distortionX;
458
+ });
459
+
460
+ const distortionYSlider = document.getElementById('distortion-y-slider');
461
+ const distortionYValue = document.getElementById('distortion-y-value');
462
+ distortionYSlider.addEventListener('input', function() {
463
+ distortionY = parseInt(this.value);
464
+ distortionYValue.textContent = distortionY;
465
+ });
466
+
467
+ // Loop toggle
468
+ const loopToggle = document.getElementById('loop-toggle');
469
+ loopToggle.addEventListener('change', function() {
470
+ isLooping = this.checked;
471
+ if (isLooping) {
472
+ loopStartTime = Date.now();
473
+ }
474
+ });
475
+
476
+ // Aspect ratio buttons
477
+ const aspectRatioButtons = document.querySelectorAll('.btn-group .btn');
478
+ aspectRatioButtons.forEach(btn => {
479
+ btn.addEventListener('click', function() {
480
+ aspectRatioButtons.forEach(b => b.classList.remove('active'));
481
+ this.classList.add('active');
482
+ resizeCanvas();
483
+ });
484
+ });
485
+
486
+ // Color options
487
+ const colorOptions = document.querySelectorAll('.color-option');
488
+ colorOptions.forEach(option => {
489
+ option.addEventListener('click', function() {
490
+ colorOptions.forEach(o => o.classList.remove('active'));
491
+ this.classList.add('active');
492
+ currentColor = this.dataset.color;
493
+ });
494
+ });
495
+
496
+ // Recording functionality
497
+ const recordBtn = document.getElementById('record-btn');
498
+ const statusMessage = document.getElementById('status-message');
499
+ let mediaRecorder;
500
+ let recordedChunks = [];
501
+ let isRecording = false;
502
+
503
+ recordBtn.addEventListener('click', function() {
504
+ if (!isRecording) {
505
+ startRecording();
506
+ } else {
507
+ stopRecording();
508
+ }
509
+ });
510
+
511
+ function startRecording() {
512
+ if (!canvas.captureStream) {
513
+ statusMessage.textContent = "Recording not supported in this browser";
514
+ return;
515
+ }
516
+
517
+ recordedChunks = [];
518
+ const stream = canvas.captureStream(30);
519
+ mediaRecorder = new MediaRecorder(stream, {
520
+ mimeType: 'video/webm;codecs=vp9',
521
+ videoBitsPerSecond: 8000000
522
+ });
523
+
524
+ mediaRecorder.ondataavailable = function(e) {
525
+ if (e.data.size > 0) {
526
+ recordedChunks.push(e.data);
527
+ }
528
+ };
529
+
530
+ mediaRecorder.onstop = function() {
531
+ const blob = new Blob(recordedChunks, { type: 'video/webm' });
532
+ const url = URL.createObjectURL(blob);
533
+
534
+ const a = document.createElement('a');
535
+ a.style.display = 'none';
536
+ a.href = url;
537
+ a.download = 'gradient-animation.webm';
538
+ document.body.appendChild(a);
539
+ a.click();
540
+
541
+ setTimeout(() => {
542
+ document.body.removeChild(a);
543
+ URL.revokeObjectURL(url);
544
+ }, 100);
545
+
546
+ statusMessage.textContent = "Recording saved as gradient-animation.webm";
547
+ };
548
+
549
+ mediaRecorder.start(100); // Collect data every 100ms
550
+ isRecording = true;
551
+ recordBtn.innerHTML = `
552
+ <span class="recording-indicator"></span>
553
+ <span>Stop Recording</span>
554
+ `;
555
+ statusMessage.textContent = "Recording started...";
556
+
557
+ if (isLooping) {
558
+ loopStartTime = Date.now();
559
+ const checkLoop = setInterval(() => {
560
+ const elapsed = (Date.now() - loopStartTime) / 1000;
561
+ if (elapsed >= loopDuration) {
562
+ stopRecording();
563
+ clearInterval(checkLoop);
564
+ }
565
+ }, 100);
566
+ }
567
+ }
568
+
569
+ function stopRecording() {
570
+ if (mediaRecorder && mediaRecorder.state !== 'inactive') {
571
+ mediaRecorder.stop();
572
+ }
573
+ isRecording = false;
574
+ recordBtn.innerHTML = `
575
+ <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
576
+ <circle cx="12" cy="12" r="10"></circle>
577
+ <circle cx="12" cy="12" r="3"></circle>
578
+ </svg>
579
+ <span>Start Recording</span>
580
+ `;
581
+ }
582
+
583
+ // Clean up on page unload
584
+ window.addEventListener('beforeunload', function() {
585
+ cancelAnimationFrame(animationId);
586
+ if (mediaRecorder && mediaRecorder.state !== 'inactive') {
587
+ mediaRecorder.stop();
588
+ }
589
+ });
590
+ });
591
+ </script>
592
+ <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=benner3000/test" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
593
+ </html>
prompts.txt ADDED
@@ -0,0 +1,2 @@
 
 
 
1
+ # Project Brief: Interactive Mesh Gradient Creator ## Project Overview We're developing an interactive, customizable mesh gradient generator inspired by the Stripe website's visual effects and the whatamesh implementation. This web-based tool will allow users to create beautiful animated gradients with extensive customization options, the ability to change aspect ratios, and export animations as video files. ## Technical Specifications ### Core Functionality 1. **Animated Mesh Gradient Implementation** - Based on the Stripe WebGL gradient effect - Right-to-left directional animation - Seamless 15-second loop cycle - Customizable distortion parameters - Responsive design for all device sizes 2. **Custom Control Panel** - Interactive controls for all gradient parameters - Aspect ratio selector (16:9, 1:1, 9:16) - Color palette management using "Fresh Mobility" colors - Animation speed and distortion controls - Video recording and export functionality 3. **Visual Design** - Black-themed control panel - Inter font for all typography - Dark blue buttons (#3B7AF0) - Clean, modern interface ## Technical Requirements ### Technology Stack - **Frontend**: HTML5, CSS3, JavaScript - **Graphics**: WebGL for gradient rendering - **Recording**: MediaRecorder API for client-side video capture - **Fonts**: Inter font family ### Development Milestones 1. **Base Implementation (Week 1)** - Set up project structure - Implement basic WebGL gradient - Create responsive canvas containers - Apply the "Fresh Mobility" color palette 2. **Control Panel Development (Week 2)** - Build black-themed control panel - Implement aspect ratio controls - Add distortion parameter sliders - Integrate color selectors 3. **Animation & Interactivity (Week 3)** - Configure 15-second loop timing - Set up right-to-left animation - Implement distortion controls - Add preset configurations 4. **Video Export & Polishing (Week 4)** - Implement client-side recording functionality - Add MP4 export capability - Optimize for mobile devices - Final testing and bug fixes ## Design Assets ### Color Palette The "Fresh Mobility" palette contains 11 colors: 1. Dark Gray (#4B4B4B) 2. Light Gray (#DDDDDD) 3. Medium Blue (#3B7AF0) - *for buttons* 4. Light Blue (#69A3FF) 5. Pale Blue (#A8D8F0) 6. Mint Green (#8CD3A7) 7. Lighter Mint (#B6E2C8) 8. Very Pale Mint (#DAF2E1) 9. Pale Peach (#F0D4A8) 10. Light Beige (#F0E1C8) 11. Off-White (#F5F5F7) ### Typography - Font Family: Inter - Weight variations: Regular (400), Medium (500), Bold (700) ## Technical Considerations 1. **Performance Optimization** - Implement quality settings for lower-end devices - Optimize canvas rendering for mobile performance - Consider caching mechanisms for smoother transitions 2. **Responsive Design Strategy** - Fluid sizing of canvas container - Collapsible control panel for mobile devices - Touch-friendly controls for mobile users 3. **Browser Compatibility** - Primary support: Chrome, Firefox, Safari, Edge - Fallback for browsers with limited WebGL support - Progressive enhancement approach 4. **Recording Functionality** - Capture exact 15-second loop cycle - Maintain quality during export process - Handle memory management during recording - Provide clear user feedback during recording process ## Deliverables 1. Complete web application with all specified features 2. Clean, well-commented source code 3. Documentation for: - Implementation details - Control panel parameters - Recording and export functionality - Browser compatibility notes ## Success Criteria 1. Seamless 15-second animation loop works as specified 2. All three aspect ratios (16:9, 1:1, 9:16) function correctly 3. Mobile responsiveness meets standards across devices 4. Video export produces high-quality MP4 files 5. All visual design specifications are implemented accurately 6. Animation performs well across supported browsers ## Resources - Reference implementation: https://whatamesh.vercel.app/ - Original inspiration: Stripe.com gradient effect - GitHub repository for whatamesh: https://github.com/jordienr/whatamesh This project will be self-hosted and should be built with clean, maintainable code that can be easily extended in the future.
2
+ # Comprehensive Project Brief: Interactive Mesh Gradient Creator ## Project Overview We're developing a self-hosted interactive mesh gradient generator inspired by Stripe's WebGL effects and the whatamesh implementation. The application will feature a customizable gradient animation that starts playing immediately on page load, with a control panel allowing users to modify parameters in real-time and export animations as video files. ## Core Technical Specifications ### Gradient Animation - **Initial State**: Animation begins automatically on page load with default settings - **Default Animation**: Continuous, infinite animation without the 15-second loop constraint - **Animation Direction**: Right-to-left movement - **Loop Configuration**: Optional 15-second loop setting available via the control panel - **Aspect Ratios**: Toggleable between 16:9, 1:1, and 9:16 - **Color Palette**: "Fresh Mobility" palette with 11 distinct colors - Dark Gray (#4B4B4B) - Light Gray (#DDDDDD) - Medium Blue (#3B7AF0) - *for buttons* - Light Blue (#69A3FF) - Pale Blue (#A8D8F0) - Mint Green (#8CD3A7) - Lighter Mint (#B6E2C8) - Very Pale Mint (#DAF2E1) - Pale Peach (#F0D4A8) - Light Beige (#F0E1C8) - Off-White (#F5F5F7) - **Performance Target**: Minimum 30fps on mid-range devices ### Control Panel - **Visual Design**: Black background theme - **Typography**: Inter font family (400, 500, 700 weights) - **Button Color**: Dark blue (#3B7AF0) - **Panel Position**: Collapsible sidebar, defaulting to expanded on desktop and collapsed on mobile - **Parameter Controls**: - **Loop Configuration**: Toggle between infinite animation and 15-second loop - **Loop Duration**: Slider for adjusting loop length (5-30 seconds, default 15s) when loop is enabled - **Distortion Width**: Slider (0-100, default 50) - **Distortion Height**: Slider (0-100, default 50) - **Animation Speed**: Slider (0.5x-2x, default 1x) - **Aspect Ratio**: Button toggles for 16:9, 1:1, 9:16 - **Color Selectors**: All 11 colors with visual previews - **Record Button**: For starting/stopping video capture ### Video Export Functionality - **Implementation**: Client-side using MediaRecorder API - **Output Format**: MP4, H.264 encoding - **Resolution**: Matching canvas dimensions (adaptive) - **Duration**: - In infinite mode: User-defined duration - In loop mode: One complete cycle of the specified loop length - **Quality Settings**: High (8Mbps), Medium (4Mbps), Low (2Mbps) - **Progress Indicator**: Visual feedback during recording and processing - **Fallback**: Warning for unsupported browsers ### Responsive Design - **Breakpoints**: - Mobile: 320px-767px - Tablet: 768px-1023px - Desktop: 1024px+ - **Mobile Adaptations**: - Collapsible controls accessed via toggle button - Simplified UI with vertical layout - Touch-optimized slider controls - **Default Aspect Ratios**: - Mobile (portrait): Default to 9:16 - Desktop: Default to 16:9 ## Technical Requirements ### Development Environment - **Version Control**: Git with feature branch workflow - **Build Tools**: Webpack or Vite for module bundling - **Dependency Management**: npm or yarn - **Coding Standards**: ESLint and Prettier configurations ### Browser Support - **Primary Targets**: - Chrome 80+ - Firefox 76+ - Safari 13.1+ - Edge 80+ - **Mobile Support**: - iOS Safari 13.4+ - Android Chrome 80+ - **Fallback Strategy**: Detect WebGL support and display graceful degradation message ### Performance Optimization - **Canvas Rendering**: Optimized shader complexity based on device capability - **Memory Management**: Proper cleanup of WebGL contexts - **Asset Loading**: Efficient loading strategy for scripts and fonts - **Recording Optimization**: Memory-efficient frame capture ### File Structure - **HTML**: 1-2 files (index.html, potentially a separate demo page) - **CSS**: 2 files (main.css, control-panel.css) - **JavaScript**: 3-4 files - gradient.js (core WebGL implementation) - controls.js (UI interaction) - recorder.js (video export functionality) - utils.js (helper functions) - **Assets**: Inter font files, any UI icons ### Integration Requirements - **Standalone Mode**: Must function as a self-contained component - **Embedding**: Simple integration via script tags - **Initialization**: Clear API for initializing with custom parameters - **Default State**: Animation begins immediately on page load without user interaction ## Accessibility Requirements - **Keyboard Navigation**: Full functionality accessible via keyboard - **ARIA Attributes**: Proper labeling of controls - **Color Contrast**: WCAG AA compliance for text elements - **Reduced Motion**: Respect prefers-reduced-motion setting ## Testing Requirements - **Device Testing Matrix**: - Desktop: Windows/Mac with supported browsers - Mobile: iOS/Android with supported browsers - **Performance Testing**: FPS measurements under various conditions - **Functionality Testing**: All controls and export features - **Cross-browser Validation**: Consistent appearance and behavior ## Deliverables 1. **Source Code**: - Complete, well-commented codebase - No external dependencies requiring internet access 2. **Documentation**: - Technical implementation details - API documentation - Installation guide 3. **Build Files**: - Production-ready bundled assets - Example implementation ## Timeline - **Week 1**: Core gradient implementation and basic controls - **Week 2**: Advanced parameter controls and aspect ratio management - **Week 3**: Responsive design and mobile optimization - **Week 4**: Video recording functionality and final polish ## Success Criteria 1. Gradient animation begins automatically on page load 2. Animation runs at a consistent frame rate across supported devices 3. All controls function as specified and update the gradient in real-time 4. Loop functionality can be toggled between infinite and timed modes 5. Aspect ratio switching maintains visual quality and proper proportions 6. Video export produces high-quality MP4 files in both infinite and loop modes 7. Interface is fully responsive and functions on mobile devices 8. All components work correctly without internet connection once loaded This comprehensive brief provides the development team with all necessary information to successfully implement the interactive mesh gradient creator with the specified features and technical requirements.