ParallaxSection

Render a full-viewport section with a background image that moves vertically as the section scrolls through the viewport.

ParallaxSection is a client component that renders a 100vh section with a darkened next/image background that shifts from -20% to 20% as the section scrolls past. Use it for full-height marketing sections with a heading over an image. It depends on motion/react and next/image. Scroll the page to see the background move; the demos clip the section to a fixed height.

Built for every season

Import#

typescript

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

Usage#

typescript

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

export default function Overview() {
  return (
    <ParallaxSection
      image="/images/overview.jpg"
      content={
        <Box
          position="relative"
          zIndex={1}
          height="100%"
          display="flex"
          alignItems="center"
          justifyContent="center"
        >
          <Text as="h2" fontSize="xxxl" fontWeight="700" color="white">
            Built for every season
          </Text>
        </Box>
      }
    />
  );
}

Examples#

Call to action#

content can hold any layout, such as a heading, a short line of copy and a link.

Plan your summer trip

Book before June 1 and get free cancellation on every stay.

See offers

API#

ParallaxSection#

Prop	Type	Default	Description
`image*`	`string`	—	Background image source passed to `next/image`.
`content`	`ReactNode`	—	Rendered inside the section, before the background layer. Give it a positioned wrapper with `zIndex` 1 or higher so it sits above the image.

No other props are accepted or spread. children is not supported; use content.

Accessibility#

The root element is a section without an accessible name; include a heading in content.
The image has a fixed alt="Overview", which can't be changed or cleared for decorative images.
There is no reduced-motion handling.

Notes#

The background layer is absolutely positioned with zIndex 0. Give content a positioned wrapper (for example position="relative" with zIndex 1) so it renders above the image.
The background layer is 120% of the section height and its top is driven by useScroll with offset ["start end", "end start"].
A fixed rgba(0, 0, 0, 0.3) overlay is drawn above the image. There is no prop to change it.
The image uses fill, sizes="100vh" and objectFit: "cover".
The section height is fixed at 100vh with overflow: hidden.
Remote image URLs must be allowed in your Next.js images configuration.