CrazyGLHalftone Field
A full-bleed AM halftone screen — thousands of ink dots on an aspect-corrected grid whose size is driven by a slow, domain-warped noise field sampled at each cell's centre. Dark zones grow fat dots, light zones shrink to pinpricks, and the field visibly evolves over time so the dot sizes breathe. Dot contrast intensifies toward the frame edges while the centre stays calm so the heading reads. Bold, graphic, editorial.
Usage
import HalftoneField from '@crazygl/hero-halftone-field';
export default function Hero() {
return (
<HalftoneField
heading="In full relief."
cellSize={12}
dotColor="#707070"
/>
);
}Customise
- Halftone —
cellSize(grid pitch px),dotGap,dotColor,backgroundColor(paper),maxDotScale,fieldScale,fieldSpeed(drift),invert. - Edges —
edgeIntensity(boost contrast toward edges) andcenterCalm(flatten the centre for legibility). - Backdrop —
transparentto composite dots over your own page background.
Best for
- Editorial and magazine-style sites
- Type-led brand and design-studio pages
- Print-adjacent products
- Fashion and culture launches wanting a bold graphic gesture
One command, zero config.
npm install @crazygl/hero-halftone-fieldImport once, drop it in.
The component takes the same props you see in the live customizer on the right — every default ships poster-quality.
import HalftoneField from '@crazygl/hero-halftone-field';
export default function Landing() {
return (
<HalftoneField />
);
}SSR-safe by default.
The wrapper renders static HTML on the server and only initialises the canvas after hydration, so search engines see your copy.
// app/page.tsx — works in SSR-first frameworks (Next, Remix, Astro, etc.)
'use client';
import HalftoneField from '@crazygl/hero-halftone-field';
export default function Page() {
return (
<section>
<HalftoneField
heading="Say hi."
subheading="Your new hero."
/>
<article>
<h2>Welcome</h2>
<p>Your content keeps its own voice below the hero.</p>
</article>
</section>
);
}
