Image caption

A caption over a print, made readable by a dark scrim that eases in from nothing.

EasedLinear

A soft marble texture in sand, green and violet — **Sand and fern**Marble print on cotton paper, 50 × 70 cm, edition of 30

Both scrims end at the same darkness. The linear one starts with a line you can see across the print. The eased one starts so gently that the image seems to darken on its own, and the text still sits on enough contrast.

import { easingGradient } from "@reuse-sh/gradients";

// <figure class="print">
//   <img src="/prints/blue-hour.jpg" alt="…" />
//   <figcaption>Blue hour</figcaption>
// </figure>
const caption = document.querySelector(".print figcaption");
caption.style.backgroundImage = easingGradient({
  to: "rgb(0 0 0 / 0.6)",
  direction: "to bottom",
});

import { easingGradient } from "@reuse-sh/gradients";

const scrim = easingGradient({ to: "rgb(0 0 0 / 0.6)", direction: "to bottom" });

export function Print({ src, alt, title }) {
  return (
    <figure className="print">
      <img src={src} alt={alt} />
      <figcaption style={{ backgroundImage: scrim }}>{title}</figcaption>
    </figure>
  );
}

Hand this page to your coding agent.

Read https://reuse.sh/easing-gradients/guide.md and build an image caption over an eased scrim like https://reuse.sh/easing-gradients/examples/image-caption. Keep the principles the guide lists.