One fragment shader draws the entire ring
Viscose avoids a row of DOM cards. A full-screen fragment shader draws signed distance fields for the ring, its cards, the threads between them, the refracting edge effect, and the cursor label. Smooth blending makes neighboring shapes merge as they approach and pull into thin necks as they separate. Card positions arrive as uniform arrays, while an image atlas supplies the project art. The result feels closer to a digital installation than a normal content slider.
That focused idea lives in a small repository: our checkout had 53 files and about 3,301 source lines. The stack is still substantial, using Next.js 16, React 19, Three.js r185, GSAP, and Tailwind 4. The ring may use one draw call, but the application also manages atlas loading, responsive fitting, metadata transitions, pointer input, touch gestures, and a timed entry sequence.
Motion has care, while access controls are missing
Scrolling, dragging, or swiping rotates the ring with momentum before it snaps to the nearest card. Hovering softens the field around a project, moves its neighbors, and produces threads. Touch users get the same effect through a press-and-hold gesture. Clicking an off-center card animates it to the front. Those choices show that the author considered a finger without hover instead of treating mobile as a smaller mouse screen.
The repository also states its limits without euphemism. There is no keyboard control and no reduced-motion mode, even though the entry includes 6 seconds of animated blur. Below roughly 500px, the phone layout drifts because tuning happened nearer the 640px end. A centered card still does not open a project. These are blockers for a public portfolio, especially when the interface displays a View label that promises an action.
What happened when we ran it
Our sandbox installed 623 npm packages in 17 seconds, using 501 MB on disk. The Next.js production build succeeded in 20 seconds. npm audit reported 0 known vulnerabilities across critical, high, moderate, and low severities. The run used an unprivileged Node 22 Debian container with 3 CPUs, 8 GB of RAM, no secrets, and commit 4b9ac8c.
There was no test script or target, so tests were skipped. The checkout also had no tests directory, CI workflow, or Dockerfile. A passing 20-second build does not validate the WebGL result because the README warns that GLSL compiles in the browser; a shader typo can leave the Next.js build green. Visual review on real GPUs and input testing are required after every shader change.
The included artwork and one font cannot ship unchanged
Every sample project name, discipline, and year is placeholder data. More seriously, the images were collected from other people's work and are not covered by the source license. The README tells forkers to replace them. PP Neue Montreal is also bundled only for local development and evaluation. A commercial site needs its own license or a switch to the included Satoshi typeface, with the corresponding font name changed in both CSS and shader parameters.
The measured install already occupies 501 MB before a team adds its own source images and deployment output. Replacing the 18 project rows is straightforward because one array controls atlas order, ring order, the index column, and numbering. Reordering it changes all four together. That convenience also means careless image replacement can disturb composition, loading order, and the sequence around the ring.
Around 136 controls make tuning possible and risky
A development-only lil-gui panel groups about 136 settings for fit, shape, timing, stage, metadata, pointer response, side cards, threads, and glass. It is dynamically imported behind a development guard, so it does not ship in the production bundle. The panel is a useful map of the visual system and a practical way to find whether a desired change already has a parameter.
Before tuning, the author tells developers to check that the fit scale reads 1.000 or redefine the current window as the reference. Measurements were authored against a 14-inch MacBook Pro at 1512 points. Ignoring that step can produce settings that look right only because a scale factor is compensating locally. The 20-second build offers no protection against that design error, so record reference viewport and device choices alongside changed parameters.
Loading behavior is part of the composition
The image atlas binds on the first frame and fills as files arrive. The front card receives high priority so its art can appear while other images continue loading. A counter at the bottom is also the animation gate: the seed card holds at center, and the ring begins its entry on the frame where loading reaches 100. Slow assets therefore alter the opening rhythm rather than merely filling boxes after the layout starts.
Our run measured package installation and compilation, not image transfer or animation performance. It did not provide frame rates, GPU timings, bundle size, or phone results, so none should be inferred. Replace the sample art with realistic production dimensions, convert the roughly 340 KB of font files to an appropriate web format if licensing permits, and profile the actual target devices before choosing this as a homepage.
This is a study piece, not a maintained carousel library
GitHub records the last push on August 15, 2026 and 433 stars. There was no published release, no open issue, and 2 combined issues and pull requests on the repository page when fetched. The package is marked private at version 0.1.0. The README calls the work unfinished and publishes it because the rendering approach may help others, which is a fair description of its current value.
Viscose is unusually honest source material for learning how a visual idea becomes shader math, responsive fitting, and input handling. The 17-second install and clean audit make it easy to inspect. A production fork is a redesign project: own the art, settle the font rights, make View work, add keyboard and reduced-motion paths, test below 500px, and verify the shader in browsers rather than trusting the build.