{"id":27745628,"url":"https://github.com/cyansalt/corner-smoothie","last_synced_at":"2026-02-14T11:03:57.129Z","repository":{"id":277485170,"uuid":"932592579","full_name":"CyanSalt/corner-smoothie","owner":"CyanSalt","description":"Create elements with Figma corner smoothing","archived":false,"fork":false,"pushed_at":"2025-11-28T02:30:19.000Z","size":135,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-11-29T20:34:08.490Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"isc","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/CyanSalt.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2025-02-14T06:57:29.000Z","updated_at":"2025-11-28T02:30:23.000Z","dependencies_parsed_at":null,"dependency_job_id":"af23be84-a4d6-4a5f-8f3d-0d34f689bd7a","html_url":"https://github.com/CyanSalt/corner-smoothie","commit_stats":null,"previous_names":["cyansalt/corner-smoothie"],"tags_count":6,"template":false,"template_full_name":null,"purl":"pkg:github/CyanSalt/corner-smoothie","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/CyanSalt%2Fcorner-smoothie","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/CyanSalt%2Fcorner-smoothie/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/CyanSalt%2Fcorner-smoothie/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/CyanSalt%2Fcorner-smoothie/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/CyanSalt","download_url":"https://codeload.github.com/CyanSalt/corner-smoothie/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/CyanSalt%2Fcorner-smoothie/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":29443447,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-02-14T10:51:12.367Z","status":"ssl_error","status_checked_at":"2026-02-14T10:50:52.088Z","response_time":53,"last_error":"SSL_read: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2025-04-28T19:53:23.887Z","updated_at":"2026-02-14T11:03:57.101Z","avatar_url":"https://github.com/CyanSalt.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# corner-smoothie\n\n[![npm](https://img.shields.io/npm/v/corner-smoothie.svg)](https://www.npmjs.com/package/corner-smoothie)\n\n![Squircle without smoothing](./playground/squircle.svg)\n\u0026nbsp;\n![Squircle with iOS smoothing](./playground/squircle-smoothie-60.svg)\n\u0026nbsp;\n![Squircle with full smoothing](./playground/squircle-smoothie-100.svg)\n\nCreate elements with [Figma corner smoothing](https://www.figma.com/blog/desperately-seeking-squircles/).\n\n[Live Demo](https://raw.githack.com/CyanSalt/corner-smoothie/main/playground/index.html)\n\n## Usage\n\n### CSS Painting API (Recommended)\n\n\u003e [!IMPORTANT]\n\u003e See [Browser compatibility](https://developer.mozilla.org/en-US/docs/Web/API/CSS_Painting_API#browser_compatibility).\n\n```js\nCSS.paintWorklet.addModule('\u003curl-to-corner-smoothie-worklet\u003e')\n```\n\n#### Using CDN (jsdelivr)\n\n```js\nCSS.paintWorklet.addModule('https://cdn.jsdelivr.net/npm/corner-smoothie/dist/worklet.js')\n```\n\n#### Using Vite\n\n```js\nimport smoothieWorklet from 'corner-smoothie/worklet?url'\n\nCSS.paintWorklet.addModule(smoothieWorklet)\n```\n\n### Registering (Required)\n\n\u003e [!NOTE]\n\u003e `registerProperties` relies on the CSS Properties and Values ​​API, which [has different browser compatibility](https://developer.mozilla.org/en-US/docs/Web/API/CSS_Properties_and_Values_API#api.css.registerproperty_static).\n\n```js\nimport { registerProperties } from 'corner-smoothie'\n\nregisterProperties()\n```\n\n#### CSS Declarations\n\n```css\n.my-element {\n  border-radius: 12px;\n}\n\n@supports (mask-image: paint(smoothie-mask)) {\n  .my-element {\n    --smoothie-border-radius: 12px;\n    --smoothie-border-smoothing: 0.6;\n    border-radius: 0;\n    mask-image: paint(smoothie-mask);\n  }\n}\n```\n\n```css\n.my-element {\n  background-color: cyan;\n  border-radius: 12px;\n}\n\n@supports (background-image: paint(smoothie-background)) {\n  .my-element {\n    --smoothie-background-color: cyan;\n    --smoothie-border-radius: 12px;\n    --smoothie-border-smoothing: 0.6;\n    background-color: transparent;\n    border-radius: 0;\n    background-image: paint(smoothie-background);\n  }\n}\n```\n\nThe `border-radius: 0` above can also be omitted, since smooth rounded corners are completely inside the tangent rounded corners.\n\n#### Supported custom properties\n\n- `--smoothie-background-color`: Alternative to `background-color`. Available in background mode.\n- `--smoothie-border-color`: Alternative to `border-color`. Available in background mode.\n- `--smoothie-border-radius`: Alternative to `border-radius`. Available in **BOTH** modes.\n- `--smoothie-border-radius-smoothing`: A decimal between 0 and 1, aka `ξ` in [Figma smoothing parameterized](https://www.figma.com/blog/desperately-seeking-squircles/#breakthrough-smoothing-parameterized). The larger the value, the smoother the corners. Available in **BOTH** modes.\n    - It is consistent with the iOS specification when specified as `0.6`.\n- `--smoothie-border-width`: Alternative to `border-width`. Available in background modes.\n\n### JS API\n\n```js\nimport { createMaskImage } from 'corner-smoothie'\n\nconst mask = createMaskImage(\n  { width: 72, height: 72 },\n  { borderRadius: 12, borderRadiusSmoothing: 0.6 },\n)\nelement.style.maskImage = mask\n```\n\n```js\nimport { createBackgroundImage } from 'corner-smoothie'\n\nconst background = createBackgroundImage(\n  { width: 72, height: 72 },\n  { borderRadius: 12, borderRadiusSmoothing: 0.6, backgroundColor: 'cyan' },\n)\nelement.style.backgroundImage = background\n```\n\nJS API is especially useful for browsers that do not support the CSS Painting API such as Firefox. You can use `ResizeObserver` to have a similar experience to the CSS Painting API:\n\n```js\nimport { createMaskImage } from 'corner-smoothie'\n\nconst observer = new ResizeObserver(entries =\u003e {\n  for (const entry of entries) {\n    if (entry.borderBoxSize.length) {\n      entry.target.style.maskImage = createMaskImage({\n        width: entry.borderBoxSize[0].inlineSize,\n        height: entry.borderBoxSize[0].blockSize,\n      }, {\n        // Normally you can't use the CSS Typed OM API\n        // because you only need to use the CSS Painting API in these browsers\n        borderRadius: parseFloat(getComputedStyle(entry.target).getPropertyValue('--smoothie-border-radius')),\n        borderRadiusSmoothing: 0.6,\n      })\n    }\n  }\n})\n\nobserver.observe(element)\n```\n\n\u003e Some older browsers may not support [`borderBoxSize`](https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserverEntry/borderBoxSize), you may need to use [`contentRect`](https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserverEntry/contentRect) instead.\n\n## Differences between mask and background\n\n| Feature | Mask | Background |\n| --- | --- | --- |\n| Corner radius | ✅ | ✅ |\n| Background image | ✅ | ❌ |\n| Border | ❌ | ✅ |\n| Overflow content | ❌ | ✅ |\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcyansalt%2Fcorner-smoothie","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcyansalt%2Fcorner-smoothie","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcyansalt%2Fcorner-smoothie/lists"}