1 files changed, 116 insertions, 0 deletions
diff --git a/packages/memory-graph/src/styles/animations.css.ts b/packages/memory-graph/src/styles/animations.css.ts
new file mode 100644
index 00000000..d9430ec4
--- /dev/null
+++ b/packages/memory-graph/src/styles/animations.css.ts
@@ -0,0 +1,116 @@
+import { keyframes } from "@vanilla-extract/css";
+
+/**
+ * Animation keyframes
+ * Used throughout the component library for consistent motion
+ */
+
+export const fadeIn = keyframes({
+	from: { opacity: 0 },
+	to: { opacity: 1 },
+});
+
+export const fadeOut = keyframes({
+	from: { opacity: 1 },
+	to: { opacity: 0 },
+});
+
+export const slideInFromRight = keyframes({
+	from: {
+		transform: "translateX(100%)",
+		opacity: 0,
+	},
+	to: {
+		transform: "translateX(0)",
+		opacity: 1,
+	},
+});
+
+export const slideInFromLeft = keyframes({
+	from: {
+		transform: "translateX(-100%)",
+		opacity: 0,
+	},
+	to: {
+		transform: "translateX(0)",
+		opacity: 1,
+	},
+});
+
+export const slideInFromTop = keyframes({
+	from: {
+		transform: "translateY(-100%)",
+		opacity: 0,
+	},
+	to: {
+		transform: "translateY(0)",
+		opacity: 1,
+	},
+});
+
+export const slideInFromBottom = keyframes({
+	from: {
+		transform: "translateY(100%)",
+		opacity: 0,
+	},
+	to: {
+		transform: "translateY(0)",
+		opacity: 1,
+	},
+});
+
+export const spin = keyframes({
+	from: { transform: "rotate(0deg)" },
+	to: { transform: "rotate(360deg)" },
+});
+
+export const pulse = keyframes({
+	"0%, 100%": {
+		opacity: 1,
+	},
+	"50%": {
+		opacity: 0.5,
+	},
+});
+
+export const bounce = keyframes({
+	"0%, 100%": {
+		transform: "translateY(-25%)",
+		animationTimingFunction: "cubic-bezier(0.8, 0, 1, 1)",
+	},
+	"50%": {
+		transform: "translateY(0)",
+		animationTimingFunction: "cubic-bezier(0, 0, 0.2, 1)",
+	},
+});
+
+export const scaleIn = keyframes({
+	from: {
+		transform: "scale(0.95)",
+		opacity: 0,
+	},
+	to: {
+		transform: "scale(1)",
+		opacity: 1,
+	},
+});
+
+export const scaleOut = keyframes({
+	from: {
+		transform: "scale(1)",
+		opacity: 1,
+	},
+	to: {
+		transform: "scale(0.95)",
+		opacity: 0,
+	},
+});
+
+export const shimmer = keyframes({
+	"0%": {
+		backgroundPosition: "-1000px 0",
+	},
+	"100%": {
+		backgroundPosition: "1000px 0",
+	},
+});