PCはマウス、スマホはジャイロで光の反射とホログラムパターンが変化します。
右上のコントロールパネルで調整可能です。
仕組み
このオーロラ表現は、実際の光学シミュレーションではなく「虹色のテクスチャを角度に合わせて動かす」 という方法で作っています。ポイントは、ステッカーの傾きに応じて色の位置をずらすことです。
1. マウス位置から傾きを計算する
ステッカーの中心からのずれを使って X/Y 回転角を作ります。 `tiltIntensity` を上げるほど、同じマウス移動でも大きく傾きます。
rotationY = ((x - centerX) / centerX) * tiltIntensity
rotationX = -((y - centerY) / centerY) * tiltIntensity2. オーロラの色レイヤーを作る
白い反射帯（linear-gradient）と虹色（conic-gradient）を重ねて、 オーロラ用の色を作ります。さらに `mix-blend-color-dodge` で明るい発色に寄せています。
auroraBase = linear-gradient(...) + conic-gradient(...)
aurora = color-dodge(auroraBase)3. 傾きに合わせて色の位置をずらす（ここが肝）
回転角を使って `background-position` を動かすことで、 見る角度が変わると色が流れるように見せています。 `holoShiftStrength` はこの色移動の強さです。
holoX = 50 + rotationY * holoShiftStrength
holoY = 50 + rotationX * holoShiftStrength4. PNG の形に切り抜く
オーロラ・グレア・ノイズの各レイヤーに同じ `mask-image` を適用して、透過 PNG の形だけに効果を出します。 これで余計な領域に色が出ません。
finalLayer = effectLayer * alpha(mask)5. 仕上げの質感を足す
グレアはカーソル追従のハイライト、ノイズは箔のざらつき感、 輪郭はステッカーのフチを見せるためのレイヤーです。 主役はオーロラですが、これらを足すと素材感が安定します。
final = base + aurora + glare + noise + outlineDev Controls
Tilt Intensity
20deg
Holo Shift (Prismatic)
2.5x
Outline Width
2.0px
Outline Color
#ffffff
Aurora Opacity
0.30
Glare Opacity
1.00
Noise Opacity
0.30