Fader

Render a full-size cover image that animates in with a blur and scale transition, with an optional gradient fade overlay.

Fader is a client component that renders a next/image cover image inside a Motion-powered Box, with an optional linear-gradient overlay on top. Use it for hero sections and banners where text sits on an image. It depends on motion/react and next/image.

Autumn collection

New arrivals every Friday

Import#

typescript

import { Fader } from "@reactberry/system/blocks";

Usage#

typescript

import { Fader } from "@reactberry/system/blocks";
import { Box, Text } from "@reactberry/system/elements";

export default function Hero() {
  return (
    <Box position="relative" height="60vh" color="base">
      <Fader image="/images/hero.jpg" fadeDirection="to bottom" />
      <Box position="absolute" bottom="0" left="0" p="l" zIndex={4}>
        <Text as="h1" fontSize="xxxl" fontWeight="700">
          Autumn collection
        </Text>
      </Box>
    </Box>
  );
}

Examples#

Custom overlay#

Pass fixed colours in overlay and change fadeDirection to darken one side for text.

Weekend trips

From €89 per night

Without the overlay#

Set fade={false} to show only the image. Box props such as shape go to the outer Box.

API#

Fader#

Prop	Type	Default	Description
`image`	`string \| null`	—	Image source passed to `next/image`. The image layer is not rendered when falsy.
`fade`	`boolean`	`true`	Renders the gradient overlay.
`fadeColor`	`string`	`currentColor`	Set as the overlay's `color`. Only affects the gradient when an overlay stop uses `currentColor`.
`fadeDirection`	`string`	`to bottom`	Direction argument of the overlay `linear-gradient`.
`imgStyle`	`{}`	—	Declared but not used.
`overlay`	`{ start: { color: string; stop: string; }; end: { color: string; stop: string; }; }`	`{…`	Start and end stops of the overlay gradient.
`variants`	`{}`	`{…`	Motion variants for the image wrapper, which uses `enter`, `center` and `exit`.

All remaining BoxProps are spread onto the outer Box, which defaults to position="relative", overflow="hidden", width="100%" and height="100%". The default variants define enter, center, exit and hover states (opacity, scale, y offset and blur, 0.4 s each, 0.2 s for hover).

Accessibility#

The image always has alt="image", which cannot be changed through props. Describe the image in nearby text when it carries meaning.

Notes#

The image wrapper uses initial="enter", animate="center" and exit="exit". The hover variant is defined but no hover gesture triggers it.
The image element inside AnimatePresence has no key, so changing image swaps the source without replaying the exit and enter animation.
The image is rendered with priority, loading="eager", fill, sizes="100%" and objectFit: "cover".
Remote image URLs must be allowed in your Next.js images configuration.
There is no reduced-motion handling; the blur and scale transition always runs.
Layering: the image sits at zIndex 1 and the overlay at zIndex 3. Place content above with zIndex 4 or higher.