Fade edge

A strip that scrolls sideways fades out where there is more to see. Scroll it and compare the modes.

ScrollFixed

SmoothLinear

A soft marble texture in coral, sand and blue — Coral sky

A soft marble texture in mint, blue and orange — Mint and ember

A soft marble texture in lilac, rose and sea green — Lilac bloom

A soft marble texture in sand, green and violet — Sand and fern

A soft marble texture in blue, lilac and gold — Blue hour

A soft marble texture in orange, yellow and blue — Amber

Scroll the strip with a trackpad or Shift and the wheel, or focus it and press ←→.

Scroll and fixed

In scroll mode each fade grows with the distance left to scroll, so it fades in as you leave the start and fades out as you reach the end. In fixed mode a side is either fully faded or not faded at all.

Smooth and linear

smooth eases the mask in and out, so the edge has no visible start. linear is a straight ramp, a little harder at its inner end.

In code

import { createFadeEdge } from "@reuse-sh/shadows";

const strip = document.querySelector(".prints");
const fade = createFadeEdge(strip, { size: 64, curve: "smooth", mode: "scroll" });

// Change it later, or remove it with the strip.
fade.update({ mode: "fixed" });
fade.destroy();

import { createFadeEdge } from "@reuse-sh/shadows";
import { useEffect, useRef } from "react";

export function Prints({ prints, mode = "scroll" }) {
  const ref = useRef(null);
  useEffect(() => {
    const fade = createFadeEdge(ref.current, { size: 64, mode });
    return () => fade.destroy();
  }, [mode]);
  return <div ref={ref} className="prints">{prints.map(renderPrint)}</div>;
}