Hello mr. Would you like some bloat?

jsconfig.json

@@ -10,7 +10,12 @@
 		"sourceMap": true,
 		"strict": true,
 		"moduleResolution": "bundler",
-        "allowImportingTsExtensions": true
+        "allowImportingTsExtensions": true,
+		"paths": {
+			"@images/*": ["./src/images/*"],
+			"@src/*": ["./src/*"],
+			"@static/*": ["./static/*"]
+		}
 	}
 	// Path aliases are handled by https://kit.svelte.dev/docs/configuration#alias and https://kit.svelte.dev/docs/configuration#files
 	//

src/app.html

@@ -12,23 +12,23 @@
 		%sveltekit.head%
 
 		<script>
-			let theme = null;
-
-			if (typeof localStorage !== 'undefined') {
-				theme = localStorage.getItem('theme');
-			}
-
-			window.AvailableThemes =  ["green", "netherrack", "dark", "pink"];
-			
-			if (!theme) {
-				const randomNumber = Math.floor(Math.random() * 4);
-				console.log("Slecting: " + AvailableThemes[randomNumber]);
-				document.documentElement.setAttribute('data-theme', AvailableThemes[randomNumber]);
-				localStorage.setItem('theme', AvailableThemes[randomNumber]);
-			} else {
-				console.log("Slecting: " + theme);
-				document.documentElement.setAttribute('data-theme', theme);
-			}
+			//let theme = null;
+//
+			//if (typeof localStorage !== 'undefined') {
+			//	theme = localStorage.getItem('theme');
+			//}
+//
+			//window.AvailableThemes =  ["green", "netherrack", "dark", "pink"];
+			//
+			//if (!theme) {
+			//	const randomNumber = Math.floor(Math.random() * 4);
+			//	console.log("Slecting: " + AvailableThemes[randomNumber]);
+			//	document.documentElement.setAttribute('data-theme', AvailableThemes[randomNumber]);
+			//	localStorage.setItem('theme', AvailableThemes[randomNumber]);
+			//} else {
+			//	console.log("Slecting: " + theme);
+			//	document.documentElement.setAttribute('data-theme', theme);
+			//}
 		</script>
 
 	</head>

src/routes/test/+page.svelte

@@ -0,0 +1,53 @@
+<script lang="ts">
+    import { onMount } from "svelte";
+
+  let scrollY = 0;
+
+  const animateInterval = 16;
+  const startMove = 64;
+  const numFrames = 312;
+
+  let framesLoaded = 1;
+  let frameLoader: HTMLImageElement;
+  let frameLoader2: HTMLImageElement;
+  let loadingInterval: number | undefined;
+
+  onMount(()=>{
+    setTimeout(() => {
+        loadingInterval = setInterval(()=>{
+            frameLoader.src = "/images/spinning_cat/untitled_" + framesLoaded.toString().padStart(5, '0') + ".png";
+            framesLoaded++;
+            frameLoader2.src = "/images/spinning_cat/untitled_" + framesLoaded.toString().padStart(5, '0') + ".png";
+            framesLoaded++;
+
+            if (framesLoaded >= numFrames) {
+                clearInterval(loadingInterval);
+            }
+        }, 5);
+    }, 200);
+  });
+
+  let frameIndex = 0;
+  $: frameIndex = Math.min(Math.floor(Math.max(scrollY-startMove, 0) / animateInterval+1), numFrames);
+</script>
+
+<svelte:window bind:scrollY />
+
+<div class="w-full flex justify-center" style="height: 5000px;">
+    <!-- Image Loader -->
+    <img bind:this={frameLoader} style="height: 0.01px; width: 0.01px;" class="" src="/images/spinning_cat/untitled_00001.png" alt="">
+    <img bind:this={frameLoader2} style="height: 0.01px; width: 0.01px;" class="" src="/images/spinning_cat/untitled_00001.png" alt="">
+
+    <!-- add "top-0" so it sticks at the top -->
+    <div class="sticky top-0" style="width: 200px; height: 200px;">
+        <div class="flex justify-center items-center" style="width: 200px; height: 200px;">
+            <img src="/images/spinning_cat/untitled_{frameIndex.toString().padStart(5, '0')}.png" class="object-contain w-full h-full" alt="">
+        </div>
+        <div>{frameIndex}</div>
+        
+    </div>
+</div>
+
+<div class="h-[1000px] bg-amber-700 w-full">
+
+</div>

static/images/cropper.py

@@ -0,0 +1,55 @@
+import os
+import glob
+from PIL import Image
+from concurrent.futures import ProcessPoolExecutor, as_completed
+
+# Directories
+input_dir = 'spinning_cat'
+output_dir = 'spinning_cat_cropped'
+
+# Ensure output directory exists
+def ensure_output_dir():
+    if not os.path.exists(output_dir):
+        os.makedirs(output_dir)
+
+# Process a single image: crop transparent borders and save
+def process_image(filepath):
+    try:
+        img = Image.open(filepath)
+        if img.mode != 'RGBA':
+            img = img.convert('RGBA')
+        alpha = img.split()[-1]
+        bbox = alpha.getbbox()
+        cropped = img.crop(bbox) if bbox else img
+        filename = os.path.basename(filepath)
+        out_path = os.path.join(output_dir, filename)
+        cropped.save(out_path)
+        return out_path, None
+    except Exception as e:
+        return filepath, e
+
+# Main execution: parallel processing
+
+def main():
+    ensure_output_dir()
+    pattern = os.path.join(input_dir, 'untitled_*.png')
+    files = sorted(glob.glob(pattern))
+    if not files:
+        print(f"No files found in '{input_dir}' with pattern 'untitled_*.png'.")
+        return
+
+    with ProcessPoolExecutor() as executor:
+        futures = {executor.submit(process_image, fp): fp for fp in files}
+        for future in as_completed(futures):
+            fp = futures[future]
+            out_path, error = future.result()
+            if error:
+                print(f"Error processing {fp}: {error}")
+            else:
+                print(f"Cropped and saved: {out_path}")
+
+    print("Processing complete.")
+
+if __name__ == '__main__':
+    main()
+