Get everything for $99, lifetime

Components

Photo Planes

Pro
Ferris wheel against a blue sky at golden hour
Stingrays gliding through turquoise shallows
Stream running through a mossy forest
Kitesurfer skimming across the bay
Red phone booth under palm trees on a beach
Warm evening light over the coast

Installation

ProRequires a Planes Pro license.
npx shadcn add @useplanes/photo-planes

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 · 161 Pro components · lifetime updates.

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

<PhotoPlanes
  images={[
    { src: "/photos/one.webp", alt: "Backstage" },
    { src: "/photos/two.webp", alt: "Soundcheck" },
    { src: "/photos/three.webp", alt: "Crowd" },
  ]}
/>

Examples

Looping

Re-deal every six seconds, with a flatter, wider fan for a wide section. Autoplay shorter than the deal itself waits for the fan before re-dealing.

<PhotoPlanes images={images} autoplay={6000} tilt={4} spread={140} />

Use cases

  • Product gallery hero

    Screens or photos of a product dealt in on load and fanned behind the headline.

  • Event recap

    A handful of shots from a launch, tour, or conference that stack and spread as the section enters.

  • Feature carousel stand-in

    A small set of images where a row you can hover reads better than arrows.

  • Social clips

    Set autoplay and let it loop while you record the page.