Pro

Cloth image

A picture printed on cloth and hung from a rod. Gusts of wind billow it toward you in slow folds that catch the light; resting the pointer presses into it, and you can take hold of it and pull.

Pro

pnpm dlx shadcn@latest add @caliper/cloth-image

Summer exhibition

Rest the pointer on the banner, or take hold of it and pull.

Installs components/ui/cloth-image.tsxDepends on @radix-ui/react-slot, lucide-reactMotion none in component source

When to use

Use it for

Exhibition, event and campaign banners.
A playful hero image for a brand or portfolio.

Skip it when

Pictures people need to read, such as charts or text-heavy posters.
Product imagery that must stay true to shape.

Decisions

Why it is built this way, so you know what to keep when you change your copy.

Behaviour

Three dimensions, one projection: The cloth moves in depth as well as across, and is drawn with a little perspective, so wind toward you reads as billowing rather than sliding.

Styling

Folds catch the light: Each panel is shaded by its angle to a light from the upper left, darker in folds and with a faint sheen where it faces the light.

Installation

terminal

pnpm dlx shadcn@latest add @caliper/cloth-image

Adds its 5 files to components/ui/, each with its own stylesheet, and installs their packages. Pro installs with your access token, set up once per project. See Pro access. The first part also adds Caliper UI’s tokens; import them once as in Installation.

Usage

Import it from your copy of the source. The example behind the preview comes with the source.

example.tsx

import { ClothImage } from "@/components/ui/cloth-image"

The worked example comes with Pro

The 23-line example behind the preview opens here, ready to copy.

576 Pro parts, blocks and page templates, all with source
$199 once, with a year of updates. What you have stays yours
A full refund within 14 days if it is not for you

Checking your licence…

API reference

ClothImage

component

Also accepts the native props of its root element and a ref.

PropTypeDefaultDescription

src *string—

alt *string—What the picture shows.

windnumber0.6Wind strength, 0 (still air) to 1 (a stiff breeze).

It exposes img semantics, with aria-label and aria-pressed kept in step with state.

No custom key handling; Tab and the native activation keys do the work.

Motion

It declares no animation in its component source. Any transition comes from its stylesheet, which uses the duration tokens that collapse to instant under prefers-reduced-motion.