Explore Effect
Dev Resources
Overview
Explore Effect is an infinite draggable media canvas where a mixed feed of images and videos tiles seamlessly across an unbounded grid. Every frame, the scene is composited in Canvas 2D and passed through a Three.js WebGL stage where a custom GLSL convex lens shader subtly bends the flat grid into a globe-like surface — making the viewport feel like a window pressed against a curved display. Drag releases into smooth inertia decay over 2.6 seconds, hover warms each card from dark blue to burgundy, and when the pointer rests, an autonomous diagonal drift keeps the world quietly alive.
Tech Stack
- React 19
- Three.js
- GSAP
- Vite
- Tailwind CSS
- GLSL
Highlights
- Convex lens distortion rendered via a custom GLSL fragment shader with aspect-corrected UV space and vignette blend
- Canvas 2D compositing pipeline feeds directly into a Three.js CanvasTexture fullscreen quad — zero DOM overhead
- Pointer drag with exponential velocity smoothing (0.65 / 0.35 lerp) flowing into GSAP power3.out inertia decay over 2.6 seconds
- Autonomous diagonal drift activates on idle, keeping the scene animated without any user input
- Deterministic infinite tiling via ROW_STRIDE stride pattern and a MurmurHash3-inspired integer hash for card identity
- Per-card hover interpolation at 12% lerp per frame, transitioning card background from black to gray
- Selective per-frame repaint — full redraw on camera move, video-only pass on new video frame, skipped entirely when nothing changes
- Viewport culling with pre-rendered card chrome bitmaps, image media cache, and per-asset video frame cache to eliminate redundant compositing
Formats
Github RepositoryGet Access to this Resource
Get instant access to your custom-built website, complete with stunning design and seamless functionality. Start showcasing your brand today!
Contact Us