Depth Parallax Words

Heroes 31

About

Words come forward from different depths with a 70ms stagger and real perspective, so a line arrives with dimension instead of flat. Respects prefers-reduced-motion.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Depth Parallax Words to your project and fits it to your theme.

Code

How Depth Parallax Words is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

"use client";

import Component from "@/components/ui/depth-parallax-words";

export default function DemoOne() {
  return (
    <div className="flex min-h-[700px] w-full items-center justify-center bg-background p-6">
      <div className="w-full max-w-xl rounded-3xl border bg-card p-12 shadow-sm">
        <p className="font-medium text-muted-foreground text-xs uppercase tracking-[0.18em]">
          Depth Parallax Words
        </p>

        <h2 className="mt-8 font-semibold text-4xl text-foreground leading-[1.12] tracking-tight">
          <Component>Words arrive at different depths</Component>
        </h2>

        <p className="mt-6 text-lg text-muted-foreground leading-relaxed">
          <Component delay={220}>Each word comes forward from its own distance, never a flat line.</Component>
        </p>

        <dl className="mt-10 divide-y border-t">
          <div className="flex items-baseline justify-between gap-6 py-4">
            <dt className="text-muted-foreground text-sm">duration</dt>
            <dd className="font-semibold text-foreground text-xl tracking-tight">
              <Component delay={440}>0.70s</Component>
            </dd>
          </div>
          <div className="flex items-baseline justify-between gap-6 py-4">
            <dt className="text-muted-foreground text-sm">word stagger</dt>
            <dd className="font-semibold text-foreground text-xl tracking-tight">
              <Component delay={560}>70ms</Component>
            </dd>
          </div>
          <div className="flex items-baseline justify-between gap-6 py-4">
            <dt className="text-muted-foreground text-sm">perspective</dt>
            <dd className="font-semibold text-foreground text-xl tracking-tight">
              <Component delay={680}>z depth</Component>
            </dd>
          </div>
        </dl>
      </div>
    </div>
  );
}