Early price: everything for $99, lifetime

Components

Blur Collage

Pro

Drag to rotate

Installation

ProRequires a Planes Pro license.
pnpm dlx shadcn add @useplanes/blur-collage

Works once the @useplanes registry is set up in your project (one-time). After that, copy and run commands directly.

Unlock with Planes Pro

$99 once · 170 Pro components · lifetime updates.

I have a licenseGet Pro
import { BlurCollage } from "@/components/ui/BlurCollage";

<BlurCollage
  images={[
    { src: "/trip/ferris-wheel.webp", alt: "Ferris wheel at golden hour" },
    { src: "/trip/phone-box.webp", alt: "Red phone box on a beach" },
    { src: "/trip/lifebuoy.webp", alt: "Lifebuoy on a ship's rail" },
    { src: "/trip/kitesurf.webp", alt: "Kitesurfer above rough water" },
    { src: "/trip/lighthouse.webp", alt: "Red lighthouse on a breakwater" },
    { src: "/trip/cove.webp", alt: "Boat anchored in a turquoise cove" },
  ]}
  count={5}
  period={72}
  interval={8000}
  depth={1}
/>

Use cases

  • Team page hero

    Put the office, the offsites and the people in one cluster that keeps slowly turning.

  • Trip or event recap

    A handful of photos that circle each other instead of sitting in a grid, with new ones fading in as old ones leave.

  • Portfolio intro

    Open with the work in focus, in pieces, before the case studies start.

  • Product moments

    Show how customers actually use the thing, a few frames at a time, beside your headline.