import { useRef, useState, useEffect } from "react"; import { ChevronLeft, ChevronRight } from "lucide-react"; import NumberFlow from "@number-flow/react"; import gsap from "gsap"; class CustomSplitText { element: HTMLElement; chars: HTMLElement[] = []; words: HTMLElement[] = []; lines: HTMLElement[] = []; originalHTML: string; constructor(element: HTMLElement) { this.element = element; this.originalHTML = element.innerHTML; this.split(); } split() { const originalContent = this.element.innerHTML; this.element.innerHTML = ""; const tempDiv = document.createElement("div"); tempDiv.innerHTML = originalContent; const processNode = (node: Node, container: HTMLElement) => { if (node.nodeType === Node.TEXT_NODE) { const text = node.textContent || ""; const words = text.split(/\s+/).filter((word) => word.length > 0); words.forEach((word, i) => { const wordSpan = document.createElement("span"); wordSpan.className = "word"; this.words.push(wordSpan); Array.from(word).forEach((char) => { const charSpan = document.createElement("span"); charSpan.className = "char"; charSpan.textContent = char; this.chars.push(charSpan); wordSpan.appendChild(charSpan); }); container.appendChild(wordSpan); if (i < words.length - 1) { const space = document.createTextNode(" "); container.appendChild(space); } }); } else if (node.nodeType === Node.ELEMENT_NODE) { if ((node as HTMLElement).tagName === "BR") { const br = document.createElement("br"); container.appendChild(br); return; } const newElement = document.createElement( (node as HTMLElement).tagName.toLowerCase() ); Array.from((node as HTMLElement).attributes).forEach((attr) => { newElement.setAttribute(attr.name, attr.value); }); node.childNodes.forEach((childNode) => { processNode(childNode, newElement); }); container.appendChild(newElement); } }; tempDiv.childNodes.forEach((node) => { processNode(node, this.element); }); let currentLine: HTMLElement | null = null; Array.from(this.element.childNodes).forEach((node) => { if (node.nodeName === "BR") { currentLine = null; } else { if (!currentLine) { currentLine = document.createElement("div"); currentLine.className = "line"; this.lines.push(currentLine); this.element.insertBefore(currentLine, node); } if (node !== currentLine) { currentLine.appendChild(node); } } }); } revert() { this.element.innerHTML = this.originalHTML; this.chars = []; this.words = []; this.lines = []; } } interface JournalEntryProps { day: number; month: string; message: string; onPrevDay: () => void; onNextDay: () => void; setCurrentDay: (day: number) => void; } const JournalEntry = ({ day, month, message, onPrevDay, onNextDay, setCurrentDay, }: JournalEntryProps) => { const selectedDayRef = useRef<HTMLButtonElement>(null); const prevDayRef = useRef<number>(day); useEffect(() => { const allDayButtons = document.querySelectorAll(".day-button"); gsap.to(allDayButtons, { backgroundColor: "transparent", color: "#6b7280", scale: 1, duration: 0.2, ease: "power1.out", }); if (selectedDayRef.current) { gsap.to(selectedDayRef.current, { backgroundColor: "#f5f2ea", color: "#1f2937", scale: 1.05, duration: 0.3, ease: "back.out", }); const container = selectedDayRef.current.parentElement; if (container) { const buttonTop = selectedDayRef.current.offsetTop; const containerHeight = container.clientHeight; const scrollPosition = buttonTop - containerHeight / 2 + selectedDayRef.current.clientHeight / 2; gsap.to(container, { scrollTop: Math.max(0, scrollPosition), duration: 0.4, ease: "power2.out", }); } } prevDayRef.current = day; }, [day]); const prevMessageRef = useRef<string>(""); const splitTextRef = useRef<CustomSplitText | null>(null); useEffect(() => { const messageElement = document.querySelector( ".message-animate" ) as HTMLElement; if (messageElement) { const formattedMessage = message .split("\n") .map((line) => `<div class="message-line">${line}</div>`) .join(""); if (prevMessageRef.current === "") { messageElement.innerHTML = formattedMessage; prevMessageRef.current = message; return; } messageElement.innerHTML = formattedMessage; if (splitTextRef.current) { splitTextRef.current.revert(); } const splitText = new CustomSplitText(messageElement); splitTextRef.current = splitText; gsap.set(splitText.chars, { opacity: 0, y: "100%", }); splitText.chars.forEach((char) => { gsap.to(char, { opacity: 1, y: "0%", duration: 0.5, ease: "back.out", delay: Math.random() * 0.3, }); }); prevMessageRef.current = message; return () => { if (splitTextRef.current) { splitTextRef.current.revert(); splitTextRef.current = null; } }; } }, [message]); return ( <div className="bg-[#f5f2ea] h-96 rounded-[36px] p-2 flex items-start relative overflow-hidden border-0"> <div className="w-16 h-full bg-white flex flex-col items-center justify-start py-2 rounded-[32px] gap-1 overflow-y-scroll no-scrollbar"> {dailyMessages.map((message) => ( <button key={message.day} ref={message.day === day ? selectedDayRef : null} onClick={() => setCurrentDay(message.day)} className="day-button size-10 shrink-0 font-medium rounded-full flex items-center justify-center text-lg" > {message.day} </button> ))} </div> <div className="w-full flex flex-col gap-7 p-4 pl-6"> <div className="flex justify-between items-center w-full"> <div className="text-2xl flex items-center gap-2 text-gray-500 font-medium"> <span>{month}</span> <NumberFlow value={day} /> </div> <div className="flex space-x-2"> <button onClick={onPrevDay} className="size-10 rounded-full bg-white flex items-center justify-center text-gray-500" > <ChevronLeft size={24} /> </button> <button onClick={onNextDay} className="size-10 rounded-full bg-white flex items-center justify-center text-gray-500" > <ChevronRight size={24} /> </button> </div> </div> <div className="text-xl text-gray-800 font-medium leading-relaxed whitespace-pre-line message-animate"> {message} </div> </div> </div> ); }; export default function App() { const [currentDay, setCurrentDay] = useState<number>(13); const handlePrevDay = () => { setCurrentDay((prev) => (prev > 1 ? prev - 1 : prev)); }; const handleNextDay = () => { setCurrentDay((prev) => (prev < dailyMessages.length ? prev + 1 : prev)); }; const currentMessage = dailyMessages.find((msg) => msg.day === currentDay) || dailyMessages[0]; const currentMonth = "May"; return ( <main className="relative w-full min-h-screen flex items-start md:items-center justify-center px-4 py-10"> <div className="w-full max-w-md"> <JournalEntry day={currentDay} month={currentMonth} message={currentMessage.message} onPrevDay={handlePrevDay} onNextDay={handleNextDay} setCurrentDay={setCurrentDay} /> </div> </main> ); } type DailyMessage = { day: number; message: string; }; const dailyMessages: DailyMessage[] = [ { day: 1, message: "Started a new book today 📚.\nGot completely lost in the story 🌟.\nThe characters feel so real already.\nCan't wait to see where the plot goes.", }, { day: 2, message: "Morning run by the lake 🏃‍♀️.\nThe sunrise was breathtaking 🌅.\nFelt energized the rest of the day.\nMight make this a new routine.", }, { day: 3, message: "Tried that new café downtown ☕.\nTheir pastries are heavenly 😋.\nThe music was soft and calming.\nI could spend hours there.", }, { day: 4, message: "Reconnected with an old friend 📱.\nTalked for hours like no time had passed 🕰️.\nWe laughed like teenagers again.\nSuch moments are rare and precious.", }, { day: 5, message: "Planted herbs in the garden 🌿.\nLooking forward to fresh basil soon 🍃.\nThe sun was gentle and warm.\nFelt at peace with the soil under my hands.", }, { day: 6, message: "Rainy day spent indoors 🌧️.\nMade comfort food and watched movies 🍲.\nThe thunder felt oddly comforting.\nPerfect day for slippers and tea.", }, { day: 7, message: "Visited the local market 🛒.\nCame home with too many cheeses 🧀.\nEveryone was so friendly and vibrant.\nI love the colors and chaos of markets.", }, { day: 8, message: "Discovered a hidden hiking trail 🥾.\nThe view at the top was worth every step 🏔️.\nSaw butterflies fluttering by.\nNature always surprises me.", }, { day: 9, message: "Cleared out the closet finally 👚.\nFeels so refreshing to let go 🧘‍♀️.\nFound clothes I forgot I owned.\nDecluttering is strangely therapeutic.", }, { day: 10, message: "Surprise call from my sister 📞.\nHer little one said my name for the first time 👶.\nIt made my heart swell with joy.\nFamily bonds are everything.", }, { day: 11, message: "Revisited old memories through photos 📸.\nFelt warm and nostalgic 💭.\nEvery picture tells a different story.\nIt reminded me how fast time flies.", }, { day: 12, message: "Impromptu picnic in the park 🧺.\nThe weather was perfect today 🌤️.\nBirds were singing all around us.\nDefinitely a moment to remember.", }, { day: 13, message: "Revisited old memories through photos 📸.\nFelt warm and nostalgic 💭.\nSent a few to friends and it sparked smiles 😊.\nWe laughed about the old days together.", }, { day: 14, message: "Adopted a plant from the nursery 🪴.\nNamed it Herbert and gave it a special spot 🪟.\nIt already brightens up the room.\nHope it thrives in its new home.", }, { day: 15, message: "Stayed up to watch the meteor shower ☄️.\nMade wishes on every falling star ✨.\nThe sky looked infinite tonight.\nFelt small but peaceful.", }, { day: 16, message: "Baked cookies from grandma's recipe 🍪.\nThe house smells amazing now 🏠.\nThe taste brought back childhood memories.\nCan’t wait to share them with friends.", }, { day: 17, message: "Took a different route home today 🚶‍♀️.\nDiscovered a charming little bookshop 📚.\nPicked up a novel on a whim.\nMight become my new favorite spot.", }, { day: 18, message: "Concert in the city tonight 🎵.\nStill hearing the music in my head 🎸.\nCrowd energy was incredible.\nLeft with a full heart and sore feet.", }, { day: 19, message: "Beach day with perfect waves 🌊.\nSand is still everywhere but worth it 🏖️.\nBuilt a shaky sandcastle.\nFelt like a kid again.", }, { day: 20, message: "Learned how to make sushi 🍣.\nIt wasn't pretty but tasted delicious 😄.\nThe rolling part was trickier than expected.\nProud of the effort either way.", }, { day: 21, message: "Fixed that leaky faucet myself 🔧.\nFeeling pretty accomplished today 💪.\nSaved a call to the plumber.\nMaybe I should fix more around the house.", }, { day: 22, message: "Stargazing from the backyard 🔭.\nSpotted constellations I hadn't seen before ⭐.\nThe night air was crisp and quiet.\nCould’ve stayed out there for hours.", }, { day: 23, message: "Sent a few photos to friends and it sparked smiles 😊.\nMade my day brighter too 🌞.\nWe ended up chatting for hours.\nIt’s nice to reconnect unexpectedly.", }, { day: 24, message: "Morning meditation by the window 🧘‍♂️.\nFeeling centered and peaceful today 🕊️.\nThe world feels slower after that.\nReady to start the day with calm.", }, { day: 25, message: "Found my old music collection 💿.\nDance party for one in the living room 💃.\nRediscovered some forgotten favorites.\nMusic really is time travel.", }, { day: 26, message: "Made bread from scratch 🍞.\nThe whole process was so therapeutic 🌾.\nIt rose perfectly in the oven.\nCan't stop eating it warm.", }, { day: 27, message: "Volunteered at the community garden 🌻.\nMet wonderful neighbors 👋.\nWe planted tomatoes together.\nFelt good to give time and energy.", }, { day: 28, message: "Early morning fog on the hills 🌫️.\nEverything looked like a fairytale 🏰.\nBarely a sound in the air.\nFelt like walking through a dream.", }, { day: 29, message: "Found a handwritten note in an old book 📝.\nWondering about its story 🤔.\nIt was dated 20 years ago.\nSuch little mysteries spark the imagination.", }, { day: 30, message: "Surprise package arrived 📦.\nJust what I needed right now 🎁.\nTurns out it was from an old friend.\nI love thoughtful gestures like that.", }, { day: 31, message: "Full moon tonight 🌕.\nSat outside and felt connected to something bigger 🌠.\nThe sky had a silver glow.\nWished the moment would last forever.", }, ];

Journal Navigation Interaction

Code

Stacks

Inspiration

X ( Twitter ) Post