Print Halftone
CMYK offset printing halftone pattern with paper grain overlay.
Main Features of Print Halftone
How to Use Print Halftone in Next.js
Installation Guide for Print Halftone
Props
Customize the component with these props
| Property | Type | Default | Description |
|---|---|---|---|
backgroundColor | string | #e3e3e3 | Background color |
cyanColor | string | cyan | Cyan color |
magentaColor | string | magenta | Magenta color |
yellowColor | string | yellow | Yellow color |
dotSize | string | 1px | Dot size |
dotSpacing | string | 4px | Dot spacing |
cyanRotation | number | 15 | Cyan layer rotation |
magentaRotation | number | 75 | Magenta layer rotation |
yellowRotation | number | 0 | Yellow layer rotation |
layerOpacity | number | 0.4 | Layer opacity |
noiseOpacity | number | 0.2 | Noise overlay opacity |
noiseBaseFrequency | string | 0.8 | Noise base frequency |
noiseOctaves | number | 3 | Noise octaves |
text | string | Halftone | Text label |
textColor | string | #000000 | Text color |
textRotation | number | -5 | Text rotation angle |
className | string | Additional CSS classes |
Related Components
Interstellar Fluid Hero
Interactive fluid simulation creating cosmic nebula effects with mouse interaction. Deep space aesthetic with animated gas clouds and star trails.
Interstellar Background Hero
Warp tunnel effect simulating high-velocity travel through nebular clusters. Procedural WebGL engine with mouse-responsive space distortion.
Liquid Chrome Hero
Procedural simulation of molten chrome alloys with velocity-based distortion. Interactive liquid metal surface with specular highlights.
When to Use
Best Practices
Why This Component Matters in Modern UI Development
Frequently Asked Questions
QIs it real CMYK?
Yes, it simulates the offset printing process by overlaying Cyan, Magenta, and Yellow dot layers at traditional screen angles.
QCan I adjust the dot scale?
Absolutely, you can control the overall texture density via `dotSize` and `dotSpacing`, ranging from a fine newspaper grain to a pop-art comic effect.
QWhat is the paper texture?
It includes a static SVG noise layer that recreates the fibrous texture of unbleached paper, reinforcing the physical print aesthetic.