Counter

A number that counts to its value, with a label.

import { Background, Composition, Counter, Track } from "@cutcraft/kit";

// Counter: a number that counts to its value, then holds, with a label under it.
export default function Video() {
  return (
    <Composition fps={30} width={1920} height={1080}>
      <Track id="back" layout="free">
        <Background id="bg" start={0} duration={3} variant="gradient" />
      </Track>
      <Track id="over" layout="free">
        <Counter id="cups" start={0.2} duration={2.8} to={12400} suffix="+" label="cups poured this year" size={180} />
      </Track>
    </Composition>
  );
}

Props

Besides the timing props (start, anchor, at, offset, duration):

param	type	default
id	string
from	number	0
to	number
decimals	integer (0..4)	0
prefix	string	""
suffix	string	""
label	string
x	number	0
y	number	0
size	number	140
countFor	number	1.5

All components