Interactive Wall Calendar Component

A high-fidelity, interactive physical-to-digital calendar component built with Next.js 16, TypeScript, and high-performance animation libraries. This project replicates the tactile aesthetic of a spiral-bound wall calendar while providing modern utility features.

Key Features

Visual Fidelity and Aesthetics

• Realistic Spiral Binding: A detailed 3D-effect spiral binding system with dual-ring geometry and metallic shading.
• Physical Hanger Assembly: A visually accurate hanging bracket including a push-pin mount and centered wire loop.
• Thematic Month Design: Twelve unique monthly themes featuring high-resolution photography and coordinated accent color palettes.
• Premium Graphics: Custom SVG clip-paths used to create jagged, authentic paper cutout edges that adjust responsively across devices.

Interactive Components

• Dynamic Date Grid: A fully functional calendar grid with automated day calculation for any month and year.
• Range Selection System: Intuitive date range selection providing immediate visual feedback on the selection phase (start date, end date, and hover-preview).
• Notebook-Style Notes System: A persistent local note-taking interface styled with repeating linear gradients to mimic physical notebook paper.
• Navigation Controls: Smooth navigation between months with synchronized slide transitions and hero panel updates.

Animation and Motion

• GSAP Micro-interactions: Entrance animations for structural elements (spiral rings, hanger bracket) using GreenSock (GSAP) for highly polished staggered motion.
• Fluid Transitions: Framer Motion integrated for state-based animations, including grid slides and hero panel cross-fades.
• Staggered Entrance: Date cells cascade into place during month transitions using advanced GSAP staggering.

Performance and Reliability

• Advanced Image Optimization: Integration with the sharp library to automatically process high-resolution (10MB+) source images into optimized WebP formats.
• Next.js Image Architecture: Utilization of the next/image component for lazy loading, priority rendering, and high-DPI resolution scaling.
• Hydration Stability: Configured to handle browser extension interference and ensure consistent server-side rendering output.

Technical Stack

• Core: Next.js 16, React 19, TypeScript
• Styling: Tailwind CSS 4
• Animation: GSAP, Framer Motion
• Utilities: date-fns, Lucide React
• Optimization: Sharp

Installation and Development

First, install the dependencies:

npm install

Run the development server:

npm run dev

The application will be available at http://localhost:3000.