me/pi-ku
1
0
Fork 0
mirror of https://github.com/ramvignesh-b/pi-ku.git synced 2026-05-04 08:56:52 +00:00
Code Issues Actions 1 Packages Projects Releases Wiki Activity

style: add outro and letter mockup to homepage

Browse Source
This commit is contained in:
ramvignesh-b
2026-05-01 00:09:00 +05:30
parent 9910e44ee2
commit 49cd21cffe
2 changed files with 130 additions and 28 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/public/screenshots/letter.webp
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 17 KiB

frontend/src/pages/Home.tsx
+130 -28
View File
@@ -1,3 +1,4 @@
import { InfoIcon } from "@phosphor-icons/react";
import {
motion,
useMotionValueEvent,
@@ -6,8 +7,10 @@ import {
useTransform,
} from "motion/react";
import { useRef, useState } from "react";
import { useNavigate } from "react-router-dom";
import Logo from "../components/Logo";
import { EnvelopeReveal } from "../components/reader/EnvelopeReveal";
import { ROUTES } from "../config/routes.ts";
import { formatDate } from "../utils/dateFormat.ts";
export default function Home() {
@@ -15,16 +18,24 @@ export default function Home() {
const { scrollYProgress: section1ScrollProgress } = useScroll({
target: sectionContainer1,
});
const smoothProgress = useSpring(section1ScrollProgress, {
const smoothProgress1 = useSpring(section1ScrollProgress, {
stiffness: 100,
damping: 30,
restDelta: 0.001,
});
const [isEnvelopeFlipped, setIsEnvelopeFlipped] = useState(true);
const [flapOpen, setFlapOpen] = useState(false);
const [recipient, setRecipient] = useState("someone dear");
const [ignite, setIgnite] = useState(false);
const navigate = useNavigate();
useMotionValueEvent(section1ScrollProgress, "change", (latestScrollValue) => {
if (latestScrollValue > 0.54) {
setFlapOpen(false);
} else {
setFlapOpen(true);
}
if (latestScrollValue <= 0.6) {
setIsEnvelopeFlipped(true);
} else {
@@ -48,11 +59,12 @@ export default function Home() {
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">
{/* Intro */}
<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]),
opacity: useTransform(smoothProgress1, [0, 0.12, 1], [1, 0, 0]),
scale: useTransform(smoothProgress1, [0, 0.12], [1, 10]),
}}
>
<h1 className="text-neutral-content/40 text-4xl md:text-6xl text-center px-6">
@@ -66,20 +78,25 @@ export default function Home() {
<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]),
opacity: useTransform(smoothProgress1, [0, 0.15, 0.2], [0, 1, 0]),
y: useTransform(smoothProgress1, [0, 0.15, 0.2], [40, 0, -40]),
scale: useTransform(smoothProgress1, [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>
{/* pi. ku. */}
<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]),
opacity: useTransform(
smoothProgress1,
[0.18, 0.25, 0.3],
[0, 1, 0],
),
y: useTransform(smoothProgress1, [0.18, 0.25, 0.3], [20, 0, -20]),
}}
transition={{ delay: 4 }}
>
@@ -88,12 +105,12 @@ export default function Home() {
className="mt-6 text-4xl md:text-6xl text-base-content/60 "
style={{
opacity: useTransform(
smoothProgress,
smoothProgress1,
[0.22, 0.25, 0.35, 0.4],
[0, 1, 1, 0],
),
y: useTransform(
smoothProgress,
smoothProgress1,
[0.25, 0.3, 0.35, 0.4],
[20, 0, 0, -20],
),
@@ -114,16 +131,17 @@ export default function Home() {
</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,
smoothProgress1,
[0.3, 0.35, 0.4, 0.45],
[0, 1, 1, 0],
),
y: useTransform(
smoothProgress,
smoothProgress1,
[0.3, 0.35, 0.4, 0.45],
[40, 0, 0, -40],
),
@@ -136,15 +154,16 @@ export default function Home() {
</span>
.
</motion.h2>
{/* Seal */}
<motion.h2
style={{
opacity: useTransform(
smoothProgress,
smoothProgress1,
[0.45, 0.5, 0.55, 0.6],
[0, 1, 1, 0],
),
y: useTransform(
smoothProgress,
smoothProgress1,
[0.45, 0.5, 0.55, 0.6],
[40, 0, 0, -40],
),
@@ -161,15 +180,16 @@ export default function Home() {
</span>
.
</motion.h2>
{/* Send / vault */}
<motion.h2
style={{
opacity: useTransform(
smoothProgress,
smoothProgress1,
[0.6, 0.63, 0.72, 0.75],
[0, 1, 1, 0],
),
y: useTransform(
smoothProgress,
smoothProgress1,
[0.6, 0.63, 0.72, 0.75],
[40, 0, 0, -40],
),
@@ -181,7 +201,7 @@ export default function Home() {
className="font-display text-accent"
style={{
color: useTransform(
smoothProgress,
smoothProgress1,
[0.67, 1],
["var(--color-accent)", "var(--color-neutral)"],
),
@@ -191,7 +211,7 @@ export default function Home() {
</motion.span>
<motion.span
style={{
opacity: useTransform(smoothProgress, [0.66, 0.7], [0, 1]),
opacity: useTransform(smoothProgress1, [0.66, 0.7], [0, 1]),
}}
>
{" "}
@@ -202,15 +222,16 @@ export default function Home() {
.
</motion.span>
</motion.h2>
{/* Burn */}
<motion.h2
style={{
opacity: useTransform(
smoothProgress,
smoothProgress1,
[0.75, 0.8, 0.85, 0.9],
[0, 1, 1, 0],
),
y: useTransform(
smoothProgress,
smoothProgress1,
[0.75, 0.8, 0.85, 0.9],
[40, 0, 0, -40],
),
@@ -220,13 +241,92 @@ export default function Home() {
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"
{/* Outro */}
<motion.h2
className={
"italic absolute text-4xl md:text-6xl text-center px-10 leading-tight"
}
style={{
opacity: useTransform(smoothProgress, [0.3, 0.5], [0, 1]),
y: useTransform(smoothProgress, [0.3, 0.5], [200, 0]),
opacity: useTransform(smoothProgress1, [0.9, 1], [0, 1]),
y: useTransform(smoothProgress1, [0.9, 1], [80, 0]),
}}
>
You've been carrying it long enough.
</motion.h2>
{/* CTA */}
<motion.div
className={
"z-100 absolute -bottom-12 md:bottom-0 font-display flex flex-wrap md:flex-nowrap gap-4 md:gap-12 justify-center"
}
style={{
opacity: useTransform(smoothProgress1, [0.98, 1], [0, 1]),
y: useTransform(smoothProgress1, [0.98, 1], [80, 0]),
display: useTransform(
smoothProgress1,
[0.96, 1],
["none", "flex"],
),
}}
>
<button
className={
"opacity-50 hover:opacity-100 btn btn-ghost btn-wide md:btn-xl rounded-full font-extralight grayscale hover:grayscale-0 hover:-translate-y-1 transition-all duration-1000"
}
type={"button"}
>
<InfoIcon className={"text-primary"} />
Tell me More
</button>
<button
className={
"opacity-50 hover:opacity-100 btn btn-primary rounded-full btn-wide md:btn-xl grayscale hover:grayscale-0 hover:-translate-y-1 transition-all duration-1000"
}
type={"button"}
onClick={() => navigate(ROUTES.ONBOARD, { replace: true })}
>
I'm ready
</button>
</motion.div>
</div>
<div className="relative h-1/4 w-full flex flex-col items-center justify-center pointer-events-none">
<motion.div
className={"z-21 absolute"}
style={{
opacity: useTransform(
smoothProgress1,
[0.3, 0.4, 0.5, 0.52],
[0, 1, 0.1, 0],
),
y: useTransform(
smoothProgress1,
[0.3, 0.45, 0.5],
[400, 100, 300],
),
scale: useTransform(
smoothProgress1,
[0.3, 0.4, 0.5],
[1, 1, 0.6],
),
}}
>
<div className="mockup-phone w-100 border-primary">
<div className="mockup-phone-camera"></div>
<div className="mockup-phone-display">
<img alt="letter" src="/screenshots/letter.webp" />
</div>
</div>
</motion.div>
{/* Envelope */}
<motion.div
className="absolute scale-80"
style={{
opacity: useTransform(
smoothProgress1,
[0.4, 0.45, 0.5, 0.7, 0.9, 1],
[0, 0.6, 1, 1, 0.3, 0],
),
y: useTransform(smoothProgress1, [0.45, 0.5, 1], [600, 200, 0]),
}}
>
<EnvelopeReveal
@@ -236,8 +336,10 @@ export default function Home() {
date={formatDate(new Date().toISOString())}
onRevealComplete={() => {}}
isFlip={isEnvelopeFlipped}
openFlap={flapOpen}
/>
</motion.div>
{/* Orb */}
<motion.div
className="w-48 z-100 h-48 rounded-full blur-3xl opacity-20"
transition={{
@@ -245,7 +347,7 @@ export default function Home() {
}}
style={{
backgroundColor: useTransform(
smoothProgress,
smoothProgress1,
[0.45, 0.5, 0.7, 0.75, 1],
[
"var(--color-primary)",
@@ -255,7 +357,7 @@ export default function Home() {
"var(--color-error)",
],
),
scale: useTransform(smoothProgress, [0, 1], [0.6, 2.5]),
scale: useTransform(smoothProgress1, [0, 1], [0.6, 2.5]),
}}
/>
<div className="absolute border border-primary/5 w-64 h-64 rounded-full backdrop-blur-[1px]" />