Skip to content
Aristeia
Backgrounds & AtmosphereCircepattern

Film Grain Restraint

A named film layer that survives view transitions and never becomes a second animation competing with the aura.

Built here · no external address

Circe: Transformation patterns. One thing convincingly becoming another.

Why it matters

Grain is atmosphere until it flickers during navigation. Naming the film layer keeps it out of the VT snapshot pair.

Key techniques

  • view-transition-name: film on a single fixed layer.
  • Opacity low enough to texture, not weather.
  • No JS animation — CSS only.

What to steal

The transferable part.

Name the grain. Persistent chrome and persistent film follow the same rule.

What not to copy

Context-specific or costly.

Do not stack multiple animated noise layers. One is presence; three is mud.

Inclusion rationale

Documents a building-wide layer that every route already ships.

Technical register

Performance

Compositor-only; paused under reduced motion via global CSS.

Mobile

Slightly lower opacity on small screens to protect type.

Accessibility

Decorative; aria-hidden on the film node.

Study next

Related entries

NyxLayered Depth FieldFour translucent planes at different parallax depths producing depth with no canvas, no shader, and no main-thread cost.NyxCSS Depth PlanesParallax depth without a renderer — stacked planes, scroll velocity, and grain that still reads when WebGL never arms.HephaestusThe Instanced ForgeFour thousand ingots drawn in a single call, with the draw-call figure published next to the frame time so the cost of the scene is stated rather than implied.HermesEasing ComparatorSix curves, one scrubbable timeline — see the same motion under different laws instead of arguing about feel.