Parallax is a client component that renders a vertical list of sticky image cards, for scroll-driven image showcases. Each card scales down and blurs once it reaches its sticky position. It depends on motion/react and next/image. Scroll inside the frame to see the sticky cards stack.

PreviewCode

Card

Card

Card

Import#

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

Usage#

import { Parallax } from "@reactberry/system/blocks";
import { Box } from "@reactberry/system/elements";

const images = [
  { id: "1", url: "/images/coast.jpg" },
  { id: "2", url: "/images/forest.jpg" },
  { id: "3", url: "/images/city.jpg" },
];

export default function Gallery() {
  return (
    <Box px="l">
      <Parallax images={images} />
    </Box>
  );
}

API#

Parallax#

No other props are accepted or spread. Each entry in images has this shape:

Accessibility#

• Each image uses its URL as alt text, which is not a useful description.
• Every card renders a hard-coded h1 with the text "Card", so a page with Parallax has one h1 per image.
• There is no reduced-motion handling.

Notes#

• Each card is position: sticky with a height of 80vh, a top of 10vh, a 10vh gap between cards and 10vh vertical padding around the list. The outer wrapper has a minHeight of 100vh.
• Once a card enters its sticky zone, its scale decreases by 1 for every 10000px of page scroll and its blur increases up to 100px.
• The hard-coded "Card" heading is drawn above the image. There is no prop to change or remove it.
• Cards use bg="neutral", shape="roundedLarge" and $shadow="medium". The image uses fill, sizes="100vw" and objectFit: "cover".
• Scale and blur are driven by window scroll (useScroll without a container), so inside a scrollable frame only the sticky stacking follows the frame.
• The scroll listener is registered during render without cleanup and updates React state on every scroll change, which can be costly with many cards.
• There is no touch handling.
• Remote image URLs must be allowed in your Next.js images configuration.
• The image data type is not exported; define the array inline or with a local type.