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

Because the preloader covers the entire screen, it may block the Webflow Designer interface while editing pages. To temporarily disable it during editing:

1. Open the Preload Component
2. Select the main preload wrapper/container
3. Set Display: None

This will hide the preloader and allow you to edit pages normally inside Webflow Designer.

After finishing your edits:

1. Go back to the Preload Component
2. Change the wrapper display back to Display: Flex
3. Publish the website

The preloader animation will then work normally on the live site.

‍

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.