Accessibility & Performance

Reduced Motion

HF Motion listens to prefers-reduced-motion and responds to changes. Users requesting reduced motion receive visible content without continuous parallax movement.

First Paint and the JavaScript Fallback

For above-the-fold reveals, run the documented inline bootstrap in the document head and add data-hf-trigger="load" to the reveal or group. The guard is opacity-only; the runtime prepares the complete transform state before it marks the document ready.

The bootstrap removes its guard after three seconds if the runtime fails. That timeout is intentional: it prevents permanently hidden content, but a runtime that arrives after the timeout can no longer guarantee a flash-free first paint. Keep the bootstrap inline and the runtime small and cacheable.

Users requesting reduced motion are never hidden by the first-paint guard. Their content remains visible and transitions are disabled.

Performance Rules

• Prefer opacity and transform for most UI animation.

• Use blur sparingly because filter effects are more expensive.

• Keep parallax distances moderate on mobile.

• Avoid animating dozens of full-screen images simultaneously.

• The library uses requestAnimationFrame for parallax and passive scroll listeners when supported.

• Intersection observers suspend work for off-screen reveal and distant parallax elements.

• Use the load trigger for opening content and the default viewport trigger for content reached by scrolling.

Content and Interaction

• Never make essential information depend on an animation completing.

• Keep buttons and links usable throughout the reveal.

• Do not apply dramatic parallax to long body paragraphs.

• Use alt text normally; motion attributes do not replace accessibility markup.

• Test keyboard focus states after adding wrappers.

Mobile Guidance