Calendar Wave

1"use client";
2 
3import { useState, useMemo, useRef, useCallback } from "react";
4import { AnimatePresence, motion } from "motion/react";
5import { cn } from "@/lib/utils";
6 
7/**
8 * Calendar Wave — a calendar where days respond to your cursor
9 * like the surface of water.
10 *
11 * Move over the grid: nearby days rise toward you, creating a
12 * smooth cosine wave that ripples outward. Lifted cells brighten
13 * and cast deeper shadows. Click to select — the chosen day
14 * locks at peak height with a spring pop.
15 *
16 * The surface IS the interaction.
17 */
18 
19/* ── constants ── */
20const MONTHS = [
21  "January",
22  "February",
23  "March",
24  "April",
25  "May",
26  "June",
27  "July",
28  "August",
29  "September",
30  "October",
31  "November",
32  "December",
33];
34const DOW = ["Mo", "Tu", "We", "Th", "Fr", "Sa", "Su"];
35const CELL = 40;
36const GAP = 2;
37const STEP = CELL + GAP;
38const RADIUS = 110;
39const MAX_LIFT = 8;
40 
41/* ── date math ── */
42function dim(y: number, m: number) {
43  return new Date(y, m + 1, 0).getDate();
44}
45function soff(y: number, m: number) {
46  return (new Date(y, m, 1).getDay() + 6) % 7;
47}
48function pad(n: number) {
49  return String(n).padStart(2, "0");
50}
51function toKey(y: number, m: number, d: number) {
52  return `${y}-${pad(m + 1)}-${pad(d)}`;
53}
54function parseKey(k: string) {
55  const [y, m, d] = k.split("-").map(Number);
56  return { y, m: m - 1, d };
57}
58 
59/* ── wave math ── */
60function waveLift(mx: number, my: number, col: number, row: number): number {
61  const cx = col * STEP + CELL / 2;
62  const cy = row * STEP + CELL / 2;
63  const dx = mx - cx;
64  const dy = my - cy;
65  const dist = Math.sqrt(dx * dx + dy * dy);
66  if (dist >= RADIUS) return 0;
67  const t = dist / RADIUS;
68  return (MAX_LIFT * (1 + Math.cos(Math.PI * t))) / 2;
69}
70 
71/* ── sound ── */
72let _ctx: AudioContext | null = null;
73let _buf: AudioBuffer | null = null;
74 
75function _init() {
76  if (_ctx) return;
77  _ctx = new AudioContext();
78  const n = Math.ceil(_ctx.sampleRate * 0.003);
79  _buf = _ctx.createBuffer(1, n, _ctx.sampleRate);
80  const ch = _buf.getChannelData(0);
81  for (let i = 0; i < n; i++) {
82    const t = i / n;
83    ch[i] = (Math.random() * 2 - 1) * Math.pow(1 - t, 4) * 0.12;
84  }
85}
86 
87let _last = 0;
88function _tick() {
89  const now = Date.now();
90  if (now - _last < 60) return;
91  _last = now;
92  if (!_ctx || !_buf) return;
93  const s = _ctx.createBufferSource();
94  s.buffer = _buf;
95  s.connect(_ctx.destination);
96  s.start();
97}
98 
99/* ── types ── */
100export interface CalendarWaveProps {
101// … truncated