items | FanGalleryItem[] | Required | Images with src, alt and an optional href. |
title / subtitle | string | - | Optional heading and description. |
showTitle | boolean | false | Show or hide the heading. |
entrance | 'stack' | 'deal' | 'rise' | 'flip' | 'circular' | 'deck' | 'stack' | Stack spread opens a closed stack like a swatch book, every card pivoting from the middle into place. Deal throws each card from a deck beside the stage along an arc. Rise lifts cards into place from below the stage. Flip turns each card from edge-on to face, in place. Circular sweep launches cards one by one along an arc. Deck unfold carries a closed deck along that arc and unfolds it on arrival. |
stackFrom | 'left' | 'right' | 'left' | The front side: which cards lie on top where cards overlap, the order in which every entrance brings cards in, and where Deal, Circular sweep and Deck unfold come from. |
speed | number | 0.7 | How quickly cards travel. It sets the spring's pace, not a fixed duration: with more Bounce, cards keep wobbling a little longer before they rest. |
stagger | number | 0.09 | Delay between successive cards, front side first. In Deck unfold the deck travels as one and this is the delay between cards unfolding. |
bounce | number | 0.35 | 0 settles softly; higher values overshoot and wobble before resting, which also lengthens the entrance. |
hoverSpeed | number | 0.28 | How quickly the focus glides to the pointed card. |
spacing | number | 0.69 | Distance between card centers, as a fraction of the card width. In a narrow container it is fitted (down to 40%) before the cards shrink. |
curve | number | 0.14 | How far the outermost cards drop below the middle, as a fraction of the card height. |
tilt | number | 14.5 | Tilt of the outermost cards; inner cards tilt in proportion to their distance from the middle. |
lift | number | 42 | How far the hovered card rises as it straightens and comes forward. Space for the rise is reserved above the fan; it never shrinks the cards. |
spread | number | 0.2 | Space opened on each side of the hovered card, in card widths. Neighbors first move just clear of it, then this much more, so the gap shows even when cards do not overlap. Hover never shrinks the fan: neighbors may extend past the sides while a card is active. |
cardWidth | number | 162 | Requested card width; the whole hand scales down only when it cannot fit the container. |
aspectRatio | number | 0.8 | Width divided by height of each image. |
radius | number | 18 | Corner radius before responsive scaling. |
trigger | 'auto' | 'scroll' | 'manual' | 'hover' | 'scroll' | Play on mount, viewport entry, hover/focus/tap, or through the component ref. |
viewportStart | number | 75 | Line reached by the top of the component, measured from the top of the screen. Upward entry mirrors this value unless Separate scroll directions is enabled. Hold the slider to see both lines. |
viewportStartUp | number | 25 | Independent upward entry line measured from the top of the screen. The bottom of the component must reach this line. When omitted, the component uses 100 minus viewportStart. |
once | boolean | true | Disable to replay when entering from either direction. Reset happens only after the component leaves the visible viewport completely. |