開発のスキル

GSAPで複数のアニメーションの順序や重なりを組み立てるスキル。開始時刻や区切りの名前を指定し、入れ子の構成と再生・停止・逆再生まで扱います。

• 複数の要素を順番に動かしたいとき
• 動きの重なりを細かく調整
• ラベルで演出の区切りを整理

GSAPのアニメーションで使う数値変換や配列操作を支援するスキル。スクロール量の変換、値の制限、ランダム化、等間隔への丸めなどを実装・確認できます。

• スクロール量を移動や回転に変換したいとき
• アニメーションの位置を格子に合わせたいとき
• 要素の位置や色をランダムにしたいとき

既存のRemotion動画のソースをHyperFramesのHTMLとGSAPへ移植するスキル。非対応コードの検出、変換後の映像比較、差異の記録まで扱います。

• Remotion動画をHyperFramesへ移植
• 移植を妨げるコードの事前確認
• 変換前後の映像を比較したいとき

Webページの文字や図形、ドラッグ操作に動きを付けるため、GSAPの各種プラグインの実装を支援します。登録手順からレイアウト変更、SVGの描画・変形まで扱います。

• グリッドやリストの配置変更の演出
• 慣性付きでカードをドラッグしたいとき
• 見出しを一文字ずつ表示したいとき

ReactやNext.jsにGSAPのアニメーションを組み込み、対象要素の指定から、値の変化に応じた更新、コンポーネントを外す際の後片付けまで支援します。

• Reactに動きを付けたいとき
• 動かす要素の範囲を限定したいとき
• 画面切り替え時の処理を整理したいとき

Webページのスクロールに合わせて、要素の移動や表示、区間内での固定を実装します。GSAPのScrollTriggerを使い、視差効果や横方向の演出も扱います。

• 画面に入ったカードを表示したいとき
• スクロール中にセクションを固定
• スクロール量とアニメーションを連動

VueやSvelteでGSAPのアニメーションを実装し、開始タイミング、操作対象の範囲、コンポーネント削除時の後処理まで整えるスキル。

• VueやSvelteに動きを追加したいとき
• 操作対象をコンポーネント内に限定
• コンポーネント削除時の後処理

Webの要素やSVGにGSAPで動きを付けるコードの作成・レビューを支援するスキル。速度の変化や順次表示、画面幅や動きを減らす設定に応じた調整を扱います。

• Web要素に登場演出を付けたいとき
• 複数要素を時間差で動かしたいとき
• 画面幅に応じて動きを変えたいとき

Three.jsで3Dモデルや画像、背景・反射用のHDR画像を読み込む実装を支援します。複数素材の進捗管理から圧縮形式への対応、失敗時の再試行まで扱います。

• GLTF/GLBモデルを表示したいとき
• 複数素材の読み込み進捗を表示
• HDR画像を背景や反射に使いたいとき

Three.jsの3D物体に、金属・ガラス・布・アニメ調などの質感を設定します。素材の選択、テクスチャや反射の調整、独自の描画表現と負荷対策まで扱います。

• 3D物体を金属やガラスにしたいとき
• アニメ調の陰影を付けたいとき
• テクスチャと周囲の映り込みの調整

Three.jsで物体の色や形の動きを独自に描く処理を実装します。波打つ変形、輪郭の発光、溶けるような消失などの表現から、既存の材質の拡張まで支援するスキルです。

• 表面を波打つように動かしたいとき
• 輪郭の発光やグラデーションの追加
• 溶けるように消える演出の実装

ReactとNext.jsのコードを性能面から見直し、データ取得の待ち時間や配信するコード量、不要な再描画を減らす改善を、優先順位付きのルールで支援します。

• Reactの性能をレビューしたいとき
• Next.jsのデータ取得を改善したいとき
• 配信するJavaScriptを減らしたいとき

ブラウザで3Dを表示するためのシーン、カメラ、描画設定をThree.jsで整え、物体の配置や親子関係、アニメーションの基本実装を支援するスキル。

• ブラウザに3Dシーンを表示したいとき
• 遠近感に合うカメラを選びたいとき
• 複数の物体をまとめて動かしたいとき

Reactの画面に、伸縮や予備動作、加減速などのアニメーションを実装します。Disneyの12原則をFramer Motionのコード例に結び付けて使うスキルです。

• ボタンのホバーや押下に反応を付けたいとき
• 予備動作や弧のあるジャンプを作りたいとき
• リスト項目を順番に表示したいとき

Three.jsの3Dシーンに光と影を設定し、屋外やスタジオの照明を組み立てます。光源の選択、環境画像を使った照明、影の不具合対策や描画負荷の調整を支援するスキルです。

• 屋外の太陽光や空の照明を作りたいとき
• スタジオ照明や三点照明の設定
• HDR画像を使った環境照明の導入

Web画面のコードを最新のWeb Interface Guidelinesと照合し、改善すべき箇所を確認します。指摘はファイル名と行番号付きで示します。

• Web画面のコードを見直したいとき
• 基準に沿ってアクセシビリティを確認
• デザインや使い勝手のレビュー

Three.jsで基本図形から独自の立体、文字や点群を作るスキル。頂点の編集、形状の結合、同じ形を多数描く処理を通じて、形作りと描画負荷の調整を支援します。

• 基本立体や曲線に沿う形状の制作
• 独自のメッシュを作成・変形したいとき
• 立体文字や点群、ワイヤーフレーム表示

Three.jsで3D表面に貼る画像や動画、背景・反射用の画像を設定します。貼り付け位置や色、繰り返しの調整に加え、圧縮や再利用によるメモリ管理も扱います。

• 3D表面の画像位置や繰り返しを調整
• HDR画像を背景や反射に使いたいとき
• 動画やCanvasを3D表面に表示

FLUXによる画像生成・編集をアプリに組み込むためのスキル。BFL APIへの接続、完了確認、通知の設定、リクエスト制限やエラーへの対処を案内します。

• アプリに画像生成・編集を組み込みたいとき
• 完了確認や完了通知を実装したいとき
• リクエスト制限やAPIエラーへの対処

Tailwind CSS v4で色や角丸などの共通ルールを定義し、ボタンやフォームを再利用できる部品に整えます。画面幅への対応やダークモードも扱います。

• 再利用できるUI部品集の作成
• 色や部品の見た目を統一したいとき
• 画面幅対応とダークモードの実装

Three.jsで3Dモデルに動きを付け、GLTFのアニメーション再生から骨格や表情の操作、複数の動作の滑らかな切り替えまで実装するスキル。

• GLTFモデルの動作を再生したいとき
• 待機・歩行・走行の滑らかな切り替え
• 表情や骨格を動かしたいとき

Reactで増えすぎた真偽値の設定項目を整理し、部品の組み合わせと状態管理を見直して、再利用しやすいコンポーネントを設計するための指針をまとめたスキル。

• 真偽値の設定項目を整理したいとき
• 再利用できる部品集を設計したいとき
• 状態管理と部品構成のレビュー

Three.jsの3D画面に、クリックやタッチでの選択、カメラ操作、物体の移動・回転・拡縮を実装します。入力処理から操作時の見た目の変化まで扱います。

• クリックやタッチで3D物体を選びたいとき
• カメラの回転・ズーム操作の追加
• 物体のドラッグ・回転・拡縮

Three.jsの3D画面に光のにじみや背景ぼけ、色補正などを加えるスキル。複数の効果の組み合わせから独自の画面効果、描画負荷の調整まで扱います。

• 3Dシーンの物体を光らせたいとき
• 背景ぼけや画面の色味を調整したいとき
• 選択した物体を輪郭で強調したいとき