Kinetic Typography

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

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

タイポグラフィにおける動かしに使えるプロパティ

文字列の内容

フォントサイズ

行間、行送り

字間（トラッキング）

縦横比率

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

文字列のみでやるもの

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

http://tha.jp/

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

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

自分も作ってみたが・・kitasenjudesign

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

https://twitter.com/toruntino98/status/1393836157566291969

https://twitter.com/r_kjgk/status/1486836421910581253

並べ方

text-align: justify / right / left

https://www.instagram.com/p/BeognWxlAik/

https://www.instagram.com/p/Bs_tQg6lhKt/

by https://dia.tv/

https://www.instagram.com/p/BuHeiqnBW_F/

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

PLAY! kikuchi atsuki

https://twitter.com/hirosaki_moca/status/1256210150529986560

https://vimeo.com/157318746

https://vimeo.com/373297064

アウトラインを利用する

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

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

Zin Nagao

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

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

https://akashraj9828.github.io/svg-text-animation-generator/

アウトラインに沿って

https://tngsm.com/works/ants-typo/

https://tngsm.com/works/igaguri-typo/

https://kitasenjudesign.com/sketch/14/

https://twitter.com/RavenKwok/status/1418594780196478981

https://vimeo.com/135873674

https://www.youtube.com/watch?v=t5HVpZqAtW0

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

https://kitasenjudesign.com/work/85/

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

audio game center

https://www.instagram.com/p/CJ8PqkZDyBa/

https://twitter.com/RavenKwok/status/1271828492619939841

https://vimeo.com/148989593

https://vimeo.com/91273963

円弧と組み合わせ

https://www.instagram.com/p/B8SE8jvDsW3/

https://www.instagram.com/p/B8RavJ4jx5o/

https://www.instagram.com/p/CJgMp-tD6w_/

dubin's path

一部を伸ばす

https://www.instagram.com/p/B_BDU8dIUCl/

https://www.instagram.com/p/CPjT2gvCJNK/

https://www.instagram.com/p/CVVhC8KlEds/

https://vimeo.com/524032099

https://www.instagram.com/p/CCQ4hO8hHnU/?utm_source=ig_web_copy_link

https://www.gt-flexa.com

https://twitter.com/justvanrossum/status/1488818847276806145?s=20&t=WLTjzv3GZ8tMaq9mubO1kg

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

Flex: After Effects プラグイン

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

https://x.com/fukajihiromasa/status/1810634119438901300

https://www.instagram.com/p/C9tWZaBRWez/?img_index=2

バリアブルフォント

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

http://grammato.com

https://vimeo.com/6993808

https://abcdinamo.com/

https://www.instagram.com/underwarefoundry/

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

https://atamacias.com/

https://twitter.com/kmkota0/status/1160929260271525888

https://www.dillinger.tv/

https://www.instagram.com/p/CW-umUksZbT/

https://howww.de/var/

https://www.typearture.com/variable-fonts/

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

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

https://typemedia.org/tm2122/responsive/ania/g.html

https://maxkoehler.com/posts/continuous-typography/

https://twitter.com/maxakohler/status/1330498389885267968?s=20&t=WLTjzv3GZ8tMaq9mubO1kg

https://2021.typographics.com/

https://rosettatype.com/GridlitePE

https://www.futurefonts.xyz/masahiro-naruse/metamorbit

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

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

Webなら使える

バリアブルフォントで曲線補間 by Underware

源ノ角ゴシックがバリアブルフォントに

SDF Font

Signed Distance Field Font

https://github.com/ShoYamanishi/SDFont

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

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

https://evanw.github.io/font-texture-generator/example-webgl/

エフェクトにも使えそう

https://www.instagram.com/p/Bw-ZmVBDu1e/

https://twitter.com/Reputeless/status/1357282410765766656

HTMLヤバテクニック

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

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

https://designsystems.international/

https://taliacotton.com/

http://schemasofuncertainty.com/

→ Web Brutalism

https://ertdfgcvb.xyz/

https://play.ertdfgcvb.xyz/

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

(クワイン - 自身のソースコードと完全に同じ文字列を出力するプログラム)

時計

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

https://gdr.jagda.or.jp/articles/46/

TokyoTDC

drop clock

hikari no tokei

http://www.stefanieschwarz-graphicdesign.de/timed-type/processing-clock.html

https://editor.p5js.org/robamoto/full/l2dyU9tJ3

https://twitter.com/RavenKwok/status/1120716979302592513

check 2022/3/19 ここまで

hr

リリックビデオ

tamaki royことの次第 - 折笠良

http://archive.j-mediaarts.jp/festival/2018/art/works/21a_Datum_Point/

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

Kraak & Smaak - Squeeze Me (feat. Ben Westbeech)

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

6566/6566

オオカミとブタ

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

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

読めないリリックビデオ - 井口こうたさん + 大原大次郎さん

3DCG

https://www.itsnicethat.com/articles/universal-everything-offf

https://www.youtube.com/watch?v=zRriTwENZ2E

OFFF By Night 2016 | Title Sequence

デザインあのテーマ

2Dエフェクト

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

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

https://vimeo.com/301259007

https://vimeo.com/361830947

https://vimeo.com/384158985

アルゴリズムとの組み合わせ

AI

Analyzing 50k fonts using deep neural networks

Generating typography using Style GAN

Neural UNKNOWN

NEURAL Street.Art

ビットマップ／カスタムピクセル

グリッドの方を動かす

https://www.instagram.com/p/CMft_kACrpP/

https://www.instagram.com/p/CIsSDr4i-29/

https://www.instagram.com/p/CBk91dNCSYo/

リニア

https://www.instagram.com/p/B8ZRT7Fi7Oh/

https://www.instagram.com/p/Ca2iLnlqU2y/

アスキーアート／文字で別のものを表現

for all seasons　

あたらしいたましい

http://blog.gupon.jp/2011/10/cd.html

https://web.archive.org/web/20110611074717/http://white-screen.jp/?p=5793

https://www.youtube.com/watch?v=QMYfkOtYYlg

https://www.youtube.com/watch?v=-Tq_npwqnc8

IOCCC

https://twitter.com/RavenKwok/status/1465332559882063874

https://vimeo.com/69946598

https://vimeo.com/217657829

【Bad Apple!!】Visual Studio Code の自動フォーマット

https://github.com/kevinjycui/bad-apple/tree/master/vscode-formatter/bad-apple

手書き

畳谷さん

http://www.tatamitani.work/

Coloso. 畳谷

ぶーしゃかループ - yugop

質感

https://tian-design.com/GAFA-DEGREE-SHOW-2020

エレメントによる組み合わせ

BURNOUT SYNDROMES - 文學少女 - 大橋史

http://ohashitakashi.blogspot.com/2015/07/burnout-syndromes.html

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

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

1000円 （安い）

CHANNELER

http://ohashitakashi.blogspot.com/2012/02/

シミュレーション

https://vimeo.com/394496399

KinecticTypography作家

https://www.schultzschultz.com/

https://twitter.com/staringispolite/status/1503766290552352769

https://www.instagram.com/nikitaiziev/

https://www.instagram.com/monkeytype.xyz/

https://instagram.com/kyledailydesign

https://www.instagram.com/threedashes___/

https://spin.co.uk/work/

作字のタグ？

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

https://www.peslab.com

https://www.checkitout.studio

https://www.nobl.tv

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

Trailer Motion Motion 2018

https://wolph.notion.site/9236dc6f345d4690a1883471799116e4?v=41de09b8e7224d39a1e245ffe2ef08db

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

本

TYPOGRAPHY FOR SCREEN

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

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

メモ

https://instagram.com/burnier

burst helvetica inaba hideki

Helvetica vs Arial

https://lsi.fba.up.pt/2019/en/2019/05/08/visual-references-to-o-p3-dynamic-typography/

http://www.stefanieschwarz-graphicdesign.de/

https://www.nhk.or.jp/techne/works/content.html#typography

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

check2022/4/2 に一旦完了

#Technique