diff --git a/web/_js/time.js b/web/_js/time.js
new file mode 100644
index 00000000..0e3af681
--- /dev/null
+++ b/web/_js/time.js
@@ -0,0 +1,40 @@
+const timeConfig = [
+ {
+ timestamp: 16000000,
+ url: "/_img/place-indexed-4.png",
+ image: null
+ },
+ {
+ timestamp: 16000030,
+ url: "/_img/place-indexed-5.png",
+ image: null
+ },
+ {
+ timestamp: 16000060,
+ url: "/_img/place-indexed.png",
+ image: null
+ },
+];
+
+let slider = document.getElementById("timeControlsSlider");
+let image = document.getElementById("image");
+
+// SETUP
+slider.max = timeConfig.length;
+slider.value = timeConfig.length;
+updateTime(timeConfig.length)
+
+slider.oninput = (event) => {
+ updateTime(parseInt(event.target.value))
+};
+
+async function updateTime(index) {
+ let configObject = timeConfig[index-1];
+ if (!configObject.image) {
+ console.log("fetching");
+ let fetchResult = await fetch(configObject.url);
+ let imageBlob = await fetchResult.blob();
+ configObject.image = URL.createObjectURL(imageBlob);
+ }
+ image.src = configObject.image;
+}
\ No newline at end of file
diff --git a/web/index.html b/web/index.html
index 603d1f58..c7a4c739 100644
--- a/web/index.html
+++ b/web/index.html
@@ -99,7 +99,8 @@ The 2022 /r/place Atlas
-
+
+
![Canvas of /r/place in the state of when the experiment was concluded.]()
@@ -144,7 +145,7 @@ The 2022 /r/place Atlas
-
+
+