5d:I[333483,["/creators-assets/_next/static/immutable/chunks/356g_j0l71_46.js","/creators-assets/_next/static/immutable/chunks/15s1ft4k9lx-7.js","/creators-assets/_next/static/immutable/chunks/0x8sumr53pdkk.js","/creators-assets/_next/static/immutable/chunks/3pud1dqsw0-_7.js","/creators-assets/_next/static/immutable/chunks/1m75iqpnspynu.js","/creators-assets/_next/static/immutable/chunks/0c6romi9ma0is.js","/creators-assets/_next/static/immutable/chunks/3ohf-5_4hfjuq.js","/creators-assets/_next/static/immutable/chunks/2jjhfe7-w6y9a.js","/creators-assets/_next/static/immutable/chunks/325i2v5l4tnlq.js","/creators-assets/_next/static/immutable/chunks/0kisxyo3aw231.js","/creators-assets/_next/static/immutable/chunks/2b1mm8iiske-y.js","/creators-assets/_next/static/immutable/chunks/0i7m0zg6jfazw.js","/creators-assets/_next/static/immutable/chunks/3-hmotkz_bdv_.js","/creators-assets/_next/static/immutable/chunks/06bqtx1jsc1kz.js","/creators-assets/_next/static/immutable/chunks/3q5wansxm4vp6.js","/creators-assets/_next/static/immutable/chunks/14h9277o22-rl.js","/creators-assets/_next/static/immutable/chunks/3naniu4pnqfyw.js","/creators-assets/_next/static/immutable/chunks/2-y_r3u4wh2s3.js","/creators-assets/_next/static/immutable/chunks/456d4lcv9-syj.js","/creators-assets/_next/static/immutable/chunks/36-o7-3julke0.js","/creators-assets/_next/static/immutable/chunks/2xq6uu2rcdc2i.js","/creators-assets/_next/static/immutable/chunks/2y9gv91n8o3i9.js","/creators-assets/_next/static/immutable/chunks/41i4r4u9uolgz.js","/creators-assets/_next/static/immutable/chunks/02ciyo_cdpkrz.js","/creators-assets/_next/static/immutable/chunks/3e73rezw4k1a2.js","/creators-assets/_next/static/immutable/chunks/15q00pdqk0br3.js","/creators-assets/_next/static/immutable/chunks/293prjxu_wz0c.js","/creators-assets/_next/static/immutable/chunks/0l9v835j421-s.js","/creators-assets/_next/static/immutable/chunks/40oma2w708rd-.js","/creators-assets/_next/static/immutable/chunks/2x7-2b3jcc9x7.js","/creators-assets/_next/static/immutable/chunks/3_pg4jxj9aiiw.js","/creators-assets/_next/static/immutable/chunks/3k6sa9ujkqb5c.js","/creators-assets/_next/static/immutable/chunks/3l2h8slpbzxqo.js","/creators-assets/_next/static/immutable/chunks/2xgtw4s-tlhet.js","/creators-assets/_next/static/immutable/chunks/3b306xa-3tb7g.js","/creators-assets/_next/static/immutable/chunks/2fvzgkzqkig_w.js","/creators-assets/_next/static/immutable/chunks/3g6klxxyg4m8-.js","/creators-assets/_next/static/immutable/chunks/0qx5rzvbsd7bx.js","/creators-assets/_next/static/immutable/chunks/1cphzzg2t2qo2.js"],"PostDetailCard"] 5e:T965,

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.

5a:[["$","$L5d",null,{"post":{"id":"019ac5fd-d7ef-712a-9867-12b1607e39c7","title":null,"body":null,"bodyJson":null,"author":{"framerUserId":"d3701a36-636f-4d59-8923-11219a052031","name":"the 47design","slug":"the-47design","avatar":null,"followed":false,"followsYou":false},"media":[],"resources":[{"id":"k8PoJbZIRQqxQx9zLKbz","resolved":true,"title":"Calculator","body":"$5e","bodyJson":null,"introduction":"","slug":"calculator","author":{"framerUserId":"d3701a36-636f-4d59-8923-11219a052031","name":"the 47design","slug":"the-47design","avatar":null,"followed":false,"followsYou":false},"media":[{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/components/KSSKvbI79OqF9tKa30C2/calculator-o88vdiCdSNo8CsJ9rfT8UwombTHPXH","metadata":{"tint":{"h":0,"s":0,"l":57},"width":1600,"height":1200}}],"post":null,"createdAt":"2025-11-13T14:38:09.886Z","updatedAt":"2025-11-27T12:34:59.442Z","publishedAt":"2025-11-27T15:45:38.799Z","featuredAt":null,"approvedAt":null,"type":"component","attributes":{"url":null,"previewUrl":"https://normalcalculator.framer.website/","price":"9","paymentUrl":"https://buy.polar.sh/polar_cl_S2OPR2Nl1AU2k2XG8QDZWQyYbDXqyhCv0bjM511vRpi","workshop":false,"categories":[{"id":"7677fa83-43ce-41a2-a3fe-db438ec0fd33","name":"Interactive","slug":"interactive"}],"lastSaveId":"Owg9r13Ip0YSIHBGLlgf","tags":[]}}],"contests":[],"categories":[],"tags":[],"likes":{"count":2,"liked":false},"comments":{"count":1},"reposts":{"count":0,"reposted":false,"repostId":null},"version":1,"edited":false,"editedAt":null,"createdAt":"2025-11-27T15:45:38.799Z","updatedAt":"2025-11-27T15:45:38.799Z","reported":false}}],"$L5f"]

Suggested for you