How to provide rich feedback for mouse interactions to improve user engagement?
Browsers provide mouse and keyboard interactions, but how can we maximize user feedback within the limited screen space? This has been a long-standing question for me. Here, I’ll set aside discussions about the keyboard and focus on the mouse. I aim to expand the range of mouse interactions, reducing the monotony of simple dragging or scrolling for users.
In my previous work, I created CSS animations and shader effects for event pages celebrating new phone launches. Most of the time, these were driven by the product manager’s ideas, resembling movie promotional posters that forced users into passive scrolling and swiping. This was an extremely frustrating experience.
Here, I want to take a different approach. Instead of relying on CSS interpolated animations, I aim to use physics-based animations. While they may not appear as smooth as the former, they feel more intuitive. My idea is to first provide a shared shader context, use the DOM to calculate layouts, and then implement an animation queue. This approach can broaden the possibilities, such as targeting different media types and customizable interaction events. Moreover, with tools like R3F and Drei already offering foundational support, this becomes more feasible.
Referencing Active Theory, 14islands, and lusion, I focus on two alignment methods: Scissor Test and 1:1 Orthographic Sync. My philosophy: Let HTML carry the substance, and let WebGL take over the interaction.
class RigTracker {
matrix = new Float32Array([
1, 0, 0, 0,
0, 1, 0, 0,
0, 0, 1, 0,
0, 0, 0, 1
]);
// IntersectionObserver HTML
// Inject Lerp
// Compute Bounds
// Instancing \ Culling
// TransformMatrix
}