これまで作ってきたOBS（その他XsplitやStreamlabs等）の配信ソフトウェアに組み込める素材をまとめました。
これまでわたしのTwitterで投稿してそれっきりだったので、自分向けの整理でもあります。
今後作るたびにここに追記していきます。
まとめVer.1.0　2022/1/9

時計

フリップ式

文字盤がパタパタと動く昔懐かしい感じのフリップ式クロックです。
1つの数字を表すのに上下パネルの2つ分を用意する必要があり、なおかつ、対象の数字の2つ手前の数値への制御が必要になったり、時間の1桁目が23時から00時のタイミングで3→4から3→0にしなければならないなど、なかなか苦労した作品です。その甲斐あって、たくさんの反応をいただきまして、今までに作った中で最も好評だったのではないかなと思っています。
https://nmnm.mn/youtube/flipclock.html

URLパラメータを利用したタイムゾーン設定に対応しており、TZ databaseで定義されているデータベース名を当てることで、対象地域の時間を表示させることが可能です。
例
無指定（日本）：https://nmnm.mn/youtube/flipclock.html
協定世界時：https://nmnm.mn/youtube/flipclock.html?timezone=UTC
ニューヨーク：https://nmnm.mn/youtube/flipclock.html?timezone=America/New_York

まるで後ろのビジュアルに穴を開けたような見せ方が出来るように、フレーム枠にエンボスを入れて、フロップが組み込まれているような見た目を演出しています。
このあたりフレームのビジュアルについては、カスタムCSSでフレーム内部色、内シャドウ色、エンボスの深さ、角丸の大きさなどをコントロールできるようにしてあります。
下の動画のサムネだとフレームそのものが見えなくなるようにしてありますね。

ドラム式

文字盤が回転する方式の時計です。
一部上記のフリップ式もドラム式と呼ぶことがあるんですが、こちらはダイヤルのように文字が刻まれた円筒形の部品がくるくる回る方式を再現しています。
こちらもフリップ式と同じくタイムゾーンに対応しています。設定方法は全く同じですので、フリップ式の説明文もしくはリンク先を参考にしてください。
https://nmnm.mn/youtube/drumclock.html

Javascriptによって入力された数字をカスタム変数としてCSSに取り込み、そのままCSS内部でcalc()関数によってドラムの回転角に変換しています。放り込まれた数値に対応する角度に自動的にアニメーションしているので、フリップ式の問題点であった、3→4と3→0を切り替える手間がなく、単純に108度→144度から108→360度への終点の差し替えが起こるだけだったので、34567890！という高速アニメーションに自動的に代替されました。

ただ、これも苦労した点があって、0から123456789まで36度ずつ遷移するのは簡単に作れても、実態として値が0のとき0度としたときに、9を経て次の0を360度にしないと9876543210という逆回転が起こります。だからといって、0を360度にしたところで次の1が36度なので360→36度となって098765432の動きになるだけという感じで、どこかでリセットする必要がありました。ですので、0のタイミングでは0.5秒間だけ360度（10を与える）、アニメーション設定を無効化して0度（0に再設定）にして、アニメーション設定を戻すという動作をしています。このためフリップ式と違ってドラム式のアニメーション時間設定が0～0.5秒という制限になっているのです。

7セグLCD

液晶表示器のうちもっとも一般的な7セグメントLCDを再現した時計です。
厳密に言えば、並びだけがそうなっているだけで、各液晶の角の作り方などまでは動作が複雑になりすぎる都合上再現できていませんのであくまで雰囲気だけって感じでご了承ください。
こちらもURLパラメータによるタイムゾーンに対応しています。
https://nmnm.mn/youtube/7segmentclock.html

セグメントに当たる部分をCSSで描いているため、太さや色、角丸の大きさなどをカスタムCSSでコントロールできるのが特徴です。

また、日付表示にも対応しています。

動作自体はデジタル風フォントではなく実際の7セグLCDと似ていて、ul要素内に7つのli要素があり、ul要素に与えられた数値によって反応するli要素を個別にコントロールしています。

例えばこんな感じ

/* 数字が1の時に2番と3番の液晶をアクティブにする */
ul[data-time="1"] li:nth-child(2),
ul[data-time="1"] li:nth-child(3) {
  background: var(--active-color);
  box-shadow: 0 0 var(--grow) var(--active-color);
  z-index: 1;
}

アナログ式

なんの変哲もないシンプルなアナログ式の時計です。
習作というか、自分自身の需要のために作ったものを公開した感じなので、あまり配布用のセットアップや説明書などもないし、タイムゾーンにも対応していないものですが、一応掲載しておきます。
https://nmnm.mn/youtube/clock.html

これもカスタムCSSで色々と変更ができますが、説明書を用意してなかったので、ここで説明しちゃいます。

カスタムCSS欄に入力して機能するもの

:root {
    --clock-bgcolor: #BACBD9; /* 時計の背景色 */
    --clock-opacity: 1; /* 時計そのものの透明度 0～1 */
    --clock-txcolor: #91B7D9; /* 文字の色 */
    --clock-font-family: 'Oswald', sans-serif; /* フォント */
    --clock-font-size: 15vmin; /* フォントサイズ */
    --hr-color: #59493B; /* 針（時）の色 */
    --hr-size: 3; /* 針（時）の太さ */
    --hr-lenght: 6; /* 針（時）の長さ */
    --hr-opacity: 1; /* 針（時）の透明度 */
    --mn-color:#261F1D; /* 針（分）の色 */
    --mn-size:1; /* 針（分）の太さ */
    --mn-lenght:8; /* 針（分）の長さ */
    --mn-opacity: 1; /* 針（分）の透明度 */
    --sc-color:#731702; /* 針（秒）の色 */
    --sc-size:0.5; /* 針（秒）の太さ */
    --sc-lenght:9; /* 針（秒）の長さ */
    --sc-opacity: 1; } /* 針（秒）の透明度 */
}

アニメーション背景

ハート

これはほんとにサンプル品。
fontawesomeのウェブフォントを利用して、CSS側で文字としてアイコン（ハート）を挿入し端から端まで動かすアニメーションです。
https://nmnm.mn/background/hearts.html

カスタム変数には対応していないので、カスタムCSSでアイコンや色などを変えるにはCSSの知識が必要になります。
ただ、実際にこれが出来ると、思惟かねさんのように好きなアイコンを好きな色味で好きな方向に移動させることが出来ます。

HTMLやCSSではランダム値を扱うことが出来ないため、SCSSでのコンパイルの際にli:nth-child(0)からli:nth-child(100)の連番を吐き出すタイミングで各種値にランダム値を振っている疑似的な固定値になっています。なので、何回ロードしても同じ描写になります。

これもかなり古いものなので、カスタム変数やランダム値の当て方を工夫したいですね。
いずれ進化させます。

ブロック

ゲーミングブロック

配信画面上にゲーミングな枠を設置したい場合に使えるゲーミング枠
https://nmnm.mn/youtube/gaming_block.html

ウィンドウサイズに追従するように設定済みなので、OBS側では予め設置したいボックスのサイズを確定させてから、ブラウザの縦横サイズを決め打ちにしたほうがきれいに収まります。
なお、枠の内側に当たる部分については背景透過が効きません。強制単色塗りになります。

カスタムCSS項目

:root {
  --body-padding: 30px; /* ウィンドウサイズから内側までの余白 */
  --border-width: 3px; /* ゲーミングの太さ */
  --border-skew: 0.5; /* ゲーミングの歪み */
  --border-blur: 10px; /* ゲーミングの光彩サイズ */
  --box-background-color: #fff; /* ゲーミングの内側の背景色 */
}