Copy and paste the component into your Framer project.

Create a parent frame and set its height to 100vh plus your desired scroll distance (e.g., if scroll distance is 800px, make the parent 100vh + 800px tall).

Inside that parent, create a stack set to 100vh with position set to sticky and top set to 0—this keeps the text fixed while you scroll.

Place the Scramble Text Reveal component inside the sticky stack.

Ensure all parent's have overflow set to visible

Enter your text in the "Text" property and style it using the Font and Text Color controls.

Customize the animation: Scramble Radius sets how far letters scatter, Max Rotation controls the tilt angle, Scroll Distance should match the extra height you added to your parent, Start Trigger sets when the animation begins, and Random Seed changes the scramble pattern.

Check out the sample remix file for a ready-made setup you can reference.