Skip to content
GaudiGaudi Design System home

Search documentation

Search every page, heading and paragraph.

Pointer

A pointer effect scoped to its container, with direct, spring and lazy tracking, hover feedback, and native input fallbacks.

CoreBasics@gaudi/design-system/core/PointerView in StorybookSource

Installation

pnpm add github:ahmadassaf/design-system

Import from @gaudi/design-system. Load @gaudi/design-system/global.css once and add transpilePackages: ['@gaudi/design-system'] in Next.js.

import { Pointer } from '@gaudi/design-system/core/Pointer';

Usage

import { Pointer, Button } from '@gaudi/design-system';
<Pointer variant='frame' tracking='lazy' className='min-h-80 p-8'>  <Button>Explore work</Button></Pointer>

Examples

Playground

Storybook

Direct, spring and lazy

Storybook

Contextual labels

Storybook

Inputs and native fallbacks

Storybook

API

9 props

Accessibility

The overlay is aria-hidden and never captures pointer events. Touch, pen, reduced motion, editable fields, keyboard use, and disabled effects retain the native cursor. Give every action its normal visible label; pointer text is supplementary. No global cursor styles are changed.

AspectRatioKeep media at a stable aspect ratio as its container resizes.1 exampleAvatarProfile images, resilient initials, presence, verification, account menus and collaborator groups. The existing Avatar API and curated patterns share the same image and fallback primitives.10 examplesButtonButton renders the Gaudi action and link-button variants.7 examplesButtonGroupGroup related actions with joined borders and consistent sizing.9 examplesCardCard frames reusable content with title, subtitle, and optional children.8 examplesCheckboxCheckbox renders a token-styled binary control.6 examples