Rect

The <Rect> primitive renders an SVG rectangle. It supports rounded corners, fill, stroke, and dashed outlines — useful for bounding boxes, containers, highlights, and background regions.

0.00s / 2.97s · F0

Props

Prop	Type	Default	Description
x	number	0	X coordinate of the top-left corner
y	number	0	Y coordinate of the top-left corner
width	number	0	Width of the rectangle
height	number	0	Height of the rectangle
fill	string	'none'	Fill color
stroke	string	'currentColor'	Stroke color
strokeWidth	number	1	Width of the stroke
rx	number	0	Corner radius for rounded rectangles
strokeDasharray	string	undefined	Dash pattern (e.g. "6 3")
opacity	number	1	Opacity from 0 to 1

Code Example

React

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

<Player width={500} height={300} fps={30} durationInFrames={60}>
  <FadeIn duration={20}>
    <Rect x={50} y={50} width={180} height={100} stroke="#6c5ce7" strokeWidth={2} fill="rgba(108,92,231,0.15)" rx={8} />
  </FadeIn>
  <FadeIn duration={20}>
    <Rect x={280} y={80} width={120} height={120} stroke="#ff6b6b" strokeWidth={2} fill="none" />
  </FadeIn>
</Player>

DSL (JSON)

{
  "width": 500, "height": 300, "fps": 30, "durationInFrames": 60,
  "children": [
    {
      "type": "rect", "x": 50, "y": 50, "width": 180, "height": 100,
      "stroke": "#6c5ce7", "strokeWidth": 2, "fill": "rgba(108,92,231,0.15)", "rx": 8,
      "fadeIn": { "duration": 20 }
    },
    {
      "type": "rect", "x": 280, "y": 80, "width": 120, "height": 120,
      "stroke": "#ff6b6b", "strokeWidth": 2, "fill": "none",
      "fadeIn": { "duration": 20 }
    }
  ]
}