Elyri

Motion, UI components and page blocks for React. Preview them live, tune the props, then take the code with you.

Components

Featured effects

DragonScales

A WebGL side-view dragon-scale background with an obsidian glaze, flowing contour reflections and double-lined rims. The light follows the pointer.

AsciiImage

Turns an image into ASCII art: pixels map to sparser or denser characters by brightness, in a single color or the original colors. Decodes top to bottom on viewport entry, then a glint sweeps across and characters flicker; near the pointer they are pushed aside, brightened and scrambled. Adapts to light and dark themes.

MeshGradientNew

A WebGL flowing gradient: four color blobs are domain-warped into slowly streaming ribbons, blended in Oklab, with a satin sheen gliding along the flow and fine film grain.

Quick start

Full installation guide →

Install dependency

pnpm add @elyri/motion

Add component

pnpm dlx @elyri/cli@latest add gradient-text

Why Elyri

Zero runtime dependencies

React is the only peer dependency. A small bundle, with component source you can read and edit.

CSS variable theming

Every customizable value is a CSS variable, overridable globally or within any container.

Performance first

WebGL and compositor-driven motion that pauses offscreen or in background tabs.

Reduced motion aware

Follows the system preference, and ReducedMotionProvider can force a subtree to play or rest.