diff --git a/packages/ui/src/components/Molecules/FadeUp.tsx b/packages/ui/src/components/Molecules/FadeUp.tsx
new file mode 100644
index 000000000..4f5a3cb9d
--- /dev/null
+++ b/packages/ui/src/components/Molecules/FadeUp.tsx
@@ -0,0 +1,21 @@
+'use client';
+import { motion, useReducedMotion } from 'framer-motion';
+import React, { PropsWithChildren } from 'react';
+
+export function FadeUp({
+  yGap,
+  children,
+  className,
+}: PropsWithChildren<{ yGap: number; className?: string }>) {
+  const reducedMotion = useReducedMotion();
+  return (
+    <motion.div
+      className={className}
+      transition={{ duration: 0.8 }}
+      initial={{ opacity: reducedMotion ? 1 : 0, y: reducedMotion ? 0 : yGap }}
+      whileInView={{ opacity: 1, y: 0 }}
+    >
+      {children}
+    </motion.div>
+  );
+}
diff --git a/packages/ui/src/components/Organisms/PageContent/BlockCta.tsx b/packages/ui/src/components/Organisms/PageContent/BlockCta.tsx
index 363257b8c..2a74999f9 100644
--- a/packages/ui/src/components/Organisms/PageContent/BlockCta.tsx
+++ b/packages/ui/src/components/Organisms/PageContent/BlockCta.tsx
@@ -8,31 +8,35 @@ import {
 import clsx from 'clsx';
 import React from 'react';
 
+import { FadeUp } from '../../Molecules/FadeUp';
+
 export function BlockCta(props: BlockCtaFragment) {
   return (
-    <div className="container-page">
-      <div className="container-content">
-        <div className="container-text my-2 lg:my-3">
-          <Link
-            className={clsx(
-              {
-                'flex-row-reverse':
-                  props.iconPosition === CtaIconPosition.Before,
-              },
-              'text-blue-600 hover:text-white border border-blue-600 hover:bg-blue-600 focus:ring-4 focus:outline-none focus:ring-blue-300 rounded-lg  py-2 px-3 gap-2 flex flex-row items-center text-xs leading-[1.125rem] font-medium text-center w-fit transition-all duration-200 ease-in-out group',
-            )}
-            href={props.url ?? ('/' as Url)}
-            target={props.openInNewTab ? '_blank' : '_self'}
-            rel="noreferrer"
-          >
-            {props.text}
-            {!!props.icon && props.icon === CtaIconType.Arrow && (
-              <ArrowRightIcon />
-            )}
-          </Link>
+    <FadeUp yGap={50}>
+      <div className="container-page">
+        <div className="container-content">
+          <div className="container-text my-2 lg:my-3">
+            <Link
+              className={clsx(
+                {
+                  'flex-row-reverse':
+                    props.iconPosition === CtaIconPosition.Before,
+                },
+                'text-blue-600 hover:text-white border border-blue-600 hover:bg-blue-600 focus:ring-4 focus:outline-none focus:ring-blue-300 rounded-lg  py-2 px-3 gap-2 flex flex-row items-center text-xs leading-[1.125rem] font-medium text-center w-fit transition-all duration-200 ease-in-out group',
+              )}
+              href={props.url ?? ('/' as Url)}
+              target={props.openInNewTab ? '_blank' : '_self'}
+              rel="noreferrer"
+            >
+              {props.text}
+              {!!props.icon && props.icon === CtaIconType.Arrow && (
+                <ArrowRightIcon />
+              )}
+            </Link>
+          </div>
         </div>
       </div>
-    </div>
+    </FadeUp>
   );
 }
 
diff --git a/packages/ui/src/components/Organisms/PageContent/BlockHorizontalSeparator.tsx b/packages/ui/src/components/Organisms/PageContent/BlockHorizontalSeparator.tsx
index 271c36326..9de52523c 100644
--- a/packages/ui/src/components/Organisms/PageContent/BlockHorizontalSeparator.tsx
+++ b/packages/ui/src/components/Organisms/PageContent/BlockHorizontalSeparator.tsx
@@ -1,11 +1,15 @@
 import React from 'react';
 
+import { FadeUp } from '../../Molecules/FadeUp';
+
 export function BlockHorizontalSeparator() {
   return (
-    <div className="container-page">
-      <div className="container-content">
-        <hr className="container-text my-8 text-gray-200" />
+    <FadeUp yGap={50}>
+      <div className="container-page">
+        <div className="container-content">
+          <hr className="container-text my-8 text-gray-200" />
+        </div>
       </div>
-    </div>
+    </FadeUp>
   );
 }
diff --git a/packages/ui/src/components/Organisms/PageContent/BlockImageTeasers.tsx b/packages/ui/src/components/Organisms/PageContent/BlockImageTeasers.tsx
index 596a50f38..c36ed1dba 100644
--- a/packages/ui/src/components/Organisms/PageContent/BlockImageTeasers.tsx
+++ b/packages/ui/src/components/Organisms/PageContent/BlockImageTeasers.tsx
@@ -3,23 +3,25 @@ import clsx from 'clsx';
 import React from 'react';
 
 import { isTruthy } from '../../../utils/isTruthy';
+import { FadeUp } from '../../Molecules/FadeUp';
 
 export function BlockImageTeasers(props: BlockImageTeasersFragment) {
   return (
-    // eslint-disable-next-line tailwindcss/no-custom-classname
-    <section className="my-10 block-background-image-cards">
-      <div className="text-center">
-        <div
-          className={clsx('grid gap-2', {
-            'grid-cols-2': props.teasers.filter(isTruthy).length > 1,
-          })}
-        >
-          {props.teasers.filter(isTruthy).map((teaser, index) => (
-            <BlockImageTeaser key={index} {...teaser} />
-          ))}
+    <FadeUp yGap={50}>
+      <section className="my-10 block-background-image-cards">
+        <div className="text-center">
+          <div
+            className={clsx('grid gap-2', {
+              'grid-cols-2': props.teasers.filter(isTruthy).length > 1,
+            })}
+          >
+            {props.teasers.filter(isTruthy).map((teaser, index) => (
+              <BlockImageTeaser key={index} {...teaser} />
+            ))}
+          </div>
         </div>
-      </div>
-    </section>
+      </section>
+    </FadeUp>
   );
 }
 
diff --git a/packages/ui/src/components/Organisms/PageContent/BlockImageWithText.tsx b/packages/ui/src/components/Organisms/PageContent/BlockImageWithText.tsx
index 26cbc5406..f179c667f 100644
--- a/packages/ui/src/components/Organisms/PageContent/BlockImageWithText.tsx
+++ b/packages/ui/src/components/Organisms/PageContent/BlockImageWithText.tsx
@@ -6,38 +6,41 @@ import {
 import clsx from 'clsx';
 import React from 'react';
 
+import { FadeUp } from '../../Molecules/FadeUp';
 import { BlockMarkup } from './BlockMarkup';
 
 export function BlockImageWithText(props: BlockImageWithTextFragment) {
   return (
-    <div className="container-page">
-      <div className="container-content my-12 lg:my-16">
-        <div
-          className={clsx(
-            'flex flex-col lg:flex-row gap-8 lg:gap-16 items-start lg:items-center',
-            {
-              'lg:flex-row-reverse':
-                props.imagePosition === ImagePosition.Right,
-            },
-          )}
-        >
-          {!!props.image?.source && (
-            <div className={'lg:w-1/2 self-start'}>
-              <Image
-                className="object-cover w-full"
-                source={props.image.source}
-                alt={props.image.alt || ''}
-              />
-            </div>
-          )}
-
-          <div className={'lg:w-1/2 nested-container'}>
-            {props.textContent?.markup && (
-              <BlockMarkup {...props.textContent} />
+    <FadeUp yGap={50}>
+      <div className="container-page">
+        <div className="container-content my-12 lg:my-16">
+          <div
+            className={clsx(
+              'flex flex-col lg:flex-row gap-8 lg:gap-16 items-start lg:items-center',
+              {
+                'lg:flex-row-reverse':
+                  props.imagePosition === ImagePosition.Right,
+              },
+            )}
+          >
+            {!!props.image?.source && (
+              <div className={'lg:w-1/2 self-start'}>
+                <Image
+                  className="object-cover w-full"
+                  source={props.image.source}
+                  alt={props.image.alt || ''}
+                />
+              </div>
             )}
+
+            <div className={'lg:w-1/2 nested-container'}>
+              {props.textContent?.markup && (
+                <BlockMarkup {...props.textContent} />
+              )}
+            </div>
           </div>
         </div>
       </div>
-    </div>
+    </FadeUp>
   );
 }
diff --git a/packages/ui/src/components/Organisms/PageContent/BlockMarkup.tsx b/packages/ui/src/components/Organisms/PageContent/BlockMarkup.tsx
index fd5a9ec22..0e9cc494d 100644
--- a/packages/ui/src/components/Organisms/PageContent/BlockMarkup.tsx
+++ b/packages/ui/src/components/Organisms/PageContent/BlockMarkup.tsx
@@ -5,6 +5,8 @@ import { selectAll } from 'hast-util-select';
 import React, { PropsWithChildren } from 'react';
 import { Plugin } from 'unified';
 
+import { FadeUp } from '../../Molecules/FadeUp';
+
 const unorderedItems: Plugin<[], Element> = () => (tree) => {
   selectAll('ul > li', tree).forEach((node) => {
     node.properties!.unordered = true;
@@ -13,44 +15,46 @@ const unorderedItems: Plugin<[], Element> = () => (tree) => {
 
 export function BlockMarkup(props: BlockMarkupFragment) {
   return (
-    <div className="container-page">
-      <div className="container-content">
-        <div className="container-text">
-          <div
-            className={clsx([
-              'prose lg:prose-xl mt-10',
-              'marker:text-[#111928]',
-              'marker:font-bold',
-            ])}
-          >
-            <Html
-              plugins={[unorderedItems]}
-              components={{
-                blockquote: ({ children }: PropsWithChildren<{}>) => {
-                  return (
-                    <blockquote className="border-l-0 relative pl-0">
-                      <svg
-                        width="32"
-                        height="24"
-                        viewBox="0 0 32 24"
-                        fill="none"
-                        xmlns="http://www.w3.org/2000/svg"
-                      >
-                        <path
-                          d="M18.6893 24V14.1453C18.6893 6.54 23.664 1.38533 30.6667 0L31.9933 2.868C28.7507 4.09066 26.6667 7.71867 26.6667 10.6667H32V24H18.6893ZM0 24V14.1453C0 6.54 4.99733 1.384 12 0L13.328 2.868C10.084 4.09066 8 7.71867 8 10.6667L13.3107 10.6667V24H0Z"
-                          fill="#9CA3AF"
-                        />
-                      </svg>
-                      {children}
-                    </blockquote>
-                  );
-                },
-              }}
-              markup={props.markup}
-            />
+    <FadeUp yGap={50}>
+      <div className="container-page">
+        <div className="container-content">
+          <div className="container-text">
+            <div
+              className={clsx([
+                'prose lg:prose-xl mt-10',
+                'marker:text-[#111928]',
+                'marker:font-bold',
+              ])}
+            >
+              <Html
+                plugins={[unorderedItems]}
+                components={{
+                  blockquote: ({ children }: PropsWithChildren<{}>) => {
+                    return (
+                      <blockquote className="border-l-0 relative pl-0">
+                        <svg
+                          width="32"
+                          height="24"
+                          viewBox="0 0 32 24"
+                          fill="none"
+                          xmlns="http://www.w3.org/2000/svg"
+                        >
+                          <path
+                            d="M18.6893 24V14.1453C18.6893 6.54 23.664 1.38533 30.6667 0L31.9933 2.868C28.7507 4.09066 26.6667 7.71867 26.6667 10.6667H32V24H18.6893ZM0 24V14.1453C0 6.54 4.99733 1.384 12 0L13.328 2.868C10.084 4.09066 8 7.71867 8 10.6667L13.3107 10.6667V24H0Z"
+                            fill="#9CA3AF"
+                          />
+                        </svg>
+                        {children}
+                      </blockquote>
+                    );
+                  },
+                }}
+                markup={props.markup}
+              />
+            </div>
           </div>
         </div>
       </div>
-    </div>
+    </FadeUp>
   );
 }
diff --git a/packages/ui/src/components/Organisms/PageContent/BlockMedia.tsx b/packages/ui/src/components/Organisms/PageContent/BlockMedia.tsx
index 532bd8697..2d830e2a1 100644
--- a/packages/ui/src/components/Organisms/PageContent/BlockMedia.tsx
+++ b/packages/ui/src/components/Organisms/PageContent/BlockMedia.tsx
@@ -2,14 +2,14 @@ import { BlockMediaFragment, Html, Image } from '@custom/schema';
 import React from 'react';
 
 import { UnreachableCaseError } from '../../../utils/unreachable-case-error';
-import { ScrollPop } from '../../Client/ScrollPop';
+import { FadeUp } from '../../Molecules/FadeUp';
 
 export function BlockMedia(props: BlockMediaFragment) {
   if (!props.media) {
     return null;
   }
   return (
-    <ScrollPop>
+    <FadeUp yGap={50}>
       <div className="container-page">
         <div className="container-content">
           <figure className="mt-16 container-text">
@@ -22,7 +22,7 @@ export function BlockMedia(props: BlockMediaFragment) {
           </figure>
         </div>
       </div>
-    </ScrollPop>
+    </FadeUp>
   );
 }
 
diff --git a/packages/ui/src/components/Organisms/PageContent/BlockQuote.tsx b/packages/ui/src/components/Organisms/PageContent/BlockQuote.tsx
index a26e8d355..c899d09fb 100644
--- a/packages/ui/src/components/Organisms/PageContent/BlockQuote.tsx
+++ b/packages/ui/src/components/Organisms/PageContent/BlockQuote.tsx
@@ -1,53 +1,59 @@
 import { BlockQuoteFragment, Html, Image } from '@custom/schema';
 import React from 'react';
 
+import { FadeUp } from '../../Molecules/FadeUp';
+
 export function BlockQuote(props: BlockQuoteFragment) {
   return (
-    <div className="container-page">
-      <div className="container-content">
-        <div className="container-text">
-          <div className="prose lg:prose-xl prose-p:text-xl prose-p:font-bold prose-p:leading-8 prose-p:text-[#111928]">
-            <blockquote className="border-l-0 relative pl-0 pb-8 pt-16">
-              <svg
-                width="32"
-                height="24"
-                viewBox="0 0 32 24"
-                fill="none"
-                xmlns="http://www.w3.org/2000/svg"
-                role="img"
-                aria-labelledby="quote-svg-title"
-              >
-                <title id="quote-svg-title">Quote Symbol</title>
-                <path
-                  d="M18.6893 24V14.1453C18.6893 6.54 23.664 1.38533 30.6667 0L31.9933 2.868C28.7507 4.09066 26.6667 7.71867 26.6667 10.6667H32V24H18.6893ZM0 24V14.1453C0 6.54 4.99733 1.384 12 0L13.328 2.868C10.084 4.09066 8 7.71867 8 10.6667L13.3107 10.6667V24H0Z"
-                  fill="#9CA3AF"
-                />
-              </svg>
-              <p>{props.quote && <Html markup={props.quote} />}</p>
-              <div className="flex not-prose items-center flex-wrap">
-                {props.image && (
-                  <Image
-                    className="w-6 h-6 rounded-full object-contain mr-3.5 "
-                    source={props.image.source}
-                    alt={props.image.alt || 'Author image'}
+    <FadeUp yGap={50}>
+      <div className="container-page">
+        <div className="container-content">
+          <div className="container-text">
+            <div className="prose lg:prose-xl prose-p:text-xl prose-p:font-bold prose-p:leading-8 prose-p:text-[#111928]">
+              <blockquote className="border-l-0 relative pl-0 pb-8 pt-16">
+                <svg
+                  width="32"
+                  height="24"
+                  viewBox="0 0 32 24"
+                  fill="none"
+                  xmlns="http://www.w3.org/2000/svg"
+                  role="img"
+                  aria-labelledby="quote-svg-title"
+                >
+                  <title id="quote-svg-title">Quote Symbol</title>
+                  <path
+                    d="M18.6893 24V14.1453C18.6893 6.54 23.664 1.38533 30.6667 0L31.9933 2.868C28.7507 4.09066 26.6667 7.71867 26.6667 10.6667H32V24H18.6893ZM0 24V14.1453C0 6.54 4.99733 1.384 12 0L13.328 2.868C10.084 4.09066 8 7.71867 8 10.6667L13.3107 10.6667V24H0Z"
+                    fill="#9CA3AF"
                   />
-                )}
-                <div className="not-italic text-base font-semibold">
-                  {props.author && <p className="not-prose">{props.author}</p>}
+                </svg>
+                <p>{props.quote && <Html markup={props.quote} />}</p>
+                <div className="flex not-prose items-center flex-wrap">
+                  {props.image && (
+                    <Image
+                      className="w-6 h-6 rounded-full object-contain mr-3.5 "
+                      source={props.image.source}
+                      alt={props.image.alt || 'Author image'}
+                    />
+                  )}
+                  <div className="not-italic text-base font-semibold">
+                    {props.author && (
+                      <p className="not-prose">{props.author}</p>
+                    )}
+                  </div>
+                  {props.role && (
+                    <p className="not-prose flex">
+                      <span className="ml-3 text-base">/</span>
+                      <span className="mt-0.5 not-italic text-gray-500 text-sm ml-3">
+                        {props.role}
+                      </span>
+                    </p>
+                  )}
                 </div>
-                {props.role && (
-                  <p className="not-prose flex">
-                    <span className="ml-3 text-base">/</span>
-                    <span className="mt-0.5 not-italic text-gray-500 text-sm ml-3">
-                      {props.role}
-                    </span>
-                  </p>
-                )}
-              </div>
-            </blockquote>
+              </blockquote>
+            </div>
           </div>
         </div>
       </div>
-    </div>
+    </FadeUp>
   );
 }