うごく文字や文字を使った表現の事例を集めるページ

(c) https://tngsm.com/works/ants-typo/

文字列の内容

フォントサイズ

行間、行送り

字間（トラッキング）

縦横比率

スタイル（ウェイト、イタリック、書体）

文字の１文字ずつ表示し末尾をピコピコさせる

元々は文字コードを振動させていたらしいcharCodeAt(n) by Yugop

https://onscreen.jp/　メニューのところの文字

自分も作ってみたが・・

漢字の線の一部がうまく連続してると仮現運動が発動するやつ

text-align: justify / right / left

by https://dia.tv/

バウンディングボックスが矩形じゃなかったら

アウトライン/ストロークを使って色々するもの

/glyphs-auto-studyroom/Glyphs 自動勉強会 Vol. 1

After Effectsでやってるらしいです

WebでよくみるSVGアニメーション

アウトラインに沿って

AEもCavalryもパスの開始点を元にトリムができるのにパスの開始点を編集したり可視化する手法がないのが謎

アウトラインのモーフィング

円弧と組み合わせ

dubin's path

一部を伸ばす

フォントで２つaltが確認できるが、どうアニメにしてるか謎

ストロークを点(セグメント)の連なりと捉える

バリアブルフォントという仕様の制限内でやる表現

https://www.kontrapunkt.com/work/goertek 音に反応する

カラーバリアブルフォント

最近Android 12の待ち受けの時計が　バリアブルフォントになってた

After Effectsではまだバリアブルフォントは扱えないはず、というか映像系ほぼバリアブルフォント使えない（多分Cavalryくらい）

どうやってバリアブルフォントを使ってるっぽいのを使っているのか、単純にパスの変形？

Webなら使える

Signed Distance Field Font

ゲームとかで使われている。UnityではTextMeshPro

ストロークからの距離を画像の濃度で表したもの？、シェーダーでシャープにしたり、ボヤッとさせたりする

エフェクトにも使えそう

Canvasを使わずHTML/CSS/JSを駆使した表現

https://ermolaeva.co/ ぐるぐる

→ Web Brutalism

SVG https://ertdfgcvb.xyz/+/svg.svg/

https://codingtrain.github.io/12oclocks/ - john maeda リメイク

2022/3/19 ここまで

tamaki royことの次第 - 折笠良

アルクアラウンド - 物理kinetic typo

パラパラtypo（リリックじゃなくてワンフレーズのみですが……）

vtuberのMVは歌詞が多そうなイメージ

リリックスピーカー（リリックビデオらしさの抽出）

https://vimeo.com/183990548#t=174s

https://vimeo.com/207285403 (タイトル)

グリッドの方を動かす

リニア

for all seasons　

畳谷さん

ぶーしゃかループ - yugop

BURNOUT SYNDROMES - 文學少女 - 大橋史

パス分けに数日かかった（ご本人談）

文字を分解してくれる Moji Disassembler

1000円 （安い）

作字のタグ？

（キネティックタイポグラフィもやってる）エージェンシー

MOTION MOTION FESTIVALというイベントのモーションがアナログ感出してて良い

自分のnotionまとめですが、参考になれば

キネティックタイポグラフィのウェブおよび動画の事例を集めた本

偶然ドイツで買いましたが、めっちゃいい本です

burst helvetica inaba hideki

↑の中のひとつ https://www.youtube.com/watch?v=VfkNax3fXfc

2022/4/2 に一旦完了