``` A flat `black/40-60` behind light text, or `white/50-70` behind dark text, is enough. A vertical gradient that is strongest where the text sits looks better. Mark it `aria-hidden`, and mark the background wrapper `aria-hidden` too: none of it carries meaning. If the user gave you brand colours, keep the copy on your own theme tokens rather than a hardcoded white, so the scrim is the only thing you tune. ### Decide who owns the theme **This is the seam agents miss.** The download follows the *operating system* via `prefers-color-scheme`. If the project instead has its own toggle (a `.dark` class, Tailwind `darkMode: "class"`, next-themes), the two disagree the moment a visitor's OS and toggle differ: the shell goes dark, the background goes light. Read the file you downloaded and find that branch first. Then pick one of three: 1. **The project follows the OS.** Nothing to do. They already agree. 2. **The project has its own toggle** (`.dark` on ``, a `data-theme` attribute). Re-gate the download on the same signal so the toggle drives the background too. This is the one case where editing the shipped scheme mechanism is right. For a `css` download the shipped file is dark-first: the base rules are the dark scheme and `@media (prefers-color-scheme: light)` holds the light ones. So invert it: - move the light values into the base rules, - replace the media query with the app's own selector holding the dark values, e.g. `html.dark .grid-bg { ... }`, - drop the `--light` class from the element, since an ancestor now decides. For `canvas`, `glsl` and `three`, the scheme comes from a `matchMedia` call near the top of the file. Read the class or attribute off `document.documentElement` there instead, and observe it with a `MutationObserver` if the toggle can change without a reload. 3. **The project is deliberately one theme only.** Pin the background to that scheme and delete the other branch: - `css`: drop the `--light` class from the element, e.g. `className="grid-bg grid-bg--light"` becomes `className="grid-bg"`. The light rules then have nothing to match and the dark scheme stands. - `canvas`, `glsl`: delete the `"light": { ... }` entry from the `opts` object. `three`: return the dark scheme unconditionally from its scheme hook. The component then only ever builds from the dark values. - To pin it to **light** instead, swap the light values into the base rather than deleting them, or take the light hexes from `/api/palettes`. Say in one line which of the three you did, because it is the choice the user is most likely to want changed. ## Mounting it Every download is a self-contained component that positions itself `absolute` and fills its parent. So the parent must be positioned, and the background must sit behind the content: ```tsx

Your content

``` A hero needs a height of its own: the background has no intrinsic size, so a section that only contains one collapses to nothing. Give the section `min-h-[70vh]` or real padding. **Next.js App Router: add `"use client"` as the first line of any `canvas`, `glsl` or `three` component.** They use `useEffect`/`useRef` or react-three-fiber, and without it the build fails. Pure `css` components are server-safe and need nothing. The downloaded file says so in its header comment, which is worth opening once for exactly this reason even though you must not retype it. The same split decides hydration anywhere else. In Astro, a `canvas`, `glsl` or `three` background needs `client:load`; a `css` one needs no directive at all and ships zero JavaScript. Same for any islands architecture: only the techs with a render loop have to hydrate. ### Mounting an `html` variant inside a component Only needed if you took the `html` variant for a `canvas`, `glsl` or `three` background, e.g. because the project is plain JavaScript. Its `.js` file is a module that grabs a hardcoded canvas id at top level and runs immediately: ```js const canvas = document.getElementById("scene"); const opts = { ... }; (function (canvas, opts) { /* ... */ })(canvas, opts); ``` Do not rewrite the body, and do not change the IIFE's argument list, which differs by tech. Change only the two ends: drop the `getElementById` line and wrap the call in an export that takes the canvas. ```js export function mountScene(canvas) { return (function (canvas, opts) { /* untouched */ })(canvas, opts); } ``` The IIFE already returns its own teardown, so `return mountScene(ref.current)` straight out of a `useEffect` cleans up correctly. Render your own `