lisse

FigmaとiOSの角丸をWebでも

lisseはsquircle、FigmaやiOSが使う連続曲線の角丸をWebで描くJavaScriptライブラリ。CSSのborder-radiusは単純な円弧で角がやや硬く見えるが、squircleは曲率がなめらかに変化して柔らかい。デモでは両者の差分が赤いくさびで可視化される。

使い方と対応範囲

React・Vue・Svelteのバインディングと、フレームワーク非依存のコアを用意。各コーナーを個別に制御でき、ボーダーとシャドウにも対応する。border-radiusの置き換えとして、カードやボタンの角の印象を一段整えられる。