# Vysmo

> Vysmo is a family of MIT-licensed, zero-dependency, framework-agnostic libraries for visual computing on the web — WebGL transitions, filter effects, easing curves, choreographed text, scroll bindings, and the headless components built on top.

Every library is vanilla TypeScript, tree-shakable, and SSR-safe at import. Libraries are primitives you compose; Components are drop-in solutions built on those primitives. The whole stack composes — for example, `@vysmo/scroll` drives any `@vysmo/transitions` shader or `@vysmo/effects` filter with two lines of code.

The source repository is [vysmodev/vysmo](https://github.com/vysmodev/vysmo). All packages publish to npm under the `@vysmo/*` scope.

## Libraries (primitives)

- [@vysmo/transitions](https://vysmo.com/transitions): 60 WebGL2 shaders, defined as plain data. Tree-shakable to the byte. Endpoint-correct by construction. Zero runtime dependencies.
  [Docs](https://vysmo.com/transitions/docs) · [Examples](https://vysmo.com/transitions/examples)
- [@vysmo/effects](https://vysmo.com/effects): 30 WebGL2 filter primitives — blur, bloom, glow, color grade, sharpen, halftone, tilt-shift, scanlines, lens distortion, oil paint, wave, swirl, motion blur, VHS, datamosh, ASCII, dither, gradient map and more. One Runner, one source, one render call. Multi-pass effects auto-allocate HDR ping-pong targets.
  [Docs](https://vysmo.com/effects/docs) · [Examples](https://vysmo.com/effects/examples)
- [@vysmo/easings](https://vysmo.com/easings): A curated catalog of easings, parametric builders (spring, bezier, rough, wiggle, smooth, gravity, breathe), and modifiers (reverse, mirror, yoyo). CSS export via toCSSLinear. Pure math, zero platform assumptions.
  [Docs](https://vysmo.com/easings/docs)
- [@vysmo/text](https://vysmo.com/text): Multi-property choreographed text animation. splitText (grapheme-safe via Intl.Segmenter) + animateText (single master clock, back-fill, repeat). 229 generated + 14 curated presets across enter, exit, and emphasis.
  [Docs](https://vysmo.com/text/docs) · [Studio](https://vysmo.com/text/studio)
- [@vysmo/scroll](https://vysmo.com/scroll): Three primitives that bind scroll progress to the rest of the ecosystem: createScrollProgress (raw 0–1 emitter), createScrollTransition (drives any @vysmo/transitions render), createScrollEffect (drives any @vysmo/effects params). One shared rAF-throttled observer underneath.
  [Docs](https://vysmo.com/scroll/docs)

## Components (solutions built on libraries)

- [@vysmo/flipbook](https://vysmo.com/flipbook): WebGL flipbook around the page-curl mesh transition. Drop-in component or headless API. Click, drag-scrub mid-flip, keyboard nav. Drag-scrub is the ecosystem-native hook.
  [Docs](https://vysmo.com/flipbook/docs)
- [@vysmo/slideshow](https://vysmo.com/slideshow): Drop-in image slideshow driven by any of the 60 transitions. Opt-in chrome: arrows, dots, counter, progress bar, captions — each themeable via CSS custom properties. Click halves, keyboard, swipe, autoplay with pause-on-hover. Set every chrome option to false for pure-headless mode.
  [Docs](https://vysmo.com/slideshow/docs)

## Guides

- [Next.js integration guide](https://vysmo.com/guides/nextjs): SSR-safe usage, dynamic imports, App Router patterns.
- [All guides](https://vysmo.com/guides)

## Index pages

- [Libraries overview](https://vysmo.com/libraries)
- [Components overview](https://vysmo.com/components)