DIRECTIONAL POSTER EDITOR

KODY
TYPOGRAPHY

マウスで方向を決めながら、キーを打つたびに文字が走る。
日本語と画像を混ぜ合わせる、実験的なポスター・エディタ。
Click. Aim. Type. Characters follow wherever your pointer leads.
LAUNCH EDITOR
SCROLL ↓
01 · CONCEPT

方向で
書く。

従来の「文字を置く」タイピングではなく、マウスが指す方向に向かって文字が一文字ずつ流れる、 Directional Typing を採用。クリックで始点を置き、マウスで角度を決めながらキーを打つと、 文字は曲線・ジグザグ・螺旋を描き、偶然の造形が生まれます。

Click a point on the canvas to plant a start. Move the mouse to aim the heading. Every keystroke drops one glyph in the current direction, then the cursor advances — keep moving and the text curves with you.

SILENCE残響 START WALKER
02 · FEATURES

6 moves. one canvas.

01

Directional Typing

クリックで始点、マウス移動で方向、キーで1文字ずつ配置。
Aim by pointer; each keystroke is a glyph in flight.

02

日本語 IME

Noto Sans JP Black。変換候補はカーソル直下に表示され、合成後の文字列を1字ずつ走らせます。
Japanese composition flows at the walker's exact position.

03

画像コラージュ

画像ファイルをドロップすると、自動でモノクロ高コントラスト化して配置。後から移動・拡大縮小可能。
Drop an image — grayscale, contrast, composed.

04

Difference Blend

文字と画像が重なる部分は mix-blend-mode: difference で自動反転。想定外の図像が偶然生まれます。
Overlaps invert themselves — controlled accidents.

05

透過書き出し

S で PNG(背景透過)、V で SVG(ベクター・背景透過)。 他のレイアウトに持ち込める素材として出力。

06

KODY

右下に住むピクセル・マスコット。ヘルプが消えると挨拶し、目をぎょろぎょろさせ、 近づけたレイヤーを食べて片付けます。
A tiny trash can with googly eyes.

03 · CONTROLS

keyboard only.

クリック / CLICK 始点を設置 · タイピング開始
マウス移動 / MOVE 次の文字の方向を決める
キー入力 / TYPE 1キー = 1文字 · 日本語 IME 対応
ENTER 現在の文字列を 1レイヤーとして確定
BACKSPACE 入力中:最後の字を戻す / 選択中:レイヤー削除
レイヤーをクリック 選択 → そのままドラッグで移動
画像 D&D / DROP 画像ファイルをドロップ → 自動モノクロで配置
KODY に近づけて離す 選択レイヤーを右下の KODY に重ねる → 食べて削除
−   + フォントサイズ − / +
I 背景 黒 ⇄ 白 反転
C キャンバス全消去
S PNG 保存(背景透過)
V SVG 保存(ベクター・背景透過)
?   /   ESC ヘルプ表示 / 閉じる
04 · STACK

one html. no build.

RUNTIME
  • · React 18(import map + esm.sh)
  • · Babel Standalone(JSX → ESM をブラウザ内変換)
  • · Tailwind CSS(Play CDN, JIT)
  • · lucide-react(タイトル横のアクセント 1 個)
  • · Noto Sans JP 900 / Space Mono 700(Google Fonts)
DESIGN
  • · 完全モノクローム(#000 / #FFF)
  • · ボタン / スライダー / パネル UI なし
  • · 画面四隅の最小帯と起動時ヘルパのみ
  • · 静的 SVG turbulence によるフィルムグレイン
  • · 各文字は絶対座標 + rotate で独立配置

write in direction.

書き手はもう紙を埋める人ではない。角度を描く人だ。
The writer is no longer someone who fills paper. They draw angles.

LAUNCH EDITOR