開発ノート

FleaWinder の制作の裏側——キーボードとマウスで動く小さなアニメーションサーカスの制作記録。

サーカスを小さな画面へ

FleaWinder はタスクバーの上の横長の細いストリップ向けに設計されました。スマートフォンは縦向きです。小さな画面でサーカスを機能させるには、生き生きとした感覚を失わずにレイアウトを再考する必要がありました。

The embeddable widget flips to a tall canvas on mobile, stacking the acts vertically instead of spreading them across a ribbon. Anyone dropping FleaWinder into their own site gets a layout that adapts automatically. Four theme presets (dark, light, warm, cool) and a scale parameter let it blend with whatever surrounds it.

より大きな課題は可読性でした。スマートフォンの画面では、デスクトップスケールで描かれたノミはただの点です。ノミの体を拡大するズームパスを追加し、衣装、表情、アクセサリーが実際に見えるようにしました — Pip のヘッドバンド、Rex のヘルメット、Blaze の小さな王冠。常にそこにあった個性の細部が、突然腕の長さの距離で読み取れるようになりました。

モバイル改修の残りの部分は華やかさは劣りますが同じくらい重要でした：タッチしやすいタップターゲット、より良いフォントスケーリング、マーケティングサイト全体のレスポンシブな間隔調整。革命的なことは何もありません — サーカスがどこで見つけても正しく表示されるようにしただけです。

衣装、季節、そしてリングマスター

今週はビジュアルの奥行きがすべてでした。コロニーの各ノミがユニークな衣装を着るようになりました — Nova は綱渡りで日傘を持ち、Rex は大砲でヘルメットをかぶり、Blaze は火吹き演目で王冠をもらいます。小さなディテールですが、一目でわかるアイデンティティを各パフォーマーに与えてくれます。

ステージ自体がカレンダーとともに変わります。季節のパーティクルシステムが、冬には雪を、春には桜の花びらを、夏にはホタルを、秋には漂う落ち葉を降らせます。現実の時計に連動した微妙な昼夜のティントもあります — ゴールデンアワーにストリップが暖かくなり、日没後は暗くなり、夜空にはより明るい星が輝きます。

最大の追加はリングマスターです — シルクハットをかぶった特別なノミが演目の間を歩き回り、ショーを視察します。彼はパフォーマンスしません。監督するのです。パトロール経路を正しく設定するということは、演目の切り替えが終わるちょうどそのタイミングで到着するように歩行間隔を調整することを意味し、サーカス全体に以前にはなかった振り付けの感覚を与えます。

内部では、完全なテーマシステムがこれらすべてを動かしています。8つのカラーパレットに加え、月に基づいて適切なものを選択する自動シーズナルモード。すべての演目とUI要素のすべての色がアクティブなテーマから取得されるため、切り替えが継ぎ接ぎではなくシームレスに感じられます。

v1.1.0：2つの新しい演目

バージョン1.1.0では、ジャグリング演目とファイヤーブレザーがラインナップに加わり、ライブサーカス演目は合計7つになりました。どちらもショーの他の部分を駆動するのと同じエネルギーシステム——キーストローク、マウス操作、クリック——で動きます。

ジャグラーは複数のボールを本物の放物線軌道で追跡します。ボールの数はエネルギーに応じて変わります：アイドル時は2〜3個、フルパワーで最大6個、観客が熱狂すると背中越しのキャッチも披露します。タイミングを正しく合わせるには、各ボールの位相を分離してボールが固まらないようにする必要がありました。

ファイヤーブレザーは既存のパーティクルシステムを使用していますが、新しい熱のゆらめきエフェクトが追加されています。炎の長さはエネルギーに比例して伸び、クリックでボーナスバーストが発生します。最も難しかったのは色のブレンドでした——根元の深い赤から先端の明るい黄色へ、帯状に見えないように滑らかに遷移させることです。

どちらの演目も既存のローテーションシステムに組み込まれているので、オリジナルの5つの演目と一緒に入れ替わりながら表示されます。お気に入りを固定したい場合は、設定パネルで個々の演目のオン/オフを切り替えることができるようになりました。

歴史ページの裏側にある歴史

FleaWinder の歴史ページは、1665年のロバート・フックの顕微鏡スケッチから現在も活動するオクトーバーフェストのパフォーマーまで、400年以上にわたる本物のノミのサーカスを記録しています。このページを書くためには、ヴィクトリア朝の宣伝ビラ、デジタル化された新聞の切り抜き、そして昆虫学的エンターテインメントに関する驚くほど多くの学術論文を読む必要がありました。

最も難しかったのは何を省くかでした。ルイ・ベルトロットだけで1冊の本が書けます（そして実際に彼はそうしました——何冊も）。妥協案として、主要な出来事を押さえた年表と、さらに深く掘り下げたい人のための展開可能なセクションを設けました。

このページでは、ドロップキャップ、装飾的なデバイダー、セリフ書体を使用しており、記述するビラやパンフレットを思わせるデザインになっています。読者が圧倒されないようにすべてのセクションはデフォルトで折りたたまれていますが、最初の段落は常にドロップキャップ付きで表示され、読者を引き込みます。

すべてのテキストは英語、スペイン語、ドイツ語で利用できます。翻訳の過程で、いくつかの興味深い地域の歴史が浮かび上がりました——例えば、オクトーバーフェストのドイツのFlohzirkus（ノミのサーカス）の伝統は、ロンドンやニューヨークのシーンとは異なる独自の系譜を持っています。

なぜ FleaWinder を作ったのか

コンピュータが生きていると感じるようなものが欲しかったのです——気が散るようなものではなく、あなたの存在に反応する静かなコンパニオンとして。ほとんどのスクリーンセーバーはあなたが離れると起動しますが、FleaWinder はあなたが来ると起動します。

アイデアはシンプルでした：OSが無視するすべての入力——タイピングのリズム、マウスの速度、クリックのテンポ——を、アニメーションのサーカスノミの一座に与えること。作業すればするほど、ショーは活き活きとします。

タスクバーの上の透明なオーバーレイとして作るという制約が、結果的に正しい選択でした。常に見えているけれど、邪魔にならない。直接操作するものではありません。ただ作業すれば、それが反応します。技術的な課題は、フォーカスを奪わないように本当にクリックスルーにすることでした。

FleaWinder はヴィクトリア朝のノミのサーカスへのラブレターです——時計職人が本物のノミにハーネスを付けてミニチュアの馬車を引かせたり綱渡りをさせたりした、何世紀もの歴史を持つ本物の芸術形式です。歴史ページでその物語を全て紹介しています。