diff --git a/src/lib/components/LabCard.svelte b/src/lib/components/LabCard.svelte
index 385e5ae..9acfe46 100644
--- a/src/lib/components/LabCard.svelte
+++ b/src/lib/components/LabCard.svelte
@@ -7,10 +7,48 @@
// Determine if the project is clickable (not list-only)
const isClickable = $derived(project.status !== 'list-only')
const projectUrl = $derived(`/labs/${project.slug}`)
+
+ // Tilt card functionality
+ let cardElement: HTMLElement
+ let isHovering = $state(false)
+ let transform = $state('')
+
+ function handleMouseMove(e: MouseEvent) {
+ if (!cardElement || !isHovering) return
+
+ const rect = cardElement.getBoundingClientRect()
+ const x = e.clientX - rect.left
+ const y = e.clientY - rect.top
+
+ const centerX = rect.width / 2
+ const centerY = rect.height / 2
+
+ const rotateX = ((y - centerY) / centerY) * -3 // Subtle tilt
+ const rotateY = ((x - centerX) / centerX) * 3
+
+ transform = `perspective(1000px) rotateX(${rotateX}deg) rotateY(${rotateY}deg) scale3d(1.02, 1.02, 1.02)`
+ }
+
+ function handleMouseEnter() {
+ isHovering = true
+ }
+
+ function handleMouseLeave() {
+ isHovering = false
+ transform = 'perspective(1000px) rotateX(0) rotateY(0) scale3d(1, 1, 1)'
+ }
{#if isClickable}
-
+