Hooks
Lazy mount
Mounts its children only when they come near the screen. The WebGL background, the 3D phone, the chart three screens down cost nothing — no JavaScript, no GPU — until they are about to be seen. Pair it with React.lazy or next/dynamic and their code is not even downloaded before then.
Paste it into ChatGPT, Claude, Cursor or v0.
Usage
import { lazy, Suspense } from 'react';
import { LazyMount } from '@vizzele/react';
const Fluid = lazy(() =>
import('@vizzele/react/gl').then((m) => ({ default: m.FluidBackground })),
);
<LazyMount minHeight={600} margin="50% 0px">
<Suspense>
<Fluid />
</Suspense>
</LazyMount>Props
| Prop | Type | Default | Description |
|---|---|---|---|
children | ReactNode | — | What to mount once it is near. |
margin | string | '50% 0px' | How far outside the viewport to start (CSS margin). |
minHeight | number | string | — | Space to hold until it mounts, so the page does not jump. |
placeholder | ReactNode | — | Shown until then — also what the server renders. |
idle | boolean | false | Also mount when the browser goes idle, even if never scrolled to. |
as | ElementType | 'div' | Element to render. |
Accessibility
- Use it for decoration and below-the-fold extras. Content people search for or link to should render on the server.
- Once mounted, children stay mounted; Vizzele effects inside still pause on their own while off-screen.