Ready-made presets
Glitch, pixel sort, datamosh, zoom blur and more come in @vfx-js/transitions. Set a default on the container, or pick one per link.
new @vfx-js/transitions
Shader transitions
for the DOM.
Next-level page transitions with HTML-in-Canvas. Your live pages go through WebGL shaders, in a few lines of React, Vue, Svelte, Astro or plain JS.
Why VFX-JS
Your real pages, through a shader.
WebGL transitions usually work only on images you draw yourself. VFX-JS captures the live DOM, with its text, layout and CSS, so any page or component can glitch, melt or warp into the next. Keep your markup and your router. Add one component in React, or one call without it. The old content stays on screen until the shader has its snapshot, so nothing flashes.
How it works →import { TransitionIn, VFXTransition } from "@vfx-js/react";
import { Glitch } from "@vfx-js/transitions";
export function App({ pathname, page }) {
return (
<VFXTransition className="outlet" pageKey={pathname}>
{page}
</VFXTransition>
);
}
export function About() {
return (
<>
<TransitionIn transition={Glitch} />
<h1>About</h1>
</>
);
}Features
Fits into the app you already have.
Any router
<VFXTransition> for Next.js, React Router, Nuxt, Vue Router, SvelteKit and Astro. Plain run(cb) for everything else.
Plain DOM at rest
VFX-JS wraps the element in a canvas only while a transition plays. The rest of the time it is your markup, so links, text selection and screen readers work as usual.
Waits for new images
Before it captures the new content, VFX-JS waits up to about 300 ms for new images, videos and fonts, so the new page does not show up half loaded.
Write your own in GLSL
Write one function, vec4 transition(vec2 uv, float t). Read the old and new content with readFrom(uv) and readTo(uv).
Use gl-transitions
Pass an entry of the gl-transitions package to createGLTransition. Shaders that need extra textures are not supported.