diff --git a/.gitignore b/.gitignore
new file mode 100644
index 0000000..8aaf6b4
--- /dev/null
+++ b/.gitignore
@@ -0,0 +1,46 @@
+# Created by https://www.toptal.com/developers/gitignore/api/macos,nova,sass
+# Edit at https://www.toptal.com/developers/gitignore?templates=macos,nova,sass
+
+### macOS ###
+# General
+.DS_Store
+.AppleDouble
+.LSOverride
+
+# Icon must end with two \r
+Icon
+
+
+# Thumbnails
+._*
+
+# Files that might appear in the root of a volume
+.DocumentRevisions-V100
+.fseventsd
+.Spotlight-V100
+.TemporaryItems
+.Trashes
+.VolumeIcon.icns
+.com.apple.timemachine.donotpresent
+
+# Directories potentially created on remote AFP share
+.AppleDB
+.AppleDesktop
+Network Trash Folder
+Temporary Items
+.apdisk
+
+### macOS Patch ###
+# iCloud generated files
+*.icloud
+
+### nova ###
+.nova/*
+
+### Sass ###
+.sass-cache/
+*.css.map
+*.sass.map
+*.scss.map
+
+# End of https://www.toptal.com/developers/gitignore/api/macos,nova,sass
\ No newline at end of file
diff --git a/css/main.css b/css/main.css
new file mode 100644
index 0000000..9130e68
--- /dev/null
+++ b/css/main.css
@@ -0,0 +1,86 @@
+[x-cloak] {
+  display: none !important;
+}
+
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+  list-style: none;
+}
+
+body {
+  font: 100% Helvetica, sans-serif;
+  color: #333;
+  background-color: #222;
+  position: relative;
+  background-image: url(/images/wood.png);
+}
+
+h1, logo span {
+  font-family: "Langar", sans-serif;
+  position: absolute;
+  font-size: 1.6rem;
+  line-height: 1.3em;
+  font-weight: 400;
+  top: -34px;
+  color: white;
+  width: 100%;
+  padding-left: 30px;
+  cursor: pointer;
+  -webkit-user-select: none; /* Safari */
+  -ms-user-select: none; /* IE 10 and IE 11 */
+  user-select: none; /* Standard syntax */
+}
+
+article {
+  border: 4px solid #00AEC1;
+  border-top-width: 2.6rem;
+  background-color: white;
+  position: absolute;
+  padding: 4px 0px;
+  top: 55px;
+  right: 30px;
+  width: calc(100% - 390px);
+  min-width: 500px;
+  max-width: 880px;
+  line-height: 1.3em;
+  font-size: 1.2rem;
+  z-index: 30;
+}
+article .content {
+  padding: 18px 30px;
+}
+article.main-article {
+  z-index: 120;
+}
+
+logo {
+  width: 100%;
+  height: 100%;
+  background-size: 680px 400px;
+  z-index: 50;
+  border: 4px solid #00AEC1;
+  border-top-width: 2.6rem;
+  background-color: white;
+  transition: all 0.3s ease-in-out;
+  position: absolute;
+  left: 0;
+  top: 0;
+  background-position: calc(50% - 30px) 50%;
+  background-repeat: no-repeat;
+  margin: 0;
+  display: block;
+  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAqgAAAGQCAMAAABVp2IzAAABHVBMVEUziES7AERE0XD/LVq7RDO1uxZ3nqPMzP+7dzOIdzPRd2D/zP8AMzPMcBZ30XD/zMwWzHAWzKMtiFqeRC1EAIiIYNFg0US1iBa1Wne1WkQAiHfojUREnqMzu0Tou0kAiESeuy0AADPRiC1J/6OeiGAtu1oziHfM/8zRRGB3AIiIdwBE0aNwRNFEALt30aMAAABEtY3/cBb/oxYW/6MW/3CIRABJ/3BE6I3/o0m7dwD//8xE6FozMwB36I3Moxb///8AMwB36FrRuy1EtVqeiC0Au0TRu2C7RACeu2B3tY3MzMwAu3czAADoiBbRRC3oWkTM///ouxajRJ7ojXdEnnC7YNG7LdHoWne7LZ61jXeILdEzMzN3ALuILZ4mRcnmMYgpAAAAX3RSTlP/////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////AJOaXywAAAAJcEhZcwAADsQAAA7EAZUrDhsAABY1SURBVHic7Z0Le1PH1UZTWmoaMDZtWsCmcUXSGzSIxFxixQ2CYpzacu0UEr6Ur///b1Rb4/GZc9XMuc621nqelst7ZOnMWTw7M5rLRy8AFPDR0B8AwAdEBRUgKqgAUUEFiAoqQFRQAaKCChAVVICooAJEBRUgKqgAUUEFiAoqQFRQAaKCChAVVICooAJEBRUgKqgAUUEFiAoqQFRQAaKCChAVVICooAJEBRUgKqgAUUEFiAoqQFRQAaKCChAVVICooAJEBRUgKqgAUUEFiAoqQFRQAaKCChAVVICooAJEBRUgKqgAUUEFiAoqQFRQAaKCChAVVICooAJEBRUgKqgAUUEFiAoqQFRQAaKCChAVVICooAJEBRUgKqgAUUEFiAoqQFRQAaKCChAVVICooAJEBRUgKqgAUUEFiAoqQFRQAaKCChAVVICooAJEBRUgKqgAUUEFiAoqQFRQAaKCChAVVICooIJoRB0vuNzv6E/Mn60Nwu8PUaMk5s/WBqpFTf96Gd/Rn5g/WxuE3x+iRilDzJ+tDZSKurYmH3ltbdwzo5E01Gg09P3nkc/Vd2v0S2jbIyqiDoJK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");
+}
+logo.sidebar {
+  width: 300px;
+  height: 230px;
+  background-size: 289px 170px;
+  background-position: -15px 5px;
+  left: 30px;
+  top: 30px;
+  z-index: 10;
+}
+
+/*# sourceMappingURL=main.css.map */
diff --git a/images/lf-anim-simple.gif b/images/lf-anim-simple.gif
new file mode 100644
index 0000000..074cc97
Binary files /dev/null and b/images/lf-anim-simple.gif differ
diff --git a/images/lf-anim.gif b/images/lf-anim.gif
new file mode 100644
index 0000000..0be7141
Binary files /dev/null and b/images/lf-anim.gif differ
diff --git a/images/wood.png b/images/wood.png
new file mode 100644
index 0000000..31cad4b
Binary files /dev/null and b/images/wood.png differ
diff --git a/index.html b/index.html
index e69de29..d0c32e2 100644
--- a/index.html
+++ b/index.html
@@ -0,0 +1,30 @@
+<html>
+  <head>
+    <title>lastfuture.de</title>
+    <link rel="stylesheet" href="css/main.css">
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Langar&display=swap" rel="stylesheet">
+  </head>
+  <body>
+    <logo
+      x-data="logo"
+      role="img" aria-label="animated lastfuture logo"
+      @click="sidebar = !sidebar; togglePhase()"
+      :class="sidebar ? 'sidebar' : ''">
+      <span>lastfuture</span>
+    </logo>
+    <article class="main-article" x-data="{ expanded: false }">
+      <h1
+        @click="expanded = !expanded"
+      >Untitled-1.txt</h1>
+      <div class="content" x-cloak x-show="expanded">
+        <p>Cras mattis consectetur purus sit amet fermentum. Nullam quis risus eget urna mollis ornare vel eu leo. Donec sed odio dui. <a href="//google.com/">Praesent commodo cursus magna</a>, vel scelerisque nisl consectetur et. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aenean lacinia bibendum nulla sed consectetur. Donec id elit non mi porta gravida at eget metus.</p>
+          
+        <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean lacinia bibendum nulla sed consectetur. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p>
+      </div>
+    </article>
+    <script src="js/main.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/alpinejs@3.11.1/dist/cdn.min.js"></script>
+  </body>
+</html>
\ No newline at end of file
diff --git a/js/main.js b/js/main.js
new file mode 100644
index 0000000..9210c61
--- /dev/null
+++ b/js/main.js
@@ -0,0 +1,44 @@
+const loadImage = (url) => new Promise((resolve, reject) => {
+  const img = new Image();
+  img.addEventListener('load', () => resolve(img));
+  img.addEventListener('error', (err) => reject(err));
+  img.src = url;
+});
+
+document.addEventListener('alpine:init', () => {
+  Alpine.data('logo', () => ({
+    logoPhase: 0,
+    phases: {
+      1: 'images/lf-anim-simple.gif',
+      2: 'images/lf-anim.gif',
+    },
+    sidebar: true,
+    init() {
+      console.log("logo init");
+      this.preloadPhase(1);
+    },
+    togglePhase() {
+      var phase = this.sidebar ? 1 : 2;
+      if (phase in this.phases) {
+        console.log("reloading logo phase", phase);
+        this.$el.style.backgroundImage = 'url(' + this.phases[phase] + ')';
+      }
+    },
+    preloadPhase(phase) {
+      console.log("loading logo phase", phase);
+      console.log("phase exists", phase in this.phases);
+      if (phase in this.phases) {
+        this.logoPhase = phase;
+        loadImage(this.phases[phase])
+          .then(img => {
+            console.log("swapping src")
+            this.$el.style.backgroundImage = 'url(' + img.src + ')';
+            this.preloadPhase(this.logoPhase+1);
+          })
+          .catch(err => console.error(err));
+      } else {
+        console.log("logo loading complete");
+      }
+    },
+  }))
+})
\ No newline at end of file
diff --git a/sass/main.scss b/sass/main.scss
new file mode 100644
index 0000000..f162056
--- /dev/null
+++ b/sass/main.scss
@@ -0,0 +1,94 @@
+$font-stack: Helvetica, sans-serif;
+$primary-color: #333;
+$background-color: #222;
+$window-chrome: #00AEC1;
+$window-text: white;
+
+@mixin window-chrome {
+  border: 4px solid $window-chrome;
+  border-top-width: 2.6rem;
+  background-color: white;
+}
+
+[x-cloak] {
+  display: none !important;
+}
+
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+  list-style: none;
+}
+
+body {
+  font: 100% $font-stack;
+  color: $primary-color;
+  background-color: $background-color;
+  position: relative;
+  background-image: url(/images/wood.png);
+}
+
+h1, logo span {
+  font-family: 'Langar', sans-serif;
+  position: absolute;
+  font-size: 1.6rem;
+  line-height: 1.3em;
+  font-weight: 400;
+  top: -34px;
+  color: $window-text;
+  width: 100%;
+  padding-left: 30px;
+  cursor: pointer;
+  -webkit-user-select: none; /* Safari */
+  -ms-user-select: none; /* IE 10 and IE 11 */
+  user-select: none; /* Standard syntax */
+}
+
+article {
+  .content {
+    padding: 18px 30px;
+  }
+  @include window-chrome();
+  position: absolute;
+  padding: 4px 0px;
+  top: 55px;
+  right: 30px;
+  width: calc( 100% - 390px );
+  min-width: 500px;
+  max-width: 880px;
+  line-height: 1.3em;
+  font-size: 1.2rem;
+  z-index: 30;
+  &.main-article {
+    z-index: 120;
+  }
+}
+
+logo {
+  //width 680px 510px 425px 340px 289px
+  //height 400px 300px 250px 200px 170px
+  width: 100%;
+  height: 100%;
+  background-size: 680px 400px;
+  &.sidebar {
+    width: 300px;
+    height: 230px;
+    background-size: 289px 170px;
+    background-position: -15px 5px;
+    left: 30px;
+    top: 30px;
+    z-index: 10;
+  }
+  z-index: 50;
+  @include window-chrome();
+  transition: all 0.3s ease-in-out;
+  position: absolute;
+  left: 0;
+  top: 0;
+  background-position: calc( 50% - 30px ) 50%;
+  background-repeat: no-repeat;
+  margin: 0;
+  display: block;
+  background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAqgAAAGQCAMAAABVp2IzAAABHVBMVEUziES7AERE0XD/LVq7RDO1uxZ3nqPMzP+7dzOIdzPRd2D/zP8AMzPMcBZ30XD/zMwWzHAWzKMtiFqeRC1EAIiIYNFg0US1iBa1Wne1WkQAiHfojUREnqMzu0Tou0kAiESeuy0AADPRiC1J/6OeiGAtu1oziHfM/8zRRGB3AIiIdwBE0aNwRNFEALt30aMAAABEtY3/cBb/oxYW/6MW/3CIRABJ/3BE6I3/o0m7dwD//8xE6FozMwB36I3Moxb///8AMwB36FrRuy1EtVqeiC0Au0TRu2C7RACeu2B3tY3MzMwAu3czAADoiBbRRC3oWkTM///ouxajRJ7ojXdEnnC7YNG7LdHoWne7LZ61jXeILdEzMzN3ALuILZ4mRcnmMYgpAAAAX3RSTlP/////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////AJOaXywAAAAJcEhZcwAADsQAAA7EAZUrDhsAABY1SURBVHic7Z0Le1PH1UZTWmoaMDZtWsCmcUXSGzSIxFxixQ2CYpzacu0UEr6Ur///b1Rb4/GZc9XMuc621nqelst7ZOnMWTw7M5rLRy8AFPDR0B8AwAdEBRUgKqgAUUEFiAoqQFRQAaKCChAVVICooAJEBRUgKqgAUUEFiAoqQFRQAaKCChAVVICooAJEBRUgKqgAUUEFiAoqQFRQAaKCChAVVICooAJEBRUgKqgAUUEFiAoqQFRQAaKCChAVVICooAJEBRUgKqgAUUEFiAoqQFRQAaKCChAVVICooAJEBRUgKqgAUUEFiAoqQFRQAaKCChAVVICooAJEBRUgKqgAUUEFiAoqQFRQAaKCChAVVICooAJEBRUgKqgAUUEFiAoqQFRQAaKCChAVVICooAJEBRUgKqgAUUEFiAoqQFRQAaKCChAVVICooAJEBRUgKqgAUUEFiAoqQFRQAaKCChAVVICooIJoRB0vuNzv6E/Mn60Nwu8PUaMk5s/WBqpFTf96Gd/Rn5g/WxuE3x+iRilDzJ+tDZSKurYmH3ltbdwzo5E01Gg09P3nkc/Vd2v0S2jbIyqiDoJK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');
+}
\ No newline at end of file