Tool Open source
Viscose is a portfolio carousel rendered as a single full-screen WebGL fragment shader rather than a grid of DOM elements. Project cards travel around a mostly off-screen ring that can be turned by scrolling, dragging, swiping, or clicking; momentum carries the ring and it snaps the nearest card to the front. Signed distance fields make neighboring cards melt together as they approach and form thin, sagging threads as they separate, while pointer interaction softens the field, shifts nearby cards, and creates connecting effects. The same shader pass renders the threads, the refracting glass-like edges at the top and bottom of the viewport, and the cursor tag. On touch devices, swiping turns the ring and press-and-hold triggers the hover effects. The project includes a development-only lil-gui panel with roughly 136 live parameters and is built with Next.js, React, Three.js, GSAP, and Tailwind CSS; it requires Node.js 20 or newer to run locally.
2 uses taken from transcripts — each links to the moment in the video.
A portfolio carousel rendered as a full-screen fragment shader rather than a grid of DOM elements. Its shader blends card shapes so neighboring cards melt together as they move.
A portfolio carousel rendered as a single WebGL fragment shader. It uses signed distance fields to make project cards melt, stretch, and connect as users scroll, drag, swipe, and hover, with a live panel for adjusting settings.
2 in the library.