VirtualBrainLab · kjy5 · Jan 29, 2025 · Jan 28, 2025 · Jan 29, 2025 · Jan 29, 2025
diff --git a/src/assets/intro/0000.avif b/src/assets/intro/0000.avif
diff --git a/src/assets/intro/0000.webp b/src/assets/intro/0000.webp
diff --git a/src/assets/intro/0001.avif b/src/assets/intro/0001.avif
diff --git a/src/assets/intro/0001.webp b/src/assets/intro/0001.webp
diff --git a/src/assets/intro/0002.avif b/src/assets/intro/0002.avif
diff --git a/src/assets/intro/0002.webp b/src/assets/intro/0002.webp
diff --git a/src/assets/intro/0003.avif b/src/assets/intro/0003.avif
diff --git a/src/assets/intro/0003.webp b/src/assets/intro/0003.webp
diff --git a/src/assets/intro/0004.avif b/src/assets/intro/0004.avif
diff --git a/src/assets/intro/0004.webp b/src/assets/intro/0004.webp
diff --git a/src/assets/intro/0005.avif b/src/assets/intro/0005.avif
diff --git a/src/assets/intro/0005.webp b/src/assets/intro/0005.webp
diff --git a/src/assets/intro/0006.avif b/src/assets/intro/0006.avif
diff --git a/src/assets/intro/0006.webp b/src/assets/intro/0006.webp
diff --git a/src/assets/intro/0007.avif b/src/assets/intro/0007.avif
diff --git a/src/assets/intro/0007.webp b/src/assets/intro/0007.webp
diff --git a/src/assets/intro/0008.avif b/src/assets/intro/0008.avif
diff --git a/src/assets/intro/0008.webp b/src/assets/intro/0008.webp
diff --git a/src/assets/intro/0009.avif b/src/assets/intro/0009.avif
diff --git a/src/assets/intro/0009.webp b/src/assets/intro/0009.webp
diff --git a/src/assets/intro/0010.avif b/src/assets/intro/0010.avif
diff --git a/src/assets/intro/0010.webp b/src/assets/intro/0010.webp
diff --git a/src/assets/intro/0011.avif b/src/assets/intro/0011.avif
diff --git a/src/assets/intro/0011.webp b/src/assets/intro/0011.webp
diff --git a/src/assets/intro/0012.avif b/src/assets/intro/0012.avif
diff --git a/src/assets/intro/0012.webp b/src/assets/intro/0012.webp
diff --git a/src/assets/intro/0013.avif b/src/assets/intro/0013.avif
diff --git a/src/assets/intro/0013.webp b/src/assets/intro/0013.webp
diff --git a/src/assets/intro/0014.avif b/src/assets/intro/0014.avif
diff --git a/src/assets/intro/0014.webp b/src/assets/intro/0014.webp
diff --git a/src/assets/intro/0015.avif b/src/assets/intro/0015.avif
diff --git a/src/assets/intro/0015.webp b/src/assets/intro/0015.webp
diff --git a/src/assets/intro/0016.avif b/src/assets/intro/0016.avif
diff --git a/src/assets/intro/0016.webp b/src/assets/intro/0016.webp
diff --git a/src/assets/intro/0017.avif b/src/assets/intro/0017.avif
diff --git a/src/assets/intro/0017.webp b/src/assets/intro/0017.webp
diff --git a/src/assets/intro/0018.avif b/src/assets/intro/0018.avif
diff --git a/src/assets/intro/0018.webp b/src/assets/intro/0018.webp
diff --git a/src/assets/intro/0019.avif b/src/assets/intro/0019.avif
diff --git a/src/assets/intro/0019.webp b/src/assets/intro/0019.webp
diff --git a/src/assets/intro/0020.avif b/src/assets/intro/0020.avif
diff --git a/src/assets/intro/0020.webp b/src/assets/intro/0020.webp
diff --git a/src/assets/intro/0021.avif b/src/assets/intro/0021.avif
diff --git a/src/assets/intro/0021.webp b/src/assets/intro/0021.webp
diff --git a/src/assets/intro/0022.avif b/src/assets/intro/0022.avif
diff --git a/src/assets/intro/0022.webp b/src/assets/intro/0022.webp
diff --git a/src/assets/intro/0023.avif b/src/assets/intro/0023.avif
diff --git a/src/assets/intro/0023.webp b/src/assets/intro/0023.webp
diff --git a/src/assets/intro/0024.avif b/src/assets/intro/0024.avif
diff --git a/src/assets/intro/0024.webp b/src/assets/intro/0024.webp
diff --git a/src/assets/intro/0025.avif b/src/assets/intro/0025.avif
diff --git a/src/assets/intro/0025.webp b/src/assets/intro/0025.webp
diff --git a/src/assets/intro/0026.avif b/src/assets/intro/0026.avif
diff --git a/src/assets/intro/0026.webp b/src/assets/intro/0026.webp
diff --git a/src/assets/intro/0027.avif b/src/assets/intro/0027.avif
diff --git a/src/assets/intro/0027.webp b/src/assets/intro/0027.webp
diff --git a/src/assets/intro/0028.avif b/src/assets/intro/0028.avif
diff --git a/src/assets/intro/0028.webp b/src/assets/intro/0028.webp
diff --git a/src/assets/intro/0029.avif b/src/assets/intro/0029.avif
diff --git a/src/assets/intro/0029.webp b/src/assets/intro/0029.webp
diff --git a/src/assets/intro/0030.avif b/src/assets/intro/0030.avif
diff --git a/src/assets/intro/0030.webp b/src/assets/intro/0030.webp
diff --git a/src/assets/intro/0031.avif b/src/assets/intro/0031.avif
diff --git a/src/assets/intro/0031.webp b/src/assets/intro/0031.webp
diff --git a/src/assets/intro/0032.avif b/src/assets/intro/0032.avif
diff --git a/src/assets/intro/0032.webp b/src/assets/intro/0032.webp
diff --git a/src/assets/intro/0033.avif b/src/assets/intro/0033.avif
diff --git a/src/assets/intro/0033.webp b/src/assets/intro/0033.webp
diff --git a/src/assets/intro/0034.avif b/src/assets/intro/0034.avif
diff --git a/src/assets/intro/0034.webp b/src/assets/intro/0034.webp
diff --git a/src/assets/intro/0035.avif b/src/assets/intro/0035.avif
diff --git a/src/assets/intro/0035.webp b/src/assets/intro/0035.webp
diff --git a/src/assets/intro/0036.avif b/src/assets/intro/0036.avif
diff --git a/src/assets/intro/0036.webp b/src/assets/intro/0036.webp
diff --git a/src/assets/intro/0037.avif b/src/assets/intro/0037.avif
diff --git a/src/assets/intro/0037.webp b/src/assets/intro/0037.webp
diff --git a/src/assets/intro/0038.avif b/src/assets/intro/0038.avif
diff --git a/src/assets/intro/0038.webp b/src/assets/intro/0038.webp
diff --git a/src/assets/intro/0039.avif b/src/assets/intro/0039.avif
diff --git a/src/assets/intro/0039.webp b/src/assets/intro/0039.webp
diff --git a/src/assets/intro/0040.avif b/src/assets/intro/0040.avif
diff --git a/src/assets/intro/0040.webp b/src/assets/intro/0040.webp
diff --git a/src/assets/intro/0041.avif b/src/assets/intro/0041.avif
diff --git a/src/assets/intro/0041.webp b/src/assets/intro/0041.webp
diff --git a/src/assets/intro/0042.avif b/src/assets/intro/0042.avif
diff --git a/src/assets/intro/0042.webp b/src/assets/intro/0042.webp
diff --git a/src/assets/intro/0043.avif b/src/assets/intro/0043.avif
diff --git a/src/assets/intro/0043.webp b/src/assets/intro/0043.webp
diff --git a/src/assets/intro/0044.avif b/src/assets/intro/0044.avif
diff --git a/src/assets/intro/0044.webp b/src/assets/intro/0044.webp
diff --git a/src/assets/intro/0045.avif b/src/assets/intro/0045.avif
diff --git a/src/assets/intro/0045.webp b/src/assets/intro/0045.webp
diff --git a/src/assets/intro/0046.avif b/src/assets/intro/0046.avif
diff --git a/src/assets/intro/0046.webp b/src/assets/intro/0046.webp
diff --git a/src/assets/intro/0047.avif b/src/assets/intro/0047.avif
diff --git a/src/assets/intro/0047.webp b/src/assets/intro/0047.webp
diff --git a/src/assets/intro/0048.avif b/src/assets/intro/0048.avif
diff --git a/src/assets/intro/0048.webp b/src/assets/intro/0048.webp
diff --git a/src/assets/intro/0049.avif b/src/assets/intro/0049.avif
diff --git a/src/assets/intro/0049.webp b/src/assets/intro/0049.webp
diff --git a/src/assets/intro/0050.avif b/src/assets/intro/0050.avif
diff --git a/src/assets/intro/0050.webp b/src/assets/intro/0050.webp
diff --git a/src/assets/intro/0051.avif b/src/assets/intro/0051.avif
diff --git a/src/assets/intro/0051.webp b/src/assets/intro/0051.webp
diff --git a/src/assets/intro/0052.avif b/src/assets/intro/0052.avif
diff --git a/src/assets/intro/0052.webp b/src/assets/intro/0052.webp
diff --git a/src/assets/intro/0053.avif b/src/assets/intro/0053.avif
diff --git a/src/assets/intro/0053.webp b/src/assets/intro/0053.webp
diff --git a/src/assets/intro/0054.avif b/src/assets/intro/0054.avif
diff --git a/src/assets/intro/0054.webp b/src/assets/intro/0054.webp
diff --git a/src/assets/intro/0055.avif b/src/assets/intro/0055.avif
diff --git a/src/assets/intro/0055.webp b/src/assets/intro/0055.webp
diff --git a/src/assets/intro/0056.avif b/src/assets/intro/0056.avif
diff --git a/src/assets/intro/0056.webp b/src/assets/intro/0056.webp
diff --git a/src/assets/intro/0057.avif b/src/assets/intro/0057.avif
diff --git a/src/assets/intro/0057.webp b/src/assets/intro/0057.webp
diff --git a/src/assets/intro/0058.avif b/src/assets/intro/0058.avif
diff --git a/src/assets/intro/0058.webp b/src/assets/intro/0058.webp
diff --git a/src/assets/intro/0059.avif b/src/assets/intro/0059.avif
diff --git a/src/assets/intro/0059.webp b/src/assets/intro/0059.webp
diff --git a/src/assets/intro/0060.avif b/src/assets/intro/0060.avif
diff --git a/src/assets/intro/0060.webp b/src/assets/intro/0060.webp
diff --git a/src/components/Graphics.astro b/src/components/Graphics.astro
@@ -0,0 +1,53 @@
+---
+import type GraphicsImporter from "../scripts/graphics-importer";
+interface Props {
+	graphicsImporter: GraphicsImporter;
+	alt: string;
+}
+
+const { graphicsImporter, alt } = Astro.props;
+---
+{graphicsImporter.getImageSrcs().then((srcs) => (
+    <!--suppress HtmlUnknownTag -->
+<graphics-element data-srcs={JSON.stringify(srcs)}>
+    {
+        graphicsImporter.getFirstImageMetadata().then(({default: {src, width, height}}) => (
+                <img id="intro-graphics" class="max-w-full" src={src} width={width} height={height}
+                     alt={alt}/>
+        ))
+    }
+</graphics-element>
+    ))}
+
+<script>
+    class Graphics extends HTMLElement {
+        connectedCallback() {
+            const imageSrcs = JSON.parse(this.dataset.srcs ?? "[]");
+            const outputImage = this.querySelector("img") ?? (() => {
+                throw new Error("Failed to get output image element");
+            })();
+
+            // Collect components.
+            const containerBounds =
+                outputImage.parentElement?.parentElement?.getBoundingClientRect() ??
+                (() => {
+                    throw new Error("Failed to get canvas containing element and bounds");
+                })();
+            const numberOfImages = imageSrcs.length;
+
+            // Bind scroll event to draw images.
+            window.addEventListener("scroll", () => {
+                const scrollFraction =
+                    (document.documentElement.scrollTop - containerBounds.top) /
+                    (containerBounds.bottom - containerBounds.top);
+                const imageIndex = Math.min(
+                    numberOfImages - 1,
+                    Math.ceil(scrollFraction * numberOfImages),
+                );
+                requestAnimationFrame(() => outputImage.src = imageSrcs[Math.max(0, Math.min(imageIndex, numberOfImages - 1))]);
+            });
+        }
+    }
+
+    customElements.define("graphics-element", Graphics);
+</script>
diff --git a/src/layouts/Layout.astro b/src/layouts/Layout.astro
@@ -1,15 +1,25 @@
 ---
+interface Props {
+	imageSrcs: Promise<string[]>;
+}
+
+const { imageSrcs } = Astro.props;
 ---
 <!doctype html>
 <html lang="en" class="scroll-smooth">
-	<head>
-		<meta charset="UTF-8" />
-		<meta name="viewport" content="width=device-width" />
-		<link rel="icon" type="image/svg+xml" href="/favicon.ico"/>
-		<meta name="generator" content={Astro.generator} />
-		<title>Pinpoint</title>
-	</head>
-	<body>
-		<slot />
-	</body>
+<head>
+    <meta charset="UTF-8"/>
+    <meta name="viewport" content="width=device-width"/>
+    <link rel="icon" type="image/svg+xml" href="/favicon.ico"/>
+    <meta name="generator" content={Astro.generator}/>
+    <title>Pinpoint</title>
+
+    <!-- Preload images. -->
+    {imageSrcs.then((srcs) => srcs.map((src) => (
+        <link rel="preload" href={src} as="image" type="image/avif"/>
+    )))}
+</head>
+<body>
+<slot/>
+</body>
 </html>
diff --git a/src/pages/index.astro b/src/pages/index.astro
@@ -2,16 +2,24 @@
 import Article from "../components/Article.astro";
 import Hero from "../components/Hero.astro";
 import Layout from "../layouts/Layout.astro";
+
+import Graphics from "../components/Graphics.astro";
+import GraphicsImporter from "../scripts/graphics-importer";
+import type { DefaultImageMetadata } from "../scripts/types";
+
+const introImporter = new GraphicsImporter(
+	import.meta.glob<DefaultImageMetadata>("/src/assets/intro/*.avif"),
+);
 ---
 
-<Layout>
+<Layout imageSrcs={introImporter.getImageSrcs()}>
     <!-- Pinpoint Intro Sequence. -->
     <div class="hero">
         <div class="hero-content flex-col lg:flex-row-reverse w-full">
             <!-- Graphics side. -->
             <div class="basis-1/2 self-stretch">
                 <div class="h-dvh sticky top-0 flex justify-center items-center">
-                    <canvas id="intro-graphics" class="max-w-full aspect-3/4"/>
+                    <Graphics graphicsImporter={introImporter} alt="Pinpoint intro sequence"/>
                 </div>
             </div>
 
@@ -116,10 +124,4 @@ import Layout from "../layouts/Layout.astro";
         margin-top: -45dvh;
         visibility: hidden;
     }
-</style>
-
-<script>
-    import GraphicsDrawer from "../scripts/graphics-drawer.ts";
-
-    new GraphicsDrawer(import.meta.glob<{ default: ImageMetadata }>("/src/assets/intro/*.webp"), "intro-graphics");
-</script>
+</style>
diff --git a/src/scripts/graphics-drawer.ts b/src/scripts/graphics-drawer.ts
diff --git a/src/scripts/graphics-importer.ts b/src/scripts/graphics-importer.ts
@@ -0,0 +1,39 @@
+import type { DefaultImageMetadata } from "./types.ts";
+
+/**
+ * Imports graphics from source folder and provides their resolved URLs.
+ */
+export default class GraphicsImporter {
+	// Fields.
+	private readonly imageMetadatas: Promise<DefaultImageMetadata>[];
+
+	/**
+	 * Extract image metadata from dynamic import.
+	 * @param imageDynamicImport Dynamic import of images.
+	 */
+	constructor(
+		imageDynamicImport: Record<string, () => Promise<DefaultImageMetadata>>,
+	) {
+		this.imageMetadatas = Object.values(imageDynamicImport).map((imageImport) =>
+			imageImport(),
+		);
+	}
+
+	/**
+	 * Get the source URLs of all images.
+	 */
+	async getImageSrcs(): Promise<string[]> {
+		return Promise.all(
+			this.imageMetadatas.map((imageMetadataPromise) =>
+				imageMetadataPromise.then(({ default: { src } }) => src),
+			),
+		);
+	}
+
+	/**
+	 * Get the metadata of the first image.
+	 */
+	async getFirstImageMetadata(): Promise<DefaultImageMetadata> {
+		return await this.imageMetadatas[0];
+	}
+}
diff --git a/src/scripts/types.ts b/src/scripts/types.ts
@@ -0,0 +1 @@
+export type DefaultImageMetadata = { default: ImageMetadata };
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		export type DefaultImageMetadata = { default: ImageMetadata };