Parallax Floating

Component 6

About

Layered elements that float at different speeds based on cursor position to create a parallax depth effect.

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

Code

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

Usage.tsx

import {
  FloatingElement,
  ParallaxFloating,
} from "@/components/ui/parallax-floating";

const symbols = [
  { char: "◈", cls: "left-[6%] top-[12%]", depth: 0.5, size: "text-4xl" },
  { char: "⬡", cls: "left-[28%] top-[30%]", depth: 1.5, size: "text-2xl" },
  { char: "◎", cls: "right-[18%] top-[18%]", depth: 2.5, size: "text-3xl" },
  { char: "◇", cls: "left-[12%] bottom-[22%]", depth: 2, size: "text-2xl" },
  { char: "△", cls: "right-[6%] bottom-[18%]", depth: 1, size: "text-4xl" },
  { char: "□", cls: "right-[38%] bottom-[38%]", depth: 3, size: "text-xl" },
  { char: "⬟", cls: "right-[10%] top-[45%]", depth: 1.8, size: "text-2xl" },
];

export default function ParallaxFloatingSymbols() {
  return (
    <div className="relative mx-auto flex min-h-50 w-full max-w-xl items-center justify-center overflow-hidden rounded-xl bg-muted/20">
      <ParallaxFloating sensitivity={1.5}>
        {symbols.map(({ char, cls, depth, size }) => (
          <FloatingElement className={cls} depth={depth} key={char}>
            <span className={`${size} select-none text-foreground/15`}>
              {char}
            </span>
          </FloatingElement>
        ))}
      </ParallaxFloating>
      <p className="relative z-10 text-center font-medium text-muted-foreground text-sm">
        Cursor drives each symbol at a unique depth
      </p>
    </div>
  );
}