Skip to content
Hover Tilt

Options

Here you can find a complete reference for all HoverTilt props and options.

Interaction Props

Section titled “Interaction Props”

Props which affect the interaction/animation of the component, such as tilt factor, scale factor, and spring options.

tiltFactor

Section titled “tiltFactor”
<HoverTilt tiltFactor={1.5}>
  • Type: number
  • Default: 1
  • Description: Controls the intensity of horizontal tilt.
    Higher values create more pronounced tilt effects.

tiltFactorY

Section titled “tiltFactorY”
<HoverTilt tiltFactorY={0.5}>
  • Type: number | undefined
  • Default: tiltFactor (same value as tiltFactor, unless overridden)
  • Description: Controls the intensity of vertical tilt.
    Useful for creating asymmetric tilt effects.

scaleFactor

Section titled “scaleFactor”
<HoverTilt scaleFactor={1.1}>
  • Type: number
  • Default: 1
  • Description: Scale multiplier applied on hover.
    Values greater than 1 will scale up, values less than 1 will scale down.

springOptions

Section titled “springOptions”
<HoverTilt springOptions={{ stiffness: 0.3, damping: 0.7 }}>
  • Type: { stiffness?: number, damping?: number }
  • Default: { stiffness: 0.2, damping: 0.8 }
  • Description: Physics options for scale and opacity animations.
    Based on the Svelte Spring values. Higher stiffness = faster response, higher damping = less oscillation.

tiltSpringOptions

Section titled “tiltSpringOptions”
<HoverTilt tiltSpringOptions={{ stiffness: 0.3, damping: 0.7 }}>
  • Type: { stiffness?: number, damping?: number } | undefined
  • Default: Uses springOptions if not specified
  • Description: Separate physics options for tilt animations. Allows different animation feel for tilt vs scale.

enterDelay

Section titled “enterDelay”
<HoverTilt enterDelay={300}>
  • Type: number
  • Default: 0
  • Description: Delay in milliseconds before activating the component when cursor enters. Helps prevent flickering when cursor briefly enters the element.

exitDelay

Section titled “exitDelay”
<HoverTilt exitDelay={300}>
  • Type: number
  • Default: 200
  • Description: Delay in milliseconds before animating back to default state when cursor leaves. Helps prevent flickering when cursor briefly leaves the element.


Aesthetic Props

Section titled “Aesthetic Props”

These are props that affect the visual appearance of the component, such as adding a shadow, or increasing the intensity of the glare effect.

class

Section titled “class”
<HoverTilt class="my-custom-class">
  • Type: string | undefined
  • Default: undefined
  • Description: CSS class to apply to the container/host element.

shadow

Section titled “shadow”
<HoverTilt shadow>
  • Type: boolean | undefined
  • Default: false
  • Description: Enables dynamic shadow that moves with the tilt effect.

Need a resting shadow or bespoke multi-layer drop shadow? See Advanced → Shadows and Advanced → Custom Shadow for detailed walkthroughs.

shadowBlur

Section titled “shadowBlur”
<HoverTilt shadow shadowBlur={40}>
  • Type: number | undefined
  • Default: 22
  • Description: Blur radius for the shadow effect (in pixels). Only applies when shadow is true.

For precise control (multiple blur layers, neon rims, etc.) override --hover-tilt-custom-shadow as shown in Advanced → Custom Shadow.

blendMode

Section titled “blendMode”
<HoverTilt blendMode="overlay">
  • Type: string | undefined
  • Default: "overlay"
  • Description: CSS blend mode for the glare effect. Common values: overlay, screen, multiply, plus-lighter, etc.

glareIntensity

Section titled “glareIntensity”
<HoverTilt glareIntensity={1.5}>
  • Type: number
  • Default: 1
  • Description: Intensity of the glare effect. Values greater than 1 increase intensity, values less than 1 decrease it. (values over 4 will not really do anything with the default glare gradient)

glareHue

Section titled “glareHue”
<HoverTilt glareHue={180}>
  • Type: number | undefined
  • Default: 270 (lavendar-ish)
  • Description: Hue value (0-360) for the glare color. Adjusts the color of the glare effect.

glareMask

Section titled “glareMask”
<HoverTilt glareMask="url(#mask)">
  • Type: string | undefined
  • Default: undefined (no mask)
  • Description: CSS mask image for the glare effect. Allows custom masking of the glare to specific areas.

See Advanced → Glare Masks for layered foil/etch examples and troubleshooting tips.

glareMaskMode

Section titled “glareMaskMode”
<HoverTilt glareMaskMode="luminance">
  • Type: 'match-source' | 'luminance' | 'alpha' | 'none' | undefined
  • Default: undefined (browser default behavior is ‘match-source’)
  • Description: CSS mask-mode for the glare mask. Controls how the mask is interpreted.

The Glare Masks guide compares match-source, luminance, and alpha with visual callouts.

glareMaskComposite

Section titled “glareMaskComposite”
<HoverTilt glareMaskComposite="add">
  • Type: 'add' | 'subtract' | 'exclude' | 'intersect' | undefined
  • Default: undefined (browser default behavior is ‘add’)
  • Description: Composite operation for multiple masks. Only useful if applying multiple masks.

Visit Advanced → Glare Masks to see add vs intersect in action on Pokémon-style foil art.