# Canvas Shape Vortex > Luminous 3D canvas shapes spiral through a depth tunnel that bends and blooms with fast pointer movement, no WebGL required. Canonical: https://gsapvault.com/effects/canvas-shape-vortex Live demo: https://gsapvault.com/demos/canvas-shape-vortex/index.html | Property | Value | |----------|-------| | Type | effect | | Tier | paid | | Price | £5 | | Difficulty | advanced | | Plugins | Core GSAP only | | Techniques | canvas, particle-system, gradient, infinite-loop, mouse-follow, 3d-transforms | | Uses Lenis | No | ## Overview 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. ## Features - 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 ## Use Cases - 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 ## Vibe-Code Ready Setup This effect includes `START-HERE-AI.md`, a product-specific copy-paste setup prompt for Cursor, Claude Code, ChatGPT, GitHub Copilot, Windsurf, and other coding assistants. It tells the assistant to inspect the existing stack, integrate the supplied files, preserve the design, scope selectors, retain accessibility and responsive behaviour, add framework-appropriate GSAP cleanup, and report what it tested. [How AI-assisted setup works](https://gsapvault.com/vibe-coding) ## 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. ## Integration Preview How this effect integrates into a page. The full documentation (examples, events, programmatic API, customization guide) ships with the download. ### Quick Start **1. Give the effect container a size in your CSS:** ```css /* Add to your stylesheet */ .vortex { position: relative; width: 100%; min-height: 500px; overflow: hidden; background: #03050d; touch-action: none; } ``` **2. Add the effect HTML to your ``:** ```html

``` **3. Add scripts before the closing `` tag:** ```html ``` The script creates an `aria-hidden` canvas that fills the marked container. Keep overlay content positioned above the canvas with a higher `z-index`. ### Options | Attribute | Values | Default | Description | |-----------|--------|---------|-------------| | `data-shape-vortex` | Presence | Required | Marks an element as a vortex instance | | `data-count` | Integer, minimum `12` | `99` | Number of pooled particles | | `data-duration` | Seconds, minimum `1` | `5` | Time for one particle to travel through the tunnel | | `data-spiral` | Number | `10` | Amount of rotation applied through depth | | `data-stagger` | Number | `-0.05` | Absolute phase spacing between particles; the sign is accepted for backwards compatibility | | `data-palette` | `signal`, `blue`, `warm`, `cool`, `neon`, `sunset` | All colours | Restricts the cached sprites to a colour family | ### Accessibility - **Reduced motion:** `prefers-reduced-motion: reduce` renders a deliberately composed static canvas frame. It does not attach the animation ticker or input listeners. - **Keyboard:** Add `tabindex="0"` to the container. Arrow keys bend the portal, and blur eases its target back to centre. - **Touch:** Standard pointer events support touch and drag. Use `touch-action: none` only when the vortex owns the gesture area. - **Canvas semantics:** The generated canvas is decorative and receives `aria-hidden="true"`; provide an accessible label when the interaction communicates useful context. - **No JavaScript:** Keep a background colour or CSS portal treatment on the container so the composition remains intentional if scripts are unavailable. ### Dependencies **Required:** - GSAP 3.12+ (GSAP 3.14.2 is used in the demo) No GSAP plugins or WebGL libraries are required. ## What You Get - `index.html`: working demo page - `assets/script.js`: commented, readable source - `assets/style.css`: effect styles - `README.md`: full documentation with examples and framework integration notes - `START-HERE-AI.md`: product-specific copy-paste prompt for AI-assisted setup - `LICENSE.txt`: standard license terms - Lifetime updates: re-download anytime from your library ## Get the Code This is a premium effect. The standard license costs £5 one-time and covers unlimited personal and commercial projects with no attribution required. The only restrictions: no redistribution of the code itself and no competing effect libraries. - [Buy Canvas Shape Vortex](https://gsapvault.com/effects/canvas-shape-vortex) - [Effects & Templates Vault (£39 one-time, best value): every current and future effect and template](https://gsapvault.com/effects) ## Judge the Code Quality First These related effects are free with complete source published, written to the same production standard (cleanup functions, reduced-motion support, framework-agnostic): - [Hover Underline](https://gsapvault.com/effects/hover-underline.md): Three material link underlines (an exit-through line, marker sweep, and hand-drawn wave) with coordinated type and active-index responses. - [Image Clip Reveal](https://gsapvault.com/effects/image-clip-reveal.md): A cinematic image reveal where a directional polygon aperture opens as the photograph settles from a restrained Ken Burns scale and its editorial caption lands. - [Parallax Hero](https://gsapvault.com/effects/parallax-hero.md): A pinned hero that separates its background photograph, copy, and foreground card into distinct scroll depths from a single scrubbed ScrollTrigger. --- From [GSAP Vault](https://gsapvault.com): production-ready GSAP animation effects. Full catalog for agents: https://gsapvault.com/llms-full.txt