refactor animations once again

src/app/projects/page.tsx

@@ -41,10 +41,10 @@ export default function ProjectsPage() {
           <Card.AnimatedCard position={i + 1.2} key={project.id}>
             <Card.CardHeader>
               <div className="flex items-start justify-between gap-2 flex-wrap">
-                <AnimateTextIn position={i + 1.4} animation="slide"><Card.CardTitle>{project.title}</Card.CardTitle></AnimateTextIn>
+                <AnimateTextIn once position={i + 1.4} animation="slide"><Card.CardTitle>{project.title}</Card.CardTitle></AnimateTextIn>
                 <div className="flex gap-2 flex-wrap">
                   {project.sourceType && (
-                    <AnimatePopUp position={i + 2} duration={2}>
+                    <AnimatePopUp position={i + 2} duration={2} once>
                       <Badge variant={project.sourceType === "open" ? "secondary" : "outline"}>
                         {project.sourceType === "open" ? "Open Source" : "Closed Source"}
                       </Badge>
@@ -62,7 +62,7 @@ export default function ProjectsPage() {
               <Card.CardContent className="flex flex-col gap-3">
                 {project.description && (
                   <div className="prose prose-sm dark:prose-invert max-w-none text-muted-foreground">
-                    <AnimatePopUp position={i + 1.4} duration={10}>
+                    <AnimatePopUp once position={i + 1.4} duration={10}>
                       <Markdown remarkPlugins={[remarkGfm]}>{project.description}</Markdown>
                     </AnimatePopUp>
                   </div>
@@ -71,7 +71,7 @@ export default function ProjectsPage() {
                   {project.techStack?.stackItems && project.techStack.stackItems.length > 0 && (
                     <div className="flex flex-wrap gap-1.5">
                       {project.techStack.stackItems.map((item, k) => (
-                        <AnimatePopUp key={k} position={(i + 2) + k * 0.5}>  <StackBadge key={item} item={item} /> </AnimatePopUp>
+                        <AnimatePopUp key={k} position={(i + 2) + k * 0.5} once>  <StackBadge key={item} item={item} /> </AnimatePopUp>
                       ))}
                     </div>
                   )}
@@ -111,6 +111,11 @@ export default function ProjectsPage() {
           <div className="pt-5" />
         </div>
       ))}
+      {/* Scroll runway: lets the last cards' ScrollTrigger exit points be
+          reached past the visible area, so on short viewports the second-to-last
+          card animates out off-screen instead of being frozen mid-exit at the
+          bottom of the scroll. Tune the height if a card is still caught. */}
+      <div aria-hidden className="h-[70dvh] shrink-0" />
     </ScrollArea>
   );
 }