diff --git a/nx-dev/ui-home/src/lib/hero.tsx b/nx-dev/ui-home/src/lib/hero.tsx
index 9bdf63f1d6578..8c9faf1e52492 100644
--- a/nx-dev/ui-home/src/lib/hero.tsx
+++ b/nx-dev/ui-home/src/lib/hero.tsx
@@ -1,26 +1,11 @@
 'use client';
 import { ButtonLink, SectionHeading, Strong } from '@nx/nx-dev/ui-common';
-import { ShaderGradient, ShaderGradientCanvas } from 'shadergradient';
-import { BlurFade, usePrefersReducedMotion } from '@nx/nx-dev/ui-animations';
-import { Theme, useTheme } from '@nx/nx-dev/ui-theme';
-import { useState } from 'react';
-import { useIsomorphicLayoutEffect } from '@nx/nx-dev/ui-primitives';
 import { RustIcon, TypeScriptIcon } from '@nx/nx-dev/ui-icons';
+import { ReactElement } from 'react';
 
-export function Hero(): JSX.Element {
+export function Hero(): ReactElement {
   return (
     <div className="mx-auto h-screen w-full max-w-7xl px-6 lg:px-8">
-      <div className="hidden lg:block">
-        <ShaderGradientElement />
-      </div>
-      <div className="absolute left-0 right-0 -z-10 mx-auto flex h-full max-h-screen w-full flex-row justify-between border-b border-dashed border-slate-200/30 px-6 lg:h-full lg:max-w-7xl lg:px-0 dark:border-slate-800/40">
-        <div className="h-full w-full border-x border-dashed border-slate-200/20 dark:border-slate-800/40" />
-        <div className="h-full w-full border-x border-dashed border-slate-200/20 dark:border-slate-800/40" />
-        <div className="h-full w-full border-x border-dashed border-slate-200/20 dark:border-slate-800/40" />
-        <div className="h-full w-full border-x border-dashed border-slate-200/20 dark:border-slate-800/40" />
-        <div className="h-full w-full border-x border-dashed border-slate-200/20 dark:border-slate-800/40" />
-        <div className="h-full w-full border-x border-dashed border-slate-200/20 dark:border-slate-800/40" />
-      </div>
       <div className="z-20 mx-auto grid h-screen max-w-6xl grid-cols-1 place-items-center text-center">
         <div className="container">
           <SectionHeading as="h1" variant="display" data-cy="primary-heading">
@@ -91,132 +76,3 @@ export function Hero(): JSX.Element {
     </div>
   );
 }
-
-function ShaderGradientElement() {
-  const [theme] = useTheme();
-  const [displayTheme, setDisplayTheme] = useState<Theme>('system');
-  const prefersReducedMotion = usePrefersReducedMotion();
-
-  useIsomorphicLayoutEffect(() => {
-    const matchMedia: any = window.matchMedia('(prefers-color-scheme: dark)');
-
-    function handleChange(): void {
-      if (theme === 'system') {
-        setDisplayTheme(matchMedia.matches ? 'dark' : 'light');
-      } else {
-        setDisplayTheme(theme === 'dark' ? 'dark' : 'light');
-      }
-    }
-
-    handleChange();
-
-    // Use deprecated `addListener` and `removeListener` to support Safari < 14 (#135)
-    if (matchMedia.addListener) {
-      matchMedia.addListener(handleChange);
-    } else {
-      matchMedia.addEventListener('change', handleChange);
-    }
-
-    return () => {
-      if (matchMedia.removeListener) {
-        matchMedia.removeListener(handleChange);
-      } else {
-        matchMedia.removeEventListener('change', handleChange);
-      }
-    };
-  }, [theme]);
-
-  if (prefersReducedMotion) {
-    return;
-  }
-
-  if (displayTheme === 'dark')
-    return (
-      <BlurFade
-        delay={1}
-        duration={1.8}
-        className="absolute left-0 -z-10 w-full"
-      >
-        <div className="h-screen w-full overflow-hidden">
-          <ShaderGradientCanvas
-            pointerEvents="none"
-            eventPrefix="client"
-            fov={45}
-            pixelDensity={1}
-            className="pointer-events-none"
-          >
-            <ShaderGradient
-              brightness={4}
-              cDistance={5}
-              color1="#251B36"
-              color2="#020617"
-              color3="#1F1C3A"
-              frameRate={10}
-              grain="off"
-              lightType="3d"
-              positionX={0}
-              positionY={1.8}
-              positionZ={0}
-              range="enabled"
-              rangeEnd={40}
-              rangeStart={0}
-              reflection={0.1}
-              rotationX={0}
-              rotationY={0}
-              rotationZ={-90}
-              shader="defaults"
-              type="waterPlane"
-              uDensity={1}
-              uFrequency={5.5}
-              uSpeed={0.1}
-              uStrength={3}
-              uTime={0.2}
-            />
-          </ShaderGradientCanvas>
-          <div className="absolute inset-x-0 bottom-0 h-96 bg-gradient-to-b from-transparent to-white dark:to-slate-950" />
-        </div>
-      </BlurFade>
-    );
-  return (
-    <BlurFade delay={1} duration={1.8} className="absolute left-0 -z-10 w-full">
-      <div className="h-screen w-full overflow-hidden">
-        <ShaderGradientCanvas
-          pointerEvents="none"
-          eventPrefix="client"
-          fov={45}
-          pixelDensity={1}
-          className="pointer-events-none"
-        >
-          <ShaderGradient
-            brightness={4}
-            cDistance={5}
-            color1="#F4F2FE"
-            color2="#F7F7FF"
-            color3="#FFFFFF"
-            frameRate={10}
-            grain="off"
-            lightType="3d"
-            positionX={0}
-            positionY={1.8}
-            positionZ={0}
-            range="enabled"
-            rangeEnd={40}
-            rangeStart={0}
-            reflection={0.1}
-            rotationX={0}
-            rotationY={0}
-            rotationZ={-90}
-            shader="defaults"
-            type="waterPlane"
-            uDensity={1}
-            uFrequency={5.5}
-            uSpeed={0.1}
-            uStrength={3}
-            uTime={0.2}
-          />
-        </ShaderGradientCanvas>
-        <div className="absolute inset-x-0 bottom-0 h-96 bg-gradient-to-b from-transparent to-white dark:to-slate-950" />
-      </div>
-    </BlurFade>
-  );
-}