Back to library

COMPONENT / INTERACTIVE

Morphing Rings

A perspective particle disc whose protected center moves between circular, polygonal and heart-like profiles while two asynchronous waves cross the rings.

Ready
LIVE RENDERERCanvas 2D · VARIANT 01
RUNNING
Morphing Rings LIVE
DPR ≤ 2RESPONSIVEPOINTER SAFE
03 VARIANTSSELECT A STARTING STATE
01
02
03
RENDERERCanvas 2D
DEPENDENCIESReact + Canvas 2D
OUTPUTAdaptive live canvas
MOTIONReduced-safe
WHAT IT DOES

A perspective particle disc whose protected center moves between circular, polygonal and heart-like profiles while two asynchronous waves cross the rings.

BEST FOR
  • Product moments
  • Spatial storytelling
  • Interactive identity systems
KEY FEATURES
  • Analytic center profile interpolates across three readable shapes
  • Independent radial and axial waves drift through changing phase relationships
  • Edge particles brighten while points inside the protected void disappear
  • One seeded particle buffer supports all documented compositions
  • Every control maps directly to this component's independent renderer contract
  • Full-size and compact previews use the same implementation and behavior
PERFORMANCE

Adaptive sampling, capped DPR and visibility-based suspension keep the renderer predictable. Test density on low-power mobile hardware before increasing it.

INTERACTION

Pointer and touch coordinates are container-scoped; offscreen renderers stop work and pixel ratio is capped.

ACCESSIBILITY

The visual canvas is decorative by default. Pair it with a semantic heading or description, and reduced motion holds a stable rendered frame.

BEHAVIOR

Built to move without taking over.

USE IT

Sign in, copy the source, rename it, tune the values and ship it inside your own system.