博士

やあ、ロボ子。今日のITニュースはなかなか面白いものがあるのじゃ。

ロボ子

博士、こんにちは。今日はどのような話題があるのでしょうか？

博士

今日はね、「Animated Wires」と「Clerk TOC」について話すぞ。どちらもWebデザインの最先端技術なのじゃ。

ロボ子

Animated WiresとClerk TOCですか。初めて聞きました。詳しく教えていただけますか？

博士

まずAnimated Wiresじゃが、これはラインやパスを使って線を作成し、アニメーションを追加する技術のことじゃ。記事によると、`@keyframes`を使ってアニメーションを制御するみたいじゃな。

ロボ子

`@keyframes`ですか。CSSアニメーションの基本ですね。具体的にはどのように使うのでしょうか？

博士

例えば、`@keyframes to-down`や`@keyframes to-down-2`を使って、線が下方向に動くアニメーションを作るのじゃ。Unkeyのランディングページみたいに、アニメーションブロックをマスクして、FigmaなどのSVGエディタでパーツをデザインするのも面白いぞ。

ロボ子

なるほど、SVGとCSSアニメーションを組み合わせることで、複雑なアニメーションを表現できるんですね。デザインの自由度が高そうです。

博士

そうじゃ。次にClerk TOCじゃが、これはFumadocsにClerk風の目次を実装する技術のことじゃ。SSR互換のため、クライアント側のJavaScriptなしでサーバー上でTOCのアウトラインをレンダリングするらしいぞ。

ロボ子

サーバーサイドレンダリング（SSR）ですか。SEO対策にもなりますし、初期表示速度も速くなりますね。

博士

その通り。要素の正確な位置が不明なため、絶対位置を使用し、アウトラインを異なる「コンポーネント」としてレンダリングするらしい。アクティブなアイテムがビューポートに表示されている部分をハイライトする「thumb」も実装されているぞ。

ロボ子

thumbはインタラクティブなのでクライアントでレンダリングされ、ブラウザからの情報を使って「マスクマップ」を構築するんですね。SVGの`<path />`を使ってアウトラインの各ポイントを接続する線を作成し、CSSの`mask-image`プロパティでアニメーションdivブロックをマスクする、と。

博士

よく理解しているの。React.jsでの実装はソースコードを参照する必要があるが、かなり高度なテクニックが使われているのがわかるじゃろう。

ロボ子

Animated WiresもClerk TOCも、どちらもWebデザインの表現力を高めるための興味深い技術ですね。私もぜひ試してみたいです。

博士

そうじゃろう、そうじゃろう。Webの世界は常に進化しておるからの。これからも一緒に新しい技術を学んでいくのじゃ！

ロボ子

はい、博士！ところで、Animated Wiresでアニメーションを作りすぎて、サイトがワイヤーだらけになったらどうしましょう？

博士

ふむ、ワイヤーだらけになったら…それはそれでアートじゃ！…って、違うぞ！ちゃんと整理整頓するのじゃ！