diff --git a/static/main/css/lightsaber.css b/static/main/css/lightsaber.css
index 63210f9..7a09ebf 100644
--- a/static/main/css/lightsaber.css
+++ b/static/main/css/lightsaber.css
@@ -1,212 +1,378 @@
-:root {
-    --blade-hue: 120;
-    --blade-lightness: 50%;
-}
-
 *,
-*::before,
-*::after {
+*:before,
+*:after {
+    position: relative;
     box-sizing: border-box;
 }
 
-body {
-    background: #222;
+.body {
     display: grid;
-    grid-template-columns: repeat(6, 1fr);
-    grid-template-rows: 100px 50px 1fr;
-    min-height: 100vh;
     place-items: center;
-    font-family: "Source Sans Pro", sans-serif;
-    text-transform: uppercase;
-    font-size: 1.5rem;
+    height: 80vh;
 }
 
-/* The color pickers */
-
-[name="color"] {
-    grid-row: 1 / 2;
-    align-self: end;
-    margin: 0.5em;
-}
-
-label:not(.hilt) {
-    color: white;
-    font-weight: bold;
-    align-self: start;
-}
-
-/* Lightsaber styling */
-
 .lightsaber {
-    margin-top: 25vh;
-    grid-column: 1 / -1;
-    position: relative;
+    /* outline: 1px dotted white; */
+    transition: transform 0.3s ease-in-out;
+    /* transform: scale(0.5); */
+    width: 30vw;
+    height: 5vw;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
 }
 
-#on-off {
-    position: absolute;
-    width: 0;
-    height: 0;
+/* .lightsaber > * { */
+/*     outline: 1px solid white; */
+/* } */
+
+.metal {
+    background: linear-gradient(
+        to bottom,
+        #ccdbee 10%,
+        #607088 35%,
+        #ccdbee 70%,
+        #607088
+    );
+}
+
+.black-metal {
+    background: linear-gradient(
+        to bottom,
+        #767a83 10%,
+        #202432 35%,
+        #767a83 70%,
+        #202432
+    );
+}
+
+.copper {
+    background: linear-gradient(
+        to bottom,
+        #70413a 10%,
+        #90645a 35%,
+        #70413a 70%,
+        #401f21
+    );
+}
+
+.pommel-cap {
+    height: 90%;
+    width: 10%;
+    border-radius: 10% 0 0 10%;
+    box-shadow: 0 0 5vw black;
+}
+
+.grip {
+    height: 100%;
+    width: 45%;
+    border-radius: 5%;
+    box-shadow: 0 0 5vw black;
 }
 
 .hilt {
-    cursor: pointer;
-    display: block;
-    width: 0.75rem;
-    height: 7rem;
-    background-color: red;
-    border-radius: 0 0 4px 4px;
-    background-image: linear-gradient(
-        silver 0 10px,
-        hsl(39 75% 50%) 0 14px,
-        silver 0 15px,
-        black 0 20px,
-        silver 0 22px,
-        black 0 25px,
-        silver 0 27px,
-        black 0 30px,
-        silver 0 32px,
-        black 0 35px,
-        silver 0 37px,
-        black 0 40px,
-        silver 0 42px,
-        black 0 45px,
-        silver 0 47px,
-        black 0 50px,
-        silver 0 60px,
-        hsl(39 75% 50%) 60px 80px,
-        silver 0 100%
-    );
+    height: 80%;
+    width: 35%;
+    display: flex;
+    flex-direction: row;
+    justify-content: flex-start;
+}
+
+.hilt > .segment {
+    width: 8%;
+    height: 100%;
+    flex-grow: 1;
+}
+
+.hilt > .segment .black-metal {
+    width: 20%;
+}
+
+.focusing-ring {
+    height: 70%;
+    width: 15%;
+    display: flex;
+}
+
+.focusing-ring > .segment {
+    width: 40%;
+    height: 100%;
+    flex-grow: 1;
+}
+
+.focusing-ring > .segment .metal {
+    width: 8%;
+}
+
+.blade-emitter {
+    height: 100%;
+    width: 10%;
+    z-index: 1;
+
+    display: flex;
+    align-items: center;
+}
+
+.blade-emitter > .segment {
+    width: 40%;
+    height: 100%;
+    flex-grow: 1;
+}
+
+.blade-emitter > .segment .start {
+    height: 60%;
+    width: 8%;
+}
+
+.blade-emitter > .segment .middle {
+    height: 80%;
+}
+
+.blade-emitter > .segment .end {
+    height: 100%;
+    width: 8%;
 }
 
 .blade {
     position: absolute;
-    background: white;
-    height: 350%;
+    height: 70%;
+    width: 300%;
+    left: 100%;
+    background: linear-gradient(
+        to bottom,
+        var(--lightsaber-color),
+        white 25%,
+        white 75%,
+        var(--lightsaber-color)
+    );
+    border-top-right-radius: 10vw;
+    border-bottom-right-radius: 10vw;
+}
+
+.blade > .glow {
+    border-radius: inherit;
+    border: inherit;
+    position: absolute;
+    top: 0;
+    left: 0;
     width: 100%;
+    height: 100%;
+    box-shadow: 0 0 5vw var(--lightsaber-color);
+}
+.blade > .glow .large {
+    box-shadow: 0 0 30vw 10vw var(--lightsaber-color);
+    opacity: 0.7;
+}
+
+.controls {
+    height: 25%;
+    width: 50%;
+    position: absolute;
+    left: 45%;
     bottom: 100%;
-    border-radius: 100vw 100vw 0 0;
-    box-shadow: inset 0 0 4px
-            hsl(var(--blade-hue) 100% var(--blade-lightness) / 1),
-        0 0 1em hsl(var(--blade-hue) 100% var(--blade-lightness) / 0.8),
-        0 0 1.5em hsl(var(--blade-hue) 100% var(--blade-lightness) / 0.7),
-        0 0 2em hsl(var(--blade-hue) 100% var(--blade-lightness) / 0.5),
-        0 0 3em hsl(var(--blade-hue) 100% var(--blade-lightness) / 0.3),
-        0 0 5em hsl(var(--blade-hue) 100% var(--blade-lightness) / 0.2);
-
-    transition: transform 50ms ease-out;
-    transform-origin: bottom;
+    display: flex;
+    flex-direction: row;
+    justify-content: space-around;
+    align-items: center;
+    z-index: -1;
 }
 
-.blade::after {
-    content: "";
-    position: absolute;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    background: hsl(var(--blade-hue) 100% var(--blade-lightness));
-    border-radius: inherit;
-    filter: blur(0.5em);
-    opacity: 1;
-    -webkit-animation: pulse linear 5s infinite;
-    animation: pulse linear 5s infinite;
-}
-
-.blade::before {
-    content: "";
-    position: absolute;
-    top: 0;
-    bottom: 0;
-    right: 0;
-    left: 0;
-    background: white;
-    border-radius: inherit;
-    z-index: 10;
-}
-
-@-webkit-keyframes pulse {
-    50% {
-        opacity: 0.5;
-    }
-}
-
-@keyframes pulse {
-    50% {
-        opacity: 0.5;
-    }
-}
-
-/* Turn lightsaber on and off */
-
-#on-off:not(:checked) + .blade {
-    transform: scaleY(0);
-}
-
-#on-off:checked + .blade {
-    transform: scaleY(1);
-}
-
-/* change the color */
-
-#green:checked ~ .lightsaber {
-    --blade-hue: 120;
-}
-
-#blue:checked ~ .lightsaber {
-    --blade-hue: 195;
-}
-
-#yellow:checked ~ .lightsaber {
-    --blade-hue: 60;
-}
-
-#purple:checked ~ .lightsaber {
-    --blade-hue: 290;
-}
-
-#red:checked ~ .lightsaber {
-    --blade-hue: 360;
-}
-
-#darksaber:checked ~ .lightsaber {
-    --blade-lightness: 100%;
-}
-
-#darksaber:checked ~ .lightsaber .blade {
-    border-radius: 100% / 500px 10px 0 0;
-}
-
-#darksaber:checked ~ .lightsaber .blade::before {
+.controls > .button {
+    height: 0.75vw;
+    width: 0.75vw;
     background: black;
+    border-radius: 50%;
 }
 
-/* play sound */
-
-embed {
-    display: none;
+.controls:before {
+    content: "";
     position: absolute;
-    opacity: 0;
-    pointer-events: 0;
-    width: 0;
-    height: 0;
+    width: 100%;
+    height: 20%;
+    bottom: 100%;
+    background: #b16521;
 }
 
-#on-off:checked ~ embed {
-    display: block;
+.button.-up {
+    background-color: #117305;
 }
 
-/* YT link */
-.yt {
-    color: hsl(0 0% 100% / 0.5);
-    font-size: 1rem;
-    padding: 1em;
-    margin: 0 0 1em 0;
-    grid-column: 1 / -1;
+.button.-down {
+    background-color: #a8141e;
 }
 
-.yt:hover {
-    color: white;
-    text-shadow: 0 0 0.5em hsl(var(--blade-hue) 50% 50%),
-        0 0 1em hsl(var(--blade-hue) 50% 50% / 0.75);
+:root {
+    --ease: cubic-bezier(0.5, 0, 0.2, 1);
+    --duration: 10s;
+    --delay: 0s;
+    --speed: 0.75;
+}
+:root * {
+    animation-duration: var(--duration);
+    animation-delay: var(--delay);
+    animation-timing-function: var(--ease);
+    animation-fill-mode: both;
+}
+
+.pommel-cap {
+    --delay: 0s;
+    --duration: 1s, 0.5s;
+    animation-name: enter-reverse, fade-in;
+}
+
+.grip {
+    --delay: 0.3s;
+    --duration: 1s, 0.5s;
+    animation-name: enter, fade-in;
+}
+
+.controls {
+    --delay: 1s;
+    --duration: 1s, 0.5s;
+    animation-name: slide-down, fade-in;
+}
+
+.controls .button {
+    animation-name: scale-up;
+    --delay: calc(1.5s + (var(--i, 0) * 0.1s));
+    --duration: 0.5s;
+}
+
+.hilt .segment {
+    --delay: calc(1.25s + (var(--i, 0) * 0.05s));
+    --duration: 1s, 1s;
+    animation-name: slide-down, fade-in;
+}
+
+.hilt .segment:nth-child(even) {
+    animation-name: slide-up, fade-in;
+}
+
+.focusing-ring .segment {
+    --delay: calc(2.25s + (var(--i, 0) * 0.05s));
+    --duration: 1s, 1s;
+    animation-name: enter, fade-in;
+}
+
+.blade-emitter .segment {
+    --delay: calc(3s + (var(--i, 0) * 0.05s));
+    --duration: 1s, 1s;
+    animation-name: enter, fade-in;
+}
+
+.lightsaber {
+    animation-name: lightsaber, lightsaber-out;
+    animation-fill-mode: backwards, forwards;
+    --ease: cubic-bezier(0.5, 0, 0.2, 1), cubic-bezier(0.82, -0.38, 0.14, 1.35);
+    --delay: 0s, 10s;
+    --duration: 10s, 1s;
+}
+
+.blade {
+    --delay: 4.5s;
+    --duration: 1s, 1s;
+    transform-origin: left center;
+    animation-name: blade, fade-in;
+}
+
+.blade .glow {
+    --delay: 4.5s;
+    --duration: 3s;
+    --ease: linear;
+    animation-name: flicker;
+    animation-iteration-count: infinite;
+}
+
+@keyframes scale-up {
+    from {
+        transform: scale(0);
+    }
+}
+
+@keyframes fade-in {
+    from {
+        opacity: 0;
+    }
+    to {
+        opacity: 1;
+    }
+}
+
+@keyframes enter {
+    from {
+        transform: translateX(10vw);
+    }
+}
+
+@keyframes enter-reverse {
+    from {
+        transform: translateX(-10vw);
+    }
+}
+
+@keyframes slide-down {
+    from {
+        transform: translateY(-10vw);
+    }
+}
+
+@keyframes slide-up {
+    from {
+        transform: translateY(10vw);
+        opacity: 0;
+    }
+    40% {
+        opacity: 1;
+    }
+}
+
+@keyframes lightsaber {
+    from {
+        transform: translateX(10%);
+    }
+    22% {
+        transform: translateX(-15%);
+    }
+    30% {
+        transform: translateX(-30%);
+    }
+    45% {
+        transform: translateX(-40%) scale(0.9);
+        animation-timing-function: cubic-bezier(0.7, 0, 0, 1);
+    }
+    55%,
+    to {
+        transform: translateX(-100%) scale(0.7);
+    }
+}
+
+@keyframes lightsaber-out {
+    from {
+        transform: translateX(-100%) scale(0.7);
+    }
+    to {
+        transform: translateX(-100%) scale(0.7) translateX(50%) rotate(360deg)
+            translateX(-50%);
+    }
+}
+
+@keyframes blade {
+    from {
+        transform: scaleX(0);
+    }
+}
+
+@keyframes flicker {
+    20% {
+        opacity: 0.5;
+    }
+    40% {
+        opacity: 0.7;
+    }
+    60% {
+        opacity: 0.2;
+    }
+    80% {
+        opacity: 0.6;
+    }
 }
diff --git a/static/main/js/lightsaber.js b/static/main/js/lightsaber.js
new file mode 100644
index 0000000..cb12066
--- /dev/null
+++ b/static/main/js/lightsaber.js
@@ -0,0 +1,28 @@
+const COLORS = [
+    "#2ff924",
+    "#2e67f8",
+    "#871efe",
+    "#eb212e",
+    "#ff8f18",
+    "#ffffff",
+]
+let random_color = COLORS[Math.floor(Math.random() * COLORS.length)]
+document.documentElement.style.setProperty("--lightsaber-color", random_color)
+
+let body = document.body
+body.addEventListener("click", () => {
+    body.hidden = true
+    requestAnimationFrame(() => {
+        body.hidden = false
+    })
+})
+
+let style = document.createElement("style")
+style.innerHTML =
+    " *, *:before, *:after { animation-play-state: paused !important; }"
+
+document.addEventListener("keypress", () => {
+    style.parentNode
+        ? document.head.removeChild(style)
+        : document.head.appendChild(style)
+})
diff --git a/templates/main/lightsaber.html b/templates/main/lightsaber.html
index f84faa5..500ae38 100644
--- a/templates/main/lightsaber.html
+++ b/templates/main/lightsaber.html
@@ -1,36 +1,52 @@
+{% extends "layout.html" %}
 {% load static %}
-<!DOCTYPE html>
-<html lang="en">
-    <head>
-        <meta charset="UTF-8" />
-        <title>Lightsaber</title>
-        <link rel="preconnect" href="https://fonts.gstatic.com" />
-        <link href="https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght@900&display=swap"
-              rel="stylesheet"/>
-        <link rel="stylesheet"
-              href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"/>
-        <link rel="stylesheet"
-              type="text/css"
-              href="{% static 'main/css/lightsaber.css' %}"/>
-    </head>
-    <body>
-        <label for="green">Green</label>
-        <input type="radio" id="green" name="color" checked />
-        <label for="blue">Blue</label>
-        <input type="radio" id="blue" name="color" />
-        <label for="yellow">Yellow</label>
-        <input type="radio" id="yellow" name="color" />
-        <label for="purple">Purple</label>
-        <input type="radio" id="purple" name="color" />
-        <label for="red">Red</label>
-        <input type="radio" id="red" name="color" />
-        <label for="darksaber">Darksaber</label>
-        <input type="radio" id="darksaber" name="color" />
+{% block title %}{{ title }}{% endblock %}
+{% block meta %}
+    <link rel="stylesheet"
+          type="text/css"
+          href="{% static 'main/css/lightsaber.css' %}"/>
+    <script src="{% static 'main/js/lightsaber.js' %}" defer></script>
+{% endblock %}
+{% block content %}
+    <div class="body">
         <div class="lightsaber">
-            <input type="checkbox" id="on-off" />
-            <div class="blade"></div>
-            <label class="hilt" for="on-off"></label>
-            <embed src="https://assets.codepen.io/308367/coolsaber.mp3" type="" />
+            <div class="pommel-cap metal"></div>
+            <div class="grip metal">
+                <div class="controls metal">
+                    <div style="--i: 0" class="button"></div>
+                    <div style="--i: 1" class="button"></div>
+                    <div style="--i: 2" class="button -down"></div>
+                    <div style="--i: 3" class="button -up"></div>
+                </div>
+            </div>
+            <div class="hilt">
+                <div style="--i: 0" class="segment black-metal"></div>
+                <div style="--i: 1" class="segment metal"></div>
+                <div style="--i: 2" class="segment black-metal"></div>
+                <div style="--i: 3" class="segment metal"></div>
+                <div style="--i: 4" class="segment black-metal"></div>
+                <div style="--i: 5" class="segment metal"></div>
+                <div style="--i: 6" class="segment black-metal"></div>
+                <div style="--i: 7" class="segment metal"></div>
+                <div style="--i: 8" class="segment black-metal"></div>
+                <div style="--i: 9" class="segment metal"></div>
+                <div style="--i: 10" class="segment black-metal"></div>
+                <div style="--i: 11" class="segment metal"></div>
+            </div>
+            <div class="focusing-ring">
+                <div style="--i: 0" class="segment black-metal"></div>
+                <div style="--i: 1" class="segment metal"></div>
+                <div style="--i: 2" class="segment copper"></div>
+            </div>
+            <div class="blade-emitter">
+                <div style="--i: 0" class="segment metal start"></div>
+                <div style="--i: 1" class="segment metal middle"></div>
+                <div style="--i: 2" class="segment metal end"></div>
+            </div>
+            <div class="blade">
+                <div class="glow"></div>
+                <div class="glow large"></div>
+            </div>
         </div>
-    </body>
-</html>
+    </div>
+{% endblock %}
diff --git a/templates/projects/projects.html b/templates/projects/projects.html
index 8601ac3..78f671f 100644
--- a/templates/projects/projects.html
+++ b/templates/projects/projects.html
@@ -80,10 +80,10 @@
                 <div class="card-content">
                     <div class="card-info-wrapper">
                         <div class="card-info-title">
-                            <h2>Surprise me</h2>
+                            <h2>Become a Jedi</h2>
                         </div>
                         <div class="card-info-text">
-                            <p>CSS Lightsaber.</p>
+                            <p>or Sith.</p>
                         </div>
                     </div>
                 </div>