Parallax

Scroll ↓

Parallax

keep scrolling ↓

"use client"

import { Parallax } from "@/components/ui/parallax"

export default function ParallaxDemo() {
  return (
    <div
      aria-label="Parallax demo scroll area"
      className="h-80 w-full overflow-y-auto rounded-lg border bg-muted/20"
      tabIndex={0}
    >
      <div className="flex h-40 items-center justify-center text-sm text-muted-foreground">
        Scroll ↓
      </div>
      <Parallax range="16%" className="mx-4 h-56 rounded-xl border">
        <div className="from-primary/25 via-primary/10 to-background flex size-full items-center justify-center bg-gradient-to-br">
          <span className="font-heading text-2xl font-bold tracking-tight">
            Parallax
          </span>
        </div>
      </Parallax>
      <div className="flex h-64 items-start justify-center pt-6 text-sm text-muted-foreground">
        keep scrolling ↓
      </div>
    </div>
  )
}

Installation

npx logic2b@next add parallax

Working with an AI assistant? Copy this prompt into Claude Code, Cursor or Copilot — it carries the install steps, a no-CLI fallback and a verification checklist.

Add the "parallax" item from the logic2b ui registry (https://ui.logic2b.com) to this project. Follow every step and verify at the end.

## Steps

1. If the project has no `components.json` yet, set up logic2b ui first:

   ```bash
   npx logic2b@next init
   ```

2. Install the item (the CLI resolves registry dependencies automatically):

   ```bash
   npx logic2b@next add parallax
   ```

3. Install any npm dependencies the command prints.

## If the CLI is not available

Do it manually from the registry payload:

1. Fetch https://ui.logic2b.com/r/parallax.json.
2. Write every entry in `files[]` to its mapped project path (see below).
3. Repeat (recursively) for each name in `registryDependencies`.
4. Install every package listed in `dependencies` across those payloads.

## Registry reference

- Index of every item: https://ui.logic2b.com/r/index.json
- Item payload (full source): https://ui.logic2b.com/r/<name>.json
- Usage examples per item: https://ui.logic2b.com/r/demos/index.json → https://ui.logic2b.com/r/demos/<demo>.json
- Docs index for agents: https://ui.logic2b.com/llms.txt (full docs: https://ui.logic2b.com/llms-full.txt)
- Every docs page is Markdown when you append `.md` to its URL.

Registry file paths map to project paths like this:
- `ui/*` → `@/components/ui/*`
- `blocks/<name>/*` → `@/components/*`
- `charts/*` → `@/components/charts/*`
- `hooks/*` → `@/hooks/*`
- `lib/utils.ts` → `@/lib/utils.ts`
- `theme.css` → next to the project's Tailwind entry stylesheet

## Conventions (do not break these)

- Tailwind CSS v4 (CSS-first config; no tailwind.config.js needed) and React 19.
- All colors go through semantic tokens (`bg-primary`, `text-muted-foreground`,
  `border-border`, …). Never hardcode hex/oklch values in components.
- Dark mode is class-based: toggle `.dark` on `<html>`.
- Icons come from lucide-react.

## Verify before finishing

1. The dev server starts and the app renders without console errors.
2. TypeScript compiles (`tsc --noEmit` or the framework's check).
3. Components use the theme: a `<Button>` shows the primary token color,
   and toggling `.dark` on `<html>` switches the palette.

Copy into ui/parallax.tsx:

"use client"

import * as React from "react"

import { cn } from "@/lib/utils"

/**
 * A scroll-linked parallax layer for marketing sections: the inner layer drifts
 * as the section passes through the viewport, driven entirely by CSS
 * scroll-driven animations (`animation-timeline: view()`). Zero JS on the scroll
 * path and zero runtime deps.
 *
 * Guarded by `@supports (animation-timeline: view())`, so browsers without
 * scroll-driven animations render the layer static — the content is always
 * visible, the motion is pure progressive enhancement.
 *
 * The container is position-relative with `overflow-clip`; give it a height
 * (e.g. `className="h-72"`). Put an oversized, `object-cover` image or a
 * gradient inside — the layer is intentionally taller than the container so the
 * drift never reveals an edge.
 */
const PARALLAX_CSS = `
@supports (animation-timeline: view()) {
  @keyframes l2b-parallax {
    from { transform: translateY(calc(var(--l2b-parallax-range, 12%) * -1)); }
    to { transform: translateY(var(--l2b-parallax-range, 12%)); }
  }
  [data-slot="parallax-layer"] {
    animation: l2b-parallax linear both;
    animation-timeline: view(block);
    will-change: transform;
  }
  @media (prefers-reduced-motion: reduce) {
    [data-slot="parallax-layer"] { animation: none; }
  }
}
`

export interface ParallaxProps extends React.ComponentProps<"div"> {
  /** How far the layer drifts, any CSS length/percentage. Default `"12%"`. */
  range?: string
}

function Parallax({ className, range = "12%", children, ...props }: ParallaxProps) {
  const layerStyle = {
    "--l2b-parallax-range": range,
    top: `calc(${range} * -1)`,
    bottom: `calc(${range} * -1)`,
  } as React.CSSProperties

  return (
    <div className={cn("relative overflow-clip", className)} {...props}>
      <style>{PARALLAX_CSS}</style>
      <div
        data-slot="parallax-layer"
        className="absolute inset-x-0"
        style={layerStyle}
      >
        {children}
      </div>
    </div>
  )
}

export { Parallax }

Usage

Give the container a height and put an oversized, object-cover image (or a gradient) inside. The inner layer drifts as the section passes through the viewport:

import { Parallax } from "@/components/ui/parallax"

<Parallax range="16%" className="h-72 rounded-xl">
  <img
    src="/hero.jpg"
    alt=""
    className="size-full object-cover"
  />
</Parallax>

How it works

The drift is driven entirely by CSS scroll-driven animations (animation-timeline: view()) — there is no JavaScript on the scroll path and nothing to throttle. The layer is intentionally taller than the container (by range on each side) so the movement never reveals an edge, and the container clips it with overflow-hidden.

Progressive enhancement

The animation lives inside @supports (animation-timeline: view()), so browsers that don’t support scroll-driven animations simply render the layer static — the content is always visible, the motion is a bonus. It also honors prefers-reduced-motion, holding the layer still for users who ask for less motion.

Live playground

Edit the component props and inspect the exact JSX before copying it. The preview loads only when this section enters the viewport.

Generated JSX

<Parallax
  range="12%"
  className="h-48 w-full max-w-lg rounded-xl border"
>
  <div
    className="flex h-full min-h-64 items-center justify-center bg-gradient-to-br from-primary/20 via-muted to-primary/5 text-sm font-medium"
  >Scroll-linked layer</div>
</Parallax>

API reference

Generated from the public TypeScript exports in src/ui/parallax.tsx.

View JSON

ParallaxProps

Type

interface ParallaxProps extends React.ComponentProps<"div"> { /** How far the layer drifts, any CSS length/percentage. Default `"12%"`. */ range?: string }

Component

Props: ParallaxProps

Prop	Type	Required	Default	Description
`range`	`string`	No	`"12%"`	How far the layer drifts, any CSS length/percentage. Default `"12%"`.

Accessibility contract

Machine-readable behavior and consumer responsibilities for parallax.

View JSON

Support: Composition contract
Pattern: decorative parallax; Motion scroll transforms

Built-in semantics

Preserves the semantics of the rendered layer; decorative layers can be hidden from assistive technology.

Consumer responsibilities

Use empty alt/aria-hidden for decorative imagery, retain a static layout and disable the transform for reduced-motion users.

Known limitations

• Parallax movement can cause vestibular discomfort unless reduced-motion preferences are honored.