Components that
make you stand out.

React components, animations, and effects. Preview them, make them yours, and bring them into your next project.

Fan Gallery

An image fan on a symmetric curve. Cards spread open, are dealt, rise, flip, sweep or unfold in with spring physics; hovering lifts and straightens a card and parts the fan so it stands clear of every other card.

Controls

Motion

Preset

Card count

Entrance

Front cards

Spring speed (s)

Card stagger (s)

Bounce

Focus response (s)

Card spacing

Curve depth

Edge tilt (deg)

Hover lift (px)

Hover gap

Playback

Separate scroll directions

Viewport start (%)

Play once on scroll

Appearance

Card width (px)

Image aspect ratio

Image border radius (px)

Content

Image 1

Image 2

Image 3

Image 4

Image 5

Properties

23 properties

Property	Type	Default	Description
`items`	`FanGalleryItem[]`	`Required`	Images with src, alt and an optional href. The demo starts with five images; its count selector accepts every count from 1 to 15, including even counts.
`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`	`100 - viewportStart`	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.
`title / subtitle`	`string`	`Empty`	Optional heading and description with inherited fonts; they fade in with the cards.
`showTitle`	`boolean`	`false`	Show or hide the heading.
`ref`	`FanGalleryHandle`	`—`	play() starts or replays the entrance; reset() restores its starting pose; finish() shows the fan immediately. replay() remains an alias for play().
`className / style`	`string / CSSProperties`	`—`	Style the outer section; colors and font inherit from the page.

Usage

import {FanGallery} from './components/fan-gallery';

// Replace the demo paths with your own images; href is optional.
const items = [
  {
    "src": "/assets/orbit-tunnel/mavis-hopper-6mhc2gBMAyM-unsplash.webp",
    "alt": "Glass cube on a dark pedestal"
  },
  {
    "src": "/assets/hero-artwork/02.webp",
    "alt": "Blue grain gradient"
  },
  {
    "src": "/assets/hero-artwork/04.webp",
    "alt": "Liquid glass orb"
  },
  {
    "src": "/assets/hero-artwork/05.webp",
    "alt": "Reflective orbit tunnel"
  },
  {
    "src": "/assets/orbit-tunnel/julien-moreau-688Fna1pwOQ-unsplash.webp",
    "alt": "White geometric architecture against a pale blue sky"
  }
];

export function Example() {
  return (
    <FanGallery
      items={items}
      cardWidth={162}
      aspectRatio={0.8}
      spacing={0.69}
      curve={0.14}
      tilt={14.5}
      lift={42}
      spread={0.2}
      stackFrom={"left"}
      speed={0.7}
      stagger={0.09}
      bounce={0.35}
      hoverSpeed={0.28}
      radius={18}
      entrance={"stack"}
      trigger={"scroll"}
      viewportStart={75}
      once={true}
      showTitle={false}
    />
  );
}