Viscose-carousel
A wheel of work that never quite sets. Cards fuse as they meet, and draw into threads as they part.
What is it?
What it is
A portfolio carousel built as a single WebGL shader using signed distance fields, where project cards ride a ring that sweeps past the viewer with viscous, thread‑like transitions.
Why it exists
To explore a novel rendering approach—merging card art, threads, glass refraction, and cursor effects in one shader—while providing an interactive, momentum‑driven showcase of work that feels tactile and visually striking.
Who should use it
Developers and designers interested in creative coding, WebGL shaders, interactive portfolio sites, and experimental UI effects using Next.js and Three.js.
Who should avoid it
Beginners unfamiliar with WebGL, shader programming, or those needing a simple, accessible, low-motion website; also teams requiring extensive testing, keyboard navigation, or reduced-motion support.
How it works
A quick walkthrough in plain English
How Viscose-carousel works
Step 1 of 3
You interact with it
Open Viscose-carousel, send a request, or connect it to your stack.
Features
Advantages
- Single draw call minimizes GPU overhead and eliminates multiple texture fetches
- Fluid visual effect where cards appear to melt and form honey-like threads
- Real-time interactive physics with smooth momentum for high engagement
- Highly customizable via the dev panel without rebuilding the app
- Easy to extend: new project cards require only a data-array update
- Open-source MIT license permits free use and modification
Disadvantages
- No reduced-motion support, making the animation inaccessible to some users
- Missing keyboard navigation such as arrow keys
- Phone width breakpoints are approximate and may drift on very small screens
- No automated tests; runtime shader compilation can hide errors
- Font licensing restrictions for PP Neue Montreal require separate commercial license
- Third-party images in public/ have unclear reuse rights
Installation
cloud
Not mentioned in README
docker
Not mentioned in README
native
npm install && npm run dev
compose
Not mentioned in README
FAQ
How do I run the Viscose carousel locally?
Requires Node 20 or newer. Clone the repo, run `npm install`, then `npm run dev` to start the development server at http://localhost:3000. Use `npm run build` for production and `npm start` to serve it.
How can I interact with the carousel?
Scroll or drag to turn the ring (it snaps to cards). Hover cards to soften the field and stretch threads. Click off-center cards to smoothly center them. On touch devices, swipe to turn and press-and-hold for hover effects.
How do I add my own projects to the carousel?
Edit `components/ring/projects.js` to add your project entries with `file`, `name`, `type`, and `year` fields. Place images in the `public/` directory. The array order determines ring sequence—reorder rows to change the carousel flow.
What are the font licensing considerations?
PP Neue Montreal is bundled for development only and requires commercial licensing for use. Satoshi and Geist are free for commercial use. Swap `textFont` in `params.js` to use Satoshi instead if needed.
How does the development panel work?
A lil-gui panel appears top-right in development with ~136 tunables grouped by effect. Changes are live. Before tuning, ensure `fit/scale` reads `1.000` or click 'use this window as ref' to match your screen's reference. Controls are in `ring/gui.js`.
What are the current limitations of the carousel?
Clicking cards centers them but doesn't open links. No reduced-motion support or keyboard navigation. Phone widths below 500px may have layout issues. GLSL shaders compile at runtime, so build passes don't validate shader syntax.
Featured in Videos
YouTube tutorials and walkthroughs for Viscose-carousel
Alternatives
Similar projects ranked by category, topics, and text overlap.
