Tap → Tap → Tap → Tap → Tap →
Tap → Tap → Tap → Tap → Tap →
+
;
diff --git a/site/src/scripts/landing.ts b/site/src/scripts/landing.ts
index 55321d0..e88e88e 100644
--- a/site/src/scripts/landing.ts
+++ b/site/src/scripts/landing.ts
@@ -20,8 +20,8 @@ function bezier(x1: number, y1: number, x2: number, y2: number) {
const timing = {
// Mass leaves the centre horizontally; a longer deceleration seats the root.
travel: bezier(.58, 0, .22, 1),
- // Curvature releases after travel has begun, rather than a simultaneous zoom.
- unroll: bezier(.55, 0, .3, 1),
+ // Typography accelerates along a fixed track, not a deforming circle.
+ release: bezier(.55, 0, .3, 1),
scale: bezier(.42, 0, .18, 1),
// The leading edge slows as it reaches a branch/node connection.
trace: bezier(.22, .3, .25, 1),
@@ -29,20 +29,12 @@ const timing = {
const mix = (a: number, b: number, value: number) => a + (b - a) * value;
// Scene 2 is an independent hover affordance. Playback begins at scene 3.
const playbackOffset = 620;
-const duration = 6200 - playbackOffset;
-// Preserve the arc length while reducing curvature. Unlike interpolating arbitrary
-// Bézier control points, this cannot fold or bunch the letters during unrolling.
-function unrolledOrbit(opening: number): string {
- const x = mix(-180, -150, opening);
- if (opening > .999) return `M${x} 0 H${x + 360 * Math.PI}`;
- const radius = 180 / (1 - opening);
- const tangent = mix(-Math.PI / 2, 0, opening);
- const point = (fraction: number) => {
- const angle = tangent + Math.PI * 2 * (1 - opening) * fraction;
- return `${x + radius * (Math.sin(angle) - Math.sin(tangent))} ${radius * (Math.cos(tangent) - Math.cos(angle))}`;
- };
- return `M${x} 0 A${radius} ${radius} 0 0 1 ${point(.5)} A${radius} ${radius} 0 0 1 ${point(1)}`;
-}
+const duration = 7500 - playbackOffset;
+const orbitRadius = 180;
+const circumference = 2 * Math.PI * orbitRadius;
+// The clockwise circle ends at its top, tangent to a rightward straight line.
+// Scene 4 feeds the text down this rail; the circle's geometry never changes.
+const circularTrack = 'M0 -180 A180 180 0 1 1 0 180 A180 180 0 1 1 0 -180';
export function initLanding() {
const element = document.querySelector