Motion Highlight

import { MotionHighlight } from '@hanzo/ui'

Default

Hover over the heading and the paragraph to see the glow follow your cursor.

Interactive Highlight Effect

Hover over this text to see the smooth highlight animation following your cursor.

export function Default() {
  return (
    <YStack gap="$4" maxW={480}>
      <MotionHighlight>
        <Paragraph size="$8" fontWeight="700">
          Interactive Highlight Effect
        </Paragraph>
      </MotionHighlight>
      <MotionHighlight>
        <Paragraph size="$5">
          Hover over this text to see the smooth highlight animation following
          your cursor.
        </Paragraph>
      </MotionHighlight>
    </YStack>
  )
}

Custom size

A larger, softer glow spans more of the panel per move.

A wider glow covers more ground per pointer move.

export function LargeGlow() {
  return (
    <MotionHighlight size={220}>
      <YStack p="$6" borderWidth={1} borderColor="$borderColor" rounded="$4">
        <Paragraph>A wider glow covers more ground per pointer move.</Paragraph>
      </YStack>
    </MotionHighlight>
  )
}

Custom color

The glow tints toward whatever color the caller passes.

A green-tinted glow instead of the default.

export function CustomColor() {
  return (
    <MotionHighlight color="rgba(16,185,129,0.18)">
      <YStack p="$6" borderWidth={1} borderColor="$borderColor" rounded="$4">
        <Paragraph>A green-tinted glow instead of the default.</Paragraph>
      </YStack>
    </MotionHighlight>
  )
}

Types

export type MotionHighlightProps = React.HTMLAttributes<HTMLDivElement> & {
  children: React.ReactNode
  /** Diameter of the glow, in px. */
  size?: number
  /** Glow color; any CSS color, including a token's resolved value. */
  color?: string
}

Exports

MotionHighlighttype MotionHighlightProps