Rolling Number

A software component that animates rolling number values using CSS keyframes.

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.

loadersz is a framework-agnostic, dependency-free browser library of Canvas loading animations, distributed as a native Web Component with an imperative TypeScript API. It provides 150 motion states, including working, searching, connecting, solving, and racing, and supports configurable size, speed, density, color, theme, pausing, and reduced-motion behavior. The root import registers a switchable <loadersz-loader> element, while individual state entry points such as loadersz/racing include the Canvas core and one geometry builder for smaller fixed-state bundles. The API can also attach a fixed or switchable loader controller to an application-owned canvas and supports lifecycle methods such as setOptions and destroy. Typed integration adapters are provided for React, Vue, Svelte, and Angular; plain HTML, Lit, Solid, and Qwik can use the native element directly. The library pauses in hidden tabs, respects prefers-reduced-motion by default, and caps Canvas device-pixel ratio at two. The package has no regular runtime dependencies, and its repository is licensed under the MIT License.

Torph is a dependency-free animated text morphing web component for React, Vue, Svelte, and vanilla JavaScript. Its TextMorph component transitions between strings and supports physics-based spring easing configured with parameters such as stiffness and damping. The package is installable through pnpm and is documented in the project's repository.

Generative Loaders is an accessible React component library for loading states in generative interfaces. It provides TextLoader for responses that grow as streamed tokens or chunks arrive, InlineLoader for buttons and status rows, and ImageLoader for image-generation placeholders. TextLoader keeps the existing text prefix stable and animates only newly appended content. The components support named animation variants, configurable speed, color, size, pause state, CSS classes, and accessible labels; the package includes a stylesheet and supports React 18 and newer.