import { ArrowArcLeftIcon, ArrowBendDownLeftIcon, ArrowBendDownRightIcon, ArrowRightIcon, CaretUpIcon, DetectiveIcon, FlowerTulipIcon, GhostIcon, GithubLogoIcon, InfoIcon, LockLaminatedIcon, LockOpenIcon, PasswordIcon, PeaceIcon, PersonArmsSpreadIcon, PersonIcon, QuotesIcon, ScrollIcon, SmileyIcon, SparkleIcon, VaultIcon, } from "@phosphor-icons/react"; import { ReactLenis } from "lenis/react"; import { AnimatePresence, motion, useScroll, useTransform } from "motion/react"; import { useEffect, useRef, useState } from "react"; import stamp from "../assets/envelope/stamp.png"; import Logo from "../components/Logo.tsx"; import { Modal } from "../components/ui/Modal"; import "@fontsource/kavivanar/index.css"; import "@fontsource/space-mono/index.css"; import "@fontsource/redacted-script/index.css"; import "@fontsource/architects-daughter/index.css"; import { useNavigate } from "react-router-dom"; function HorizontalScroll({ children }: { children: React.ReactNode }) { const ref = useRef(null); const { scrollYProgress } = useScroll({ target: ref }); const x = useTransform(scrollYProgress, [0, 1], ["0%", "-50%"]); return (
{children}
); } export default function About() { useEffect(() => { window.scrollTo(0, 0); }, []); return (
); } function PrivacySection() { return (

The   Promise privacy

Your letters.{" "} Nobody else's.

When you write or upload anything{" "} (yes, even images) here, it gets encrypted in your browser before anything leaves your device. What reaches the server is something unreadable—and the server has no way to change that, because the key never left you.

you see

Your Password


B@z1ng4A

Your Letter

Hello friend,

I've never told this to anyone...

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut semper, justo eget vehicula vestibulum, enim enim suscipit lectus, et sagittis nibh risus vel metus. Quisque eu ornare ante, et gravida mauris. Vivamus massa justo, sagittis non viverra sed, sodales non nisi. Nunc semper, massa a aliquet dictum, enim nisi malesuada orci, et elementum lectus turpis et velit. Nam vel felis vitae tortor dignissim malesuada. Nam suscipit, justo eu elementum pulvinar, magna sem tempor ex, vitae iaculis tellus odio non nisl. Duis dolor orci, viverra ut finibus sed, aliquet vitae tortor. Proin sodales ipsum ac ipsum hendrerit tempus. Nunc nec nibh nibh. Aenean consequat auctor posuere. Integer sed magna volutpat, efficitur nisl ut, dignissim neque. Vestibulum convallis nec dui a euismod. Duis dignissim magna in mattis pulvinar. Sed blandit nibh quis arcu ornare, sit amet fermentum nisi rhoncus.

server see

Your Password

9e54d05f88bdd67a675b03bf1cd0a1647e2109b5aa18185ff6a9ba4c6959a19d

Your Letter

SZ0Mq9M9sCZsdDB8HGjk7JfWG56Kaot8Lgma74MCusDUYibUGoR7VviWgvc341pvFV9/IAyot9KtlDvwIX1ZmUw9Oh340JMaajRQ7iNgVjHgAwmJAr2cLbReNqlF6xzaf3mIYkiK9BXNQekk2h/9XufklsqoIXpaK1re7xWQ8mdddzy6z4EQFVH/Ev3np5ERW/ss7Z1kqYWUnANK7olWNL/7GgZmhU+L29rgbR52kcH9fng7gnEI3KEuISYExYCg81G1VaJYspkW3A4qwcet+jXdgmbKvkux5qNw6gyNi9d/YqKV7OUNrmoH190rHdJ5A7HOIv3/SvPhb3Zm4sNF5PcMxmhM0+T9m5PejV1GhV9bMBHbbgacay7hZJU3O0+q+7fBAE/+pqfvZdv78lLDFSdtHAXUpYOvHPrI5BNNwuS3T+FK1zjurLnUPThlOSYRICoZSUcxVswXz897PoRmFNNvbal0dpKUmCFrBwV5c/W3d1+iZor5msbm/JxpbNtys59e0StSTwHKsxvxm/rTuUAxWSOmzt13MDBxxd2zyVnX8rtQ7mEjMJ8IHHpvhKjONoa2S11VBJY68Ee1vNrw7htu+wajvmXhHAyfh1lYql8pu8VvPUG7leEQ9I0pMY35Y/C1cYCBLkDT5zf8NeZFtbp0BNgHd+QDVSFH+GSnvTskU2BCio3YE+zE6cDhvLUOMy3e5RAtPqsi5VzpEUcdCwph+Z+1pFlTxiEZ62i4wNpqw2lhS3b/E9ifJgnncSgRHLtfw/VxHZCRc4tBQ24xSZ507lSlQch+5lQeO7rx2htgd2D7aGNx/UN/xmeuEd4a28AxNOVS3uYh3wTDh8CSXyBRCRPxrANOV1ZBojdfK+v5fOJNPgDn3r5/pG80L3FTkecRB0zFuKNG8jIzi5ADx9k4SlhRNo17gPl2if8gRA6tzTae4kbzieG+woxhUWj/qvXg0MQmg59VTK2HHS34exdKDP9a561svlw+lJ2AtM1EL9srJk8i3kiyEPUeIlaLl3AfgbbSuC2RhlzFFAYuQ06rbsSvEoe4rrYeMXxL9jwVsXX0xrp8H25mOJu3ahn5pFYzADMSGf4L11H1vDArpefj/lW+8zcmogxxBktYYNF/qU4v+9367hp4MEn/84tQPpmb47TL+XpVnl9tQ3r9OfOaW3zX7NkWZbqoX7OgdgHOtTLP/euQujSs2MAzMO4BmbuCS7pR/GTZwDqF1sXiWAkunjo2qpKHieqlvSVmtwEhh6wsNwYTKEkddmTqvKSx0fHRvs3D9lMGJfg7wLSz/3Otx3G65tk9l/3B3r87qQTvbqXmcfnFdEIaR8mO/yMyCKnxtJkJb3lEzNUOrvnSxwL7Gyn54TLTWA==

); } function SpecsSection() { const [isModalOpen, setIsModalOpen] = useState(false); return (

S'more  Specs

uses{" "} Zero Knowledge{" "} E nd— 2 — E nd  E ncryption {" "} for your letters, with{" "} Envelope Encryption {" "} for the keys.

This means, both the{" "} encryption and{" "} decryption runs on your device, in your browser.

But you— only you—hold the very thing that opens that box,{" "} your password.

Nothing on the server is readable without your actual password.
Even if someone were to breach in, all they'd find is encrypted noise and ain't no way they crackin' it.{" "} (unless this happens)

setIsModalOpen(false)}>
pi ku e2e diagram

Of course, this level of{" "} privacy comes with a catch. No password reset{" "} for you.

Your original password is never stored on the server. So, if it's forgotten, the letters stay sealed foreeeeveer.

); } function OSSSection() { return (

is{" "}  private only for  your letters {" "} {" "} open source !

is ...uhhh... pretty secure. Every claim about privacy and encryption is publicly available in the code so you don't have to take my word at it.

You can also{" "} Self-host{" "} in just 4 steps. 

            git clone https://git.ramvignesh.dev/me/pi-ku.git
          
            cd pi-ku
          
            ./scripts/setup.sh
          
            ./scripts/start.sh
View Source .

Found something to report or request?{" "} Please say so.

Built on the shoulders of open source.

wouldn't exist without the work of people who chose to build in the open.

a big thanks to

Web Crypto API : Browser-native cryptography that runs entirely on your device. The backbone of everything secure—your letters, keys—here.

DaisyUI {" "} ·{" "} Fabric.js {" "} ·{" "} Phosphor Icons : The brilliant work by others that let me focus on the core experience instead of re-inventing the wheel.

Open source is what made possible. It always feels right to give it back the same way.

); } function StorySection() { return (

The Story

குறிப்பு note. remark.
{/* Dict Card */}
pin·ku·rip·pu
/noun/ tamil
  1. postscript; a note written after the letter is signed.
    "the most honest thing was always in the{" "} பி. கு."
  2. the thing you almost didn't say.

is an abbreviated transliteration of the Tamil word for{" "} {" "} —the thing you add after you've already signed your name, what you write when you thought you were finished, but weren't.

Most of what we actually mean to say never gets said.
It sits in drafts , in half-written notes, in the pause before we change the subject.
Those words{" "} {" "} stay unsaid —a quiet weight difficult to bear.

And that's okay...

was built for putting that weight down.
A space for the letters you meant to send, the afterthoughts that deserved more than silence.

); } function ForWhoSection() { return (

Who is
this for?

wasn't built for one kind of person, but a particular kind of feeling— {" "} the one that lingers very quietly {" "} —fragile, yet never breaks.

See if any of these feel too familiar to you
); } function ArchetypesSection() { return (

The Archetypes

of writing

{" "} To someone you can't reach anymore.

A person who left. A relationship that ended without a real ending. Someone who's still in your life but will never know what you felt. Some conversations just close before they're finished.

Write the letter anyway. Keep it close.

01
{" "} To someone who's still here.

Not every letter is about distance. Sometimes you just need to say something properly—without a text thread, without the noise of a conversation already in motion. A letter slows it down.

Give people their due flowers while they can still smell them.

02
{" "}
To yourself, further along.

Not a journal. Not a note-to-self. A proper letter—to whoever you'll be in a year, or five, or ten.
Ask yourself of the healed wounds, forgotten fears, or the things you finally learned to live with.

Set a date and let a letter surprise you when you've long forgotten writing it.

03
{" "} For liberation.

Some unsaid words just need to leave your headspace. There's no recipient, no subject line, no send button. Just the act of putting it somewhere outside of yourself.
That's sometimes enough.

Say it once. All of it. Then let it fade.

04
); } function AttributionSection() { const [hover, setHover] = useState<{ visible: boolean; x: number; y: number; }>({ visible: false, x: 0, y: 0 }); const navigate = useNavigate(); return (
{/* Saajan hover image */} {hover.visible && ( )}

Honest Speak

Hi.

Thank you so much for making it this far. Really.

took a while to exist.
This started as a{" "} CS50W {" "} capstone—one I kept postponing until I ran out of excuses. When I sat down to build it, it felt heavier than a typical assignment—not just because things were difficult. It had to be something that outlasted the grade. I wanted to make this one count more than anything else I'd ever made. Something as close to perfect as I could get it. Something to be remembered for—a Swan Song if you will.

So, I gave it all I've got.

Of course, frustrations, id-exisi crises, crept in from time to time. But helped me re-kindle the love for the odd hours spent obsessing over the tiniest UX decisions and endlessly polishing the UI{" "} (only if I could've just made my mind up on one design system sooner, instead of paddling in a sea of muses, muses everywhere) . I know I've shared the nuts and bolts of {" "} here—the core philosophies, how it all works—but the heart of it is really something you have to find by exploring it yourself.

The "why" behind all of this didn't just appear out of nowhere. For a while, I kept coming back to{" "} setHover({ visible: true, x: e.clientX, y: e.clientY, }) } onMouseMove={(e) => setHover((h) => ({ ...h, x: e.clientX, y: e.clientY, })) } onMouseLeave={() => setHover((h) => ({ ...h, visible: false }))} > Saajan {" "} from{" "} The Lunchbox {" "} —brought to life with such subtle brilliance by{" "} Irrfan Khan {" "} —the quiet emotional weight he carries through a lonely and mechanized life, right up until those letters arrive and something inside him finally loosens. The ending feels like a deep sigh of{" "} "it is what it is" , but the simple act of writing—of letting the unsaid out—offered him a brief, yet necessary ease. I think about that a lot.

There's a lot that goes{" "} unsaid {" "} these days. Not for a lack of feeling, not for the lack of time, but because the ways we reach each other have quietly changed. We're always reachable digitally, yet somehow the things that actually matter most end up staying inside—a trapped one at that.
Maybe writing can/will help. Maybe putting words somewhere deliberate makes them feel less like a weight you're carrying alone.

Or maybe it won't—but it's worth a try.

is for that try. I hope it helps. Really.

—Ram

P.S. And just so we're clear—I wrote every word of this myself—as I continue to back{" "} Em DASH . Why should AI get to have all the fun with 'em em dashes?{" "} (get it?)

{" "} I think we forget things if there is nobody to tell them. ~ Saajan Fernandes,{" "} The Lunchbox
); }