Calculator

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.