{"slug": "glimm-shader-driven-page-transitions", "title": "Glimm: Shader Driven Page Transitions", "summary": "Glimm, a new React and Next.js library, enables shader-driven page transitions with a GPU-composited WebGL band under 10 KB. It offers multiple triggers, presets, and customization options for developers to create smooth, performant route changes.", "body_md": "# glimm\n\nglimm 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.\n\n`npm install glimm`\n\nZero runtime dependencies. React 18+ and Next 13+ are peer deps.\n\n[Installation](#installation)\n\nYou can install glimm using npm, or share the following prompt with a coding agent to set it up for you.\n\n`npm install glimm`\n\n[Quick start](#quick-start)\n\nGetting started takes a single step. Wrap your app in `GlimmProvider`\n\nso glimm is available on every route. From there, you choose how a transition gets triggered using one of the [options](#triggers) below. The provider stays idle until it's actually needed: it builds its one WebGL context on the very first sweep, so an app that never transitions costs nothing to set up.\n\n[Triggers](#triggers)\n\nThere are three ways to trigger a transition, and you can use any combination across your app. `TransitionLink`\n\nreplaces standard links when the destination is known upfront. `useTransitionRouter()`\n\nhandles programmatic navigation, like redirects after form submissions. Or drop in `<InterceptLinks />`\n\nat the root level to automatically apply transitions to all internal links without touching existing code.\n\n[Presets](#presets)\n\nglimm includes 6 built-in color palettes, each tuned to a different mood using cosine gradients. Pass any palette name as a string to the `palette`\n\noption. If the presets don't fit your design, you can create a custom palette using the `{a,b,c,d}`\n\nformat, covered in Custom palette below.\n\n[Easing](#easing)\n\nEasing controls how the band speeds up and slows down as it crosses the screen. Front-loaded curves like `back`\n\nand `easeOutQuart`\n\nstart fast, so the sweep feels snappy and immediate. Symmetric curves like `easeInOutCubic`\n\nease in and out evenly, for a calmer, more composed feel. Pass any of the 10 built-in curves as a string, or provide your own as a `(p: number) => number`\n\nfunction.\n\n[Band width](#band-width)\n\n`bandTight`\n\ncontrols how concentrated the band's gaussian falloff is. Lower values produce a wider, softer band; higher values make a narrower, more focused beam.\n\n[Custom palette](#custom-palette)\n\nEach palette is a cosine palette: `color(t) = a + b·cos(2π·(c·t + d))`\n\n. Each of `a`\n\n, `b`\n\n, `c`\n\n, `d`\n\nis an RGB triplet — hit Shuffle to roll one, then copy the snippet below.\n\n[Props](#props)\n\nEverything you can pass to `GlimmProvider`\n\n(as defaults) or any trigger (as per-call overrides). Every option is optional.\n\n| Prop | Type | Default | Description |\n|---|---|---|---|\n| palette | PaletteName | Palette | 'prism' | 6 presets or BYO {a,b,c,d}. |\n| direction | 'ltr' | 'rtl' | 'ttb' | 'btt' | 'ltr' | Sweep axis + side. |\n| easing | EasingName | (p) => number | 'easeInOutCubic' | 10 built-ins or custom curve. |\n| sweepMs | number | 800 | Band traversal duration. |\n| outroMs | number | 350 | Post-traversal alpha fade. |\n| midpoint | number | 0.5 | When routes swap mid-sweep. |\n| peakAlpha | number | 1 | Caps band peak (0..1.5). |\n| brightness | number | 1 | RGB scale; ~0.85 on dark. |\n| bandTight | number | 14 | Tightness; lower = wider. |\n| waveAmount | number | 1 | Edge wave turbulence. |\n| rippleAmount | number | 1 | Vertical ripple texture. |\n| waveSpeed | number | 1 | Shader animation speed. |\n\n[Best practices](#best-practices)\n\nglimm is recommended for highlighting moments rather than just motion. Each sweep serves as a form of punctuation, reserved for state changes that require attention while allowing the rest of the app to remain quiet.\n\nUse glimm for:\n\n- Moments like publishing, submitting or completing where the action deserves a celebration.\n- Confirmed actions: a brief pause can help users notice the new state.\n- Focused modes: use it during checkout, presentations, or review screens where previous context has been replaced with new information.\n- Section-level navigation: apply it for navigation that is clearly different, not for every page change in the same area.\n\nAvoid using glimm for:\n\n- Every internal navigation: although\n`<InterceptLinks />`\n\nmakes it easy to use everywhere, sweeping the screen with every click reduces its impact. - Passive interactions: includes hover effects, focus, tooltips, dropdowns, and menus.\n- Repeated actions in a loop: example includes adding rows, checking off items, or moving through a list.\n- Loading or skeleton states: glimm is meant for punctuation, not for spinning indicators.\n\nTo determine if a moment needs a glimm sweep, consider whether you would mention it in a changelog or launch post. If yes, then glimm is likely a good fit. If it's just “the user clicked something,” skip it. Using glimm sparingly makes the moments it does highlight more meaningful.", "url": "https://wpnews.pro/news/glimm-shader-driven-page-transitions", "canonical_source": "https://glimm.dev/", "published_at": "2026-06-24 04:33:41+00:00", "updated_at": "2026-06-24 04:44:08.384824+00:00", "lang": "en", "topics": ["developer-tools", "ai-tools"], "entities": ["Glimm", "React", "Next.js", "WebGL"], "alternates": {"html": "https://wpnews.pro/news/glimm-shader-driven-page-transitions", "markdown": "https://wpnews.pro/news/glimm-shader-driven-page-transitions.md", "text": "https://wpnews.pro/news/glimm-shader-driven-page-transitions.txt", "jsonld": "https://wpnews.pro/news/glimm-shader-driven-page-transitions.jsonld"}}