Image

The <Image> primitive embeds an external image (PNG, JPEG, SVG, WebP, or GIF) into your scene. It supports rounded corners, circular/elliptical clipping, and all the standard spatial and animation props.

0.00s / 3.97s · F0

Props

Prop	Type	Default	Description
`src`	`string`	—	Required. Image URL or data URI
`x`	`number`	—	Required. X coordinate of the top-left corner
`y`	`number`	—	Required. Y coordinate of the top-left corner
`width`	`number`	—	Required. Rendered width
`height`	`number`	—	Required. Rendered height
`preserveAspectRatio`	`string`	`'xMidYMid meet'`	SVG aspect-ratio keyword
`borderRadius`	`number`	`0`	Corner radius for rounded images
`clipShape`	`'none' \| 'circle' \| 'ellipse'`	`'none'`	Clip the image to a shape
`opacity`	`number`	`1`	Opacity from 0 to 1
`rotation`	`number`	`0`	Rotation in degrees
`rotationOrigin`	`[number, number]`	element center	Center point for rotation
`scale`	`number \| [number, number]`	`1`	Uniform or per-axis scale
`translate`	`[number, number]`	`[0, 0]`	Translation offset `[dx, dy]`
`fadeIn`	`number`	—	Fade in over N frames
`fadeOut`	`number`	—	Fade out over N frames
`zIndex`	`number`	`0`	Rendering order (higher = on top)

Code Examples

import { Player, Image } from '@elucim/core';

<Player width={500} height={300} fps={30} durationInFrames={60}>
  <Image src="/photo.png" x={100} y={50} width={300} height={200} />
</Player>

{
  "width": 500, "height": 300, "fps": 30, "durationInFrames": 60,
  "children": [
    {
      "type": "image", "src": "/photo.png",
      "x": 100, "y": 50, "width": 300, "height": 200
    }
  ]
}

Circular clip

<Image
  src="/avatar.png"
  x={200} y={100} width={100} height={100}
  clipShape="circle"
/>

Rounded corners

<Image
  src="/thumbnail.jpg"
  x={50} y={50} width={400} height={250}
  borderRadius={20}
/>

Rotated image

<Image
  src="/diagram.svg"
  x={100} y={50} width={200} height={200}
  rotation={15}
/>

Image with fade-in animation

<FadeIn duration={30}>
  <Image src="/hero.png" x={0} y={0} width={500} height={300} />
</FadeIn>