💄 Add ScrollingText component and use it in StopAreaRepr component

Update DestinationPassages component to use it.

frontend/src/utils.tsx

@@ -1,4 +1,5 @@
-import { JSX } from 'solid-js';
+import { JSX, onMount, VoidComponent } from 'solid-js';
+import { timeline } from '@motionone/dom';
 
 import { Line } from './types';
 
@@ -129,3 +130,37 @@ export type PositionedPanel = {
 	// TODO: Should be PassagesPanelComponent ?
 	panel: JSX.Element;
 };
+
+
+export const ScrollingText: VoidComponent<{ height: number, width: number, content: string }> = (props) => {
+
+	let viewBoxRef: SVGSVGElement | undefined = undefined;
+	let textRef: SVGTextElement | undefined = undefined;
+
+	onMount(() => {
+		if (viewBoxRef !== undefined && textRef !== undefined) {
+			const overlap = textRef.getComputedTextLength() - viewBoxRef.viewBox.baseVal.width;
+			if (overlap > 0) {
+				timeline(
+					[
+						[textRef, { x: [-overlap] }, { duration: 5 }],
+						[textRef, { x: [0] }, { duration: 2 }],
+					],
+					{ repeat: Infinity },
+				);
+			}
+		}
+	});
+
+	return (
+		<svg ref={viewBoxRef} viewBox={`0 0 ${props.width} ${props.height}`}>
+			<text
+				ref={textRef}
+				x="0%" y="55%"
+				dominant-baseline="middle"
+				font-size={`${props.height}px`}>
+				{props.content}
+			</text>
+		</svg >
+	);
+}