DocseffectsTilt card

Tilt card

A Calamansi card that leans towards your pointer, with a light sheen that follows the tilt.

Palette
Calamansi

Rind

maxTilt 16 · glare on

Primary

Calamansi Surface

Leans smoothly towards the pointer with real-time 3D spring physics and interactive light sheen.

Interactive 3D Plane

Flesh

maxTilt 8 · no glare

Springs
Spring
220 / 18
Fallback
reduced motion
Pointer
continuous
Return
flat

Move your pointer over a card, then let it go.

Installation

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

How to use

demo.tsx
import { TiltCard } from "@/components/ui/tilt-card"
import { Citrus } from "lucide-react"
export function Demo() {
  return (
    <TiltCard
      className="max-w-sm"
      icon={<Citrus className="size-5" />}
      title="Rind"
      subtitle="Interactive 3D"
      maxTilt={16}
    >
      <p className="text-sm font-medium text-white/85">
        Move your pointer over the card to see it lean in 3D.
      </p>
    </TiltCard>
  )
}

Props

Options you can pass to customize this component.

  • titleoptional
    ReactNode

    Title displayed in the header.

  • subtitleoptional
    ReactNode

    Subtitle or description shown under the title.

  • iconoptional
    ReactNode

    Icon displayed alongside the title in the header.

  • badgeoptional
    ReactNode

    Badge or element displayed at the top right.

  • headeroptional
    ReactNode

    Custom header element replacing the default title row.

  • childrenoptional
    ReactNode

    Content displayed on the surface.

  • maxTiltoptional
    number

    Maximum rotation, in degrees, at the corners.

  • hoverScaleoptional
    number

    Scale applied while the pointer is over the card.

  • glareoptional
    boolean

    Draw a sheen that follows the pointer.

  • stiffnessoptional
    number

    Spring stiffness for the return.

  • dampingoptional
    number

    Spring damping. Lower is bouncier.

  • variantoptional
    whitecalamansislatecitrus

    Surface palette. Calamansi is the default slab; White is white in light mode and near-black in dark.

  • classNameoptional
    string

    Extra classes merged onto the card.

Dependencies

motion

Credits

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.
PreviousSpotlight card
NextMarquee