← All motions
Fullscreen ↗

Dot Sphere

ドットスフィア

No.
343
Category
Loop
Tech
CSS / JavaScript
【対象要素】
- ヒーローや空きスペースの装飾グラフィックに適用する

【演出内容】
- 球面上に均等に散らした点群が、地球儀のようにゆっくり回転し続ける
- 手前の点は明るく大きく、奥の点は暗く小さくして球体感を出す

【品質要件】
- 点は球面に均等分布させる(極に集中させない)
- 回転は等速にする
- ループの継ぎ目が分からないよう、終了時の状態と開始時の状態を完全に一致させる
- prefers-reduced-motion 時はアニメーションを止め、静止した完成状態で表示する

Prompts and demo code are free to use in your own projects. See About.