Draw & Write

0.00s / 2.97s · F0

Draw

Progressively reveals the stroke of a shape using strokeDashoffset. Works best with stroke-based shapes such as Circle, Line, Arrow, Rect, and Polygon.

Props

Prop	Type	Description
duration	number	Length of the animation in frames
children	ReactNode	Stroke-based shapes to reveal

Example

<Draw duration={45}>
  <Circle cx={200} cy={150} r={60} stroke="#4f9eff" strokeWidth={3} fill="none" />
</Draw>

Write

Reveals text with a combined opacity and scale animation.

Props

Prop	Type	Description
duration	number	Length of the animation in frames
children	ReactNode	Text elements to reveal

Example

<Write duration={30}>
  <Text x={200} y={150} fontSize={24} fill="#fff">Hello</Text>
</Write>

Code Example

React

import { Player, Draw, Write, Circle, Rect, Text } from '@elucim/core';

<Player width={500} height={250} fps={30} durationInFrames={90}>
  <Draw duration={40}>
    <Circle cx={125} cy={125} r={60} stroke="#6c5ce7" strokeWidth={3} fill="none" />
  </Draw>
  <Write duration={30}>
    <Text x={125} y={130} fill="#6c5ce7" fontSize={16} textAnchor="middle">Draw</Text>
  </Write>
</Player>

DSL JSON

{
  "width": 500, "height": 250, "fps": 30, "durationInFrames": 90,
  "children": [
    {
      "type": "circle", "cx": 125, "cy": 125, "r": 60,
      "stroke": "#6c5ce7", "strokeWidth": 3, "fill": "none",
      "draw": { "duration": 40 }
    },
    {
      "type": "text", "x": 125, "y": 130, "content": "Draw",
      "fill": "#6c5ce7", "fontSize": 16, "textAnchor": "middle",
      "write": { "duration": 30 }
    }
  ]
}