Water Distortion Effect• Vertex shader creates wave displacement on Z-axis
• Fragment shader maps texture to distorted surface
• Wave amplitude and speed increase on hover
• Smooth transitions using linear interpolation
• Fragment shader maps texture to distorted surface
• Wave amplitude and speed increase on hover
• Smooth transitions using linear interpolation
Burn Transition Effect• Leveraging fragment shaders to create radial burn pattern using Signed Distance Fields
• Organic shapes created using multiple overlapping circles with noise distortion and rotation
• Smooth blending of circles using soft min/max functions
• Leverage GSAP to control progress animation for smooth 2-seconds reveal
(Hover me to reveal)
• Organic shapes created using multiple overlapping circles with noise distortion and rotation
• Smooth blending of circles using soft min/max functions
• Leverage GSAP to control progress animation for smooth 2-seconds reveal
Holographic Card Effect• Shader creates dynamic holographic patterns using value noise generation
• View-dependent color shifts based on normal angles and light direction
• HSV/RGB color space transformations for rainbow holographic effect
• Interactive 3D rotation following mouse movement with smooth interpolation
• Use of gl from useThree hook to access 3d canvas element
• Card rotation and tilt resets based on distance from center of canvas
• View-dependent color shifts based on normal angles and light direction
• HSV/RGB color space transformations for rainbow holographic effect
• Interactive 3D rotation following mouse movement with smooth interpolation
• Use of gl from useThree hook to access 3d canvas element
• Card rotation and tilt resets based on distance from center of canvas
(Mouseover or tap to pan me)
Paint Over Effect• Used HTML5 Canvas to create a dynamic drawing surface
• Linear Interpolation to create intermediate points for a smooth transition
• Masking used to render overlay image and mapped onto canvas
• Time based animation using point object to track time and opacity
• Linear Interpolation to create intermediate points for a smooth transition
• Masking used to render overlay image and mapped onto canvas
• Time based animation using point object to track time and opacity
