Canvas Shape Vortex
Luminous 3D canvas shapes spiral through a depth tunnel that bends and blooms with fast pointer movement, no WebGL required.
About This Effect
A luminous canvas particle effect that sends glossy shapes spiralling through a deep signal portal. Pointer and touch movement bend the tunnel off-axis while fast movement boosts near-camera scale and bloom, creating a spatial whip-past moment without WebGL.
What's Included
- 14 pre-rendered shape types including spheres, hearts, flowers, moons, sparkles, rings, and hexagons
- Depth-mapped scale, opacity, orbital rotation, and draw order for a convincing tunnel perspective
- Pointer, touch, drag, and arrow-key input with smoothly eased recentering
- Velocity-sensitive near-camera bloom and scale for dramatic whip-past motion
- Six colour palette presets (signal, blue, warm, cool, neon, and sunset) plus the full palette
- Pooled particles and cached canvas sprites for efficient per-frame rendering
- Device-pixel-ratio scaling capped for crisp output without runaway canvas cost
- Configurable count, duration, spiral, stagger, and palette data attributes
- Composed static canvas frame for reduced-motion visitors
Perfect For
- Immersive hero backgrounds for creative studios and digital products
- Signal, observatory, science-fiction, and technology launch pages
- Full-screen transitions and loading states with autonomous motion
- Interactive installations that need responsive depth without WebGL
- Decorative canvas portals behind restrained interface copy
How It Works
The effect pre-renders each shape and colour combination to cached offscreen canvases, then reuses a fixed particle pool. A GSAP ticker advances every particle through a wrapped depth phase; that phase controls spiral radius, scale, opacity, rotation, z-order, and bloom. Device-agnostic pointer input offsets the tunnel progressively through depth, while an eased pointer model recentres the portal after input stops. Reduced motion creates the same instance at a deliberately composed fixed phase without attaching the ticker or interaction listeners.