LOTTIE
01
針が踊る（ダンシング・ニードル）
計器盤の針が、置き場所に困って左右にステップを踏んでいる。
商用利用OK・クレジット任意（リンク歓迎）
—Playground / Motion
モーションライブラリ
使えるだけでは、つまらない。紙・タイポ・UIの「ちょっと変」な瞬間を集めた、全66点のモーション実験室です。Lottieはダウンロード、CSSモーションはコードをそのままコピーできます。
商用利用OK・クレジット任意（リンク歓迎）／ 毎週新作を追加
66Exhibits
LOTTIE
02
橙信号、行進中
5つの橙ドットが、順番に肩を叩き合うように点滅しながら進む。
商用利用OK・クレジット任意（リンク歓迎）
LOTTIE
03
罫線、生まれる瞬間
何もない紙の上に、見出しと本文の罫線が一本ずつ組版されていく。
商用利用OK・クレジット任意（リンク歓迎）
LOTTIE
04
積み木ローディング
データが積み木のように積み上がって、崩れて、また積み上がる。
商用利用OK・クレジット任意（リンク歓迎）
LOTTIE
05
輪転機、無限に回る
印刷の輪転機を模した目盛りが、休みなく一周し続ける。
商用利用OK・クレジット任意（リンク歓迎）
LOTTIE
06
走査線、上下する
罫線の箱の中を、橙の走査線がスキャナーのように往復する。
商用利用OK・クレジット任意（リンク歓迎）
SVG/CSS
07
AI、今書いてます
カーソルを点滅させながら、AIが今まさに一文字ずつ打っている風の表示。
商用利用OK・クレジット任意（リンク歓迎）
SVG/CSS
08
タグ、順番待ち
NEWS→GUIDE→REPORT→TOOLSの囲みタグが、順番に自分の番を主張する。
商用利用OK・クレジット任意（リンク歓迎）
LOTTIE
09
レッドゾーンと火遊び
回転計の針がじりじり煽ってレッドゾーンに指先タッチ、我に返って0まで急降下する。
商用利用OK・クレジット任意（リンク歓迎）
LOTTIE
10
方位磁針、北で迷子
ひと回りしてから行きつ戻りつ、震えながら「たぶんこっちが北」に落ち着く。そしてまた回る。
商用利用OK・クレジット任意（リンク歓迎）
LOTTIE
11
秒針、几帳面な性格
1目盛りごとに小さく飛び跳ねながら、律儀に一周する秒針。時報はありません。
商用利用OK・クレジット任意（リンク歓迎）
LOTTIE
12
オドメーター、桁上がりの夜
下一桁は働き者。繰り上がりの瞬間だけ、隣の桁がしぶしぶ動く。走行距離は不明。
商用利用OK・クレジット任意（リンク歓迎）
LOTTIE
13
体温計、微熱の言い訳
橙の柱が平熱ラインの手前でためらって、結局越える。お大事に。
商用利用OK・クレジット任意（リンク歓迎）
LOTTIE
14
ピークホールド、置き去り
レベルバーはせわしなく上下、ピークの橙線だけが高みに残されて、そっと降りてくる。
商用利用OK・クレジット任意（リンク歓迎）
LOTTIE
15
水準器、まだ水平じゃない
気泡が中央の2本線を行き過ぎては戻る。水平は、いつも一瞬だけ。
商用利用OK・クレジット任意（リンク歓迎）
LOTTIE
16
ノギス、空気を測る
ジョーが静かに閉じて、何もない4pxを全力で測定。橙のランプが測定完了を主張する。
商用利用OK・クレジット任意（リンク歓迎）
LOTTIE
17
地震計、本日も平穏
記録紙は流れ、ペンはほぼ直線。一度だけ小さな山が来ても、すぐ平常運転に戻る。
商用利用OK・クレジット任意（リンク歓迎）
LOTTIE
18
砂時計、律儀に交代
砂が落ちきると、誰かが几帳面に180度回す。時間はこうして続いていく。
商用利用OK・クレジット任意（リンク歓迎）
LOTTIE
19
空気圧、詰めては漏れる
ポンプを押すたび橙の円弧がぐっと伸びて、目を離すとすうっと漏れていく。人生。
商用利用OK・クレジット任意（リンク歓迎）
LOTTIE
20
行末の一文字、追い出される
行に収まらなかった6文字目がマージンに衝突して点滅し、禁則処理でぴょんと次の行へ引っ越す。
商用利用OK・クレジット任意（リンク歓迎）
LOTTIE
21
カーソル、書いては消す
四文字打っては全部バックスペース。書き出しを永遠にやり直す、締切前の原稿のカーソル。
商用利用OK・クレジット任意（リンク歓迎）
LOTTIE
22
ルビ、ふりがなの着地
難読漢字の頭上に、ふりがなが一粒ずつ降ってきて整列。親字は着地のたびにくすぐったそうに揺れる。
商用利用OK・クレジット任意（リンク歓迎）
LOTTIE
23
両端揃え、伸びをする
ラグ組の段落がぐいっと両端揃えに伸びて、また脱力して戻る。最終行だけは組版の掟で我関せず。
商用利用OK・クレジット任意（リンク歓迎）
LOTTIE
24
段組、引っ越しの日
二段組の本文が荷物を運ぶように一段組へ引っ越して、やっぱり戻る。段間罫も気を利かせて出たり消えたり。
商用利用OK・クレジット任意（リンク歓迎）
LOTTIE
25
字間、詰めすぎて謝る
勢いよく詰めた二文字がゴツンと衝突してひしゃげ、ちょうどいい字間に落ち着く。カーニングの反省文。
商用利用OK・クレジット任意（リンク歓迎）
LOTTIE
26
原稿用紙、縦書きの行進
原稿用紙のマス目を右の行から縦に一字ずつ埋めていく。橙のカーソルが一マス先を歩いて先導する。
商用利用OK・クレジット任意（リンク歓迎）
LOTTIE
27
校正、赤入れ一閃
誤植に橙の見せ消ちが一閃、頭上に直しがスタンプされる。校閲者の仕事は早い。
商用利用OK・クレジット任意（リンク歓迎）
LOTTIE
28
鉤括弧、句点を迎える
「」が席を空けて、転がってきた句点をおもてなし。収まったらそっと寄り添う、約物たちの小さな社交。
商用利用OK・クレジット任意（リンク歓迎）
LOTTIE
29
トンボ、版面を決める
四隅のトンボが対角から飛んできて、版面がぱちんと決まる。締めは中央で見当マークがひと回転。
商用利用OK・クレジット任意（リンク歓迎）
LOTTIE
30
モールス、A・I
短点と長点でひたすら「AI」を打電し続けるランプ。打った符号は下の紙テープに律儀に印字される。
商用利用OK・クレジット任意（リンク歓迎）
LOTTIE
31
踏切のふたつ玉
列車は永遠に来ないのに、右よし左よしの交互点滅だけ律儀に続けている。
商用利用OK・クレジット任意（リンク歓迎）
LOTTIE
32
ドットの波、一名ノリノリ
横一列で波に揺られるドットたち。橙の一匹だけ振幅が大きく、明らかに楽しんでいる。
商用利用OK・クレジット任意（リンク歓迎）
LOTTIE
33
橙しか出ない信号機
青も赤も在庫切れ。それでも進め・注意・止まれを、点き方の違いだけで伝えきる横型三灯。
商用利用OK・クレジット任意（リンク歓迎）
LOTTIE
34
レーダー、本日も一名検出
走査線が一周するたび、右下の点がぴこんと膨らんで存在を主張し、また静かに薄れていく。
商用利用OK・クレジット任意（リンク歓迎）
LOTTIE
35
行列のできる窓口
先頭が呼ばれて消えるたび、全員が無言で一歩ずつ詰める。最後尾には新入り。列は永遠に減らない。
商用利用OK・クレジット任意（リンク歓迎）
LOTTIE
36
豆ランプ計算機
何を計算しているのかは誰も知らない。ただ16個の橙ビットが忙しなく瞬いている。
商用利用OK・クレジット任意（リンク歓迎）
LOTTIE
37
ソナー、返事待ち
円い声をひとつ放っては耳を澄ませ、返事のない海にまたひとつ放つ。
商用利用OK・クレジット任意（リンク歓迎）
LOTTIE
38
手旗信号、大忙し
先端が橙の両腕をきびきび振り替える無人の信号手。意味はたぶんある。たぶん。
商用利用OK・クレジット任意（リンク歓迎）
LOTTIE
39
秒読みの円陣
円陣のドットがぐるりと点いて満ちたら、全員で二度瞬いてやり直し。誰も秒は数えていない。
商用利用OK・クレジット任意（リンク歓迎）
LOTTIE
40
プログレスバー、白状する
90%まで見栄を張ってから「すみません、実は60%でした」と申告し、開き直って一気に完了する進捗バー。
商用利用OK・クレジット任意（リンク歓迎）
LOTTIE
41
一列そろって、成仏
積み木が3つ行儀よく着地し、列がそろった瞬間に光って消える。ロードにも達成感を。
商用利用OK・クレジット任意（リンク歓迎）
LOTTIE
42
砂時計、自分でひっくり返る
砂が落ちきっても誰も来ないので、あきらめて自力で半回転する働き者の砂時計。
商用利用OK・クレジット任意（リンク歓迎）
LOTTIE
43
衛星、脱走未遂
まじめに周回していたドットが隙を見て軌道を離れ、重力に説得されて何食わぬ顔で戻る。
商用利用OK・クレジット任意（リンク歓迎）
LOTTIE
44
尺取り虫、定時で帰る
一歩ずつ実直に伸び縮みして出勤してきた尺取り虫が、終業と同時にすごい速さで帰宅する。
商用利用OK・クレジット任意（リンク歓迎）
LOTTIE
45
ニュートンのゆりかご、稼働中
左端の玉の仕事が、そっくりそのまま右端の玉に丸投げされ続ける。運動量は保存される。
商用利用OK・クレジット任意（リンク歓迎）
LOTTIE
46
エレベーター、上りは各駅
上りは律儀に全階停車、下りは直通で一気に降りる。乗っている橙は文句を言わない。
商用利用OK・クレジット任意（リンク歓迎）
LOTTIE
47
スピナー、目を回す
定番の円弧スピナーが張り切って回りすぎ、ふらふらになって休憩してから何事もなかったように再開する。
商用利用OK・クレジット任意（リンク歓迎）
LOTTIE
48
ドミノ、倒れて立ち直る
順番に倒れた札たちが、反省の時間を挟んで一枚ずつ立ち直っていく。復旧までがドミノ。
商用利用OK・クレジット任意（リンク歓迎）
LOTTIE
49
ピンポン、無人ラリー
誰も操作していないのにラリーが終わらない。ロード中の暇つぶしはAI同士に任せる。
商用利用OK・クレジット任意（リンク歓迎）
LOTTIE
50
角、取れて戻る
尖っていた四角が回るうちに丸くなり、一周して初心の角を取り戻す。キャリアは往復。
商用利用OK・クレジット任意（リンク歓迎）
SVG/CSS
51
紙片、順番に飛び出す
三枚の色紙が、誌面から抜け出すように順番に跳ねて戻る。
商用利用OK・クレジット任意（リンク歓迎）
SVG/CSS
52
NEW
ステッカー、角から逃げる
貼ったばかりの丸ステッカーが角からめくれ、何食わぬ顔で貼り直される。
商用利用OK・クレジット任意（リンク歓迎）
SVG/CSS
53
紙吹雪、フライング祝福
まだ何も終わっていないのに、紙吹雪だけが先に祝ってしまう。
商用利用OK・クレジット任意（リンク歓迎）
SVG/CSS
54
マスキングテープ、貼り直し中
斜めに貼られたテープが自分で気づき、几帳面に水平へ戻る。
商用利用OK・クレジット任意（リンク歓迎）
SVG/CSS
55
網点、深呼吸する
印刷の網点が膨らんで縮み、色面が呼吸しているように揺らぐ。
商用利用OK・クレジット任意（リンク歓迎）
SVG/CSS
56
OKOK
スタンプ、二度押し
勢い余って二度押しし、少しズレた版まで味として残す。
商用利用OK・クレジット任意（リンク歓迎）
SVG/CSS
57
トンボ、四方から集合
四隅のトンボが一斉に版面へ寄り、ぴたりと印刷位置を決める。
商用利用OK・クレジット任意（リンク歓迎）
SVG/CSS
58
色紙、席替えの時間
橙・青・ピンクの三枚が、くるりと場所を交換して新しい配色を試す。
商用利用OK・クレジット任意（リンク歓迎）
SVG/CSS
59
検索窓、答えを照らす
虫眼鏡が検索結果を一行ずつ走査し、見つけた一件だけを蛍光色で照らす。
商用利用OK・クレジット任意（リンク歓迎）
SVG/CSS
60
123→
ページャー、次へ競争
1・2・3の丸が順番に前へ出て、NEXTだけが一歩遅れて追いつく。
商用利用OK・クレジット任意（リンク歓迎）
SVG/CSS
61
トグル、ONで祝う
スイッチがONになった瞬間だけ、周囲の小さな色片が拍手する。
商用利用OK・クレジット任意（リンク歓迎）
SVG/CSS
62
カード、先頭を譲り合う
三枚のカードが前後を入れ替え、結局もとの順番に落ち着く。
商用利用OK・クレジット任意（リンク歓迎）
SVG/CSS
63
?ここです
ツールチップ、言いたくて震える
小さなヘルプが我慢できずに飛び出し、一言だけ残して引っ込む。
商用利用OK・クレジット任意（リンク歓迎）
SVG/CSS
64
✓✓✓✓
チェック、隣へ伝染する
一つ目の完了が合図になり、チェックがドミノのように隣へ広がる。
商用利用OK・クレジット任意（リンク歓迎）
SVG/CSS
65
ABC
下線、メニューを散歩する
アクティブ下線が三つのメニューを渡り歩き、最後に最初へ戻る。
商用利用OK・クレジット任意（リンク歓迎）
SVG/CSS
66
並び替え、背の順に
ばらばらの棒グラフが一度で背の順に整列し、満足してまた散らばる。
商用利用OK・クレジット任意（リンク歓迎）
条件に合うモーションがありません。別の言葉で探してみてください。