Build and copy a bespoke effect

Full Customizer

Adjust every advanced effect option, preview it live, and copy either complete data-attribute markup or a reusable set definition.

LIVE
Effects5
OutputsMarkup + set code
Runs offlineYes
Controls

Build a bespoke effect

Replay on re-entry
Preview

Live output

HF Motion

Preview content

Preview uses the current reveal settings.

Generated output

Data-attribute markup

Reusable set definition

Playground tips

  • For parallax, scroll the page after applying settings; duration and delay do not apply to scroll-bound movement.
  • Use direction="none" for opacity-only fades and blur-only reveals.
  • Negative parallax speed reverses the selected movement direction.
  • Keep strong blur, scale, and rotation effects limited to priority elements.
  • Copy the set definition when you plan to reuse the same motion style across the site.