diff --git a/src/index.html b/src/index.html
index e806d51..b17c04e 100644
--- a/src/index.html
+++ b/src/index.html
@@ -16,6 +16,7 @@
             <li> <a href="./gravity-points/index.html">Gravity Points (mine)</a>
             <li> <a href="./starfield/index.html">Starfield</a>
             <li> <a href="./hexgrid/index.html">Hexgrid</a>
+            <li> <a href="./psychadelic-graphics/index.html">Psychadelic Graphics</a>
         </ul>
 
         <h2>Reference Animations</h2>
diff --git a/src/psychadelic-graphics/app.ts b/src/psychadelic-graphics/app.ts
new file mode 100644
index 0000000..a205e32
--- /dev/null
+++ b/src/psychadelic-graphics/app.ts
@@ -0,0 +1,52 @@
+const canvas = document.getElementById('canvas') as HTMLCanvasElement;
+const ctx = canvas.getContext('2d')!;
+
+// Set canvas size to window size
+function resize() {
+    canvas.width = window.innerWidth;
+    canvas.height = window.innerHeight;
+}
+window.addEventListener('resize', resize);
+resize();
+
+// Animation variables
+let time = 0;
+const colors = ['#FF0000', '#00FF00', '#0000FF', '#FFFF00', '#FF00FF', '#00FFFF'];
+let colorIndex = 0;
+
+function draw() {
+    time += 0.02;
+    
+    // Create a gradient background that shifts over time
+    const gradient = ctx.createLinearGradient(0, 0, canvas.width, canvas.height);
+    gradient.addColorStop(0, colors[(colorIndex) % colors.length]);
+    gradient.addColorStop(0.5, colors[(colorIndex + 2) % colors.length]);
+    gradient.addColorStop(1, colors[(colorIndex + 4) % colors.length]);
+    
+    ctx.fillStyle = gradient;
+    ctx.fillRect(0, 0, canvas.width, canvas.height);
+
+    // Draw psychedelic circles
+    for (let i = 0; i < 10; i++) {
+        const x = canvas.width / 2 + Math.cos(time + i) * 100;
+        const y = canvas.height / 2 + Math.sin(time * 1.5 + i) * 100;
+        const radius = 50 + Math.sin(time * 2 + i) * 30;
+
+        ctx.beginPath();
+        ctx.arc(x, y, radius, 0, Math.PI * 2);
+        ctx.fillStyle = colors[(colorIndex + i) % colors.length];
+        ctx.fill();
+        ctx.strokeStyle = 'rgba(255, 255, 255, 0.5)';
+        ctx.lineWidth = 2;
+        ctx.stroke();
+    }
+
+    // Slowly cycle through colors
+    if (Math.floor(time * 10) % 20 === 0) {
+        colorIndex = (colorIndex + 1) % colors.length;
+    }
+
+    requestAnimationFrame(draw);
+}
+
+draw(); 
\ No newline at end of file
diff --git a/src/psychadelic-graphics/index.html b/src/psychadelic-graphics/index.html
new file mode 100644
index 0000000..49768ae
--- /dev/null
+++ b/src/psychadelic-graphics/index.html
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html>
+    <head>
+        <meta charset="utf-8"/>
+        <title>Psychadelic Graphics</title>
+        <style>
+            body {
+                margin: 0;
+                overflow: hidden;
+                background: black;
+            }
+            canvas {
+                display: block;
+            }
+        </style>
+    </head>
+    <body>
+        <canvas id="canvas"></canvas>
+        <script type="module" src="./app.ts"></script>
+    </body>
+</html> 
\ No newline at end of file
