oiupoyt/OneLauncher-Cracked
1
1
Fork 0
Code Issues Pull requests Projects Releases 2 Packages Wiki Activity

feat(oneclient/frontend): add parallax background effects

Browse source
This commit is contained in:
LynithDev 2025-06-28 18:33:53 +02:00
parent c0100e3a5d
commit 89bbf00136
4 changed files with 50 additions and 10 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
apps/oneclient/frontend/package.json
View file

@ -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",

5
apps/oneclient/frontend/src/routes/app/index.tsx
View file

@ -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) {
<Card blur={versionInfo === undefined}>
{versionInfo && (
<div className="flex w-full h-full justify-start items-end px-6 py-3">
<GameBackground className="-z-10" name={versionInfo.backgroundName} />
<MouseParallax isAbsolutelyPositioned strength={0.005} zIndex={-10}>
<GameBackground className="absolute left-0 top-0 w-full h-full scale-110" name={versionInfo.backgroundName} />
</MouseParallax>
<div
className="absolute top-0 left-0 -z-10 w-full h-full"

22
apps/oneclient/frontend/src/routes/app/route.tsx
View file

@ -1,10 +1,11 @@
import { useEffect, type PropsWithChildren } from 'react';
import type { PropsWithChildren } from 'react';
import { LoaderSuspense, Navbar } from '@/components';
import { GameBackground } from '@/components/GameBackground';
import useAppShellStore from '@/stores/appShellStore';
import { AnimatedOutlet } from '@onelauncher/common/components';
import { createFileRoute, useRouter } from '@tanstack/react-router';
import { AnimatePresence } from 'motion/react';
import { useEffect } from 'react';
import { MouseParallax } from 'react-just-parallax';
export const Route = createFileRoute('/app')({
component: RouteComponent,
@ -40,18 +41,16 @@ function AppShell({
const setPrevLocation = useAppShellStore(state => 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 (
<div className="flex flex-col h-full w-full">
<AnimatePresence>
<BackgroundGradient />
</AnimatePresence>
<BackgroundGradient />
<Navbar />
@ -69,7 +68,7 @@ function BackgroundGradient() {
return undefined;
return (
<div>
<div className="relative">
{/* Linear black gradient: left -> right */}
<div
className="absolute top-0 left-0 w-screen h-screen -z-10"
@ -95,7 +94,12 @@ function BackgroundGradient() {
>
</div>
<GameBackground name="HypixelSkyblockHub" />
<MouseParallax isAbsolutelyPositioned strength={0.01} zIndex={-50}>
<GameBackground
className="absolute left-0 top-0 w-screen h-screen scale-110"
name="HypixelSkyblockHub"
/>
</MouseParallax>
</div>
);
}

32
pnpm-lock.yaml generated
View file

@ -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):