three.jsを使った3Dなアニメーション背景を簡単に作成、設置できるライブラリ・「Vanta.js」
Vanta.js Vanta.jsはthree.jsを使った3DなWebGLアニメーションの背景を簡単に作成、設置できるライブラリです。 同ライブラリのプロジェクトサイト内で簡単な編集を、プレビューを確認しながらツールバーの調整...
Resource - フレームワーク
高速かつシンプルで使いやすいJavaScriptアニメーションライブラリ・「luge」
luge lugeは高速かつシンプルで使いやすいJavaScriptアニメーションライブラリです。プラグインを追加して拡張する事も可能です。 読み込むだけでhtmlタグに自動でデバイスやブラウザのclassも付与されるので異なる...
MUIベースのReact製アプリ開発向けに作られたシンプルでカスタマイズ性の高いコンポーネントを備えたスターターキット・「BRICKS」
BRICKS BRICKSはMUIベースのReact製アプリ開発向けに作られたシンプルでカスタマイズ性の高いコンポーネントを備えたスターターキットです。 ReactのUIライブラリであるMUIをベースに開発されたスターターキット...
目に見える部分のHTMLタグ全てにスタイリングされたclass不要のスタイルシート・「gd.css」
gd.css gd.cssは目に見える部分のHTMLタグ全てにスタイリングされたclass不要のスタイルシートです。CSSリセットの代替としても利用できるそう。 HTML要素だけでスタイリング可能な、いわゆるクラスレスなCSSで...
パララックス効果を簡単に付与できるスクリプト・「simpleParallax.js」
simpleParallax.js simpleParallax.jsはパララックス効果を簡単に付与できるスクリプトです。非依存型のシンプルで軽量なスクリプトで、任意の画像にパララックスアニメーションを簡単に付与する事が出来ます。 ...
非依存型で軽量な使いやすい通知用JavaScriptライブラリ・「Notyf」
Notyf Notyfは非依存型で軽量な使いやすい通知用JavaScriptライブラリです。レスポンシブで、アクセシビリティにも配慮、カスタマイズ性に優れ、非依存なのでReact、Angular、Aurelia、Vue、Svelteな...
ブックマークレットも用意されている、引用文を綺麗に見やすくスタイリングするライブラリ・「Quotebacks」
Quotebacks Quotebacksはブックマークレットやブラウザ拡張も用意されている、引用文を綺麗に見やすく整形するライブラリです。OSSとしてソースコードも公開されています。 以下のように引用と引用元へのリンクとファビ...
導入も楽々な手書き風のスタイリングが可能なスタイルシート・「doodle.css」
doodle.css doodle.cssは手書き風のスタイリングが可能なスタイルシートです。CSSを読み込んでbodyタグにclass="doodle"を付与するだけと導入も簡単です。テーマに近いものだと思います。 フォームや...
class不要で見た目をミニマルスタイルに整えてくれるclass-lessなCSSフレームワーク・「DreamCSS」
DreamCSS See the Pen Untitled by kachibito (@kachibito) on CodePen. DreamCSSはclass不要で見た目をミニマルスタイルに整えて...
ツールチップやポップオーバー、ドロップダウンなどのフローティングエレメントを完全制御する為のJavaScriptライブラリ・「Floating UI」
Floating UI Floating UIはツールチップやポップオーバー、ドロップダウンなどのフローティングエレメントを完全制御する為のJavaScriptライブラリです。 表示位置の調整やスクロールした際の位置調整など、ユ...
Go、GraphQL、Javascriptで構築されたオープンソースの認証システム・「Authorizer」
Authorizer AuthorizerはGo、GraphQL、Javascriptで構築されたオープンソースの認証システムです。SDKが用意されておりわずか3分の作業で手軽に導入する事が出来るそうです。 認証はSNS等を使っ...
Bootstrap5ベースで作られたオープンソースの多目的ダッシュボードテンプレート・「PlainAdmin」
PlainAdmin PlainAdminはBootstrap5ベースで作られたオープンソースの多目的ダッシュボードテンプレートです。JavaScriptはバニラとなっています。 多様な目的にも対応できるよう様々なUIコンポーネ...
開閉パネルやアコーディオン、タブなど切り替え要素のあるUIの為の軽量JavaScriptライブラリ・「Tiny UI Toggle」
Tiny UI Toggle Tiny UI Toggleは開閉パネルやアコーディオン、タブなど切り替え要素のあるUIの為の軽量JavaScriptライブラリです。 なるべく少ないコードで汎用的なUIを使う、みたいな試みで、カス...
パフォーマンスを重視した高速で軽量なカルーセル/スライダーライブラリ・「Swiffy Slider」
Swiffy Slider See the Pen Untitled by kachibito (@kachibito) on CodePen. Swiffy Sliderはパフォーマンスを重視した高速で軽量な...
Vue.jsとTailwind.cssで設計されたオープンソースの管理画面テンプレート・「Aatrox」
Aatrox AatroxはVue.jsとTailwind.cssで設計されたオープンソースの管理画面テンプレートです。開発者フレンドリーで多機能、カスタマイズ性の高い管理画面の開発を目的としているそうです。 高い利便性と汎用性...
アクセシブルなモバイルアプリを構築する為のデザインファーストなUIキット・「Pearl UI」
Pearl UI Pearl UIはアクセシブルなモバイルアプリを構築する為のデザインファーストなUIキットです。現在のところ、Expoのマネージドワークフローを使用しているReact Nativeプロジェクトのみサポートされています...
シンプルなUIで見やすく使いやすいオープンソースのTailwind.css製の管理画面テンプレート・「Windster」
Windster WindsterはシンプルなUIで見やすく使いやすいオープンソースのTailwind.css製の管理画面テンプレートです。Tailwind.cssのユーティリティクラスのみを使用して構築されています。 管理画面...
カレンダーサービスに任意のイベントを追加するボタンを設置する為のJavaScript・「Add-to-Calendar Button」
Add-to-Calendar Button See the Pen Untitled by kachibito (@kachibito) on CodePen. Add-to-Calendar Butto...
50以上のUIコンポーネントを提供する、モダンなWebアプリケーションを構築するためのOSS・「PoemKit」
PoemKit PoemKitは50以上のUIコンポーネントを提供する、モダンなWebアプリケーションを構築するためのオープンソースのWeb開発キットです。 Reactを使ったUIキットで、サーバーサイドレンダリングによる高速な...
CSS製のボタンやチェックボックス、トグルボタンをその場で作成して共有できる・「cssbuttons.io」
cssbuttons.io cssbuttons.ioはCSS製のボタンやチェックボックス、トグルボタンをその場で作成して共有できるWebアプリです。 Githubのアカウントでログインすればエディタが使えるようになります。Co...
モダンで柔軟なデザインシステムを提供するオープンソースのReact UIライブラリ・「Semi UI」
Semi UI Semi UIはモダンで柔軟なデザインシステムを提供するオープンソースのReact UIライブラリです。TikTokフロントエンド技術チームによって開発されています。 UIコンポーネントは大量に用意されており、W...
カーソルの外観や動作などの高度なカスタマイズが可能なオープンソースのライブラリ・「Blobity」
Blobity Blobityはカーソルの見た目や動きなどの高度なカスタマイズが可能なOSSのJavaScriptライブラリです。 形状や色、サイズからアニメーション、背景に応じた色の変化、任意の要素にフォーカスした際に形状変化...