feat: moar fishies (o3-mini-high testing)

Author: brandonkachen

showcase/fishies/src/App.css

@@ -2,24 +2,75 @@
   width: 100vw;
   height: 100vh;
   overflow: hidden;
-  background: linear-gradient(180deg, 
-    #87CEEB 0%, 
-    rgba(135, 206, 235, 0.8) 20%,
-    rgba(30, 144, 255, 0.9) 60%,
-    #1E90FF 100%
-  );
+  background: linear-gradient(180deg, #0f4c81 0%, #1e90ff 50%, #0d3b66 100%);
   perspective: 2000px;
   transform-style: preserve-3d;
 }
 
+/* The fish-tank container holds all moving parts */
 .fish-tank {
   width: 100%;
   height: 100%;
   position: relative;
   animation: tank-depth 20s infinite ease-in-out;
 }
 
+/* Subtle light-ray overlay for extra depth */
+.fish-tank::before {
+  content: "";
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background: radial-gradient(
+    ellipse at center,
+    rgba(255, 255, 255, 0.1),
+    transparent
+  );
+  pointer-events: none;
+  z-index: -1;
+}
+
 @keyframes tank-depth {
-  0%, 100% { transform: translate3d(0, 0, 0); }
-  50% { transform: translate3d(50px, 30px, -200px); }
+  0%,
+  100% {
+    transform: translate3d(0, 0, 0);
+  }
+  50% {
+    transform: translate3d(50px, 30px, -200px);
+  }
+}
+
+@keyframes jellyfish-float {
+  0% {
+    transform: translate(0, 0) rotate(0deg);
+  }
+  50% {
+    transform: translate(10px, -20px) rotate(5deg);
+  }
+  100% {
+    transform: translate(0, 0) rotate(0deg);
+  }
+}
+
+@keyframes bubble-rise {
+  0% {
+    transform: translateY(0) scale(1);
+    opacity: 1;
+  }
+  100% {
+    transform: translateY(-100px) scale(0.5);
+    opacity: 0;
+  }
+}
+
+@keyframes sway {
+  0%,
+  100% {
+    transform: rotate(0deg);
+  }
+  50% {
+    transform: rotate(5deg);
+  }
 }

showcase/fishies/src/components/Bubble.tsx

@@ -0,0 +1,30 @@
+// src/components/Bubble.tsx
+import { CSSProperties } from "react";
+
+interface BubbleProps {
+  x: number;
+  y: number;
+  size?: number;
+  duration?: number;
+}
+
+export const Bubble: React.FC<BubbleProps> = ({
+  x,
+  y,
+  size = 10,
+  duration = 4,
+}) => {
+  const style: CSSProperties = {
+    position: "absolute",
+    left: `${x}px`,
+    top: `${y}px`,
+    width: `${size}px`,
+    height: `${size}px`,
+    backgroundColor: "rgba(255, 255, 255, 0.7)",
+    borderRadius: "50%",
+    zIndex: 0,
+    animation: `bubble-rise ${duration}s linear infinite`,
+  };
+
+  return <div style={style}></div>;
+};

showcase/fishies/src/components/Coral.tsx

@@ -0,0 +1,20 @@
+// src/components/Coral.tsx
+import { CSSProperties } from "react";
+
+interface CoralProps {
+  x: number;
+  y: number;
+  size?: number;
+}
+
+export const Coral: React.FC<CoralProps> = ({ x, y, size = 40 }) => {
+  const style: CSSProperties = {
+    position: "absolute",
+    left: `${x}px`,
+    top: `${y}px`,
+    fontSize: `${size}px`,
+    zIndex: 0,
+  };
+
+  return <div style={style}>🪸</div>;
+};

showcase/fishies/src/components/Fish.tsx

@@ -1,31 +1,52 @@
-import { CSSProperties } from 'react'
+// src/components/Fish.tsx
+import { CSSProperties } from "react";
 
 interface FishProps {
-  x: number
-  y: number
-  direction: number
-  color: string
-  isDying?: boolean
-  dyingStartTime?: number
-  isBeingEaten?: boolean
+  x: number;
+  y: number;
+  direction: number;
+  color: string;
+  isDying?: boolean;
+  dyingStartTime?: number;
+  isBeingEaten?: boolean;
 }
 
-export const Fish: React.FC<FishProps> = ({ x, y, direction, color, isDying, dyingStartTime, isBeingEaten }) => {
+export const Fish: React.FC<FishProps> = ({
+  x,
+  y,
+  direction,
+  color,
+  isDying,
+  dyingStartTime,
+  isBeingEaten,
+}) => {
   const style: CSSProperties = {
-    position: 'absolute',
+    position: "absolute",
     left: `${x}px`,
     top: `${y}px`,
+    // Ensure fish (and later, predators) are rendered above decorations
+    zIndex: 1,
     transform: `
       translate3d(0, 0, ${Math.sin(Date.now() / 1000) * 200}px)
       rotateY(${direction > 0 ? 0 : 180}deg)
-      ${isDying ? 'rotateZ(180deg)' : isBeingEaten ? 'rotateZ(0deg)' : 'rotateZ(-15deg)'}
+      ${
+        isDying
+          ? "rotateZ(180deg)"
+          : isBeingEaten
+          ? "rotateZ(0deg)"
+          : "rotateZ(-15deg)"
+      }
       scale(${1 + Math.sin(Date.now() / 1000) * 0.1})
     `,
-    transition: isDying ? 'opacity 1s ease-out' : 'none',
-    fontSize: '24px',
+    transition: isDying ? "opacity 1s ease-out" : "none",
+    fontSize: "24px",
     color,
     opacity: isDying ? (Date.now() - dyingStartTime! > 500 ? 0 : 1) : 1,
-  }
+  };
 
-  return <div style={style}>{isDying && Date.now() - dyingStartTime! > 500 ? '☠️' : '🐠'}</div>
-}
+  return (
+    <div style={style}>
+      {isDying && Date.now() - dyingStartTime! > 500 ? "☠️" : "🐠"}
+    </div>
+  );
+};