Elyri

A set of animation components for React. Each component is lightweight, fully typed, and themed through CSS variables, so it integrates into an existing design system without introducing a runtime style engine.

docs · npm · GitHub

Features

• Theming through CSS variables, with no runtime style engine
• Honors the prefers-reduced-motion user preference by default
• TypeScript definitions included
• Supports React 18 and 19

Installation

pnpm add elyri

Import the stylesheet once at your application entry point:

import 'elyri/styles.css';

Usage

import { FadeIn, GradientText } from 'elyri';

export function Hero() {
  return (
    <FadeIn direction="up" delay={100}>
      <GradientText colors={['#a78bfa', '#7c3aed']} animated>
        Hello from Elyri
      </GradientText>
    </FadeIn>
  );
}

Components

Component	Category	Description
FadeIn	Animations	Fades and slides content in when it enters the viewport
ScaleIn	Animations	Scales and fades content in when it enters the viewport
CountUp	Animations	Counts a number up to its target when it enters view
Tilt	Animations	Tilts content in 3D following the pointer
DragonScales	Backgrounds	WebGL dragon-scale background with interactive lighting
Aurora	Backgrounds	WebGL aurora night sky with layered curtains and stars
SilkWaves	Backgrounds	WebGL flowing silk with satin sheen
Caustics	Backgrounds	WebGL underwater caustics with pointer ripples
Velvet	Backgrounds	WebGL draped velvet with fold sheen and fading pointer trails
Planet	Backgrounds	WebGL orbital planet view (Mars, Jupiter or Earth) with glowing limb
MorphGrid	Backgrounds	WebGL grid cycling between circles, squares and crosses
MeshGradient	Backgrounds	WebGL flowing gradient with streaming color ribbons and satin sheen
DotField	Backgrounds	WebGL breathing dot grid with a pointer lens
Contours	Backgrounds	WebGL drifting topographic contour lines that rise under the pointer
Filaments	Backgrounds	WebGL braided light threads flowing like a plucked waveform
FlipTiles	Backgrounds	WebGL beveled cube array rolling in waves to reveal colored sides
GradientText	Text	Applies an animated gradient to text
SplitReveal	Text	Reveals text character by character as it enters view
Typewriter	Text	Types text out with a blinking cursor
ScrambleText	Text	Decodes text from glowing scrambled glyphs
ParticleText	Text	Text made of particles that scatter from the pointer
ScrollMarquee	Text	Slides text horizontally as the page scrolls vertically
Marquee	Text	Loops content infinitely in the chosen direction and back
AsciiImage	Media	Turns an image into ASCII art with a decoding reveal

Requirements

• React 18 or 19 (react and react-dom are peer dependencies)
• A bundler that supports CSS imports (Vite, webpack, Next.js, and others)

Contributing

See CONTRIBUTING.md for the repository layout, development commands, and instructions for adding a component.

License

MIT © 轻爪科技. See LICENSE.