PointerFx

Tier: own

ImportCopy Anchor Link

import { PointerFx } from '@nizivo/react/pointer-fx';

// Once per app (Getting started), after
// @nizivo/tokens/tokens.css and @nizivo/react/css/base.css
import '@nizivo/react/css/pointer-fx.css';

Static or interactiveCopy Anchor Link

Client. PointerFx and usePointerFx are one client module at @nizivo/react/pointer-fx, so the page ships it (about 0.6 KB). It has a subpath of its own so a page that only counts numbers with CountUp never ships it. The server renders only data-pointer-fx, so hydration changes nothing. How to choose.

EffectsCopy Anchor Link

effect="tilt" (the default) turns the element up to 6 degrees toward the pointer and lifts it by --nz-distance-lift while hovered, for a product or feature card. effect="magnetic" moves it up to --nz-magnetic-pull toward the pointer, for a call to action. render puts it on your element: <PointerFx render={<Card />}>. In a client component, usePointerFx({ effect }) returns the same as props to spread: <div {...usePointerFx()}>.

How it movesCopy Anchor Link

The hook writes --nz-pointer-x and --nz-pointer-y (from -1 to 1) on the element, once per frame, and 0 when the pointer leaves; pointer-fx.css turns them into the transform. Only a mouse that can hover moves it; touch and pen never do. Under reduced motion it writes nothing and both tokens are 0, so the element stays still. The effect never carries meaning, and the element's focus and click work as without it.

ExamplesCopy Anchor Link

import type { JSX } from 'react';
import { Button } from '@nizivo/react/button';
import { PointerFx } from '@nizivo/react/pointer-fx';

export function PointerFxExample(): JSX.Element {
  return (
    <div style={{ display: 'flex', gap: 24, alignItems: 'center' }}>
      <PointerFx
        style={{
          inlineSize: 200,
          padding: 20,
          borderRadius: 16,
          background: 'var(--nz-bg-surface)',
          border: '1px solid var(--nz-border-subtle)',
        }}
      >
        <strong>Sand mug</strong>
        <p style={{ margin: '4px 0 0' }}>€24.00</p>
      </PointerFx>
      <PointerFx effect="magnetic" render={<Button variant="primary" />}>
        Add to bag
      </PointerFx>
    </div>
  );
}

PropsCopy Anchor Link

Other exportsCopy Anchor Link

PointerFxEffect type

import type { PointerFxEffect } from '@nizivo/react/pointer-fx'

tilt: rotates toward the pointer and lifts. magnetic: moves toward the pointer.

type PointerFxEffect = "tilt" | "magnetic"

PointerFxHookProps type

import type { PointerFxHookProps } from '@nizivo/react/pointer-fx'

Spread on the element: <div {...usePointerFx()}>.

Name	Type	Default	Description
data-pointer-fxrequired	PointerFxEffect "tilt" | "magnetic"	–
refrequired	RefCallback<E>	–

PointerFxOptions type

import type { PointerFxOptions } from '@nizivo/react/pointer-fx'

Name	Type	Default	Description
effect	PointerFxEffect "tilt" | "magnetic"	'tilt'

PointerFxProps type

import type { PointerFxProps } from '@nizivo/react/pointer-fx'

The props of PointerFx, listed above.

PointerFxState type

import type { PointerFxState } from '@nizivo/react/pointer-fx'

The render state of PointerFx, listed above.

usePointerFx hook

import { usePointerFx } from '@nizivo/react/pointer-fx'

function usePointerFx<E extends HTMLElement = HTMLElement>({ effect }?: PointerFxOptions): PointerFxHookProps<E>

Data attributes and slotsCopy Anchor Link

Style parts by class (.nz-<slot>) and state by data attribute. Attribute meanings come from contracts/vocabulary.json.

This entry renders no element with a data-slot.

CSS hooksCopy Anchor Link

Set a hook on the component's class or any ancestor to restyle it without specificity games; leave it unset for the default shown.

This stylesheet reads no public hook.

Layers: nz.components. Classes: . Runtime variables: --nz-pointer-x, --nz-pointer-y.

AccessibilityCopy Anchor Link

Nothing in this component takes focus or keyboard input.

KeyboardCopy Anchor Link

None.

FigmaCopy Anchor Link

Node ids from design/component-map.json, which nz gen writes from component.json. The links open the Nizivo Figma library, which may ask you to sign in.

• Canonical: none
• Ghost masters: none