Layout

Cross fade

Reduced-motion-aware slideshow primitive that fades between absolutely stacked children.

Install

npx shadcn@latest add @alix/crossFade

Preview

Field work, analysis, and delivery shown in the same frame.

Usage

<CrossFade className="h-80" interval={6000}>
  <img src="/a.jpg" alt="" className="absolute inset-0 size-full object-cover" />
  <img src="/b.jpg" alt="" className="absolute inset-0 size-full object-cover" />
</CrossFade>

Examples

An editorial slideshow

Three absolutely stacked slides fading on a timer — the frame carries an explicit height, and each slide fills it with inset-0.

Field work

Analysis

Delivery

<CrossFade className="h-64 border border-border" interval={3000} duration={700}>
  <div className="absolute inset-0 bg-[#1b3644] p-8 text-white">Field work</div>
  <div className="absolute inset-0 bg-muted p-8">Analysis</div>
  <div className="absolute inset-0 bg-[#1b3644] p-8 text-white">Delivery</div>
</CrossFade>

Tuning the cadence

interval sets how long each slide holds; duration sets how long the fade takes — a shorter pair reads brisker.

<CrossFade className="h-40 border border-border" interval={1600} duration={400}>
  {[1, 2, 3, 4].map((n) => (
    <div key={n} className="absolute inset-0 flex items-center justify-center">
      {n}
    </div>
  ))}
</CrossFade>

When to use it

Use it for

A hero or banner that rotates through a few full-bleed images or captioned slides on a timer.
Any short, ambient slideshow where motion is decorative — it disables itself under prefers-reduced-motion.
Stacked slides that share one frame; give CrossFade an explicit height and each child absolute inset-0.

Reach for something else

A user-driven carousel with controls and per-slide navigation — use MediaCarousel.
A single static image — a plain img in an AspectRatio or MediaBanner is lighter; CrossFade with one child just renders it.
Essential content behind the fade — auto-advancing slides shouldn't hide information a reader must see.

Props

Prop	Type	Default	Description
interval	number	6000	Auto-advance interval between children, in milliseconds.
duration	number	1000	Fade transition duration, in milliseconds.
children	ReactNode	—	Absolutely stacked slides; give CrossFade an explicit height or inset frame.