diff --git a/components/Visualizer.tsx b/components/Visualizer.tsx
index 88b7400..fc144a7 100644
--- a/components/Visualizer.tsx
+++ b/components/Visualizer.tsx
@@ -1,50 +1,12 @@
 import React from "react";
 import { Button } from "@/components/ui/button";
-import {
-  type Entity,
-  EntityType,
-  Position,
-  ZombieSurvival,
-} from "@/simulators/zombie-survival";
-import {
-  type VisualizerContextImages,
-  useVisualizer,
-} from "./VisualizerProvider";
+import { Renderer } from "@/renderer";
+import { ZombieSurvival } from "@/simulators/zombie-survival";
+import { useVisualizer } from "@/components/VisualizerProvider";
 
 const AUTO_REPLAY_SPEED = 1_500;
 const REPLAY_SPEED = 600;
 
-function getEntityImage(
-  entity: Entity,
-  images: VisualizerContextImages,
-): HTMLImageElement {
-  switch (entity.getType()) {
-    case EntityType.Box: {
-      return images.box;
-    }
-    case EntityType.Player: {
-      return images.player;
-    }
-    case EntityType.Rock: {
-      return images.rock;
-    }
-    case EntityType.Zombie: {
-      return images.zombie;
-    }
-  }
-}
-
-function getImageOffset(entity: Entity): Position {
-  if (entity.getType() === EntityType.Zombie) {
-    return { x: 16, y: 0 };
-  }
-  return { x: 0, y: 0 };
-}
-
-function cloneMap(map: string[][]): string[][] {
-  return JSON.parse(JSON.stringify(map));
-}
-
 export function Visualizer({
   autoReplay = false,
   autoStart = false,
@@ -62,36 +24,27 @@ export function Visualizer({
 }) {
   const visualizer = useVisualizer();
   const simulator = React.useRef<ZombieSurvival>(new ZombieSurvival(map));
+  const renderer = React.useRef<Renderer | null>(null);
   const interval = React.useRef<ReturnType<typeof setTimeout> | null>(null);
   const timeout = React.useRef<ReturnType<typeof setTimeout> | null>(null);
   const canvas = React.useRef<HTMLCanvasElement | null>(null);
-  const running = React.useRef(false);
-  const cellSizeNum = Number.parseInt(cellSize, 10);
-  const h = ZombieSurvival.boardHeight(map) * cellSizeNum;
-  const w = ZombieSurvival.boardWidth(map) * cellSizeNum;
+  const [running, setRunning] = React.useState(false);
 
   React.useEffect(() => {
-    if (canvas.current !== null && visualizer.ready) {
-      setupCanvas(canvas.current);
-    }
-  }, [visualizer.ready]);
-
-  function setupCanvas(canvas: HTMLCanvasElement) {
-    canvas.setAttribute("height", `${h * window.devicePixelRatio}`);
-    canvas.setAttribute("width", `${w * window.devicePixelRatio}`);
-    canvas.style.height = `${h}px`;
-    canvas.style.width = `${w}px`;
-
-    const ctx = canvas.getContext("2d");
-
-    if (ctx !== null) {
-      setupContext(ctx);
+    if (
+      canvas.current !== null &&
+      visualizer.ready &&
+      renderer.current === null
+    ) {
+      renderer.current = new Renderer(
+        visualizer.getAssets(),
+        ZombieSurvival.boardHeight(map),
+        ZombieSurvival.boardWidth(map),
+        canvas.current,
+        Number.parseInt(cellSize, 10),
+      );
     }
-  }
-
-  function setupContext(ctx: CanvasRenderingContext2D) {
-    ctx.scale(window.devicePixelRatio, window.devicePixelRatio);
-  }
+  }, [canvas, visualizer.ready]);
 
   React.useEffect(() => {
     if (autoStart) {
@@ -101,103 +54,41 @@ export function Visualizer({
 
   function startSimulation() {
     simulator.current = new ZombieSurvival(map);
-    running.current = true;
-    interval.current = setInterval(stepSimulation, REPLAY_SPEED);
-  }
-
-  function stepSimulation() {
-    if (simulator.current === null && running) {
-      return;
-    }
-
-    if (!simulator.current.finished()) {
-      simulator.current.step();
-      render();
-      return;
-    }
+    setRunning(true);
 
-    clearInterval(interval.current!);
-    interval.current = null;
+    interval.current = setInterval(() => {
+      // if (!running) {
+      //   return;
+      // }
 
-    if (autoReplay) {
-      timeout.current = setTimeout(() => {
-        timeout.current = null;
-        startSimulation();
-      }, AUTO_REPLAY_SPEED);
+      if (!simulator.current.finished()) {
+        simulator.current.step();
 
-      return;
-    }
+        if (renderer.current !== null) {
+          renderer.current.render(simulator.current.getAllAliveEntities());
+        }
 
-    running.current = false;
-
-    if (onSimulationEnd) {
-      onSimulationEnd(!simulator.current.getPlayer().dead());
-    }
-  }
-
-  function render() {
-    if (canvas.current !== null) {
-      const ctx = canvas.current.getContext("2d");
-
-      if (ctx !== null) {
-        renderCtx(ctx);
+        return;
       }
-    }
-  }
-
-  function renderCtx(ctx: CanvasRenderingContext2D) {
-    renderCtxBg(ctx);
-
-    const entities = simulator.current.getAllAliveEntities();
-    const images = visualizer.getImages();
 
-    for (const entity of entities) {
-      const entityImage = getEntityImage(entity, images);
-      const entityPosition = entity.getPosition();
+      clearInterval(interval.current!);
+      interval.current = null;
 
-      ctx.globalAlpha =
-        entity.getType() === EntityType.Zombie && entity.getHealth() === 1
-          ? 0.5
-          : 1;
+      if (autoReplay) {
+        timeout.current = setTimeout(() => {
+          timeout.current = null;
+          startSimulation();
+        }, AUTO_REPLAY_SPEED);
 
-      const offset = getImageOffset(entity);
-
-      ctx.drawImage(
-        entityImage,
-        entityPosition.x * cellSizeNum + offset.x,
-        entityPosition.y * cellSizeNum + offset.y,
-        cellSizeNum,
-        cellSizeNum,
-      );
-    }
-
-    ctx.globalAlpha = 1.0;
-  }
-
-  function renderCtxBg(ctx: CanvasRenderingContext2D) {
-    ctx.clearRect(0, 0, w, h);
-
-    const canvasRatio = w / h;
-    const images = visualizer.getImages();
-    const bgRatio = images.bg.width / images.bg.height;
-
-    let drawWidth, drawHeight, offsetX, offsetY;
+        return;
+      }
 
-    if (bgRatio > canvasRatio) {
-      drawWidth = h * bgRatio;
-      drawHeight = h;
-      offsetX = (w - drawWidth) / 2;
-      offsetY = 0;
-    } else {
-      drawWidth = w;
-      drawHeight = w / bgRatio;
-      offsetX = 0;
-      offsetY = (h - drawHeight) / 2;
-    }
+      setRunning(false);
 
-    ctx.globalAlpha = 0.5;
-    ctx.drawImage(images.bg, offsetX, offsetY, drawWidth, drawHeight);
-    ctx.globalAlpha = 1.0;
+      if (onSimulationEnd) {
+        onSimulationEnd(!simulator.current.getPlayer().dead());
+      }
+    }, REPLAY_SPEED);
   }
 
   React.useEffect(() => {
@@ -205,7 +96,10 @@ export function Visualizer({
       return;
     }
 
-    const observer = new IntersectionObserver(handleObserving);
+    const observer = new IntersectionObserver(handleObserving, {
+      threshold: 0,
+    });
+
     observer.observe(canvas.current);
 
     return () => {
@@ -216,7 +110,7 @@ export function Visualizer({
   }, [canvas]);
 
   function handleObserving([entry]: IntersectionObserverEntry[]) {
-    running.current = !entry.isIntersecting;
+    // running.current = !entry.isIntersecting;
   }
 
   React.useEffect(() => {
@@ -236,14 +130,14 @@ export function Visualizer({
       <div>
         {controls && (
           <div className="flex gap-2 justify-center py-2">
-            <Button onClick={startSimulation} disabled={running.current}>
+            <Button onClick={startSimulation} disabled={running}>
               Replay
             </Button>
             <Button
-              disabled={running.current}
+              disabled={running}
               onClick={() => {
                 simulator.current = new ZombieSurvival(map);
-                running.current = false;
+                setRunning(false);
               }}
             >
               Reset
diff --git a/components/VisualizerProvider.tsx b/components/VisualizerProvider.tsx
index d064ec5..23b8562 100644
--- a/components/VisualizerProvider.tsx
+++ b/components/VisualizerProvider.tsx
@@ -1,19 +1,16 @@
 "use client";
 
 import React from "react";
+import { type RendererAssets } from "@/renderer";
 
-export interface VisualizerContextImages {
-  bg: HTMLImageElement;
-  box: HTMLImageElement;
-  player: HTMLImageElement;
-  rock: HTMLImageElement;
-  zombie: HTMLImageElement;
-}
-
-export interface VisualizerContextValue {
-  getImages: () => VisualizerContextImages;
-  ready: boolean;
-}
+export type VisualizerContextValue =
+  | {
+      ready: false;
+    }
+  | {
+      getAssets: () => RendererAssets;
+      ready: true;
+    };
 
 const VisualizerContext = React.createContext<VisualizerContextValue | null>(
   null,
@@ -33,7 +30,7 @@ export default function VisualizerProvider({
   children: React.ReactNode;
 }): React.ReactNode {
   const [ready, setReady] = React.useState(false);
-  const images = React.useRef<VisualizerContextImages | null>(null);
+  const assets = React.useRef<RendererAssets | null>(null);
 
   React.useEffect(() => {
     Promise.all([
@@ -45,7 +42,7 @@ export default function VisualizerProvider({
     ]).then((result) => {
       setReady(true);
 
-      images.current = {
+      assets.current = {
         bg: result[0],
         box: result[1],
         player: result[2],
@@ -55,18 +52,18 @@ export default function VisualizerProvider({
     });
   }, []);
 
-  function getImages(): VisualizerContextImages {
-    if (!ready) {
+  function getAssets(): RendererAssets {
+    if (!ready || assets.current === null) {
       throw new Error(
         "Tried accessing visualizer images before they are loaded",
       );
     }
 
-    return images.current!;
+    return assets.current;
   }
 
   return (
-    <VisualizerContext.Provider value={{ getImages, ready }}>
+    <VisualizerContext.Provider value={{ getAssets, ready }}>
       {children}
     </VisualizerContext.Provider>
   );
diff --git a/renderer/index.ts b/renderer/index.ts
new file mode 100644
index 0000000..b44a48f
--- /dev/null
+++ b/renderer/index.ts
@@ -0,0 +1,123 @@
+import { type Entity, EntityType } from "@/simulators/zombie-survival";
+
+export interface RendererAssets {
+  bg: HTMLImageElement;
+  box: HTMLImageElement;
+  player: HTMLImageElement;
+  rock: HTMLImageElement;
+  zombie: HTMLImageElement;
+}
+
+export class Renderer {
+  private readonly assets: RendererAssets;
+  private readonly cellSize: number;
+  private readonly h: number;
+  private readonly w: number;
+
+  private ctx: CanvasRenderingContext2D;
+
+  public constructor(
+    assets: RendererAssets,
+    boardHeight: number,
+    boardWidth: number,
+    canvas: HTMLCanvasElement,
+    cellSize: number,
+  ) {
+    this.assets = assets;
+    this.cellSize = cellSize;
+    this.h = boardHeight * cellSize;
+    this.w = boardWidth * cellSize;
+
+    const ctx = canvas.getContext("2d");
+
+    if (ctx === null) {
+      throw new Error("Unable to get 2d context");
+    }
+
+    this.ctx = ctx;
+
+    canvas.setAttribute("height", `${this.h * window.devicePixelRatio}`);
+    canvas.setAttribute("width", `${this.w * window.devicePixelRatio}`);
+    canvas.style.height = `${this.h}px`;
+    canvas.style.width = `${this.w}px`;
+
+    ctx.scale(window.devicePixelRatio, window.devicePixelRatio);
+  }
+
+  public render(entities: Entity[]) {
+    this.ctx.clearRect(0, 0, this.w, this.h);
+    this.drawBg();
+
+    for (const entity of entities) {
+      this.drawEntity(entity);
+    }
+
+    this.ctx.globalAlpha = 1.0;
+  }
+
+  private drawBg() {
+    const canvasRatio = this.w / this.h;
+    const bgRatio = this.assets.bg.width / this.assets.bg.height;
+
+    let drawWidth, drawHeight, offsetX, offsetY;
+
+    if (bgRatio > canvasRatio) {
+      drawWidth = this.h * bgRatio;
+      drawHeight = this.h;
+      offsetX = (this.w - drawWidth) / 2;
+      offsetY = 0;
+    } else {
+      drawWidth = this.w;
+      drawHeight = this.w / bgRatio;
+      offsetX = 0;
+      offsetY = (this.h - drawHeight) / 2;
+    }
+
+    this.ctx.globalAlpha = 0.5;
+    this.ctx.drawImage(this.assets.bg, offsetX, offsetY, drawWidth, drawHeight);
+    this.ctx.globalAlpha = 1.0;
+  }
+
+  private drawEntity(entity: Entity) {
+    const entityImage = this.getEntityImage(entity);
+    const entityPosition = entity.getPosition();
+    const entityOffset = this.getEntityOffset(entity);
+
+    this.ctx.globalAlpha =
+      entity.getType() === EntityType.Zombie && entity.getHealth() === 1
+        ? 0.5
+        : 1;
+
+    this.ctx.drawImage(
+      entityImage,
+      entityPosition.x * this.cellSize + entityOffset.x,
+      entityPosition.y * this.cellSize + entityOffset.y,
+      this.cellSize,
+      this.cellSize,
+    );
+  }
+
+  private getEntityImage(entity: Entity): HTMLImageElement {
+    switch (entity.getType()) {
+      case EntityType.Box: {
+        return this.assets.box;
+      }
+      case EntityType.Player: {
+        return this.assets.player;
+      }
+      case EntityType.Rock: {
+        return this.assets.rock;
+      }
+      case EntityType.Zombie: {
+        return this.assets.zombie;
+      }
+    }
+  }
+
+  private getEntityOffset(entity: Entity): { x: number; y: number } {
+    return {
+      x: entity.getType() === EntityType.Zombie ? 16 : 0,
+      y: 0,
+    };
+  }
+}