BaseAnchor

GSAP-powered popover with a mask-reveal animation — content slides in from the placement direction through a soft gradient edge, with physics-based easing (overshoot + bounce). No opacity transition, pure spatial reveal.

Panels use TxCard by default; control appearance via panelBackground / panelShadow / panelRadius / panelPadding. Set useCard=false when you only need a raw wrapper.

Basic Usage

BaseAnchor

Demo loads on client.

Soft Edge

BaseAnchor ships with a built-in soft mask edge. Pair with show-arrow to render a triangle that follows final floating placement and offset.

Soft Edge

Demo loads on client.

Placement

Content enters and exits from the placement direction. For top, content slides down from above and returns upward on close.

Placement Directions

Demo loads on client.

Custom Animation

Control animation duration and GSAP easing via duration and ease.

Custom Ease

Demo loads on client.

Interactive Playground

Tune key props in one panel and focus on surface differences (pure / mask / blur / glass / refraction) plus motion adaptation modes (auto / manual / off).

Surface Playground

Demo loads on client.

API

TxBaseAnchor Props

Prop	Type	Default	Description
`modelValue`	`boolean`	`false`	Whether popover is open (v-model).
`disabled`	`boolean`	`false`	Disable the popover.
`placement`	`BaseAnchorPlacement`	`'bottom-start'`	Floating placement.
`offset`	`number`	`8`	Distance from reference element (px).
`width`	`number`	`0`	Panel width (0 = content-driven width).
`minWidth`	`number`	`0`	Minimum width.
`maxWidth`	`number`	`360`	Maximum width.
`matchReferenceWidth`	`boolean`	`false`	Follow reference width when `width` is 0.
`duration`	`number`	`432`	Animation duration (ms).
`ease`	`string`	`'back.out(2)'`	GSAP ease string for open animation.
`useCard`	`boolean`	`true`	Wrap floating content with built-in `TxCard`.
`panelBackground`	`'pure' \| 'mask' \| 'blur' \| 'glass' \| 'refraction'`	`'refraction'`	Panel background (TxCard background).
`panelShadow`	`'none' \| 'soft' \| 'medium'`	`'soft'`	Panel shadow (TxCard shadow).
`panelRadius`	`number`	`18`	Panel border radius (TxCard radius).
`panelPadding`	`number`	`10`	Panel padding (TxCard padding).
`panelCard`	`Partial<TxCardProps>`	`undefined`	Pass-through advanced TxCard props (`maskOpacity`, `fallbackMaskOpacity`, `surfaceMoving`, `refraction*`).
`surfaceMotionAdaptation`	`'auto' \| 'manual' \| 'off'`	`'auto'`	Surface downgrade strategy: `auto` follows Anchor motion, `manual` reads `panelCard.surfaceMoving`, `off` disables downgrade adaptation.
`showArrow`	`boolean`	`false`	Enable the triangle arrow that follows floating placement.
`arrowSize`	`number`	`10`	Arrow size in px.
`closeOnClickOutside`	`boolean`	`true`	Close on outside click.
`closeOnEsc`	`boolean`	`true`	Close on Escape key.
`toggleOnReferenceClick`	`boolean`	`true`	Toggle open state on reference click.

Events

Event	Params	Description
`open`	-	Fired when popover opens.
`close`	-	Fired when popover closes.
`update:modelValue`	`boolean`	v-model update.

Slots

Slot	Description
`reference`	Trigger element.
`default`	Popover content.

Exposed Methods

Method	Params	Description
`close`	-	Programmatically close.
`toggle`	-	Programmatically toggle.