Instructions

This template includes a global Preload animation component applied across all pages.

The preload wrapper is set to Display: None by default, so it stays hidden in the Webflow Designer and won't block editing. You can open and edit any page immediately — no manual toggling needed.

On the published site, the page-load interaction automatically switches the wrapper to Display: Flex when the animation starts, so the preloader still plays normally for visitors.

If you ever need to preview the preloader in Designer:

1. Open the Preload Component
2. Select the main wrapper/container
3. Temporarily set Display: Flex to see it
4. Set it back to Display: None afterward so the Designer stays clean for editing

‍

Add to any element that should trigger a scramble on mouse hover.

• data-scramble-hover — add to the wrapper/trigger element
• data-scramble-hover-text — add to the specific text element inside that wrapper (optional — if omitted, the effect runs on the trigger element itself)

Add to any text element. The animation triggers once when the element enters the viewport.

• data-scramble — no value needed, activates the effect
• data-duration — how long each character takes to unscramble, in seconds (default: 0.4)
• data-stagger — delay between each character, in seconds (default: 0.04)
• data-speed — scramble noise speed, higher = settles faster (default: 0.5)

If a child element inside a scrambled parent should be excluded , add data-scramble = skip to that child.

Add to a span element inside a heading. Leave the span's text content empty.

• data-typewriter — no value needed, activates the effect
• data-words — comma-separated list of words to cycle through, e.g. AI Product,AI Tool,AI Platform
• data-delay — delay before starting, in milliseconds (default: 0)

If this span sits inside an element that has data-scramble, also add data-scramble = skip to the span to prevent conflict.