Dither Reveal
Content appears and disappears through an ordered-dither threshold: hard square cells, one bit, no opacity fade.
$149 once · every Pro piece
Customize
bayer
noise
scan
left
center
pointer
A dithered front travels out from the origin in 24 stepped frames, glittering ember just ahead of itself. Fully shown means no mask at all. Toggling mid-transition runs it backward from the current frame.
Install
npx shadcn@latest add @obsyde/dither-revealNeeds your licence key · Get Pro
Usage
Import it from where the CLI puts it, or copy the files below by hand.
import { DitherReveal } from '@/components/obsyde/ember/dither-reveal/DitherReveal';
export function Example() {
return (
<DitherReveal pattern="bayer" origin="left" />
);
}
Files
What you get with Pro: plain React, TypeScript and CSS, with no dependencies.
ember/dither-reveal/DitherReveal.tsxcomponentember/dither-reveal/dither-reveal-demo.cssstylesember/dither-reveal/dither-reveal.cssstylesember/dither-reveal/DitherRevealDemo.tsxdemoember/shared/accent.tssharedember/shared/spring.tssharedember/shared/ember.cssshared
API
| Prop | Type | Default |
|---|---|---|
accentAccent | 'ember' | 'volt' | 'arc' | 'ember' |
patternPattern | 'bayer' | 'noise' | 'scan' | 'bayer' |
originOrigin | 'left' | 'center' | 'pointer' | 'left' |
cellCell (px) | number | 3 |
durationDuration (ms) | number | 640 |