【超絶ニッチ】ユーザーがまばたきした瞬間にだけ逆回転するスピナーの実装ガイド

こんにちは。世の中には星の数ほどのWebサイトがあり、そこには無数の「ローディングスピナー」が存在します。 しかし、ただ回っているだけのスピナーで本当にユーザーの心を惹きつけられるでしょうか？

答えは「否」です。

今回ご紹介するのは、「ユーザーがWebカメラの前でまばたきをした瞬間にだけ、スピナーの回転方向が逆転する」という超絶ニッチな技術です。 なぜこんなものを作るのか？それはそこに無駄があるからです。

概要と要件

まず、この機能を満たすためには以下の要件が必要です。

1. ユーザーのカメラ映像を取得できること
2. まばたき（Blink）を高フレームレートで検知できること
3. 検知した瞬間にCSSアニメーションの animation-direction を反転させること
4. ユーザーが「あれ？今逆回転した？」と疑心暗鬼に陥ること

※　なお、本記事のコードは実行したことがありません。筆者がカメラを持ってないので…許してください。

実装ステップ

1. Webカメラのパーミッション要求

まずはユーザーにカメラへのアクセス許可を求めます。「ただロードを待っているだけなのにカメラを要求してくるサイト」という最悪のUXの第一歩です。

navigator.mediaDevices.getUserMedia({ video: true })
  .then((stream) => {
    // スピナー逆回転計画の始まり
    console.log("ユーザーの眼球をキャッチしました 👀");
  })
  .catch((err) => {
    console.error("ユーザーが警戒しています", err);
  });

2. まばたき検知（Face-API等の活用）

顔認識ライブラリを導入し、両目の開眼率（Eye Aspect Ratio）を計算します。\nしきい値を下回った瞬間を「まばたき検知」として発火させます。

ただし、ロード画面のために数MBの機械学習モデルを裏で読み込む必要があります。**つまり、スピナーを見せるためにロード時間がさらに延びるという無限ループが発生します。**美しいですね。

3. スピナーの反転ロジック

CSSアニメーションをReact等で管理している場合、次のような極めて非生産的な状態管理が行われます。

const [isReversed, setIsReversed] = useState(false);

useEffect(() => {
  // まばたきを検知したら反転フラグをトグルする
  const unsubscribe = onBlinkDetected(() => {
    setIsReversed(prev => !prev);
  });
  return unsubscribe;
}, []);

return (
  <div 
    className={`spinner ${isReversed ? 'spin-reverse' : 'spin-normal'}`} 
  />
);

CSS側ではこんな感じです。

.spin-normal {
  animation: spin 1s linear infinite;
}

.spin-reverse {
  animation: spin 1s linear infinite reverse;
}

@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

なぜこれが「クソ」なのか

最大の理由は、「ユーザー自身はまばたきをしている最中なので、スピナーが逆回転した瞬間を絶対に見ることができない」という点です。

目が開いた頃には、すでに逆回転状態で回り続けているのです。ユーザーは「あれ？最初から左回りだったっけ？」と認知がバグります。

まとめ

誰も得しない、誰も気づかない、そして無駄に負荷がかかる。 これぞクソアプリの境地です。皆さんもぜひ、自社プロダクトの肝となる画面で導入提案してみてください。（責任は負いません）