We Are Gradient

The team at gradient created a unique design for home page where they wanted to reveal a video reel as we scroll through a mask. To achieve this, they needed custom code in framer: The problem statement :

Scrolling Reveal: A circular mask expands as the user scrolls, progressively unveiling the video reel.

Cursor Interaction: The mask seamlessly follows the user's cursor and remains attached during scrolling for a playful, interactive effect.

Soft Edge: The circular mask features a feathered edge, creating a visually pleasing transition.

Text Inversion: Text color inverts as the mask passes over it, ensuring readability and adding visual interest.

The Result :