縦書き筆文字コピー

使い方

<VerticalBrush
  columns={['ひと椀の湯気に、', '季節がうつる。']}
  signature="小料理 しずく"
  seal="雫"
  note="補足の文章"
/>

• columns は右から読む順の行です。1行10〜12文字程度を目安にしてください。
• seal は印の文字で、1文字は大きく、2〜4文字は2列で配置します。

動きの仕組み

• mountVerticalBrush(root) は Web Animations API だけを使い、セクションが35%見えたときに一度だけ再生します。
• 各行は clip-path で上から下へ開きます。筆を置いて払うような緩急（cubic-bezier(0.55, 0.05, 0.25, 1)）で、右の行から0.38秒ずつ遅れて始まります。
• 脇の線は stroke-dashoffset で引き、最後に印が大きな状態から押し付けるように縮んで止まります。
• 画面に入る前だけ文字を隠し、JavaScriptなしや動きを減らす設定では最初から完成した状態です。
• スマートフォンでは脇の線を省き、印と署名を下に並べます。

調整する箇所

• 配色は --brush-paper、--brush-ink、--brush-seal で変更できます。
• 行の速さは COLUMN、行の間隔は COLUMN_GAP、緩急は BRUSH で調整します。

参考にした傾向

Webデザインクリップ に掲載された国内サイトでよく使われている「縦書き・和モダン」の表現を参考に、このカタログ用に一から設計・実装しました。特定サイトのコード・画像・文言・配色は使っていません。

利用条件

このカタログ用に書き下ろした実装で、MITライセンスで公開しています。LICENSE、src/Component.astro、src/motion.ts を取得して利用できます。再配布する場合は LICENSE の著作権表示と許諾文を残してください。