Fusion | Tuff Docs

Usage

Slots a and b move together and fuse when active; gap is their distance apart, and trigger sets what activates them.

Loading demo...

direction="y" fuses the two shapes vertically.

Loading demo...

Loading demo...

Loading demo...

Loading demo...

Use it as a decorative accent; never make it the only way critical state is shown.
Use trigger="manual" when a parent state machine, form, or route needs deterministic control.
Keep the two shapes similar in size, and tune gap, blur, alpha, and alphaOffset together.
When the user prefers reduced motion, have the host set disabled or keep the effect inactive.
Avoid trigger="click" when the slots contain buttons or links, so the interactions don't collide.

Prop	Type	Default	Description
`modelValue`	`boolean \| undefined`	`undefined`	Controlled active state; when omitted, internal state is used.
`disabled`	`boolean`	`false`	Blocks state changes and shows the disabled look.
`trigger`	`'hover' \| 'click' \| 'manual'`	`'hover'`	What activates it; `manual` ignores the pointer and follows `v-model` only.
`direction`	`'x' \| 'y'`	`'x'`	Axis the two shapes separate along.
`gap`	`number`	`40`	Distance in px between the shapes while inactive.
`duration`	`number`	`260`	Transition duration in ms; negative values count as `0`.
`easing`	`string`	`'cubic-bezier(0.2, 0.8, 0.2, 1)'`	CSS easing of the transform transition.
`blur`	`number`	`19`	`feGaussianBlur.stdDeviation` of the gooey filter.
`alpha`	`number`	`29`	Alpha multiplier in the color matrix; higher feels stickier.
`alphaOffset`	`number`	`-10`	Alpha offset in the color matrix.

Event	Params	Description
`change`	`(v: boolean)`	Fires when a trigger requests a new active state; never while disabled.
`update:modelValue`	`(v: boolean)`	Fires with `change`; controlled consumers must write it back.

Slot	Props	Description
`a`	-	First shape; sits on the negative side of `direction` while inactive.
`b`	-	Second shape; sits on the positive side of `direction` while inactive.

A boolean modelValue makes it controlled; otherwise it keeps internal state. Both modes emit.
hover activates on pointer enter and deactivates on leave; click toggles on a root click; manual ignores the pointer.
With trigger="click", the root has role="button": it takes Tab focus, toggles on Enter / Space, and reflects state in aria-pressed.
While disabled, the root is pointer-events: none and interactions emit nothing.
Non-finite alpha / alphaOffset values fall back to safe color-matrix values.
Slots render inside the filtered layer; slotted controls own their labels, focus, and keyboard semantics.

Each shape moves by transform, and an SVG filter (feGaussianBlur + feColorMatrix) on the wrapper melts the overlap into one form.
Source: packages/tuffex/packages/components/src/fusion/.

packages/tuffex/packages/components/src/fusion/index.ts