From 8a031b9b55b7dde0420ebcc2dc8d1737f9e8e0a4 Mon Sep 17 00:00:00 2001 From: sam-lightchain Date: Wed, 13 May 2026 16:50:03 +0600 Subject: [PATCH 1/2] chore: update dependencies and enhance footer component - Added `@types/three` and `postprocessing` packages to `package.json`. - Updated `pnpm-lock.yaml` to reflect new dependencies. - Refactored `Footer` component to include `FooterBottomAnimated` and adjusted styles for improved layout. - Enhanced global and footer-specific styles for better visual presentation. --- package.json | 3 + pnpm-lock.yaml | 65 ++ src/components/footer/Footer.tsx | 32 +- .../footer/FooterBottomAnimated.tsx | 51 ++ src/components/ui/PixelBlast.tsx | 750 ++++++++++++++++++ src/components/ui/TextPressure.tsx | 314 ++++++++ src/lib/animationVisibility.ts | 44 + src/styles/footer/_footer.scss | 9 +- src/styles/globals.css | 14 + 9 files changed, 1252 insertions(+), 30 deletions(-) create mode 100644 src/components/footer/FooterBottomAnimated.tsx create mode 100644 src/components/ui/PixelBlast.tsx create mode 100644 src/components/ui/TextPressure.tsx create mode 100644 src/lib/animationVisibility.ts diff --git a/package.json b/package.json index 9993a45..3384f48 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,14 @@ "formik": "^2.4.6", "framer-motion": "^10.16.4", "next": "^15.0.7", + "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..074185c 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,9 @@ 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) + postprocessing: + specifier: ^6.39.1 + version: 6.39.1(three@0.184.0) react: specifier: ^18.3.1 version: 18.3.1 @@ -227,6 +233,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 +1015,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 +4785,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 +4936,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 +6829,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 +7688,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'} @@ -8296,6 +8326,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 +9236,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 +11727,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 +17877,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 +18052,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 +21304,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 +22244,8 @@ snapshots: merge2@1.4.1: {} + meshoptimizer@1.1.1: {} + metro-babel-transformer@0.83.3: dependencies: '@babel/core': 7.28.5 @@ -22949,6 +23008,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 +24178,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..8da8a2b 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 ( -