Ryan Perez · Environmental motion

Atmosphere, at the lowest useful intensity.

Unlike a button transition, these effects change the perceived space of a whole section. Every specimen below runs live at its real speed. If an effect is removed and nothing meaningful is lost, it was decoration — not a behaviour.

The formula Purpose + Trigger + Depth + Intensity + Duration + Fallback
Level 0 → 5

Six intensities, same section

The same hero rendered at every level of the ladder. Start at 0 and climb only when a condition justifies it.
Level {{ l.n }} · {{ l.effect }} Not a metaphor. Infrastructure.
{{ l.effect }} {{ l.tag }}
{{ l.use }} {{ l.cond }}
Escalation

Climbing the ladder

{{ e.t }}
Performance

What buys the right to animate

{{ p.k }} {{ p.t }}
.environmental-effect contain: layout paint; isolation: isolate; .environmental-effect__animated-layer will-change: transform, opacity; # only on layers that actually animate
Parallax types

Six kinds of depth

Each specimen loops its own displacement so you can see the ratio, not imagine it.
{{ p.t }}{{ p.ratio }}
{{ p.sample }}
{{ p.use }} {{ p.avoid }}
Speed

Scroll ratio per plane

{{ r.a }} {{ r.b }}
{{ r.t }}
Conditions

When parallax is wrong

{{ n.t }}
Fallback contract {{ f.t }}
Background categories

Six atmospheres, running

{{ b.sample }}
{{ b.t }}{{ b.cycle }}
{{ b.use }} {{ b.rule }}
{{ r.t }}
Layers

Seven lighting layers

Lighting simulates illumination through gradients, highlights, shadows and glows — and it must have one consistent source.
{{ l.t }} {{ l.d }}
{{ r.t }}
Patterns

Static, then animated

{{ p.sample }}
{{ p.t }} {{ p.use }}
Light mode

Depth from shadow, not glow

Soft directional shadow · warm ambient highlight
{{ r.t }}
Dark mode

Light establishes hierarchy

Radial spotlight · controlled rim light
{{ r.t }}
Combination

When effects share a section

{{ c.t }}
{{ r.t }}
Matrix

LAKA effect matrix

LAKA state Parallax Background Lighting
{{ m.c0 }} {{ m.c1 }} {{ m.c2 }} {{ m.c3 }}
Accessibility

What reduced motion turns off

{{ a.mark }} {{ a.t }}
@media (prefers-reduced-motion: reduce) .parallax-layer, .background-animated, .ambient-light, .traveling-light, .pointer-light animation: none !important; transform: none !important; # this page obeys it too — check your OS setting
Agent-readable

slow_hero_parallax

{{ l.t }}
The final environmental rule If an effect improves depth, orientation, atmosphere or storytelling, use the lowest intensity that achieves it. If it competes with reading, interaction, accessibility or performance, simplify it. If it is removed and nothing meaningful is lost, it was decoration.