Material · dither · Paid
CMYK Halftone
Print-style CMYK halftone dither for sections and empty states.
- Type
- dither
- Contexts
- section · empty
- Tags
- dither · halftone · cmyk · print
- Perf
- webgl · CMYK flood dots are mid-light; one sectional instance is fine.
Configurator
Pause freezes the live preview. Reduced motion uses the CSS shell fallback. Reset restores catalog defaults and clears config URL params. Share config copies this page link.
Get access
personalCLI
npx shadcn@latest add @frameline/cmyk-halftone
Copy-paste path
components/ui/cmyk-halftone.tsx
Drop source beside your UI kit, or paste JSX from the panel below after install.
Install unlocks after purchase. Preview JSX is for evaluation. Full install guide.
License
$99Personal
All personal materials · commercial rights · updates.
Permitted
- All personal-tier SKUs via registry
- Commercial projects under your name
- Email receipt + account reinstall
Not permitted
- Client deliverables under a studio seat
- Redistribute source packages
Compare Free, Personal, and Team on Pricing.
JSX
import { CmykHalftone } from "@/materials";
<CmykHalftone
size={0.28}
contrast={1}
softness={0.7}
grainMixer={0.05}
grainOverlay={0.08}
scale={1}
grainSize={0.4}
gridNoise={0.25}
floodC={0.2}
floodM={0.1}
floodY={0.05}
floodK={0.05}
gainC={0.35}
gainM={0.15}
gainY={0.2}
gainK={0.1}
colorBack="#FBFAF5"
colorC="#00B4FF"
colorM="#FC519F"
colorY="#FFD800"
colorK="#231F20"
className="absolute inset-0"
/>Props
| Name | Type | Default | Description |
|---|---|---|---|
| size | number | 0.28 | Dot size |
| contrast | number | 1 | Contrast |
| softness | number | 0.7 | Dot softness |
| grainMixer | number | 0.05 | Grain mix |
| grainOverlay | number | 0.08 | Grain overlay |
| scale | number | 1 | Pattern scale |
| grainSize | number | 0.4 | Grain scale |
| gridNoise | number | 0.25 | Grid noise |
| floodC | number | 0.2 | Cyan flood |
| floodM | number | 0.1 | Magenta flood |
| floodY | number | 0.05 | Yellow flood |
| floodK | number | 0.05 | Black flood |
| gainC | number | 0.35 | Cyan gain |
| gainM | number | 0.15 | Magenta gain |
| gainY | number | 0.2 | Yellow gain |
| gainK | number | 0.1 | Black gain |
| colorBack | color | #FBFAF5 | Background color |
| colorC | color | #00B4FF | Cyan plate |
| colorM | color | #FC519F | Magenta plate |
| colorY | color | #FFD800 | Yellow plate |
| colorK | color | #231F20 | Black plate |
Frameline
Design assets for the AI era — shippable surface so you don’t ship the default look.
© 2026 Frameline. All rights reserved.
Sera · Stone · Blue