推しアイデア
TypeScript+React+ViteのツリーシェイカブルなタイプセーフUIライブラリです🍦🩵
プレシオカップ
@plesiosaurus/ui
Next.js
TypeScript
React
JavaScript
⚡🦖@plesiosaurus/ui
作った背景
UIライブラリを”使って”ではなく”作って”みたかったから❤️🔥
推し技術
vanilla-extractによる型安全なUIライブラリを実現しました．アニメーションが苦手な人でも簡単にアニメートフルなUIを実現できるようなコンポーネントたちになっています🌟
プロジェクト詳細
🥳3サービスの技術構成図
⚡🦖公式ドキュメント
📝技術的な工夫
@plesiosaurus/uiライブラリ
https://www.npmjs.com/package/@plesiosaurus/ui#technical-features
- CSS＆JSバンドルの問題：libInjectCssプラグインで解決
@plesiosaurus/ui Playground
Deployment is coming soon...
- premire proのような動画編集ソフトのようなタイムラインのフルスクラッチ実装
- GUIを使ったリアルタイムのUIライブラリのプレビュー編集
- 自動で生成されたコードを実際のアプリにコピペで使うことができる アニメーションのprops、データを使いやすいようなUIに
- contextを使った状態管理
- タイムラインはdelayなどの情報から自動生成
- ドラッグアンドドロップをフルスクラッチ実装
- 将来的に動画編集をするようにAnimationを作れるように
- 実際にnpmに公開されているライブラリをnextjsで読み込み、それをリアルタイムにレンダリングしプレビュー機能を実現している
- 動く物体はreactのstateを使って実装
