Getting Started
Scroll Animations
Text Animations
Hover & Cursor
Sliders & Carousels
Galleries & Grids
Menus & Navigation
Preloaders & Intros
Page Transitions
3D & WebGL
ascii-dissolve-scroll-demo
Scroll into the concrete hours
Five rooms, one long shadow
import { AsciiDissolveScroll } from "@/registry/tween/ascii-dissolve-scroll"
export function AsciiDissolveScrollDemo() {
return <AsciiDissolveScroll />
}
Installation
Usage
import { AsciiDissolveScroll } from "@/components/ui/ascii-dissolve-scroll"<AsciiDissolveScroll
images={["/rooms/atrium.jpg", "/rooms/stair.jpg", "/rooms/ramp.jpg"]}
cellSize={16}
dissolveColor="#f2a65a"
/>How it works
The images are stacked with the first on top. The section pins for one viewport height per transition, and the scroll range is split into equal segments, one per transition.
- In each segment the top image's
clip-pathmoves its top edge from0%to100%, so it wipes away downward. - A grid of DOM cells covers the section, one cell per
cellSizepixels, each holding a random character. The grid is sized from the section, not the window. - A band centred on the wipe edge decides which cells are visible. Density falls off with distance from the band centre. Each cell has a fixed hash-based threshold and a scatter offset, so the band edge breaks up into noise while its core stays solid.
- At segment boundaries all cells hide.
The grid and trigger are rebuilt when the scroller resizes. With prefers-reduced-motion: reduce there is no pin or grid and the first image is shown.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
images | string[] | 5 images | Stacked images, first on top. |
introText | ReactNode | "Scroll into the concrete hours" | Text of the section before the stack. |
outroText | ReactNode | "Five rooms, one long shadow" | Text of the section after the stack. |
cellSize | number | 16 | Cell size in px. |
dissolveColor | string | "#f2a65a" | Cell background color. |
characters | string | A–Z, 0–9 and symbols | Characters picked at random for cells. |
background | string | "#141414" | Intro, outro and section background. |
foreground | string | "#ffffff" | Intro and outro text color. |
fontFamily | string | DM Mono stack | Font for text and cells. |
scroller | HTMLElement | string | null | — | Optional ScrollTrigger scroller. |