diff --git a/assets/css/style.css b/assets/css/style.css
index bf07c2e..50b3ad8 100644
--- a/assets/css/style.css
+++ b/assets/css/style.css
@@ -34,3 +34,48 @@
 	--cal-sans: "Cal Sans", 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
 	--sans: "Karla", 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
 }
+
+@keyframes slide-enter {
+	0% {
+		opacity:0;
+		transform: translateY(20px);
+	}
+	100% {
+		opacity: 1;
+		transform: none;
+	}
+}
+
+.slide-enter > * {
+	--stagger: var(--stagger, 0ms);
+	--delay: var(--delay, 150ms);
+	--start: var(--start, 0ms);
+}
+
+@media (prefers-reduced-motion: no-preference) {
+	.slide-enter > * {
+		animation: slide-enter 1s both 1;
+		animation-delay: calc(var(--start) + var(--stagger) * var(--delay));
+	}
+}
+
+.slide-enter > *:nth-child(1) { --stagger: 1; }
+.slide-enter > *:nth-child(2) { --stagger: 2; }
+.slide-enter > *:nth-child(3) { --stagger: 3; }
+.slide-enter > *:nth-child(4) { --stagger: 4; }
+.slide-enter > *:nth-child(5) { --stagger: 5; }
+.slide-enter > *:nth-child(6) { --stagger: 6; }
+.slide-enter > *:nth-child(7) { --stagger: 7; }
+.slide-enter > *:nth-child(8) { --stagger: 8; }
+.slide-enter > *:nth-child(9) { --stagger: 9; }
+.slide-enter > *:nth-child(10) { --stagger: 10; }
+.slide-enter > *:nth-child(11) { --stagger: 11; }
+.slide-enter > *:nth-child(12) { --stagger: 12; }
+.slide-enter > *:nth-child(13) { --stagger: 13; }
+.slide-enter > *:nth-child(14) { --stagger: 14; }
+.slide-enter > *:nth-child(15) { --stagger: 15; }
+.slide-enter > *:nth-child(16) { --stagger: 16; }
+.slide-enter > *:nth-child(17) { --stagger: 17; }
+.slide-enter > *:nth-child(18) { --stagger: 18; }
+.slide-enter > *:nth-child(19) { --stagger: 19; }
+.slide-enter > *:nth-child(20) { --stagger: 20; }
diff --git a/handlers/pages/index.templ b/handlers/pages/index.templ
index 238cf0e..54202b3 100644
--- a/handlers/pages/index.templ
+++ b/handlers/pages/index.templ
@@ -30,7 +30,7 @@ templ (p *IndexPage) Component() {
 	}) {
 		<main
 			class={ "bg-background-00 absolute w-screen h-screen overflow-x-scroll top-0 left-0",
-			"flex flex-row snap-x snap-mandatory scroll-smooth cursor-move" }
+					"flex flex-row snap-x snap-mandatory scroll-smooth cursor-move" }
 		>
 			@p.section("main", "brand/light-asset.svg", "/assets/img/cat-1.png", "bg-white", "", "#code") {
 				<ul class="p-0 list-none font-sans flex gap-1rem underline underline-offset-3">
@@ -72,15 +72,17 @@ templ (p *IndexPage) section(id, logo, img, color string, linkLeft, linkRight st
 			</a>
 		}
 		<div
-			class="w-full h-10rem md:h-25rem relative grid cols-3 rows-1"
+			class="w-full h-10rem md:h-25rem relative grid cols-3 rows-1 slide-enter"
 		>
 			<div
-				class="w-10rem h-10rem md:w-25rem md:h-25rem col-start-2 justify-self-center relative"
+				class="w-10rem h-10rem md:w-25rem md:h-25rem col-start-2 justify-self-center relative slide-enter"
+				style="--stagger:2;"
 			>
 				@p.blendedImage(img, color)
 			</div>
 			<div
 				class="absolute left-o top-0 w-full h-full flex justify-center items-center z-3"
+				style="--stagger:0;"
 				id="logo"
 			>
 				<div class="h-2.2rem md:h-4rem">
@@ -92,7 +94,10 @@ templ (p *IndexPage) section(id, logo, img, color string, linkLeft, linkRight st
 				</div>
 			</div>
 		</div>
-		<div class="h-0">
+		<div
+			class="h-0 slide-enter"
+			style="--stagger:3;"
+		>
 			{ children... }
 		</div>
 		if linkRight != "" {