アンビエントフロート — 動きの伝え方辞典

ambient float / floating animation / idle drift

アンビエントフロート

画像や図形が、ごくゆっくり上下に漂い続ける常時ループ。止まった画面に「生きている気配」だけを足す背景の動きで、要素ごとに周期をずらして揃わせないことが品質のすべて。

01 — Demo video

Play live →

02 — Prompt template

装飾要素に ambient float(常時ループする浮遊アニメーション)を実装してください。

- 各要素を transform: translateY で上下 {{distance}}px の範囲で往復させる
- 基準の周期は {{duration}}s、animation-direction: alternate + ease-in-out で折り返す
- 要素ごとに周期を ±{{spread}}% ずらし、全体が同時に動かないようにする
- 同時に rotate を ±{{rotate}}deg 添えて、単純な上下動に見せない
- 開始位相もずらす。animation-delay に負の値を入れ、初回表示の時点で各要素が周期の途中にいる状態にする
- top/margin ではなく transform のみで動かす(リフローさせない)。will-change: transform を付ける
- prefers-reduced-motion 時はアニメーションを止め、要素は静止位置に置く

装飾要素に ambient float(常時ループする浮遊アニメーション)を実装してください。

- 各要素を transform: translateY で上下 {{distance}}px の範囲で往復させる
- 基準の周期は {{duration}}s、animation-direction: alternate + ease-in-out で折り返す
- 要素ごとに周期を ±{{spread}}% ずらし、全体が同時に動かないようにする
- 同時に rotate を ±{{rotate}}deg 添えて、単純な上下動に見せない
- 開始位相もずらす。animation-delay に負の値を入れ、初回表示の時点で各要素が周期の途中にいる状態にする
- top/margin ではなく transform のみで動かす(リフローさせない)。will-change: transform を付ける
- prefers-reduced-motion 時はアニメーションを止め、要素は静止位置に置く

装飾要素に ambient float(常時ループする浮遊アニメーション)を実装してください。

- 各要素を transform: translateY で上下 {{distance}}px の範囲で往復させる
- 基準の周期は {{duration}}s、animation-direction: alternate + ease-in-out で折り返す
- 要素ごとに周期を ±{{spread}}% ずらし、全体が同時に動かないようにする
- 同時に rotate を ±{{rotate}}deg 添えて、単純な上下動に見せない
- 開始位相もずらす。animation-delay に負の値を入れ、初回表示の時点で各要素が周期の途中にいる状態にする
- top/margin ではなく transform のみで動かす(リフローさせない)。will-change: transform を付ける
- prefers-reduced-motion 時はアニメーションを止め、要素は静止位置に置く

03 — Params

distance(漂う幅 px) — 範囲 4〜60 / 初期 18
上下の振れ幅。12〜24pxが「気配」の範囲。40pxを超えると背景ではなく主役になり、読ませたい本文から視線を奪う。
duration(1往復の時間 s) — 範囲 2〜14 / 初期 6
基準の周期。5〜8sが呼吸に近く自然。3s以下だと「浮遊」ではなく「振動」に見える。
spread(周期のばらつき %) — 範囲 0〜60 / 初期 35
要素ごとに周期を何%ずらすか。0にすると全部が同時に上下して機械的になる。30〜40%で有機的に散る。
rotate(傾きの揺れ deg) — 範囲 0〜8 / 初期 2
上下動に添える回転。1〜3度で十分。テキストや写真に付けるときは0〜1度に抑えないと酔う。

04 — Vocab

ambient animation — 操作に反応せず常時流れ続ける背景の動き。主役ではなく「画面が生きている」ことだけを伝える役割。
負のanimation-delay — delayにマイナス値を入れると、その分だけ再生済みの状態から始まる。全要素の開始位相をずらすのに使う定番の手。
animation-direction: alternate — 1周ごとに再生方向を反転させる指定。keyframesに戻りを書かずに往復でき、折り返しが自然になる。
デシンク(desync) — 複数要素の周期をあえて非整数比にずらすこと。揃うと機械的、ずらすと有機的に見える。
prefers-reduced-motion — 動きを減らす端末設定。止まらないループは酔いの原因になりやすく、常時アニメーションでは対応が特に重要。

05 — NG → OK examples

言い方: 「「画像をふわふわ浮かせて」」

なぜNG: 「ふわふわ」では振れ幅も周期も決まらない。全要素が同じ duration・同じ delay で animation され、6枚が完全に同期して上下する“エレベーター”になって返ってくることが多い。

言い方: 「「ambient floatを実装。translateYで±18px、周期6sをalternate + ease-in-outで往復。要素ごとに周期を±35%・開始位相を負のanimation-delayでずらす。rotateは±2度。transformのみ、reduced-motionでは静止」」

なぜOK: 振れ幅・周期・ばらつき・位相までを数値で指定している。特に「周期と位相をずらす」の一言が、機械的な同期を防いで有機的な浮遊にする決定打になる。