Parallax

v1.1.0

bash

npm install @hua-labs/hua

tsx

import { Parallax } from "@hua-labs/ui/advanced";

direction="up"

direction="down"

direction="left"

direction="right"

✨

scale + opacity + rotate


`speed`	`number`	`0.5`	Parallax speed (0-1, 1 is fastest)
`direction`	`"up" \| "down" \| "left" \| "right"`	`"up"`	Movement direction
`offset`	`number`	`0`	Starting offset in pixels
`disabled`	`boolean`	`false`	Disable parallax effect
`scale`	`boolean`	`false`	Add scale effect based on scroll position
`opacity`	`boolean`	`false`	Add opacity effect based on scroll position
`rotate`	`boolean`	`false`	Add rotation effect based on scroll position
`rotateDirection`	`"cw" \| "ccw"`	`"cw"`	Rotation direction (clockwise or counter-clockwise)

docs:common.basicUsagetsx

import { Parallax } from '@hua-labs/ui/advanced';

<Parallax speed={0.3}>
  <div className="bg-gradient-blur" />
</Parallax>

docs:components.parallax.demo.differentDirectionstsx

<Parallax direction="up" speed={0.4}>
  <div>Moves up</div>
</Parallax>

<Parallax direction="down" speed={0.4}>
  <div>Moves down</div>
</Parallax>

docs:components.parallax.demo.withEffectstsx

<Parallax speed={0.5} scale opacity rotate>
  <div className="floating-card">✨</div>
</Parallax>

•Reduced Motion: Respects prefers-reduced-motion setting
•No Content Impact: Visual effect only, does not affect content accessibility