018
AI ready

Canvas Shape Vortex

£10 or the whole Vault, £99

A photoreal spiral galaxy on a 2D canvas: logarithmic arms, clustered star fields, additive bloom and diffraction spikes, flown by scroll and pointer with no WebGL.

ScrollTrigger advanced
7 more details
canvasparticle-systemgradientinfinite-loopmouse-follow3d-transformsscrub

This demo reads better at your own screen size than in the frame below:

Open the demo in a new tab
Open Canvas Shape Vortex demo in new tab

Updated

About this effect

A deep-space hero drawn entirely with the 2D canvas API. Thousands of stars sit on logarithmic spiral arms, clumped into star-forming knots and lit by additive bloom, with a warm bulge at the centre and diffraction spikes on the brightest few. The disc turns continuously; scrolling flies the camera from face-on to a tilted three-quarter view and pushes in, while pointer movement tips the plane in real 3D.

Canvas Shape Vortex - GSAP animation effect preview

What's included

10 items
  • Logarithmic spiral arms with clustered star-forming knots, a dense bulge and a sparse halo
  • Overlapping stars bloom into each other rather than stacking flatly, so bright knots read as light, not as dots
  • Arm nebulosity that glows around the star clusters and stays in step as the disc turns
  • True 3D disc: every star is projected through tilt and perspective, so the plane tips rather than skews
  • ScrollTrigger camera that spins, tilts and pushes in on scrub, and degrades to pointer-only without the plugin
  • Diffraction spikes and colour-temperature star sprites, from blue-white through to red giants
  • Seeded random generation, so the same galaxy renders every time for thumbnails and visual checks
  • Six colour palettes biasing the star mix, plus configurable count, arms, winding, tilt and rotation period
  • Star count and pixel ratio scaled down on small screens to hold the fill-rate budget
  • Composed static frame for reduced-motion visitors, with no ticker and no listeners attached

Perfect for

5 use cases
  • Deep-space hero backgrounds for AI, research and technology launch pages
  • Scroll-driven opening sections where the camera moves as the visitor reads
  • Full-screen loading states and transitions with autonomous motion
  • Observatory, science and simulation product pages that want depth without a WebGL dependency
  • Ambient canvas backdrops behind restrained interface copy

How it works

1 section

Stars are generated once from a seeded PRNG: each is placed on a logarithmic spiral arm, inside a bulge, or out in the halo, then given a size, colour temperature, twinkle phase and disc thickness. Colour-graded star sprites and a four-point spike sprite are pre-rendered to offscreen canvases, and the arm nebulosity is baked into a single haze layer. Each frame a GSAP ticker advances the rotation, projects every star through disc tilt and perspective, and draws it additively; the haze layer rides on one setTransform because the tilted disc plane maps to the screen through a plain affine matrix. A scrubbed ScrollTrigger drives extra spin, tilt and zoom, and eased pointer input tips the plane and flares the core. Reduced motion composes one fixed frame and attaches nothing.

Plugins ScrollTrigger
Difficulty Advanced
Includes HTML + JS + CSS source, documentation, AI setup prompt, lifetime updates

Lighthouse, as measured

Google Lighthouse on this effect's demo, from the latest scan. A measurement of the demo as shipped, not a promise for your page.

Accessibility
100
Best practices
100

No performance score, on purpose. That figure depends on how you deploy: your server's compression and caching, your CDN, the connection and the device doing the test, none of which the code controls. The same page can score very differently on two consecutive runs, so measure it where it will live.

Paid effect

Purchase to unlock the code.

Buying Canvas Shape Vortex opens the HTML, CSS and JavaScript source, the full documentation, an AI setup prompt for your editor, and every update we ship to it. Standard license: unlimited personal and commercial projects. Every paid product is tested for desktop and mobile layouts, reduced-motion handling, animation cleanup and keyboard controls wherever there is something to operate.

£10 Standard license, unlimited projects

Browse free effects

Or the whole library: the Vault, £99, one payment.

Documentation

Quick Start

1. Give the effect container a size in your CSS:

Code snippet omitted: it ships with the download.

2. Add the effect HTML to your <body>:

Code snippet omitted: it ships with the download.

3. Add scripts before the closing </body> tag:

Code snippet omitted: it ships with the download.

The script creates an aria-hidden canvas that fills the marked container. Keep overlay content positioned above it with a higher z-index.

Scroll Camera

Wrap the container in an element carrying data-vortex-scroll, make that wrapper taller than the viewport, and stick the container to the top. Scrolling the wrapper then spins the disc, tilts it toward edge-on and pushes the camera in, scrubbed against the scrollbar.

Code snippet omitted: it ships with the download.

Code snippet omitted: it ships with the download.

Code snippet omitted: it ships with the download.

Leave the wrapper off, or set data-scroll="off", and the galaxy still turns and still answers the pointer. The scroll camera is additive, never required.

Do not put overflow: hidden on html or body to hide horizontal overflow. It stops the sticky container sticking. Use overflow-x: clip.

Options

Attribute Values Default Description
data-shape-vortex Presence Required Marks an element as a galaxy instance
data-count Integer, minimum 120 2400 Stars generated. Scaled to 55% below 700px wide
data-duration Seconds, minimum 4 60 Time for one full rotation of the disc
data-spiral 0.18–0.9 0.34 Arm winding. Lower winds the arms tighter
data-arms 1–6 2 Number of spiral arms
data-tilt 0–1.2 radians 0.24 Resting lean of the disc before any input
data-scroll-depth 0–3 1 Multiplier on the scroll camera move
data-scroll off — Opts an instance out of the scroll camera
data-palette signal, blue, warm, cool, neon, sunset signal Biases the star colour mix

Colour Palettes

Every palette draws from the same colour-temperature set; the palette decides how the mix is weighted.

Palette Star mix
signal Mostly blue-white, a scattering of amber and red giants
blue Cool and blue-heavy, few warm stars
warm Amber and orange dominant, warm bulge
cool Blue and blue-white, almost no red
neon High-contrast blue-white with hot amber accents
sunset Warm-biased, orange and red through the arms

Accessibility

  • Reduced motion: prefers-reduced-motion: reduce renders one deliberately composed static frame. No ticker, no ScrollTrigger, no input listeners.
  • Keyboard: Add tabindex="0" to the container. Arrow keys tip the disc, and blur eases it back to rest.
  • Touch: Standard pointer events cover touch and drag. Use touch-action: none only when the galaxy owns the gesture area.
  • Canvas semantics: The generated canvas is decorative and receives aria-hidden="true". Label the container when the interaction carries meaning.
  • No JavaScript: Keep the container's background gradient in CSS so the composition still reads if scripts are unavailable.

Dependencies

Required:

  • GSAP 3.12+ (GSAP 3.15.0 is used in the demo)

Optional:

  • ScrollTrigger, for the scroll camera only. Without it the galaxy turns and responds to the pointer as normal.

No WebGL libraries are required.

Worked examples, the events and programmatic API, and the class reference ship with the download, alongside the full source.