feat(viz): two pointers narrative

2025-08-24 15:30:46 +01:00
parent 1031af4e3b
commit 2e4de5cc31
17 changed files with 2191 additions and 2 deletions
@@ -0,0 +1,36 @@
+"use client";
+
+import { AnimatePresence, motion } from "framer-motion";
+import { cn } from "@/lib/utils";
+import type { CalculationState } from "@/lib/visualizations/types";
+
+interface CalculationBubbleProps {
+  calculation: CalculationState | null;
+  className?: string;
+}
+
+export function CalculationBubble({
+  calculation,
+  className,
+}: CalculationBubbleProps) {
+  return (
+    <AnimatePresence>
+      {calculation && (
+        <motion.div
+          initial={{ opacity: 0, scale: 0.8, y: 10 }}
+          animate={{ opacity: 1, scale: 1, y: 0 }}
+          exit={{ opacity: 0, scale: 0.8, y: -10 }}
+          transition={{ duration: 0.25, ease: "easeOut" }}
+          className={cn(
+            "inline-flex items-center gap-2 rounded-lg border border-[var(--primary)]/40 bg-[var(--primary)]/10 px-3 py-2 font-mono text-sm",
+            className
+          )}
+        >
+          <span className="text-[var(--muted-foreground)]">{calculation.expression}</span>
+          <span className="text-[var(--primary)]">=</span>
+          <span className="font-semibold text-[var(--primary)]">{calculation.result}</span>
+        </motion.div>
+      )}
+    </AnimatePresence>
+  );
+}