Component Events — How to create full viewport interactions

Step 1: Wrap the Breakpoint in a Viewport Component

Start by designing your main layout container to fit the entire viewport.​

Why? This allows you to easily manage state and events throughout the whole section of your site, creating a centralized control point for all your interactions.​

How? In Framer, create a Component and set its sizing properties to width fill and height 100vh.

You now have a dedicated space to control all background changes and interactions.

Step 2: Create Variants for Interaction States

Within your viewport component, define different Variants for each hover state. You'll typically want:​

• An Initial State (default background)

• Several Hover States (each representing a different background for a hovered link)

• Additional Appear/Exit Variants for smooth transitions

Why? Variants allow you to define multiple visual states within a single component, making it easy to switch between different backgrounds.​

How? Manage all variants inside the same component to keep state logic centralized. Each variant should have its distinct background styling ready.​

Now that your variants are ready, let's connect them to the elements that will trigger these changes.​

Step 3: Set Up Triggers by Going Deeper into Sub-components

To make a specific link trigger a background change, you need to fire events from components nested inside your viewport.​

Why? Keeping interaction triggers on parent-level components provides clearer control logic and makes your component structure more maintainable.​

How? Create a dedicated Component for your interactive element. Nest further sub-components if you want effects like underline or glitch animations.

Design principle: Go as deep as needed for animation, but keep the actual interaction trigger (hover event) on the parent stack for clearer control logic.​

With your component structure in place, you're ready to add the interaction triggers.​

Step 4: Trigger Events Using Mouse Enter and Mouse Leave

Within your newly created component, add event triggers to control when background changes occur.​

Why? Mouse Enter and Mouse Leave events create smooth, natural interactions that respond immediately to user behavior.​

How? Set up your events accordingly:​

• On Mouse Enter: Set this event to trigger a change to the relevant hover variant in your viewport component.

• On Mouse Leave: Revert to the default or exit variant.

In Framer's interaction settings, assign these event handlers at the correct component level (the parent, not the deepest child).​

These triggered events now need to be captured by your main viewport component.​

Step 5: Catch Events and Action a Change of Variant

See how we catch the 2 different events for each element (Mouse Enter + Mouse Leave). These are the events we'll use to trigger a change of variant.

Why? This event-driven architecture allows any hover event within your text stack to seamlessly trigger a full background change while keeping your components modular and reusable.​

How? Your main viewport component will now listen for these events and update its variant accordingly. Connect the events in your sub-components to the corresponding variant changes in your main component.​

Conclusion

This workflow gives you full creative control: dynamic, scalable, and code-free. You can expand on this approach by adding more hover effects, integrating animated transitions with appear/exit variants, and mapping additional events to create increasingly sophisticated interactions.

For further learning, explore gesture triggers for mobile compatibility, or experiment with variant chaining for more complex UI effects.

Some inspiration below!