That's it. Your site now has parallax cards.

npm install @caustics/parallax-cards

<script>
  import { ParallaxCards } from '@caustics/parallax-cards';
</script>

<ParallaxCards preset="subtle" />

npm install @caustics/parallax-cards

import { ParallaxCards } from '@caustics/parallax-cards/react';
return <ParallaxCards preset="subtle" />;

npm install @caustics/parallax-cards

import { mount } from '@caustics/parallax-cards';
mount(document.querySelector('#hero'), { preset: 'subtle' });

Sensible defaults. Documented types.

Prop

Type

Default

Description

preset

string

"subtle"

Named preset. Overrides individual props when set.

colors

string[]

undefined

Override palette. Accepts hex, hsl, or CSS custom properties.

reducedMotion

'pause' | 'static'

'pause'

Behavior when prefers-reduced-motion is active.

class

string

undefined

Additional CSS classes applied to the root element.

A zip. Everything else lives at caustics.dev.

caustics-parallax-cards/
├── svelte/     ParallaxCards.svelte · index.ts · types.ts
├── react/      ParallaxCards.tsx · index.ts · types.ts
├── vanilla/    parallax-cards.ts · compiled .js
├── docs/       README.md · API.md · CHANGELOG.md
├── LICENSE.md  Caustics Commercial License
└── package.json

Parallax Cards applies CSS perspective and rotateX/Y transforms based on cursor position. Child elements with data-depth attributes shift in-plane and pop out along Z at rates scaled by their depth, creating a layered parallax illusion in true 3D (transform-style: preserve-3d). An optional glare overlay tracks the cursor and brightens with tilt.

A single shared requestAnimationFrame loop drives every card and idles the moment they settle to rest; off-screen cards are skipped via IntersectionObserver, and only GPU-composited transforms are written — no layout thrash. Zero dependencies.

On touch devices, where hover-driven tilt is meaningless, cards degrade to a clean flat state by default. The DeviceOrientation API (gyroscope) is supported as an opt-in, gesture-gated fallback for motion on mobile. Respects prefers-reduced-motion.

Ships with vanilla, Svelte 5 (action + component), and React (hook + component) adapters, plus a zero-markup data-parallax auto-init path.

That's it. Your site now has parallax cards.

Sensible defaults. Documented types.

A zip. Everything else lives at caustics.dev.

Ready to ship?