cedar-webapp

As a frontend developer, implement the CalculatorContainer section for the Calculator page. This section is the core interactive calculator component featuring: (1) React state management with useState hooks for display, expression, prevValue, operator, waitingForOperand, and activeOp; (2) Framer Motion useSpring and useMotionValue for a draggable floating calculator with springX/springY spring physics (stiffness: 300, damping: 30); (3) GSAP entrance animation fromTo with opacity/y/scale on calcRef (power3.out, 0.7s, delay 0.15); (4) GSAP display value change animation fromTo with opacity/y on displayRef (power2.out, 0.2s) triggered on every display state change; (5) calculator logic including inputDigit, calculate (supporting +/−/×/÷ with divide-by-zero Error guard), handleOperator callbacks via useCallback; (6) dynamic display CSS class switching between cc-result, cc-result--long, cc-result--vlong based on value length; (7) formatDisplay function handling exponential notation for numbers >= 1e12, decimal edge cases. Component references calcRef and displayRef for GSAP targeting.

As a frontend developer, implement the BackgroundMotif section for the Calculator page. This section renders a time-of-day-aware animated background with: (1) four TIME_PALETTES (morning/afternoon/evening/night) each defining base gradient, overlay gradient, glowColor, dotColor, and label; (2) getTimeOfDay() helper reading current hour and returning period key; (3) useState with getTimeOfDay initializer for currentPeriod; (4) useEffect to set initial CSS gradient on baseRef and overlayRef from TIME_PALETTES on mount; (5) GSAP-driven ambient glow animations using gsap.context with three glow refs (glow1Ref, glow2Ref, glow3Ref) — glow1 fades to opacity 0.7 over 3s then drifts x:30/y:20 over 18s with sine.inOut yoyo repeat:-1; (6) checkIntervalRef for periodic time-of-day re-checks; (7) timelineRef for managing GSAP transition sequences; (8) AnimatePresence from framer-motion for period label transitions. Component imports both gsap and framer-motion AnimatePresence. This section is independent of CalculatorContainer and can be built in parallel.