diff --git a/.yarn/install-state.gz b/.yarn/install-state.gz
new file mode 100644
index 0000000..049d614
Binary files /dev/null and b/.yarn/install-state.gz differ
diff --git a/next.config.js b/next.config.js
index 0c8f782..951c202 100755
--- a/next.config.js
+++ b/next.config.js
@@ -48,7 +48,7 @@ const cspHeader = `
   style-src 'self' 'unsafe-inline' ${STYLE_SRC_HOSTS.join(' ')};
   connect-src *;
   img-src 'self' blob: data: ${IMG_SRC_HOSTS.join(' ')};
-  font-src 'self' data: https://js.intercomcdn.com https://fonts.intercomcdn.com;
+  font-src 'self' data: https://js.intercomcdn.com https://fonts.intercomcdn.com https://res.cloudinary.com;
   object-src 'none';
   base-uri 'self';
   form-action 'self';
diff --git a/package.json b/package.json
index 9993a45..10d5474 100644
--- a/package.json
+++ b/package.json
@@ -53,6 +53,7 @@
     "@starknet-react/core": "^3.7.2",
     "@tanstack/query-core": "^5.90.12",
     "@tanstack/react-query": "^5.59.20",
+    "@types/three": "^0.184.0",
     "@vercel/analytics": "^1.4.0",
     "@vercel/functions": "^1.5.0",
     "axios": "^1.7.9",
@@ -63,12 +64,15 @@
     "formik": "^2.4.6",
     "framer-motion": "^10.16.4",
     "next": "^15.0.7",
+    "ogl": "^1.0.11",
+    "postprocessing": "^6.39.1",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-icons": "^5.6.0",
     "react-toastify": "^10.0.6",
     "refiner-js": "1.2.4",
     "starknetkit": "2.6.1",
+    "three": "^0.184.0",
     "viem": "^2.21.41",
     "wagmi": "^2.12.26",
     "zod": "3.21.4",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 655f36e..b5aec4d 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -179,6 +179,9 @@ importers:
       '@tanstack/react-query':
         specifier: ^5.59.20
         version: 5.90.12(react@18.3.1)
+      '@types/three':
+        specifier: ^0.184.0
+        version: 0.184.0
       '@vercel/analytics':
         specifier: ^1.4.0
         version: 1.6.1(next@15.5.7(@babel/core@7.28.5)(@opentelemetry/api@1.9.0)(babel-plugin-macros@3.1.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(sass@1.99.0))(react@18.3.1)
@@ -209,6 +212,12 @@ importers:
       next:
         specifier: ^15.0.7
         version: 15.5.7(@babel/core@7.28.5)(@opentelemetry/api@1.9.0)(babel-plugin-macros@3.1.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(sass@1.99.0)
+      ogl:
+        specifier: ^1.0.11
+        version: 1.0.11
+      postprocessing:
+        specifier: ^6.39.1
+        version: 6.39.1(three@0.184.0)
       react:
         specifier: ^18.3.1
         version: 18.3.1
@@ -227,6 +236,9 @@ importers:
       starknetkit:
         specifier: 2.6.1
         version: 2.6.1(patch_hash=d8d81d77fa623989f021747f735ecef191f7ef8744e03c5f475cc1e9314d79d7)(@react-native-async-storage/async-storage@1.24.0(react-native@0.82.1(@babel/core@7.28.5)(@types/react@18.3.27)(bufferutil@4.0.9)(react@18.3.1)(utf-8-validate@5.0.10)))(@vercel/functions@1.6.0(@aws-sdk/credential-provider-web-identity@3.972.5))(bufferutil@4.0.9)(starknet@7.6.4)(typescript@5.6.3)(utf-8-validate@5.0.10)(zod@3.21.4)
+      three:
+        specifier: ^0.184.0
+        version: 0.184.0
       viem:
         specifier: ^2.21.41
         version: 2.41.2(bufferutil@4.0.9)(typescript@5.6.3)(utf-8-validate@5.0.10)(zod@3.21.4)
@@ -1006,6 +1018,9 @@ packages:
       '@cosmjs/amino': '>= ^0.32'
       '@cosmjs/proto-signing': '>= ^0.32'
 
+  '@dimforge/rapier3d-compat@0.12.0':
+    resolution: {integrity: sha512-uekIGetywIgopfD97oDL5PfeezkFpNhwlzlaEYNOA0N6ghdsOvh/HYjSMek5Q2O1PYvRSDFcqFVJl4r4ZBwOow==}
+
   '@discoveryjs/json-ext@0.5.7':
     resolution: {integrity: sha512-dBVuXR082gk3jsFp7Rd/JI4kytwGHecnCoTtXFb7DB6CNHp4rg5k1bhg0nWdLGLnOV71lmDzGQaLMy8iPLY0pw==}
     engines: {node: '>=10.0.0'}
@@ -4773,6 +4788,9 @@ packages:
     resolution: {integrity: sha512-jdN17QEnn7RBykEOhtKIialWmDjnDAH8DzbyITwn8jsKcwT1TBNYge89hTUTjbdsDLBAqQw8cHujPdy0RaAqvw==}
     engines: {node: '>=18.0.0'}
 
+  '@tweenjs/tween.js@23.1.3':
+    resolution: {integrity: sha512-vJmvvwFxYuGnF2axRtPYocag6Clbb5YS7kLL+SO/TeVFzHqDIWrNKYtcsPMibjDx9O+bu+psAy9NKfWklassUA==}
+
   '@tybys/wasm-util@0.10.1':
     resolution: {integrity: sha512-9tTaPJLSiejZKx+Bmog4uSubteqTvFrVrURwkmHixBo0G4seD0zUxp98E1DzUBJxLQ3NPwXrGKDiVjwx/DpPsg==}
 
@@ -4921,15 +4939,24 @@ packages:
   '@types/stack-utils@2.0.3':
     resolution: {integrity: sha512-9aEbYZ3TbYMznPdcdr3SmIrLXwC/AKZXQeCf9Pgao5CKb8CyHuEX5jzWPTkvregvhRJHcpRO6BFoGW9ycaOkYw==}
 
+  '@types/stats.js@0.17.4':
+    resolution: {integrity: sha512-jIBvWWShCvlBqBNIZt0KAshWpvSjhkwkEu4ZUcASoAvhmrgAUI2t1dXrjSL4xXVLB4FznPrIsX3nKXFl/Dt4vA==}
+
   '@types/tedious@4.0.14':
     resolution: {integrity: sha512-KHPsfX/FoVbUGbyYvk1q9MMQHLPeRZhRJZdO45Q4YjvFkv4hMNghCWTvy7rdKessBsmtz4euWCWAB6/tVpI1Iw==}
 
+  '@types/three@0.184.0':
+    resolution: {integrity: sha512-4mY2tZAu0y0B0567w7013BBXSpsP0+Z48NJvmNo4Y/Pf76yCyz6Jw4P3tUVs10WuYNXXZ+wmHyGWpCek3amJxA==}
+
   '@types/trusted-types@2.0.7':
     resolution: {integrity: sha512-ScaPdn1dQczgbl0QFTeTOmVHFULt394XJgOQNoyVhZ6r2vLnMLJfBPd53SB52T/3G36VI1/g2MZaX0cwDuXsfw==}
 
   '@types/uuid@8.3.4':
     resolution: {integrity: sha512-c/I8ZRb51j+pYGAu5CrFMRxqZ2ke4y2grEBO5AUjgSkSk+qT2Ea+OdWElz/OiMf5MNpn2b17kuVBwZLQJXzihw==}
 
+  '@types/webxr@0.5.24':
+    resolution: {integrity: sha512-h8fgEd/DpoS9CBrjEQXR+dIDraopAEfu4wYVNY2tEPwk60stPWhvZMf4Foo5FakuQ7HFZoa8WceaWFervK2Ovg==}
+
   '@types/ws@7.4.7':
     resolution: {integrity: sha512-JQbbmxZTZehdc2iszGKs5oC3NFnjeay7mtAWrdt7qNtAVK0g19muApzAy4bm9byz79xa2ZnO/BOBC2R8RC5Lww==}
 
@@ -6805,6 +6832,9 @@ packages:
       picomatch:
         optional: true
 
+  fflate@0.8.2:
+    resolution: {integrity: sha512-cPJU47OaAoCbg0pBvzsgpTPhmhqI5eJjh/JIu8tPj5q+T7iLvW/JAYUqmE7KOB4R1ZyEhzBaIQpQpardBF5z8A==}
+
   file-entry-cache@8.0.0:
     resolution: {integrity: sha512-XXTUwCvisa5oacNGRP9SfNtYBNAMi+RPwBFmblZEF7N7swHYQS6/Zfk7SRwx4D5j3CH211YNRco1DEMNVfZCnQ==}
     engines: {node: '>=16.0.0'}
@@ -7661,6 +7691,9 @@ packages:
     resolution: {integrity: sha512-8q7VEgMJW4J8tcfVPy8g09NcQwZdbwFEqhe/WZkoIzjn/3TGDwtOCYtXGxA3O8tPzpczCCDgv+P2P5y00ZJOOg==}
     engines: {node: '>= 8'}
 
+  meshoptimizer@1.1.1:
+    resolution: {integrity: sha512-oRFNWJRDA/WTrVj7NWvqa5HqE1t9MYDj2VaWirQCzCCrAd2GHrqR/sQezCxiWATPNlKTcRaPRHPJwIRoPBAp5g==}
+
   metro-babel-transformer@0.83.3:
     resolution: {integrity: sha512-1vxlvj2yY24ES1O5RsSIvg4a4WeL7PFXgKOHvXTXiW0deLvQr28ExXj6LjwCCDZ4YZLhq6HddLpZnX4dEdSq5g==}
     engines: {node: '>=20.19.4'}
@@ -7969,6 +8002,9 @@ packages:
   ofetch@1.5.1:
     resolution: {integrity: sha512-2W4oUZlVaqAPAil6FUg/difl6YhqhUR7x2eZY4bQCko22UXg3hptq9KLQdqFClV+Wu85UX7hNtdGTngi/1BxcA==}
 
+  ogl@1.0.11:
+    resolution: {integrity: sha512-kUpC154AFfxi16pmZUK4jk3J+8zxwTWGPo03EoYA8QPbzikHoaC82n6pNTbd+oEaJonaE8aPWBlX7ad9zrqLsA==}
+
   on-exit-leak-free@0.2.0:
     resolution: {integrity: sha512-dqaz3u44QbRXQooZLTUKU41ZrzYrcvLISVgbrzbyCMxpmSLJvZ3ZamIJIZ29P6OhZIkNIQKosdeM6t1LYbA9hg==}
 
@@ -8296,6 +8332,11 @@ packages:
     resolution: {integrity: sha512-9ZhXKM/rw350N1ovuWHbGxnGh/SNJ4cnxHiM0rxE4VN41wsg8P8zWn9hv/buK00RP4WvlOyr/RBDiptyxVbkZQ==}
     engines: {node: '>=0.10.0'}
 
+  postprocessing@6.39.1:
+    resolution: {integrity: sha512-R2dG2zy+BAx3USl5EHw+PvnrlbT5PKnZVp3se0HCR0pWH8WQdh742yNG4YWOsq6c0bFpffk0Gd2RqPeoP/wKng==}
+    peerDependencies:
+      three: '>= 0.168.0 < 0.185.0'
+
   preact@10.24.2:
     resolution: {integrity: sha512-1cSoF0aCC8uaARATfrlz4VCBqE8LwZwRfLgkxJOQwAlQt6ayTmi0D9OF7nXid1POI5SZidFuG9CnlXbDfLqY/Q==}
 
@@ -9201,6 +9242,9 @@ packages:
   thread-stream@3.1.0:
     resolution: {integrity: sha512-OqyPZ9u96VohAyMfJykzmivOrY2wfMSf3C5TtFJVgN+Hm6aj+voFhlK+kZEIv2FBh1X6Xp3DlnCOfEQ3B2J86A==}
 
+  three@0.184.0:
+    resolution: {integrity: sha512-wtTRjG92pM5eUg/KuUnHsqSAlPM296brTOcLgMRqEeylYTh/CdtvKUvCyyCQTzFuStieWxvZb8mVTMvdPyUpxg==}
+
   throat@5.0.0:
     resolution: {integrity: sha512-fcwX4mndzpLQKBS1DVYhGAcYaYt7vsHNIvQV+WXMvnow5cgjPphq5CaayLaGsjRdSCKZFNGt7/GYAuXaNOiYCA==}
 
@@ -11689,6 +11733,8 @@ snapshots:
       '@cosmjs/proto-signing': 0.36.2
       uuid: 9.0.1
 
+  '@dimforge/rapier3d-compat@0.12.0': {}
+
   '@discoveryjs/json-ext@0.5.7': {}
 
   '@drift-labs/snap-wallet-adapter@0.3.0(bufferutil@4.0.9)(utf-8-validate@5.0.10)':
@@ -17837,6 +17883,8 @@ snapshots:
     dependencies:
       sha256-uint8array: 0.10.7
 
+  '@tweenjs/tween.js@23.1.3': {}
+
   '@tybys/wasm-util@0.10.1':
     dependencies:
       tslib: 2.8.1
@@ -18010,14 +18058,27 @@ snapshots:
 
   '@types/stack-utils@2.0.3': {}
 
+  '@types/stats.js@0.17.4': {}
+
   '@types/tedious@4.0.14':
     dependencies:
       '@types/node': 24.10.9
 
+  '@types/three@0.184.0':
+    dependencies:
+      '@dimforge/rapier3d-compat': 0.12.0
+      '@tweenjs/tween.js': 23.1.3
+      '@types/stats.js': 0.17.4
+      '@types/webxr': 0.5.24
+      fflate: 0.8.2
+      meshoptimizer: 1.1.1
+
   '@types/trusted-types@2.0.7': {}
 
   '@types/uuid@8.3.4': {}
 
+  '@types/webxr@0.5.24': {}
+
   '@types/ws@7.4.7':
     dependencies:
       '@types/node': 24.10.9
@@ -21249,6 +21310,8 @@ snapshots:
     optionalDependencies:
       picomatch: 4.0.3
 
+  fflate@0.8.2: {}
+
   file-entry-cache@8.0.0:
     dependencies:
       flat-cache: 4.0.1
@@ -22187,6 +22250,8 @@ snapshots:
 
   merge2@1.4.1: {}
 
+  meshoptimizer@1.1.1: {}
+
   metro-babel-transformer@0.83.3:
     dependencies:
       '@babel/core': 7.28.5
@@ -22577,6 +22642,8 @@ snapshots:
       node-fetch-native: 1.6.7
       ufo: 1.6.1
 
+  ogl@1.0.11: {}
+
   on-exit-leak-free@0.2.0: {}
 
   on-exit-leak-free@2.1.2: {}
@@ -22949,6 +23016,10 @@ snapshots:
     dependencies:
       xtend: 4.0.2
 
+  postprocessing@6.39.1(three@0.184.0):
+    dependencies:
+      three: 0.184.0
+
   preact@10.24.2: {}
 
   preact@10.28.2: {}
@@ -24115,6 +24186,8 @@ snapshots:
     dependencies:
       real-require: 0.2.0
 
+  three@0.184.0: {}
+
   throat@5.0.0: {}
 
   tiny-invariant@1.3.3: {}
diff --git a/src/components/footer/Footer.tsx b/src/components/footer/Footer.tsx
index 7e70ab1..61542d1 100644
--- a/src/components/footer/Footer.tsx
+++ b/src/components/footer/Footer.tsx
@@ -1,12 +1,12 @@
 'use client';
 
-import Image from 'next/image';
-import Link from 'next/link';
 import { resolveTarget } from '../../utils/resolveTarget';
 import { socialIconMap } from '../../utils/socialIconMap';
+import FooterBottomAnimated from './FooterBottomAnimated';
 import SingleFooter from './props/SingleFooter';
 import type { RawFooterConfig } from './types/types';
 
+
 type Props = {
   rawFooter: RawFooterConfig;
 };
@@ -43,8 +43,8 @@ const Footer = ({ rawFooter }: Props) => {
   ];
 
   return (
-    <footer className="lightchain-footer footer-style-default footer-style-3 position-relative variation-2 bg-one mt-0">
-      <div className="footer-top">
+    <footer className="lightchain-footer footer-style-default footer-style-3 position-relative variation-2 mt-0">
+      <div className="footer-top pb--0 bg-[#000000]">
         <div className="container mx-auto px-4 sm:px-6 lg:px-12">
           <div className="grid grid-cols-2 gap-6 md:grid-cols-3 lg:grid-cols-5">
             <SingleFooter data={services} />
@@ -52,27 +52,11 @@ const Footer = ({ rawFooter }: Props) => {
             <SingleFooter data={solutions} />
             <SingleFooter data={company} />
           </div>
-          <div className="separator-animated variation-2 height-1 animated-true mt_sm--20 mt--70 mb--30 mt_md--30 mb_md--20 sm--30 mb_sm--20"></div>
-          <div className="flex flex-wrap justify-between">
-            <div className="w-full md:w-1/2 lg:w-1/3">
-              <div className="lightchain-footer-widget">
-                <div className="logo inline-flex">
-                  <Link href="/">
-                    <Image src="/logo.svg" width={201} height={35} alt="Corporate Logo" />
-                  </Link>
-                </div>
-              </div>
-            </div>
-            <div className="w-full md:w-1/2 lg:w-1/3">
-              <p className="copyright-text mb-0">
-                Copyright © {new Date().getFullYear()}
-                <Link href="#" className="btn-read-more ps-2">
-                  <span>Lightchain Protocol</span>
-                </Link>
-              </p>
-            </div>
-          </div>
+          <div className="separator-animated variation-2 height-1 animated-true mt_sm--20 mt--70 mb--0 mt_md--30 mb_md--0 sm--30 mb_sm--0"></div>
+         
         </div>
+        
+        <FooterBottomAnimated />
       </div>
     </footer>
   );
diff --git a/src/components/footer/FooterBottomAnimated.tsx b/src/components/footer/FooterBottomAnimated.tsx
new file mode 100644
index 0000000..b4e5243
--- /dev/null
+++ b/src/components/footer/FooterBottomAnimated.tsx
@@ -0,0 +1,87 @@
+"use client";
+
+import Link from "next/link";
+import { useEffect, useState } from "react";
+import PixelBlast from "../ui/PixelBlast";
+import TextPressure from "../ui/TextPressure";
+
+type TitleScale = { letterSpacing: number; minFontSize: number };
+
+/**
+ * On narrow widths, `letterSpacing` + `minFontSize` made the word wider than the
+ * title row; `.footer-bottom-animated` uses `overflow-hidden`, so the line was clipped.
+ */
+function useFooterTitleScale(): TitleScale {
+  const [scale, setScale] = useState<TitleScale>({ letterSpacing: 20, minFontSize: 36 });
+
+  useEffect(() => {
+    const sync = () => {
+      const w = window.innerWidth;
+      if (w <= 639) {
+        setScale({ letterSpacing: 4, minFontSize: 22 });
+      } else if (w <= 900) {
+        setScale({ letterSpacing: 12, minFontSize: 28 });
+      } else {
+        setScale({ letterSpacing: 20, minFontSize: 36 });
+      }
+    };
+    sync();
+    window.addEventListener("resize", sync);
+    return () => window.removeEventListener("resize", sync);
+  }, []);
+
+  return scale;
+}
+
+export default function FooterBottomAnimated() {
+  const { letterSpacing, minFontSize } = useFooterTitleScale();
+
+  return (
+    <div className="footer-bottom-animated relative isolate z-2 w-full overflow-hidden">
+      <div className="container mx-auto border-0 px-4 pb-4 pt-4 sm:pb-8 lg:pt-10 xl:pb-4 relative z-11">
+        <p className="mb--0 text-center text-base font-medium text-content-default">
+          Copyright © 2026{" "}
+          <Link href="/" className="text-content-strong lcai-link-hover">
+            Lightchain Protocol
+          </Link>
+        </p>
+      </div>
+      <div className="relative z-10 mx-auto flex h-[90px] w-full max-w-[300px] min-w-0 items-center justify-center px-4 sm:h-[110px] sm:max-w-[500px] sm:px-8 md:h-[150px] md:px-12 lg:h-[200px] lg:max-w-[1000px] 2xl:h-[300px] 2xl:max-w-[1500px]">
+        <TextPressure
+          text="Lightchain"
+          flex={false}
+          alpha={false}
+          stroke={false}
+          width
+          weight={false}
+          italic={false}
+          textColor="transparent"
+          strokeColor="#f5f3ff"
+          minFontSize={minFontSize}
+          maxFontSize={300}
+          letterSpacing={letterSpacing}
+          classNameTextPressure="flex w-full min-w-0 items-center justify-center footer-gradient-text z-[10]"
+        />
+      </div>
+
+      <div className="pointer-events-none absolute inset-0 z-[-1] h-full w-full">
+        <PixelBlast
+          variant="square"
+          pixelSize={2}
+          color="#a552f3"
+          backgroundColor="#ffffff"
+          patternScale={3.5}
+          patternDensity={0.2}
+          enableRipples={false}
+          rippleSpeed={0.3}
+          rippleThickness={0.1}
+          rippleIntensityScale={0.7}
+          speed={0.35}
+          transparent={false}
+          edgeFade={0.12}
+          lightModeBackgroundColor="#000000"
+        />
+      </div>
+    </div>
+  );
+}
diff --git a/src/components/layout/AppLayout.tsx b/src/components/layout/AppLayout.tsx
index 0171d29..1d3057a 100644
--- a/src/components/layout/AppLayout.tsx
+++ b/src/components/layout/AppLayout.tsx
@@ -2,7 +2,6 @@
 
 import { MultiProtocolWalletModal } from '@hyperlane-xyz/widgets';
 import Head from 'next/head';
-import Image from 'next/image';
 import { PropsWithChildren, useEffect, useState } from 'react';
 import { APP_NAME } from '../../consts/app';
 import { config } from '../../consts/config';
@@ -19,6 +18,8 @@ import { fetchFooterConfig } from '../../utils/fetchFooterConfig';
 import Footer from '../footer/Footer';
 import type { RawFooterConfig } from '../footer/types/types';
 import { Header } from '../nav/Header';
+import DottedLineBackground from '../ui/DottedLineBackground';
+import SoftAurora from '../ui/SoftAurora';
 
 export function AppLayout({ children }: PropsWithChildren) {
   const { showEnvSelectModal, setShowEnvSelectModal, isSideBarOpen, setIsSideBarOpen } = useStore(
@@ -56,19 +57,31 @@ export function AppLayout({ children }: PropsWithChildren) {
         <meta name="viewport" content="width=device-width, initial-scale=1.0" />
         <title>{APP_NAME}</title>
       </Head>
-      <div id="app-content" className="min-w-screen relative w-full">
+      <div id="app-content" className="min-w-screen relative w-full bg-[#000000]">
         <Header rawMenus={navConfig} />
-        <div className="mx-auto relative">
-          <Image
-            className="absolute top-0 left-0 h-full w-full"
-            src="/images/bg/grid.png"
-            width={1917}
-            height={1170}
-            alt="Background"
-          />
-          <main className="main-wrapper flex w-full flex-1 items-center justify-center px-3 py-10 sm:py-24 lg:py-[120px]">
-            {children}
+        <div className="mx-auto relative overflow-hidden">
+          <main className="main-wrapper flex w-full flex-1 items-center justify-center px-3 py-10 sm:py-24 lg:py-[120px] overflow-hidden container mx-auto relative z-10">
+              {children}
+              <DottedLineBackground lineCount={5} />
           </main>
+          <div className="absolute top-0 left-0 w-full h-full z-[1]">
+              <SoftAurora
+                speed={0.9}
+                scale={1.7}
+                brightness={1.9}
+                color1="#644aff"
+                color2="#e100ff"
+                noiseFrequency={3}
+                noiseAmplitude={2}
+                bandHeight={0.5}
+                bandSpread={1}
+                octaveDecay={0.1}
+                layerOffset={0.15}
+                colorSpeed={1}
+                enableMouseInteraction
+                mouseInfluence={0.15}
+              />
+            </div>
         </div>
         {!isLoading && footerConfig && <Footer rawFooter={footerConfig} />}
       </div>
diff --git a/src/components/ui/DottedLineBackground.tsx b/src/components/ui/DottedLineBackground.tsx
new file mode 100644
index 0000000..025da7b
--- /dev/null
+++ b/src/components/ui/DottedLineBackground.tsx
@@ -0,0 +1,29 @@
+type DottedLineBackgroundProps = {
+  lineCount?: number;
+  className?: string;
+  lineClassName?: string;
+};
+
+export default function DottedLineBackground({
+  lineCount = 5,
+  className = "",
+  lineClassName,
+}: DottedLineBackgroundProps) {
+  const totalLines = Math.max(1, lineCount);
+  const defaultLineClassName =
+    "h-full w-px border-l border-dashed border-white/55 opacity-[0.18] z-0 [border-image:repeating-linear-gradient(to_bottom,rgba(255,255,255,0.7)_0_7px,transparent_7px_14px)_1] motion-safe:animate-[dotted-line-flow_1.2s_linear_infinite]";
+
+  return (
+    <div
+      className={`pointer-events-none absolute inset-0 z-0 hidden w-full items-stretch justify-between sm:flex container mx-auto ${className}`.trim()}
+      aria-hidden="true"
+    >
+      {Array.from({ length: totalLines }).map((_, index) => (
+        <div
+          key={index}
+          className={lineClassName ?? defaultLineClassName}
+        />
+      ))}
+    </div>
+  );
+}
diff --git a/src/components/ui/PixelBlast.tsx b/src/components/ui/PixelBlast.tsx
new file mode 100644
index 0000000..9f32103
--- /dev/null
+++ b/src/components/ui/PixelBlast.tsx
@@ -0,0 +1,750 @@
+import { Effect, EffectComposer, EffectPass, RenderPass } from 'postprocessing';
+import React, { useEffect, useRef } from 'react';
+import * as THREE from 'three';
+import { createAnimationVisibilityController } from '../../lib/animationVisibility';
+
+type PixelBlastVariant = 'square' | 'circle' | 'triangle' | 'diamond';
+
+interface TouchPoint {
+    x: number;
+    y: number;
+    vx: number;
+    vy: number;
+    force: number;
+    age: number;
+}
+
+interface TouchTexture {
+    canvas: HTMLCanvasElement;
+    texture: THREE.Texture;
+    addTouch: (norm: { x: number; y: number }) => void;
+    update: () => void;
+    radiusScale: number;
+    size: number;
+}
+
+interface ReinitConfig {
+    antialias: boolean;
+    liquid: boolean;
+    noiseAmount: number;
+}
+
+type PixelBlastProps = {
+    variant?: PixelBlastVariant;
+    pixelSize?: number;
+    color?: string;
+    className?: string;
+    style?: React.CSSProperties;
+    backgroundColor?: string;
+    lightModeBackgroundColor?: string;
+    antialias?: boolean;
+    patternScale?: number;
+    patternDensity?: number;
+    liquid?: boolean;
+    liquidStrength?: number;
+    liquidRadius?: number;
+    pixelSizeJitter?: number;
+    enableRipples?: boolean;
+    rippleIntensityScale?: number;
+    rippleThickness?: number;
+    rippleSpeed?: number;
+    liquidWobbleSpeed?: number;
+    autoPauseOffscreen?: boolean;
+    speed?: number;
+    transparent?: boolean;
+    edgeFade?: number;
+    noiseAmount?: number;
+};
+
+const createTouchTexture = (): TouchTexture => {
+    const size = 64;
+    const canvas = document.createElement('canvas');
+    canvas.width = size;
+    canvas.height = size;
+    const ctx = canvas.getContext('2d');
+    if (!ctx) throw new Error('2D context not available');
+    ctx.fillStyle = 'black';
+    ctx.fillRect(0, 0, canvas.width, canvas.height);
+    const texture = new THREE.Texture(canvas);
+    texture.minFilter = THREE.LinearFilter;
+    texture.magFilter = THREE.LinearFilter;
+    texture.generateMipmaps = false;
+    const trail: TouchPoint[] = [];
+    let last: { x: number; y: number } | null = null;
+    const maxAge = 64;
+    let radius = 0.1 * size;
+    const speed = 1 / maxAge;
+    const clear = () => {
+        ctx.fillStyle = 'black';
+        ctx.fillRect(0, 0, canvas.width, canvas.height);
+    };
+    const drawPoint = (p: TouchPoint) => {
+        const pos = { x: p.x * size, y: (1 - p.y) * size };
+        let intensity = 1;
+        const easeOutSine = (t: number) => Math.sin((t * Math.PI) / 2);
+        const easeOutQuad = (t: number) => -t * (t - 2);
+        if (p.age < maxAge * 0.3) intensity = easeOutSine(p.age / (maxAge * 0.3));
+        else intensity = easeOutQuad(1 - (p.age - maxAge * 0.3) / (maxAge * 0.7)) || 0;
+        intensity *= p.force;
+        const color = `${((p.vx + 1) / 2) * 255}, ${((p.vy + 1) / 2) * 255}, ${intensity * 255}`;
+        const offset = size * 5;
+        ctx.shadowOffsetX = offset;
+        ctx.shadowOffsetY = offset;
+        ctx.shadowBlur = radius;
+        ctx.shadowColor = `rgba(${color},${0.22 * intensity})`;
+        ctx.beginPath();
+        ctx.fillStyle = 'rgba(255,0,0,1)';
+        ctx.arc(pos.x - offset, pos.y - offset, radius, 0, Math.PI * 2);
+        ctx.fill();
+    };
+    const addTouch = (norm: { x: number; y: number }) => {
+        let force = 0;
+        let vx = 0;
+        let vy = 0;
+        if (last) {
+            const dx = norm.x - last.x;
+            const dy = norm.y - last.y;
+            if (dx === 0 && dy === 0) return;
+            const dd = dx * dx + dy * dy;
+            const d = Math.sqrt(dd);
+            vx = dx / (d || 1);
+            vy = dy / (d || 1);
+            force = Math.min(dd * 10000, 1);
+        }
+        last = { x: norm.x, y: norm.y };
+        trail.push({ x: norm.x, y: norm.y, age: 0, force, vx, vy });
+    };
+    const update = () => {
+        clear();
+        for (let i = trail.length - 1; i >= 0; i--) {
+            const point = trail[i];
+            const f = point.force * speed * (1 - point.age / maxAge);
+            point.x += point.vx * f;
+            point.y += point.vy * f;
+            point.age++;
+            if (point.age > maxAge) trail.splice(i, 1);
+        }
+        for (let i = 0; i < trail.length; i++) drawPoint(trail[i]);
+        texture.needsUpdate = true;
+    };
+    return {
+        canvas,
+        texture,
+        addTouch,
+        update,
+        set radiusScale(v: number) {
+            radius = 0.1 * size * v;
+        },
+        get radiusScale() {
+            return radius / (0.1 * size);
+        },
+        size
+    };
+};
+
+const createLiquidEffect = (texture: THREE.Texture, opts?: { strength?: number; freq?: number }) => {
+    const fragment = `
+    uniform sampler2D uTexture;
+    uniform float uStrength;
+    uniform float uTime;
+    uniform float uFreq;
+
+    void mainUv(inout vec2 uv) {
+      vec4 tex = texture2D(uTexture, uv);
+      float vx = tex.r * 2.0 - 1.0;
+      float vy = tex.g * 2.0 - 1.0;
+      float intensity = tex.b;
+
+      float wave = 0.5 + 0.5 * sin(uTime * uFreq + intensity * 6.2831853);
+
+      float amt = uStrength * intensity * wave;
+
+      uv += vec2(vx, vy) * amt;
+    }
+    `;
+    return new Effect('LiquidEffect', fragment, {
+        uniforms: new Map<string, THREE.Uniform>([
+            ['uTexture', new THREE.Uniform(texture)],
+            ['uStrength', new THREE.Uniform(opts?.strength ?? 0.025)],
+            ['uTime', new THREE.Uniform(0)],
+            ['uFreq', new THREE.Uniform(opts?.freq ?? 4.5)]
+        ])
+    });
+};
+
+const SHAPE_MAP: Record<PixelBlastVariant, number> = {
+    square: 0,
+    circle: 1,
+    triangle: 2,
+    diamond: 3
+};
+
+const VERTEX_SRC = `
+void main() {
+  gl_Position = vec4(position, 1.0);
+}
+`;
+
+const FRAGMENT_SRC = `
+precision highp float;
+
+uniform vec3  uColor;
+uniform vec2  uResolution;
+uniform float uTime;
+uniform float uPixelSize;
+uniform float uScale;
+uniform float uDensity;
+uniform float uPixelJitter;
+uniform int   uEnableRipples;
+uniform float uRippleSpeed;
+uniform float uRippleThickness;
+uniform float uRippleIntensity;
+uniform float uEdgeFade;
+
+uniform int   uShapeType;
+const int SHAPE_SQUARE   = 0;
+const int SHAPE_CIRCLE   = 1;
+const int SHAPE_TRIANGLE = 2;
+const int SHAPE_DIAMOND  = 3;
+
+const int   MAX_CLICKS = 10;
+
+uniform vec2  uClickPos  [MAX_CLICKS];
+uniform float uClickTimes[MAX_CLICKS];
+
+out vec4 fragColor;
+
+float Bayer2(vec2 a) {
+  a = floor(a);
+  return fract(a.x / 2. + a.y * a.y * .75);
+}
+#define Bayer4(a) (Bayer2(.5*(a))*0.25 + Bayer2(a))
+#define Bayer8(a) (Bayer4(.5*(a))*0.25 + Bayer2(a))
+
+#define FBM_OCTAVES     5
+#define FBM_LACUNARITY  1.25
+#define FBM_GAIN        1.0
+
+float hash11(float n){ return fract(sin(n)*43758.5453); }
+
+float vnoise(vec3 p){
+  vec3 ip = floor(p);
+  vec3 fp = fract(p);
+  float n000 = hash11(dot(ip + vec3(0.0,0.0,0.0), vec3(1.0,57.0,113.0)));
+  float n100 = hash11(dot(ip + vec3(1.0,0.0,0.0), vec3(1.0,57.0,113.0)));
+  float n010 = hash11(dot(ip + vec3(0.0,1.0,0.0), vec3(1.0,57.0,113.0)));
+  float n110 = hash11(dot(ip + vec3(1.0,1.0,0.0), vec3(1.0,57.0,113.0)));
+  float n001 = hash11(dot(ip + vec3(0.0,0.0,1.0), vec3(1.0,57.0,113.0)));
+  float n101 = hash11(dot(ip + vec3(1.0,0.0,1.0), vec3(1.0,57.0,113.0)));
+  float n011 = hash11(dot(ip + vec3(0.0,1.0,1.0), vec3(1.0,57.0,113.0)));
+  float n111 = hash11(dot(ip + vec3(1.0,1.0,1.0), vec3(1.0,57.0,113.0)));
+  vec3 w = fp*fp*fp*(fp*(fp*6.0-15.0)+10.0);
+  float x00 = mix(n000, n100, w.x);
+  float x10 = mix(n010, n110, w.x);
+  float x01 = mix(n001, n101, w.x);
+  float x11 = mix(n011, n111, w.x);
+  float y0  = mix(x00, x10, w.y);
+  float y1  = mix(x01, x11, w.y);
+  return mix(y0, y1, w.z) * 2.0 - 1.0;
+}
+
+float fbm2(vec2 uv, float t){
+  vec3 p = vec3(uv * uScale, t);
+  float amp = 1.0;
+  float freq = 1.0;
+  float sum = 1.0;
+  for (int i = 0; i < FBM_OCTAVES; ++i){
+    sum  += amp * vnoise(p * freq);
+    freq *= FBM_LACUNARITY;
+    amp  *= FBM_GAIN;
+  }
+  return sum * 0.5 + 0.5;
+}
+
+float maskCircle(vec2 p, float cov){
+  float r = sqrt(cov) * .25;
+  float d = length(p - 0.5) - r;
+  float aa = 0.5 * fwidth(d);
+  return cov * (1.0 - smoothstep(-aa, aa, d * 2.0));
+}
+
+float maskTriangle(vec2 p, vec2 id, float cov){
+  bool flip = mod(id.x + id.y, 2.0) > 0.5;
+  if (flip) p.x = 1.0 - p.x;
+  float r = sqrt(cov);
+  float d  = p.y - r*(1.0 - p.x);
+  float aa = fwidth(d);
+  return cov * clamp(0.5 - d/aa, 0.0, 1.0);
+}
+
+float maskDiamond(vec2 p, float cov){
+  float r = sqrt(cov) * 0.564;
+  return step(abs(p.x - 0.49) + abs(p.y - 0.49), r);
+}
+
+void main(){
+  float pixelSize = uPixelSize;
+  vec2 fragCoord = gl_FragCoord.xy - uResolution * .5;
+  float aspectRatio = uResolution.x / uResolution.y;
+
+  vec2 pixelId = floor(fragCoord / pixelSize);
+  vec2 pixelUV = fract(fragCoord / pixelSize);
+
+  float cellPixelSize = 8.0 * pixelSize;
+  vec2 cellId = floor(fragCoord / cellPixelSize);
+  vec2 cellCoord = cellId * cellPixelSize;
+  vec2 uv = cellCoord / uResolution * vec2(aspectRatio, 1.0);
+
+  float base = fbm2(uv, uTime * 0.05);
+  base = base * 0.5 - 0.65;
+
+  float feed = base + (uDensity - 0.5) * 0.3;
+
+  float speed     = uRippleSpeed;
+  float thickness = uRippleThickness;
+  const float dampT     = 1.0;
+  const float dampR     = 10.0;
+
+  if (uEnableRipples == 1) {
+    for (int i = 0; i < MAX_CLICKS; ++i){
+      vec2 pos = uClickPos[i];
+      if (pos.x < 0.0) continue;
+      float cellPixelSize = 8.0 * pixelSize;
+      vec2 cuv = (((pos - uResolution * .5 - cellPixelSize * .5) / (uResolution))) * vec2(aspectRatio, 1.0);
+      float t = max(uTime - uClickTimes[i], 0.0);
+      float r = distance(uv, cuv);
+      float waveR = speed * t;
+      float ring  = exp(-pow((r - waveR) / thickness, 2.0));
+      float atten = exp(-dampT * t) * exp(-dampR * r);
+      feed = max(feed, ring * atten * uRippleIntensity);
+    }
+  }
+
+  float bayer = Bayer8(fragCoord / uPixelSize) - 0.5;
+  float bw = step(0.5, feed + bayer);
+
+  float h = fract(sin(dot(floor(fragCoord / uPixelSize), vec2(127.1, 311.7))) * 43758.5453);
+  float jitterScale = 1.0 + (h - 0.5) * uPixelJitter;
+  float coverage = bw * jitterScale;
+  float M;
+  if      (uShapeType == SHAPE_CIRCLE)   M = maskCircle (pixelUV, coverage);
+  else if (uShapeType == SHAPE_TRIANGLE) M = maskTriangle(pixelUV, pixelId, coverage);
+  else if (uShapeType == SHAPE_DIAMOND)  M = maskDiamond(pixelUV, coverage);
+  else                                   M = coverage;
+
+  if (uEdgeFade > 0.0) {
+    vec2 norm = gl_FragCoord.xy / uResolution;
+    float edge = min(min(norm.x, norm.y), min(1.0 - norm.x, 1.0 - norm.y));
+    float fade = smoothstep(0.0, uEdgeFade, edge);
+    M *= fade;
+  }
+
+  vec3 color = uColor;
+
+  // sRGB gamma correction - convert linear to sRGB for accurate color output
+  vec3 srgbColor = mix(
+    color * 12.92,
+    1.055 * pow(color, vec3(1.0 / 2.4)) - 0.055,
+    step(0.0031308, color)
+  );
+
+  fragColor = vec4(srgbColor, M);
+}
+`;
+
+const MAX_CLICKS = 10;
+
+const PixelBlast: React.FC<PixelBlastProps> = ({
+    variant = 'square',
+    pixelSize = 3,
+    color = '#B497CF',
+    backgroundColor,
+    lightModeBackgroundColor = '#FFFFFF',
+    className,
+    style,
+    antialias = true,
+    patternScale = 2,
+    patternDensity = 1,
+    liquid = false,
+    liquidStrength = 0.1,
+    liquidRadius = 1,
+    pixelSizeJitter = 0,
+    enableRipples = true,
+    rippleIntensityScale = 1,
+    rippleThickness = 0.1,
+    rippleSpeed = 0.3,
+    liquidWobbleSpeed = 4.5,
+    autoPauseOffscreen = true,
+    speed = 0.5,
+    transparent = true,
+    edgeFade = 0.5,
+    noiseAmount = 0
+}) => {
+    const containerRef = useRef<HTMLDivElement | null>(null);
+    const visibilityRef = useRef({ visible: true });
+    const speedRef = useRef(speed);
+
+    const threeRef = useRef<{
+        renderer: THREE.WebGLRenderer;
+        scene: THREE.Scene;
+        camera: THREE.OrthographicCamera;
+        material: THREE.ShaderMaterial;
+        clock: THREE.Clock;
+        clickIx: number;
+        uniforms: {
+            uResolution: { value: THREE.Vector2 };
+            uTime: { value: number };
+            uColor: { value: THREE.Color };
+            uClickPos: { value: THREE.Vector2[] };
+            uClickTimes: { value: Float32Array };
+            uShapeType: { value: number };
+            uPixelSize: { value: number };
+            uScale: { value: number };
+            uDensity: { value: number };
+            uPixelJitter: { value: number };
+            uEnableRipples: { value: number };
+            uRippleSpeed: { value: number };
+            uRippleThickness: { value: number };
+            uRippleIntensity: { value: number };
+            uEdgeFade: { value: number };
+        };
+        resizeObserver?: ResizeObserver;
+        raf?: number;
+        quad?: THREE.Mesh<THREE.PlaneGeometry, THREE.ShaderMaterial>;
+        timeOffset?: number;
+        composer?: EffectComposer;
+        touch?: ReturnType<typeof createTouchTexture>;
+        liquidEffect?: Effect;
+        observer?: MutationObserver;
+    } | null>(null);
+    const prevConfigRef = useRef<ReinitConfig | null>(null);
+
+    useEffect(() => {
+        const container = containerRef.current;
+        if (!container || !autoPauseOffscreen) {
+            visibilityRef.current.visible = true;
+            return;
+        }
+
+        return createAnimationVisibilityController(container, (isVisible) => {
+            visibilityRef.current.visible = isVisible;
+        });
+    }, [autoPauseOffscreen]);
+
+    useEffect(() => {
+        const container = containerRef.current;
+        if (!container) return;
+        speedRef.current = speed;
+        const computeClear = () => {
+            const isLight =
+                typeof document !== 'undefined' &&
+                !document.documentElement.classList.contains('dark');
+            if (isLight) return { color: new THREE.Color(lightModeBackgroundColor), alpha: 1 };
+            if (backgroundColor) return { color: new THREE.Color(backgroundColor), alpha: 1 };
+            if (transparent) return { color: undefined, alpha: 0 };
+            return { color: new THREE.Color(0x000000), alpha: 1 };
+        };
+
+        const applyClearColor = (renderer: THREE.WebGLRenderer) => {
+            const { color, alpha } = computeClear();
+            if (color) renderer.setClearColor(color, alpha ?? 1);
+            else {
+                renderer.setClearColor(0x000000, alpha ?? 0);
+                renderer.setClearAlpha(alpha ?? 0);
+            }
+        };
+        const needsReinitKeys: (keyof ReinitConfig)[] = ['antialias', 'liquid', 'noiseAmount'];
+        const cfg: ReinitConfig = { antialias, liquid, noiseAmount };
+        let mustReinit = false;
+        if (!threeRef.current) mustReinit = true;
+        else if (prevConfigRef.current) {
+            for (const k of needsReinitKeys)
+                if (prevConfigRef.current[k] !== cfg[k]) {
+                    mustReinit = true;
+                    break;
+                }
+        }
+        if (mustReinit) {
+            if (threeRef.current) {
+                const t = threeRef.current;
+                t.resizeObserver?.disconnect();
+                t.observer?.disconnect();
+                cancelAnimationFrame(t.raf!);
+                t.quad?.geometry.dispose();
+                t.material.dispose();
+                t.composer?.dispose();
+                t.renderer.dispose();
+                t.renderer.forceContextLoss();
+                if (t.renderer.domElement.parentElement === container) container.removeChild(t.renderer.domElement);
+                threeRef.current = null;
+            }
+            const canvas = document.createElement('canvas');
+            const renderer = new THREE.WebGLRenderer({
+                canvas,
+                antialias,
+                alpha: true,
+                powerPreference: 'high-performance'
+            });
+            renderer.domElement.style.width = '100%';
+            renderer.domElement.style.height = '100%';
+            renderer.setPixelRatio(Math.min(window.devicePixelRatio || 1, 1.25));
+            container.appendChild(renderer.domElement);
+            applyClearColor(renderer);
+            const uniforms = {
+                uResolution: { value: new THREE.Vector2(0, 0) },
+                uTime: { value: 0 },
+                uColor: { value: new THREE.Color(color) },
+                uClickPos: {
+                    value: Array.from({ length: MAX_CLICKS }, () => new THREE.Vector2(-1, -1))
+                },
+                uClickTimes: { value: new Float32Array(MAX_CLICKS) },
+                uShapeType: { value: SHAPE_MAP[variant] ?? 0 },
+                uPixelSize: { value: pixelSize * renderer.getPixelRatio() },
+                uScale: { value: patternScale },
+                uDensity: { value: patternDensity },
+                uPixelJitter: { value: pixelSizeJitter },
+                uEnableRipples: { value: enableRipples ? 1 : 0 },
+                uRippleSpeed: { value: rippleSpeed },
+                uRippleThickness: { value: rippleThickness },
+                uRippleIntensity: { value: rippleIntensityScale },
+                uEdgeFade: { value: edgeFade }
+            };
+            const scene = new THREE.Scene();
+            const camera = new THREE.OrthographicCamera(-1, 1, 1, -1, 0, 1);
+            const material = new THREE.ShaderMaterial({
+                vertexShader: VERTEX_SRC,
+                fragmentShader: FRAGMENT_SRC,
+                uniforms,
+                transparent: true,
+                depthTest: false,
+                depthWrite: false,
+                glslVersion: THREE.GLSL3
+            });
+
+            const quadGeom = new THREE.PlaneGeometry(2, 2);
+            const quad = new THREE.Mesh(quadGeom, material);
+            scene.add(quad);
+            const clock = new THREE.Clock();
+            const setSize = () => {
+                const w = container.clientWidth || 1;
+                const h = container.clientHeight || 1;
+                renderer.setSize(w, h, false);
+                uniforms.uResolution.value.set(renderer.domElement.width, renderer.domElement.height);
+                if (threeRef.current?.composer)
+                    threeRef.current.composer.setSize(renderer.domElement.width, renderer.domElement.height);
+                uniforms.uPixelSize.value = pixelSize * renderer.getPixelRatio();
+            };
+            setSize();
+            const ro = new ResizeObserver(setSize);
+            ro.observe(container);
+            let observer: MutationObserver | undefined;
+            if (typeof document !== 'undefined') {
+                observer = new MutationObserver(() => applyClearColor(renderer));
+                observer.observe(document.documentElement, {
+                    attributes: true,
+                    attributeFilter: ['class']
+                });
+            }
+            const randomFloat = (): number => {
+                if (typeof window !== 'undefined' && window.crypto?.getRandomValues) {
+                    const u32 = new Uint32Array(1);
+                    window.crypto.getRandomValues(u32);
+                    return u32[0] / 0xffffffff;
+                }
+                return Math.random();
+            };
+            const timeOffset = randomFloat() * 1000;
+            let composer: EffectComposer | undefined;
+            let touch: ReturnType<typeof createTouchTexture> | undefined;
+            let liquidEffect: Effect | undefined;
+            if (liquid) {
+                touch = createTouchTexture();
+                touch.radiusScale = liquidRadius;
+                composer = new EffectComposer(renderer);
+                const renderPass = new RenderPass(scene, camera);
+                liquidEffect = createLiquidEffect(touch.texture, {
+                    strength: liquidStrength,
+                    freq: liquidWobbleSpeed
+                });
+                const effectPass = new EffectPass(camera, liquidEffect);
+                effectPass.renderToScreen = true;
+                composer.addPass(renderPass);
+                composer.addPass(effectPass);
+            }
+            if (noiseAmount > 0) {
+                if (!composer) {
+                    composer = new EffectComposer(renderer);
+                    composer.addPass(new RenderPass(scene, camera));
+                }
+                const noiseEffect = new Effect(
+                    'NoiseEffect',
+                    `uniform float uTime; uniform float uAmount; float hash(vec2 p){ return fract(sin(dot(p, vec2(127.1,311.7))) * 43758.5453);} void mainUv(inout vec2 uv){} void mainImage(const in vec4 inputColor,const in vec2 uv,out vec4 outputColor){ float n=hash(floor(uv*vec2(1920.0,1080.0))+floor(uTime*60.0)); float g=(n-0.5)*uAmount; outputColor=inputColor+vec4(vec3(g),0.0);} `,
+                    {
+                        uniforms: new Map<string, THREE.Uniform>([
+                            ['uTime', new THREE.Uniform(0)],
+                            ['uAmount', new THREE.Uniform(noiseAmount)]
+                        ])
+                    }
+                );
+                const noisePass = new EffectPass(camera, noiseEffect);
+                noisePass.renderToScreen = true;
+                if (composer && composer.passes.length > 0) {
+                    composer.passes.forEach(p => {
+                        const pass = p as { renderToScreen?: boolean };
+                        pass.renderToScreen = false;
+                    });
+                }
+                composer.addPass(noisePass);
+            }
+            if (composer) composer.setSize(renderer.domElement.width, renderer.domElement.height);
+            const mapToPixels = (e: PointerEvent) => {
+                const rect = renderer.domElement.getBoundingClientRect();
+                const scaleX = renderer.domElement.width / rect.width;
+                const scaleY = renderer.domElement.height / rect.height;
+                const fx = (e.clientX - rect.left) * scaleX;
+                const fy = (rect.height - (e.clientY - rect.top)) * scaleY;
+                return {
+                    fx,
+                    fy,
+                    w: renderer.domElement.width,
+                    h: renderer.domElement.height
+                };
+            };
+            const onPointerDown = (e: PointerEvent) => {
+                const { fx, fy } = mapToPixels(e);
+                const ix = threeRef.current?.clickIx ?? 0;
+                uniforms.uClickPos.value[ix].set(fx, fy);
+                uniforms.uClickTimes.value[ix] = uniforms.uTime.value;
+                if (threeRef.current) threeRef.current.clickIx = (ix + 1) % MAX_CLICKS;
+            };
+            const onPointerMove = (e: PointerEvent) => {
+                if (!touch) return;
+                const { fx, fy, w, h } = mapToPixels(e);
+                touch.addTouch({ x: fx / w, y: fy / h });
+            };
+            renderer.domElement.addEventListener('pointerdown', onPointerDown, {
+                passive: true
+            });
+            renderer.domElement.addEventListener('pointermove', onPointerMove, {
+                passive: true
+            });
+            let raf = 0;
+            const animate = () => {
+                if (autoPauseOffscreen && !visibilityRef.current.visible) {
+                    raf = requestAnimationFrame(animate);
+                    return;
+                }
+                uniforms.uTime.value = timeOffset + clock.getElapsedTime() * speedRef.current;
+                if (liquidEffect) {
+                    const liqEffect = liquidEffect as Effect & { uniforms: Map<string, THREE.Uniform> };
+                    const timeUniform = liqEffect.uniforms.get('uTime');
+                    if (timeUniform) timeUniform.value = uniforms.uTime.value;
+                }
+                if (composer) {
+                    if (touch) touch.update();
+                    composer.passes.forEach(p => {
+                        const pass = p as { effects?: Array<Effect & { uniforms: Map<string, THREE.Uniform> }> };
+                        if (pass.effects) {
+                            pass.effects.forEach(eff => {
+                                const timeUniform = eff.uniforms?.get('uTime');
+                                if (timeUniform) timeUniform.value = uniforms.uTime.value;
+                            });
+                        }
+                    });
+                    composer.render();
+                } else renderer.render(scene, camera);
+                raf = requestAnimationFrame(animate);
+            };
+            raf = requestAnimationFrame(animate);
+            threeRef.current = {
+                renderer,
+                scene,
+                camera,
+                material,
+                clock,
+                clickIx: 0,
+                uniforms,
+                resizeObserver: ro,
+                raf,
+                quad,
+                timeOffset,
+                composer,
+                touch,
+                liquidEffect,
+                observer
+            };
+        } else {
+            const t = threeRef.current!;
+            t.uniforms.uShapeType.value = SHAPE_MAP[variant] ?? 0;
+            t.uniforms.uPixelSize.value = pixelSize * t.renderer.getPixelRatio();
+            t.uniforms.uColor.value.set(color);
+            t.uniforms.uScale.value = patternScale;
+            t.uniforms.uDensity.value = patternDensity;
+            t.uniforms.uPixelJitter.value = pixelSizeJitter;
+            t.uniforms.uEnableRipples.value = enableRipples ? 1 : 0;
+            t.uniforms.uRippleIntensity.value = rippleIntensityScale;
+            t.uniforms.uRippleThickness.value = rippleThickness;
+            t.uniforms.uRippleSpeed.value = rippleSpeed;
+            t.uniforms.uEdgeFade.value = edgeFade;
+            applyClearColor(t.renderer);
+            if (t.liquidEffect) {
+                const liqEffect = t.liquidEffect as Effect & { uniforms: Map<string, THREE.Uniform> };
+                const uStrength = liqEffect.uniforms.get('uStrength');
+                if (uStrength) uStrength.value = liquidStrength;
+                const uFreq = liqEffect.uniforms.get('uFreq');
+                if (uFreq) uFreq.value = liquidWobbleSpeed;
+            }
+            if (t.touch) t.touch.radiusScale = liquidRadius;
+        }
+        prevConfigRef.current = cfg;
+        return () => {
+            if (threeRef.current && mustReinit) return;
+            if (!threeRef.current) return;
+            const t = threeRef.current;
+            t.resizeObserver?.disconnect();
+            t.observer?.disconnect();
+            cancelAnimationFrame(t.raf!);
+            t.quad?.geometry.dispose();
+            t.material.dispose();
+            t.composer?.dispose();
+            t.renderer.dispose();
+            t.renderer.forceContextLoss();
+            if (t.renderer.domElement.parentElement === container) container.removeChild(t.renderer.domElement);
+            threeRef.current = null;
+        };
+    }, [
+        antialias,
+        liquid,
+        noiseAmount,
+        pixelSize,
+        patternScale,
+        patternDensity,
+        enableRipples,
+        rippleIntensityScale,
+        rippleThickness,
+        rippleSpeed,
+        pixelSizeJitter,
+        edgeFade,
+        transparent,
+        liquidStrength,
+        liquidRadius,
+        liquidWobbleSpeed,
+        autoPauseOffscreen,
+        variant,
+        backgroundColor,
+        lightModeBackgroundColor,
+        color,
+        speed
+    ]);
+
+    return (
+        <div
+            ref={containerRef}
+            className={`pixel-blast-container w-full h-full ${className ?? ''}`}
+            style={style}
+            aria-label="PixelBlast interactive background"
+        />
+    );
+};
+
+export default PixelBlast;
diff --git a/src/components/ui/SoftAurora.tsx b/src/components/ui/SoftAurora.tsx
new file mode 100644
index 0000000..f0f5e59
--- /dev/null
+++ b/src/components/ui/SoftAurora.tsx
@@ -0,0 +1,277 @@
+import { Mesh, Program, Renderer, Triangle } from 'ogl';
+import { useEffect, useRef } from 'react';
+
+interface SoftAuroraProps {
+  speed?: number;
+  scale?: number;
+  brightness?: number;
+  color1?: string;
+  color2?: string;
+  noiseFrequency?: number;
+  noiseAmplitude?: number;
+  bandHeight?: number;
+  bandSpread?: number;
+  octaveDecay?: number;
+  layerOffset?: number;
+  colorSpeed?: number;
+  enableMouseInteraction?: boolean;
+  mouseInfluence?: number;
+}
+
+function hexToVec3(hex: string): [number, number, number] {
+  const h = hex.replace('#', '');
+  return [
+    parseInt(h.slice(0, 2), 16) / 255,
+    parseInt(h.slice(2, 4), 16) / 255,
+    parseInt(h.slice(4, 6), 16) / 255
+  ];
+}
+
+const vertexShader = `
+attribute vec2 uv;
+attribute vec2 position;
+varying vec2 vUv;
+void main() {
+  vUv = uv;
+  gl_Position = vec4(position, 0, 1);
+}
+`;
+
+const fragmentShader = `
+precision highp float;
+
+uniform float uTime;
+uniform vec3 uResolution;
+uniform float uSpeed;
+uniform float uScale;
+uniform float uBrightness;
+uniform vec3 uColor1;
+uniform vec3 uColor2;
+uniform float uNoiseFreq;
+uniform float uNoiseAmp;
+uniform float uBandHeight;
+uniform float uBandSpread;
+uniform float uOctaveDecay;
+uniform float uLayerOffset;
+uniform float uColorSpeed;
+uniform vec2 uMouse;
+uniform float uMouseInfluence;
+uniform bool uEnableMouse;
+
+#define TAU 6.28318
+
+vec3 gradientHash(vec3 p) {
+  p = vec3(
+    dot(p, vec3(127.1, 311.7, 234.6)),
+    dot(p, vec3(269.5, 183.3, 198.3)),
+    dot(p, vec3(169.5, 283.3, 156.9))
+  );
+  vec3 h = fract(sin(p) * 43758.5453123);
+  float phi = acos(2.0 * h.x - 1.0);
+  float theta = TAU * h.y;
+  return vec3(cos(theta) * sin(phi), sin(theta) * cos(phi), cos(phi));
+}
+
+float quinticSmooth(float t) {
+  float t2 = t * t;
+  float t3 = t * t2;
+  return 6.0 * t3 * t2 - 15.0 * t2 * t2 + 10.0 * t3;
+}
+
+vec3 cosineGradient(float t, vec3 a, vec3 b, vec3 c, vec3 d) {
+  return a + b * cos(TAU * (c * t + d));
+}
+
+float perlin3D(float amplitude, float frequency, float px, float py, float pz) {
+  float x = px * frequency;
+  float y = py * frequency;
+
+  float fx = floor(x); float fy = floor(y); float fz = floor(pz);
+  float cx = ceil(x);  float cy = ceil(y);  float cz = ceil(pz);
+
+  vec3 g000 = gradientHash(vec3(fx, fy, fz));
+  vec3 g100 = gradientHash(vec3(cx, fy, fz));
+  vec3 g010 = gradientHash(vec3(fx, cy, fz));
+  vec3 g110 = gradientHash(vec3(cx, cy, fz));
+  vec3 g001 = gradientHash(vec3(fx, fy, cz));
+  vec3 g101 = gradientHash(vec3(cx, fy, cz));
+  vec3 g011 = gradientHash(vec3(fx, cy, cz));
+  vec3 g111 = gradientHash(vec3(cx, cy, cz));
+
+  float d000 = dot(g000, vec3(x - fx, y - fy, pz - fz));
+  float d100 = dot(g100, vec3(x - cx, y - fy, pz - fz));
+  float d010 = dot(g010, vec3(x - fx, y - cy, pz - fz));
+  float d110 = dot(g110, vec3(x - cx, y - cy, pz - fz));
+  float d001 = dot(g001, vec3(x - fx, y - fy, pz - cz));
+  float d101 = dot(g101, vec3(x - cx, y - fy, pz - cz));
+  float d011 = dot(g011, vec3(x - fx, y - cy, pz - cz));
+  float d111 = dot(g111, vec3(x - cx, y - cy, pz - cz));
+
+  float sx = quinticSmooth(x - fx);
+  float sy = quinticSmooth(y - fy);
+  float sz = quinticSmooth(pz - fz);
+
+  float lx00 = mix(d000, d100, sx);
+  float lx10 = mix(d010, d110, sx);
+  float lx01 = mix(d001, d101, sx);
+  float lx11 = mix(d011, d111, sx);
+
+  float ly0 = mix(lx00, lx10, sy);
+  float ly1 = mix(lx01, lx11, sy);
+
+  return amplitude * mix(ly0, ly1, sz);
+}
+
+float auroraGlow(float t, vec2 shift) {
+  vec2 uv = gl_FragCoord.xy / uResolution.y;
+  uv += shift;
+
+  float noiseVal = 0.0;
+  float freq = uNoiseFreq;
+  float amp = uNoiseAmp;
+  vec2 samplePos = uv * uScale;
+
+  for (float i = 0.0; i < 3.0; i += 1.0) {
+    noiseVal += perlin3D(amp, freq, samplePos.x, samplePos.y, t);
+    amp *= uOctaveDecay;
+    freq *= 2.0;
+  }
+
+  float yBand = uv.y * 10.0 - uBandHeight * 10.0;
+  return 0.3 * max(exp(uBandSpread * (1.0 - 1.1 * abs(noiseVal + yBand))), 0.0);
+}
+
+void main() {
+  vec2 uv = gl_FragCoord.xy / uResolution.xy;
+  float t = uSpeed * 0.4 * uTime;
+
+  vec2 shift = vec2(0.0);
+  if (uEnableMouse) {
+    shift = (uMouse - 0.5) * uMouseInfluence;
+  }
+
+  vec3 col = vec3(0.0);
+  col += 0.99 * auroraGlow(t, shift) * cosineGradient(uv.x + uTime * uSpeed * 0.2 * uColorSpeed, vec3(0.5), vec3(0.5), vec3(1.0), vec3(0.3, 0.20, 0.20)) * uColor1;
+  col += 0.99 * auroraGlow(t + uLayerOffset, shift) * cosineGradient(uv.x + uTime * uSpeed * 0.1 * uColorSpeed, vec3(0.5), vec3(0.5), vec3(2.0, 1.0, 0.0), vec3(0.5, 0.20, 0.25)) * uColor2;
+
+  col *= uBrightness;
+  float alpha = clamp(length(col), 0.0, 1.0);
+  gl_FragColor = vec4(col, alpha);
+}
+`;
+
+export default function SoftAurora({
+  speed = 0.6,
+  scale = 1.5,
+  brightness = 1.0,
+  color1 = '#f7f7f7',
+  color2 = '#e100ff',
+  noiseFrequency = 2.5,
+  noiseAmplitude = 1.0,
+  bandHeight = 0.5,
+  bandSpread = 1.0,
+  octaveDecay = 0.1,
+  layerOffset = 0,
+  colorSpeed = 1.0,
+  enableMouseInteraction = true,
+  mouseInfluence = 0.25
+}: SoftAuroraProps) {
+  const containerRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    if (!containerRef.current) return;
+    const container = containerRef.current;
+    const renderer = new Renderer({ alpha: true, premultipliedAlpha: false });
+    const gl = renderer.gl;
+    gl.clearColor(0, 0, 0, 0);
+    renderer.setSize(container.offsetWidth, container.offsetHeight);
+
+    const currentMouse = [0.5, 0.5];
+    let targetMouse = [0.5, 0.5];
+
+    function handleMouseMove(e: MouseEvent) {
+      const rect = gl.canvas.getBoundingClientRect();
+      targetMouse = [
+        (e.clientX - rect.left) / rect.width,
+        1.0 - (e.clientY - rect.top) / rect.height
+      ];
+    }
+
+    function handleMouseLeave() {
+      targetMouse = [0.5, 0.5];
+    }
+
+    const geometry = new Triangle(gl);
+    const program = new Program(gl, {
+      vertex: vertexShader,
+      fragment: fragmentShader,
+      uniforms: {
+        uTime: { value: 0 },
+        uResolution: { value: [gl.canvas.width, gl.canvas.height, gl.canvas.width / gl.canvas.height] },
+        uSpeed: { value: speed },
+        uScale: { value: scale },
+        uBrightness: { value: brightness },
+        uColor1: { value: hexToVec3(color1) },
+        uColor2: { value: hexToVec3(color2) },
+        uNoiseFreq: { value: noiseFrequency },
+        uNoiseAmp: { value: noiseAmplitude },
+        uBandHeight: { value: bandHeight },
+        uBandSpread: { value: bandSpread },
+        uOctaveDecay: { value: octaveDecay },
+        uLayerOffset: { value: layerOffset },
+        uColorSpeed: { value: colorSpeed },
+        uMouse: { value: new Float32Array([0.5, 0.5]) },
+        uMouseInfluence: { value: mouseInfluence },
+        uEnableMouse: { value: enableMouseInteraction }
+      }
+    });
+
+    function resize() {
+      renderer.setSize(container.offsetWidth, container.offsetHeight);
+      program.uniforms.uResolution.value = [gl.canvas.width, gl.canvas.height, gl.canvas.width / gl.canvas.height];
+    }
+    window.addEventListener('resize', resize);
+    resize();
+
+    const mesh = new Mesh(gl, { geometry, program });
+    container.appendChild(gl.canvas);
+
+    if (enableMouseInteraction) {
+      gl.canvas.addEventListener('mousemove', handleMouseMove);
+      gl.canvas.addEventListener('mouseleave', handleMouseLeave);
+    }
+
+    let animationFrameId: number;
+
+    function update(time: number) {
+      animationFrameId = requestAnimationFrame(update);
+      program.uniforms.uTime.value = time * 0.001;
+
+      if (enableMouseInteraction) {
+        currentMouse[0] += 0.05 * (targetMouse[0] - currentMouse[0]);
+        currentMouse[1] += 0.05 * (targetMouse[1] - currentMouse[1]);
+        program.uniforms.uMouse.value[0] = currentMouse[0];
+        program.uniforms.uMouse.value[1] = currentMouse[1];
+      } else {
+        program.uniforms.uMouse.value[0] = 0.5;
+        program.uniforms.uMouse.value[1] = 0.5;
+      }
+
+      renderer.render({ scene: mesh });
+    }
+    animationFrameId = requestAnimationFrame(update);
+
+    return () => {
+      cancelAnimationFrame(animationFrameId);
+      window.removeEventListener('resize', resize);
+      if (enableMouseInteraction) {
+        gl.canvas.removeEventListener('mousemove', handleMouseMove);
+        gl.canvas.removeEventListener('mouseleave', handleMouseLeave);
+      }
+      container.removeChild(gl.canvas);
+      gl.getExtension('WEBGL_lose_context')?.loseContext();
+    };
+  }, [speed, scale, brightness, color1, color2, noiseFrequency, noiseAmplitude, bandHeight, bandSpread, octaveDecay, layerOffset, colorSpeed, enableMouseInteraction, mouseInfluence]);
+
+  return <div ref={containerRef} className="w-full h-full" />;
+}
diff --git a/src/components/ui/TextPressure.tsx b/src/components/ui/TextPressure.tsx
new file mode 100644
index 0000000..d583cc2
--- /dev/null
+++ b/src/components/ui/TextPressure.tsx
@@ -0,0 +1,317 @@
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { createAnimationVisibilityController } from '../../lib/animationVisibility';
+
+interface TextPressureProps {
+    text?: string;
+    fontFamily?: string;
+    fontUrl?: string;
+    width?: boolean;
+    weight?: boolean;
+    italic?: boolean;
+    alpha?: boolean;
+    flex?: boolean;
+    stroke?: boolean;
+    scale?: boolean;
+    textColor?: string;
+    strokeColor?: string;
+    className?: string;
+    letterSpacing?: number;
+    minFontSize?: number;
+    maxFontSize?: number;
+    classNameTextPressure?: string;
+}
+
+const dist = (a: { x: number; y: number }, b: { x: number; y: number }) => {
+    const dx = b.x - a.x;
+    const dy = b.y - a.y;
+    return Math.sqrt(dx * dx + dy * dy);
+};
+
+const getAttr = (distance: number, maxDist: number, minVal: number, maxVal: number) => {
+    const val = maxVal - Math.abs((maxVal * distance) / maxDist);
+    return Math.max(minVal, val + minVal);
+};
+
+/** Scoped class prefix — avoids global `.flex` / `.stroke` collisions */
+const TP = 'text-pressure';
+
+const debounce = <Args extends unknown[]>(func: (...args: Args) => void, delay: number) => {
+    let timeoutId: ReturnType<typeof setTimeout>;
+    return (...args: Args) => {
+        clearTimeout(timeoutId);
+        timeoutId = setTimeout(() => {
+            func(...args);
+        }, delay);
+    };
+};
+
+const TextPressure: React.FC<TextPressureProps> = ({
+    text = 'Compressa',
+    fontFamily = 'Compressa VF',
+    fontUrl = 'https://res.cloudinary.com/dr6lvwubh/raw/upload/v1529908256/CompressaPRO-GX.woff2',
+    width = true,
+    weight = true,
+    italic = true,
+    alpha = false,
+    flex = true,
+    stroke = false,
+    scale = false,
+    textColor = '#FFFFFF',
+    strokeColor = '#FF0000',
+    letterSpacing = 0,
+    className = '',
+    minFontSize = 16,
+    maxFontSize = 300,
+    classNameTextPressure = ''
+}) => {
+    const containerRef = useRef<HTMLDivElement | null>(null);
+    const titleRef = useRef<HTMLHeadingElement | null>(null);
+    const spansRef = useRef<(HTMLSpanElement | null)[]>([]);
+
+    const mouseRef = useRef({ x: 0, y: 0 });
+    const cursorRef = useRef({ x: 0, y: 0 });
+
+    const [fontSize, setFontSize] = useState(minFontSize);
+    const [scaleY, setScaleY] = useState(1);
+    const [lineHeight, setLineHeight] = useState(1);
+
+    const chars = text.split('');
+
+    useEffect(() => {
+        const handleMouseMove = (e: MouseEvent) => {
+            cursorRef.current.x = e.clientX;
+            cursorRef.current.y = e.clientY;
+        };
+        const handleTouchMove = (e: TouchEvent) => {
+            const t = e.touches[0];
+            cursorRef.current.x = t.clientX;
+            cursorRef.current.y = t.clientY;
+        };
+
+        window.addEventListener('mousemove', handleMouseMove);
+        window.addEventListener('touchmove', handleTouchMove, { passive: true });
+
+        if (containerRef.current) {
+            const { left, top, width, height } = containerRef.current.getBoundingClientRect();
+            mouseRef.current.x = left + width / 2;
+            mouseRef.current.y = top + height / 2;
+            cursorRef.current.x = mouseRef.current.x;
+            cursorRef.current.y = mouseRef.current.y;
+        }
+
+        return () => {
+            window.removeEventListener('mousemove', handleMouseMove);
+            window.removeEventListener('touchmove', handleTouchMove);
+        };
+    }, []);
+
+    const setSize = useCallback(() => {
+        if (!containerRef.current || !titleRef.current) return;
+
+        const { width: containerW, height: containerH } = containerRef.current.getBoundingClientRect();
+        const viewportW = typeof window !== 'undefined' ? window.innerWidth : containerW;
+        const isSmall = viewportW <= 900;
+        const effectiveMax = isSmall ? Math.min(maxFontSize, 96) : maxFontSize;
+
+        /** `letter-spacing` adds horizontal space; sizing from `containerW` alone overflows with nowrap. */
+        const letterExtra = letterSpacing * Math.max(0, chars.length - 1);
+        const widthForGlyphs = Math.max(1, containerW - letterExtra);
+        let newFontSize = widthForGlyphs / (chars.length / 2);
+        newFontSize = Math.max(newFontSize, minFontSize);
+
+        setFontSize(Math.min(newFontSize, effectiveMax));
+        setScaleY(1);
+        setLineHeight(1);
+
+        requestAnimationFrame(() => {
+            if (!titleRef.current) return;
+            const textRect = titleRef.current.getBoundingClientRect();
+
+            if (!isSmall && scale && textRect.height > 0) {
+                const yRatio = containerH / textRect.height;
+                setScaleY(yRatio);
+                setLineHeight(yRatio);
+            }
+        });
+    }, [chars.length, letterSpacing, minFontSize, maxFontSize, scale]);
+
+    useEffect(() => {
+        const debouncedSetSize = debounce(setSize, 100);
+        debouncedSetSize();
+        window.addEventListener('resize', debouncedSetSize);
+        return () => window.removeEventListener('resize', debouncedSetSize);
+    }, [setSize]);
+
+    useEffect(() => {
+        let rafId = 0;
+        let canAnimate = true;
+
+        const stopAnimation = () => {
+            if (rafId) {
+                cancelAnimationFrame(rafId);
+                rafId = 0;
+            }
+        };
+
+        const scheduleAnimation = () => {
+            if (!rafId && canAnimate) {
+                rafId = requestAnimationFrame(animate);
+            }
+        };
+
+        const animate = () => {
+            rafId = 0;
+            if (!canAnimate) return;
+
+            mouseRef.current.x += (cursorRef.current.x - mouseRef.current.x) / 15;
+            mouseRef.current.y += (cursorRef.current.y - mouseRef.current.y) / 15;
+
+            if (titleRef.current) {
+                const titleRect = titleRef.current.getBoundingClientRect();
+                const maxDist = titleRect.width / 2;
+
+                spansRef.current.forEach(span => {
+                    if (!span) return;
+
+                    const rect = span.getBoundingClientRect();
+                    const charCenter = {
+                        x: rect.x + rect.width / 2,
+                        y: rect.y + rect.height / 2
+                    };
+
+                    const d = dist(mouseRef.current, charCenter);
+
+                    const wdth = width ? Math.floor(getAttr(d, maxDist, 5, 200)) : 100;
+                    const wght = weight ? Math.floor(getAttr(d, maxDist, 100, 900)) : 400;
+                    const italVal = italic ? getAttr(d, maxDist, 0, 1).toFixed(2) : '0';
+                    const alphaVal = alpha ? getAttr(d, maxDist, 0, 1).toFixed(2) : '1';
+
+                    const newFontVariationSettings = `'wght' ${wght}, 'wdth' ${wdth}, 'ital' ${italVal}`;
+
+                    if (span.style.fontVariationSettings !== newFontVariationSettings) {
+                        span.style.fontVariationSettings = newFontVariationSettings;
+                    }
+                    if (alpha && span.style.opacity !== alphaVal) {
+                        span.style.opacity = alphaVal;
+                    }
+                });
+            }
+
+            scheduleAnimation();
+        };
+
+        const cleanupVisibility = containerRef.current
+            ? createAnimationVisibilityController(containerRef.current, (isVisible) => {
+                canAnimate = isVisible;
+                if (isVisible) {
+                    scheduleAnimation();
+                } else {
+                    stopAnimation();
+                }
+            })
+            : undefined;
+
+        scheduleAnimation();
+
+        return () => {
+            stopAnimation();
+            cleanupVisibility?.();
+        };
+    }, [width, weight, italic, alpha]);
+
+    const styleElement = useMemo(() => {
+        return (
+            <style>{`
+        @font-face {
+          font-family: '${fontFamily}';
+          src: url('${fontUrl}');
+          font-style: normal;
+        }
+
+        .${TP} .${TP}__flex {
+          display: flex;
+          justify-content: space-between;
+        }
+
+        .${TP} .${TP}__stroke span {
+          position: relative;
+          color: ${textColor};
+        }
+        .${TP} .${TP}__stroke span::after {
+          content: attr(data-char);
+          position: absolute;
+          left: 0;
+          top: 0;
+          color: transparent;
+          z-index: -1;
+          -webkit-text-stroke-width: 3px;
+          -webkit-text-stroke-color: ${strokeColor};
+        }
+
+        .${TP} .${TP}__title {
+          letter-spacing: ${letterSpacing}px;
+          color: ${textColor};
+        }
+      `}</style>
+        );
+    }, [fontFamily, fontUrl, textColor, strokeColor, letterSpacing]);
+
+    const dynamicClassName = [
+        className,
+        flex ? `${TP}__flex` : '',
+        stroke ? `${TP}__stroke` : ''
+    ]
+        .filter(Boolean)
+        .join(' ');
+
+    return (
+        <div
+            ref={containerRef}
+            className={TP}
+            style={{
+                position: 'relative',
+                width: '100%',
+                height: '100%',
+                background: 'transparent'
+            }}
+        >
+            {styleElement}
+            <span
+                ref={titleRef}
+                className={`${TP}__title ${dynamicClassName} ${classNameTextPressure}`}
+                style={{
+                    fontFamily,
+                    textTransform: 'uppercase',
+                    fontSize: fontSize,
+                    lineHeight,
+                    transform: `scale(1, ${scaleY})`,
+                    transformOrigin: 'center top',
+                    margin: 0,
+                    textAlign: 'center',
+                    userSelect: 'none',
+                    whiteSpace: 'nowrap',
+                    fontWeight: 100,
+                    width: '100%'
+                }}
+            >
+                {chars.map((char, i) => (
+                    <span
+                        key={i}
+                        ref={el => {
+                            spansRef.current[i] = el;
+                        }}
+                        data-char={char}
+                        style={{
+                            display: 'inline-block',
+                            color: stroke ? undefined : textColor
+                        }}
+                    >
+                        {char}
+                    </span>
+                ))}
+            </span>
+        </div>
+    );
+};
+
+export default TextPressure;
diff --git a/src/features/transfer/TransferTokenCard.tsx b/src/features/transfer/TransferTokenCard.tsx
index c2a7951..f2b5550 100644
--- a/src/features/transfer/TransferTokenCard.tsx
+++ b/src/features/transfer/TransferTokenCard.tsx
@@ -1,10 +1,9 @@
-import { TransferTokenForm } from './TransferTokenForm';
 import { Card } from '../../components/layout/Card';
+import { TransferTokenForm } from './TransferTokenForm';
 
 export function TransferTokenCard() {
   return (
     <div className="sm:w-[664px] border border-[rgba(112,100,233,0.24)] rounded-xl relative">
-      <div className="absolute left-3.5 top-3.5 w-[calc(100%-28px)] h-[calc(100%-28px)] rounded-[790px] bg-[linear-gradient(90deg,_#2765FF_0%,_#BA2AF9_100%)] blur-[100px]bg-[linear-gradient(90deg,_#2765FF_0%,_#BA2AF9_100%)] blur-[100px]"></div>
       <div className="bg-darker2 py-6 px-3 rounded-t-xl relative z-[2]">
         <h1 className="text-contentBody text-center text-2xl font-semibold leading-[1.3]">LCAI Bridge</h1>
       </div>
@@ -13,4 +12,4 @@ export function TransferTokenCard() {
       </Card>
     </div>
   );
-}
+}
\ No newline at end of file
diff --git a/src/lib/animationVisibility.ts b/src/lib/animationVisibility.ts
new file mode 100644
index 0000000..f645da8
--- /dev/null
+++ b/src/lib/animationVisibility.ts
@@ -0,0 +1,44 @@
+type VisibilityCleanup = () => void;
+
+function isNearViewport(element: Element, margin: number) {
+  const rect = element.getBoundingClientRect();
+
+  return (
+    rect.bottom >= -margin &&
+    rect.right >= -margin &&
+    rect.top <= window.innerHeight + margin &&
+    rect.left <= window.innerWidth + margin
+  );
+}
+
+export function createAnimationVisibilityController(
+  element: Element,
+  onChange: (isVisible: boolean) => void,
+  margin = 320
+): VisibilityCleanup {
+  let isInViewport = isNearViewport(element, margin);
+
+  const update = () => {
+    onChange(isInViewport && document.visibilityState !== "hidden");
+  };
+
+  const observer =
+    typeof IntersectionObserver === "undefined"
+      ? null
+      : new IntersectionObserver(
+          ([entry]) => {
+            isInViewport = entry.isIntersecting;
+            update();
+          },
+          { rootMargin: `${margin}px` }
+        );
+
+  observer?.observe(element);
+  document.addEventListener("visibilitychange", update);
+  update();
+
+  return () => {
+    observer?.disconnect();
+    document.removeEventListener("visibilitychange", update);
+  };
+}
diff --git a/src/pages/index.tsx b/src/pages/index.tsx
index cc9f557..e61bac1 100755
--- a/src/pages/index.tsx
+++ b/src/pages/index.tsx
@@ -3,7 +3,7 @@ import { TransferTokenCard } from '../features/transfer/TransferTokenCard';
 
 const Home: NextPage = () => {
   return (
-    <div className="relative">
+    <div className="relative z-10 flex justify-center items-center">
       <TransferTokenCard />
     </div>
   );
diff --git a/src/styles/footer/_footer.scss b/src/styles/footer/_footer.scss
index 53a2d5f..cc1393f 100644
--- a/src/styles/footer/_footer.scss
+++ b/src/styles/footer/_footer.scss
@@ -112,16 +112,13 @@ p {
     var(--color-blacker)
   );
   .footer-top {
-    padding: 100px 0 !important;
-    padding-bottom: 70px;
+    padding-top: 100px !important;
     @media #{$sm-layout} {
-      padding: 50px 0 !important;
-      padding-bottom: 50px;
+      padding-top: 50px !important;
     }
   
     @media #{$md-layout, $lg-layout} {
-      padding: 70px 0 !important;
-      padding-bottom: 70px;
+      padding-top: 70px !important;
     }
     .lightchain-footer-widget {
       text-align: left;
diff --git a/src/styles/globals.css b/src/styles/globals.css
index af90191..e9de3be 100755
--- a/src/styles/globals.css
+++ b/src/styles/globals.css
@@ -227,3 +227,88 @@ Fixes for cosmos chain selection modal
 div[data-floating-ui-portal] > div {
   z-index: 10000;
 }
+
+/* Footer mega title (matches LCAIPresale TextPressure gradient) */
+.footer-bottom-animated .footer-gradient-text {
+  background: linear-gradient(80deg, #7064e9 -5.02%, #dd00ac 50.44%);
+  background-clip: text;
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  color: transparent !important;
+}
+
+.footer-bottom-animated .footer-gradient-text span {
+  color: transparent !important;
+  -webkit-text-fill-color: transparent;
+}
+
+/* link hover underline effect */
+.lcai-link-hover {
+  @apply relative hover:text-[#9B91F0] after:content-[''] after:absolute after:bottom-0 after:left-auto after:right-0 hover:after:right-auto hover:after:left-0 after:w-0 hover:after:w-full after:h-0.5 after:bg-[#7064E9] transition-all duration-300 ease-in-out after:transition-all after:duration-300 after:ease-in-out;
+}
+
+/* global transition effect */
+.lcai-transition {
+  @apply transition-all duration-300 ease-in-out;
+}
+
+/* Footer TextPressure */
+.text-pressure-container .footer-gradient-text {
+  background: linear-gradient(80deg, #7064E9 -5.02%, #DD00AC 50.44%);
+  background-clip: text;
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  color: transparent !important;
+}
+
+.text-pressure-container .footer-gradient-text span {
+  color: transparent !important;
+  -webkit-text-fill-color: transparent;
+}
+
+@media (max-width: 479px) {
+  .text-pressure-container {
+    height: 70px !important;
+    padding: 0 16px !important;
+  }
+}
+
+@media (min-width: 480px) and (max-width: 767px) {
+  .text-pressure-container {
+    height: 100px !important;
+    padding: 0 48px !important;
+    letter-spacing: 10px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+
+  .text-pressure-container .footer-gradient-text span {
+    letter-spacing: 10px;
+    font-size: 36px !important;
+  }
+}
+
+@media (min-width: 768px) and (max-width: 1023px) {
+  .text-pressure-container {
+    height: 150px !important;
+    padding: 0 48px !important;
+  }
+}
+
+@media (min-width: 1024px) and (max-width: 1279px) {
+  .text-pressure-container {
+    height: 200px !important;
+    padding: 0 48px !important;
+  }
+}
+
+@keyframes dotted-line-flow {
+  0% {
+    transform: translateY(0);
+  }
+
+  100% {
+    transform: translateY(28px);
+  }
+}
\ No newline at end of file
diff --git a/src/styles/theme/_variables.scss b/src/styles/theme/_variables.scss
index 5afc312..8628c1d 100644
--- a/src/styles/theme/_variables.scss
+++ b/src/styles/theme/_variables.scss
@@ -39,7 +39,7 @@
   --color-text-off: #565e78;
 
   --color-dark: #070710;
-  --color-darker: rgba(6, 6, 6, 0.7);
+  --color-darker: rgba(0, 0, 0, 1);
   --color-darkest: rgba(0, 0, 0, 0.3);
 
   --color-black: #000000;