Wavelet
- Role
- Concept
- Motion Design
- Creative Coding
- Stack
- GSAP
- SVG
- TypeScript
Wavelet is a motion study: a 13×8 field of sprung points that bends around your cursor and carries a ripple when you tap it, the kind of kinetic detail I usually build in After Effects or Blender, rebuilt as living code.
01 / The idea
Motion tools render; browsers respond. A ripple in After Effects plays the same way every time; a ripple in the browser starts where you touch it. Wavelet is the same energy made conversational: the field doesn't perform for you, it reacts to you.
02 / The physics
Each point sits on a spring. Displacement follows a Gaussian falloff around the cursor (σ ≈ 95px), so the field swells smoothly rather than snapping. A click seeds a wave that propagates radially at roughly a pixel per millisecond, every point delayed by its distance from the impact, swelling and settling in sequence.
03 / The craft rules
Everything animates on GPU-only properties: transform and opacity, nothing that triggers layout. Springs are pre-built and reused (GSAP quickTo) instead of allocated per frame, so a sweep across 104 points costs almost nothing. And for visitors with reduced motion enabled, the field simply holds still.