Calculator

Product description A modern, soft-UI (neumorphic) calculator component built for Framer.

Product description A modern, soft-UI (neumorphic) calculator component built for Framer. It combines a clean, tactile look with robust, production-ready calculator behaviour and designer-friendly properties. The component is responsive and readable on phones and desktop, keeps input tidy by auto-scaling the display for long numbers, and includes a light/dark theme so it fits any UI. Everything is implemented with inline styles and Framer property controls so designers can drop it into a project and customize it without touching code. Key features (what we implemented) Neumorphic visual design - Soft, elevated card with inset display and rounded keys for a modern, tactile appearance. Light & Dark themes - Built-in theme palettes and a theme toggle. Also exposed as a Framer property so you can set the default theme from the inspector. Framer Properties / Controls - defaultTheme and showThemeToggle (plus width) exposed via addPropertyControls so designers can change theme and toggle visibility from the right-hand panel. Full calculator logic - Digit input, decimal point, AC (clear), ± (toggle sign), % (percent), basic arithmetic (+ − × ÷), equals, and 00 key. Works on mouse and touch. Pending-operation preview - Shows the accumulator + current operator above the display (e.g., 12 +) so users can see the pending calculation. Responsive, roomy layout - Larger default layout with increased spacing and comfortable hit targets; keys and display scale smoothly to avoid feeling cramped. Auto-shrinking display text - Display font size steps down automatically as the number of digits grows so values never overflow the display area. Press & touch visual feedback - Keys visually depress when pressed (quick flash) to give tactile feedback on click/touch. Wide 0 key and intuitive key sizing - 0 spans two columns for easier thumb use on mobile. Accessible interactions - Uses normal button elements (keyboard & assistive tech friendly) and avoids non-semantic clickable divs for controls. Easy insertion into Framer - Single-file React component with inline styles — drop it into a Framer project, insert the code component, then edit properties in the inspector.