ジェミン トランジション

回転とスケールを活用した独創的なトランジション効果

ジェミン トランジション

ジェミントランジションは、千宰民（elrion018）によって作られた独創的なトランジション効果です。前のページがフェードアウトしながら、新しいページが小さな点から始まり、回転しながら画面全体を満たすドラマチックなトランジションを提供します。

デモ

タブ間の移動で違いを確認してください:

• ホーム ↔ プレミアム ↔ 実績: 回転とスケーリングを含むドラマチックなジェミントランジション体験
• 設定: 比較のための標準ブラウザナビゲーション（特別なトランジションなし）

ジェミントランジションが興奮と重要性を演出する一方、通常のナビゲーションはより控えめに感じられることがわかります - それぞれのアプローチをいつ使用するかを示す完璧な例です。

UXの原則

いつ使用するか？

ジェミントランジションは**特別な瞬間（Special Moments）**を強調する際に使用されます。

コンテンツ関係別の適合性

主な使用ケース

• アチーブメントのアンロック：ユーザーが重要なマイルストーンを達成した時
• 特別な機能：プレミアムコンテンツや隠しコンテンツへのアクセス
• お祝いの瞬間：成功状態や報酬
• イースターエッグ：隠し機能やサプライズインタラクション

なぜこのように動作するのか？

1. ドラマチックな強調：回転とスケールが重要性を演出
2. 視覚的な喜び：予期しないモーションがインターフェースに個性を追加
3. 記憶に残る体験：ユニークなトランジションが瞬間を際立たせる
4. 創造的な表現：細部へのこだわりと職人技を示す

モーションデザイン

ジェミントランジションは、ユニークな効果のために複数のアニメーション技術を組み合わせています。

退出画面の動き 現在の画面が徐々にフェードアウトし始めます。これにより、入ってくるアニメーションと競合しないソフトな退出が作られ、新しいコンテンツが中心となることができます。

回転エントリー 新しい画面は中心から小さな点として現れ、回転しながら外側に拡大します。このスパイラル成長は、新しいコンテンツが熱意を持って飛び出してくるかのような、エネルギーと興奮の感覚を生み出します。

スケールとタイミング 回転とスケーリングの組み合わせは慎重にタイミングが調整されています。画面がフルサイズに達すると同時に回転が完了し、アニメーションシーケンスに満足のいく解決をもたらします。

基本的な使用方法

import { Ssgoi } from '@ssgoi/react';
import { jaemin } from '@ssgoi/react/view-transitions';

const config = {
  defaultTransition: jaemin()
};

export default function App() {
  return (
    <Ssgoi config={config}>
      {/* アプリコンテンツ */}
    </Ssgoi>
  );
}

設定オプション

jaemin({
  spring?: {
    stiffness?: number;  // アニメーションスプリング剛性 (デフォルト: 50)
    damping?: number;    // アニメーションスプリング減衰 (デフォルト: 30)
  };
  initialRotation?: number;      // 初期回転角度（度）(デフォルト: 45)
  initialScale?: number;         // 初期スケールファクター (デフォルト: 0.01)
  rotationTriggerPoint?: number; // 回転開始ポイント 0-1 (デフォルト: 0.8)
})

実践的な例

1. アチーブメントのアンロック

const config = {
  transitions: [
    {
      from: '/challenge-complete',
      to: '/achievement',
      transition: jaemin({ duration: 1000 })
    }
  ]
};

2. プレミアム機能へのアクセス

const config = {
  transitions: [
    {
      from: '/upgrade',
      to: '/premium-features',
      transition: jaemin({ rotation: 1080 })
    }
  ]
};

アクセシビリティ

• prefers-reduced-motion設定を尊重
• スクリーンリーダーがコンテンツの変更を適切に通知
• トランジション中もキーボードナビゲーションが機能

ベストプラクティス

✅ すべきこと

• 本当に特別な瞬間に使用する
• アチーブメントや報酬のために予約する
• イースターエッグやサプライズに適用する
• 最大の効果のために控えめに使用する

❌ してはいけないこと

• 通常のナビゲーションには使用しない
• 頻繁にアクセスされる領域では避ける
• エラー状態には適用しない
• 重要なユーザーフローには決して使用しない

パフォーマンスノート

ジェミントランジションは、スムーズなパフォーマンスのためにGPU加速トランスフォームを使用しています。ただし、複雑なアニメーションのため、以下を考慮してください：

• 低スペックデバイスでのテスト
• パフォーマンスが制限された環境のためのシンプルなフォールバックの提供
• アクセシビリティのためのprefers-reduced-motionメディアクエリの使用