for React & Next.js
Pixel Reveal
Pixel Reveal makes text emerge from raw pixels, dissolving block by block into clean type.
10+ noise modes make it infinitely adaptable to your brand’s visual language
(Scroll Down)
Try every option.
Type anything
<PixelReveal>
Type anything
</PixelReveal>Nine looks. One prop.
- 01Replay ↻
Materialize
Words lift out of their line as hot, coarse silhouettes, then focus and cool into type.
preset="materialize" - 02Replay ↻
Signal
CRT scanlines tear and flicker into focus, left to right.
preset="signal" - 03Replay ↻
Typewriter
Characters print one after another, a hot block at the cursor.
preset="typewriter" - 04Replay ↻
Dissolve
A quiet grey mosaic that simply resolves. No colour, no motion.
preset="dissolve" - 05Replay ↻
Rain
Characters drop in random order while columns of pixels rain down.
preset="rain" - 06Replay ↻
Radiate
One dithered front blooms out from the centre of the text.
preset="radiate" - 07Replay ↻
Bitmap
Ordered dither and hard blocks: one bit per pixel, nothing more.
preset="bitmap" - 08Replay ↻
Glitch
Torn rows, two-tone blocks, heavy flicker.
preset="glitch" - 09Replay ↻
Flow
A liquid, domain-warped front drifting diagonally across.
preset="flow"
Five ways to drive it.
- 01
load
Plays as soon as the page and its fonts are ready. This one already has.
trigger="load" - 02
inview
Plays when it scrolls into view. once={false} rewinds it on the way back.
trigger="inview" - 03
scrub
The scroll position is the progress. Keep scrolling and it resolves.
trigger="scrub" - 04
pin
Scrubbed inside a sticky <PinSection>. The next section is one.
trigger="pin" - 05
manual
You own the playhead: play(), seek() or a progress prop.
trigger="manual"
Scroll-driven control puts the reveal in your hands — every pixel tied to your pace
Built to disappear.
- Canvas
- 1One WebGL context and one render loop for every reveal on the page.
- Idle cost
- 0Draw calls once text has settled. The DOM shows its own glyphs again.
- Presets
- 9Complete looks, one prop each. Any option overrides on top.
- Patterns
- 10Reveal fields, times 8 directions, times 5 triggers.
- Real text
- 100%Selectable, searchable, translatable, read aloud. Styled by your CSS.
- Hand-off
- 1:1The finished mirror matches the DOM pixel for pixel. The swap is invisible.
Drop it in.
- 01 — Wrap the app
One root in your layout owns the canvas, the render loop and smooth scroll.
// app/layout.js <PixelRevealRoot> {children} </PixelRevealRoot> - 02 — Write text
Any element, styled by your CSS. Pick a preset, a trigger, a pattern — one prop each.
<PixelReveal as="h2" preset="signal"> Hello, pixels </PixelReveal> - 03 — Tune it live
Open any page with ?gui, pick a reveal, drag the controls, copy the props.
// any page localhost:3000/?gui