DocsdisplayCalamansi mascot

Calamansi mascot

A tiny citrus fruit that blinks, follows your cursor, blushes when you pet it, and goes tart if you poke it too much.

Move cursor to track eyes. Pet back and forth to blush. Poke five times for tart mode. Press and hold to squish.

Installation

npx shadcn@latest add fujiDevv/calamansi-ui/calamansi

How to use

demo.tsx
import { Calamansi } from "@/components/ui/calamansi"
export function Demo() {
  return <Calamansi variant="primary" size={200} />
}

Props

Options you can pass to customize this component.

  • sizeoptional
    number

    Width and height of the fruit in pixels.

  • textureoptional
    texturedplain

    Set to "textured" for a lit rind — pore relief and waxy undulation over the palette colour, with a tight specular core, a bevel and a grounding shadow — or "plain" for a smooth, minimal flat look.

  • variantoptional
    defaultprimarycitrusslate

    Color scheme for the fruit body and foliage. "primary" applies the brand lime, "citrus" applies warm amber, and "slate" applies cool frosted slate.

  • moodoptional
    happylovesleepytart

    The resting expression, applied when the component is not interactive.

  • interactiveoptional
    boolean

    Enables blinking, cursor tracking, petting and poking. Turn it off for a still, decorative fruit.

  • followCursoroptional
    boolean

    Whether the eyes track the pointer around the page.

  • pressableoptional
    boolean

    Whether pointer presses squish the fruit.

  • classNameoptional
    string

    Extra classes merged onto the outer element.

  • titleoptional
    ReactNode

    Optional title rendered in a vertical stack above the mascot.

  • descriptionoptional
    ReactNode

    Optional description rendered below the title.

Dependencies

gsap

Contact

Found a bug or issue? Open an issue or send a note.

License & Usage

  • •Free to use and modify in personal and commercial projects.
  • •Attribution to Calamansi UI is appreciated when using a component.
  • •Please do not resell the components as your own kit.
PreviousInstallation
NextSpotlight card