React Skyllax

A lightweight, modern React parallax library for creating beautiful multi-layer scrolling effects with minimal setup.

Built for React 18+ and React 19.

Features

• Lightweight and dependency-free
• Smooth hardware-accelerated animations
• Multi-layer parallax scenes
• Simple React components
• Works with Vite, CRA, Next.js, and other React frameworks
• Supports unlimited layers
• Easy to customize

Installation

npm install react-skyllax

or

yarn add react-skyllax

or

pnpm add react-skyllax

Basic Usage

import { ParallaxScene, ParallaxLayer } from "react-skyllax";

import sky from "./assets/sky.png";
import mountains from "./assets/mountains.png";
import trees from "./assets/trees.png";

export default function App() {
  return (
    <>
      <ParallaxScene height="100vh">

        <ParallaxLayer
          src={sky}
          speed={0.1}
          zIndex={1}
        />

        <ParallaxLayer
          src={mountains}
          speed={0.3}
          zIndex={2}
        />

        <ParallaxLayer
          src={trees}
          speed={0.6}
          zIndex={3}
        />

      </ParallaxScene>

      <section
        style={{
          minHeight: "100vh",
          background: "#111",
        }}
      />
    </>
  );
}

Components

ParallaxScene

Container for all parallax layers.

| Prop | Type | Default | Description | |------|------|---------|-------------| | height | string | "100vh" | Scene height | | children | ReactNode | - | Parallax layers |

Example

<ParallaxScene height="100vh">
    ...
</ParallaxScene>

ParallaxLayer

Creates one parallax layer.

| Prop | Type | Default | Description | |------|------|---------|-------------| | src | string | - | Image source | | speed | number | 0.5 | Scroll speed multiplier | | zIndex | number | 1 | CSS z-index | | className | string | "" | Additional class names | | children | ReactNode | - | Custom content |

Example

<ParallaxLayer
    src={background}
    speed={0.2}
    zIndex={1}
/>

Multiple Scenes

You can create multiple independent parallax sections.

<>
    <ParallaxScene height="100vh">
        ...
    </ParallaxScene>

    <section style={{ height: "100vh" }} />

    <ParallaxScene height="100vh">
        ...
    </ParallaxScene>
</>

Browser Support

• Chrome
• Firefox
• Edge
• Safari

Requirements

• React 18+
• React 19+

Roadmap

Planned features:

• Video layers
• Mouse parallax
• Horizontal parallax
• Scale animation
• Rotation effects
• Opacity animation
• Blur effects
• TypeScript types
• Performance improvements
• Next.js examples

Contributing

Contributions, feature requests, and bug reports are welcome.

Feel free to open an issue or submit a pull request.

License

MIT License

Copyright (c) 2026 Chunsky

💖 Support

If you enjoy using React Skyllax, you can support its development: