MotionScript

Polygram

A star polygon. Alternates outer and inner vertices to form a star shape. Lower ratio values produce sharper, more pointed stars.

0.0s / 4.0s

Usage

import { createScene, Polygram } from '@motion-script/core';

export default createScene(function* (stage) {
  // Classic 5-pointed star
  stage.add(
    <Polygram sides={5} ratio={0.4} width={400} height={400} fill="#F5C26B" />
  );

  // 6-pointed star with rounded points
  stage.add(
    <Polygram sides={6} ratio={0.5} width={400} height={400} fill="#E8617C" cornerRadius={8} />
  );

  // 8-pointed star with chamfered corners
  stage.add(
    <Polygram sides={8} ratio={0.6} width={400} height={400} fill="#6990DD" cornerRadius={12} cornerStyle="angled" />
  );
});

Props

PropTypeDefaultDescription
sidesnumber5Number of outer points. Must be ≥ 3
rationumber0.5Inner-to-outer radius ratio (0–1). Lower values = sharper points. At 1 the shape degenerates into a regular polygon
cornerRadiusnumber0Vertex rounding radius applied to both inner and outer vertices
cornerStyle'rounded' | 'angled''rounded'Vertex shape: circular arc ('rounded') or chamfer cut ('angled')

Animating

All props animate with .to(). Animate ratio to collapse points in or out, or sides to morph between star shapes:

import { createScene, Polygram, createRef, easeInOut } from '@motion-script/core';

export default createScene(function* (stage) {
  const star = createRef<Polygram>();

  stage.add(
    <Polygram ref={star} sides={5} ratio={0.4} width={400} height={400} fill="#F5C26B" />
  );

  // Collapse points inward
  yield* star().to({ ratio: 0.85 }, 1.0, easeInOut);

  // Push them back out
  yield* star().to({ ratio: 0.4 }, 1.0, easeInOut);
});

Notes

  • cornerStyle takes a single scalar (not the per-corner shorthand from Rect) because star vertices don't map to named corners.
  • ratio: 1 degenerates into a regular polygon identical to Polygon with the same number of sides.
  • The star is inscribed within the node's bounding rect, and outer vertices touch the rect edges.