feat: enhance homescreen with scroll motion

frontend/bun.lock

@@ -17,6 +17,7 @@
         "daisyui": "^5.5.19",
         "fabric": "^7.2.0",
         "idb": "^8.0.3",
+        "motion": "^12.38.0",
         "react": "^19.2.4",
         "react-dom": "^19.2.4",
         "react-hook-form": "^7.72.1",
@@ -402,6 +403,8 @@
 
     "form-data": ["form-data@4.0.5", "", { "dependencies": { "asynckit": "^0.4.0", "combined-stream": "^1.0.8", "es-set-tostringtag": "^2.1.0", "hasown": "^2.0.2", "mime-types": "^2.1.12" } }, "sha512-8RipRLol37bNs2bhoV67fiTEvdTrbMUYcFTiy3+wuuOnUog2QBHCZWXDRijWQfAkhBj2Uf5UnVaiWwA5vdd82w=="],
 
+    "framer-motion": ["framer-motion@12.38.0", "", { "dependencies": { "motion-dom": "^12.38.0", "motion-utils": "^12.36.0", "tslib": "^2.4.0" }, "peerDependencies": { "@emotion/is-prop-valid": "*", "react": "^18.0.0 || ^19.0.0", "react-dom": "^18.0.0 || ^19.0.0" }, "optionalPeers": ["@emotion/is-prop-valid", "react", "react-dom"] }, "sha512-rFYkY/pigbcswl1XQSb7q424kSTQ8q6eAC+YUsSKooHQYuLdzdHjrt6uxUC+PRAO++q5IS7+TamgIw1AphxR+g=="],
+
     "fs-constants": ["fs-constants@1.0.0", "", {}, "sha512-y6OAwoSIf7FyjMIv94u+b5rdheZEjzR63GTyZJm5qh4Bi+2YgwLCcI/fPFZkL5PSixOt6ZNKm+w+Hfp/Bciwow=="],
 
     "fsevents": ["fsevents@2.3.3", "", { "os": "darwin" }, "sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw=="],
@@ -526,6 +529,12 @@
 
     "mkdirp-classic": ["mkdirp-classic@0.5.3", "", {}, "sha512-gKLcREMhtuZRwRAfqP3RFW+TK4JqApVBtOIftVgjuABpAtpxhPGaDcfvbhNvD0B8iD1oUr/txX35NjcaY6Ns/A=="],
 
+    "motion": ["motion@12.38.0", "", { "dependencies": { "framer-motion": "^12.38.0", "tslib": "^2.4.0" }, "peerDependencies": { "@emotion/is-prop-valid": "*", "react": "^18.0.0 || ^19.0.0", "react-dom": "^18.0.0 || ^19.0.0" }, "optionalPeers": ["@emotion/is-prop-valid", "react", "react-dom"] }, "sha512-uYfXzeHlgThchzwz5Te47dlv5JOUC7OB4rjJ/7XTUgtBZD8CchMN8qEJ4ZVsUmTyYA44zjV0fBwsiktRuFnn+w=="],
+
+    "motion-dom": ["motion-dom@12.38.0", "", { "dependencies": { "motion-utils": "^12.36.0" } }, "sha512-pdkHLD8QYRp8VfiNLb8xIBJis1byQ9gPT3Jnh2jqfFtAsWUA3dEepDlsWe/xMpO8McV+VdpKVcp+E+TGJEtOoA=="],
+
+    "motion-utils": ["motion-utils@12.36.0", "", {}, "sha512-eHWisygbiwVvf6PZ1vhaHCLamvkSbPIeAYxWUuL3a2PD/TROgE7FvfHWTIH4vMl798QLfMw15nRqIaRDXTlYRg=="],
+
     "ms": ["ms@2.1.3", "", {}, "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA=="],
 
     "msw": ["msw@2.13.2", "", { "dependencies": { "@inquirer/confirm": "^5.0.0", "@mswjs/interceptors": "^0.41.2", "@open-draft/deferred-promise": "^2.2.0", "@types/statuses": "^2.0.6", "cookie": "^1.0.2", "graphql": "^16.12.0", "headers-polyfill": "^4.0.2", "is-node-process": "^1.2.0", "outvariant": "^1.4.3", "path-to-regexp": "^6.3.0", "picocolors": "^1.1.1", "rettime": "^0.10.1", "statuses": "^2.0.2", "strict-event-emitter": "^0.5.1", "tough-cookie": "^6.0.0", "type-fest": "^5.2.0", "until-async": "^3.0.2", "yargs": "^17.7.2" }, "peerDependencies": { "typescript": ">= 4.8.x" }, "optionalPeers": ["typescript"], "bin": { "msw": "cli/index.js" } }, "sha512-go2H1TIERKkC48pXiwec5l6sbNqYuvqOk3/vHGo1Zd+pq/H63oFawDQerH+WQdUw/flJFHDG7F+QdWMwhntA/A=="],

frontend/package.json

@@ -31,6 +31,7 @@
     "daisyui": "^5.5.19",
     "fabric": "^7.2.0",
     "idb": "^8.0.3",
+    "motion": "^12.38.0",
     "react": "^19.2.4",
     "react-dom": "^19.2.4",
     "react-hook-form": "^7.72.1",

frontend/src/index.css

@@ -2,57 +2,57 @@
 @plugin "daisyui";
 
 @plugin "daisyui/theme" {
-    name: "piku";
+  name: "piku";
-    default: true;
+  default: true;
-    prefersdark: true;
+  prefersdark: true;
-    color-scheme: dark;
+  color-scheme: dark;
 
-    --color-base-100: oklch(14% 0.012 35);
+  --color-base-100: oklch(14% 0.012 35);
-    --color-base-200: oklch(18% 0.014 33);
+  --color-base-200: oklch(18% 0.014 33);
-    --color-base-300: oklch(22% 0.016 32);
+  --color-base-300: oklch(22% 0.016 32);
-    --color-base-content: oklch(82% 0.02 70);
+  --color-base-content: oklch(82% 0.02 70);
 
-    --color-primary: oklch(67% 0.11 78);
+  --color-primary: oklch(67% 0.11 78);
-    --color-primary-content: oklch(15% 0.03 70);
+  --color-primary-content: oklch(15% 0.03 70);
 
-    --color-secondary: oklch(48% 0.08 305);
+  --color-secondary: oklch(48% 0.08 305);
-    --color-secondary-content: oklch(92% 0.01 305);
+  --color-secondary-content: oklch(92% 0.01 305);
 
-    --color-accent: oklch(55% 0.06 325);
+  --color-accent: oklch(55% 0.06 325);
-    --color-accent-content: oklch(18% 0.03 295);
+  --color-accent-content: oklch(18% 0.03 295);
 
-    --color-neutral: oklch(28% 0.02 45);
+  --color-neutral: oklch(28% 0.02 45);
-    --color-neutral-content: oklch(80% 0.015 60);
+  --color-neutral-content: oklch(80% 0.015 60);
 
-    --color-info: oklch(60% 0.07 240);
+  --color-info: oklch(60% 0.07 240);
-    --color-info-content: oklch(95% 0.01 240);
+  --color-info-content: oklch(95% 0.01 240);
-    --color-success: oklch(60% 0.08 150);
+  --color-success: oklch(60% 0.08 150);
-    --color-success-content: oklch(16% 0.03 150);
+  --color-success-content: oklch(16% 0.03 150);
-    --color-warning: oklch(68% 0.08 72);
+  --color-warning: oklch(68% 0.08 72);
-    --color-warning-content: oklch(18% 0.03 60);
+  --color-warning-content: oklch(18% 0.03 60);
-    --color-error: oklch(55% 0.1 22);
+  --color-error: oklch(55% 0.1 22);
-    --color-error-content: oklch(92% 0.01 22);
+  --color-error-content: oklch(92% 0.01 22);
 
-    --radius-selector: 0.5rem;
+  --radius-selector: 0.5rem;
-    --radius-field: 0.375rem;
+  --radius-field: 0.375rem;
-    --radius-box: 0.5rem;
+  --radius-box: 0.5rem;
 
-    --depth: 1;
+  --depth: 1;
-    --noise: 0.03;
+  --noise: 0.03;
 
-    --border: 1px;
+  --border: 1px;
 }
 
 @theme {
-    --font-display: "Playwrite HR Lijeva Variable", cursive;
+  --font-display: "Playwrite HR Lijeva Variable", cursive;
-    --font-sans: "Jost Variable", sans-serif;
+  --font-sans: "Jost Variable", sans-serif;
-    --font-serif: "Playfair Display Variable", serif;
+  --font-serif: "Playfair Display Variable", serif;
-    --color-glass-bg: rgba(28, 22, 16, 0.45);
+  --color-glass-bg: rgba(28, 22, 16, 0.45);
-    --shadow-warm: 0 20px 50px -12px rgba(30, 20, 12, 0.6);
+  --shadow-warm: 0 20px 50px -12px rgba(30, 20, 12, 0.6);
-    --radius-xl: 1.5rem;
+  --radius-xl: 1.5rem;
-    --color-paper: oklch(97% 0.008 80);
+  --color-paper: oklch(97% 0.008 80);
 }
 
 .glass-card {
-    @apply bg-glass-bg backdrop-blur-xl border border-white/5 shadow-warm rounded-xl;
+  @apply bg-glass-bg backdrop-blur-xl border border-white/5 shadow-warm rounded-xl;
 }

frontend/src/pages/Home.tsx

@@ -1,9 +1,266 @@
+import {
+  motion,
+  useMotionValueEvent,
+  useScroll,
+  useSpring,
+  useTransform,
+} from "motion/react";
+import { useRef, useState } from "react";
 import Logo from "../components/Logo";
+import { EnvelopeReveal } from "../components/reader/EnvelopeReveal";
+import { formatDate } from "../utils/dateFormat.ts";
 
 export default function Home() {
+  const sectionContainer1 = useRef<HTMLDivElement>(null);
+  const { scrollYProgress: section1ScrollProgress } = useScroll({
+    target: sectionContainer1,
+  });
+  const smoothProgress = useSpring(section1ScrollProgress, {
+    stiffness: 100,
+    damping: 30,
+    restDelta: 0.001,
+  });
+  const [isEnvelopeFlipped, setIsEnvelopeFlipped] = useState(true);
+  const [recipient, setRecipient] = useState("someone dear");
+  const [ignite, setIgnite] = useState(false);
+
+  useMotionValueEvent(section1ScrollProgress, "change", (latestScrollValue) => {
+    if (latestScrollValue <= 0.6) {
+      setIsEnvelopeFlipped(true);
+    } else {
+      setIsEnvelopeFlipped(false);
+    }
+    if (latestScrollValue > 0.68) {
+      setRecipient("future me");
+    } else {
+      setRecipient("someone dear");
+    }
+    if (latestScrollValue > 0.77) {
+      setIgnite(true);
+    } else {
+      setIgnite(false);
+    }
+  });
+
   return (
-    <div>
+    <section
-      <Logo />
+      ref={sectionContainer1}
-    </div>
+      className="relative w-full h-[850vh] bg-base-100 font-serif"
+    >
+      <div className="sticky top-0 h-screen w-full flex flex-col items-center justify-center overflow-hidden">
+        <motion.div
+          className="absolute flex flex-col items-center justify-center pointer-events-none"
+          style={{
+            opacity: useTransform(smoothProgress, [0, 0.12, 1], [1, 0, 0]),
+            scale: useTransform(smoothProgress, [0, 0.12], [1, 10]),
+          }}
+        >
+          <h1 className="text-neutral-content/40 text-4xl md:text-6xl text-center px-6">
+            You've been carrying something
+          </h1>
+          <h2 className="text-primary text-5xl md:text-7xl font-extralight mt-4 italic font-display animate-pulse">
+            unsaid
+          </h2>
+        </motion.div>
+
+        <motion.div
+          className="absolute text-center"
+          style={{
+            opacity: useTransform(smoothProgress, [0, 0.15, 0.2], [0, 1, 0]),
+            y: useTransform(smoothProgress, [0, 0.15, 0.2], [40, 0, -40]),
+            scale: useTransform(smoothProgress, [0, 0.15, 0.2], [0.8, 1, 3]),
+          }}
+        >
+          <div className="mt-6 text-4xl md:text-6xl text-base-content/60 italic">
+            and that's okay...
+          </div>
+        </motion.div>
+        <motion.div
+          className="absolute text-center px-6"
+          style={{
+            opacity: useTransform(smoothProgress, [0.18, 0.25, 0.3], [0, 1, 0]),
+            y: useTransform(smoothProgress, [0.18, 0.25, 0.3], [20, 0, -20]),
+          }}
+          transition={{ delay: 4 }}
+        >
+          <Logo scale={2} />
+          <motion.div
+            className="mt-6 text-4xl md:text-6xl text-base-content/60 "
+            style={{
+              opacity: useTransform(
+                smoothProgress,
+                [0.22, 0.25, 0.35, 0.4],
+                [0, 1, 1, 0],
+              ),
+              y: useTransform(
+                smoothProgress,
+                [0.25, 0.3, 0.35, 0.4],
+                [20, 0, 0, -20],
+              ),
+            }}
+          >
+            is a{" "}
+            <span className="font-display text-primary font-extralight">
+              safe space
+            </span>
+            ,<br />
+            <motion.span
+              className="opacity-0 text-3xl md:text-5xl"
+              transition={{ delay: 3 }}
+              whileInView={{ opacity: 1 }}
+              viewport={{ once: false, amount: 0.3 }}
+            >
+              where you can
+            </motion.span>
+          </motion.div>
+        </motion.div>
+        <div className="relative w-full max-w-5xl h-1/2 flex items-center justify-center mt-20">
+          <motion.h2
+            style={{
+              opacity: useTransform(
+                smoothProgress,
+                [0.3, 0.35, 0.4, 0.45],
+                [0, 1, 1, 0],
+              ),
+              y: useTransform(
+                smoothProgress,
+                [0.3, 0.35, 0.4, 0.45],
+                [40, 0, 0, -40],
+              ),
+            }}
+            className="absolute text-4xl md:text-6xl text-center px-10 leading-tight"
+          >
+            pen down your unsaid words into{" "}
+            <span className="font-display text-primary font-extralight">
+              letters
+            </span>
+            .
+          </motion.h2>
+          <motion.h2
+            style={{
+              opacity: useTransform(
+                smoothProgress,
+                [0.45, 0.5, 0.55, 0.6],
+                [0, 1, 1, 0],
+              ),
+              y: useTransform(
+                smoothProgress,
+                [0.45, 0.5, 0.55, 0.6],
+                [40, 0, 0, -40],
+              ),
+            }}
+            className="absolute text-4xl md:text-6xl text-center px-10 leading-tight"
+          >
+            seal it{" "}
+            <span className="text-secondary font-display italic font-extralight">
+              secure
+            </span>{" "}
+            and{" "}
+            <span className="text-secondary font-display font-extralight italic">
+              private
+            </span>
+            .
+          </motion.h2>
+          <motion.h2
+            style={{
+              opacity: useTransform(
+                smoothProgress,
+                [0.6, 0.63, 0.72, 0.75],
+                [0, 1, 1, 0],
+              ),
+              y: useTransform(
+                smoothProgress,
+                [0.6, 0.63, 0.72, 0.75],
+                [40, 0, 0, -40],
+              ),
+            }}
+            className="absolute text-4xl md:text-6xl text-center px-10 leading-tight"
+          >
+            send it to{" "}
+            <motion.span
+              className="font-display text-accent"
+              style={{
+                color: useTransform(
+                  smoothProgress,
+                  [0.67, 1],
+                  ["var(--color-accent)", "var(--color-neutral)"],
+                ),
+              }}
+            >
+              someone dear
+            </motion.span>
+            <motion.span
+              style={{
+                opacity: useTransform(smoothProgress, [0.66, 0.7], [0, 1]),
+              }}
+            >
+              {" "}
+              or{" "}
+              <span className="font-display text-success">
+                yourself in the future
+              </span>
+              .
+            </motion.span>
+          </motion.h2>
+          <motion.h2
+            style={{
+              opacity: useTransform(
+                smoothProgress,
+                [0.75, 0.8, 0.85, 0.9],
+                [0, 1, 1, 0],
+              ),
+              y: useTransform(
+                smoothProgress,
+                [0.75, 0.8, 0.85, 0.9],
+                [40, 0, 0, -40],
+              ),
+            }}
+            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
+            release the burden.
+          </motion.h2>
+        </div>
+        <div className="relative h-1/4 w-full flex flex-col items-center justify-center">
+          <motion.div
+            className="z-10 absolute scale-80"
+            style={{
+              opacity: useTransform(smoothProgress, [0.3, 0.5], [0, 1]),
+              y: useTransform(smoothProgress, [0.3, 0.5], [200, 0]),
+            }}
+          >
+            <EnvelopeReveal
+              isInteractive={false}
+              ignite={ignite}
+              recipient={recipient}
+              date={formatDate(new Date().toISOString())}
+              onRevealComplete={() => {}}
+              isFlip={isEnvelopeFlipped}
+            />
+          </motion.div>
+          <motion.div
+            className="w-48 z-100 h-48 rounded-full blur-3xl opacity-20"
+            transition={{
+              backgroundColor: { ease: "easeIn", duration: 2 },
+            }}
+            style={{
+              backgroundColor: useTransform(
+                smoothProgress,
+                [0.45, 0.5, 0.7, 0.75, 1],
+                [
+                  "var(--color-primary)",
+                  "var(--color-secondary)",
+                  "var(--color-accent)",
+                  "var(--color-success)",
+                  "var(--color-error)",
+                ],
+              ),
+              scale: useTransform(smoothProgress, [0, 1], [0.6, 2.5]),
+            }}
+          />
+          <div className="absolute border border-primary/5 w-64 h-64 rounded-full backdrop-blur-[1px]" />
+        </div>
+      </div>
+    </section>
   );
 }