From 89bbf001362ab70bdf282c5f9566f9a309b37409 Mon Sep 17 00:00:00 2001 From: LynithDev <61880709+LynithDev@users.noreply.github.com> Date: Sat, 28 Jun 2025 18:33:53 +0200 Subject: [PATCH] feat(oneclient/frontend): add parallax background effects --- apps/oneclient/frontend/package.json | 1 + .../frontend/src/routes/app/index.tsx | 5 ++- .../frontend/src/routes/app/route.tsx | 22 +++++++------ pnpm-lock.yaml | 32 +++++++++++++++++++ 4 files changed, 50 insertions(+), 10 deletions(-) diff --git a/apps/oneclient/frontend/package.json b/apps/oneclient/frontend/package.json index ce9ec9ea..cbdb58cc 100644 --- a/apps/oneclient/frontend/package.json +++ b/apps/oneclient/frontend/package.json @@ -34,6 +34,7 @@ "react": "^19.0.0", "react-aria-components": "^1.8.0", "react-dom": "^19.0.0", + "react-just-parallax": "^3.1.16", "tailwind-merge": "^3.2.0", "tailwind-variants": "^1.0.0", "tailwindcss": "^4.0.6", diff --git a/apps/oneclient/frontend/src/routes/app/index.tsx b/apps/oneclient/frontend/src/routes/app/index.tsx index fd6def29..9dda4dd0 100644 --- a/apps/oneclient/frontend/src/routes/app/index.tsx +++ b/apps/oneclient/frontend/src/routes/app/index.tsx @@ -9,6 +9,7 @@ import { Button } from '@onelauncher/common/components'; import { createFileRoute } from '@tanstack/react-router'; import { DotsGridIcon, Settings04Icon } from '@untitled-theme/icons-react'; import { motion } from 'motion/react'; +import { MouseParallax } from 'react-just-parallax'; import { twMerge } from 'tailwind-merge'; export const Route = createFileRoute('/app/')({ @@ -80,7 +81,9 @@ function RecentsCard({ version }: RecentsCardProps) { {versionInfo && (
- + + +
state.setPrevLocation); useEffect(() => { - const unsub = router.subscribe("onBeforeNavigate", (e) => { + const unsub = router.subscribe('onBeforeNavigate', (e) => { setPrevLocation(e.fromLocation ?? null); }); return () => unsub(); - }, [router]); + }, [router, setPrevLocation]); return (
- - - + @@ -69,7 +68,7 @@ function BackgroundGradient() { return undefined; return ( -
+
{/* Linear black gradient: left -> right */}
- + + +
); } diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 80478c1a..1fa3da5a 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -151,6 +151,9 @@ importers: react-dom: specifier: ^19.0.0 version: 19.1.0(react@19.1.0) + react-just-parallax: + specifier: ^3.1.16 + version: 3.1.16(react@19.1.0) tailwind-merge: specifier: ^3.2.0 version: 3.2.0 @@ -3952,6 +3955,9 @@ packages: react-dom: optional: true + framesync@6.1.0: + resolution: {integrity: sha512-aBX+hdWAvwiJYeQlFLY2533VxeL6OEu71CAgV4GGKksrj6+dE6i7K86WSSiRBEARCoJn5bFqffhg4l07eA27tg==} + fs-extra@11.3.0: resolution: {integrity: sha512-Z4XaCL6dUDHfP/jT25jJKMmtxvuwbkrD1vNSMFlo9lNLY2c5FHYSQgHPRZUjAB26TpDEoW9HCOgplrdbaPV/ew==} engines: {node: '>=14.14'} @@ -4420,6 +4426,9 @@ packages: resolution: {integrity: sha512-iPZK6eYjbxRu3uB4/WZ3EsEIMJFMqAoopl3R+zuq0UjcAm/MO6KCweDgPfP3elTztoKP3KtnVHxTn2NHBSDVUw==} engines: {node: '>=10'} + lodash.debounce@4.0.8: + resolution: {integrity: sha512-FT1yDzDYEoYWhnSGnpE/4Kj1fLZkDFyqRb7fNt6FdYOSxlUWAtp42Eh6Wb0rGIv/m9Bgo7x4GhQbm5Ys4SG5ow==} + lodash.merge@4.6.2: resolution: {integrity: sha512-0KpjqXRVvrYyCsX1swR/XTK0va6VQkQM6MNo7PqW77ByjAhoARA8EfrP1N4+KlKj8YS0ZUCtRT/YUuhyYDujIQ==} @@ -4868,6 +4877,9 @@ packages: resolution: {integrity: sha512-dle9A3yYxlBSrt8Fu+IpjGT8SY8hN0mlaA6GY8t0P5PjIOZemULz/E2Bnm/2dcUOena75OTNkHI76uZBNUUq3A==} engines: {node: ^10 || ^12 || >=14} + prefix@1.0.0: + resolution: {integrity: sha512-KtGt8TV4nQkYgO6wJ5phkBGAECZW5cs5vQhqnz1LlxGGd8y4LwpW3Bq5pofULjdiMXACDCxisDUhwtFXb7vHfQ==} + prelude-ls@1.2.1: resolution: {integrity: sha512-vkcDPrRZo1QZLbn5RLGPpg/WmIQ65qoWWhcGKf/b5eplkkarX0m9z8ppCat4mlOqUsWpyNuYgO3VRyrYHSzX5g==} engines: {node: '>= 0.8.0'} @@ -4923,6 +4935,11 @@ packages: peerDependencies: react: ^19.1.0 + react-just-parallax@3.1.16: + resolution: {integrity: sha512-rbk49D/WEe/s9WPvtyO1+SUCyQ5SOvWXeg2udvVtE4cRgVAokzaS/iEdC7tz91lRSsqsSmjQj89Iwm+DtecrIQ==} + peerDependencies: + react: '>=16.8 || ^17.0.0 || ^18.0.0' + react-refresh@0.17.0: resolution: {integrity: sha512-z6F7K9bV85EfseRCp2bzrpyQ0Gkw1uLoCel9XBVWPg/TjRj94SkJzUTGfOa4bs7iJvBWtQG0Wq7wnI0syw3EBQ==} engines: {node: '>=0.10.0'} @@ -9897,6 +9914,10 @@ snapshots: react: 19.1.0 react-dom: 19.1.0(react@19.1.0) + framesync@6.1.0: + dependencies: + tslib: 2.8.1 + fs-extra@11.3.0: dependencies: graceful-fs: 4.2.11 @@ -10316,6 +10337,8 @@ snapshots: dependencies: p-locate: 5.0.0 + lodash.debounce@4.0.8: {} + lodash.merge@4.6.2: {} lodash@4.17.21: {} @@ -10917,6 +10940,8 @@ snapshots: picocolors: 1.1.1 source-map-js: 1.2.1 + prefix@1.0.0: {} + prelude-ls@1.2.1: {} prettier@2.8.8: {} @@ -11024,6 +11049,13 @@ snapshots: react: 19.1.0 scheduler: 0.26.0 + react-just-parallax@3.1.16(react@19.1.0): + dependencies: + framesync: 6.1.0 + lodash.debounce: 4.0.8 + prefix: 1.0.0 + react: 19.1.0 + react-refresh@0.17.0: {} react-stately@3.37.0(react@19.1.0):