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
• Grainradgrainrad.com
• Components | Canvas UIcanvasui.dev
• Motion (prev Framer Motion): JavaScript & React animation librarymotion.dev
• Transitions.dev — Essential transitions for web appstransitions.dev
• How Notion pulled itself back from the brink of failure | Figma Blogfigma.com
• Crafting the Next.js Websiterauno.me
• Unicorn Studio — No-code WebGL Toolunicorn.studio
• Magic UImagicui.design
• Subframe – The AI design tool built for codesubframe.com