流れるテキスト

漂うオブジェクトに合わせて全画面のエッセイがリアルタイムに再配置される組版実験です。文字単位の改行、ドラッグ可能な障害物、段組みの操作を備えています。

Loading preview...
このプロンプトで始める

全画面のエッセイが漂うオブジェクトに合わせてリアルタイムに回り込む組版実験です。文字単位の改行、ドラッグできる障害物、列数のコントロールを備えています。

Websites Agentを試す
ライブテキスト回り込みを扱う実験的なページを作成してください。画面を組版についての短いエッセイで満たし、読みやすさを保つため、余白をたっぷり取ったセリフ体で組んでください。ページ全体に小さなオブジェクトをいくつか配置し、それらが自動で漂い、衝突するようにします。テキストは各オブジェクトの周囲にリアルタイムで回り込み、文字単位で計測して、障害物がレイアウト内を動くたびにエッセイの各行が滑らかに組み直されるようにしてください。オブジェクトは単なる装飾ではありません。訪問者がマウスでつかみ、ページ上をドラッグして投げると、テキストが避け、その後ろで再び埋まっていく様子を見られるようにします。レイアウトを2列と3列で切り替える、動きを一時停止・再開する、シーンをリセットする、スクロールホイールでページ全体をズームするためのコントロールを用意してください。すべてのコントロールは独立したパネルではなくエッセイの一部のように感じられ、オブジェクトがどれほど混沌としても、読書体験は滑らかに保たれるようにしてください。単一ファイルの静的ページにしてください。
オブジェクト編集を追加

小さな編集機能を追加します。浮遊するオブジェクトをダブルクリックするとテキストを変更したり新しいものに置き換えたりでき、エッセイは編集後のオブジェクトに合わせてリアルタイムに回り込みます。

Websites Agentを試す
ライブテキスト回り込みを扱う実験的なページを作成してください。画面を組版についての短いエッセイで満たし、読みやすさを保つため、余白をたっぷり取ったセリフ体で組んでください。ページ全体に小さなオブジェクトをいくつか配置し、それらが自動で漂い、衝突するようにします。テキストは各オブジェクトの周囲にリアルタイムで回り込み、文字単位で計測して、障害物がレイアウト内を動くたびにエッセイの各行が滑らかに組み直されるようにしてください。オブジェクトは単なる装飾ではありません。訪問者がマウスでつかみ、ページ上をドラッグして投げると、テキストが避け、その後ろで再び埋まっていく様子を見られるようにしてください。 レイアウトを2列と3列で切り替えるコントロールを用意してください。動きを一時停止・再開する、シーンをリセットする、スクロールホイールでページ全体をズームするためのコントロールも用意してください。すべてのコントロールは独立したパネルではなくエッセイの一部のように感じられ、オブジェクトがどれほど混沌としても、読書体験は滑らかに保たれるようにしてください。単一ファイルの静的ページにしてください。
ダークキャンバスに切り替える

セリフ体とたっぷりした余白はそのままに、実験の背景を暗く変更します。動くオブジェクトと回り込むテキストが、より強いコントラストで際立ちます。

Websites Agentを試す
ライブテキスト回り込みを扱う実験的なページを作成してください。画面を組版についての短いエッセイで満たし、余白をたっぷり取ったセリフ体で組み、読みやすさを保ってください。ページ全体に小さなオブジェクトをいくつか配置し、それらが自動で漂い、衝突するようにします。テキストは各オブジェクトの周囲にリアルタイムで回り込み、文字単位で計測して、障害物がレイアウト内を動くたびにエッセイの各行が滑らかに組み直されるようにしてください。オブジェクトは単なる装飾ではありません。訪問者がマウスでつかみ、ページ上をドラッグして投げると、テキストが避け、その後ろで再び埋まっていく様子を見られるようにします。レイアウトを2列と3列で切り替える、動きを一時停止・再開する、シーンをリセットする、スクロールホイールでページ全体をズームするためのコントロールを用意してください。すべてのコントロールは独立したパネルではなくエッセイの一部のように感じられ、オブジェクトがどれほど混沌としても、読書体験は滑らかに保たれるようにしてください。単一ファイルの静的ページにしてください。
サンセリフ体で試す

エッセイをセリフ体ではなく高コントラストのサンセリフ体に変更し、同じライブ回り込みと改行の組み直しが、異なる書体の表情でどのように感じられるかを示します。

Websites Agentを試す
ライブテキスト回り込みを扱う実験的なページを作成してください。画面を組版についての短いエッセイで満たし、読みやすさを保つため、余白をたっぷり取ったセリフ体で組んでください。ページ全体に小さなオブジェクトをいくつか配置し、それらが自動で漂い、衝突するようにします。テキストは各オブジェクトの周囲にリアルタイムで回り込み、文字単位で計測して、障害物がレイアウト内を動くたびにエッセイの各行が滑らかに組み直されるようにしてください。オブジェクトは単なる装飾ではありません。訪問者がマウスでつかみ、ページ上をドラッグして投げると、テキストが避け、その後ろで再び埋まっていく様子を見られるようにします。レイアウトを2列と3列で切り替える、動きを一時停止・再開する、シーンをリセットする、スクロールホイールでページ全体をズームするためのコントロールを用意してください。すべてのコントロールは独立したパネルではなくエッセイの一部のように感じられ、オブジェクトがどれほど混沌としても、読書体験は滑らかに保たれるようにしてください。単一ファイルの静的ページにしてください。