diff --git a/src/routes/(blog-article)/+layout.svelte b/src/routes/(blog-article)/+layout.svelte
index 3cd6a25..f4a49e8 100644
--- a/src/routes/(blog-article)/+layout.svelte
+++ b/src/routes/(blog-article)/+layout.svelte
@@ -47,6 +47,42 @@
 
 <div class="article-layout">
 	<Header showBackground />
+	<div class="wave-transition">
+		<svg
+			xmlns="http://www.w3.org/2000/svg"
+			viewBox="0 24 150 28"
+			preserveAspectRatio="none"
+			shape-rendering="auto"
+		>
+			<defs>
+				<path
+					id="gentle-wave"
+					d="M-160 44c30 0 58-18 88-18s 58 18 88 18 58-18 88-18 58 18 88 18 v44h-352z"
+				/>
+			</defs>
+			<g class="parallax">
+				<use
+					href="#gentle-wave"
+					x="48"
+					y="3"
+					fill="rgba(var(--color--post-page-background-rgb),0.7)"
+				/>
+				<use
+					href="#gentle-wave"
+					x="-30"
+					y="6"
+					fill="rgba(var(--color--post-page-background-rgb),0.6)"
+				/>
+				<use
+					href="#gentle-wave"
+					x="48"
+					y="5"
+					fill="rgba(var(--color--post-page-background-rgb),0.9)"
+				/>
+				<use href="#gentle-wave" x="48" y="7" fill="var(--color--post-page-background)" />
+			</g>
+		</svg>
+	</div>
 
 	<main>
 		<article id="article-content">
@@ -99,6 +135,56 @@
 	.article-layout {
 		--body-background-color: var(--color--post-page-background);
 		background-color: var(--color--post-page-background);
+		position: relative;
+	}
+
+	.wave-transition {
+		height: 40px;
+		width: 100%;
+		position: relative;
+		margin-top: -20px;
+		margin-bottom: -20px;
+		z-index: 1;
+
+		svg {
+			position: relative;
+			width: 100%;
+			height: 100%;
+		}
+
+		.parallax > use {
+			animation: move-forever 15s cubic-bezier(0.55, 0.5, 0.45, 0.5) infinite;
+		}
+
+		.parallax > use:nth-child(1) {
+			animation-delay: -2s;
+			animation-duration: 7s;
+		}
+
+		.parallax > use:nth-child(2) {
+			animation-delay: -3s;
+			animation-duration: 10s;
+		}
+
+		.parallax > use:nth-child(3) {
+			animation-delay: -4s;
+			animation-duration: 13s;
+		}
+
+		@keyframes move-forever {
+			0% {
+				transform: translate3d(-90px, 0, 0);
+			}
+			100% {
+				transform: translate3d(85px, 0, 0);
+			}
+		}
+
+		@media screen and (prefers-reduced-motion: reduce) {
+			.parallax > use {
+				animation: none;
+			}
+		}
 	}
 
 	.crest-wrapper {