ASCII Pixel Transition
Overview
ASCII Pixel Scroll Transition transforms scrolling into a GPU-driven visual ritual — five full-screen scenes connected by a cascading wave of yellow ASCII characters. As the user scrolls, a custom GLSL fragment shader reveals each section cell by cell, staggering the reveal row by row with per-cell jitter and a brief yellow flash before the image settles in. Lenis handles the momentum physics while GSAP’s ScrollTrigger scrubs a master timeline to keep everything locked to the user’s exact scroll position. The result is an experience that feels handcrafted but runs entirely on the GPU — no DOM animation, no layout thrashing.
Tech Stack
- React 19
- Vite
- GSAP
- Lenis
- Tailwind CSS
- Three.js
- GLSL
Highlights
- Scroll-driven GLSL fragment shader reveals each section through a staggered ASCII pixel grid wave
- Per-row stagger with per-cell random jitter computed entirely on the GPU via sine-hash noise
- Yellow ASCII characters flash and fade during each transition using a two-phase fade-in/fade-out timing model
- ASCII character grid pre-baked into a WebGL CanvasTexture at mount — sampled per-cell in the shader at runtime
- GSAP master timeline scrubbed by ScrollTrigger with scrub: 0.8, driving uProgress uniforms directly on Three.js shader materials
- Snap-to-section implemented via Lenis scrollTo with cubic ease-in-out over 1.8 seconds, triggered after a 600ms debounce
- Character-level heading animation using a custom splitText splitter with per-character stagger tied to the reveal timeline
- Responsive ASCII grid recalculates column/row counts and regenerates the texture on resize, with a 640px breakpoint for mobile cell sizing
Formats
Github RepositoryGet Access to this Resource
Get instant access to your custom-built website, complete with stunning design and seamless functionality. Start showcasing your brand today!