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 :
Masking Effect
Text inversion
Like this project
0
Posted Mar 8, 2024
Gradient is an creative experience company. They are passionate, creative, and extremely thoughtful from upstream thinking to the smallest executional detail
Likes
0
Views
17
Framer Components
3D Blob
FrameKit