Holosticker

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.

An open-source WebGL shader library for creating customizable animated visual effects and branded digital assets.

Hyalite is a JavaScript library for real-refraction liquid-glass effects on the web. It models an element as a glass slab with a bevelled edge, computes a signed-distance-field lens map for its rounded-rectangle geometry, applies Snell's-law refraction, and feeds the resulting displacement and edge-light data into an SVG filter used through backdrop-filter. It supports per-corner radii, configurable bevel, thickness, slope, dispersion, shading, rim light, resizing, and materialization effects. The library is distributed as a single file with no WebGL or build step. Its watch and attach APIs manage matching or individual elements, rebuild maps when geometry changes, cache maps across similar sizes, and provide fallback CSS behavior. The refraction effect is rendered in Chromium-based browsers; Safari and Firefox use the supplied fallback because their SVG backdrop-filter support is incomplete. Hyalite is released under the MIT license by VII-Cae (VII).

Vistep is an interactive educational visualization site for explaining mechanisms in science, computation, and everyday systems through bilingual English-and-Chinese visual stories. Its chaptered films synchronize animation with recorded narration, captions, and transcripts; browser-based experiments connect independent calculations to geometry, motion, and readouts so changing inputs updates the visualization. Topics include JPEG compression, bicycle gearing, refrigeration, pendulums, laser printing, web loading, and elevator scheduling. The open-source collection is built with Astro, React, TypeScript, SVG, Canvas, and Three.js, and can be run locally with Node.js and pnpm. The source code and documentation are MIT licensed.

Halcyon Video is a self-hosted 3D media-library interface that connects to Jellyfin or Plex and procedurally presents a collection as a walkable video-rental store. Built with Vite, TypeScript, and three.js, with an optional Tauri wrapper, it turns libraries into aisles, genres into signposted sections, duplicate quality versions into stacks behind a face copy, and low-rated titles into a Bargain Bin. Users can browse shelves, inspect front and back cover artwork, take cases to a checkout counter, and play titles through its player or MPV in a simulated living room and VCR; WebXR walk mode and a CSS-based 2.5D mode are also available. Era, lighting, floor plan, and VHS-or-DVD presentation are independent settings. Branding can change the store name, colors, emblem, typeface, signs, cases, endcaps, aisle markers, shelving, checkout area, and clerk uniform; a logo.svg or transparent PNG in the user-assets folder can provide the emblem and derive house colors. The project supports Docker, browser use, dedicated-HTPC operation, remote browser playback with a TURN relay, and RomM game libraries. Its browser demo includes a synthetic catalog of roughly 2,000 titles and can use several gigabytes of memory and substantial GPU resources, while shelving personal files requires Jellyfin or Plex rather than a built-in folder scanner.