Edit Pinch

Name

Also known as (comma separated)

Brief definition Multi-touch scaling gesture.

Notes

Tier Core Useful Reference Deleted

Controls schema (JSON array) [ { "id": "scale", "type": "select", "label": "Zoom level", "default": "100", "options": [ "100", "150", "200" ] }, { "id": "accent", "type": "color", "label": "Accent colour", "default": "#BFD9F2", "presets": [ "#241430", "#A8E6C1", "#F5C2E0", "#BFD9F2", "#D9C8F0", "#E8A020" ] }, { "id": "showAltControls", "type": "toggle", "label": "Show +/- alternative", "default": true } ]

Templates (JSON object keyed by format) { "html": "<div class=\"pinch-demo\" data-scale=\"{{scale}}\" style=\"--accent:{{accent}};\">\n <div class=\"pinch-demo__frame\">\n <svg class=\"pinch-demo__img\" width=\"64\" height=\"64\" viewBox=\"0 0 64 64\" aria-hidden=\"true\"><rect width=\"64\" height=\"64\" rx=\"8\" fill=\"var(--accent)\" /><circle cx=\"24\" cy=\"26\" r=\"7\" fill=\"#FAF7F2\" /><path d=\"M8 50l16-16 10 8 12-14 10 22z\" fill=\"#FAF7F2\" /></svg>\n <div class=\"pinch-demo__hands\">\n <svg width=\"26\" height=\"26\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"#241430\" stroke-width=\"2\" aria-hidden=\"true\"><path d=\"M9 21V11M9 11l-4 3M15 21V11M15 11l4 3\" /></svg>\n </div>\n </div>\n <p class=\"pinch-demo__caption\">Two-finger pinch to zoom &mdash; <strong>{{scale}}%</strong>. No touchscreen? Use Ctrl/Cmd + scroll, or the buttons below.</p>\n {{#if showAltControls}}\n <div class=\"pinch-demo__buttons\">\n <button type=\"button\" class=\"pinch-demo__btn\" aria-label=\"Zoom out\">&minus;</button>\n <button type=\"button\" class=\"pinch-demo__btn\" aria-label=\"Zoom in\">+</button>\n </div>\n {{/if}}\n</div>\n<style>\n.pinch-demo { width: 280px; font: 14px system-ui, sans-serif; color: #241430; }\n.pinch-demo__frame { position: relative; height: 110px; border-radius: 12px; background: #24143010; display: grid; place-items: center; overflow: hidden; }\n.pinch-demo__img { transform: scale(1); }\n.pinch-demo[data-scale=\"150\"] .pinch-demo__img { transform: scale(1.5); }\n.pinch-demo[data-scale=\"200\"] .pinch-demo__img { transform: scale(2); }\n@media (prefers-reduced-motion: no-preference) {\n .pinch-demo__img { transition: transform .2s; }\n}\n.pinch-demo__hands { position: absolute; bottom: 8px; right: 10px; opacity: .5; }\n.pinch-demo__caption { margin: 10px 0 0; font-size: 12px; color: #241430aa; }\n.pinch-demo__buttons { margin-top: 10px; display: flex; gap: 6px; }\n.pinch-demo__btn { width: 30px; height: 30px; border-radius: 7px; border: 1.5px solid var(--accent); background: #FAF7F2; font-size: 16px; cursor: pointer; }\n</style>", "tailwind": "<div class=\"pinch-tw pinch-tw--{{scale}}\" style=\"width:280px;font-family:system-ui,sans-serif;color:#241430\">\n <div class=\"relative h-[110px] rounded-xl grid place-items-center overflow-hidden bg-[#24143010]\">\n <svg class=\"pinch-tw__img\" width=\"64\" height=\"64\" viewBox=\"0 0 64 64\" aria-hidden=\"true\"><rect width=\"64\" height=\"64\" rx=\"8\" fill=\"{{accent}}\" /><circle cx=\"24\" cy=\"26\" r=\"7\" fill=\"#FAF7F2\" /><path d=\"M8 50l16-16 10 8 12-14 10 22z\" fill=\"#FAF7F2\" /></svg>\n <div class=\"absolute bottom-2 right-2.5 opacity-50\"><svg width=\"26\" height=\"26\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"#241430\" stroke-width=\"2\" aria-hidden=\"true\"><path d=\"M9 21V11M9 11l-4 3M15 21V11M15 11l4 3\" /></svg></div>\n </div>\n <p class=\"mt-2.5 text-xs text-[#241430aa]\">Two-finger pinch to zoom &mdash; <strong>{{scale}}%</strong>. No touchscreen? Use Ctrl/Cmd + scroll, or the buttons below.</p>\n {{#if showAltControls}}\n <div class=\"mt-2.5 flex gap-1.5\">\n <button type=\"button\" aria-label=\"Zoom out\" class=\"w-[30px] h-[30px] rounded-md border-[1.5px] text-base cursor-pointer\" style=\"border-color:{{accent}};background:#FAF7F2\">&minus;</button>\n <button type=\"button\" aria-label=\"Zoom in\" class=\"w-[30px] h-[30px] rounded-md border-[1.5px] text-base cursor-pointer\" style=\"border-color:{{accent}};background:#FAF7F2\">+</button>\n </div>\n {{/if}}\n</div>\n<style>\n.pinch-tw--150 .pinch-tw__img { transform: scale(1.5); }\n.pinch-tw--200 .pinch-tw__img { transform: scale(2); }\n</style>", "react": "export function PinchZoom({\n scale = \"{{scale}}\",\n accent = \"{{accent}}\",\n showAltControls = {{showAltControls}},\n}) {\n const factor = { \"100\": 1, \"150\": 1.5, \"200\": 2 }[scale];\n return (\n <div style={{ width: 280, fontFamily: \"system-ui, sans-serif\", fontSize: 14, color: \"#241430\" }}>\n <div style={{ position: \"relative\", height: 110, borderRadius: 12, background: \"#24143010\", display: \"grid\", placeItems: \"center\", overflow: \"hidden\" }}>\n <svg className=\"pz-svg\" width=\"64\" height=\"64\" viewBox=\"0 0 64 64\" aria-hidden=\"true\" style={{ transform: \"scale(\" + factor + \")\" }}>\n <rect width=\"64\" height=\"64\" rx=\"8\" fill={accent} /><circle cx=\"24\" cy=\"26\" r=\"7\" fill=\"#FAF7F2\" /><path d=\"M8 50l16-16 10 8 12-14 10 22z\" fill=\"#FAF7F2\" />\n </svg>\n </div>\n <p style={{ margin: \"10px 0 0\", fontSize: 12, color: \"#241430aa\" }}>Two-finger pinch to zoom &mdash; <strong>{scale}%</strong>. No touchscreen? Use Ctrl/Cmd + scroll, or the buttons below.</p>\n {showAltControls && <div style={{ marginTop: 10, display: \"flex\", gap: 6 }}>\n <button type=\"button\" aria-label=\"Zoom out\" style={{ width: 30, height: 30, borderRadius: 7, border: \"1.5px solid \" + accent, background: \"#FAF7F2\", fontSize: 16, cursor: \"pointer\" }}>&minus;</button>\n <button type=\"button\" aria-label=\"Zoom in\" style={{ width: 30, height: 30, borderRadius: 7, border: \"1.5px solid \" + accent, background: \"#FAF7F2\", fontSize: 16, cursor: \"pointer\" }}>+</button>\n </div>}\n <style>{`\n @media (prefers-reduced-motion: no-preference) {\n .pz-svg { transition: transform .2s; }\n }\n `}</style>\n </div>\n );\n}" }