We Are Gradient
Kanishak Mahendiratta
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
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
18
Framer Components
3D Blob
FrameKit