Concept

The Kitty Calendar reimagines time-tracking by adopting a cat's perspective on life. Instead of optimizing every hour around human anxieties—deadlines, obligations, social performances—it recenters around simple pleasures: afternoon naps, meal times, sunbeam locations, and the sacred art of doing nothing.

This isn't just cute aesthetics. Cats don't apologize for rest. They don't feel guilty about boredom. They don’t work, or even consider employment. They exist in moments rather than constantly preparing for future ones. I really wish I could be a cat sometimes. By framing our days through their eyes, we create permission to value different things—to recognize that Christmas might just mean "more people to pet me" rather than family drama, or that a Tuesday afternoon sunbeam deserves the same reverence as a career milestone.

The project fulfills a technical prompt to create "a website that evolves over time," but conceptually, it's about collective slowness. As users add their own stickers and observations, the calendar becomes a collaborative scrapbook of small joys that accumulate into something meaningful—not through achievement, but through attention. This project is done in partnership with Xinyi Li.

Visual Language:

  • Handdrawn, messy scrapbook aesthetics that reject digital perfectionism

  • Vibrant, playful color blocking that gives each month distinct personality

  • Deliberately imperfect placement—like physical stickers that can't be cleanly undone

  • Collage techniques that make the navigation itself feel tactile and crafted

Conceptual References:

  • The temporal philosophy of animals who live in present tense

  • Journals and planners as acts of self-care rather than self-optimization

  • The radical act of prioritizing "boring" activities (grooming, resting, observing)

  • Reframing cultural milestones through an outsider perspective that strips away social baggage

Interaction Design:

  • Physical book metaphor—you open it, flip through pages, interact with spreads

  • Sticker placement as low-stakes creative expression without the pressure of "content creation"

  • Delete/clear functions hidden away to discourage perfectionism

  • Personal accounts so each user builds their own private world, not performing for others

The calendar pages took four hours of drawing to establish a coherent-but-chaotic visual system. Each month needed distinct colors to feel different while maintaining overall harmony. The original plan was to refine sketches into clean finals, but the messy, immediate quality felt more honest—more like how a real cat would experience life, without overthinking.

The calendar dates are set for 2026, making it genuinely usable rather than purely conceptual. The cover was created by "folding" a two-page spread digitally, ensuring bookmarks and decorative elements maintained continuity. Month navigation buttons were crafted through collage, cutting and layering pieces from different pages to create a physical, assembled feeling.

The Sticker Panel is usable throughout each month page, as well as accessible (for preview only) in the main table of contents.

The sticker selection system uses invisible hotspots that create the illusion of clicking directly on hand-drawn elements. On both the homepage and individual month spreads, a semi-transparent red rectangle with a dotted border initially marks the "sticker sheet" area—visible during development for precise positioning over the illustrated sticker drawer.

Once positioned correctly using percentage-based coordinates, the visual indicators are commented out in the CSS, leaving only the functional clickable zone. This creates a seamless experience where users feel like they're interacting with the scrapbook illustration itself rather than a traditional UI element.

When hovering over individual stickers within the sheet, they respond with a hover effect that invites interaction, and selected stickers gain a pink indication to show they're active. This same hotspot philosophy extends to the calendar grids themselves: each two-month spread has two separate invisible zones (one per month) that restrict sticker placement to the actual calendar cells.

By temporarily uncommenting the CSS during setup, these zones appear as semi-transparent green rectangles with dashed borders, allowing for pixel-perfect alignment with the hand-drawn grids. The result is a system that feels tactile and analog—like peeling a sticker from a sheet and placing it on paper—while maintaining the digital affordance of precise clickable areas that prevent visual chaos.

Sticker Placement Zones: Creating invisible hotspots that overlay exactly on hand-drawn calendar grids required percentage-based positioning that worked across different layouts. Each spread needed two separate hotspots (left month, right month) to prevent stickers from landing on decorative elements.

Database Persistence: Stickers needed to save per-user and per-month, requiring careful session management. The middleware order initially caused stickers to disappear on refresh—a frustrating bug that required multiple server restarts to debug.

Intentional Friction: Delete and clear buttons were deliberately tucked away in the top-left corner with the back button. All three represent "undoing" actions that take you away from the current state—grouping them spatially reinforces that they're not the primary interaction. In a physical calendar, you can't cleanly remove a sticker without leaving residue. We wanted to preserve that slightly-permanent feeling even in a digital space.

Navigation Logic: The homepage conditionally renders based on login state (same file, different views). The table of contents overlays twelve clickable month markers on a hand-drawn background using precise coordinate positioning.

Workload Distribution

Xinyi: Visual design, illustration, calendar page artwork, cover design, file organization, routing structure, asset management, PNG/png debugging

Sam: Sticker illustration (9 activities), homepage/login conditional rendering, table of contents CSS positioning, hotspot setup for sticker zones and navigation, delete/clear button logic, NeDB database implementation, session management, API routing, middleware debugging