···
4
+
<meta charset="UTF-8" />
5
+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
10
+
href="/favicon/favicon-96x96.png"
13
+
<link rel="icon" type="image/svg+xml" href="/favicon/favicon.svg" />
14
+
<link rel="shortcut icon" href="/favicon/favicon.ico" />
16
+
rel="apple-touch-icon"
18
+
href="/favicon/apple-touch-icon.png"
20
+
<meta name="apple-mobile-web-app-title" content="Serif.blue" />
21
+
<link rel="manifest" href="/favicon/site.webmanifest" />
25
+
content="Serif.blue - Fancy projects by Kieran"
27
+
<meta name="color-scheme" content="light" />
29
+
<meta property="og:title" content="Serif.blue - pfp gradient builder" />
30
+
<meta property="og:type" content="website" />
31
+
<meta property="og:url" content="https://serif.blue/pfp-updates" />
32
+
<meta property="og:image" content="/og.png" />
34
+
<link rel="me" href="https://dunkirk.sh" />
35
+
<link rel="me" href="https://bsky.app/profile/dunkirk.sh" />
36
+
<link rel="me" href="https://github.com/taciturnaxolotl" />
38
+
<title>Sky Gradient Timeline Builder</title>
41
+
font-family: Arial, sans-serif;
45
+
background: #f5f5f5;
50
+
grid-template-columns: 300px 1fr;
52
+
margin-bottom: 20px;
59
+
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
60
+
height: fit-content;
64
+
word-wrap: break-word;
65
+
overflow-wrap: break-word;
72
+
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
76
+
margin-bottom: 20px;
78
+
border: 2px dashed #ddd;
83
+
.timeline-selector {
84
+
margin-bottom: 20px;
91
+
margin-bottom: 10px;
96
+
border: 1px solid #ddd;
100
+
background: #f8f9fa;
101
+
transition: all 0.2s;
104
+
.timeline-tab.active {
105
+
background: #007bff;
107
+
border-color: #007bff;
110
+
.timeline-tab:hover {
111
+
background: #e9ecef;
114
+
.timeline-tab.active:hover {
115
+
background: #0056b3;
121
+
margin-bottom: 15px;
126
+
grid-template-columns: repeat(24, 1fr);
128
+
margin-bottom: 20px;
129
+
border: 1px solid #ddd;
130
+
border-radius: 4px;
132
+
background: #f8f9fa;
137
+
border: 1px solid #ccc;
138
+
border-radius: 3px;
141
+
align-items: center;
142
+
justify-content: center;
145
+
position: relative;
146
+
transition: all 0.2s;
150
+
border-color: #007bff;
151
+
transform: scale(1.1);
155
+
.hour-slot.selected {
156
+
border: 2px solid #007bff;
157
+
box-shadow: 0 0 5px rgba(0, 123, 255, 0.5);
164
+
border-radius: 4px;
172
+
align-items: center;
179
+
border-radius: 3px;
191
+
border: 1px solid #ddd;
192
+
border-radius: 8px;
199
+
border-radius: 4px;
202
+
transition: all 0.2s;
207
+
background: #007bff;
211
+
background: #28a745;
215
+
background: #dc3545;
219
+
background: #6c757d;
223
+
background: #ffc107;
228
+
transform: translateY(-1px);
229
+
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
235
+
border-radius: 4px;
240
+
background: #ffe6e6;
245
+
background: #e6ffe6;
252
+
grid-template-columns: repeat(24, 1fr);
254
+
margin-bottom: 5px;
259
+
text-align: center;
267
+
border: 1px solid #ddd;
268
+
border-radius: 4px;
269
+
background: #f8f9fa;
275
+
margin-bottom: 15px;
277
+
background: #e3f2fd;
278
+
border-radius: 4px;
283
+
<h1>🌅 Sky Gradient Timeline Builder</h1>
285
+
<div class="container">
286
+
<div class="sidebar">
287
+
<div class="upload-section">
288
+
<h3>Upload Images</h3>
290
+
<label>Base Image:</label><br />
291
+
<input type="file" id="baseImage" accept="image/*" />
295
+
<label>Matte:</label><br />
296
+
<input type="file" id="matteImage" accept="image/*" />
298
+
<div class="status" id="uploadStatus"></div>
302
+
<h3>Hour Settings</h3>
308
+
margin-bottom: 10px;
311
+
Click an hour slot to configure
317
+
align-items: center;
322
+
<label>From:</label>
326
+
class="color-input"
333
+
class="color-input"
338
+
<div class="slider-group">
339
+
<label>Background:</label>
348
+
<span class="value-display" id="bgValue">40%</span>
351
+
<div class="slider-group">
352
+
<label>Foreground:</label>
361
+
<span class="value-display" id="fgValue">8%</span>
365
+
onclick="applyToSelectedHour()"
366
+
class="btn btn-success"
367
+
style="width: 100%; margin-top: 10px"
369
+
Apply to Selected Hour
375
+
class="preview-canvas"
382
+
style="display: none"
388
+
<div class="config-export">
389
+
<h4>Export Config</h4>
391
+
onclick="copyAllTimelines()"
392
+
class="btn btn-warning"
393
+
style="width: 100%; margin-bottom: 10px"
395
+
📋 Copy All Timelines
398
+
<label style="font-size: 12px; color: #666"
399
+
>Config Output:</label
407
+
font-family: monospace;
412
+
border: 1px solid #ddd;
413
+
border-radius: 4px;
414
+
word-break: break-all;
415
+
white-space: pre-wrap;
416
+
overflow-wrap: break-word;
420
+
onclick="copyToClipboard()"
421
+
class="btn btn-success"
422
+
style="width: 100%; margin-top: 5px"
424
+
📋 Copy to Clipboard
427
+
<hr style="margin: 15px 0" />
429
+
<h4>Import Config</h4>
430
+
<label style="font-size: 12px; color: #666"
431
+
>Paste Config (auto-imports):</label
434
+
id="bulkConfigInput"
435
+
placeholder="Paste timeline config here..."
439
+
font-family: monospace;
444
+
border: 1px solid #ddd;
445
+
border-radius: 4px;
451
+
<div class="timeline-area">
452
+
<div class="timeline-selector">
453
+
<h3>Weather Timelines</h3>
454
+
<div class="timeline-info">
455
+
Create different timelines for various weather
456
+
conditions. Each timeline defines how your profile
457
+
picture should look throughout the day.
460
+
<div class="new-timeline">
463
+
id="newTimelineName"
464
+
placeholder="Timeline name (e.g. sunny, rainy, cloudy)"
465
+
style="flex: 1; padding: 8px"
468
+
onclick="createTimeline()"
469
+
class="btn btn-success"
475
+
<div class="timeline-tabs" id="timelineTabs">
476
+
<div class="timeline-tab active" data-timeline="sunny">
481
+
<div style="margin: 10px 0">
483
+
onclick="duplicateTimeline()"
484
+
class="btn btn-secondary"
489
+
onclick="deleteTimeline()"
490
+
class="btn btn-danger"
500
+
<span id="currentTimelineName">Sunny</span>
502
+
<div class="hour-labels">
503
+
<div class="hour-label">0</div>
504
+
<div class="hour-label">1</div>
505
+
<div class="hour-label">2</div>
506
+
<div class="hour-label">3</div>
507
+
<div class="hour-label">4</div>
508
+
<div class="hour-label">5</div>
509
+
<div class="hour-label">6</div>
510
+
<div class="hour-label">7</div>
511
+
<div class="hour-label">8</div>
512
+
<div class="hour-label">9</div>
513
+
<div class="hour-label">10</div>
514
+
<div class="hour-label">11</div>
515
+
<div class="hour-label">12</div>
516
+
<div class="hour-label">13</div>
517
+
<div class="hour-label">14</div>
518
+
<div class="hour-label">15</div>
519
+
<div class="hour-label">16</div>
520
+
<div class="hour-label">17</div>
521
+
<div class="hour-label">18</div>
522
+
<div class="hour-label">19</div>
523
+
<div class="hour-label">20</div>
524
+
<div class="hour-label">21</div>
525
+
<div class="hour-label">22</div>
526
+
<div class="hour-label">23</div>
528
+
<div class="timeline-grid" id="timelineGrid">
529
+
<!-- Hours 0-23 will be generated here -->
532
+
<div style="margin-top: 20px">
533
+
<h4>Bulk Actions</h4>
539
+
margin-bottom: 15px;
543
+
onclick="loadPreset('dawn', [5,6,7])"
544
+
class="btn btn-secondary"
549
+
onclick="loadPreset('morning', [8,9,10,11])"
550
+
class="btn btn-secondary"
555
+
onclick="loadPreset('afternoon', [12,13,14,15,16])"
556
+
class="btn btn-secondary"
561
+
onclick="loadPreset('sunset', [17,18,19])"
562
+
class="btn btn-secondary"
567
+
onclick="loadPreset('night', [20,21,22,23,0,1,2,3,4])"
568
+
class="btn btn-secondary"
576
+
border: 1px solid #ddd;
578
+
border-radius: 4px;
579
+
background: #f8f9fa;
582
+
<h5 style="margin: 0 0 10px 0">Custom Range</h5>
587
+
align-items: center;
588
+
margin-bottom: 10px;
591
+
<label style="font-size: 12px">From:</label>
598
+
style="width: 50px; padding: 4px"
600
+
<label style="font-size: 12px">To:</label>
607
+
style="width: 50px; padding: 4px"
610
+
onclick="applyCurrentToRange()"
611
+
class="btn btn-success"
612
+
style="font-size: 11px"
617
+
<div style="font-size: 11px; color: #666">
618
+
Uses current gradient & intensity settings for
619
+
the specified hour range
627
+
<div id="renderGallery" style="margin-top: 20px">
628
+
<h3>🖼️ Render Gallery</h3>
633
+
border-radius: 8px;
634
+
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
640
+
justify-content: space-between;
641
+
align-items: center;
642
+
margin-bottom: 15px;
647
+
<div id="galleryInfo" style="font-size: 14px; color: #666">
648
+
Ready to render timelines
650
+
<div style="display: flex; gap: 10px">
652
+
onclick="renderAllTimelines()"
653
+
class="btn btn-success"
658
+
onclick="downloadAllRendered()"
659
+
class="btn btn-primary"
660
+
id="downloadAllBtn"
665
+
<button onclick="clearGallery()" class="btn btn-danger">
673
+
style="margin-bottom: 15px; display: none"
677
+
background: #e9ecef;
678
+
border-radius: 4px;
685
+
background: #28a745;
688
+
transition: width 0.3s;
696
+
text-align: center;
705
+
id="galleryContent"
708
+
grid-template-columns: repeat(
714
+
border: 2px dashed #ddd;
715
+
border-radius: 8px;
717
+
align-items: center;
718
+
justify-content: center;
722
+
id="galleryPlaceholder"
724
+
grid-column: 1 / -1;
725
+
text-align: center;
727
+
font-style: italic;
730
+
Click "Render All" to generate images and see them here
737
+
let baseImg = null;
738
+
let matteImg = null;
739
+
let selectedHour = 0;
740
+
let currentTimeline = "sunny";
742
+
// Preset configurations
747
+
backgroundIntensity: 45,
748
+
foregroundIntensity: 8,
753
+
backgroundIntensity: 35,
754
+
foregroundIntensity: 5,
759
+
backgroundIntensity: 30,
760
+
foregroundIntensity: 5,
765
+
backgroundIntensity: 50,
766
+
foregroundIntensity: 10,
771
+
backgroundIntensity: 55,
772
+
foregroundIntensity: 12,
776
+
// Timeline data structure - initialize with proper presets
781
+
// Initialize the default sunny timeline with presets
782
+
for (let hour = 0; hour < 24; hour++) {
783
+
if (hour >= 5 && hour <= 7) {
784
+
timelines.sunny[hour] = { ...presets.dawn };
785
+
} else if (hour >= 8 && hour <= 11) {
786
+
timelines.sunny[hour] = { ...presets.morning };
787
+
} else if (hour >= 12 && hour <= 16) {
788
+
timelines.sunny[hour] = { ...presets.afternoon };
789
+
} else if (hour >= 17 && hour <= 19) {
790
+
timelines.sunny[hour] = { ...presets.sunset };
792
+
timelines.sunny[hour] = { ...presets.night };
796
+
// Default hour configuration
797
+
const defaultHourConfig = {
800
+
backgroundIntensity: 40,
801
+
foregroundIntensity: 8,
804
+
function initializeTimeline() {
805
+
// Create hour slots
806
+
const grid = document.getElementById("timelineGrid");
807
+
grid.innerHTML = "";
809
+
for (let hour = 0; hour < 24; hour++) {
810
+
const slot = document.createElement("div");
811
+
slot.className = "hour-slot";
812
+
slot.dataset.hour = hour;
813
+
slot.textContent = hour;
814
+
slot.onclick = () => selectHour(hour);
816
+
// Initialize with appropriate preset if not exists
817
+
if (!timelines[currentTimeline][hour]) {
818
+
timelines[currentTimeline][hour] =
819
+
getDefaultConfigForHour(hour);
822
+
grid.appendChild(slot);
825
+
updateTimelineDisplay();
829
+
function getDefaultConfigForHour(hour) {
830
+
// Apply appropriate preset based on hour
831
+
if (hour >= 5 && hour <= 7) {
832
+
return { ...presets.dawn };
833
+
} else if (hour >= 8 && hour <= 11) {
834
+
return { ...presets.morning };
835
+
} else if (hour >= 12 && hour <= 16) {
836
+
return { ...presets.afternoon };
837
+
} else if (hour >= 17 && hour <= 19) {
838
+
return { ...presets.sunset };
840
+
return { ...presets.night };
844
+
function selectHour(hour) {
845
+
selectedHour = hour;
847
+
// Update UI selection
848
+
document.querySelectorAll(".hour-slot").forEach((slot) => {
849
+
slot.classList.remove("selected");
852
+
.querySelector(`[data-hour="${hour}"]`)
853
+
.classList.add("selected");
855
+
// Load hour configuration
856
+
const config = timelines[currentTimeline][hour] || {
857
+
...defaultHourConfig,
859
+
document.getElementById("color1").value = config.color1;
860
+
document.getElementById("color2").value = config.color2;
861
+
document.getElementById("bgIntensity").value =
862
+
config.backgroundIntensity;
863
+
document.getElementById("fgIntensity").value =
864
+
config.foregroundIntensity;
867
+
document.getElementById("bgValue").textContent =
868
+
config.backgroundIntensity + "%";
869
+
document.getElementById("fgValue").textContent =
870
+
config.foregroundIntensity + "%";
871
+
document.getElementById("hourInfo").textContent =
872
+
`Configuring hour ${hour} (${hour === 0 ? "12" : hour > 12 ? hour - 12 : hour}${hour < 12 ? "AM" : "PM"})`;
877
+
function applyToSelectedHour() {
879
+
color1: document.getElementById("color1").value,
880
+
color2: document.getElementById("color2").value,
881
+
backgroundIntensity: parseInt(
882
+
document.getElementById("bgIntensity").value,
884
+
foregroundIntensity: parseInt(
885
+
document.getElementById("fgIntensity").value,
889
+
timelines[currentTimeline][selectedHour] = config;
890
+
updateTimelineDisplay();
891
+
showStatus("Hour " + selectedHour + " updated!", "success");
894
+
function updateTimelineDisplay() {
895
+
document.querySelectorAll(".hour-slot").forEach((slot) => {
896
+
const hour = parseInt(slot.dataset.hour);
897
+
const config = timelines[currentTimeline][hour];
900
+
const gradient = `linear-gradient(135deg, ${config.color1}, ${config.color2})`;
901
+
slot.style.background = gradient;
902
+
slot.style.color = "white";
903
+
slot.style.textShadow = "1px 1px 2px rgba(0,0,0,0.8)";
905
+
slot.style.background = "#f8f9fa";
906
+
slot.style.color = "#666";
907
+
slot.style.textShadow = "none";
912
+
function createTimeline() {
913
+
const name = document
914
+
.getElementById("newTimelineName")
917
+
showStatus("Please enter a timeline name!", "error");
921
+
if (timelines[name]) {
922
+
showStatus("Timeline already exists!", "error");
926
+
// Create new timeline with proper presets for each hour
927
+
timelines[name] = {};
928
+
for (let hour = 0; hour < 24; hour++) {
929
+
timelines[name][hour] = getDefaultConfigForHour(hour);
933
+
const tab = document.createElement("div");
934
+
tab.className = "timeline-tab";
935
+
tab.dataset.timeline = name;
936
+
tab.textContent = name;
937
+
tab.onclick = () => switchTimeline(name);
938
+
document.getElementById("timelineTabs").appendChild(tab);
940
+
// Switch to new timeline
941
+
switchTimeline(name);
942
+
document.getElementById("newTimelineName").value = "";
944
+
`Timeline "${name}" created with default presets!`,
949
+
function switchTimeline(timelineName) {
950
+
currentTimeline = timelineName;
952
+
// Update tab selection
953
+
document.querySelectorAll(".timeline-tab").forEach((tab) => {
954
+
tab.classList.remove("active");
957
+
.querySelector(`[data-timeline="${timelineName}"]`)
958
+
.classList.add("active");
960
+
document.getElementById("currentTimelineName").textContent =
962
+
updateTimelineDisplay();
963
+
selectHour(selectedHour);
966
+
function duplicateTimeline() {
967
+
const newName = prompt(
968
+
`Enter name for copy of "${currentTimeline}":`,
970
+
if (!newName || timelines[newName]) {
972
+
"Invalid name or timeline already exists!",
978
+
// Deep copy current timeline
979
+
timelines[newName] = JSON.parse(
980
+
JSON.stringify(timelines[currentTimeline]),
984
+
const tab = document.createElement("div");
985
+
tab.className = "timeline-tab";
986
+
tab.dataset.timeline = newName;
987
+
tab.textContent = newName;
988
+
tab.onclick = () => switchTimeline(newName);
989
+
document.getElementById("timelineTabs").appendChild(tab);
991
+
switchTimeline(newName);
992
+
showStatus(`Timeline "${newName}" created as copy!`, "success");
995
+
function deleteTimeline() {
996
+
if (Object.keys(timelines).length <= 1) {
997
+
showStatus("Cannot delete the last timeline!", "error");
1001
+
if (!confirm(`Delete timeline "${currentTimeline}"?`)) return;
1003
+
// Remove timeline
1004
+
delete timelines[currentTimeline];
1008
+
.querySelector(`[data-timeline="${currentTimeline}"]`)
1011
+
// Switch to first available timeline
1012
+
const firstTimeline = Object.keys(timelines)[0];
1013
+
switchTimeline(firstTimeline);
1015
+
showStatus(`Timeline "${currentTimeline}" deleted!`, "success");
1018
+
function loadPreset(presetName, hours) {
1019
+
// Get current UI settings
1021
+
color1: document.getElementById("color1").value,
1022
+
color2: document.getElementById("color2").value,
1023
+
backgroundIntensity: parseInt(
1024
+
document.getElementById("bgIntensity").value,
1026
+
foregroundIntensity: parseInt(
1027
+
document.getElementById("fgIntensity").value,
1031
+
// Apply current settings to specified hours
1032
+
hours.forEach((hour) => {
1033
+
timelines[currentTimeline][hour] = { ...config };
1036
+
updateTimelineDisplay();
1038
+
`Applied current settings to ${presetName} hours: ${hours.join(", ")}`,
1043
+
function applyCurrentToRange() {
1044
+
const start = parseInt(
1045
+
document.getElementById("rangeStart").value,
1047
+
const end = parseInt(document.getElementById("rangeEnd").value);
1049
+
if (start < 0 || start > 23 || end < 0 || end > 23) {
1050
+
showStatus("Hours must be between 0 and 23!", "error");
1055
+
color1: document.getElementById("color1").value,
1056
+
color2: document.getElementById("color2").value,
1057
+
backgroundIntensity: parseInt(
1058
+
document.getElementById("bgIntensity").value,
1060
+
foregroundIntensity: parseInt(
1061
+
document.getElementById("fgIntensity").value,
1065
+
// Generate hour range (handle wrap-around)
1067
+
if (start <= end) {
1068
+
for (let i = start; i <= end; i++) {
1072
+
// Wrap around (e.g., 22 to 2 = 22,23,0,1,2)
1073
+
for (let i = start; i <= 23; i++) {
1076
+
for (let i = 0; i <= end; i++) {
1081
+
// Apply config to all hours in range
1082
+
hours.forEach((hour) => {
1083
+
timelines[currentTimeline][hour] = { ...config };
1086
+
updateTimelineDisplay();
1088
+
`Applied current settings to hours: ${hours.join(", ")}`,
1093
+
function copyAllTimelines() {
1095
+
timelines: timelines,
1097
+
created: new Date().toISOString(),
1098
+
tool: "Sky Gradient Timeline Builder",
1102
+
const configText = JSON.stringify(config, null, 2);
1103
+
document.getElementById("configOutput").value = configText;
1104
+
showStatus("All timelines ready to copy!", "success");
1107
+
function renderCurrentHour() {
1108
+
if (!baseImg || !matteImg) {
1109
+
showStatus("Please upload both images first!", "error");
1113
+
const color1 = document.getElementById("color1").value;
1114
+
const color2 = document.getElementById("color2").value;
1115
+
const bgIntensity = parseInt(
1116
+
document.getElementById("bgIntensity").value,
1118
+
const fgIntensity = parseInt(
1119
+
document.getElementById("fgIntensity").value,
1122
+
// Use the full-size render canvas
1123
+
const canvas = document.getElementById("renderCanvas");
1124
+
const ctx = canvas.getContext("2d");
1126
+
// Set canvas size to match base image
1127
+
canvas.width = baseImg.width;
1128
+
canvas.height = baseImg.height;
1130
+
// Create gradient
1131
+
const gradient = createGradient(
1139
+
ctx.clearRect(0, 0, canvas.width, canvas.height);
1141
+
// Create background layer
1142
+
const backgroundLayer = blendImages(
1147
+
ctx.drawImage(backgroundLayer, 0, 0);
1149
+
// Create and apply foreground layer
1150
+
let foregroundLayer;
1151
+
if (fgIntensity === 0) {
1152
+
foregroundLayer = baseImg;
1154
+
foregroundLayer = blendImages(
1162
+
const maskedForeground = document.createElement("canvas");
1163
+
maskedForeground.width = canvas.width;
1164
+
maskedForeground.height = canvas.height;
1165
+
const maskCtx = maskedForeground.getContext("2d");
1167
+
maskCtx.drawImage(foregroundLayer, 0, 0);
1169
+
// Create proper alpha mask
1170
+
const matteDataCanvas = document.createElement("canvas");
1171
+
matteDataCanvas.width = matteImg.width;
1172
+
matteDataCanvas.height = matteImg.height;
1173
+
const matteDataCtx = matteDataCanvas.getContext("2d");
1174
+
matteDataCtx.drawImage(matteImg, 0, 0);
1176
+
const imageData = matteDataCtx.getImageData(
1182
+
const data = imageData.data;
1184
+
for (let i = 0; i < data.length; i += 4) {
1185
+
const brightness =
1186
+
(data[i] + data[i + 1] + data[i + 2]) / 3;
1187
+
if (brightness > 128) {
1188
+
data[i + 3] = 255;
1193
+
data[i + 1] = 255;
1194
+
data[i + 2] = 255;
1197
+
matteDataCtx.putImageData(imageData, 0, 0);
1199
+
maskCtx.globalCompositeOperation = "destination-in";
1200
+
maskCtx.drawImage(
1208
+
ctx.globalCompositeOperation = "source-over";
1209
+
ctx.drawImage(maskedForeground, 0, 0);
1211
+
// Enable download button
1212
+
document.getElementById("downloadBtn").disabled = false;
1214
+
`Hour ${selectedHour} rendered at full resolution!`,
1219
+
function downloadRendered() {
1220
+
const canvas = document.getElementById("renderCanvas");
1221
+
if (canvas.width === 400 && canvas.height === 400) {
1222
+
showStatus("Please render first!", "error");
1226
+
// Create download
1227
+
const link = document.createElement("a");
1228
+
const timelineName = currentTimeline;
1229
+
const hour = selectedHour.toString().padStart(2, "0");
1230
+
link.download = `${timelineName}_hour_${hour}.jpg`;
1232
+
// Convert to JPEG for smaller file size
1233
+
link.href = canvas.toDataURL("image/jpeg", 0.95);
1236
+
showStatus(`Downloaded: ${link.download}`, "success");
1239
+
// Auto-import on paste
1241
+
.getElementById("bulkConfigInput")
1242
+
.addEventListener("paste", function (e) {
1243
+
// Small delay to let the paste complete
1244
+
setTimeout(() => {
1245
+
const configText = this.value.trim();
1246
+
if (configText && configText.startsWith("{")) {
1247
+
importConfigToTimelines();
1253
+
let renderedImages = {};
1255
+
function renderAllTimelines() {
1256
+
if (!baseImg || !matteImg) {
1257
+
showStatus("Please upload both images first!", "error");
1261
+
if (Object.keys(timelines).length === 0) {
1262
+
showStatus("No timelines to render!", "error");
1266
+
// Clear previous renders
1267
+
renderedImages = {};
1269
+
// Show progress bar
1270
+
document.getElementById("bulkProgress").style.display = "block";
1271
+
document.getElementById("downloadAllBtn").disabled = true;
1274
+
document.getElementById("galleryContent").innerHTML = "";
1276
+
// Count total hours to render
1277
+
const timelineNames = Object.keys(timelines);
1278
+
let totalHours = 0;
1279
+
let currentHour = 0;
1281
+
timelineNames.forEach((timelineName) => {
1282
+
const hours = Object.keys(timelines[timelineName]);
1283
+
totalHours += hours.length;
1286
+
updateProgress(0, totalHours);
1287
+
updateGalleryInfo(0, totalHours, timelineNames.length);
1289
+
`Rendering all timelines: ${timelineNames.length} timelines, ${totalHours} hours total`,
1293
+
// Render all timelines sequentially
1294
+
let timelineIndex = 0;
1296
+
function renderNextTimeline() {
1297
+
if (timelineIndex >= timelineNames.length) {
1299
+
document.getElementById("downloadAllBtn").disabled =
1302
+
`Render complete! ${totalHours} images rendered.`,
1308
+
const timelineName = timelineNames[timelineIndex];
1309
+
const timelineConfig = timelines[timelineName];
1310
+
const hours = Object.keys(timelineConfig).sort(
1311
+
(a, b) => parseInt(a) - parseInt(b),
1314
+
renderedImages[timelineName] = {};
1316
+
let hourIndex = 0;
1318
+
function renderNextHour() {
1319
+
if (hourIndex >= hours.length) {
1320
+
// Timeline done, move to next
1322
+
setTimeout(renderNextTimeline, 10);
1326
+
const hour = hours[hourIndex];
1327
+
const hourConfig = timelineConfig[hour];
1329
+
// Render this hour
1330
+
const imageData = renderHourToDataURL(hourConfig);
1332
+
renderedImages[timelineName][hour] = imageData;
1334
+
updateProgress(currentHour, totalHours);
1335
+
updateGalleryInfo(
1338
+
timelineNames.length,
1342
+
addToGallery(timelineName, hour, imageData);
1346
+
// Small delay to keep UI responsive
1347
+
setTimeout(renderNextHour, 100);
1353
+
renderNextTimeline();
1356
+
function addToGallery(timelineName, hour, imageDataURL) {
1357
+
const gallery = document.getElementById("galleryContent");
1359
+
// Remove placeholder if it exists
1360
+
const placeholder =
1361
+
document.getElementById("galleryPlaceholder");
1362
+
if (placeholder) {
1363
+
placeholder.remove();
1364
+
// Reset gallery styles
1365
+
gallery.style.minHeight = "auto";
1366
+
gallery.style.border = "none";
1367
+
gallery.style.alignItems = "stretch";
1368
+
gallery.style.justifyContent = "stretch";
1371
+
const item = document.createElement("div");
1372
+
item.style.cssText = `
1373
+
border: 1px solid #ddd;
1374
+
border-radius: 8px;
1376
+
background: white;
1377
+
transition: transform 0.2s, box-shadow 0.2s;
1381
+
const hourPadded = hour.toString().padStart(2, "0");
1383
+
item.innerHTML = `
1384
+
<img src="${imageDataURL}" style="width: 100%; height: 80px; object-fit: cover;">
1385
+
<div style="padding: 8px; text-align: center;">
1386
+
<div style="font-size: 11px; font-weight: bold; color: #333;">${timelineName}</div>
1387
+
<div style="font-size: 10px; color: #666;">Hour ${hourPadded}</div>
1391
+
// Add hover effect
1392
+
item.addEventListener("mouseenter", () => {
1393
+
item.style.transform = "scale(1.05)";
1394
+
item.style.boxShadow = "0 4px 15px rgba(0,0,0,0.2)";
1397
+
item.addEventListener("mouseleave", () => {
1398
+
item.style.transform = "scale(1)";
1399
+
item.style.boxShadow = "none";
1402
+
// Click to download individual image
1403
+
item.addEventListener("click", () => {
1404
+
const link = document.createElement("a");
1405
+
link.href = imageDataURL;
1406
+
link.download = `${timelineName}_hour_${hourPadded}.jpg`;
1409
+
`Downloaded ${timelineName} hour ${hourPadded}`,
1414
+
gallery.appendChild(item);
1417
+
function updateGalleryInfo(current, total, timelineCount) {
1418
+
const info = document.getElementById("galleryInfo");
1419
+
info.textContent = `${current}/${total} images rendered across ${timelineCount} timeline(s)`;
1422
+
function clearGallery() {
1423
+
const gallery = document.getElementById("galleryContent");
1424
+
gallery.innerHTML = "";
1426
+
// Reset gallery to placeholder state
1427
+
gallery.style.minHeight = "100px";
1428
+
gallery.style.border = "2px dashed #ddd";
1429
+
gallery.style.alignItems = "center";
1430
+
gallery.style.justifyContent = "center";
1431
+
gallery.style.padding = "20px";
1433
+
// Add placeholder back
1434
+
const placeholder = document.createElement("div");
1435
+
placeholder.id = "galleryPlaceholder";
1436
+
placeholder.style.cssText =
1437
+
"grid-column: 1 / -1; text-align: center; color: #999; font-style: italic;";
1438
+
placeholder.textContent =
1439
+
'Click "Render All" to generate images and see them here';
1440
+
gallery.appendChild(placeholder);
1443
+
renderedImages = {};
1444
+
document.getElementById("downloadAllBtn").disabled = true;
1445
+
document.getElementById("galleryInfo").textContent =
1446
+
"Ready to render timelines";
1447
+
showStatus("Gallery cleared", "success");
1450
+
function renderAllFromConfig() {
1451
+
if (!baseImg || !matteImg) {
1452
+
showStatus("Please upload both images first!", "error");
1456
+
const configText = document
1457
+
.getElementById("bulkConfigInput")
1459
+
if (!configText) {
1460
+
showStatus("Please paste a config to render!", "error");
1466
+
config = JSON.parse(configText);
1468
+
showStatus("Invalid JSON config!", "error");
1472
+
// Validate config structure
1473
+
if (!config.timelines) {
1475
+
'Config must have "timelines" property!',
1481
+
// Clear previous renders
1482
+
renderedImages = {};
1484
+
// Show progress bar
1485
+
document.getElementById("bulkProgress").style.display = "block";
1486
+
document.getElementById("downloadAllBtn").disabled = true;
1488
+
// Count total hours to render
1489
+
const timelines = Object.keys(config.timelines);
1490
+
let totalHours = 0;
1491
+
let currentHour = 0;
1493
+
timelines.forEach((timeline) => {
1494
+
const hours = Object.keys(config.timelines[timeline]);
1495
+
totalHours += hours.length;
1498
+
updateProgress(0, totalHours);
1500
+
`Starting bulk render: ${timelines.length} timelines, ${totalHours} hours total`,
1504
+
// Render all timelines sequentially with small delays for UI responsiveness
1505
+
let timelineIndex = 0;
1507
+
function renderNextTimeline() {
1508
+
if (timelineIndex >= timelines.length) {
1510
+
document.getElementById("downloadAllBtn").disabled =
1513
+
`Bulk render complete! ${totalHours} images rendered.`,
1519
+
const timelineName = timelines[timelineIndex];
1520
+
const timelineConfig = config.timelines[timelineName];
1521
+
const hours = Object.keys(timelineConfig);
1523
+
renderedImages[timelineName] = {};
1525
+
let hourIndex = 0;
1527
+
function renderNextHour() {
1528
+
if (hourIndex >= hours.length) {
1529
+
// Timeline done, move to next
1531
+
setTimeout(renderNextTimeline, 10);
1535
+
const hour = hours[hourIndex];
1536
+
const hourConfig = timelineConfig[hour];
1538
+
// Render this hour
1539
+
const imageData = renderHourToDataURL(hourConfig);
1541
+
renderedImages[timelineName][hour] = imageData;
1543
+
updateProgress(currentHour, totalHours);
1547
+
// Small delay to keep UI responsive
1548
+
setTimeout(renderNextHour, 50);
1554
+
renderNextTimeline();
1557
+
function renderHourToDataURL(config) {
1559
+
// Create a temporary canvas for this render
1560
+
const canvas = document.createElement("canvas");
1561
+
const ctx = canvas.getContext("2d");
1563
+
// Set canvas size to match base image
1564
+
canvas.width = baseImg.width;
1565
+
canvas.height = baseImg.height;
1567
+
// Create gradient
1568
+
const gradient = createGradient(
1576
+
ctx.clearRect(0, 0, canvas.width, canvas.height);
1578
+
// Create background layer
1579
+
const backgroundLayer = blendImages(
1582
+
config.backgroundIntensity,
1584
+
ctx.drawImage(backgroundLayer, 0, 0);
1586
+
// Create and apply foreground layer
1587
+
let foregroundLayer;
1588
+
if (config.foregroundIntensity === 0) {
1589
+
foregroundLayer = baseImg;
1591
+
foregroundLayer = blendImages(
1594
+
config.foregroundIntensity,
1599
+
const maskedForeground = document.createElement("canvas");
1600
+
maskedForeground.width = canvas.width;
1601
+
maskedForeground.height = canvas.height;
1602
+
const maskCtx = maskedForeground.getContext("2d");
1604
+
maskCtx.drawImage(foregroundLayer, 0, 0);
1606
+
// Create proper alpha mask
1607
+
const matteDataCanvas = document.createElement("canvas");
1608
+
matteDataCanvas.width = matteImg.width;
1609
+
matteDataCanvas.height = matteImg.height;
1610
+
const matteDataCtx = matteDataCanvas.getContext("2d");
1611
+
matteDataCtx.drawImage(matteImg, 0, 0);
1613
+
const imageData = matteDataCtx.getImageData(
1619
+
const data = imageData.data;
1621
+
for (let i = 0; i < data.length; i += 4) {
1622
+
const brightness =
1623
+
(data[i] + data[i + 1] + data[i + 2]) / 3;
1624
+
if (brightness > 128) {
1625
+
data[i + 3] = 255;
1630
+
data[i + 1] = 255;
1631
+
data[i + 2] = 255;
1634
+
matteDataCtx.putImageData(imageData, 0, 0);
1636
+
maskCtx.globalCompositeOperation = "destination-in";
1637
+
maskCtx.drawImage(
1645
+
ctx.globalCompositeOperation = "source-over";
1646
+
ctx.drawImage(maskedForeground, 0, 0);
1648
+
// Return as JPEG data URL
1649
+
return canvas.toDataURL("image/jpeg", 0.95);
1651
+
console.error("Failed to render hour:", e);
1656
+
function updateProgress(current, total) {
1657
+
const percentage = total > 0 ? (current / total) * 100 : 0;
1658
+
document.getElementById("progressBar").style.width =
1660
+
document.getElementById("progressText").textContent =
1661
+
`${current}/${total}`;
1664
+
async function downloadAllRendered() {
1665
+
if (Object.keys(renderedImages).length === 0) {
1666
+
showStatus("No rendered images to download!", "error");
1670
+
showStatus("Preparing download...", "success");
1672
+
// Simple approach: create individual downloads if ZIP fails
1674
+
// Try to load JSZip if not available
1675
+
if (typeof JSZip === "undefined") {
1676
+
showStatus("Loading ZIP library...", "success");
1677
+
await loadJSZip();
1680
+
await createZipDownload();
1682
+
console.error("ZIP download failed:", e);
1684
+
"ZIP failed, downloading individual files...",
1687
+
downloadIndividualFiles();
1691
+
function loadJSZip() {
1692
+
return new Promise((resolve, reject) => {
1693
+
const script = document.createElement("script");
1695
+
"https://cdnjs.cloudflare.com/ajax/libs/jszip/3.10.1/jszip.min.js";
1696
+
script.onload = resolve;
1697
+
script.onerror = reject;
1698
+
document.head.appendChild(script);
1702
+
async function createZipDownload() {
1703
+
const zip = new JSZip();
1705
+
// First, fetch and add the shell script to the root
1707
+
showStatus("Including shell script...", "success");
1709
+
// Try local copy first, then relative path, then original source as fallback
1710
+
const scriptUrls = ["/pfp-updates/bsky-pfp-updates.sh"];
1712
+
let scriptContent = null;
1713
+
for (const url of scriptUrls) {
1715
+
const scriptResponse = await fetch(url);
1716
+
if (scriptResponse.ok) {
1717
+
scriptContent = await scriptResponse.text();
1722
+
`Failed to fetch from ${url}:`,
1725
+
// Continue to next URL
1729
+
if (scriptContent) {
1730
+
zip.file("bsky-pfp-updates.sh", scriptContent);
1733
+
"Could not load script from any source",
1738
+
"Warning: Could not include shell script, continuing without it...",
1741
+
console.error("Script loading error:", error);
1744
+
console.error("Failed to fetch shell script:", e);
1746
+
"Warning: Could not fetch shell script, continuing without it...",
1751
+
// Add the timeline config to the root
1753
+
timelines: timelines,
1755
+
created: new Date().toISOString(),
1756
+
tool: "Sky Gradient Timeline Builder",
1760
+
const configText = JSON.stringify(config, null, 2);
1761
+
zip.file("timeline_config.json", configText);
1763
+
// Create rendered_timelines folder and add all images
1764
+
const renderedFolder = zip.folder("rendered_timelines");
1766
+
for (const [timelineName, timelineImages] of Object.entries(
1769
+
const timelineFolder = renderedFolder.folder(timelineName);
1771
+
for (const [hour, imageDataURL] of Object.entries(
1774
+
// Convert data URL to binary data
1775
+
const base64Data = imageDataURL.split(",")[1];
1776
+
const binaryData = atob(base64Data);
1777
+
const bytes = new Uint8Array(binaryData.length);
1778
+
for (let i = 0; i < binaryData.length; i++) {
1779
+
bytes[i] = binaryData.charCodeAt(i);
1782
+
const hourPadded = hour.padStart(2, "0");
1783
+
timelineFolder.file(`hour_${hourPadded}.jpg`, bytes);
1787
+
// Generate and download ZIP
1788
+
showStatus("Creating ZIP file...", "success");
1789
+
const content = await zip.generateAsync({
1791
+
compression: "DEFLATE",
1792
+
compressionOptions: { level: 6 },
1795
+
// Create download link
1796
+
const link = document.createElement("a");
1797
+
const url = URL.createObjectURL(content);
1799
+
link.download = "bluesky-pfp-updates.zip";
1801
+
// Trigger download
1802
+
document.body.appendChild(link);
1804
+
document.body.removeChild(link);
1807
+
setTimeout(() => URL.revokeObjectURL(url), 1000);
1809
+
showStatus("ZIP file downloaded with shell script!", "success");
1812
+
function importConfigToTimelines() {
1813
+
const configText = document
1814
+
.getElementById("bulkConfigInput")
1816
+
if (!configText) {
1817
+
showStatus("Please paste a config to import!", "error");
1823
+
config = JSON.parse(configText);
1825
+
showStatus("Invalid JSON config!", "error");
1829
+
// Validate config structure
1830
+
if (!config.timelines) {
1832
+
'Config must have "timelines" property!',
1838
+
// Clear existing timelines (except keep one if empty)
1839
+
const wasEmpty = Object.keys(timelines).length === 0;
1842
+
// Clear existing tabs
1843
+
document.getElementById("timelineTabs").innerHTML = "";
1845
+
// Import all timelines from config
1846
+
const importedTimelines = Object.keys(config.timelines);
1847
+
let importedCount = 0;
1849
+
for (const [timelineName, timelineConfig] of Object.entries(
1852
+
// Validate timeline structure
1853
+
if (typeof timelineConfig !== "object") {
1855
+
`Invalid timeline structure for "${timelineName}"`,
1861
+
// Convert timeline config to our format
1862
+
timelines[timelineName] = {};
1864
+
for (const [hour, hourConfig] of Object.entries(
1867
+
const hourNum = parseInt(hour);
1871
+
hourConfig.color1 &&
1874
+
timelines[timelineName][hourNum] = {
1875
+
color1: hourConfig.color1,
1876
+
color2: hourConfig.color2,
1877
+
backgroundIntensity:
1878
+
hourConfig.backgroundIntensity || 40,
1879
+
foregroundIntensity:
1880
+
hourConfig.foregroundIntensity || 8,
1885
+
// Create tab for this timeline
1886
+
const tab = document.createElement("div");
1887
+
tab.className = "timeline-tab";
1888
+
tab.dataset.timeline = timelineName;
1889
+
tab.textContent = timelineName;
1890
+
tab.onclick = () => switchTimeline(timelineName);
1891
+
document.getElementById("timelineTabs").appendChild(tab);
1896
+
if (importedCount === 0) {
1897
+
showStatus("No valid timelines found in config!", "error");
1898
+
// Restore default if nothing imported
1899
+
timelines.sunny = {};
1900
+
for (let hour = 0; hour < 24; hour++) {
1901
+
timelines.sunny[hour] = getDefaultConfigForHour(hour);
1903
+
const tab = document.createElement("div");
1904
+
tab.className = "timeline-tab active";
1905
+
tab.dataset.timeline = "sunny";
1906
+
tab.textContent = "sunny";
1907
+
tab.onclick = () => switchTimeline("sunny");
1908
+
document.getElementById("timelineTabs").appendChild(tab);
1909
+
currentTimeline = "sunny";
1911
+
// Switch to first imported timeline
1912
+
const firstTimeline = importedTimelines[0];
1913
+
currentTimeline = firstTimeline;
1915
+
.querySelector(`[data-timeline="${firstTimeline}"]`)
1916
+
.classList.add("active");
1917
+
document.getElementById("currentTimelineName").textContent =
1922
+
initializeTimeline();
1925
+
`Successfully imported ${importedCount} timeline(s): ${importedTimelines.join(", ")}`,
1929
+
// Clear the config input
1930
+
document.getElementById("bulkConfigInput").value = "";
1933
+
function downloadIndividualFiles() {
1934
+
let downloadCount = 0;
1935
+
const totalFiles = Object.values(renderedImages).reduce(
1936
+
(sum, timeline) => sum + Object.keys(timeline).length,
1940
+
for (const [timelineName, timelineImages] of Object.entries(
1943
+
for (const [hour, imageDataURL] of Object.entries(
1946
+
const hourPadded = hour.padStart(2, "0");
1947
+
const filename = `${timelineName}_hour_${hourPadded}.jpg`;
1949
+
// Create download link
1950
+
const link = document.createElement("a");
1951
+
link.href = imageDataURL;
1952
+
link.download = filename;
1954
+
// Trigger download with small delay
1955
+
setTimeout(() => {
1956
+
document.body.appendChild(link);
1958
+
document.body.removeChild(link);
1961
+
if (downloadCount === totalFiles) {
1963
+
`Downloaded ${totalFiles} individual files!`,
1967
+
}, downloadCount * 100); // 100ms delay between downloads
1972
+
`Starting ${totalFiles} individual downloads...`,
1977
+
function copyToClipboard() {
1978
+
const textarea = document.getElementById("configOutput");
1979
+
if (!textarea.value.trim()) {
1981
+
"Nothing to copy! Generate a config first.",
1987
+
textarea.select();
1988
+
document.execCommand("copy");
1990
+
// Try the modern API as fallback
1991
+
if (navigator.clipboard) {
1992
+
navigator.clipboard
1993
+
.writeText(textarea.value)
1996
+
"Config copied to clipboard!",
2002
+
"Please manually copy the text",
2008
+
"Config selected - press Ctrl+C to copy",
2014
+
function showStatus(message, type) {
2015
+
const status = document.getElementById("uploadStatus");
2016
+
status.textContent = message;
2017
+
status.className = `status ${type}`;
2018
+
setTimeout(() => (status.style.display = "none"), 3000);
2021
+
// Image upload handlers
2023
+
.getElementById("baseImage")
2024
+
.addEventListener("change", function (e) {
2025
+
const file = e.target.files[0];
2027
+
const reader = new FileReader();
2028
+
reader.onload = function (e) {
2029
+
const img = new Image();
2030
+
img.onload = function () {
2032
+
showStatus("Base image loaded!", "success");
2035
+
img.src = e.target.result;
2037
+
reader.readAsDataURL(file);
2042
+
.getElementById("matteImage")
2043
+
.addEventListener("change", function (e) {
2044
+
const file = e.target.files[0];
2046
+
const reader = new FileReader();
2047
+
reader.onload = function (e) {
2048
+
const img = new Image();
2049
+
img.onload = function () {
2051
+
showStatus("Matte loaded!", "success");
2054
+
img.src = e.target.result;
2056
+
reader.readAsDataURL(file);
2062
+
.getElementById("bgIntensity")
2063
+
.addEventListener("input", function () {
2064
+
document.getElementById("bgValue").textContent =
2070
+
.getElementById("fgIntensity")
2071
+
.addEventListener("input", function () {
2072
+
document.getElementById("fgValue").textContent =
2078
+
.getElementById("color1")
2079
+
.addEventListener("change", updatePreview);
2081
+
.getElementById("color2")
2082
+
.addEventListener("change", updatePreview);
2084
+
function updatePreview() {
2085
+
if (!baseImg || !matteImg) return;
2087
+
const canvas = document.getElementById("previewCanvas");
2088
+
const ctx = canvas.getContext("2d");
2090
+
const color1 = document.getElementById("color1").value;
2091
+
const color2 = document.getElementById("color2").value;
2092
+
const bgIntensity = parseInt(
2093
+
document.getElementById("bgIntensity").value,
2095
+
const fgIntensity = parseInt(
2096
+
document.getElementById("fgIntensity").value,
2099
+
// Create gradient
2100
+
const gradient = createGradient(
2108
+
ctx.clearRect(0, 0, canvas.width, canvas.height);
2110
+
// Create background layer
2111
+
const backgroundLayer = blendImages(
2124
+
// Create and apply foreground layer
2125
+
let foregroundLayer;
2126
+
if (fgIntensity === 0) {
2127
+
foregroundLayer = baseImg;
2129
+
foregroundLayer = blendImages(
2137
+
const maskedForeground = document.createElement("canvas");
2138
+
maskedForeground.width = canvas.width;
2139
+
maskedForeground.height = canvas.height;
2140
+
const maskCtx = maskedForeground.getContext("2d");
2142
+
maskCtx.drawImage(
2150
+
// Create proper alpha mask
2151
+
const matteDataCanvas = document.createElement("canvas");
2152
+
matteDataCanvas.width = matteImg.width;
2153
+
matteDataCanvas.height = matteImg.height;
2154
+
const matteDataCtx = matteDataCanvas.getContext("2d");
2155
+
matteDataCtx.drawImage(matteImg, 0, 0);
2157
+
const imageData = matteDataCtx.getImageData(
2163
+
const data = imageData.data;
2165
+
for (let i = 0; i < data.length; i += 4) {
2166
+
const brightness =
2167
+
(data[i] + data[i + 1] + data[i + 2]) / 3;
2168
+
if (brightness > 128) {
2169
+
data[i + 3] = 255;
2174
+
data[i + 1] = 255;
2175
+
data[i + 2] = 255;
2178
+
matteDataCtx.putImageData(imageData, 0, 0);
2180
+
maskCtx.globalCompositeOperation = "destination-in";
2181
+
maskCtx.drawImage(
2189
+
ctx.globalCompositeOperation = "source-over";
2190
+
ctx.drawImage(maskedForeground, 0, 0);
2193
+
function createGradient(width, height, color1, color2) {
2194
+
const gradCanvas = document.createElement("canvas");
2195
+
gradCanvas.width = width;
2196
+
gradCanvas.height = height;
2197
+
const gradCtx = gradCanvas.getContext("2d");
2199
+
const gradient = gradCtx.createLinearGradient(0, 0, 0, height);
2200
+
gradient.addColorStop(0, color1);
2201
+
gradient.addColorStop(1, color2);
2203
+
gradCtx.fillStyle = gradient;
2204
+
gradCtx.fillRect(0, 0, width, height);
2206
+
return gradCanvas;
2209
+
function blendImages(base, overlay, intensity) {
2210
+
const blendCanvas = document.createElement("canvas");
2211
+
blendCanvas.width = base.width;
2212
+
blendCanvas.height = base.height;
2213
+
const blendCtx = blendCanvas.getContext("2d");
2215
+
blendCtx.drawImage(base, 0, 0);
2216
+
blendCtx.globalCompositeOperation = "overlay";
2217
+
blendCtx.globalAlpha = intensity / 100;
2218
+
blendCtx.drawImage(overlay, 0, 0, base.width, base.height);
2220
+
return blendCanvas;
2224
+
initializeTimeline();
dunkirk.sh