Atropos: touch-friendly 3D parallax hover effects for cards and galleries

The problem Atropos solves for card and gallery interfaces

A flat card grid gives the pointer nothing to react to. Designers who want depth usually end up hand-writing pointermove handlers, converting coordinates into rotateX and rotateY values, and then discovering that the same effect has to be reimplemented for React and for whatever framework the next page uses. Atropos packages that motion into a library whose stated purpose is creating "stunning touch-friendly 3D parallax hover effects", distributed for JavaScript, React and as a Web Component.

The audience is narrow and easy to name. Portfolio sites, product galleries, trading-card style layouts, and marketing pages where a handful of tiles should respond to the cursor or to a finger. The repository topics list cards, gallery, hover, parallax and portfolio, which matches that reading. If your interface is a data table or a dashboard, the effect is decoration you will end up disabling.

How Atropos is put together: src, build and package

The repository separates three directories. Source lives in src/ and the contributing guide states that all changes should be committed to src/ files only. The build/ folder is described in the README as being for development purpose, and the package/ folder is what the README says to use in production, calling it the most stable version. That is a two-stage output model: you edit src/, run a build, and copy or publish from package/.

The build itself is driven by scripts/build through two npm scripts, build:dev and build:prod, which differ only in the NODE_ENV value passed by cross-env. A watch mode exists alongside them. The package.json name is atropos-src at version 2.0.2, and the project is built with Babel, with separate Babel config files for the base, React and Vue targets in the repository root. The presence of babel.config.vue.js next to the React config suggests the build covers more than the three surfaces the README advertises, though the README itself only names JavaScript, React and a Web Component.

The README does not describe the runtime API: no markup contract, no configuration keys, no events. Anyone evaluating Atropos for a real page has to leave the repository and read atroposjs.com. That is a documentation gap, not a design flaw, but it changes how you evaluate the library.

Installing Atropos and running a first demo

The README does not give a package manager install line for consumers, so the only install path it documents is the repository itself. Clone it and install the dependencies from the repository root:

$ npm install

From there, the README's own workflow is to build the development version and open a demo. The build command writes to build/:

$ npm run build:dev

Demos live in ./playground, and the README lists Core (HTML, JS), React and Angular versions there. The package.json scripts expose three playground launchers, and the README names two of them:

$ npm run core
$ npm run react

Running npm run core first builds the development bundle and then starts Vite against ./playground/core with the watcher running in parallel, so the browser should open on the Core demo and rebuild as you edit src/. For a production bundle, the README gives npm run build:prod and states the result lands in package/; that folder, not build/, is what the README says to ship. Because the README stops at the build boundary, treat the playground demos as the reference for markup and options rather than the README text.

Where Atropos is the wrong tool, and what the README leaves out

The README documents the build pipeline and nothing about the runtime, which is the first real limitation. There is no rollback procedure, no version compatibility table, and no statement about which browsers the effect targets. The word touch-friendly appears in the description, but the README does not explain how the effect behaves when a pointer is absent, so that claim has to be verified in the playground before you rely on it.

The release history is the second constraint. The most recent release listed is v2.0.2 from 2023-07-04, with v2.0.1 a week earlier and v1.0.2 before that in 2022. The repository's last push was on 2026-05-20, so work has continued on master since the last tagged release, but nothing in the repository says what that work contains or when it will be published. If your dependency policy requires a tagged release, you are pinning to a version that is years old while the default branch has moved on.

The third case is simply the wrong fit. Anywhere motion is unwelcome, such as accessibility-sensitive flows, dense admin tables, or pages where the pointer is not the primary input, Atropos adds a dependency and a CSS surface for an effect you will disable. The library is also a presentation layer only: it does not lazy-load images, manage card data, or handle layout, so it does not replace the component library you already have.

Atropos compared with GSAP and Framer Motion

The closest alternatives are general animation libraries rather than single-effect packages. GSAP is a timeline-driven animation engine: you write the tween, choose the easing, and control when it runs. Atropos is the opposite trade. It ships one effect, and the README's framing is that the effect is the product; you do not compose a timeline, you place the element and let the library map pointer position to a 3D tilt. That means less code for the exact case Atropos covers and no path at all for anything else.

Framer Motion sits inside React and animates component state and gestures declaratively. Atropos is framework-agnostic at its core, with React and Web Component builds layered on top, so a project that mixes a React app with a plain HTML marketing page can use the same effect in both. The cost is that Atropos does not participate in React's render model the way Framer Motion does, and the README does not describe how the React build reconciles with the core.

If the tilt effect is the only animation on the page, Atropos is the smaller dependency. If you already ship GSAP or Framer Motion, adding a second animation library to reproduce one effect is harder to justify than writing the transform yourself.

Maintenance, releases and the MIT licence

The repository is not archived, and the last push was on 2026-05-20. The latest listed release is v2.0.2 from 2023-07-04, so there is a gap between the tagged version and the state of master that the repository does not explain. The CHANGELOG.md file exists in the repository root and the package.json exposes an npm run changelog script that runs conventional-changelog against it, so release notes are generated from commit history rather than written by hand. Upgrade cost therefore depends on reading that file, not on any migration guide, because the README does not provide one.

The licence is MIT, stated in package.json and present as a LICENSE file in the repository root. MIT permits commercial use and modification with the copyright notice retained, and it offers no patent grant. That is a permissive default, but it is not legal advice; if your organisation has a policy on patent language or attribution, read the LICENSE file and decide there.

The dependency surface for consumers is small: the README points production users at the JS and CSS in package/, so you are shipping the built output rather than the Babel toolchain. The devDependencies in package.json, including Babel and the build scripts, are only needed if you build Atropos yourself.

Editorial conclusion

Adopt Atropos if you need a small MIT-licensed effect layer for card grids, portfolio tiles or product galleries and you are willing to read the project site because the README does not document the runtime. Do not adopt it if you need a documented upgrade path, a published release newer than v2.0.2, or a component whose full API is visible in the repository README. Before committing, open the playground/core, playground/react and playground/element demos, confirm the package/ output matches your bundler, and check whether the current build still matches the v2.0.2 release before you pin a version.

Frequently asked questions

Official sources

1. License: MIT
2. nolimits4web/atropos on GitHub
3. Project website
4. README
5. Releases