diff --git a/assets/js/button-generator.js b/assets/js/button-generator.js
new file mode 100644
index 0000000..f33b460
--- /dev/null
+++ b/assets/js/button-generator.js
@@ -0,0 +1,1299 @@
+(function () {
+  // Wait for DOM to be ready
+  if (document.readyState === "loading") {
+    document.addEventListener("DOMContentLoaded", init);
+  } else {
+    init();
+  }
+
+  function init() {
+    setupCollapsible();
+    setupButtonGenerator();
+  }
+
+  // Collapsible sections functionality
+  function setupCollapsible() {
+    const headers = document.querySelectorAll(".control-group-header");
+    console.log("Found", headers.length, "collapsible headers");
+
+    headers.forEach((header) => {
+      header.addEventListener("click", () => {
+        const controlGroup = header.closest(".control-group");
+        if (controlGroup) {
+          controlGroup.classList.toggle("collapsed");
+          console.log("Toggled collapsed on", header.textContent.trim());
+        }
+      });
+    });
+  }
+
+  function setupButtonGenerator() {
+    const canvas = document.getElementById("button-canvas");
+    const ctx = canvas.getContext("2d");
+
+    // Preload all web fonts for canvas rendering
+    const fonts = [
+      "Lato",
+      "Roboto",
+      "Open Sans",
+      "Montserrat",
+      "Oswald",
+      "Bebas Neue",
+      "Roboto Mono",
+      "VT323",
+      "Press Start 2P",
+      "DSEG7-Classic",
+    ];
+
+    // Load fonts using CSS Font Loading API
+    const fontPromises = fonts.flatMap((font) => [
+      document.fonts.load(`400 12px "${font}"`),
+      document.fonts.load(`700 12px "${font}"`),
+      document.fonts.load(`italic 400 12px "${font}"`),
+    ]);
+
+    Promise.all(fontPromises).then(() => {
+      console.log("All fonts loaded for canvas");
+      drawButton();
+    });
+
+    // Animation configuration
+    const ANIMATION_CONFIG = {
+      fps: 20,
+      duration: 2, // seconds
+      get totalFrames() {
+        return this.fps * this.duration;
+      }, // 40 frames
+    };
+
+    // Animation state class - passed to drawToContext for frame-based rendering
+    class AnimationState {
+      constructor(frameNumber = 0, totalFrames = 40) {
+        this.frame = frameNumber;
+        this.totalFrames = totalFrames;
+        this.progress = frameNumber / totalFrames; // 0 to 1
+        this.time = (frameNumber / ANIMATION_CONFIG.fps) * 1000; // milliseconds
+      }
+
+      // Helper to get phase for periodic animations (0 to 2π)
+      getPhase(speed = 1.0) {
+        return this.progress * speed * Math.PI * 2;
+      }
+    }
+
+    // Get all controls
+    const controls = {
+      text: document.getElementById("button-text"),
+      textEnabled: document.getElementById("text-enabled"),
+      fontSize: document.getElementById("font-size"),
+      textX: document.getElementById("text-x"),
+      textY: document.getElementById("text-y"),
+      textColorType: document.getElementById("text-color-type"),
+      textColor: document.getElementById("text-color"),
+      textGradientColor1: document.getElementById("text-gradient-color1"),
+      textGradientColor2: document.getElementById("text-gradient-color2"),
+      textGradientAngle: document.getElementById("text-gradient-angle"),
+      textOutline: document.getElementById("text-outline"),
+      outlineColor: document.getElementById("outline-color"),
+      fontFamily: document.getElementById("font-family"),
+      fontBold: document.getElementById("font-bold"),
+      fontItalic: document.getElementById("font-italic"),
+      text2: document.getElementById("button-text2"),
+      text2Enabled: document.getElementById("text2-enabled"),
+      fontSize2: document.getElementById("font-size2"),
+      text2X: document.getElementById("text2-x"),
+      text2Y: document.getElementById("text2-y"),
+      text2ColorType: document.getElementById("text2-color-type"),
+      text2Color: document.getElementById("text2-color"),
+      text2GradientColor1: document.getElementById("text2-gradient-color1"),
+      text2GradientColor2: document.getElementById("text2-gradient-color2"),
+      text2GradientAngle: document.getElementById("text2-gradient-angle"),
+      text2Outline: document.getElementById("text2-outline"),
+      outline2Color: document.getElementById("outline2-color"),
+      fontFamily2: document.getElementById("font-family2"),
+      fontBold2: document.getElementById("font-bold2"),
+      fontItalic2: document.getElementById("font-italic2"),
+      bgType: document.getElementById("bg-type"),
+      bgColor: document.getElementById("bg-color"),
+      gradientColor1: document.getElementById("gradient-color1"),
+      gradientColor2: document.getElementById("gradient-color2"),
+      gradientAngle: document.getElementById("gradient-angle"),
+      textureType: document.getElementById("texture-type"),
+      textureColor1: document.getElementById("texture-color1"),
+      textureColor2: document.getElementById("texture-color2"),
+      textureScale: document.getElementById("texture-scale"),
+      borderWidth: document.getElementById("border-width"),
+      borderColor: document.getElementById("border-color"),
+      borderStyle: document.getElementById("border-style"),
+      // Animation controls
+      animateTextWave: document.getElementById("animate-text-wave"),
+      waveAmplitude: document.getElementById("wave-amplitude"),
+      waveSpeed: document.getElementById("wave-speed"),
+      animateTextWave2: document.getElementById("animate-text-wave2"),
+      waveAmplitude2: document.getElementById("wave-amplitude2"),
+      waveSpeed2: document.getElementById("wave-speed2"),
+      animateBgRainbow: document.getElementById("animate-bg-rainbow"),
+      rainbowSpeed: document.getElementById("rainbow-speed"),
+      animateBgRainbowGradient: document.getElementById(
+        "animate-bg-rainbow-gradient",
+      ),
+      animateTextRainbow: document.getElementById("animate-text-rainbow"),
+      textRainbowSpeed: document.getElementById("text-rainbow-speed"),
+      animateTextRainbow2: document.getElementById("animate-text-rainbow2"),
+      textRainbowSpeed2: document.getElementById("text-rainbow-speed2"),
+      animateGlitch: document.getElementById("animate-glitch"),
+      glitchIntensity: document.getElementById("glitch-intensity"),
+      animatePulse: document.getElementById("animate-pulse"),
+      pulseScale: document.getElementById("pulse-scale"),
+      animateShimmer: document.getElementById("animate-shimmer"),
+      animateScanline: document.getElementById("animate-scanline"),
+      scanlineIntensity: document.getElementById("scanline-intensity"),
+      scanlineSpeed: document.getElementById("scanline-speed"),
+      animateRgbSplit: document.getElementById("animate-rgb-split"),
+      rgbSplitIntensity: document.getElementById("rgb-split-intensity"),
+      animateNoise: document.getElementById("animate-noise"),
+      noiseIntensity: document.getElementById("noise-intensity"),
+      animateRotate: document.getElementById("animate-rotate"),
+      rotateAngle: document.getElementById("rotate-angle"),
+      rotateSpeed: document.getElementById("rotate-speed"),
+    };
+
+    // Update value displays
+    const updateValueDisplay = (id, value) => {
+      const display = document.getElementById(id + "-value");
+      if (display) display.textContent = value;
+    };
+
+    // Show/hide controls based on background type
+    controls.bgType.addEventListener("change", () => {
+      const solidControls = document.getElementById("solid-controls");
+      const gradientControls = document.getElementById("gradient-controls");
+      const textureControls = document.getElementById("texture-controls");
+
+      solidControls.style.display = "none";
+      gradientControls.style.display = "none";
+      textureControls.style.display = "none";
+
+      if (controls.bgType.value === "solid") {
+        solidControls.style.display = "block";
+      } else if (controls.bgType.value === "gradient") {
+        gradientControls.style.display = "block";
+      } else if (controls.bgType.value === "texture") {
+        textureControls.style.display = "block";
+      }
+
+      drawButton();
+    });
+
+    // Show/hide text color controls
+    controls.textColorType.addEventListener("change", () => {
+      const textSolidColor = document.getElementById("text-solid-color");
+      const textGradientColor = document.getElementById("text-gradient-color");
+
+      if (controls.textColorType.value === "solid") {
+        textSolidColor.style.display = "block";
+        textGradientColor.style.display = "none";
+      } else {
+        textSolidColor.style.display = "none";
+        textGradientColor.style.display = "block";
+      }
+      drawButton();
+    });
+
+    controls.text2ColorType.addEventListener("change", () => {
+      const text2SolidColor = document.getElementById("text2-solid-color");
+      const text2GradientColor = document.getElementById(
+        "text2-gradient-color",
+      );
+
+      if (controls.text2ColorType.value === "solid") {
+        text2SolidColor.style.display = "block";
+        text2GradientColor.style.display = "none";
+      } else {
+        text2SolidColor.style.display = "none";
+        text2GradientColor.style.display = "block";
+      }
+      drawButton();
+    });
+
+    // Show/hide outline color
+    controls.textOutline.addEventListener("change", () => {
+      controls.outlineColor.style.display = controls.textOutline.checked
+        ? "block"
+        : "none";
+      drawButton();
+    });
+
+    controls.text2Outline.addEventListener("change", () => {
+      controls.outline2Color.style.display = controls.text2Outline.checked
+        ? "block"
+        : "none";
+      drawButton();
+    });
+
+    // Draw texture patterns
+    function drawTexture(type, color1, color2, scale) {
+      const tempCanvas = document.createElement("canvas");
+      tempCanvas.width = 88;
+      tempCanvas.height = 31;
+      const tempCtx = tempCanvas.getContext("2d");
+
+      tempCtx.fillStyle = color1;
+      tempCtx.fillRect(0, 0, 88, 31);
+
+      tempCtx.fillStyle = color2;
+      const size = Math.max(2, Math.floor(scale / 10));
+
+      switch (type) {
+        case "dots":
+          for (let y = 0; y < 31; y += size * 2) {
+            for (let x = 0; x < 88; x += size * 2) {
+              tempCtx.beginPath();
+              tempCtx.arc(x, y, size / 2, 0, Math.PI * 2);
+              tempCtx.fill();
+            }
+          }
+          break;
+        case "grid":
+          for (let x = 0; x < 88; x += size) {
+            tempCtx.fillRect(x, 0, 1, 31);
+          }
+          for (let y = 0; y < 31; y += size) {
+            tempCtx.fillRect(0, y, 88, 1);
+          }
+          break;
+        case "diagonal":
+          for (let i = -31; i < 88; i += size) {
+            tempCtx.fillRect(i, 0, 2, 31);
+            tempCtx.save();
+            tempCtx.translate(i + 1, 0);
+            tempCtx.rotate(Math.PI / 4);
+            tempCtx.fillRect(0, 0, 2, 100);
+            tempCtx.restore();
+          }
+          break;
+        case "checkerboard":
+          for (let y = 0; y < 31; y += size) {
+            for (let x = 0; x < 88; x += size) {
+              if ((x / size + y / size) % 2 === 0) {
+                tempCtx.fillRect(x, y, size, size);
+              }
+            }
+          }
+          break;
+        case "noise":
+          for (let y = 0; y < 31; y++) {
+            for (let x = 0; x < 88; x++) {
+              if (Math.random() > 0.5) {
+                tempCtx.fillRect(x, y, 1, 1);
+              }
+            }
+          }
+          break;
+        case "stars":
+          for (let i = 0; i < scale; i++) {
+            const x = Math.floor(Math.random() * 88);
+            const y = Math.floor(Math.random() * 31);
+            tempCtx.fillRect(x, y, 1, 1);
+            tempCtx.fillRect(x - 1, y, 1, 1);
+            tempCtx.fillRect(x + 1, y, 1, 1);
+            tempCtx.fillRect(x, y - 1, 1, 1);
+            tempCtx.fillRect(x, y + 1, 1, 1);
+          }
+          break;
+      }
+
+      return tempCanvas;
+    }
+
+    // Helper function to draw text line with optional wave animation
+    function drawTextLine(context, lineNumber, animState) {
+      const prefix = lineNumber === 1 ? "" : "2";
+      const text = controls[`text${prefix}`].value;
+      const enabled = controls[`text${prefix}Enabled`].checked;
+
+      if (!text || !enabled) return;
+
+      const fontSize = parseFloat(controls[`fontSize${prefix}`].value);
+      const fontWeight = controls[`fontBold${prefix}`].checked
+        ? "bold"
+        : "normal";
+      const fontStyle = controls[`fontItalic${prefix}`].checked
+        ? "italic"
+        : "normal";
+      const fontFamily = controls[`fontFamily${prefix}`].value;
+
+      context.font = `${fontStyle} ${fontWeight} ${fontSize}px "${fontFamily}"`;
+      context.textAlign = "center";
+      context.textBaseline = "middle";
+
+      const baseX = (parseFloat(controls[`text${prefix}X`].value) / 100) * 88;
+      const baseY = (parseFloat(controls[`text${prefix}Y`].value) / 100) * 31;
+
+      // Check if wave animation is enabled
+      const waveEnabled =
+        animState && controls[`animateTextWave${prefix}`]?.checked;
+
+      if (waveEnabled) {
+        drawWaveText(
+          context,
+          text,
+          baseX,
+          baseY,
+          fontSize,
+          animState,
+          lineNumber,
+        );
+      } else {
+        drawStandardText(
+          context,
+          text,
+          baseX,
+          baseY,
+          fontSize,
+          animState,
+          lineNumber,
+        );
+      }
+    }
+
+    // Draw standard (non-wave) text
+    function drawStandardText(
+      context,
+      text,
+      x,
+      y,
+      fontSize,
+      animState,
+      lineNumber,
+    ) {
+      const prefix = lineNumber === 1 ? "" : "2";
+
+      // Get colors (with potential rainbow animation)
+      const colors = getTextColors(
+        lineNumber,
+        animState,
+        context,
+        text,
+        x,
+        y,
+        fontSize,
+      );
+
+      if (controls[`text${prefix}Outline`].checked) {
+        context.strokeStyle = colors.strokeStyle;
+        context.lineWidth = 2;
+        context.strokeText(text, x, y);
+      }
+
+      context.fillStyle = colors.fillStyle;
+      context.fillText(text, x, y);
+    }
+
+    // Draw wave-animated text (character by character)
+    function drawWaveText(
+      context,
+      text,
+      baseX,
+      baseY,
+      fontSize,
+      animState,
+      lineNumber,
+    ) {
+      const prefix = lineNumber === 1 ? "" : "2";
+      const amplitude = parseFloat(controls[`waveAmplitude${prefix}`].value);
+      const speed = parseFloat(controls[`waveSpeed${prefix}`].value);
+
+      // Measure total width for centering
+      const totalWidth = context.measureText(text).width;
+      let currentX = baseX - totalWidth / 2;
+
+      for (let i = 0; i < text.length; i++) {
+        const char = text[i];
+        const charWidth = context.measureText(char).width;
+
+        // Calculate wave offset for this character
+        const phase = animState.getPhase(speed);
+        const charOffset = i / text.length; // 0 to 1
+        const waveY = Math.sin(phase + charOffset * Math.PI * 2) * amplitude;
+
+        const charX = currentX + charWidth / 2;
+        const charY = baseY + waveY;
+
+        // Get colors for this character
+        const colors = getTextColors(
+          lineNumber,
+          animState,
+          context,
+          char,
+          charX,
+          charY,
+          fontSize,
+        );
+
+        // Draw outline if enabled
+        if (controls[`text${prefix}Outline`].checked) {
+          context.strokeStyle = colors.strokeStyle;
+          context.lineWidth = 2;
+          context.strokeText(char, charX, charY);
+        }
+
+        // Draw character
+        context.fillStyle = colors.fillStyle;
+        context.fillText(char, charX, charY);
+
+        currentX += charWidth;
+      }
+    }
+
+    // Get text colors (solid, gradient, or rainbow)
+    function getTextColors(
+      lineNumber,
+      animState,
+      context,
+      text,
+      x,
+      y,
+      fontSize,
+    ) {
+      const prefix = lineNumber === 1 ? "" : "2";
+      const colorType = controls[`text${prefix}ColorType`].value;
+
+      let fillStyle, strokeStyle;
+
+      // Rainbow text animation overrides other colors
+      if (animState && controls[`animateTextRainbow${prefix}`]?.checked) {
+        const hue =
+          (animState.progress *
+            parseFloat(controls[`textRainbowSpeed${prefix}`].value) *
+            360) %
+          360;
+        fillStyle = `hsl(${hue}, 80%, 60%)`;
+        strokeStyle = `hsl(${hue}, 80%, 30%)`;
+      } else if (colorType === "solid") {
+        fillStyle = controls[`text${prefix}Color`].value;
+        strokeStyle = controls[`outline${prefix}Color`].value;
+      } else {
+        // Gradient
+        const angle =
+          parseFloat(controls[`text${prefix}GradientAngle`].value) *
+          (Math.PI / 180);
+        const textWidth = context.measureText(text).width;
+        const x1 = x - textWidth / 2 + (Math.cos(angle) * textWidth) / 2;
+        const y1 = y - fontSize / 2 + (Math.sin(angle) * fontSize) / 2;
+        const x2 = x + textWidth / 2 - (Math.cos(angle) * textWidth) / 2;
+        const y2 = y + fontSize / 2 - (Math.sin(angle) * fontSize) / 2;
+
+        const textGradient = context.createLinearGradient(x1, y1, x2, y2);
+        textGradient.addColorStop(
+          0,
+          controls[`text${prefix}GradientColor1`].value,
+        );
+        textGradient.addColorStop(
+          1,
+          controls[`text${prefix}GradientColor2`].value,
+        );
+        fillStyle = textGradient;
+        strokeStyle = controls[`outline${prefix}Color`].value;
+      }
+
+      return { fillStyle, strokeStyle };
+    }
+
+    // Helper function to draw to a single context
+    function drawToContext(context, animState = null) {
+      context.clearRect(0, 0, 88, 31);
+
+      // Apply rotate effect (must be before drawing)
+      if (animState && controls.animateRotate?.checked) {
+        const maxAngle = parseFloat(controls.rotateAngle.value);
+        const speed = parseFloat(controls.rotateSpeed.value);
+        const angle =
+          Math.sin(animState.getPhase(speed)) * maxAngle * (Math.PI / 180);
+
+        context.save();
+        context.translate(44, 15.5);
+        context.rotate(angle);
+        context.translate(-44, -15.5);
+      }
+
+      // Draw background
+      if (controls.bgType.value === "solid") {
+        // Rainbow flash for solid colors
+        if (animState && controls.animateBgRainbow?.checked) {
+          const hue =
+            (animState.progress *
+              parseFloat(controls.rainbowSpeed.value) *
+              360) %
+            360;
+          context.fillStyle = `hsl(${hue}, 70%, 50%)`;
+        } else {
+          context.fillStyle = controls.bgColor.value;
+        }
+        context.fillRect(0, 0, 88, 31);
+      } else if (controls.bgType.value === "gradient") {
+        const angle =
+          parseFloat(controls.gradientAngle.value) * (Math.PI / 180);
+        const x1 = 44 + Math.cos(angle) * 44;
+        const y1 = 15.5 + Math.sin(angle) * 15.5;
+        const x2 = 44 - Math.cos(angle) * 44;
+        const y2 = 15.5 - Math.sin(angle) * 15.5;
+
+        const gradient = context.createLinearGradient(x1, y1, x2, y2);
+
+        // Rainbow flash for gradients
+        if (animState && controls.animateBgRainbow?.checked) {
+          const hue =
+            (animState.progress *
+              parseFloat(controls.rainbowSpeed.value) *
+              360) %
+            360;
+          gradient.addColorStop(0, `hsl(${hue}, 70%, 50%)`);
+          gradient.addColorStop(1, `hsl(${(hue + 60) % 360}, 70%, 60%)`);
+        } else {
+          gradient.addColorStop(0, controls.gradientColor1.value);
+          gradient.addColorStop(1, controls.gradientColor2.value);
+        }
+
+        context.fillStyle = gradient;
+        context.fillRect(0, 0, 88, 31);
+      } else if (controls.bgType.value === "texture") {
+        const texture = drawTexture(
+          controls.textureType.value,
+          controls.textureColor1.value,
+          controls.textureColor2.value,
+          parseFloat(controls.textureScale.value),
+        );
+        context.drawImage(texture, 0, 0);
+      }
+
+      // Rainbow gradient overlay (travels across background)
+      if (animState && controls.animateBgRainbowGradient?.checked) {
+        // Map progress to position (-100 to 100)
+        const position = animState.progress * 200 - 100;
+
+        // Create a horizontal gradient that sweeps across
+        const rainbowGradient = context.createLinearGradient(
+          position - 50,
+          0,
+          position + 50,
+          0,
+        );
+
+        // Create rainbow stops that also cycle through colors
+        const hueOffset = animState.progress * 360;
+        rainbowGradient.addColorStop(
+          0,
+          `hsla(${(hueOffset + 0) % 360}, 80%, 50%, 0)`,
+        );
+        rainbowGradient.addColorStop(
+          0.2,
+          `hsla(${(hueOffset + 60) % 360}, 80%, 50%, 0.6)`,
+        );
+        rainbowGradient.addColorStop(
+          0.4,
+          `hsla(${(hueOffset + 120) % 360}, 80%, 50%, 0.8)`,
+        );
+        rainbowGradient.addColorStop(
+          0.6,
+          `hsla(${(hueOffset + 180) % 360}, 80%, 50%, 0.8)`,
+        );
+        rainbowGradient.addColorStop(
+          0.8,
+          `hsla(${(hueOffset + 240) % 360}, 80%, 50%, 0.6)`,
+        );
+        rainbowGradient.addColorStop(
+          1,
+          `hsla(${(hueOffset + 300) % 360}, 80%, 50%, 0)`,
+        );
+
+        context.fillStyle = rainbowGradient;
+        context.fillRect(0, 0, 88, 31);
+      }
+
+      // Draw border
+      const borderWidth = parseFloat(controls.borderWidth.value);
+      if (borderWidth > 0) {
+        const style = controls.borderStyle.value;
+
+        if (style === "solid") {
+          context.strokeStyle = controls.borderColor.value;
+          context.lineWidth = borderWidth;
+          context.strokeRect(
+            borderWidth / 2,
+            borderWidth / 2,
+            88 - borderWidth,
+            31 - borderWidth,
+          );
+        } else if (style === "inset" || style === "outset") {
+          const light = style === "outset";
+          context.strokeStyle = light ? "#ffffff" : "#000000";
+          context.lineWidth = borderWidth;
+          context.beginPath();
+          context.moveTo(0, 31);
+          context.lineTo(0, 0);
+          context.lineTo(88, 0);
+          context.stroke();
+
+          context.strokeStyle = light ? "#000000" : "#ffffff";
+          context.beginPath();
+          context.moveTo(88, 0);
+          context.lineTo(88, 31);
+          context.lineTo(0, 31);
+          context.stroke();
+        } else if (style === "ridge") {
+          context.strokeStyle = "#ffffff";
+          context.lineWidth = borderWidth / 2;
+          context.strokeRect(
+            borderWidth / 4,
+            borderWidth / 4,
+            88 - borderWidth / 2,
+            31 - borderWidth / 2,
+          );
+
+          context.strokeStyle = "#000000";
+          context.strokeRect(
+            (borderWidth * 3) / 4,
+            (borderWidth * 3) / 4,
+            88 - borderWidth * 1.5,
+            31 - borderWidth * 1.5,
+          );
+        }
+      }
+
+      // Apply pulse effect (scale before drawing text)
+      if (animState && controls.animatePulse?.checked) {
+        const maxScale = parseFloat(controls.pulseScale.value);
+        const minScale = 1.0;
+        const scale =
+          minScale +
+          (maxScale - minScale) *
+            (Math.sin(animState.getPhase(1.0)) * 0.5 + 0.5);
+
+        context.save();
+        context.translate(44, 15.5);
+        context.scale(scale, scale);
+        context.translate(-44, -15.5);
+      }
+
+      // Draw text line 1
+      drawTextLine(context, 1, animState);
+
+      // Draw text line 2
+      drawTextLine(context, 2, animState);
+
+      // Restore context if pulse was applied
+      if (animState && controls.animatePulse?.checked) {
+        context.restore();
+      }
+
+      // Apply shimmer effect
+      if (animState && controls.animateShimmer?.checked) {
+        const shimmerX = animState.progress * 120 - 20; // Sweep from -20 to 100
+
+        const shimmerGradient = context.createLinearGradient(
+          shimmerX - 15,
+          0,
+          shimmerX + 15,
+          31,
+        );
+        shimmerGradient.addColorStop(0, "rgba(255, 255, 255, 0)");
+        shimmerGradient.addColorStop(0.5, "rgba(255, 255, 255, 0.3)");
+        shimmerGradient.addColorStop(1, "rgba(255, 255, 255, 0)");
+
+        context.fillStyle = shimmerGradient;
+        context.fillRect(0, 0, 88, 31);
+      }
+
+      // Apply glitch effect
+      if (animState && controls.animateGlitch?.checked) {
+        applyGlitchEffect(context, animState);
+      }
+
+      // Apply scanline effect
+      if (animState && controls.animateScanline?.checked) {
+        applyScanlineEffect(context, animState);
+      }
+
+      // Apply RGB split effect
+      if (animState && controls.animateRgbSplit?.checked) {
+        applyRgbSplitEffect(context, animState);
+      }
+
+      // Apply noise effect
+      if (animState && controls.animateNoise?.checked) {
+        applyNoiseEffect(context, animState);
+      }
+
+      // Restore context if rotate was applied
+      if (animState && controls.animateRotate?.checked) {
+        context.restore();
+      }
+    }
+
+    // Apply glitch effect (scanline displacement)
+    function applyGlitchEffect(context, animState) {
+      const intensity = parseFloat(controls.glitchIntensity.value);
+      const imageData = context.getImageData(0, 0, 88, 31);
+
+      // Randomly glitch ~10% of scanlines per frame
+      const glitchProbability = 0.1;
+      const maxOffset = intensity;
+
+      for (let y = 0; y < 31; y++) {
+        if (Math.random() < glitchProbability) {
+          const offset = Math.floor((Math.random() - 0.5) * maxOffset * 2);
+          shiftScanline(imageData, y, offset);
+        }
+      }
+
+      context.putImageData(imageData, 0, 0);
+    }
+
+    // Shift a horizontal scanline by offset pixels (with wrapping)
+    function shiftScanline(imageData, y, offset) {
+      const width = imageData.width;
+      const rowStart = y * width * 4;
+      const rowData = new Uint8ClampedArray(width * 4);
+
+      // Copy row
+      for (let i = 0; i < width * 4; i++) {
+        rowData[i] = imageData.data[rowStart + i];
+      }
+
+      // Shift and wrap
+      for (let x = 0; x < width; x++) {
+        let sourceX = (x - offset + width) % width;
+        let destIdx = rowStart + x * 4;
+        let srcIdx = sourceX * 4;
+
+        imageData.data[destIdx] = rowData[srcIdx];
+        imageData.data[destIdx + 1] = rowData[srcIdx + 1];
+        imageData.data[destIdx + 2] = rowData[srcIdx + 2];
+        imageData.data[destIdx + 3] = rowData[srcIdx + 3];
+      }
+    }
+
+    // Apply scanline effect (CRT-style horizontal lines)
+    function applyScanlineEffect(context, animState) {
+      const intensity = parseFloat(controls.scanlineIntensity.value);
+      const speed = parseFloat(controls.scanlineSpeed.value);
+
+      // Create overlay with scanlines
+      context.globalCompositeOperation = "multiply";
+      context.fillStyle = "rgba(0, 0, 0, " + intensity + ")";
+
+      // Animate scanline position
+      const offset = (animState.progress * speed * 31) % 2;
+
+      for (let y = offset; y < 31; y += 2) {
+        context.fillRect(0, Math.floor(y), 88, 1);
+      }
+
+      context.globalCompositeOperation = "source-over";
+    }
+
+    // Apply RGB split/chromatic aberration effect
+    function applyRgbSplitEffect(context, animState) {
+      const intensity = parseFloat(controls.rgbSplitIntensity.value);
+      const imageData = context.getImageData(0, 0, 88, 31);
+      const result = context.createImageData(88, 31);
+
+      // Oscillating offset
+      const phase = Math.sin(animState.getPhase(1.0));
+      const offsetX = Math.round(phase * intensity);
+
+      for (let y = 0; y < 31; y++) {
+        for (let x = 0; x < 88; x++) {
+          const idx = (y * 88 + x) * 4;
+
+          // Red channel - shift left
+          const redX = Math.max(0, Math.min(87, x - offsetX));
+          const redIdx = (y * 88 + redX) * 4;
+          result.data[idx] = imageData.data[redIdx];
+
+          // Green channel - no shift
+          result.data[idx + 1] = imageData.data[idx + 1];
+
+          // Blue channel - shift right
+          const blueX = Math.max(0, Math.min(87, x + offsetX));
+          const blueIdx = (y * 88 + blueX) * 4;
+          result.data[idx + 2] = imageData.data[blueIdx + 2];
+
+          // Alpha channel
+          result.data[idx + 3] = imageData.data[idx + 3];
+        }
+      }
+
+      context.putImageData(result, 0, 0);
+    }
+
+    // Apply noise/static effect
+    function applyNoiseEffect(context, animState) {
+      const intensity = parseFloat(controls.noiseIntensity.value);
+      const imageData = context.getImageData(0, 0, 88, 31);
+
+      for (let i = 0; i < imageData.data.length; i += 4) {
+        // Random noise value
+        const noise = (Math.random() - 0.5) * 255 * intensity;
+
+        imageData.data[i] = Math.max(
+          0,
+          Math.min(255, imageData.data[i] + noise),
+        );
+        imageData.data[i + 1] = Math.max(
+          0,
+          Math.min(255, imageData.data[i + 1] + noise),
+        );
+        imageData.data[i + 2] = Math.max(
+          0,
+          Math.min(255, imageData.data[i + 2] + noise),
+        );
+        // Alpha unchanged
+      }
+
+      context.putImageData(imageData, 0, 0);
+    }
+
+    // Animated preview state
+    let previewAnimationId = null;
+
+    // Update preview (static or animated based on settings)
+    function updatePreview() {
+      if (hasAnimationsEnabled()) {
+        startAnimatedPreview();
+      } else {
+        stopAnimatedPreview();
+        drawToContext(ctx);
+      }
+      updateDownloadButtonLabel();
+    }
+
+    // Start animated preview loop
+    function startAnimatedPreview() {
+      stopAnimatedPreview(); // Clear any existing
+
+      let frameNum = 0;
+      let lastFrameTime = performance.now();
+      const frameDelay = 1000 / ANIMATION_CONFIG.fps; // ms per frame
+
+      const animate = (currentTime) => {
+        const elapsed = currentTime - lastFrameTime;
+
+        // Only advance frame if enough time has passed
+        if (elapsed >= frameDelay) {
+          const animState = new AnimationState(
+            frameNum,
+            ANIMATION_CONFIG.totalFrames,
+          );
+          drawToContext(ctx, animState);
+
+          frameNum = (frameNum + 1) % ANIMATION_CONFIG.totalFrames;
+          lastFrameTime = currentTime - (elapsed % frameDelay); // Carry over extra time
+        }
+
+        previewAnimationId = requestAnimationFrame(animate);
+      };
+
+      previewAnimationId = requestAnimationFrame(animate);
+    }
+
+    // Stop animated preview
+    function stopAnimatedPreview() {
+      if (previewAnimationId) {
+        cancelAnimationFrame(previewAnimationId);
+        previewAnimationId = null;
+      }
+    }
+
+    // Main draw function
+    function drawButton() {
+      updatePreview();
+    }
+
+    // Check if any animations are enabled
+    function hasAnimationsEnabled() {
+      return !!(
+        controls.animateTextWave?.checked ||
+        controls.animateTextWave2?.checked ||
+        controls.animateBgRainbow?.checked ||
+        controls.animateBgRainbowGradient?.checked ||
+        controls.animateTextRainbow?.checked ||
+        controls.animateTextRainbow2?.checked ||
+        controls.animateGlitch?.checked ||
+        controls.animatePulse?.checked ||
+        controls.animateShimmer?.checked ||
+        controls.animateScanline?.checked ||
+        controls.animateRgbSplit?.checked ||
+        controls.animateNoise?.checked ||
+        controls.animateRotate?.checked
+      );
+    }
+
+    // Update download button label
+    function updateDownloadButtonLabel() {
+      const btn = document.getElementById("download-button");
+      btn.textContent = "Download GIF";
+    }
+
+    // Export as animated GIF
+    async function exportAsGif() {
+      const downloadBtn = document.getElementById("download-button");
+      const originalText = downloadBtn.textContent;
+      downloadBtn.disabled = true;
+      downloadBtn.textContent = "Generating GIF...";
+
+      try {
+        // Create temporary canvas for frame generation
+        const frameCanvas = document.createElement("canvas");
+        frameCanvas.width = 88;
+        frameCanvas.height = 31;
+        const frameCtx = frameCanvas.getContext("2d");
+
+        // Initialize gif.js
+        const gif = new GIF({
+          workers: 2,
+          quality: 10,
+          workerScript: "/js/gif.worker.js",
+          width: 88,
+          height: 31,
+        });
+
+        // Generate frames
+        const totalFrames = ANIMATION_CONFIG.totalFrames;
+        for (let i = 0; i < totalFrames; i++) {
+          const animState = new AnimationState(i, totalFrames);
+          drawToContext(frameCtx, animState);
+
+          // Add frame to GIF (delay in ms)
+          gif.addFrame(frameCtx, {
+            delay: 1000 / ANIMATION_CONFIG.fps,
+            copy: true,
+          });
+
+          // Update progress
+          const progress = Math.round((i / totalFrames) * 100);
+          downloadBtn.textContent = `Generating: ${progress}%`;
+
+          // Yield to browser to keep UI responsive
+          if (i % 5 === 0) {
+            await new Promise((resolve) => setTimeout(resolve, 0));
+          }
+        }
+
+        // Render GIF
+        gif.on("finished", (blob) => {
+          // Download
+          const link = document.createElement("a");
+          link.download = "button-88x31.gif";
+          link.href = URL.createObjectURL(blob);
+          link.click();
+
+          // Cleanup
+          URL.revokeObjectURL(link.href);
+          downloadBtn.disabled = false;
+          downloadBtn.textContent = originalText;
+        });
+
+        gif.on("progress", (progress) => {
+          const percent = Math.round(progress * 100);
+          downloadBtn.textContent = `Encoding: ${percent}%`;
+        });
+
+        gif.render();
+      } catch (error) {
+        console.error("Error generating GIF:", error);
+        downloadBtn.disabled = false;
+        downloadBtn.textContent = originalText;
+        alert("Error generating GIF. Please try again.");
+      }
+    }
+
+    // Download function
+    document
+      .getElementById("download-button")
+      .addEventListener("click", async () => {
+        await exportAsGif();
+      });
+
+    // Preset buttons
+    document.getElementById("preset-random").addEventListener("click", () => {
+      const randomColor = () =>
+        "#" +
+        Math.floor(Math.random() * 16777215)
+          .toString(16)
+          .padStart(6, "0");
+
+      // Random background
+      controls.bgType.value = ["solid", "gradient", "texture"][
+        Math.floor(Math.random() * 3)
+      ];
+      controls.bgColor.value = randomColor();
+      controls.gradientColor1.value = randomColor();
+      controls.gradientColor2.value = randomColor();
+      controls.gradientAngle.value = Math.floor(Math.random() * 360);
+      controls.textureColor1.value = randomColor();
+      controls.textureColor2.value = randomColor();
+      controls.textureType.value = [
+        "dots",
+        "grid",
+        "diagonal",
+        "checkerboard",
+        "noise",
+        "stars",
+      ][Math.floor(Math.random() * 6)];
+
+      // Random text 1 color (50% chance of gradient)
+      controls.textColorType.value = Math.random() > 0.5 ? "gradient" : "solid";
+      controls.textColor.value = randomColor();
+      controls.textGradientColor1.value = randomColor();
+      controls.textGradientColor2.value = randomColor();
+      controls.textGradientAngle.value = Math.floor(Math.random() * 360);
+
+      // Random text 2 color (50% chance of gradient)
+      controls.text2ColorType.value =
+        Math.random() > 0.5 ? "gradient" : "solid";
+      controls.text2Color.value = randomColor();
+      controls.text2GradientColor1.value = randomColor();
+      controls.text2GradientColor2.value = randomColor();
+      controls.text2GradientAngle.value = Math.floor(Math.random() * 360);
+
+      // Random border
+      controls.borderColor.value = randomColor();
+      controls.borderWidth.value = Math.floor(Math.random() * 6);
+      controls.borderStyle.value = ["solid", "inset", "outset", "ridge"][
+        Math.floor(Math.random() * 4)
+      ];
+
+      // Random text styles
+      controls.fontBold.checked = Math.random() > 0.5;
+      controls.fontItalic.checked = Math.random() > 0.5;
+      controls.fontBold2.checked = Math.random() > 0.5;
+      controls.fontItalic2.checked = Math.random() > 0.5;
+
+      // Update displays
+      updateValueDisplay("gradient-angle", controls.gradientAngle.value);
+      updateValueDisplay(
+        "text-gradient-angle",
+        controls.textGradientAngle.value,
+      );
+      updateValueDisplay(
+        "text2-gradient-angle",
+        controls.text2GradientAngle.value,
+      );
+      updateValueDisplay("border-width", controls.borderWidth.value);
+
+      controls.bgType.dispatchEvent(new Event("change"));
+      controls.textColorType.dispatchEvent(new Event("change"));
+      controls.text2ColorType.dispatchEvent(new Event("change"));
+      drawButton();
+    });
+
+    document.getElementById("preset-classic").addEventListener("click", () => {
+      // Classic 90s web button style
+      controls.bgType.value = "gradient";
+      controls.gradientColor1.value = "#6e6e6eff";
+      controls.gradientColor2.value = "#979797";
+      controls.gradientAngle.value = 90;
+
+      controls.textColorType.value = "solid";
+      controls.textColor.value = "#000000";
+      controls.text2ColorType.value = "solid";
+      controls.text2Color.value = "#000";
+
+      controls.borderWidth.value = 2;
+      controls.borderColor.value = "#000000";
+      controls.borderStyle.value = "outset";
+
+      controls.fontFamily.value = "VT323";
+      controls.fontFamily2.value = "VT323";
+      controls.fontBold.checked = false;
+      controls.fontBold2.checked = false;
+      controls.fontItalic.checked = false;
+      controls.fontItalic2.checked = false;
+
+      //controls.text.value = "RITUAL.SH";
+      //controls.text2.value = "FREE THE WEB";
+      controls.textEnabled.checked = true;
+      controls.text2Enabled.checked = true;
+      controls.fontSize.value = 12;
+      controls.fontSize2.value = 8;
+      controls.textY.value = 50;
+      controls.text2Y.value = 65;
+
+      updateValueDisplay("font-size", 12);
+      updateValueDisplay("font-size2", 8);
+      updateValueDisplay("gradient-angle", 90);
+      updateValueDisplay("text-y", 35);
+      updateValueDisplay("text2-y", 65);
+
+      controls.bgType.dispatchEvent(new Event("change"));
+      controls.textColorType.dispatchEvent(new Event("change"));
+      controls.text2ColorType.dispatchEvent(new Event("change"));
+      drawButton();
+    });
+
+    document.getElementById("preset-modern").addEventListener("click", () => {
+      controls.bgType.value = "gradient";
+      controls.gradientColor1.value = "#0a0a0a";
+      controls.gradientColor2.value = "#1a0a2e";
+      controls.gradientAngle.value = 135;
+
+      controls.textColorType.value = "gradient";
+      controls.textGradientColor1.value = "#00ffaa";
+      controls.textGradientColor2.value = "#00ffff";
+      controls.textGradientAngle.value = 90;
+
+      controls.text2ColorType.value = "gradient";
+      controls.text2GradientColor1.value = "#ff00ff";
+      controls.text2GradientColor2.value = "#ff6600";
+      controls.text2GradientAngle.value = 0;
+
+      controls.borderWidth.value = 1;
+      controls.borderColor.value = "#00ffaa";
+      controls.borderStyle.value = "solid";
+
+      controls.fontFamily.value = "Roboto Mono";
+      controls.fontFamily2.value = "Roboto Mono";
+      controls.fontBold.checked = true;
+      controls.fontBold2.checked = false;
+      controls.fontItalic.checked = false;
+      controls.fontItalic2.checked = false;
+
+      //controls.text.value = "RITUAL.SH";
+      //controls.text2.value = "EST. 2024";
+      controls.textEnabled.checked = true;
+      controls.text2Enabled.checked = true;
+      controls.fontSize.value = 11;
+      controls.fontSize2.value = 9;
+      controls.textY.value = 35;
+      controls.text2Y.value = 65;
+
+      updateValueDisplay("font-size", 11);
+      updateValueDisplay("font-size2", 9);
+      updateValueDisplay("gradient-angle", 135);
+      updateValueDisplay("text-gradient-angle", 90);
+      updateValueDisplay("text2-gradient-angle", 0);
+      updateValueDisplay("text-y", 35);
+      updateValueDisplay("text2-y", 65);
+
+      controls.textColorType.dispatchEvent(new Event("change"));
+      controls.text2ColorType.dispatchEvent(new Event("change"));
+      controls.bgType.dispatchEvent(new Event("change"));
+      drawButton();
+    });
+
+    // Add event listeners to all controls
+    Object.values(controls).forEach((control) => {
+      if (control) {
+        control.addEventListener("input", drawButton);
+        control.addEventListener("change", drawButton);
+
+        if (control.type === "range") {
+          control.addEventListener("input", (e) => {
+            updateValueDisplay(e.target.id, e.target.value);
+          });
+        }
+      }
+    });
+
+    // Animation control show/hide listeners
+    if (controls.animateTextWave) {
+      controls.animateTextWave.addEventListener("change", () => {
+        document.getElementById("wave-controls").style.display = controls
+          .animateTextWave.checked
+          ? "block"
+          : "none";
+      });
+    }
+
+    if (controls.animateTextWave2) {
+      controls.animateTextWave2.addEventListener("change", () => {
+        document.getElementById("wave-controls2").style.display = controls
+          .animateTextWave2.checked
+          ? "block"
+          : "none";
+      });
+    }
+
+    if (controls.animateBgRainbow) {
+      controls.animateBgRainbow.addEventListener("change", () => {
+        document.getElementById("rainbow-bg-controls").style.display = controls
+          .animateBgRainbow.checked
+          ? "block"
+          : "none";
+      });
+    }
+
+    if (controls.animateTextRainbow) {
+      controls.animateTextRainbow.addEventListener("change", () => {
+        document.getElementById("rainbow-text-controls").style.display =
+          controls.animateTextRainbow.checked ? "block" : "none";
+      });
+    }
+
+    if (controls.animateTextRainbow2) {
+      controls.animateTextRainbow2.addEventListener("change", () => {
+        document.getElementById("rainbow-text2-controls").style.display =
+          controls.animateTextRainbow2.checked ? "block" : "none";
+      });
+    }
+
+    if (controls.animateGlitch) {
+      controls.animateGlitch.addEventListener("change", () => {
+        document.getElementById("glitch-controls").style.display = controls
+          .animateGlitch.checked
+          ? "block"
+          : "none";
+      });
+    }
+
+    if (controls.animatePulse) {
+      controls.animatePulse.addEventListener("change", () => {
+        document.getElementById("pulse-controls").style.display = controls
+          .animatePulse.checked
+          ? "block"
+          : "none";
+      });
+    }
+
+    if (controls.animateScanline) {
+      controls.animateScanline.addEventListener("change", () => {
+        document.getElementById("scanline-controls").style.display = controls
+          .animateScanline.checked
+          ? "block"
+          : "none";
+      });
+    }
+
+    if (controls.animateRgbSplit) {
+      controls.animateRgbSplit.addEventListener("change", () => {
+        document.getElementById("rgb-split-controls").style.display = controls
+          .animateRgbSplit.checked
+          ? "block"
+          : "none";
+      });
+    }
+
+    if (controls.animateNoise) {
+      controls.animateNoise.addEventListener("change", () => {
+        document.getElementById("noise-controls").style.display = controls
+          .animateNoise.checked
+          ? "block"
+          : "none";
+      });
+    }
+
+    if (controls.animateRotate) {
+      controls.animateRotate.addEventListener("change", () => {
+        document.getElementById("rotate-controls").style.display = controls
+          .animateRotate.checked
+          ? "block"
+          : "none";
+      });
+    }
+
+    // Initial draw
+    drawButton();
+  } // end setupButtonGenerator
+})();
diff --git a/assets/sass/pages/button-generator.scss b/assets/sass/pages/button-generator.scss
new file mode 100644
index 0000000..c6aac4b
--- /dev/null
+++ b/assets/sass/pages/button-generator.scss
@@ -0,0 +1,528 @@
+@import url(https://fonts.bunny.net/css?family=bebas-neue:400|lato:400,400i,700,700i|montserrat:400,400i,700,700i|open-sans:400,400i,700,700i|oswald:400,700|press-start-2p:400|roboto:400,400i,700,700i|roboto-mono:400,400i,700,700i|vt323:400);
+
+#button-generator-app {
+  margin: 2rem 0;
+  padding: 2rem;
+  background: linear-gradient(
+    145deg,
+    rgba(5, 15, 30, 0.9) 0%,
+    rgba(10, 20, 40, 0.95) 100%
+  );
+  border-radius: 6px;
+  border: 1px solid rgba(0, 150, 255, 0.4);
+  box-shadow:
+    0 0 30px rgba(0, 150, 255, 0.15),
+    0 0 50px rgba(255, 120, 0, 0.08),
+    inset 0 0 60px rgba(0, 100, 200, 0.05);
+  position: relative;
+  overflow: visible;
+
+  &::before {
+    content: "";
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    height: 3px;
+    background: linear-gradient(
+      90deg,
+      transparent,
+      rgba(0, 150, 255, 0.6),
+      rgba(255, 120, 0, 0.6),
+      transparent
+    );
+  }
+
+  .generator-container {
+    display: grid;
+    grid-template-columns: 1fr 2fr;
+    gap: 2rem;
+    margin-top: 1rem;
+    position: relative;
+    z-index: 1;
+
+    @media (max-width: 768px) {
+      grid-template-columns: 1fr;
+    }
+  }
+
+  .preview-section {
+    background: linear-gradient(
+      135deg,
+      rgba(0, 100, 180, 0.15) 0%,
+      rgba(0, 80, 150, 0.1) 100%
+    );
+    padding: 1.5rem;
+    border-radius: 6px;
+    border: 1px solid rgba(0, 150, 255, 0.3);
+    display: flex;
+    flex-direction: column;
+    gap: 1rem;
+    position: sticky;
+    top: 1rem;
+    align-self: flex-start;
+    max-height: calc(100vh - 2rem);
+    overflow-y: auto;
+    box-shadow:
+      0 0 20px rgba(0, 150, 255, 0.1),
+      inset 0 0 40px rgba(0, 100, 200, 0.05);
+
+    &::before {
+      content: "";
+      position: absolute;
+      left: 0;
+      top: 0;
+      bottom: 0;
+      width: 4px;
+      background: linear-gradient(
+        180deg,
+        rgba(0, 150, 255, 0.7),
+        rgba(255, 120, 0, 0.5)
+      );
+      border-radius: 6px 0 0 6px;
+    }
+
+    h3 {
+      margin-top: 0;
+      color: #0096ff;
+      font-family: Verdana, "Trebuchet MS", Tahoma, sans-serif;
+      font-weight: 700;
+      text-transform: uppercase;
+      letter-spacing: 0.1em;
+      text-shadow: 0 0 15px rgba(0, 150, 255, 0.5);
+      font-size: 1.2rem;
+    }
+  }
+
+  .presets-container {
+    margin-top: 1.5rem;
+    padding-top: 1.5rem;
+    border-top: 2px solid;
+    border-image: linear-gradient(
+        90deg,
+        transparent,
+        rgba(0, 150, 255, 0.5),
+        transparent
+      )
+      1;
+
+    h3 {
+      margin-top: 0;
+      margin-bottom: 1rem;
+      color: rgba(100, 180, 255, 0.9);
+      font-family: Verdana, "Trebuchet MS", Tahoma, sans-serif;
+      font-weight: 600;
+      text-transform: uppercase;
+      letter-spacing: 0.08em;
+      text-shadow: 0 0 10px rgba(0, 150, 255, 0.4);
+      font-size: 1rem;
+    }
+  }
+
+  .preview-container {
+    display: flex;
+    flex-direction: column;
+    gap: 1rem;
+  }
+
+  .preview-wrapper {
+    background: repeating-conic-gradient(
+        rgba(20, 30, 50, 0.8) 0% 25%,
+        rgba(10, 20, 40, 0.9) 0% 50%
+      )
+      50% / 20px 20px;
+    padding: 2rem;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    border-radius: 4px;
+    border: 1px solid rgba(0, 150, 255, 0.2);
+  }
+
+  #button-canvas {
+    image-rendering: pixelated;
+    image-rendering: -moz-crisp-edges;
+    image-rendering: crisp-edges;
+    //border: 1px solid rgba(0, 150, 255, 0.4);
+    box-shadow: 0 0 15px rgba(0, 150, 255, 0.2);
+  }
+
+  .controls-section {
+    display: flex;
+    flex-direction: column;
+    gap: 1.5rem;
+  }
+
+  .control-group {
+    background: linear-gradient(
+      135deg,
+      rgba(0, 100, 180, 0.15) 0%,
+      rgba(0, 80, 150, 0.1) 100%
+    );
+    padding: 1rem;
+    border-radius: 6px;
+    border: 1px solid rgba(0, 150, 255, 0.3);
+    box-shadow:
+      0 0 20px rgba(0, 150, 255, 0.1),
+      inset 0 0 40px rgba(0, 100, 200, 0.05);
+    position: relative;
+
+    &::before {
+      content: "";
+      position: absolute;
+      left: 0;
+      top: 0;
+      width: 3px;
+      height: 100%;
+      background: linear-gradient(
+        180deg,
+        rgba(0, 150, 255, 0.7),
+        rgba(255, 120, 0, 0.5)
+      );
+      opacity: 0;
+      transition: opacity 0.3s ease;
+    }
+
+    &:hover::before {
+      opacity: 1;
+    }
+
+    h3 {
+      margin-top: 0;
+      margin-bottom: 1rem;
+    }
+
+    label {
+      display: block;
+      margin-top: 0.75rem;
+      margin-bottom: 0.25rem;
+      font-weight: 500;
+      font-size: 0.85rem;
+      color: rgba(100, 180, 255, 0.8);
+      text-transform: uppercase;
+      letter-spacing: 0.05em;
+    }
+
+    input[type="text"],
+    select {
+      width: 100%;
+      padding: 0.75rem 1rem;
+      border: 1px solid rgba(0, 150, 255, 0.4);
+      border-radius: 4px;
+      font-size: 0.9rem;
+      background: rgba(5, 15, 30, 0.7);
+      color: rgba(200, 220, 255, 0.95);
+      transition: all 0.3s ease;
+      box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.3);
+
+      &:focus {
+        outline: none;
+        border-color: rgba(0, 150, 255, 0.7);
+        box-shadow:
+          0 0 15px rgba(0, 150, 255, 0.3),
+          inset 0 2px 8px rgba(0, 0, 0, 0.4);
+        background: rgba(5, 15, 30, 0.9);
+      }
+    }
+
+    select {
+      cursor: pointer;
+
+      option {
+        background: rgba(5, 15, 30, 0.95);
+        color: rgba(200, 220, 255, 0.95);
+      }
+    }
+
+    // Font preview in dropdowns
+    select#font-family,
+    select#font-family2 {
+      option[value="Lato"] {
+        font-family: "Lato", sans-serif;
+      }
+      option[value="Roboto"] {
+        font-family: "Roboto", sans-serif;
+      }
+      option[value="Open Sans"] {
+        font-family: "Open Sans", sans-serif;
+      }
+      option[value="Montserrat"] {
+        font-family: "Montserrat", sans-serif;
+      }
+      option[value="Oswald"] {
+        font-family: "Oswald", sans-serif;
+      }
+      option[value="Bebas Neue"] {
+        font-family: "Bebas Neue", display;
+      }
+      option[value="Roboto Mono"] {
+        font-family: "Roboto Mono", monospace;
+      }
+      option[value="VT323"] {
+        font-family: "VT323", monospace;
+      }
+      option[value="Press Start 2P"] {
+        font-family: "Press Start 2P", display;
+      }
+    }
+
+    input[type="range"] {
+      width: 100%;
+      margin-top: 0.25rem;
+      -webkit-appearance: none;
+      appearance: none;
+      background: rgba(0, 100, 180, 0.2);
+      border-radius: 4px;
+      height: 6px;
+      outline: none;
+
+      &::-webkit-slider-thumb {
+        -webkit-appearance: none;
+        appearance: none;
+        width: 18px;
+        height: 18px;
+        background: linear-gradient(135deg, #0096ff, #66ccff);
+        cursor: pointer;
+        border-radius: 50%;
+        box-shadow: 0 0 10px rgba(0, 150, 255, 0.6);
+        border: 2px solid rgba(0, 150, 255, 0.8);
+      }
+
+      &::-moz-range-thumb {
+        width: 18px;
+        height: 18px;
+        background: linear-gradient(135deg, #0096ff, #66ccff);
+        cursor: pointer;
+        border-radius: 50%;
+        box-shadow: 0 0 10px rgba(0, 150, 255, 0.6);
+        border: 2px solid rgba(0, 150, 255, 0.8);
+      }
+    }
+
+    input[type="color"] {
+      width: 100%;
+      height: 50px;
+      border: 1px solid rgba(0, 150, 255, 0.4);
+      border-radius: 4px;
+      cursor: pointer;
+      background: rgba(5, 15, 30, 0.7);
+      padding: 4px;
+      transition: all 0.3s ease;
+
+      &:hover {
+        border-color: rgba(0, 150, 255, 0.7);
+        box-shadow: 0 0 15px rgba(0, 150, 255, 0.3);
+      }
+    }
+
+    input[type="checkbox"] {
+      width: auto;
+      margin-left: 0.5rem;
+      cursor: pointer;
+      accent-color: #0096ff;
+    }
+  }
+
+  .control-group-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    cursor: pointer;
+    user-select: none;
+    margin: 0;
+    padding: 0.5rem 0;
+    border-bottom: 2px solid;
+    border-image: linear-gradient(
+        90deg,
+        transparent,
+        rgba(0, 150, 255, 0.5),
+        transparent
+      )
+      1;
+    margin-bottom: 1rem;
+    color: rgba(100, 180, 255, 0.9);
+    font-family: Verdana, "Trebuchet MS", Tahoma, sans-serif;
+    font-weight: 600;
+    text-transform: uppercase;
+    letter-spacing: 0.08em;
+    transition: all 0.3s ease;
+
+    &:hover {
+      color: #66ccff;
+      text-shadow: 0 0 10px rgba(0, 150, 255, 0.5);
+    }
+  }
+
+  .toggle-icon {
+    font-size: 1.5rem;
+    font-weight: bold;
+    transition: transform 0.3s ease;
+    color: rgba(0, 150, 255, 0.8);
+  }
+
+  .control-group.collapsed .toggle-icon {
+    transform: rotate(180deg);
+  }
+
+  .control-group-content {
+    overflow: hidden;
+    max-height: 2000px;
+    transition:
+      max-height 0.3s ease,
+      opacity 0.3s ease;
+  }
+
+  .control-group.collapsed .control-group-content {
+    max-height: 0;
+    opacity: 0;
+    pointer-events: none;
+  }
+
+  .info-text {
+    font-size: 0.85rem;
+    color: rgba(150, 200, 255, 0.7);
+    font-style: italic;
+    margin-bottom: 1rem;
+    padding: 0.5rem;
+    background: rgba(0, 100, 180, 0.1);
+    border-left: 3px solid rgba(0, 150, 255, 0.5);
+    border-radius: 2px;
+  }
+
+  h4 {
+    margin-top: 1.5rem;
+    margin-bottom: 0.75rem;
+    color: rgba(100, 180, 255, 0.85);
+    font-family: Verdana, "Trebuchet MS", Tahoma, sans-serif;
+    font-weight: 600;
+    text-transform: uppercase;
+    letter-spacing: 0.08em;
+    font-size: 0.9rem;
+    padding-bottom: 0.5rem;
+    border-bottom: 1px solid rgba(0, 150, 255, 0.3);
+  }
+
+  .checkbox-row {
+    display: flex;
+    gap: 1.5rem;
+    margin-top: 0.75rem;
+  }
+
+  .checkbox-label {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    font-weight: 500;
+    font-size: 0.85rem;
+    cursor: pointer;
+    margin: 0;
+    color: rgba(100, 180, 255, 0.8);
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
+    transition: color 0.3s ease;
+
+    &:hover {
+      color: #66ccff;
+    }
+
+    input[type="checkbox"] {
+      margin: 0;
+      cursor: pointer;
+    }
+
+    span {
+      user-select: none;
+    }
+  }
+
+  .btn-primary,
+  .btn-secondary {
+    width: 100%;
+    padding: 0.75rem 1.5rem;
+    font-size: 0.95rem;
+    font-weight: 600;
+    border: 1px solid rgba(0, 150, 255, 0.5);
+    border-radius: 4px;
+    cursor: pointer;
+    transition: all 0.3s ease;
+    text-transform: uppercase;
+    letter-spacing: 0.08em;
+    position: relative;
+    overflow: hidden;
+
+    &::before {
+      content: "";
+      position: absolute;
+      top: 0;
+      left: -100%;
+      width: 100%;
+      height: 100%;
+      background: linear-gradient(
+        90deg,
+        transparent,
+        rgba(0, 150, 255, 0.3),
+        transparent
+      );
+      transition: left 0.5s ease;
+    }
+
+    &:hover::before {
+      left: 100%;
+    }
+  }
+
+  .btn-primary {
+    background: linear-gradient(
+      135deg,
+      rgba(0, 120, 200, 0.3) 0%,
+      rgba(0, 100, 180, 0.2) 100%
+    );
+    color: #66ccff;
+
+    &:hover {
+      background: linear-gradient(
+        135deg,
+        rgba(0, 150, 255, 0.4) 0%,
+        rgba(255, 100, 0, 0.3) 100%
+      );
+      border-color: rgba(0, 150, 255, 0.8);
+      box-shadow:
+        0 0 20px rgba(0, 150, 255, 0.4),
+        0 0 30px rgba(255, 120, 0, 0.2);
+      color: #fff;
+      text-shadow: 0 0 10px rgba(0, 150, 255, 0.6);
+      transform: translateY(-2px);
+    }
+
+    &:active {
+      transform: translateY(0);
+    }
+  }
+
+  .btn-secondary {
+    background: linear-gradient(
+      135deg,
+      rgba(0, 100, 180, 0.2) 0%,
+      rgba(0, 80, 150, 0.15) 100%
+    );
+    color: #66ccff;
+    margin-top: 0.5rem;
+
+    &:hover {
+      background: linear-gradient(
+        135deg,
+        rgba(0, 120, 200, 0.3) 0%,
+        rgba(255, 100, 0, 0.2) 100%
+      );
+      border-color: rgba(0, 150, 255, 0.6);
+      transform: translateY(-2px);
+      box-shadow: 0 0 20px rgba(0, 150, 255, 0.3);
+      color: #fff;
+      text-shadow: 0 0 8px rgba(0, 150, 255, 0.5);
+    }
+
+    &:active {
+      transform: translateY(0);
+    }
+  }
+}
diff --git a/assets/sass/pages/homepage.scss b/assets/sass/pages/homepage.scss
index 0aa1a23..e06bfd3 100644
--- a/assets/sass/pages/homepage.scss
+++ b/assets/sass/pages/homepage.scss
@@ -244,6 +244,7 @@
       inset 0 1px 2px rgba(255, 255, 255, 0.1);
     border-radius: 1em;
     cursor: pointer;
+    position: relative;
 
     &::after {
       content: "Interests and Tools";
@@ -267,7 +268,7 @@
       @include media-down(lg) {
         margin-left: -0.5em;
         opacity: 1;
-        bottom: 0;
+        bottom: -40px;
         font-size: 20px;
       }
     }
diff --git a/assets/sass/pages/resources.scss b/assets/sass/pages/resources.scss
index b7aa8a7..a44b2f3 100644
--- a/assets/sass/pages/resources.scss
+++ b/assets/sass/pages/resources.scss
@@ -84,7 +84,7 @@
   max-width: 1400px;
   margin: 0 auto;
   position: relative;
-  z-index: 1;
+  z-index: 10;
 }
 
 // Portal Header with portals on either side
@@ -97,7 +97,7 @@
   position: relative;
 
   .portal-title {
-    font-size: 3.5rem;
+    font-size: 2.5rem;
     font-family: Verdana, "Trebuchet MS", Tahoma, sans-serif;
     font-weight: 700;
     text-transform: uppercase;
@@ -108,11 +108,13 @@
       0 0 40px rgba(255, 255, 255, 0.4),
       0 2px 4px rgba(0, 0, 0, 0.3);
     margin: 0;
+    margin-top: 50px;
     position: relative;
     z-index: 2;
 
     @include media-up(md) {
       font-size: 4rem;
+      margin-top: 0;
     }
   }
 
@@ -192,7 +194,7 @@
   left: 5%;
   bottom: 5%;
   width: 150px;
-  z-index: -1;
+  z-index: 1;
 
   .heart-icon {
     font-size: 2em;
@@ -257,6 +259,7 @@
 .portal-sign {
   position: relative;
   padding: 3rem 2rem;
+  z-index: 10;
 
   border: 10px solid black;
   background: white;
@@ -479,6 +482,38 @@
     }
   }
 
+  &.button-generator {
+    background: #000;
+    height: 40%;
+    width: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    position: relative;
+    overflow: hidden;
+
+    &::before,
+    &::after {
+      content: "";
+      position: absolute;
+      width: 90%;
+      height: 30%;
+      top: 15%;
+      left: 5%;
+      background: #fff;
+      animation: button 2s ease-in-out infinite;
+    }
+
+    &::after {
+      bottom: 15%;
+      top: auto;
+      left: 50%;
+      transform: translateX(-50%);
+      width: 50%;
+      animation: button 1.2s ease-in-out infinite;
+    }
+  }
+
   // Last.fm stats icon
   &.lastfm-stats {
     background: black;
@@ -503,13 +538,13 @@
     &::before {
       left: 20px;
       height: 35px;
-      animation: equalizer-1 0.8s ease-in-out infinite;
+      animation: equalizer-1 3s ease-in-out infinite;
     }
 
     &::after {
       left: 35px;
       height: 25px;
-      animation: equalizer-2 0.8s ease-in-out infinite 0.2s;
+      animation: equalizer-2 1s ease-in-out infinite 0.2s;
     }
   }
 }
@@ -524,6 +559,16 @@
   }
 }
 
+@keyframes button {
+  0%,
+  100% {
+    scale: 1;
+  }
+  50% {
+    scale: 0.95;
+  }
+}
+
 @keyframes equalizer-1 {
   0%,
   100% {
@@ -579,7 +624,8 @@
     inset 0 0 100px rgba(0, 100, 200, 0.05),
     0 8px 32px rgba(0, 0, 0, 0.4);
   position: relative;
-  overflow: hidden;
+  overflow: visible;
+  z-index: 10;
 
   // Subtle tech panel grid pattern
   &::before {
@@ -699,26 +745,26 @@
     &::before {
       content: "";
       position: absolute;
-      left: -4rem;
+      left: -2rem;
       top: 50%;
       transform: translateY(-50%);
       width: 3rem;
       height: 3px;
       background: linear-gradient(90deg, transparent, #0096ff);
-      box-shadow: 0 0 10px rgba(0, 150, 255, 0.8);
+      //box-shadow: 0 0 10px rgba(0, 150, 255, 0.8);
     }
 
     // Orange line on the right
     &::after {
       content: "";
       position: absolute;
-      right: -4rem;
+      right: -2rem;
       top: 50%;
       transform: translateY(-50%);
       width: 3rem;
       height: 3px;
       background: linear-gradient(90deg, #ff7800, transparent);
-      box-shadow: 0 0 10px rgba(255, 120, 0, 0.8);
+      //box-shadow: 0 0 10px rgba(255, 120, 0, 0.8);
     }
 
     @include media-up(md) {
@@ -726,15 +772,15 @@
 
       &::before,
       &::after {
-        width: 5rem;
+        width: 6rem;
       }
 
       &::before {
-        left: -6rem;
+        left: -2rem;
       }
 
       &::after {
-        right: -6rem;
+        right: -2rem;
       }
     }
   }
diff --git a/assets/sass/style.scss b/assets/sass/style.scss
index e165389..e5591e9 100644
--- a/assets/sass/style.scss
+++ b/assets/sass/style.scss
@@ -26,6 +26,7 @@
 @import "pages/blog";
 @import "pages/media";
 @import "pages/resources";
+@import "pages/button-generator";
 
 @import url(https://fonts.bunny.net/css?family=abel:400|barlow-condensed:400,500|caveat:400|lato:300,300i,400,400i|neonderthaw:400);
 
diff --git a/content/blog/2026-01-06-week-3-bit-chilly-out/index.md b/content/blog/2026-01-06-week-3-bit-chilly-out/index.md
index 0106157..f0dd967 100644
--- a/content/blog/2026-01-06-week-3-bit-chilly-out/index.md
+++ b/content/blog/2026-01-06-week-3-bit-chilly-out/index.md
@@ -9,6 +9,8 @@ draft: true
 
 - ❄️ It's been pretty cold and we've had the lightest sprinkling of snow.
 - 📱 I did a mobile pass on some of the pages on this website, it works a bit better on phones now.
+- 🟠 Added the [resources](/resources) section with a script to pull weekly last.fm stats (see example output below!)
+- 🆒 Started working on an [88x31 button creator](/resources/button-generator/), it's got a decent amount of functionality so far.
 
 ## Links I Found Interesting
 
diff --git a/content/media/taskmaster-champion-of-champions-4/canvas.png b/content/media/taskmaster-champion-of-champions-4/canvas.png
new file mode 100644
index 0000000..a96b8e7
Binary files /dev/null and b/content/media/taskmaster-champion-of-champions-4/canvas.png differ
diff --git a/content/resources/button-generator/index.md b/content/resources/button-generator/index.md
new file mode 100644
index 0000000..9f5d5d2
--- /dev/null
+++ b/content/resources/button-generator/index.md
@@ -0,0 +1,23 @@
+---
+title: "88x31 Button Creator"
+date: 2026-01-08
+description: "Make custom 88x31 pixel buttons with text, colors, gradients, and textures"
+icon: "button-generator"
+demo_url: ""
+source_url: ""
+draft: false
+---
+
+Welcome to my 88x31 button creator, this is a pretty rough and ready implementation so it could be buggy, please let me know if you find any issues.
+
+This supports gif despite the basic `canvas` tag limitation courtesy of [gif.js](https://github.com/jnordberg/gif.js) - none of this would be possible without that project.
+
+Big thanks to [neonaut's 88x31 archive](https://neonaut.neocities.org/cyber/88x31) and everyone who made the buttons that appear there. You should check it out if you need inspiration for your button!
+
+{{< button-generator >}}
+
+---
+
+### Changelog
+
+- 08/01/2025 - Initial release.
diff --git a/layouts/_default/baseof.html b/layouts/_default/baseof.html
index 5546f2c..0ac2b0f 100755
--- a/layouts/_default/baseof.html
+++ b/layouts/_default/baseof.html
@@ -33,5 +33,12 @@
     <main role="main">{{ block "main" . }}{{ end }}</main>
     {{ block "footer" . }}{{ partial "site-footer.html" . }}{{ end }} {{ block
     "scripts" . }}{{ partial "site-scripts.html" . }}{{ end }}
+
+    <!-- Button Generator - only load if page content contains button-generator shortcode -->
+    {{ if or (findRE "{{<\\s*button-generator" .RawContent) (findRE "{{%\\s*button-generator" .RawContent) }}
+    <script src="{{ "js/gif.js" | relURL }}"></script>
+    {{ $buttonGenerator := resources.Get "js/button-generator.js" | resources.Minify | resources.Fingerprint }}
+    <script src="{{ $buttonGenerator.RelPermalink }}" integrity="{{ $buttonGenerator.Data.Integrity }}"></script>
+    {{ end }}
   </body>
 </html>
diff --git a/layouts/partials/site-scripts.html b/layouts/partials/site-scripts.html
index 5f3690d..b8ee8b1 100644
--- a/layouts/partials/site-scripts.html
+++ b/layouts/partials/site-scripts.html
@@ -7,7 +7,7 @@
 {{ $filtered := slice }}
 {{ range $remaining }}
   {{ $path := .RelPermalink }}
-  {{ if and (not (strings.Contains $path "/terminal.js")) (not (strings.Contains $path "/init.js")) }}
+  {{ if and (not (strings.Contains $path "/terminal.js")) (not (strings.Contains $path "/init.js")) (not (strings.Contains $path "/button-generator.js")) }}
     {{ $filtered = $filtered | append . }}
   {{ end }}
 {{ end }}
diff --git a/layouts/resources/single.html b/layouts/resources/single.html
index dc3de9f..3554198 100644
--- a/layouts/resources/single.html
+++ b/layouts/resources/single.html
@@ -48,5 +48,8 @@
       {{ end }}
     </nav>
   </article>
+    <div class="background-cube">
+      {{ partial "elements/companion-cube.html" . }}
+    </div>
 </div>
 {{ end }}
diff --git a/layouts/shortcodes/button-generator.html b/layouts/shortcodes/button-generator.html
new file mode 100644
index 0000000..8d65fa3
--- /dev/null
+++ b/layouts/shortcodes/button-generator.html
@@ -0,0 +1,607 @@
+<div id="button-generator-app">
+  <div class="generator-container">
+    <div class="preview-section">
+      <h3>Preview</h3>
+      <div class="preview-container">
+        <div class="preview-wrapper">
+          <canvas id="button-canvas" width="88" height="31"></canvas>
+        </div>
+      </div>
+      <button id="download-button" class="btn-primary">Download Button</button>
+
+      <div class="presets-container">
+        <h3>Presets</h3>
+        <button id="preset-random" class="btn-secondary">Random Button</button>
+        <button id="preset-classic" class="btn-secondary">Classic Style</button>
+        <button id="preset-modern" class="btn-secondary">Modern Style</button>
+      </div>
+    </div>
+
+    <div class="controls-section">
+      <div class="control-group">
+        <h3 class="control-group-header">
+          <span>Text Line 1</span>
+          <span class="toggle-icon">−</span>
+        </h3>
+        <div class="control-group-content">
+          <label for="button-text">Text</label>
+          <input
+            type="text"
+            id="button-text"
+            value="RITUAL.SH"
+            maxlength="20"
+          />
+
+          <label class="checkbox-label">
+            <input type="checkbox" id="text-enabled" checked />
+            <span>Enable Text Line 1</span>
+          </label>
+
+          <label for="font-size"
+            >Font Size: <span id="font-size-value">14</span>px</label
+          >
+          <input type="range" id="font-size" min="6" max="24" value="14" />
+
+          <label for="text-x"
+            >Horizontal Position: <span id="text-x-value">50</span>%</label
+          >
+          <input type="range" id="text-x" min="0" max="100" value="50" />
+
+          <label for="text-y"
+            >Vertical Position: <span id="text-y-value">35</span>%</label
+          >
+          <input type="range" id="text-y" min="0" max="100" value="35" />
+
+          <label for="text-color-type">Text Color Type</label>
+          <select id="text-color-type">
+            <option value="solid">Solid Color</option>
+            <option value="gradient">Gradient</option>
+          </select>
+
+          <div id="text-solid-color">
+            <label for="text-color">Text Color</label>
+            <input type="color" id="text-color" value="#ffffff" />
+          </div>
+
+          <div id="text-gradient-color" style="display: none">
+            <label for="text-gradient-color1">Gradient Color 1</label>
+            <input type="color" id="text-gradient-color1" value="#ffffff" />
+
+            <label for="text-gradient-color2">Gradient Color 2</label>
+            <input type="color" id="text-gradient-color2" value="#00ffff" />
+
+            <label for="text-gradient-angle"
+              >Gradient Angle:
+              <span id="text-gradient-angle-value">0</span>°</label
+            >
+            <input
+              type="range"
+              id="text-gradient-angle"
+              min="0"
+              max="360"
+              value="0"
+            />
+          </div>
+
+          <label class="checkbox-label">
+            <input type="checkbox" id="text-outline" />
+            <span>Outline</span>
+          </label>
+          <input
+            type="color"
+            id="outline-color"
+            value="#000000"
+            style="display: none"
+          />
+
+          <label for="font-family">Font</label>
+          <select id="font-family">
+            <option value="Lato">Lato</option>
+            <option value="Roboto">Roboto</option>
+            <option value="Open Sans">Open Sans</option>
+            <option value="Montserrat">Montserrat</option>
+            <option value="Oswald">Oswald</option>
+            <option value="Bebas Neue">Bebas Neue</option>
+            <option value="Roboto Mono">Roboto Mono</option>
+            <option value="VT323">VT323</option>
+            <option value="Press Start 2P">Press Start 2P</option>
+            <option value="DSEG7-Classic">DSEG7</option>
+          </select>
+
+          <div class="checkbox-row">
+            <label class="checkbox-label">
+              <input type="checkbox" id="font-bold" />
+              <span>Bold</span>
+            </label>
+            <label class="checkbox-label">
+              <input type="checkbox" id="font-italic" />
+              <span>Italic</span>
+            </label>
+          </div>
+        </div>
+      </div>
+
+      <div class="control-group">
+        <h3 class="control-group-header">
+          <span>Text Line 1 Animation</span>
+          <span class="toggle-icon">−</span>
+        </h3>
+        <div class="control-group-content">
+          <label class="checkbox-label">
+            <input type="checkbox" id="animate-text-wave" />
+            <span>Wave Animation</span>
+          </label>
+          <div id="wave-controls" style="display: none">
+            <label for="wave-amplitude"
+              >Amplitude: <span id="wave-amplitude-value">3</span>px</label
+            >
+            <input
+              type="range"
+              id="wave-amplitude"
+              min="0"
+              max="10"
+              value="3"
+              step="0.5"
+            />
+
+            <label for="wave-speed"
+              >Speed: <span id="wave-speed-value">1.0</span>x</label
+            >
+            <input
+              type="range"
+              id="wave-speed"
+              min="0.5"
+              max="3"
+              value="1.0"
+              step="0.1"
+            />
+          </div>
+
+          <label class="checkbox-label">
+            <input type="checkbox" id="animate-text-rainbow" />
+            <span>Rainbow Text</span>
+          </label>
+          <div id="rainbow-text-controls" style="display: none">
+            <label for="text-rainbow-speed"
+              >Speed: <span id="text-rainbow-speed-value">1.0</span>x</label
+            >
+            <input
+              type="range"
+              id="text-rainbow-speed"
+              min="0.5"
+              max="5"
+              value="1.0"
+              step="0.1"
+            />
+          </div>
+        </div>
+      </div>
+
+      <div class="control-group">
+        <h3 class="control-group-header">
+          <span>Text Line 2</span>
+          <span class="toggle-icon">−</span>
+        </h3>
+        <div class="control-group-content">
+          <label for="button-text2">Text</label>
+          <input type="text" id="button-text2" value="" maxlength="20" />
+
+          <label class="checkbox-label">
+            <input type="checkbox" id="text2-enabled" />
+            <span>Enable Text Line 2</span>
+          </label>
+
+          <label for="font-size2"
+            >Font Size: <span id="font-size2-value">12</span>px</label
+          >
+          <input type="range" id="font-size2" min="6" max="24" value="12" />
+
+          <label for="text2-x"
+            >Horizontal Position: <span id="text2-x-value">50</span>%</label
+          >
+          <input type="range" id="text2-x" min="0" max="100" value="50" />
+
+          <label for="text2-y"
+            >Vertical Position: <span id="text2-y-value">65</span>%</label
+          >
+          <input type="range" id="text2-y" min="0" max="100" value="65" />
+
+          <label for="text2-color-type">Text Color Type</label>
+          <select id="text2-color-type">
+            <option value="solid">Solid Color</option>
+            <option value="gradient">Gradient</option>
+          </select>
+
+          <div id="text2-solid-color">
+            <label for="text2-color">Text Color</label>
+            <input type="color" id="text2-color" value="#ffffff" />
+          </div>
+
+          <div id="text2-gradient-color" style="display: none">
+            <label for="text2-gradient-color1">Gradient Color 1</label>
+            <input type="color" id="text2-gradient-color1" value="#ffffff" />
+
+            <label for="text2-gradient-color2">Gradient Color 2</label>
+            <input type="color" id="text2-gradient-color2" value="#00ffff" />
+
+            <label for="text2-gradient-angle"
+              >Gradient Angle:
+              <span id="text2-gradient-angle-value">0</span>°</label
+            >
+            <input
+              type="range"
+              id="text2-gradient-angle"
+              min="0"
+              max="360"
+              value="0"
+            />
+          </div>
+
+          <label class="checkbox-label">
+            <input type="checkbox" id="text2-outline" />
+            <span>Outline</span>
+          </label>
+          <input
+            type="color"
+            id="outline2-color"
+            value="#000000"
+            style="display: none"
+          />
+
+          <label for="font-family2">Font</label>
+          <select id="font-family2">
+            <option value="Lato">Lato</option>
+            <option value="Roboto">Roboto</option>
+            <option value="Open Sans">Open Sans</option>
+            <option value="Montserrat">Montserrat</option>
+            <option value="Oswald">Oswald</option>
+            <option value="Bebas Neue">Bebas Neue</option>
+            <option value="Roboto Mono">Roboto Mono</option>
+            <option value="VT323">VT323</option>
+            <option value="Press Start 2P">Press Start 2P</option>
+            <option value="DSEG7-Classic">DSEG7</option>
+          </select>
+
+          <div class="checkbox-row">
+            <label class="checkbox-label">
+              <input type="checkbox" id="font-bold2" />
+              <span>Bold</span>
+            </label>
+            <label class="checkbox-label">
+              <input type="checkbox" id="font-italic2" />
+              <span>Italic</span>
+            </label>
+          </div>
+        </div>
+      </div>
+
+      <div class="control-group">
+        <h3 class="control-group-header">
+          <span>Text Line 2 Animation</span>
+          <span class="toggle-icon">−</span>
+        </h3>
+        <div class="control-group-content">
+          <label class="checkbox-label">
+            <input type="checkbox" id="animate-text-wave2" />
+            <span>Wave Animation</span>
+          </label>
+          <div id="wave-controls2" style="display: none">
+            <label for="wave-amplitude2"
+              >Amplitude: <span id="wave-amplitude2-value">3</span>px</label
+            >
+            <input
+              type="range"
+              id="wave-amplitude2"
+              min="0"
+              max="10"
+              value="3"
+              step="0.5"
+            />
+
+            <label for="wave-speed2"
+              >Speed: <span id="wave-speed2-value">1.0</span>x</label
+            >
+            <input
+              type="range"
+              id="wave-speed2"
+              min="0.5"
+              max="3"
+              value="1.0"
+              step="0.1"
+            />
+          </div>
+
+          <label class="checkbox-label">
+            <input type="checkbox" id="animate-text-rainbow2" />
+            <span>Rainbow Text</span>
+          </label>
+          <div id="rainbow-text2-controls" style="display: none">
+            <label for="text-rainbow-speed2"
+              >Speed: <span id="text-rainbow-speed2-value">1.0</span>x</label
+            >
+            <input
+              type="range"
+              id="text-rainbow-speed2"
+              min="0.5"
+              max="5"
+              value="1.0"
+              step="0.1"
+            />
+          </div>
+        </div>
+      </div>
+
+      <div class="control-group">
+        <h3 class="control-group-header">
+          <span>Background</span>
+          <span class="toggle-icon">−</span>
+        </h3>
+        <div class="control-group-content">
+          <label for="bg-type">Background Type</label>
+          <select id="bg-type">
+            <option value="solid">Solid Color</option>
+            <option value="gradient">Gradient</option>
+            <option value="texture">Texture</option>
+          </select>
+
+          <div id="solid-controls">
+            <label for="bg-color">Background Color</label>
+            <input type="color" id="bg-color" value="#0066cc" />
+          </div>
+
+          <div id="gradient-controls" style="display: none">
+            <label for="gradient-color1">Color 1</label>
+            <input type="color" id="gradient-color1" value="#0066cc" />
+
+            <label for="gradient-color2">Color 2</label>
+            <input type="color" id="gradient-color2" value="#00ccff" />
+
+            <label for="gradient-angle"
+              >Angle: <span id="gradient-angle-value">90</span>°</label
+            >
+            <input
+              type="range"
+              id="gradient-angle"
+              min="0"
+              max="360"
+              value="90"
+            />
+          </div>
+
+          <div id="texture-controls" style="display: none">
+            <label for="texture-type">Texture Pattern</label>
+            <select id="texture-type">
+              <option value="dots">Dots</option>
+              <option value="grid">Grid</option>
+              <option value="diagonal">Diagonal Lines</option>
+              <option value="checkerboard">Checkerboard</option>
+              <option value="noise">Noise</option>
+              <option value="stars">Stars</option>
+            </select>
+
+            <label for="texture-color1">Base Color</label>
+            <input type="color" id="texture-color1" value="#0066cc" />
+
+            <label for="texture-color2">Pattern Color</label>
+            <input type="color" id="texture-color2" value="#0099ff" />
+
+            <label for="texture-scale"
+              >Pattern Scale: <span id="texture-scale-value">50</span>%</label
+            >
+            <input
+              type="range"
+              id="texture-scale"
+              min="10"
+              max="100"
+              value="50"
+            />
+          </div>
+        </div>
+      </div>
+
+      <div class="control-group">
+        <h3 class="control-group-header">
+          <span>Background Animation</span>
+          <span class="toggle-icon">−</span>
+        </h3>
+        <div class="control-group-content">
+          <label class="checkbox-label">
+            <input type="checkbox" id="animate-bg-rainbow" />
+            <span>Rainbow Flash</span>
+          </label>
+          <div id="rainbow-bg-controls" style="display: none">
+            <label for="rainbow-speed"
+              >Speed: <span id="rainbow-speed-value">0.5</span>x</label
+            >
+            <input
+              type="range"
+              id="rainbow-speed"
+              min="0.1"
+              max="3"
+              value="0.5"
+              step="0.1"
+            />
+          </div>
+
+          <label class="checkbox-label">
+            <input type="checkbox" id="animate-bg-rainbow-gradient" />
+            <span>Rainbow Gradient</span>
+          </label>
+        </div>
+      </div>
+
+      <div class="control-group">
+        <h3 class="control-group-header">
+          <span>Border</span>
+          <span class="toggle-icon">−</span>
+        </h3>
+        <div class="control-group-content">
+          <label for="border-width"
+            >Border Width: <span id="border-width-value">2</span>px</label
+          >
+          <input type="range" id="border-width" min="0" max="5" value="2" />
+
+          <label for="border-color">Border Color</label>
+          <input type="color" id="border-color" value="#000000" />
+
+          <label for="border-style">Border Style</label>
+          <select id="border-style">
+            <option value="solid">Solid</option>
+            <option value="inset">Inset (3D)</option>
+            <option value="outset">Outset (3D)</option>
+            <option value="ridge">Ridge</option>
+          </select>
+        </div>
+      </div>
+
+      <div class="control-group">
+        <h3 class="control-group-header">
+          <span>Special Effects</span>
+          <span class="toggle-icon">−</span>
+        </h3>
+        <div class="control-group-content">
+          <p class="info-text">
+            Almost all animations should stack, so pick as many as you want.
+          </p>
+
+          <label class="checkbox-label">
+            <input type="checkbox" id="animate-glitch" />
+            <span>Glitch Effect</span>
+          </label>
+          <div id="glitch-controls" style="display: none">
+            <label for="glitch-intensity"
+              >Intensity: <span id="glitch-intensity-value">3</span></label
+            >
+            <input
+              type="range"
+              id="glitch-intensity"
+              min="1"
+              max="10"
+              value="3"
+            />
+          </div>
+
+          <label class="checkbox-label">
+            <input type="checkbox" id="animate-pulse" />
+            <span>Pulse Effect</span>
+          </label>
+          <div id="pulse-controls" style="display: none">
+            <label for="pulse-scale"
+              >Scale: <span id="pulse-scale-value">1.1</span>x</label
+            >
+            <input
+              type="range"
+              id="pulse-scale"
+              min="1.0"
+              max="1.3"
+              value="1.1"
+              step="0.05"
+            />
+          </div>
+
+          <label class="checkbox-label">
+            <input type="checkbox" id="animate-shimmer" />
+            <span>Shimmer Effect</span>
+          </label>
+
+          <label class="checkbox-label">
+            <input type="checkbox" id="animate-scanline" />
+            <span>Scanline Effect</span>
+          </label>
+          <div id="scanline-controls" style="display: none">
+            <label for="scanline-intensity"
+              >Intensity: <span id="scanline-intensity-value">0.3</span></label
+            >
+            <input
+              type="range"
+              id="scanline-intensity"
+              min="0.1"
+              max="1"
+              value="0.3"
+              step="0.1"
+            />
+
+            <label for="scanline-speed"
+              >Speed: <span id="scanline-speed-value">1.0</span>x</label
+            >
+            <input
+              type="range"
+              id="scanline-speed"
+              min="0.5"
+              max="3"
+              value="1.0"
+              step="0.1"
+            />
+          </div>
+
+          <label class="checkbox-label">
+            <input type="checkbox" id="animate-rgb-split" />
+            <span>RGB Split Effect</span>
+          </label>
+          <div id="rgb-split-controls" style="display: none">
+            <label for="rgb-split-intensity"
+              >Intensity: <span id="rgb-split-intensity-value">2</span>px</label
+            >
+            <input
+              type="range"
+              id="rgb-split-intensity"
+              min="1"
+              max="5"
+              value="2"
+              step="0.5"
+            />
+          </div>
+
+          <label class="checkbox-label">
+            <input type="checkbox" id="animate-noise" />
+            <span>Noise Effect</span>
+          </label>
+          <div id="noise-controls" style="display: none">
+            <label for="noise-intensity"
+              >Intensity: <span id="noise-intensity-value">0.1</span></label
+            >
+            <input
+              type="range"
+              id="noise-intensity"
+              min="0.05"
+              max="0.5"
+              value="0.1"
+              step="0.05"
+            />
+          </div>
+          {{/*
+          <label class="checkbox-label">
+            <input type="checkbox" id="animate-rotate" />
+            <span>Rotate Effect</span>
+          </label>
+          <div id="rotate-controls" style="display: none">
+            <label for="rotate-angle"
+              >Max Angle: <span id="rotate-angle-value">5</span>°</label
+            >
+            <input
+              type="range"
+              id="rotate-angle"
+              min="2"
+              max="15"
+              value="5"
+              step="1"
+            />
+
+            <label for="rotate-speed"
+              >Speed: <span id="rotate-speed-value">1.0</span>x</label
+            >
+            <input
+              type="range"
+              id="rotate-speed"
+              min="0.5"
+              max="3"
+              value="1.0"
+              step="0.1"
+            />
+          </div>
+          */}}
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
diff --git a/static/js/gif.js b/static/js/gif.js
new file mode 100644
index 0000000..2e4d204
--- /dev/null
+++ b/static/js/gif.js
@@ -0,0 +1,3 @@
+// gif.js 0.2.0 - https://github.com/jnordberg/gif.js
+(function(f){if(typeof exports==="object"&&typeof module!=="undefined"){module.exports=f()}else if(typeof define==="function"&&define.amd){define([],f)}else{var g;if(typeof window!=="undefined"){g=window}else if(typeof global!=="undefined"){g=global}else if(typeof self!=="undefined"){g=self}else{g=this}g.GIF=f()}})(function(){var define,module,exports;return function e(t,n,r){function s(o,u){if(!n[o]){if(!t[o]){var a=typeof require=="function"&&require;if(!u&&a)return a(o,!0);if(i)return i(o,!0);var f=new Error("Cannot find module '"+o+"'");throw f.code="MODULE_NOT_FOUND",f}var l=n[o]={exports:{}};t[o][0].call(l.exports,function(e){var n=t[o][1][e];return s(n?n:e)},l,l.exports,e,t,n,r)}return n[o].exports}var i=typeof require=="function"&&require;for(var o=0;o<r.length;o++)s(r[o]);return s}({1:[function(require,module,exports){function EventEmitter(){this._events=this._events||{};this._maxListeners=this._maxListeners||undefined}module.exports=EventEmitter;EventEmitter.EventEmitter=EventEmitter;EventEmitter.prototype._events=undefined;EventEmitter.prototype._maxListeners=undefined;EventEmitter.defaultMaxListeners=10;EventEmitter.prototype.setMaxListeners=function(n){if(!isNumber(n)||n<0||isNaN(n))throw TypeError("n must be a positive number");this._maxListeners=n;return this};EventEmitter.prototype.emit=function(type){var er,handler,len,args,i,listeners;if(!this._events)this._events={};if(type==="error"){if(!this._events.error||isObject(this._events.error)&&!this._events.error.length){er=arguments[1];if(er instanceof Error){throw er}else{var err=new Error('Uncaught, unspecified "error" event. ('+er+")");err.context=er;throw err}}}handler=this._events[type];if(isUndefined(handler))return false;if(isFunction(handler)){switch(arguments.length){case 1:handler.call(this);break;case 2:handler.call(this,arguments[1]);break;case 3:handler.call(this,arguments[1],arguments[2]);break;default:args=Array.prototype.slice.call(arguments,1);handler.apply(this,args)}}else if(isObject(handler)){args=Array.prototype.slice.call(arguments,1);listeners=handler.slice();len=listeners.length;for(i=0;i<len;i++)listeners[i].apply(this,args)}return true};EventEmitter.prototype.addListener=function(type,listener){var m;if(!isFunction(listener))throw TypeError("listener must be a function");if(!this._events)this._events={};if(this._events.newListener)this.emit("newListener",type,isFunction(listener.listener)?listener.listener:listener);if(!this._events[type])this._events[type]=listener;else if(isObject(this._events[type]))this._events[type].push(listener);else this._events[type]=[this._events[type],listener];if(isObject(this._events[type])&&!this._events[type].warned){if(!isUndefined(this._maxListeners)){m=this._maxListeners}else{m=EventEmitter.defaultMaxListeners}if(m&&m>0&&this._events[type].length>m){this._events[type].warned=true;console.error("(node) warning: possible EventEmitter memory "+"leak detected. %d listeners added. "+"Use emitter.setMaxListeners() to increase limit.",this._events[type].length);if(typeof console.trace==="function"){console.trace()}}}return this};EventEmitter.prototype.on=EventEmitter.prototype.addListener;EventEmitter.prototype.once=function(type,listener){if(!isFunction(listener))throw TypeError("listener must be a function");var fired=false;function g(){this.removeListener(type,g);if(!fired){fired=true;listener.apply(this,arguments)}}g.listener=listener;this.on(type,g);return this};EventEmitter.prototype.removeListener=function(type,listener){var list,position,length,i;if(!isFunction(listener))throw TypeError("listener must be a function");if(!this._events||!this._events[type])return this;list=this._events[type];length=list.length;position=-1;if(list===listener||isFunction(list.listener)&&list.listener===listener){delete this._events[type];if(this._events.removeListener)this.emit("removeListener",type,listener)}else if(isObject(list)){for(i=length;i-- >0;){if(list[i]===listener||list[i].listener&&list[i].listener===listener){position=i;break}}if(position<0)return this;if(list.length===1){list.length=0;delete this._events[type]}else{list.splice(position,1)}if(this._events.removeListener)this.emit("removeListener",type,listener)}return this};EventEmitter.prototype.removeAllListeners=function(type){var key,listeners;if(!this._events)return this;if(!this._events.removeListener){if(arguments.length===0)this._events={};else if(this._events[type])delete this._events[type];return this}if(arguments.length===0){for(key in this._events){if(key==="removeListener")continue;this.removeAllListeners(key)}this.removeAllListeners("removeListener");this._events={};return this}listeners=this._events[type];if(isFunction(listeners)){this.removeListener(type,listeners)}else if(listeners){while(listeners.length)this.removeListener(type,listeners[listeners.length-1])}delete this._events[type];return this};EventEmitter.prototype.listeners=function(type){var ret;if(!this._events||!this._events[type])ret=[];else if(isFunction(this._events[type]))ret=[this._events[type]];else ret=this._events[type].slice();return ret};EventEmitter.prototype.listenerCount=function(type){if(this._events){var evlistener=this._events[type];if(isFunction(evlistener))return 1;else if(evlistener)return evlistener.length}return 0};EventEmitter.listenerCount=function(emitter,type){return emitter.listenerCount(type)};function isFunction(arg){return typeof arg==="function"}function isNumber(arg){return typeof arg==="number"}function isObject(arg){return typeof arg==="object"&&arg!==null}function isUndefined(arg){return arg===void 0}},{}],2:[function(require,module,exports){var UA,browser,mode,platform,ua;ua=navigator.userAgent.toLowerCase();platform=navigator.platform.toLowerCase();UA=ua.match(/(opera|ie|firefox|chrome|version)[\s\/:]([\w\d\.]+)?.*?(safari|version[\s\/:]([\w\d\.]+)|$)/)||[null,"unknown",0];mode=UA[1]==="ie"&&document.documentMode;browser={name:UA[1]==="version"?UA[3]:UA[1],version:mode||parseFloat(UA[1]==="opera"&&UA[4]?UA[4]:UA[2]),platform:{name:ua.match(/ip(?:ad|od|hone)/)?"ios":(ua.match(/(?:webos|android)/)||platform.match(/mac|win|linux/)||["other"])[0]}};browser[browser.name]=true;browser[browser.name+parseInt(browser.version,10)]=true;browser.platform[browser.platform.name]=true;module.exports=browser},{}],3:[function(require,module,exports){var EventEmitter,GIF,browser,extend=function(child,parent){for(var key in parent){if(hasProp.call(parent,key))child[key]=parent[key]}function ctor(){this.constructor=child}ctor.prototype=parent.prototype;child.prototype=new ctor;child.__super__=parent.prototype;return child},hasProp={}.hasOwnProperty,indexOf=[].indexOf||function(item){for(var i=0,l=this.length;i<l;i++){if(i in this&&this[i]===item)return i}return-1},slice=[].slice;EventEmitter=require("events").EventEmitter;browser=require("./browser.coffee");GIF=function(superClass){var defaults,frameDefaults;extend(GIF,superClass);defaults={workerScript:"gif.worker.js",workers:2,repeat:0,background:"#fff",quality:10,width:null,height:null,transparent:null,debug:false,dither:false};frameDefaults={delay:500,copy:false};function GIF(options){var base,key,value;this.running=false;this.options={};this.frames=[];this.freeWorkers=[];this.activeWorkers=[];this.setOptions(options);for(key in defaults){value=defaults[key];if((base=this.options)[key]==null){base[key]=value}}}GIF.prototype.setOption=function(key,value){this.options[key]=value;if(this._canvas!=null&&(key==="width"||key==="height")){return this._canvas[key]=value}};GIF.prototype.setOptions=function(options){var key,results,value;results=[];for(key in options){if(!hasProp.call(options,key))continue;value=options[key];results.push(this.setOption(key,value))}return results};GIF.prototype.addFrame=function(image,options){var frame,key;if(options==null){options={}}frame={};frame.transparent=this.options.transparent;for(key in frameDefaults){frame[key]=options[key]||frameDefaults[key]}if(this.options.width==null){this.setOption("width",image.width)}if(this.options.height==null){this.setOption("height",image.height)}if(typeof ImageData!=="undefined"&&ImageData!==null&&image instanceof ImageData){frame.data=image.data}else if(typeof CanvasRenderingContext2D!=="undefined"&&CanvasRenderingContext2D!==null&&image instanceof CanvasRenderingContext2D||typeof WebGLRenderingContext!=="undefined"&&WebGLRenderingContext!==null&&image instanceof WebGLRenderingContext){if(options.copy){frame.data=this.getContextData(image)}else{frame.context=image}}else if(image.childNodes!=null){if(options.copy){frame.data=this.getImageData(image)}else{frame.image=image}}else{throw new Error("Invalid image")}return this.frames.push(frame)};GIF.prototype.render=function(){var i,j,numWorkers,ref;if(this.running){throw new Error("Already running")}if(this.options.width==null||this.options.height==null){throw new Error("Width and height must be set prior to rendering")}this.running=true;this.nextFrame=0;this.finishedFrames=0;this.imageParts=function(){var j,ref,results;results=[];for(i=j=0,ref=this.frames.length;0<=ref?j<ref:j>ref;i=0<=ref?++j:--j){results.push(null)}return results}.call(this);numWorkers=this.spawnWorkers();if(this.options.globalPalette===true){this.renderNextFrame()}else{for(i=j=0,ref=numWorkers;0<=ref?j<ref:j>ref;i=0<=ref?++j:--j){this.renderNextFrame()}}this.emit("start");return this.emit("progress",0)};GIF.prototype.abort=function(){var worker;while(true){worker=this.activeWorkers.shift();if(worker==null){break}this.log("killing active worker");worker.terminate()}this.running=false;return this.emit("abort")};GIF.prototype.spawnWorkers=function(){var j,numWorkers,ref,results;numWorkers=Math.min(this.options.workers,this.frames.length);(function(){results=[];for(var j=ref=this.freeWorkers.length;ref<=numWorkers?j<numWorkers:j>numWorkers;ref<=numWorkers?j++:j--){results.push(j)}return results}).apply(this).forEach(function(_this){return function(i){var worker;_this.log("spawning worker "+i);worker=new Worker(_this.options.workerScript);worker.onmessage=function(event){_this.activeWorkers.splice(_this.activeWorkers.indexOf(worker),1);_this.freeWorkers.push(worker);return _this.frameFinished(event.data)};return _this.freeWorkers.push(worker)}}(this));return numWorkers};GIF.prototype.frameFinished=function(frame){var i,j,ref;this.log("frame "+frame.index+" finished - "+this.activeWorkers.length+" active");this.finishedFrames++;this.emit("progress",this.finishedFrames/this.frames.length);this.imageParts[frame.index]=frame;if(this.options.globalPalette===true){this.options.globalPalette=frame.globalPalette;this.log("global palette analyzed");if(this.frames.length>2){for(i=j=1,ref=this.freeWorkers.length;1<=ref?j<ref:j>ref;i=1<=ref?++j:--j){this.renderNextFrame()}}}if(indexOf.call(this.imageParts,null)>=0){return this.renderNextFrame()}else{return this.finishRendering()}};GIF.prototype.finishRendering=function(){var data,frame,i,image,j,k,l,len,len1,len2,len3,offset,page,ref,ref1,ref2;len=0;ref=this.imageParts;for(j=0,len1=ref.length;j<len1;j++){frame=ref[j];len+=(frame.data.length-1)*frame.pageSize+frame.cursor}len+=frame.pageSize-frame.cursor;this.log("rendering finished - filesize "+Math.round(len/1e3)+"kb");data=new Uint8Array(len);offset=0;ref1=this.imageParts;for(k=0,len2=ref1.length;k<len2;k++){frame=ref1[k];ref2=frame.data;for(i=l=0,len3=ref2.length;l<len3;i=++l){page=ref2[i];data.set(page,offset);if(i===frame.data.length-1){offset+=frame.cursor}else{offset+=frame.pageSize}}}image=new Blob([data],{type:"image/gif"});return this.emit("finished",image,data)};GIF.prototype.renderNextFrame=function(){var frame,task,worker;if(this.freeWorkers.length===0){throw new Error("No free workers")}if(this.nextFrame>=this.frames.length){return}frame=this.frames[this.nextFrame++];worker=this.freeWorkers.shift();task=this.getTask(frame);this.log("starting frame "+(task.index+1)+" of "+this.frames.length);this.activeWorkers.push(worker);return worker.postMessage(task)};GIF.prototype.getContextData=function(ctx){return ctx.getImageData(0,0,this.options.width,this.options.height).data};GIF.prototype.getImageData=function(image){var ctx;if(this._canvas==null){this._canvas=document.createElement("canvas");this._canvas.width=this.options.width;this._canvas.height=this.options.height}ctx=this._canvas.getContext("2d");ctx.setFill=this.options.background;ctx.fillRect(0,0,this.options.width,this.options.height);ctx.drawImage(image,0,0);return this.getContextData(ctx)};GIF.prototype.getTask=function(frame){var index,task;index=this.frames.indexOf(frame);task={index:index,last:index===this.frames.length-1,delay:frame.delay,transparent:frame.transparent,width:this.options.width,height:this.options.height,quality:this.options.quality,dither:this.options.dither,globalPalette:this.options.globalPalette,repeat:this.options.repeat,canTransfer:browser.name==="chrome"};if(frame.data!=null){task.data=frame.data}else if(frame.context!=null){task.data=this.getContextData(frame.context)}else if(frame.image!=null){task.data=this.getImageData(frame.image)}else{throw new Error("Invalid frame")}return task};GIF.prototype.log=function(){var args;args=1<=arguments.length?slice.call(arguments,0):[];if(!this.options.debug){return}return console.log.apply(console,args)};return GIF}(EventEmitter);module.exports=GIF},{"./browser.coffee":2,events:1}]},{},[3])(3)});
+//# sourceMappingURL=gif.js.map
diff --git a/static/js/gif.worker.js b/static/js/gif.worker.js
new file mode 100644
index 0000000..269624e
--- /dev/null
+++ b/static/js/gif.worker.js
@@ -0,0 +1,3 @@
+// gif.worker.js 0.2.0 - https://github.com/jnordberg/gif.js
+(function e(t,n,r){function s(o,u){if(!n[o]){if(!t[o]){var a=typeof require=="function"&&require;if(!u&&a)return a(o,!0);if(i)return i(o,!0);var f=new Error("Cannot find module '"+o+"'");throw f.code="MODULE_NOT_FOUND",f}var l=n[o]={exports:{}};t[o][0].call(l.exports,function(e){var n=t[o][1][e];return s(n?n:e)},l,l.exports,e,t,n,r)}return n[o].exports}var i=typeof require=="function"&&require;for(var o=0;o<r.length;o++)s(r[o]);return s})({1:[function(require,module,exports){var NeuQuant=require("./TypedNeuQuant.js");var LZWEncoder=require("./LZWEncoder.js");function ByteArray(){this.page=-1;this.pages=[];this.newPage()}ByteArray.pageSize=4096;ByteArray.charMap={};for(var i=0;i<256;i++)ByteArray.charMap[i]=String.fromCharCode(i);ByteArray.prototype.newPage=function(){this.pages[++this.page]=new Uint8Array(ByteArray.pageSize);this.cursor=0};ByteArray.prototype.getData=function(){var rv="";for(var p=0;p<this.pages.length;p++){for(var i=0;i<ByteArray.pageSize;i++){rv+=ByteArray.charMap[this.pages[p][i]]}}return rv};ByteArray.prototype.writeByte=function(val){if(this.cursor>=ByteArray.pageSize)this.newPage();this.pages[this.page][this.cursor++]=val};ByteArray.prototype.writeUTFBytes=function(string){for(var l=string.length,i=0;i<l;i++)this.writeByte(string.charCodeAt(i))};ByteArray.prototype.writeBytes=function(array,offset,length){for(var l=length||array.length,i=offset||0;i<l;i++)this.writeByte(array[i])};function GIFEncoder(width,height){this.width=~~width;this.height=~~height;this.transparent=null;this.transIndex=0;this.repeat=-1;this.delay=0;this.image=null;this.pixels=null;this.indexedPixels=null;this.colorDepth=null;this.colorTab=null;this.neuQuant=null;this.usedEntry=new Array;this.palSize=7;this.dispose=-1;this.firstFrame=true;this.sample=10;this.dither=false;this.globalPalette=false;this.out=new ByteArray}GIFEncoder.prototype.setDelay=function(milliseconds){this.delay=Math.round(milliseconds/10)};GIFEncoder.prototype.setFrameRate=function(fps){this.delay=Math.round(100/fps)};GIFEncoder.prototype.setDispose=function(disposalCode){if(disposalCode>=0)this.dispose=disposalCode};GIFEncoder.prototype.setRepeat=function(repeat){this.repeat=repeat};GIFEncoder.prototype.setTransparent=function(color){this.transparent=color};GIFEncoder.prototype.addFrame=function(imageData){this.image=imageData;this.colorTab=this.globalPalette&&this.globalPalette.slice?this.globalPalette:null;this.getImagePixels();this.analyzePixels();if(this.globalPalette===true)this.globalPalette=this.colorTab;if(this.firstFrame){this.writeLSD();this.writePalette();if(this.repeat>=0){this.writeNetscapeExt()}}this.writeGraphicCtrlExt();this.writeImageDesc();if(!this.firstFrame&&!this.globalPalette)this.writePalette();this.writePixels();this.firstFrame=false};GIFEncoder.prototype.finish=function(){this.out.writeByte(59)};GIFEncoder.prototype.setQuality=function(quality){if(quality<1)quality=1;this.sample=quality};GIFEncoder.prototype.setDither=function(dither){if(dither===true)dither="FloydSteinberg";this.dither=dither};GIFEncoder.prototype.setGlobalPalette=function(palette){this.globalPalette=palette};GIFEncoder.prototype.getGlobalPalette=function(){return this.globalPalette&&this.globalPalette.slice&&this.globalPalette.slice(0)||this.globalPalette};GIFEncoder.prototype.writeHeader=function(){this.out.writeUTFBytes("GIF89a")};GIFEncoder.prototype.analyzePixels=function(){if(!this.colorTab){this.neuQuant=new NeuQuant(this.pixels,this.sample);this.neuQuant.buildColormap();this.colorTab=this.neuQuant.getColormap()}if(this.dither){this.ditherPixels(this.dither.replace("-serpentine",""),this.dither.match(/-serpentine/)!==null)}else{this.indexPixels()}this.pixels=null;this.colorDepth=8;this.palSize=7;if(this.transparent!==null){this.transIndex=this.findClosest(this.transparent,true)}};GIFEncoder.prototype.indexPixels=function(imgq){var nPix=this.pixels.length/3;this.indexedPixels=new Uint8Array(nPix);var k=0;for(var j=0;j<nPix;j++){var index=this.findClosestRGB(this.pixels[k++]&255,this.pixels[k++]&255,this.pixels[k++]&255);this.usedEntry[index]=true;this.indexedPixels[j]=index}};GIFEncoder.prototype.ditherPixels=function(kernel,serpentine){var kernels={FalseFloydSteinberg:[[3/8,1,0],[3/8,0,1],[2/8,1,1]],FloydSteinberg:[[7/16,1,0],[3/16,-1,1],[5/16,0,1],[1/16,1,1]],Stucki:[[8/42,1,0],[4/42,2,0],[2/42,-2,1],[4/42,-1,1],[8/42,0,1],[4/42,1,1],[2/42,2,1],[1/42,-2,2],[2/42,-1,2],[4/42,0,2],[2/42,1,2],[1/42,2,2]],Atkinson:[[1/8,1,0],[1/8,2,0],[1/8,-1,1],[1/8,0,1],[1/8,1,1],[1/8,0,2]]};if(!kernel||!kernels[kernel]){throw"Unknown dithering kernel: "+kernel}var ds=kernels[kernel];var index=0,height=this.height,width=this.width,data=this.pixels;var direction=serpentine?-1:1;this.indexedPixels=new Uint8Array(this.pixels.length/3);for(var y=0;y<height;y++){if(serpentine)direction=direction*-1;for(var x=direction==1?0:width-1,xend=direction==1?width:0;x!==xend;x+=direction){index=y*width+x;var idx=index*3;var r1=data[idx];var g1=data[idx+1];var b1=data[idx+2];idx=this.findClosestRGB(r1,g1,b1);this.usedEntry[idx]=true;this.indexedPixels[index]=idx;idx*=3;var r2=this.colorTab[idx];var g2=this.colorTab[idx+1];var b2=this.colorTab[idx+2];var er=r1-r2;var eg=g1-g2;var eb=b1-b2;for(var i=direction==1?0:ds.length-1,end=direction==1?ds.length:0;i!==end;i+=direction){var x1=ds[i][1];var y1=ds[i][2];if(x1+x>=0&&x1+x<width&&y1+y>=0&&y1+y<height){var d=ds[i][0];idx=index+x1+y1*width;idx*=3;data[idx]=Math.max(0,Math.min(255,data[idx]+er*d));data[idx+1]=Math.max(0,Math.min(255,data[idx+1]+eg*d));data[idx+2]=Math.max(0,Math.min(255,data[idx+2]+eb*d))}}}}};GIFEncoder.prototype.findClosest=function(c,used){return this.findClosestRGB((c&16711680)>>16,(c&65280)>>8,c&255,used)};GIFEncoder.prototype.findClosestRGB=function(r,g,b,used){if(this.colorTab===null)return-1;if(this.neuQuant&&!used){return this.neuQuant.lookupRGB(r,g,b)}var c=b|g<<8|r<<16;var minpos=0;var dmin=256*256*256;var len=this.colorTab.length;for(var i=0,index=0;i<len;index++){var dr=r-(this.colorTab[i++]&255);var dg=g-(this.colorTab[i++]&255);var db=b-(this.colorTab[i++]&255);var d=dr*dr+dg*dg+db*db;if((!used||this.usedEntry[index])&&d<dmin){dmin=d;minpos=index}}return minpos};GIFEncoder.prototype.getImagePixels=function(){var w=this.width;var h=this.height;this.pixels=new Uint8Array(w*h*3);var data=this.image;var srcPos=0;var count=0;for(var i=0;i<h;i++){for(var j=0;j<w;j++){this.pixels[count++]=data[srcPos++];this.pixels[count++]=data[srcPos++];this.pixels[count++]=data[srcPos++];srcPos++}}};GIFEncoder.prototype.writeGraphicCtrlExt=function(){this.out.writeByte(33);this.out.writeByte(249);this.out.writeByte(4);var transp,disp;if(this.transparent===null){transp=0;disp=0}else{transp=1;disp=2}if(this.dispose>=0){disp=dispose&7}disp<<=2;this.out.writeByte(0|disp|0|transp);this.writeShort(this.delay);this.out.writeByte(this.transIndex);this.out.writeByte(0)};GIFEncoder.prototype.writeImageDesc=function(){this.out.writeByte(44);this.writeShort(0);this.writeShort(0);this.writeShort(this.width);this.writeShort(this.height);if(this.firstFrame||this.globalPalette){this.out.writeByte(0)}else{this.out.writeByte(128|0|0|0|this.palSize)}};GIFEncoder.prototype.writeLSD=function(){this.writeShort(this.width);this.writeShort(this.height);this.out.writeByte(128|112|0|this.palSize);this.out.writeByte(0);this.out.writeByte(0)};GIFEncoder.prototype.writeNetscapeExt=function(){this.out.writeByte(33);this.out.writeByte(255);this.out.writeByte(11);this.out.writeUTFBytes("NETSCAPE2.0");this.out.writeByte(3);this.out.writeByte(1);this.writeShort(this.repeat);this.out.writeByte(0)};GIFEncoder.prototype.writePalette=function(){this.out.writeBytes(this.colorTab);var n=3*256-this.colorTab.length;for(var i=0;i<n;i++)this.out.writeByte(0)};GIFEncoder.prototype.writeShort=function(pValue){this.out.writeByte(pValue&255);this.out.writeByte(pValue>>8&255)};GIFEncoder.prototype.writePixels=function(){var enc=new LZWEncoder(this.width,this.height,this.indexedPixels,this.colorDepth);enc.encode(this.out)};GIFEncoder.prototype.stream=function(){return this.out};module.exports=GIFEncoder},{"./LZWEncoder.js":2,"./TypedNeuQuant.js":3}],2:[function(require,module,exports){var EOF=-1;var BITS=12;var HSIZE=5003;var masks=[0,1,3,7,15,31,63,127,255,511,1023,2047,4095,8191,16383,32767,65535];function LZWEncoder(width,height,pixels,colorDepth){var initCodeSize=Math.max(2,colorDepth);var accum=new Uint8Array(256);var htab=new Int32Array(HSIZE);var codetab=new Int32Array(HSIZE);var cur_accum,cur_bits=0;var a_count;var free_ent=0;var maxcode;var clear_flg=false;var g_init_bits,ClearCode,EOFCode;function char_out(c,outs){accum[a_count++]=c;if(a_count>=254)flush_char(outs)}function cl_block(outs){cl_hash(HSIZE);free_ent=ClearCode+2;clear_flg=true;output(ClearCode,outs)}function cl_hash(hsize){for(var i=0;i<hsize;++i)htab[i]=-1}function compress(init_bits,outs){var fcode,c,i,ent,disp,hsize_reg,hshift;g_init_bits=init_bits;clear_flg=false;n_bits=g_init_bits;maxcode=MAXCODE(n_bits);ClearCode=1<<init_bits-1;EOFCode=ClearCode+1;free_ent=ClearCode+2;a_count=0;ent=nextPixel();hshift=0;for(fcode=HSIZE;fcode<65536;fcode*=2)++hshift;hshift=8-hshift;hsize_reg=HSIZE;cl_hash(hsize_reg);output(ClearCode,outs);outer_loop:while((c=nextPixel())!=EOF){fcode=(c<<BITS)+ent;i=c<<hshift^ent;if(htab[i]===fcode){ent=codetab[i];continue}else if(htab[i]>=0){disp=hsize_reg-i;if(i===0)disp=1;do{if((i-=disp)<0)i+=hsize_reg;if(htab[i]===fcode){ent=codetab[i];continue outer_loop}}while(htab[i]>=0)}output(ent,outs);ent=c;if(free_ent<1<<BITS){codetab[i]=free_ent++;htab[i]=fcode}else{cl_block(outs)}}output(ent,outs);output(EOFCode,outs)}function encode(outs){outs.writeByte(initCodeSize);remaining=width*height;curPixel=0;compress(initCodeSize+1,outs);outs.writeByte(0)}function flush_char(outs){if(a_count>0){outs.writeByte(a_count);outs.writeBytes(accum,0,a_count);a_count=0}}function MAXCODE(n_bits){return(1<<n_bits)-1}function nextPixel(){if(remaining===0)return EOF;--remaining;var pix=pixels[curPixel++];return pix&255}function output(code,outs){cur_accum&=masks[cur_bits];if(cur_bits>0)cur_accum|=code<<cur_bits;else cur_accum=code;cur_bits+=n_bits;while(cur_bits>=8){char_out(cur_accum&255,outs);cur_accum>>=8;cur_bits-=8}if(free_ent>maxcode||clear_flg){if(clear_flg){maxcode=MAXCODE(n_bits=g_init_bits);clear_flg=false}else{++n_bits;if(n_bits==BITS)maxcode=1<<BITS;else maxcode=MAXCODE(n_bits)}}if(code==EOFCode){while(cur_bits>0){char_out(cur_accum&255,outs);cur_accum>>=8;cur_bits-=8}flush_char(outs)}}this.encode=encode}module.exports=LZWEncoder},{}],3:[function(require,module,exports){var ncycles=100;var netsize=256;var maxnetpos=netsize-1;var netbiasshift=4;var intbiasshift=16;var intbias=1<<intbiasshift;var gammashift=10;var gamma=1<<gammashift;var betashift=10;var beta=intbias>>betashift;var betagamma=intbias<<gammashift-betashift;var initrad=netsize>>3;var radiusbiasshift=6;var radiusbias=1<<radiusbiasshift;var initradius=initrad*radiusbias;var radiusdec=30;var alphabiasshift=10;var initalpha=1<<alphabiasshift;var alphadec;var radbiasshift=8;var radbias=1<<radbiasshift;var alpharadbshift=alphabiasshift+radbiasshift;var alpharadbias=1<<alpharadbshift;var prime1=499;var prime2=491;var prime3=487;var prime4=503;var minpicturebytes=3*prime4;function NeuQuant(pixels,samplefac){var network;var netindex;var bias;var freq;var radpower;function init(){network=[];netindex=new Int32Array(256);bias=new Int32Array(netsize);freq=new Int32Array(netsize);radpower=new Int32Array(netsize>>3);var i,v;for(i=0;i<netsize;i++){v=(i<<netbiasshift+8)/netsize;network[i]=new Float64Array([v,v,v,0]);freq[i]=intbias/netsize;bias[i]=0}}function unbiasnet(){for(var i=0;i<netsize;i++){network[i][0]>>=netbiasshift;network[i][1]>>=netbiasshift;network[i][2]>>=netbiasshift;network[i][3]=i}}function altersingle(alpha,i,b,g,r){network[i][0]-=alpha*(network[i][0]-b)/initalpha;network[i][1]-=alpha*(network[i][1]-g)/initalpha;network[i][2]-=alpha*(network[i][2]-r)/initalpha}function alterneigh(radius,i,b,g,r){var lo=Math.abs(i-radius);var hi=Math.min(i+radius,netsize);var j=i+1;var k=i-1;var m=1;var p,a;while(j<hi||k>lo){a=radpower[m++];if(j<hi){p=network[j++];p[0]-=a*(p[0]-b)/alpharadbias;p[1]-=a*(p[1]-g)/alpharadbias;p[2]-=a*(p[2]-r)/alpharadbias}if(k>lo){p=network[k--];p[0]-=a*(p[0]-b)/alpharadbias;p[1]-=a*(p[1]-g)/alpharadbias;p[2]-=a*(p[2]-r)/alpharadbias}}}function contest(b,g,r){var bestd=~(1<<31);var bestbiasd=bestd;var bestpos=-1;var bestbiaspos=bestpos;var i,n,dist,biasdist,betafreq;for(i=0;i<netsize;i++){n=network[i];dist=Math.abs(n[0]-b)+Math.abs(n[1]-g)+Math.abs(n[2]-r);if(dist<bestd){bestd=dist;bestpos=i}biasdist=dist-(bias[i]>>intbiasshift-netbiasshift);if(biasdist<bestbiasd){bestbiasd=biasdist;bestbiaspos=i}betafreq=freq[i]>>betashift;freq[i]-=betafreq;bias[i]+=betafreq<<gammashift}freq[bestpos]+=beta;bias[bestpos]-=betagamma;return bestbiaspos}function inxbuild(){var i,j,p,q,smallpos,smallval,previouscol=0,startpos=0;for(i=0;i<netsize;i++){p=network[i];smallpos=i;smallval=p[1];for(j=i+1;j<netsize;j++){q=network[j];if(q[1]<smallval){smallpos=j;smallval=q[1]}}q=network[smallpos];if(i!=smallpos){j=q[0];q[0]=p[0];p[0]=j;j=q[1];q[1]=p[1];p[1]=j;j=q[2];q[2]=p[2];p[2]=j;j=q[3];q[3]=p[3];p[3]=j}if(smallval!=previouscol){netindex[previouscol]=startpos+i>>1;for(j=previouscol+1;j<smallval;j++)netindex[j]=i;previouscol=smallval;startpos=i}}netindex[previouscol]=startpos+maxnetpos>>1;for(j=previouscol+1;j<256;j++)netindex[j]=maxnetpos}function inxsearch(b,g,r){var a,p,dist;var bestd=1e3;var best=-1;var i=netindex[g];var j=i-1;while(i<netsize||j>=0){if(i<netsize){p=network[i];dist=p[1]-g;if(dist>=bestd)i=netsize;else{i++;if(dist<0)dist=-dist;a=p[0]-b;if(a<0)a=-a;dist+=a;if(dist<bestd){a=p[2]-r;if(a<0)a=-a;dist+=a;if(dist<bestd){bestd=dist;best=p[3]}}}}if(j>=0){p=network[j];dist=g-p[1];if(dist>=bestd)j=-1;else{j--;if(dist<0)dist=-dist;a=p[0]-b;if(a<0)a=-a;dist+=a;if(dist<bestd){a=p[2]-r;if(a<0)a=-a;dist+=a;if(dist<bestd){bestd=dist;best=p[3]}}}}}return best}function learn(){var i;var lengthcount=pixels.length;var alphadec=30+(samplefac-1)/3;var samplepixels=lengthcount/(3*samplefac);var delta=~~(samplepixels/ncycles);var alpha=initalpha;var radius=initradius;var rad=radius>>radiusbiasshift;if(rad<=1)rad=0;for(i=0;i<rad;i++)radpower[i]=alpha*((rad*rad-i*i)*radbias/(rad*rad));var step;if(lengthcount<minpicturebytes){samplefac=1;step=3}else if(lengthcount%prime1!==0){step=3*prime1}else if(lengthcount%prime2!==0){step=3*prime2}else if(lengthcount%prime3!==0){step=3*prime3}else{step=3*prime4}var b,g,r,j;var pix=0;i=0;while(i<samplepixels){b=(pixels[pix]&255)<<netbiasshift;g=(pixels[pix+1]&255)<<netbiasshift;r=(pixels[pix+2]&255)<<netbiasshift;j=contest(b,g,r);altersingle(alpha,j,b,g,r);if(rad!==0)alterneigh(rad,j,b,g,r);pix+=step;if(pix>=lengthcount)pix-=lengthcount;i++;if(delta===0)delta=1;if(i%delta===0){alpha-=alpha/alphadec;radius-=radius/radiusdec;rad=radius>>radiusbiasshift;if(rad<=1)rad=0;for(j=0;j<rad;j++)radpower[j]=alpha*((rad*rad-j*j)*radbias/(rad*rad))}}}function buildColormap(){init();learn();unbiasnet();inxbuild()}this.buildColormap=buildColormap;function getColormap(){var map=[];var index=[];for(var i=0;i<netsize;i++)index[network[i][3]]=i;var k=0;for(var l=0;l<netsize;l++){var j=index[l];map[k++]=network[j][0];map[k++]=network[j][1];map[k++]=network[j][2]}return map}this.getColormap=getColormap;this.lookupRGB=inxsearch}module.exports=NeuQuant},{}],4:[function(require,module,exports){var GIFEncoder,renderFrame;GIFEncoder=require("./GIFEncoder.js");renderFrame=function(frame){var encoder,page,stream,transfer;encoder=new GIFEncoder(frame.width,frame.height);if(frame.index===0){encoder.writeHeader()}else{encoder.firstFrame=false}encoder.setTransparent(frame.transparent);encoder.setRepeat(frame.repeat);encoder.setDelay(frame.delay);encoder.setQuality(frame.quality);encoder.setDither(frame.dither);encoder.setGlobalPalette(frame.globalPalette);encoder.addFrame(frame.data);if(frame.last){encoder.finish()}if(frame.globalPalette===true){frame.globalPalette=encoder.getGlobalPalette()}stream=encoder.stream();frame.data=stream.pages;frame.cursor=stream.cursor;frame.pageSize=stream.constructor.pageSize;if(frame.canTransfer){transfer=function(){var i,len,ref,results;ref=frame.data;results=[];for(i=0,len=ref.length;i<len;i++){page=ref[i];results.push(page.buffer)}return results}();return self.postMessage(frame,transfer)}else{return self.postMessage(frame)}};self.onmessage=function(event){return renderFrame(event.data)}},{"./GIFEncoder.js":1}]},{},[4]);
+//# sourceMappingURL=gif.worker.js.map