Maven Transition

Zenora UI

Get Started

Maven Transition·Transitions

npx zenora-ui-registry@latest add maven-transition

Transitions

212 views•97 uses

Get this component

Copies the component into your project, installs what it needs, and pulls down its images. Nothing to download by hand.

npx zenora-ui-registry@latest add maven-transition

Writes to components/zenora-ui/ by default; override with --dir. The file is yours to edit; there is no package to keep in sync.

Or let an AI agent pull it in for you. Set up the MCP server

An organic WebGL ripple transition that displaces and dissolves images with chromatic aberration, noise warping, and kinetic wave physics.

KEY FEATURES

·Custom WebGL shader with multi-frequency radial sine waves and layered noise displacement
·Interactive pointer-origin wave triggers with velocity, highlight bloom, and pinch distortion
·RGB channel split chromatic aberration with seamless texture buffer cycling

Props

15 properties

imagesstring[]4 images

Images to transition between.

headingstringMaven Transition

Center heading title.

descriptionstringClick anywhere to…

Center description text.

durationnumber1.4

Transition animation duration in seconds.

waveSpeednumber1.6

Propagation speed of the ripple boundary.

sigmanumber0.15

Wavefront thickness.

waveFreqnumber5

Ripple ring count.

pushAmtnumber0.145

Image refraction and distortion intensity.

caStrengthnumber0.02

RGB separation on wave crests.

glownumber0.73

Highlight shine intensity on the wavefront.

noiseWarpnumber1

Organic roughness perturbation.

pinchbooleanfalse

Pinch center distortion.

autoPlaybooleantrue

Automatically trigger ripples periodically.

autoPlayIntervalnumber3200

Auto play interval in milliseconds.

backgroundcolor#111416

Container background color.

Zenora UI

Get Started

Maven Transition·Transitions