ImagesCircle
Introduction
3D perspective image display component that simulates images moving toward the viewer from a distance. The center image “moves fastest” and appears largest and closest, while side images “move slower” and appear smaller and farther, creating a strong sense of spatial depth.
Component features:
- Realistic 3D perspective effects simulating depth space
- Center image largest and clearest, side images gradually smaller and blurred
- Smart 3D position calculation algorithm
- Support for multiple images in 3D arrangement (odd numbers only)
- Subtle rotation and opacity changes enhance depth perception
- Responsive design with mobile performance optimization
Important Note: The component only accepts an odd number of images (minimum 3) to ensure a clear center image. If an even number of images is provided, the component will display an error message.
Examples
Props
background
Background color setting.
---
import { getProductImage, ImagesCircle } from "@coffic/cosy-ui";
const images = [
{
src: getProductImage({ width: 200, height: 200, tag: "bg-none-1" }),
alt: "图片 1",
},
{
src: getProductImage({ width: 200, height: 200, tag: "bg-none-2" }),
alt: "图片 2",
},
{
src: getProductImage({ width: 200, height: 200, tag: "bg-none-3" }),
alt: "图片 3",
},
];
---
<ImagesCircle images={images} size="sm" spacing="sm" />
---
import { getProductImage, ImagesCircle } from "@coffic/cosy-ui";
const images = [
{
src: getProductImage({ width: 200, height: 200, tag: "bg-blue-1" }),
alt: "图片 1",
},
{
src: getProductImage({ width: 200, height: 200, tag: "bg-blue-2" }),
alt: "图片 2",
},
{
src: getProductImage({ width: 200, height: 200, tag: "bg-blue-3" }),
alt: "图片 3",
},
];
---
<ImagesCircle
images={images}
size="sm"
spacing="sm"
background="info/20"
class="cosy:p-8 cosy:rounded-xl"
/>
---
import { getProductImage, ImagesCircle } from "@coffic/cosy-ui";
const images = [
{
src: getProductImage({ width: 200, height: 200, tag: "bg-purple-1" }),
alt: "图片 1",
},
{
src: getProductImage({ width: 200, height: 200, tag: "bg-purple-2" }),
alt: "图片 2",
},
{
src: getProductImage({ width: 200, height: 200, tag: "bg-purple-3" }),
alt: "图片 3",
},
];
---
<ImagesCircle
images={images}
size="sm"
spacing="sm"
background="accent/20"
class="cosy:p-8 cosy:rounded-xl"
/>
class
Custom CSS class name for overriding default styles.
---
import { getProductImage, ImagesCircle } from "@coffic/cosy-ui";
const images = [
{
src: getProductImage({ width: 200, height: 200, tag: "class-default-1" }),
alt: "图片 1",
},
{
src: getProductImage({ width: 200, height: 200, tag: "class-default-2" }),
alt: "图片 2",
},
{
src: getProductImage({ width: 200, height: 200, tag: "class-default-3" }),
alt: "图片 3",
},
];
---
<ImagesCircle images={images} size="sm" spacing="sm" />
---
import { getProductImage, ImagesCircle } from "@coffic/cosy-ui";
const images = [
{
src: getProductImage({ width: 200, height: 200, tag: "class-border-1" }),
alt: "图片 1",
},
{
src: getProductImage({ width: 200, height: 200, tag: "class-border-2" }),
alt: "图片 2",
},
{
src: getProductImage({ width: 200, height: 200, tag: "class-border-3" }),
alt: "图片 3",
},
];
---
<ImagesCircle
images={images}
size="sm"
spacing="sm"
class="cosy:border-4 cosy:border-dashed cosy:border-blue-300 cosy:bg-blue-50 cosy:p-6 cosy:rounded-2xl"
/>
---
import { getProductImage, ImagesCircle } from "@coffic/cosy-ui";
const images = [
{
src: getProductImage({ width: 200, height: 200, tag: "class-gradient-1" }),
alt: "图片 1",
},
{
src: getProductImage({ width: 200, height: 200, tag: "class-gradient-2" }),
alt: "图片 2",
},
{
src: getProductImage({ width: 200, height: 200, tag: "class-gradient-3" }),
alt: "图片 3",
},
];
---
<ImagesCircle
images={images}
size="sm"
spacing="sm"
class="cosy:bg-gradient-to-r cosy:from-purple-400 cosy:via-pink-500 cosy:to-red-500 cosy:p-8 cosy:rounded-full"
/>
images
Array of image sources, supporting two types. Images are arranged from left to right, with the center position automatically becoming the focal point, displayed largest and clearest. Must provide an odd number of images (minimum 3).
---
import { getProductImage, ImagesCircle } from "@coffic/cosy-ui";
// 使用字符串 URL 的图片数组
const images = [
getProductImage({ width: 300, height: 300, tag: "watch-main" }),
getProductImage({ width: 250, height: 250, tag: "watch-band-1" }),
getProductImage({ width: 250, height: 250, tag: "watch-band-2" }),
getProductImage({ width: 250, height: 250, tag: "watch-band-3" }),
getProductImage({ width: 250, height: 250, tag: "watch-band-4" }),
];
---
<ImagesCircle images={images} size="md" shadow="lg" rounded="xl" spacing="xl" />
---
import { ImagesCircle } from "@coffic/cosy-ui";
import astroImage from "@/assets/astro.svg";
import backgroundImage from "@/assets/background.svg";
import bookImage from "@/assets/book.png";
import faviconImage from "@/assets/favicon.png";
// 从 assets 目录导入图片
import heroImage from "@/assets/hero.png";
// 使用导入的 ImageMetadata 对象的图片数组
const images = [
heroImage,
bookImage,
faviconImage,
astroImage,
backgroundImage,
];
---
<ImagesCircle images={images} size="md" shadow="lg" rounded="xl" spacing="xl" />
rounded
Image border radius, from no radius to fully circular.
---
import { getProductImage, ImagesCircle } from "@coffic/cosy-ui";
const images = [
{
src: getProductImage({ width: 150, height: 150, tag: "rounded-none-1" }),
alt: "图片 1",
},
{
src: getProductImage({ width: 150, height: 150, tag: "rounded-none-2" }),
alt: "图片 2",
},
{
src: getProductImage({ width: 150, height: 150, tag: "rounded-none-3" }),
alt: "图片 3",
},
];
---
<ImagesCircle images={images} size="sm" spacing="sm" rounded="none" />
---
import { getProductImage, ImagesCircle } from "@coffic/cosy-ui";
const images = [
{
src: getProductImage({ width: 150, height: 150, tag: "rounded-full-1" }),
alt: "图片 1",
},
{
src: getProductImage({ width: 150, height: 150, tag: "rounded-full-2" }),
alt: "图片 2",
},
{
src: getProductImage({ width: 150, height: 150, tag: "rounded-full-3" }),
alt: "图片 3",
},
];
---
<ImagesCircle images={images} size="sm" spacing="sm" rounded="full" />
shadow
Image shadow effect, enhancing depth and layering.
---
import { getProductImage, ImagesCircle } from "@coffic/cosy-ui";
const images = [
{
src: getProductImage({ width: 150, height: 150, tag: "shadow-none-1" }),
alt: "图片 1",
},
{
src: getProductImage({ width: 150, height: 150, tag: "shadow-none-2" }),
alt: "图片 2",
},
{
src: getProductImage({ width: 150, height: 150, tag: "shadow-none-3" }),
alt: "图片 3",
},
];
---
<ImagesCircle images={images} size="sm" spacing="sm" shadow="none" />
---
import { getProductImage, ImagesCircle } from "@coffic/cosy-ui";
const images = [
{
src: getProductImage({ width: 150, height: 150, tag: "shadow-xl-1" }),
alt: "图片 1",
},
{
src: getProductImage({ width: 150, height: 150, tag: "shadow-xl-2" }),
alt: "图片 2",
},
{
src: getProductImage({ width: 150, height: 150, tag: "shadow-xl-3" }),
alt: "图片 3",
},
];
---
<ImagesCircle images={images} size="sm" spacing="sm" shadow="xl" />
size
Component size, affecting image dimensions and overall circle size.
---
import { getProductImage, ImagesCircle } from "@coffic/cosy-ui";
const images = [
{
src: getProductImage({ width: 150, height: 150, tag: "size-sm-1" }),
alt: "图片 1",
},
{
src: getProductImage({ width: 150, height: 150, tag: "size-sm-2" }),
alt: "图片 2",
},
{
src: getProductImage({ width: 150, height: 150, tag: "size-sm-3" }),
alt: "图片 3",
},
];
---
<ImagesCircle images={images} size="sm" spacing="sm" />
---
import { getProductImage, ImagesCircle } from "@coffic/cosy-ui";
const images = [
{
src: getProductImage({ width: 180, height: 180, tag: "size-md-1" }),
alt: "图片 1",
},
{
src: getProductImage({ width: 180, height: 180, tag: "size-md-2" }),
alt: "图片 2",
},
{
src: getProductImage({ width: 180, height: 180, tag: "size-md-3" }),
alt: "图片 3",
},
];
---
<ImagesCircle images={images} size="md" spacing="md" />
---
import { getProductImage, ImagesCircle } from "@coffic/cosy-ui";
const images = [
{
src: getProductImage({ width: 240, height: 240, tag: "size-lg-1" }),
alt: "图片 1",
},
{
src: getProductImage({ width: 240, height: 240, tag: "size-lg-2" }),
alt: "图片 2",
},
{
src: getProductImage({ width: 240, height: 240, tag: "size-lg-3" }),
alt: "图片 3",
},
];
---
<ImagesCircle images={images} size="lg" spacing="lg" />
---
import { getProductImage, ImagesCircle } from "@coffic/cosy-ui";
const images = [
{
src: getProductImage({ width: 300, height: 300, tag: "size-xl-1" }),
alt: "图片 1",
},
{
src: getProductImage({ width: 300, height: 300, tag: "size-xl-2" }),
alt: "图片 2",
},
{
src: getProductImage({ width: 300, height: 300, tag: "size-xl-3" }),
alt: "图片 3",
},
];
---
<ImagesCircle images={images} size="xl" spacing="xl" />
spacing
Circle size (distance from images to center), controlling how tightly images are distributed.
---
import { getProductImage, ImagesCircle } from "@coffic/cosy-ui";
const images = [
{
src: getProductImage({ width: 120, height: 120, tag: "spacing-sm-1" }),
alt: "图片 1",
},
{
src: getProductImage({ width: 120, height: 120, tag: "spacing-sm-2" }),
alt: "图片 2",
},
{
src: getProductImage({ width: 120, height: 120, tag: "spacing-sm-3" }),
alt: "图片 3",
},
];
---
<ImagesCircle images={images} size="sm" spacing="sm" />
---
import { getProductImage, ImagesCircle } from "@coffic/cosy-ui";
const images = [
{
src: getProductImage({ width: 120, height: 120, tag: "spacing-xl-1" }),
alt: "图片 1",
},
{
src: getProductImage({ width: 120, height: 120, tag: "spacing-xl-2" }),
alt: "图片 2",
},
{
src: getProductImage({ width: 120, height: 120, tag: "spacing-xl-3" }),
alt: "图片 3",
},
];
---
<ImagesCircle images={images} size="sm" spacing="xl" />