feat: even moar fishies

Author: brandonkachen

showcase/fishies/knowledge.md

@@ -12,46 +12,42 @@ A fish tank simulation with swimming fish, predator behavior, and interactive el
 
 ## Animation Guidelines
 - Use CSS transitions for smooth movement
-- Use 3D transforms for depth:
-  - Container needs perspective: 2000px
-  - Container needs transform-style: preserve-3d
-  - Fish: ±200px depth, fast cycle
-  - Shark: ±300px depth, medium cycle
-  - Whale shark: ±400px depth, slow cycle
-- Scale with depth for more dramatic effect:
-  - Fish: ±10% scale
-  - Shark: ±15% scale
-  - Whale shark: ±20% scale
-- Use rotateY instead of scaleX for direction changes
-- Remove transitions for immediate reactions to events
-- Add depth to environment:
-  - Use transparent gradient layers in background
-  - Animate container with subtle 3D movement
-  - Create parallax effect with container animation
-- Death animation sequence:
-  1. Fish straightens out when shark attacks
-  2. When shark moves away, fish flips upside down
-  3. After 500ms, transforms to skull (☠️) and starts fading
-  4. Completes fade out over next 500ms
-- Scale emojis for different creature sizes
+- Use 3D transforms for depth
+- Scale with depth for dramatic effect
+- Use rotateY for direction changes
+- Remove transitions for immediate reactions
 
 ## Combat Mechanics
-- Shark must be moving towards fish to attack (within 30px range)
-- Fish speed increases based on distance to shark using quadratic easing
-- Whale shark protects fish by pushing shark away when nearby
+- Shark must be moving towards fish to attack
+- Fish speed increases near predators
+- Whale shark protects fish from sharks
 
 ## Game Balance
-- Base fish speed: 0.5 units (slow peaceful swimming)
-- Shark speed: 3 units (fast predator)
-- Whale shark speed: 4 units (fast enough to catch shark)
-- Fish speed multiplier: gradually increases up to 2x within 200px of shark
-- Protection distances:
-  - Shark catching fish: 15px (must be within 15 degrees of directly facing fish)
-  - Whale shark slaps shark away 250px when within 100px range
+- Base fish speed: 0.5 units
+- Shark speed: 3 units
+- Whale shark speed: 4 units
+- Protection radius: 100px for whale shark
+
+## Interactive Elements
+- Click for bubbles
+- Shift+click for food
+- Ctrl/Cmd+click for sparkles
+- Ripple effects under fast predators
+
+## Fish Behavior
+- School with nearby fish
+- Avoid predators
+- Seek food
+- Hide near decorations when threatened
+
+## Ecosystem Interactions
+- Predator competition
+- Safe zones near decorations
+- Territorial behaviors
+- Water current effects
 
 ## Verifying changes
 After every change, run:
 ```bash
 npm run lint && npm run typecheck
 ```
-This will check for lint issues and type errors.

showcase/fishies/src/App.css

@@ -5,14 +5,49 @@
   background: linear-gradient(180deg, #0f4c81 0%, #1e90ff 50%, #0d3b66 100%);
   perspective: 2000px;
   transform-style: preserve-3d;
+  0% { transform: translate3d(0, 0, 0) scale(1); }
+  50% { transform: translate3d(20px, -30px, 100px) scale(1.3) rotate(10deg); }
+  100% { transform: translate3d(0, 0, 0) scale(1); }
 }
 
 /* The fish-tank container holds all moving parts */
 .fish-tank {
   width: 100%;
   height: 100%;
   position: relative;
-  animation: tank-depth 20s infinite ease-in-out;
+  animation: tank-depth 20s infinite ease-in-out, tank-current 10s ease-in-out infinite;
+  cursor: pointer;
+}
+
+/* Caustics overlay for dynamic lighting */
+.caustics-overlay {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  pointer-events: none;
+  z-index: 0;
+  background: radial-gradient(
+    circle at 50% 50%,
+    rgba(255, 255, 255, 0.05),
+    transparent 60%
+  );
+  opacity: 0.7;
+  animation: caustics 8s ease-in-out infinite alternate;
+}
+
+/* Ambient light overlay */
+.ambient-light {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  pointer-events: none;
+  z-index: 0;
+  background: linear-gradient(45deg, rgba(255,255,255,0.05), transparent);
+  animation: ambient-light-move 15s ease-in-out infinite;
 }
 
 /* Subtle light-ray overlay for extra depth */
@@ -33,44 +68,149 @@
 }
 
 @keyframes tank-depth {
-  0%,
-  100% {
-    transform: translate3d(0, 0, 0);
+  0%, 100% {
+    transform: translate3d(0, 0, 0) rotate3d(1, 1, 0, 0deg);
   }
   50% {
-    transform: translate3d(50px, 30px, -200px);
+    transform: translate3d(50px, 30px, -200px) rotate3d(1, 1, 0, 3deg);
   }
 }
 
+@keyframes tank-current {
+  0%, 100% { transform: translate3d(0, 0, 0); }
+  50% { transform: translate3d(10px, -5px, 0); }
+}
+
 @keyframes jellyfish-float {
   0% {
-    transform: translate(0, 0) rotate(0deg);
+    transform: translate3d(0, 0, 0) rotate(0deg) scale(1);
+  }
+  50% {
+    transform: translate3d(10px, -20px, 100px) rotate(5deg) scale(1.1);
+  }
+  100% {
+    transform: translate3d(0, 0, 0) rotate(0deg) scale(1);
+  }
+}
+
+@keyframes jellyfish-playful {
+  0% {
+    transform: translate3d(0, 0, 0) rotate(0deg) scale(1);
   }
   50% {
-    transform: translate(10px, -20px) rotate(5deg);
+    transform: translate3d(10px, -20px, 100px) rotate(5deg) scale(1.1);
   }
   100% {
-    transform: translate(0, 0) rotate(0deg);
+    transform: translate3d(0, 0, 0) rotate(0deg) scale(1);
   }
 }
 
 @keyframes bubble-rise {
   0% {
-    transform: translateY(0) scale(1);
+    transform: translate3d(0, 0, 0) scale(1);
     opacity: 1;
   }
   100% {
-    transform: translateY(-100px) scale(0.5);
+    transform: translate3d(var(--drift-x, 20px), -100px, 50px) scale(0.5);
     opacity: 0;
   }
 }
 
 @keyframes sway {
-  0%,
-  100% {
+  0%, 100% {
+    transform: rotate(0deg) translate3d(0, 0, 20px);
+  }
+  50% {
+    transform: rotate(5deg) translate3d(0, 0, 40px);
+  }
+}
+
+@keyframes starfish-rotate {
+  0% {
     transform: rotate(0deg);
   }
+  100% {
+    transform: rotate(15deg);
+  }
+}
+
+@keyframes crab-walk {
+  0% { 
+    transform: translate3d(0, 0, 10px) rotate(-2deg); 
+  }
+  25% { 
+    transform: translate3d(5px, 0, 10px) rotate(0deg); 
+  }
+  75% { 
+    transform: translate3d(-5px, 0, 10px) rotate(0deg); 
+  }
+  100% { 
+    transform: translate3d(0, 0, 10px) rotate(-2deg); 
+  }
+}
+
+@keyframes caustics {
+  0% {
+    transform: translate3d(0, 0, 0);
+    opacity: 0.7;
+  }
   50% {
-    transform: rotate(5deg);
+    transform: translate3d(10px, -10px, 0);
+    opacity: 0.8;
+  }
+  100% {
+    transform: translate3d(-10px, 10px, 0);
+    opacity: 0.7;
+  }
+}
+
+@keyframes ambient-light-move {
+  0% { transform: translate(0, 0); }
+  50% { transform: translate(20px, 20px); }
+  100% { transform: translate(0, 0); }
+}
+
+@keyframes food-pulse {
+  0%, 100% { transform: scale(1); opacity: 1; }
+  50% { transform: scale(1.2); opacity: 0.8; }
+}
+
+@keyframes water-ripple {
+  0%   { transform: scale(0); opacity: 0.5; }
+  100% { transform: scale(4); opacity: 0; }
+}
+
+@keyframes plankton-drift {
+  0%   { transform: translate(0, 0); opacity: 0; }
+  50%  { opacity: 1; }
+  100% { transform: translate(50px, -50px); opacity: 0; }
+}
+
+@keyframes turtle-swim {
+  0%   { transform: translate3d(0, 0, 0) rotate(0deg); }
+  50%  { transform: translate3d(20px, -10px, 50px) rotate(5deg); }
+  100% { transform: translate3d(0, 0, 0) rotate(0deg); }
+}
+
+@keyframes dolphin-swim {
+  0% {
+    transform: translate3d(0, 0, 0) rotate(0deg);
+  }
+  50% {
+    transform: translate3d(20px, -10px, 50px) rotate(5deg);
+  }
+  100% {
+    transform: translate3d(0, 0, 0) rotate(0deg);
+  }
+}
+
+@keyframes sparkle-fade {
+  0% {
+    transform: scale(0.5);
+    opacity: 1;
+  }
+  100% {
+    transform: scale(1.5);
+    opacity: 0;
   }
 }

showcase/fishies/src/components/Crab.tsx

@@ -0,0 +1,20 @@
+import { CSSProperties } from "react";
+
+interface CrabProps {
+  x: number;
+  y: number;
+  size?: number;
+}
+
+export const Crab: React.FC<CrabProps> = ({ x, y, size = 40 }) => {
+  const style: CSSProperties = {
+    position: "absolute",
+    left: `${x}px`,
+    top: `${y}px`,
+    fontSize: `${size}px`,
+    zIndex: 0,
+    animation: "crab-walk 4s linear infinite",
+  };
+
+  return <div style={style}>🦀</div>;
+};

showcase/fishies/src/components/Dolphin.tsx

@@ -0,0 +1,24 @@
+import { CSSProperties } from "react";
+
+interface DolphinProps {
+  x: number;
+  y: number;
+  size?: number;
+}
+
+export const Dolphin: React.FC<DolphinProps> = ({ x, y, size = 40 }) => {
+  const style: CSSProperties = {
+    position: "absolute",
+    left: `${x}px`,
+    top: `${y}px`,
+    fontSize: `${size}px`,
+    zIndex: 1,
+    transform: `
+      translate3d(0, 0, ${Math.sin(Date.now() / 2500) * 150}px)
+      rotateY(${Math.random() < 0.5 ? 0 : 180}deg)
+    `,
+    animation: "dolphin-swim 6s ease-in-out infinite",
+  };
+
+  return <div style={style}>🐬</div>;
+};

showcase/fishies/src/components/Fish.tsx

@@ -9,6 +9,7 @@ interface FishProps {
   isDying?: boolean;
   dyingStartTime?: number;
   isBeingEaten?: boolean;
+  isHiding?: boolean;
 }
 
 export const Fish: React.FC<FishProps> = ({
@@ -19,6 +20,7 @@ export const Fish: React.FC<FishProps> = ({
   isDying,
   dyingStartTime,
   isBeingEaten,
+  isHiding,
 }) => {
   const style: CSSProperties = {
     position: "absolute",
@@ -41,7 +43,7 @@ export const Fish: React.FC<FishProps> = ({
     transition: isDying ? "opacity 1s ease-out" : "none",
     fontSize: "24px",
     color,
-    opacity: isDying ? (Date.now() - dyingStartTime! > 500 ? 0 : 1) : 1,
+    opacity: isDying ? (Date.now() - dyingStartTime! > 500 ? 0 : 1) : isHiding ? 0.6 : 1,
   };
 
   return (