src/song-274/Transect.tsx

@@ -69,18 +69,20 @@ export const Transect: React.FC<TransectProps> = ({ palette, audio, data }) => {
   const frame = useCurrentFrame();
   const { fps, width, height } = useVideoConfig();
   const projection = useMemo(() => (data ? projectGround(data.route) : null), [data]);
+  // The main road plus the east continuation. The paint runs into the latter
+  // after 東に続く; the camera and overview stay on the main road, so that run
+  // leaves the screen.
+  const paintRoute = useMemo(() => (data ? paintableRoute(data) : []), [data]);
+  // The dimmed road ahead includes the east continuation, so it shows all along.
   const fullRoad = useMemo(
-    () => (data && projection ? routePath(data.route, projection) : ""),
+    () => (projection && paintRoute.length > 1 ? routePath(paintRoute, projection) : ""),
-    [data, projection],
+    [paintRoute, projection],
   );
   const bounds = useMemo(
     () => (data && projection ? prefixBounds(data.route, projection) : []),
     [data, projection],
   );
   const kmAt = useMemo(() => (data ? monotoneCurve(progressKeyframes(data)) : null), [data]);
-  // The paint may run past the main road into the east continuation; the camera
-  // and overview stay on the main road, so that run leaves the screen.
-  const paintRoute = useMemo(() => (data ? paintableRoute(data) : []), [data]);
   const westRoad = useMemo(
     () =>
       data && projection && data.routeWest.length > 1

src/song-274/progress.ts

@@ -13,7 +13,7 @@ import type { RoutePoint, TransectData } from "./data";
 export type Keyframe = { t: number; km: number };
 
 /** How long the paint takes to run the east continuation once 東に続く starts. */
-export const EAST_RUN_S = 4;
+export const EAST_RUN_S = 75.0;
 
 /**
  * Pins, in time order: the start of the route at 0 s and each sung line's