glimm — shader-driven page transitions

A single WebGL band sweeps across the screen while routes swap underneath. Sub-10kb, GPU-composited, drop-in.

glimm — shader-driven page transitions glimm glimm is a React and Next.js library for delightful shader-driven page transitions. It sweeps a single WebGL band across your screen during route changes or any state change you select. The new view appears underneath as the band moves. It is GPU-composited, under 10 KB, and has zero performance impact. $ npm install glimm Zero runtime dependencies. React 18+ and Next 13+ are peer deps. Preview Demos Demo 1 Demo 2 Demo 3 Demo 4 Installation You can install glimm using npm, or share the following prompt with a coding agent to set it up for you. $ npm

saved by

• Aaron Pham
• Alicia Zhou
• Sachin
• David Hwang
• Yafik Ra

related reading

• Paper Shaders – Ultra-fast zero-dependency shadersshaders.paper.design
• Shadersshaders.com
• Introduction | Canvas UIcanvasui.dev
• Menu - Annnimate Landmark Kitannnimate.com
• Components | Canvas UIcanvasui.dev
• Motion (prev Framer Motion): JavaScript & React animation librarymotion.dev
• Unicorn Studio — No-code WebGL Toolunicorn.studio
• Grainradgrainrad.com
• GitHub - josephmiclaus/p5.grain: Conveniently add film grain, seamless texture overlays, and manipulate pixels to achieve nostalgic and artistic effects in p5.js sketches and artworks.github.com
• Crafting the Next.js Websiterauno.me
• Inside Framer's Magic Motionnan.fyi
• Transitions.dev — Essential transitions for web appstransitions.dev