Preferences

Image Card Hover

Customize

Layer Count10

Width270

Height300

Tilt Max45

Pan Max88

Depth Step36

Scale 3D0.07

Opacity Falloff0.1

Move Amplify0.54

Tilt Boost1.25

Pan Boost1.25

Props

Property	Type	Default	Description
`image`	string	`undefined (required)`	Fallback/base image URL used for the bottom-most layer, and for every layer when layerImages is not provided. The only prop with no safe default — omitting it logs a dev warning.
`layerImages`	string[]	`[]`	Array of image URLs to cycle through (via modulo) across the stacked layers. Falls back to `image` for every layer when empty.
`layerCount`	number	`10`	Number of stacked layers rendered behind the base image (clamped to at least 1). Controller setup re-runs whenever this changes.
`shapes`	("rectangle" \| "circle" \| "diamond" \| "hexagon")[]	`["rectangle", "circle", "diamond", "hexagon"]`	Set of clip-path shapes exposed as clickable swatches to reshape every layer above the base image.
`defaultShape`	"rectangle" \| "circle" \| "diamond" \| "hexagon"	`"rectangle"`	Clip-path shape applied to non-base layers on mount.
`width`	number \| string	`600`	Width of the hover stage. Auto-clamped down at the 768px and 480px breakpoints for mobile.
`height`	number \| string	`600`	Height of the hover stage. Auto-clamped down at the 768px and 480px breakpoints for mobile.
`showShapeControls`	boolean	`true`	Show/hide the row of shape-swatch buttons below the stage.
`showToggleControls`	boolean	`true`	Show/hide the rotation / blur / color / opacity / parallax / 3d toggle buttons.
`showTuner`	boolean	`true`	Show/hide the tilt/pan/depth/amp slider panel that appears once 3D mode is enabled.
`initialRotation`	boolean	`false`	Whether the "rotation" toggle starts enabled, applying alternating per-layer rotation while stacking/in 3D.
`initialBlur`	boolean	`false`	Whether the "blur" toggle starts enabled, applying an increasing per-layer blur sequence.
`initialColor`	boolean	`false`	Whether the "color" toggle starts enabled, desaturating/saturating layers based on depth index.
`initialOpacity`	boolean	`false`	Whether the "opacity" toggle starts enabled, fading further-back layers more aggressively.
`initialParallax`	boolean	`false`	Whether 2D mouse-follow parallax starts enabled. Mutually exclusive with 3D mode (enabling one disables the other).
`initial3D`	boolean	`false`	Whether the true 3D tilt/depth/pan mode starts enabled. Mutually exclusive with parallax mode.
`tiltMax`	number	`45`	Base max tilt angle (degrees) used for the 3D rotateX/rotateY response to cursor position; live-tunable via the tuner slider (--lih-tilt-max).
`panMax`	number	`88`	Base max translation (px) applied to the stack while panning in 3D mode; live-tunable via the tuner slider (--lih-pan-max).
`depthStep`	number	`36`	Base per-layer Z translation (px) in 3D mode; live-tunable via the tuner slider (--lih-depth-step).
`scale3D`	number	`0.07`	Per-layer scale reduction applied on top of depth while in 3D mode (--lih-scale-3d).
`opacityFalloff`	number	`0.1`	Per-layer opacity reduction baseline used in 3D mode, independent of the opacity toggle (--lih-opacity-falloff).
`moveAmplify`	number	`0.54`	Multiplier amplifying tilt/pan response to cursor movement; live-tunable via the tuner slider (--lih-move-amplify, displayed x100).
`tiltBoost`	number	`1.25`	Extra multiplier stacked on top of tiltMax/moveAmplify when computing 3D rotation response.
`panBoost`	number	`1.25`	Extra multiplier stacked on top of panMax/moveAmplify when computing 3D pan response.
`monoFontFamily`	string	`"monospace"`	Font family used for the shape/toggle/tuner control labels (--lih-mono-font).
`className`	string	`""`	Custom class name applied to the outer wrapper div.

imagestring

Fallback/base image URL used for the bottom-most layer, and for every layer when layerImages is not provided. The only prop with no safe default — omitting it logs a dev warning.

Defaultundefined (required)

layerImagesstring[]

Array of image URLs to cycle through (via modulo) across the stacked layers. Falls back to `image` for every layer when empty.

Default[]

layerCountnumber

Number of stacked layers rendered behind the base image (clamped to at least 1). Controller setup re-runs whenever this changes.

Default10

shapes("rectangle" | "circle" | "diamond" | "hexagon")[]

Set of clip-path shapes exposed as clickable swatches to reshape every layer above the base image.

Default["rectangle", "circle", "diamond", "hexagon"]

defaultShape"rectangle" | "circle" | "diamond" | "hexagon"

Clip-path shape applied to non-base layers on mount.

Default"rectangle"

widthnumber | string

Width of the hover stage. Auto-clamped down at the 768px and 480px breakpoints for mobile.

Default600

heightnumber | string

Height of the hover stage. Auto-clamped down at the 768px and 480px breakpoints for mobile.

Default600

showShapeControlsboolean

Show/hide the row of shape-swatch buttons below the stage.

Defaulttrue

showToggleControlsboolean

Show/hide the rotation / blur / color / opacity / parallax / 3d toggle buttons.

Defaulttrue

showTunerboolean

Show/hide the tilt/pan/depth/amp slider panel that appears once 3D mode is enabled.

Defaulttrue

initialRotationboolean

Whether the "rotation" toggle starts enabled, applying alternating per-layer rotation while stacking/in 3D.

Defaultfalse

initialBlurboolean

Whether the "blur" toggle starts enabled, applying an increasing per-layer blur sequence.

Defaultfalse

initialColorboolean

Whether the "color" toggle starts enabled, desaturating/saturating layers based on depth index.

Defaultfalse

initialOpacityboolean

Whether the "opacity" toggle starts enabled, fading further-back layers more aggressively.

Defaultfalse

initialParallaxboolean

Whether 2D mouse-follow parallax starts enabled. Mutually exclusive with 3D mode (enabling one disables the other).

Defaultfalse

initial3Dboolean

Whether the true 3D tilt/depth/pan mode starts enabled. Mutually exclusive with parallax mode.

Defaultfalse

tiltMaxnumber

Base max tilt angle (degrees) used for the 3D rotateX/rotateY response to cursor position; live-tunable via the tuner slider (--lih-tilt-max).

Default45

panMaxnumber

Base max translation (px) applied to the stack while panning in 3D mode; live-tunable via the tuner slider (--lih-pan-max).

Default88

depthStepnumber

Base per-layer Z translation (px) in 3D mode; live-tunable via the tuner slider (--lih-depth-step).

Default36

scale3Dnumber

Per-layer scale reduction applied on top of depth while in 3D mode (--lih-scale-3d).

Default0.07

opacityFalloffnumber

Per-layer opacity reduction baseline used in 3D mode, independent of the opacity toggle (--lih-opacity-falloff).

Default0.1

moveAmplifynumber

Multiplier amplifying tilt/pan response to cursor movement; live-tunable via the tuner slider (--lih-move-amplify, displayed x100).

Default0.54

tiltBoostnumber

Extra multiplier stacked on top of tiltMax/moveAmplify when computing 3D rotation response.

Default1.25

panBoostnumber

Extra multiplier stacked on top of panMax/moveAmplify when computing 3D pan response.

Default1.25

monoFontFamilystring

Font family used for the shape/toggle/tuner control labels (--lih-mono-font).

Default"monospace"

classNamestring

Custom class name applied to the outer wrapper div.

Default""

Dependencies

gsap 3.12.5

Crafted withbyMohammad Tasin