Canvas Shape Vortex
3D gradient shapes spiraling through a canvas vortex tunnel with mouse interaction and depth-based scaling.
About This Effect
A canvas-based particle system that renders colorful 3D-looking shapes spiraling outward from a central vortex point. Each shape is drawn with radial gradient fills for a glossy dimensional look, scaled by distance for perspective depth, and gently rotates as it drifts outward. The vortex center subtly follows the mouse cursor for interactive feel.
What's Included
- 14 distinct shape types: spheres, hearts, flowers, clovers, moons, sparkles, clouds, and more
- 3D gradient fills with offset radial highlight for glossy dimensional look
- Perspective depth: shapes grow larger as they spiral outward from center
- GSAP stagger animation with configurable speed, density, and spiral tightness
- 5 color palette presets (blue, warm, cool, neon, sunset) plus full rainbow
- Pre-rendered canvas sprites for smooth 60fps performance
- Mouse-follow vortex center with smooth easing
- Device pixel ratio scaling for crisp retina display
- Configurable via data attributes: count, duration, spiral, stagger, palette
- Full reduced motion support with static fallback
Perfect For
- Hero section backgrounds for creative portfolios and agencies
- Loading and transition screens with visual interest
- Card and section backgrounds for SaaS landing pages
- Interactive art installations and generative design showcases
- Event and conference websites needing ambient motion
How It Works
The effect creates a canvas element and spawns particles near the center point. Each particle has a shape type, color, size, rotation speed, and outward velocity. On each GSAP ticker frame, particles move outward along their angle while slowly orbiting. Size scales with distance from center to create a tunnel perspective effect. Shapes are drawn with canvas path operations and filled with offset radial gradients that simulate 3D lighting. Particles that exit the viewport are recycled back to the center.