me/pi-ku
1
0
Fork 0
Code Issues Pull Requests Actions Projects Releases Wiki Activity

feat: use ReactLenis and simplify motion animations in Home page
CI / Generate Certificates (push) Successful in 1m40s
Details
CI / Frontend CI (push) Successful in 1m7s
Details
CI / Backend CI (push) Successful in 1m9s
Details
CI / E2E Tests (push) Has been skipped
Details

Browse Source
This commit is contained in:
me
2026-05-05 21:43:47 +05:30
parent 740753cb33
commit 3b5f140d21
2 changed files with 311 additions and 316 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/App.tsx
+1 -7
View File
@@ -1,11 +1,5 @@
import { lazy, Suspense, useEffect, useRef } from "react"; import { lazy, Suspense, useEffect, useRef } from "react";
import { import { BrowserRouter, Navigate, Route, Routes } from "react-router-dom";
BrowserRouter,
Navigate,
Route,
Routes,
ScrollRestoration,
} from "react-router-dom";
import { ProtectedRoute, PublicRoute } from "./components/RouteGuards"; import { ProtectedRoute, PublicRoute } from "./components/RouteGuards";
import SplashScreen from "./components/SplashScreen"; import SplashScreen from "./components/SplashScreen";
import { ROUTES } from "./config/routes"; import { ROUTES } from "./config/routes";
frontend/src/pages/Home.tsx
+45 -44
View File
@@ -1,9 +1,9 @@
import { InfoIcon } from "@phosphor-icons/react"; import { InfoIcon } from "@phosphor-icons/react";
import { ReactLenis } from "lenis/react";
import { import {
motion, motion,
useMotionValueEvent, useMotionValueEvent,
useScroll, useScroll,
useSpring,
useTransform, useTransform,
} from "motion/react"; } from "motion/react";
import { useRef, useState } from "react"; import { useRef, useState } from "react";
@@ -16,14 +16,9 @@ import { formatDate } from "../utils/dateFormat.ts";
export default function Home() { export default function Home() {
const sectionContainer1 = useRef<HTMLDivElement>(null); const sectionContainer1 = useRef<HTMLDivElement>(null);
const { scrollYProgress: section1ScrollProgress } = useScroll({ const { scrollYProgress } = useScroll({
target: sectionContainer1, target: sectionContainer1,
}); });
const smoothProgress1 = useSpring(section1ScrollProgress, {
stiffness: 100,
damping: 30,
restDelta: 0.001,
});
const [isEnvelopeFlipped, setIsEnvelopeFlipped] = useState(true); const [isEnvelopeFlipped, setIsEnvelopeFlipped] = useState(true);
const [flapOpen, setFlapOpen] = useState(false); const [flapOpen, setFlapOpen] = useState(false);
const [recipient, setRecipient] = useState("someone dear"); const [recipient, setRecipient] = useState("someone dear");
@@ -31,7 +26,7 @@ export default function Home() {
const navigate = useNavigate(); const navigate = useNavigate();
useMotionValueEvent(section1ScrollProgress, "change", (latestScrollValue) => { useMotionValueEvent(scrollYProgress, "change", (latestScrollValue) => {
if (latestScrollValue > 0.54) { if (latestScrollValue > 0.54) {
setFlapOpen(false); setFlapOpen(false);
} else { } else {
@@ -55,6 +50,7 @@ export default function Home() {
}); });
return ( return (
<ReactLenis root options={{ lerp: 0.1, duration: 1.5, smoothWheel: true }}>
<section <section
ref={sectionContainer1} ref={sectionContainer1}
className="relative w-full h-[850vh] bg-base-100 font-serif" className="relative w-full h-[850vh] bg-base-100 font-serif"
@@ -64,8 +60,8 @@ export default function Home() {
<motion.div <motion.div
className="absolute flex flex-col items-center justify-center pointer-events-none" className="absolute flex flex-col items-center justify-center pointer-events-none"
style={{ style={{
opacity: useTransform(smoothProgress1, [0, 0.12, 1], [1, 0, 0]), opacity: useTransform(scrollYProgress, [0, 0.12, 1], [1, 0, 0]),
scale: useTransform(smoothProgress1, [0, 0.12], [1, 10]), scale: useTransform(scrollYProgress, [0, 0.12], [1, 10]),
}} }}
> >
<h1 className="text-neutral-content/40 text-4xl md:text-6xl text-center px-6"> <h1 className="text-neutral-content/40 text-4xl md:text-6xl text-center px-6">
@@ -79,9 +75,9 @@ export default function Home() {
<motion.div <motion.div
className="absolute text-center" className="absolute text-center"
style={{ style={{
opacity: useTransform(smoothProgress1, [0, 0.15, 0.2], [0, 1, 0]), opacity: useTransform(scrollYProgress, [0, 0.15, 0.2], [0, 1, 0]),
y: useTransform(smoothProgress1, [0, 0.15, 0.2], [40, 0, -40]), y: useTransform(scrollYProgress, [0, 0.15, 0.2], [40, 0, -40]),
scale: useTransform(smoothProgress1, [0, 0.15, 0.2], [0.8, 1, 3]), scale: useTransform(scrollYProgress, [0, 0.15, 0.2], [0.8, 1, 3]),
}} }}
> >
<div className="mt-6 text-4xl md:text-6xl text-base-content/60 italic"> <div className="mt-6 text-4xl md:text-6xl text-base-content/60 italic">
@@ -93,11 +89,11 @@ export default function Home() {
className="absolute text-center px-6" className="absolute text-center px-6"
style={{ style={{
opacity: useTransform( opacity: useTransform(
smoothProgress1, scrollYProgress,
[0.18, 0.25, 0.3], [0.18, 0.25, 0.3],
[0, 1, 0], [0, 1, 0],
), ),
y: useTransform(smoothProgress1, [0.18, 0.25, 0.3], [20, 0, -20]), y: useTransform(scrollYProgress, [0.18, 0.25, 0.3], [20, 0, -20]),
}} }}
transition={{ delay: 4 }} transition={{ delay: 4 }}
> >
@@ -106,12 +102,12 @@ export default function Home() {
className="mt-6 text-4xl md:text-6xl text-base-content/60 " className="mt-6 text-4xl md:text-6xl text-base-content/60 "
style={{ style={{
opacity: useTransform( opacity: useTransform(
smoothProgress1, scrollYProgress,
[0.22, 0.25, 0.35, 0.4], [0.22, 0.25, 0.35, 0.4],
[0, 1, 1, 0], [0, 1, 1, 0],
), ),
y: useTransform( y: useTransform(
smoothProgress1, scrollYProgress,
[0.25, 0.3, 0.35, 0.4], [0.25, 0.3, 0.35, 0.4],
[20, 0, 0, -20], [20, 0, 0, -20],
), ),
@@ -137,12 +133,12 @@ export default function Home() {
<motion.h2 <motion.h2
style={{ style={{
opacity: useTransform( opacity: useTransform(
smoothProgress1, scrollYProgress,
[0.3, 0.35, 0.4, 0.45], [0.3, 0.35, 0.4, 0.45],
[0, 1, 1, 0], [0, 1, 1, 0],
), ),
y: useTransform( y: useTransform(
smoothProgress1, scrollYProgress,
[0.3, 0.35, 0.4, 0.45], [0.3, 0.35, 0.4, 0.45],
[40, 0, 0, -40], [40, 0, 0, -40],
), ),
@@ -159,12 +155,12 @@ export default function Home() {
<motion.h2 <motion.h2
style={{ style={{
opacity: useTransform( opacity: useTransform(
smoothProgress1, scrollYProgress,
[0.45, 0.5, 0.55, 0.6], [0.45, 0.5, 0.55, 0.6],
[0, 1, 1, 0], [0, 1, 1, 0],
), ),
y: useTransform( y: useTransform(
smoothProgress1, scrollYProgress,
[0.45, 0.5, 0.55, 0.6], [0.45, 0.5, 0.55, 0.6],
[40, 0, 0, -40], [40, 0, 0, -40],
), ),
@@ -185,12 +181,12 @@ export default function Home() {
<motion.h2 <motion.h2
style={{ style={{
opacity: useTransform( opacity: useTransform(
smoothProgress1, scrollYProgress,
[0.6, 0.63, 0.72, 0.75], [0.6, 0.63, 0.72, 0.75],
[0, 1, 1, 0], [0, 1, 1, 0],
), ),
y: useTransform( y: useTransform(
smoothProgress1, scrollYProgress,
[0.6, 0.63, 0.72, 0.75], [0.6, 0.63, 0.72, 0.75],
[40, 0, 0, -40], [40, 0, 0, -40],
), ),
@@ -202,7 +198,7 @@ export default function Home() {
className="font-display text-accent" className="font-display text-accent"
style={{ style={{
color: useTransform( color: useTransform(
smoothProgress1, scrollYProgress,
[0.67, 1], [0.67, 1],
["var(--color-accent)", "var(--color-neutral)"], ["var(--color-accent)", "var(--color-neutral)"],
), ),
@@ -212,14 +208,14 @@ export default function Home() {
</motion.span> </motion.span>
<motion.span <motion.span
style={{ style={{
opacity: useTransform(smoothProgress1, [0.66, 0.7], [0, 1]), opacity: useTransform(scrollYProgress, [0.66, 0.7], [0, 1]),
}} }}
> >
<motion.span <motion.span
className="font-display text-accent" className="font-display text-accent"
style={{ style={{
color: useTransform( color: useTransform(
smoothProgress1, scrollYProgress,
[0.67, 1], [0.67, 1],
["var(--color-accent)", "var(--color-neutral)"], ["var(--color-accent)", "var(--color-neutral)"],
), ),
@@ -238,20 +234,20 @@ export default function Home() {
<motion.h2 <motion.h2
style={{ style={{
opacity: useTransform( opacity: useTransform(
smoothProgress1, scrollYProgress,
[0.75, 0.8, 0.85, 0.9], [0.75, 0.8, 0.85, 0.9],
[0, 1, 1, 0], [0, 1, 1, 0],
), ),
y: useTransform( y: useTransform(
smoothProgress1, scrollYProgress,
[0.75, 0.8, 0.85, 0.9], [0.75, 0.8, 0.85, 0.9],
[40, 0, 0, -40], [40, 0, 0, -40],
), ),
}} }}
className="absolute text-4xl md:text-6xl text-center px-10 leading-tight" className="absolute text-4xl md:text-6xl text-center px-10 leading-tight"
> >
and even <span className="font-display text-error">burn it</span> to and even <span className="font-display text-error">burn it</span>{" "}
release the burden. to release the burden.
</motion.h2> </motion.h2>
{/* Outro */} {/* Outro */}
<motion.h2 <motion.h2
@@ -259,8 +255,8 @@ export default function Home() {
"italic absolute text-4xl md:text-6xl text-center px-10 leading-tight" "italic absolute text-4xl md:text-6xl text-center px-10 leading-tight"
} }
style={{ style={{
opacity: useTransform(smoothProgress1, [0.9, 1], [0, 1]), opacity: useTransform(scrollYProgress, [0.9, 1], [0, 1]),
y: useTransform(smoothProgress1, [0.9, 1], [80, 0]), y: useTransform(scrollYProgress, [0.9, 1], [80, 0]),
}} }}
> >
You've been carrying it long enough. You've been carrying it long enough.
@@ -271,10 +267,10 @@ export default function Home() {
"z-100 absolute -bottom-12 md:bottom-0 font-display flex flex-wrap md:flex-nowrap gap-4 md:gap-12 justify-center" "z-100 absolute -bottom-12 md:bottom-0 font-display flex flex-wrap md:flex-nowrap gap-4 md:gap-12 justify-center"
} }
style={{ style={{
opacity: useTransform(smoothProgress1, [0.98, 1], [0, 1]), opacity: useTransform(scrollYProgress, [0.98, 1], [0, 1]),
y: useTransform(smoothProgress1, [0.98, 1], [80, 0]), y: useTransform(scrollYProgress, [0.98, 1], [80, 0]),
display: useTransform( display: useTransform(
smoothProgress1, scrollYProgress,
[0.96, 1], [0.96, 1],
["none", "flex"], ["none", "flex"],
), ),
@@ -307,13 +303,17 @@ export default function Home() {
className={"z-21 absolute"} className={"z-21 absolute"}
style={{ style={{
opacity: useTransform( opacity: useTransform(
smoothProgress1, scrollYProgress,
[0.3, 0.4, 0.5, 0.52], [0.3, 0.4, 0.5, 0.52],
[0, 1, 0.1, 0], [0, 1, 0.1, 0],
), ),
y: useTransform(smoothProgress1, [0.3, 0.45, 0.5], [300, 0, 200]), y: useTransform(
scrollYProgress,
[0.3, 0.45, 0.5],
[300, 0, 200],
),
scale: useTransform( scale: useTransform(
smoothProgress1, scrollYProgress,
[0.3, 0.4, 0.5], [0.3, 0.4, 0.5],
[1, 1, 0.6], [1, 1, 0.6],
), ),
@@ -331,11 +331,11 @@ export default function Home() {
className="absolute scale-50 md:scale-80 z-10" className="absolute scale-50 md:scale-80 z-10"
style={{ style={{
opacity: useTransform( opacity: useTransform(
smoothProgress1, scrollYProgress,
[0.4, 0.45, 0.5, 0.7, 0.9, 1], [0.4, 0.45, 0.5, 0.7, 0.9, 1],
[0, 0.6, 1, 1, 0.3, 0], [0, 0.6, 1, 1, 0.3, 0],
), ),
y: useTransform(smoothProgress1, [0.45, 0.5, 1], [600, 200, 0]), y: useTransform(scrollYProgress, [0.45, 0.5, 1], [600, 200, 0]),
}} }}
> >
<EnvelopeReveal <EnvelopeReveal
@@ -353,11 +353,11 @@ export default function Home() {
className="fixed bottom-0 z-10 font-sans -mb-6 scale-85 md:scale-100 md:mb-0" className="fixed bottom-0 z-10 font-sans -mb-6 scale-85 md:scale-100 md:mb-0"
style={{ style={{
opacity: useTransform( opacity: useTransform(
smoothProgress1, scrollYProgress,
[0.98, 0.995, 1], [0.98, 0.995, 1],
[0, 0.5, 1], [0, 0.5, 1],
), ),
y: useTransform(smoothProgress1, [0.98, 1], [50, -10]), y: useTransform(scrollYProgress, [0.98, 1], [50, -10]),
}} }}
> >
<Saajan <Saajan
@@ -375,7 +375,7 @@ export default function Home() {
}} }}
style={{ style={{
backgroundColor: useTransform( backgroundColor: useTransform(
smoothProgress1, scrollYProgress,
[0.45, 0.5, 0.7, 0.75, 1], [0.45, 0.5, 0.7, 0.75, 1],
[ [
"var(--color-primary)", "var(--color-primary)",
@@ -385,12 +385,13 @@ export default function Home() {
"var(--color-error)", "var(--color-error)",
], ],
), ),
scale: useTransform(smoothProgress1, [0, 1], [0.6, 2.5]), scale: useTransform(scrollYProgress, [0, 1], [0.6, 2.5]),
}} }}
/> />
<div className="absolute border border-primary/5 w-64 h-64 rounded-full backdrop-blur-[1px]" /> <div className="absolute border border-primary/5 w-64 h-64 rounded-full backdrop-blur-[1px]" />
</div> </div>
</div> </div>
</section> </section>
</ReactLenis>
); );
} }