オービット（楕円軌道の周回）

orbit animation / orbiting dots / elliptical orbit

オービット（楕円軌道の周回）

いくつかの点が中心のまわりを楕円の軌道で回り続ける常時ループ。真円を平らに潰して軌道面を少しずつ傾け、手前に来た点だけを大きく濃くするだけで、平面のままでも「奥行きのある小さな天体」に見える。アイコン・ローダー・ボタンの装飾の定番。

01 — Demo video

Play live →

02 — Prompt template

アイコン・ボタンの装飾に orbit animation(楕円軌道を周回する点)を実装してください。

- 中心に揃えた5個前後の点を置き、点ごとに軌道半径(最大 {{radius}}px の0.3〜1倍)・軌道面の傾き(--start: 0〜360deg)・初期位相(--phase)を変える
- 角度は @property --orbit(syntax: "<angle>")で登録し、@keyframes で 0deg → 360deg を linear infinite で回す。基準の周期は {{period}}s。点ごとに 0.8〜1.7 倍へばらし、半分は animation-direction: reverse にする
- 位置は translate で出す: x = r·cos(θ)、y = r·{{tilt}}·sin(θ)(θ = --orbit + --phase)。この楕円を --start だけ回転させて軌道面ごとに傾ける。top/left は動かさない
- 奥行きは sin(θ) から作る: 手前(y が正)ほど scale を最大 1+{{depth}} まで大きく・opacity 1 に、奥ほど 1−{{depth}} まで小さく・opacity 0.45 程度まで薄くする
- 静止時は各点を --phase の位置(星座のような配置)に置いておき、ホバー/フォーカスで @property --mix(<number>

アイコン・ボタンの装飾に orbit animation(楕円軌道を周回する点)を実装してください。

- 中心に揃えた5個前後の点を置き、点ごとに軌道半径(最大 {{radius}}px の0.3〜1倍)・軌道面の傾き(--start: 0〜360deg)・初期位相(--phase)を変える
- 角度は @property --orbit(syntax: "<angle>")で登録し、@keyframes で 0deg → 360deg を linear infinite で回す。基準の周期は {{period}}s。点ごとに 0.8〜1.7 倍へばらし、半分は animation-direction: reverse にする
- 位置は translate で出す: x = r·cos(θ)、y = r·{{tilt}}·sin(θ)(θ = --orbit + --phase)。この楕円を --start だけ回転させて軌道面ごとに傾ける。top/left は動かさない
- 奥行きは sin(θ) から作る: 手前(y が正)ほど scale を最大 1+{{depth}} まで大きく・opacity 1 に、奥ほど 1−{{depth}} まで小さく・opacity 0.45 程度まで薄くする
- 静止時は各点を --phase の位置(星座のような配置)に置いておき、ホバー/フォーカスで @property --mix(<number>

アイコン・ボタンの装飾に orbit animation(楕円軌道を周回する点)を実装してください。

- 中心に揃えた5個前後の点を置き、点ごとに軌道半径(最大 {{radius}}px の0.3〜1倍)・軌道面の傾き(--start: 0〜360deg)・初期位相(--phase)を変える
- 角度は @property --orbit(syntax: "<angle>")で登録し、@keyframes で 0deg → 360deg を linear infinite で回す。基準の周期は {{period}}s。点ごとに 0.8〜1.7 倍へばらし、半分は animation-direction: reverse にする
- 位置は translate で出す: x = r·cos(θ)、y = r·{{tilt}}·sin(θ)(θ = --orbit + --phase)。この楕円を --start だけ回転させて軌道面ごとに傾ける。top/left は動かさない
- 奥行きは sin(θ) から作る: 手前(y が正)ほど scale を最大 1+{{depth}} まで大きく・opacity 1 に、奥ほど 1−{{depth}} まで小さく・opacity 0.45 程度まで薄くする
- 静止時は各点を --phase の位置(星座のような配置)に置いておき、ホバー/フォーカスで @property --mix(<number>

03 — Params

radius(軌道の半径 px) — 範囲 40〜110 / 初期 84
いちばん外側の軌道の半径。点ごとに0.3〜1倍の半径を割り振り、同心円に揃えない。アイコン内なら6〜10px、ヒーローの装飾なら80〜120pxが目安(デモは枠に収まる110pxまで)。
tilt(軌道の縦の潰れ比率) — 範囲 0.2〜1 / 初期 0.45
縦方向の半径÷横方向の半径。1で真上から見た真円、0.35〜0.6で斜めから覗いた軌道になり奥行きが出る。0.25を切ると横一線の往復に見える。
period(基準の周期 s) — 範囲 1.5〜12 / 初期 2.5
いちばん速い点が1周する秒数。ほかの点は0.8〜1.7倍にばらし、半分は逆回りにする。2〜4sで「稼働中」、6s以上で背景の気配になる。
depth(手前と奥の大きさの差) — 範囲 0〜0.4 / 初期 0.2
軌道の手前(下半分)で大きく、奥(上半分)で小さくする振れ幅。0.15〜0.25で自然。0だと平面を滑っているだけに見え、0.35を超えると点が膨らんだり縮んだりして見える。

04 — Vocab

elliptical orbit(楕円軌道) — 真円の縦半径だけを縮めた軌道。斜めから覗いた円に見えるので、それだけで回転面に奥行きが生まれる。
@property — CSSカスタムプロパティに型( や )を登録する規則。登録すると角度や混合率を @keyframes や transition で補間でき、cos()/sin() に渡して軌道を描ける。
phase(位相) — 周回の開始角度。点ごとにずらすと一斉に同じ位置を通らなくなり、静止時もばらけた配置になる。
depth cue(奥行きの手がかり) — 大きさ・濃さ・重なり順など、平面で奥行きを感じさせる要素。軌道の手前で大きく濃く、奥で小さく薄くするのが最小構成。

05 — NG → OK examples

言い方: 「「ロゴのまわりを点がくるくる回るアニメーションにして」」

なぜNG: 「くるくる回る」だと、点を並べた親要素ごと rotate する実装が返ってきやすい。全点が同じ速さ・同じ真円で回るので時計の針のように機械的になり、奥行きも出ない。周期も指定が無く、速すぎるとローディング中に見える。

言い方: 「「orbit animationを実装。点5個をそれぞれ別の楕円軌道(縦横比0.45・軌道面は点ごとに傾ける)で周回。@property --orbitで角度を回し、周期2.5sを基準に0.8〜1.7倍・半分は逆回り。手前ほどscale 1.2・奥ほど0.8で薄く。ホバーで--mixを0.5sで補間して回し始める。reduced-motionは静止配置」」

なぜOK: 親ごと回すのではなく点ごとに角度を持たせる方式と、軌道の潰れ・周期のばらし・奥行きの振れ幅まで数値で指定している。「手前ほど大きく濃く」の一言で、平面の円運動が立体の周回に変わる。