feat: create simple number wheel remotion element

packages/docs/elements-sidebars.ts

@@ -18,6 +18,13 @@ const sidebars: SidebarsConfig = {
 			collapsed: false,
 			items: ['overlays/lower-third/index'],
 		},
+		{
+			type: 'category',
+			label: 'Text',
+			link: {type: 'doc', id: 'text/index'},
+			collapsed: false,
+			items: ['text/number-wheel/index'],
+		},
 	],
 };
 

packages/docs/elements/text/index.mdx

@@ -0,0 +1,10 @@
+---
+title: Text
+description: Animated text and number Elements for Remotion videos.
+---
+
+# Text
+
+Elements:
+
+- [Number wheel](/elements/text/number-wheel/)

packages/docs/elements/text/number-wheel/index.mdx

@@ -0,0 +1,95 @@
+---
+title: Number wheel
+description: A simple animated count-up that rolls a number from a start to an end value.
+---
+
+import {ElementPage} from '@site/src/components/Elements/ElementPage';
+import {
+	NumberWheel,
+	durationInFrames,
+	fps,
+	height,
+	width,
+} from './number-wheel';
+
+# Number wheel
+
+A simple animated count-up that smoothly rolls a number from a start value to an end value.
+
+<ElementPage
+	component={NumberWheel}
+	durationInFrames={durationInFrames}
+	fps={fps}
+	height={height}
+	width={width}
+>
+
+```tsx twoslash title="number-wheel.tsx"
+import React from 'react';
+import {
+	AbsoluteFill,
+	Composition,
+	Easing,
+	interpolate,
+	useCurrentFrame,
+	useVideoConfig,
+} from 'remotion';
+
+export const width = 1920;
+export const height = 1080;
+export const fps = 30;
+export const durationInFrames = 120;
+
+const FROM = 0;
+const TO = 24813;
+
+export const NumberWheel: React.FC = () => {
+	const frame = useCurrentFrame();
+	const {durationInFrames: total} = useVideoConfig();
+
+	const progress = interpolate(frame, [0, total * 0.8], [0, 1], {
+		extrapolateLeft: 'clamp',
+		extrapolateRight: 'clamp',
+		easing: Easing.inOut(Easing.cubic),
+	});
+
+	const current = Math.round(FROM + progress * (TO - FROM));
+
+	return (
+		<AbsoluteFill
+			style={{
+				alignItems: 'center',
+				justifyContent: 'center',
+				fontFamily: 'Inter, system-ui, sans-serif'
+			}}
+		>
+			<div
+				style={{
+					fontSize: 220,
+					fontWeight: 800,
+					color: '#171717',
+					fontVariantNumeric: 'tabular-nums',
+				}}
+			>
+				{current.toLocaleString('en-US')}
+			</div>
+		</AbsoluteFill>
+	);
+};
+
+export const RemotionRoot: React.FC = () => {
+	return (
+		<Composition
+			id="NumberWheel"
+			component={NumberWheel}
+			durationInFrames={durationInFrames}
+			fps={fps}
+			height={height}
+			width={width}
+		/>
+	);
+};
+
+```
+
+</ElementPage>

packages/docs/elements/text/number-wheel/number-wheel.tsx

@@ -0,0 +1,64 @@
+import React from 'react';
+import {
+	AbsoluteFill,
+	Composition,
+	Easing,
+	interpolate,
+	useCurrentFrame,
+	useVideoConfig,
+} from 'remotion';
+
+export const width = 1920;
+export const height = 1080;
+export const fps = 30;
+export const durationInFrames = 120;
+
+const FROM = 0;
+const TO = 24813;
+
+export const NumberWheel: React.FC = () => {
+	const frame = useCurrentFrame();
+	const {durationInFrames: total} = useVideoConfig();
+
+	const progress = interpolate(frame, [0, total * 0.8], [0, 1], {
+		extrapolateLeft: 'clamp',
+		extrapolateRight: 'clamp',
+		easing: Easing.inOut(Easing.cubic),
+	});
+
+	const current = Math.round(FROM + progress * (TO - FROM));
+
+	return (
+		<AbsoluteFill
+			style={{
+				alignItems: 'center',
+				justifyContent: 'center',
+				fontFamily: 'Inter, system-ui, sans-serif'
+			}}
+		>
+			<div
+				style={{
+					fontSize: 220,
+					fontWeight: 800,
+					color: '#171717',
+					fontVariantNumeric: 'tabular-nums',
+				}}
+			>
+				{current.toLocaleString('en-US')}
+			</div>
+		</AbsoluteFill>
+	);
+};
+
+export const RemotionRoot: React.FC = () => {
+	return (
+		<Composition
+			id="NumberWheel"
+			component={NumberWheel}
+			durationInFrames={durationInFrames}
+			fps={fps}
+			height={height}
+			width={width}
+		/>
+	);
+};