Paralaje — logic2b/ui

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>
  )
}

Instalación

npx logic2b@next add parallax

¿Trabajas con un asistente de IA? Copia este prompt en Claude Code, Cursor o Copilot: incluye los pasos de instalación, una alternativa sin CLI y una lista de verificación.

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.

Copia el contenido en 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 }

Uso

Asigna una altura al contenedor y coloca dentro una imagen sobredimensionada con object-cover, o un gradiente. La capa interior se desplaza mientras la sección atraviesa el 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>

Cómo funciona

El desplazamiento se basa por completo en animaciones CSS vinculadas al scroll mediante animation-timeline: view(). No hay JavaScript en la ruta de desplazamiento ni nada que limitar. La capa es intencionadamente más alta que el contenedor —range a cada lado— para que el movimiento no descubra un borde, y el contenedor la recorta con overflow-hidden.

Mejora progresiva

La animación vive dentro de @supports (animation-timeline: view()). Los navegadores sin soporte muestran la capa estática: el contenido siempre es visible y el movimiento es una mejora. También respeta prefers-reduced-motion y mantiene la capa inmóvil para quienes solicitan menos movimiento.

Playground interactivo

Edita las propiedades del componente y revisa el JSX exacto antes de copiarlo. La vista previa se carga solo cuando esta sección entra en pantalla.

JSX generado

<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>

Referencia de API

Generada a partir de las exportaciones públicas de TypeScript en src/ui/parallax.tsx. Las descripciones técnicas conservan el texto canónico del código fuente.

Ver JSON

ParallaxProps

Tipo

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

Parallax

Componente

Props: ParallaxProps

Propiedad	Tipo	Obligatoria	Valor predeterminado	Descripción
`range`	`string`	No	`"12%"`	How far the layer drifts, any CSS length/percentage. Default `"12%"`.

Contrato de accesibilidad

Comportamiento legible por máquinas y responsabilidades de quien integra parallax. Los detalles normativos conservan el texto canónico del registro.

Ver JSON

Soporte: Contrato de composición
Patrón: decorative parallax; Motion scroll transforms

Semántica incorporada

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

Responsabilidades de integración

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

Limitaciones conocidas

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