Sediment
Reveal.

Copy each source file into components/. Keep the filenames and their relative imports together. Then use the example below. Use the runtime and file types listed on this effect’s usage notes. The example uses the common @/ import alias; use a relative import if your project has no alias.

"use client";
import { SedimentReveal } from "@/components/material-effects/material-components";

// Copy the listed files into components/, preserving both subdirectories.
// Use React 19.3, CSS Modules and the font variables below.
// pnpm add @fontsource/instrument-serif@5.3.0 @fontsource/space-mono@5.3.0
// Sediment: copy the licensed local image to public/material-wave-a/ as well.
export function MaterialSection() {
  return (
    <>
    <section data-scroll-lane style={{ height: 1700 }}>
      <div style={{ position: "sticky", top: 84 }}>
        <SedimentReveal src="/material-wave-a/mineral-study.webp" alt="Fractured dark mineral on warm limestone" />
      </div>
    </section>
    <section id="field-notes"><h2>Your next section</h2></section>
    </>
  );
}

/* Your global CSS:
@import "@fontsource/instrument-serif/latin-400.css";
@import "@fontsource/instrument-serif/latin-400-italic.css";
@import "@fontsource/space-mono/latin-400.css";
:root { --font-display: "Instrument Serif", serif; --font-mono: "Space Mono", monospace; }
*/

The source above powers this preview. Local review build; no published package required.