@fjader/svelte 0.2.4 → 0.2.5

package/dist/components/rendering/Areas.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { activityReads, colorActivityWGSL } from './activity-reads';
+	import { activityReads, connectedActivityWGSL } from './activity-reads';
 	import { UNIFORM_BYTES } from './uniform-sizes';
 	import { getContext, onMount, onDestroy } from 'svelte';
 	import { RendererHost } from './RendererHost.svelte';
@@ -38,7 +38,10 @@
 		DOT_RADIUS: 36, // f32
 		SHOW_BOTTOM_DOTS: 40, // u32 (0 or 1)
 		FULL_DOMAIN_SPAN: 44, // f32
-		GROUP_INDEX: 48 // u32
+		GROUP_INDEX: 48, // u32
+		ACTIVITY_SERIES_MODE: 52, // u32
+		ACTIVITY_SERIES_SCALE_INDEX: 56, // u32
+		ENTRANCE_AXIS: 60 // u32 (0 fades, 1 grows along x, 2 along y)
 	};
 
 	interface Props {
@@ -60,8 +63,20 @@
 		colorScaleIndex?: number;
 		/** The page-wide index of this mark's filter group: which run of a field's activity block it reads. */
 		groupIndex?: number;
+		/**
+		 * The series scale selection activity is also read through, from
+		 * `seriesData`: mode 1 and its index when the mark groups by a `z` of
+		 * its own, mode 0 (no read) otherwise. MarkSeries decides.
+		 */
+		activitySeriesMode?: number;
+		activitySeriesScaleIndex?: number;
 		constantColor?: [number, number, number, number];
 		markId?: string;
+		/**
+		 * Whether the area grows from 0 along its measure axis when its chart
+		 * enters. False fades it in, for a band with bounds of its own.
+		 */
+		grow?: boolean;
 	}
 
 	let {
@@ -82,8 +97,11 @@
 		colorMode = 0,
 		colorScaleIndex = 0,
 		groupIndex = 0,
+		activitySeriesMode = 0,
+		activitySeriesScaleIndex = 0,
 		constantColor = DEFAULT_FILL_COLOR,
-		markId = ''
+		markId = '',
+		grow = false
 	}: Props = $props();
 
 	const chartContext = getContext<ChartContext>('chart');
@@ -152,9 +170,11 @@
     showBottomDots: u32,
     fullDomainSpan: f32,
     groupIndex: u32, // Page-wide filter group index, for activity reads
-    _pad0: u32,
-    _pad1: u32,
-    _pad2: u32
+    // The series scale selection activity is also read through, for a z of
+    // its own; mode 0 reads nothing.
+    activitySeriesMode: u32,
+    activitySeriesScaleIndex: u32,
+    entranceAxis: u32 // 0 fades in, 1 grows along x, 2 along y
   };
   @group(1) @binding(5) var<uniform> markConstants: MarkConstants;
 
@@ -186,6 +206,12 @@
     }
   }
 
+  // A point projected to pixels as it is during the chart's entrance: pulled
+  // toward 0 on the measure axis while the area grows.
+  fn enterPx(p: vec2<f32>) -> vec2<f32> {
+    return entrancePosition(projectToPixels(p), markConstants.entranceAxis);
+  }
+
   const DISCARD_POS = vec4<f32>(2.0, 2.0, 2.0, 1.0);
 
   @vertex
@@ -220,7 +246,7 @@
         output.position = DISCARD_POS;
         return output;
       }
-      let center = projectToPixels(makePoint(dim, boundary));
+      let center = enterPx(makePoint(dim, boundary));
 
       var circleR: f32;
       if (markConstants.dotRadius < 0.0) {
@@ -254,9 +280,11 @@
       var output: VertexOutput;
       output.position = pixelsToClip(pos);
       output.colorValue = colorValues[instanceIdx];
-      output.alpha = selectionDim(
-        ${colorActivityWGSL(ACTIVITY_READS, {
+      output.alpha = entranceAlpha(markConstants.entranceAxis) * selectionDim(
+        ${connectedActivityWGSL(ACTIVITY_READS, {
 					color: 'markConstants.colorMode, markConstants.colorScaleIndex, colorValues[instanceIdx]',
+					series:
+						'markConstants.activitySeriesMode, markConstants.activitySeriesScaleIndex, seriesValues[instanceIdx]',
 					group: 'markConstants.groupIndex'
 				})}
       );
@@ -304,10 +332,10 @@
     }
 
     // Project segment endpoints for adaptive resolution
-    let topPxCurr = projectToPixels(makePoint(dimCurr, topCurr));
-    let topPxNext = projectToPixels(makePoint(dimNext, topNext));
-    let botPxCurr = projectToPixels(makePoint(dimCurr, botCurr));
-    let botPxNext = projectToPixels(makePoint(dimNext, botNext));
+    let topPxCurr = enterPx(makePoint(dimCurr, topCurr));
+    let topPxNext = enterPx(makePoint(dimNext, topNext));
+    let botPxCurr = enterPx(makePoint(dimCurr, botCurr));
+    let botPxNext = enterPx(makePoint(dimNext, botNext));
 
     // Adaptive sub-segment resolution: more segments for longer pixel spans.
     // Use the longer of top/bottom chord for resolution calculation.
@@ -336,10 +364,10 @@
     let dimPrev = dimValues[prevIdx];
     let dimAfter = dimValues[afterIdx];
 
-    let topPxPrev = projectToPixels(makePoint(dimPrev, topValues[prevIdx]));
-    let topPxAfter = projectToPixels(makePoint(dimAfter, topValues[afterIdx]));
-    let botPxPrev = projectToPixels(makePoint(dimPrev, bottomValues[prevIdx]));
-    let botPxAfter = projectToPixels(makePoint(dimAfter, bottomValues[afterIdx]));
+    let topPxPrev = enterPx(makePoint(dimPrev, topValues[prevIdx]));
+    let topPxAfter = enterPx(makePoint(dimAfter, topValues[afterIdx]));
+    let botPxPrev = enterPx(makePoint(dimPrev, bottomValues[prevIdx]));
+    let botPxAfter = enterPx(makePoint(dimAfter, bottomValues[afterIdx]));
 
     // Compute t for this vertex from effective resolution (not geometry buffer)
     let subSegSize = 1.0 / f32(effectiveRes);
@@ -359,9 +387,11 @@
     var output: VertexOutput;
     output.position = pixelsToClip(finalPos);
     output.colorValue = colorValues[currIdx];
-    output.alpha = markConstants.fillOpacity * selectionDim(
-      ${colorActivityWGSL(ACTIVITY_READS, {
+    output.alpha = markConstants.fillOpacity * entranceAlpha(markConstants.entranceAxis) * selectionDim(
+      ${connectedActivityWGSL(ACTIVITY_READS, {
 				color: 'markConstants.colorMode, markConstants.colorScaleIndex, colorValues[currIdx]',
+				series:
+					'markConstants.activitySeriesMode, markConstants.activitySeriesScaleIndex, seriesValues[currIdx]',
 				group: 'markConstants.groupIndex'
 			})}
     );
@@ -471,7 +501,15 @@
 			view.setUint32(UNIFORM_OFFSETS.COLOR_MODE, colorMode, LE);
 			view.setUint32(UNIFORM_OFFSETS.COLOR_SCALE_INDEX, colorScaleIndex, LE);
 			view.setUint32(UNIFORM_OFFSETS.GROUP_INDEX, groupIndex, LE);
+			view.setUint32(UNIFORM_OFFSETS.ACTIVITY_SERIES_MODE, activitySeriesMode, LE);
+			view.setUint32(UNIFORM_OFFSETS.ACTIVITY_SERIES_SCALE_INDEX, activitySeriesScaleIndex, LE);
 			view.setUint32(UNIFORM_OFFSETS.ORIENTATION, orientation === 'horizontal' ? 1 : 0, LE);
+			// Grows along the boundary axis: y for a vertical area, x for a horizontal one.
+			view.setUint32(
+				UNIFORM_OFFSETS.ENTRANCE_AXIS,
+				grow ? (orientation === 'horizontal' ? 1 : 2) : 0,
+				LE
+			);
 			view.setFloat32(UNIFORM_OFFSETS.CONSTANT_COLOR + 0, constantColor[0], LE);
 			view.setFloat32(UNIFORM_OFFSETS.CONSTANT_COLOR + 4, constantColor[1], LE);
 			view.setFloat32(UNIFORM_OFFSETS.CONSTANT_COLOR + 8, constantColor[2], LE);

package/dist/components/rendering/Areas.svelte.d.ts

@@ -18,8 +18,20 @@ interface Props {
     colorScaleIndex?: number;
     /** The page-wide index of this mark's filter group: which run of a field's activity block it reads. */
     groupIndex?: number;
+    /**
+     * The series scale selection activity is also read through, from
+     * `seriesData`: mode 1 and its index when the mark groups by a `z` of
+     * its own, mode 0 (no read) otherwise. MarkSeries decides.
+     */
+    activitySeriesMode?: number;
+    activitySeriesScaleIndex?: number;
     constantColor?: [number, number, number, number];
     markId?: string;
+    /**
+     * Whether the area grows from 0 along its measure axis when its chart
+     * enters. False fades it in, for a band with bounds of its own.
+     */
+    grow?: boolean;
 }
 declare const Areas: import("svelte").Component<Props, {}, "">;
 type Areas = ReturnType<typeof Areas>;

package/dist/components/rendering/BaseGPURenderer.svelte.d.ts

@@ -59,7 +59,7 @@ export declare class BaseGPURenderer {
      */
     writeMorphed(bandAxis: 'x' | 'y', bandIds: ArrayLike<number>, channels: readonly (readonly [number, AllowSharedBufferSource])[], 
     /** Bindings that land at once rather than travel (see MorphedChannels.write). */
-    land?: readonly number[]): void;
+    land?: readonly number[] | 'all'): void;
     /**
      * Write data to a uniform binding.
      */

package/dist/components/rendering/Dots.svelte

@@ -43,6 +43,12 @@
 		alphaData: Float32Array | null;
 		facetData?: Float32Array | null;
 		dataVersion: number;
+		/**
+		 * The data version whose first write lands without morphing, or 0: a
+		 * catch-up result (MarkLifecycleV2.landsFor). Later writes of that version
+		 * animate as usual.
+		 */
+		landsFor?: number;
 		zIndex?: number;
 		colorMode?: number;
 		colorScaleIndex?: number;
@@ -74,6 +80,7 @@
 		alphaData,
 		facetData = null,
 		dataVersion,
+		landsFor = 0,
 		zIndex = 0,
 		colorMode = 0,
 		colorScaleIndex = 0,
@@ -188,7 +195,7 @@
       output.colorValue = colorValue;
       output.uv = quadPosition;
       output.radius = displayRadius;
-      output.alpha = alpha * selectionDim(
+      output.alpha = alpha * entranceAlpha(0u) * selectionDim(
         ${markActivityWGSL(ACTIVITY_READS, {
 					color: 'markConstants.colorMode, markConstants.colorScaleIndex, colorValue',
 					x: 'x',
@@ -260,6 +267,18 @@
 
 	// --- WRITING EFFECTS ---
 
+	// Whether this write lands: the first of the catch-up's data version
+	// (landsFor). Plain, not $state: only the write effect reads and sets it.
+	// Assumes a catch-up result is ONE morph write: should it ever take two
+	// (values, then band ids after the instant layout), the second springs.
+	// A morph SPRING right after a morph snap on a return points here.
+	let lastMorphedVersion = -1;
+	function landsNow(): boolean {
+		const first = dataVersion !== lastMorphedVersion;
+		lastMorphedVersion = dataVersion;
+		return first && landsFor !== 0 && landsFor === dataVersion;
+	}
+
 	// The measure axis's single channel morphs, as ONE write per data update,
 	// so one update starts one transition. The band's ids go with it: they are
 	// how a row set that is not the one being animated gets noticed and snapped.
@@ -269,8 +288,9 @@
 	// design question rather than a consequence of this one.
 	$effect(() => {
 		if (!renderer?.resourcesCreated || !bandAxis) return;
-		if (bandAxis === 'x') renderer.writeMorphed('x', xData, [[BINDINGS.Y, yData]]);
-		else renderer.writeMorphed('y', yData, [[BINDINGS.X, xData]]);
+		const land = landsNow() ? 'all' : undefined;
+		if (bandAxis === 'x') renderer.writeMorphed('x', xData, [[BINDINGS.Y, yData]], land);
+		else renderer.writeMorphed('y', yData, [[BINDINGS.X, xData]], land);
 	});
 	$effect(() => {
 		if (renderer?.resourcesCreated && !morphX) renderer.writeAttribute(BINDINGS.X, xData);

package/dist/components/rendering/Dots.svelte.d.ts

@@ -6,6 +6,12 @@ interface Props {
     alphaData: Float32Array | null;
     facetData?: Float32Array | null;
     dataVersion: number;
+    /**
+     * The data version whose first write lands without morphing, or 0: a
+     * catch-up result (MarkLifecycleV2.landsFor). Later writes of that version
+     * animate as usual.
+     */
+    landsFor?: number;
     zIndex?: number;
     colorMode?: number;
     colorScaleIndex?: number;

package/dist/components/rendering/GridLine.svelte

@@ -44,6 +44,11 @@
 		 * way a bar's height is. Omitted, every line is fully drawn.
 		 */
 		alpha?: Float32Array | null;
+		/**
+		 * The band layout whose first opacity write lands without morphing, or 0
+		 * (a layout that landed at once; see BandScaleState.slotsLandedLayout).
+		 */
+		landsFor?: number;
 		/** The band axis these lines belong to, when `alpha` should morph. */
 		bandAxis?: 'x' | 'y' | null;
 		color?: [number, number, number, number];
@@ -55,6 +60,7 @@
 		axis,
 		positions,
 		alpha = null,
+		landsFor = 0,
 		bandAxis = null,
 		color = [0.8, 0.8, 0.8, 0.3],
 		lineWidth = 1,
@@ -175,9 +181,15 @@ ${placement}
 	// the positions are that id list — which is what writeMorphed checks rows
 	// against.
 	const morphs = $derived(!!bandAxis && !!alpha && alpha.length === positions?.length);
+	// The landed layout last written; plain, read and set by the write alone.
+	let lastLandedLayout = 0;
 	$effect(() => {
 		if (!renderer?.resourcesCreated || !morphs) return;
-		renderer.writeMorphed(bandAxis!, positions, [[BINDINGS.ALPHA, alpha!]]);
+		// Only the first write after that layout lands: the opacity it changed.
+		const first = landsFor !== lastLandedLayout;
+		lastLandedLayout = landsFor;
+		const land = first && landsFor !== 0 ? 'all' : undefined;
+		renderer.writeMorphed(bandAxis!, positions, [[BINDINGS.ALPHA, alpha!]], land);
 	});
 
 	// Otherwise every line is fully drawn. Keyed on the line COUNT alone, because

package/dist/components/rendering/GridLine.svelte.d.ts

@@ -9,6 +9,11 @@ interface Props {
      * way a bar's height is. Omitted, every line is fully drawn.
      */
     alpha?: Float32Array | null;
+    /**
+     * The band layout whose first opacity write lands without morphing, or 0
+     * (a layout that landed at once; see BandScaleState.slotsLandedLayout).
+     */
+    landsFor?: number;
     /** The band axis these lines belong to, when `alpha` should morph. */
     bandAxis?: 'x' | 'y' | null;
     color?: [number, number, number, number];

package/dist/components/rendering/Lines.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { activityReads, colorActivityWGSL } from './activity-reads';
+	import { activityReads, connectedActivityWGSL } from './activity-reads';
 	import { UNIFORM_BYTES } from './uniform-sizes';
 	import { getContext, onMount, onDestroy } from 'svelte';
 	import { RendererHost } from './RendererHost.svelte';
@@ -38,7 +38,10 @@
 		GLOBAL_ALPHA: 36, // f32
 		GROUP_INDEX: 40, // u32
 		ACTIVITY_COLOR_MODE: 44, // u32
-		ACTIVITY_COLOR_SCALE_INDEX: 48 // u32
+		ACTIVITY_COLOR_SCALE_INDEX: 48, // u32
+		ACTIVITY_SERIES_MODE: 52, // u32
+		ACTIVITY_SERIES_SCALE_INDEX: 56, // u32
+		ENTRANCE_AXIS: 60 // u32 (0 fades, 1 grows along x, 2 along y)
 	};
 
 	interface Props {
@@ -63,11 +66,23 @@
 		 */
 		activityColorMode?: number | null;
 		activityColorScaleIndex?: number | null;
+		/**
+		 * The series scale selection activity is also read through, from
+		 * `seriesData`: mode 1 and its index when the mark groups by a `z` of
+		 * its own, mode 0 (no read) otherwise. MarkSeries decides.
+		 */
+		activitySeriesMode?: number;
+		activitySeriesScaleIndex?: number;
 		constantColor?: [number, number, number, number];
 		m4Decimator?: M4Decimator | null;
 		dotsRung?: import('../../lod/DotsRung.svelte').DotsRung | null;
 		globalAlpha?: number;
 		markId?: string;
+		/**
+		 * The axis this line grows along when its chart enters, or null to fade
+		 * in. A line mark fades; an area's outline grows with its fill.
+		 */
+		grow?: 'x' | 'y' | null;
 	}
 
 	let {
@@ -86,11 +101,14 @@
 		groupIndex = 0,
 		activityColorMode = null,
 		activityColorScaleIndex = null,
+		activitySeriesMode = 0,
+		activitySeriesScaleIndex = 0,
 		constantColor = DEFAULT_STROKE_COLOR,
 		m4Decimator = null,
 		dotsRung = null,
 		globalAlpha = 1.0,
-		markId = ''
+		markId = '',
+		grow = null
 	}: Props = $props();
 
 	const chartContext = getContext<ChartContext>('chart');
@@ -164,10 +182,20 @@
     // own colour by default; an area's outline, drawn in a constant stroke,
     // reads its fill's so it dims with the fill.
     activityColorMode: u32,
-    activityColorScaleIndex: u32
+    activityColorScaleIndex: u32,
+    // The series scale it is also read through, for a z of its own; mode 0
+    // reads nothing.
+    activitySeriesMode: u32,
+    activitySeriesScaleIndex: u32,
+    entranceAxis: u32 // 0 fades in, 1 grows along x, 2 along y
   };
   @group(1) @binding(4) var<uniform> markConstants: MarkConstants;
 
+  // A point projected to pixels as it is during the chart's entrance.
+  fn enterPx(p: vec2<f32>) -> vec2<f32> {
+    return entrancePosition(projectToPixels(p), markConstants.entranceAxis);
+  }
+
   struct VertexOutput {
     @builtin(position) position: vec4<f32>,
     @location(0) colorValue: f32,
@@ -211,7 +239,7 @@
         output.position = DISCARD_POS;
         return output;
       }
-      let center = projectToPixels(vec2<f32>(x, y));
+      let center = enterPx(vec2<f32>(x, y));
 
       // JS computes dotRadius via DotsRung. 0 = no dots. >0 = show at this size.
       let circleR = select(halfWidth, markConstants.dotRadius * frameUniforms.devicePixelRatio,
@@ -221,10 +249,12 @@
       var output: VertexOutput;
       output.position = pixelsToClip(pos);
       output.colorValue = colorValues[instanceIdx];
-      output.alpha = markConstants.globalAlpha * selectionDim(
-        ${colorActivityWGSL(ACTIVITY_READS, {
+      output.alpha = markConstants.globalAlpha * entranceAlpha(markConstants.entranceAxis) * selectionDim(
+        ${connectedActivityWGSL(ACTIVITY_READS, {
 					color:
 						'markConstants.activityColorMode, markConstants.activityColorScaleIndex, colorValues[instanceIdx]',
+					series:
+						'markConstants.activitySeriesMode, markConstants.activitySeriesScaleIndex, seriesValues[instanceIdx]',
 					group: 'markConstants.groupIndex'
 				})}
       );
@@ -258,8 +288,8 @@
     }
 
     // Project segment endpoints to pixel space
-    let pCurr = projectToPixels(vec2<f32>(xCurr, yCurr));
-    let pNext = projectToPixels(vec2<f32>(xNext, yNext));
+    let pCurr = enterPx(vec2<f32>(xCurr, yCurr));
+    let pNext = enterPx(vec2<f32>(xNext, yNext));
 
     // Adaptive sub-segment resolution: more segments for longer pixel spans.
     // Fixed-resolution curves (linear, step) have CURVE_RESOLUTION <= 3;
@@ -286,8 +316,8 @@
       nextIdx + 1u >= pointCount || seriesValues[nextIdx + 1u] != seriesNext);
 
     // Project neighbor control points
-    let pPrev = projectToPixels(vec2<f32>(xValues[prevIdx], yValues[prevIdx]));
-    let pAfter = projectToPixels(vec2<f32>(xValues[afterIdx], yValues[afterIdx]));
+    let pPrev = enterPx(vec2<f32>(xValues[prevIdx], yValues[prevIdx]));
+    let pAfter = enterPx(vec2<f32>(xValues[afterIdx], yValues[afterIdx]));
 
     // Compute t values from effective resolution (not geometry buffer)
     let subSegSize = 1.0 / f32(effectiveRes);
@@ -322,10 +352,12 @@
     var output: VertexOutput;
     output.position = pixelsToClip(finalPos);
     output.colorValue = colorValues[currIdx];
-    output.alpha = markConstants.globalAlpha * selectionDim(
-      ${colorActivityWGSL(ACTIVITY_READS, {
+    output.alpha = markConstants.globalAlpha * entranceAlpha(markConstants.entranceAxis) * selectionDim(
+      ${connectedActivityWGSL(ACTIVITY_READS, {
 				color:
 					'markConstants.activityColorMode, markConstants.activityColorScaleIndex, colorValues[currIdx]',
+				series:
+					'markConstants.activitySeriesMode, markConstants.activitySeriesScaleIndex, seriesValues[currIdx]',
 				group: 'markConstants.groupIndex'
 			})}
     );
@@ -443,6 +475,9 @@
 			view.setUint32(UNIFORM_OFFSETS.GROUP_INDEX, groupIndex, LE);
 			view.setUint32(UNIFORM_OFFSETS.ACTIVITY_COLOR_MODE, activityMode, LE);
 			view.setUint32(UNIFORM_OFFSETS.ACTIVITY_COLOR_SCALE_INDEX, activityScale, LE);
+			view.setUint32(UNIFORM_OFFSETS.ACTIVITY_SERIES_MODE, activitySeriesMode, LE);
+			view.setUint32(UNIFORM_OFFSETS.ACTIVITY_SERIES_SCALE_INDEX, activitySeriesScaleIndex, LE);
+			view.setUint32(UNIFORM_OFFSETS.ENTRANCE_AXIS, grow === 'x' ? 1 : grow === 'y' ? 2 : 0, LE);
 			view.setFloat32(UNIFORM_OFFSETS.CONSTANT_COLOR + 0, constantColor[0], LE);
 			view.setFloat32(UNIFORM_OFFSETS.CONSTANT_COLOR + 4, constantColor[1], LE);
 			view.setFloat32(UNIFORM_OFFSETS.CONSTANT_COLOR + 8, constantColor[2], LE);

package/dist/components/rendering/Lines.svelte.d.ts

@@ -22,11 +22,23 @@ interface Props {
      */
     activityColorMode?: number | null;
     activityColorScaleIndex?: number | null;
+    /**
+     * The series scale selection activity is also read through, from
+     * `seriesData`: mode 1 and its index when the mark groups by a `z` of
+     * its own, mode 0 (no read) otherwise. MarkSeries decides.
+     */
+    activitySeriesMode?: number;
+    activitySeriesScaleIndex?: number;
     constantColor?: [number, number, number, number];
     m4Decimator?: M4Decimator | null;
     dotsRung?: import('../../lod/DotsRung.svelte').DotsRung | null;
     globalAlpha?: number;
     markId?: string;
+    /**
+     * The axis this line grows along when its chart enters, or null to fade
+     * in. A line mark fades; an area's outline grows with its fill.
+     */
+    grow?: 'x' | 'y' | null;
 }
 declare const Lines: import("svelte").Component<Props, {}, "">;
 type Lines = ReturnType<typeof Lines>;

package/dist/components/rendering/ParallelLines.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { activityReads, colorActivityWGSL } from './activity-reads';
+	import { activityReads, connectedActivityWGSL } from './activity-reads';
 	import { PARALLEL_MAX_AXES, UNIFORM_BYTES } from './uniform-sizes';
 	import { getContext, onMount, onDestroy } from 'svelte';
 	import { RendererHost } from './RendererHost.svelte';
@@ -199,8 +199,8 @@
       var output: VertexOutput;
       output.position = pixelsToClip(pos);
       output.colorValue = colorValues[rowIdx];
-      output.alpha = config.opacity * selectionDim(
-        ${colorActivityWGSL(ACTIVITY_READS, {
+      output.alpha = config.opacity * entranceAlpha(0u) * selectionDim(
+        ${connectedActivityWGSL(ACTIVITY_READS, {
 					color: 'config.colorMode, config.colorScaleIndex, colorValues[rowIdx]',
 					group: 'config.groupIndex'
 				})}
@@ -283,8 +283,8 @@
     var output: VertexOutput;
     output.position = pixelsToClip(finalPos);
     output.colorValue = colorValues[rowIdx];
-    output.alpha = config.opacity * selectionDim(
-      ${colorActivityWGSL(ACTIVITY_READS, {
+    output.alpha = config.opacity * entranceAlpha(0u) * selectionDim(
+      ${connectedActivityWGSL(ACTIVITY_READS, {
 				color: 'config.colorMode, config.colorScaleIndex, colorValues[rowIdx]',
 				group: 'config.groupIndex'
 			})}

package/dist/components/rendering/Rects.svelte

@@ -49,7 +49,8 @@
 		DX: 32,
 		DY: 36,
 		OTHER_COLOR_ON_BAND: 40,
-		SPLIT_ALONG_X: 44
+		SPLIT_ALONG_X: 44,
+		ENTRANCE_AXIS: 48
 	};
 
 	interface Props {
@@ -67,6 +68,12 @@
 		share?: SplitProp | null;
 		facetData?: Float32Array | null;
 		dataVersion: number;
+		/**
+		 * The data version whose first write lands without morphing, or 0: a
+		 * catch-up result (MarkLifecycleV2.landsFor). Later writes of that version
+		 * animate as usual.
+		 */
+		landsFor?: number;
 		zIndex?: number;
 		colorMode?: number;
 		colorScaleIndex?: number;
@@ -79,14 +86,22 @@
 		markId?: string;
 		/**
 		 * The band axis, when this mark's rows are one per category in category
-		 * order and may therefore morph. null to morph nothing.
+		 * order and may therefore morph; or a histogram's binned axis, one row per
+		 * bin in bin order. null to morph nothing.
 		 *
 		 * The OTHER axis's channels morph. The band's never do: they carry a
 		 * category id that the shader resolves through the slot table, and
 		 * interpolating an identity produces a fraction that resolves to some
-		 * other category. Position already animates, through the slot table.
+		 * other category. Position already animates, through the slot table. A
+		 * bin's edges do not change under a filter, and a re-bin snaps.
 		 */
 		bandAxis?: 'x' | 'y' | null;
+		/**
+		 * The axis this mark grows along when its chart enters: its measure axis,
+		 * for bars and histograms anchored at 0. null fades it in instead, for
+		 * rects with bounds of their own (a Gantt bar has no 0 to grow from).
+		 */
+		grow?: 'x' | 'y' | null;
 	}
 
 	let {
@@ -99,6 +114,7 @@
 		share = null,
 		facetData = null,
 		dataVersion,
+		landsFor = 0,
 		zIndex = 0,
 		colorMode = 0,
 		colorScaleIndex = 0,
@@ -108,7 +124,8 @@
 		dx = 0,
 		dy = 0,
 		markId = '',
-		bandAxis = null
+		bandAxis = null,
+		grow = null
 	}: Props = $props();
 
 	const splitData = $derived(share?.data ?? null);
@@ -164,6 +181,10 @@
       dy: f32,                  // Vertical pixel offset
       otherColorOnBand: u32,    // 1: an Other row skips its colour activity too
       splitAlongX: u32,         // 1: an Other bar splits along x (horizontal bars)
+      entranceAxis: u32,        // 0: fades in, 1: grows along x, 2: along y
+      _pad0: u32,
+      _pad1: u32,
+      _pad2: u32,
     };
     @group(1) @binding(6) var<uniform> markConstants: MarkConstants;
 
@@ -208,13 +229,19 @@
       // Y axis scaling (generated based on scale type)
       {{Y_AXIS_LOGIC}}
 
+      // The chart's entrance: both edges pulled toward 0 on the measure axis,
+      // so a stack grows as one block rather than its segments floating up.
+      let p0 = entrancePosition(vec2<f32>(scaledX0, scaledY0), markConstants.entranceAxis);
+      let p1 = entrancePosition(vec2<f32>(scaledX1, scaledY1), markConstants.entranceAxis);
+
       // Apply inset (shrink rect inward on all sides)
-      let ix = markConstants.inset * sign(scaledX1 - scaledX0);
-      let iy = markConstants.inset * sign(scaledY1 - scaledY0);
+      let ix = markConstants.inset * sign(p1.x - p0.x);
+      let iy = markConstants.inset * sign(p1.y - p0.y);
 
       // Interpolate rectangle corners and apply pixel offsets
-      let finalX = mix(scaledX0 + ix, scaledX1 - ix, rectCorner.x) + markConstants.dx;
-      let finalY = mix(scaledY0 + iy, scaledY1 - iy, rectCorner.y) + markConstants.dy;
+      let finalX = mix(p0.x + ix, p1.x - ix, rectCorner.x) + markConstants.dx;
+      let finalY = mix(p0.y + iy, p1.y - iy, rectCorner.y) + markConstants.dy;
+      let enterAlpha = entranceAlpha(markConstants.entranceAxis);
 
       // Convert to normalized device coordinates
       let worldPos = vec2<f32>(finalX, finalY);
@@ -239,7 +266,7 @@
 				y: 'y0',
 				group: 'markConstants.groupIndex'
 			})};
-      output.alpha = alpha * selectionDim(activity);
+      output.alpha = alpha * selectionDim(activity) * enterAlpha;
       // The unselected part is drawn only on an Other row: every other bar skips
       // its activity reads.
       output.alphaRest = output.alpha;
@@ -254,7 +281,7 @@
           bandFreeActivityY(markConstants.groupIndex),
           markConstants.splitAlongX == 1u
         );
-        output.alphaRest = alpha * selectionDim(min(otherActivity, free));
+        output.alphaRest = alpha * selectionDim(min(otherActivity, free)) * enterAlpha;
       }
       return output;
     }
@@ -326,6 +353,18 @@
 
 	// --- DATA WRITING EFFECTS (Independent & Fine-Grained) ---
 
+	// Whether this write lands: the first of the catch-up's data version
+	// (landsFor). Plain, not $state: only the write effect reads and sets it.
+	// Assumes a catch-up result is ONE morph write: should it ever take two
+	// (values, then band ids after the instant layout), the second springs.
+	// A morph SPRING right after a morph snap on a return points here.
+	let lastMorphedVersion = -1;
+	function landsNow(): boolean {
+		const first = dataVersion !== lastMorphedVersion;
+		lastMorphedVersion = dataVersion;
+		return first && landsFor !== 0 && landsFor === dataVersion;
+	}
+
 	// The measure axis's two edges morph, as ONE write per data update, so one
 	// update starts one transition. The band's ids go with them: they are how a
 	// row set that is not the one being animated gets noticed and snapped.
@@ -339,7 +378,7 @@
 		// split and the bar land together. A share that changes alone (a click)
 		// starts a transition of its own on that clock.
 		const split = splitData ? ([[BINDINGS.SHARE, splitData]] as const) : [];
-		const land = splitData && !splitSlides ? [BINDINGS.SHARE] : undefined;
+		const land = landsNow() ? 'all' : splitData && !splitSlides ? [BINDINGS.SHARE] : undefined;
 		if (bandAxis === 'x') {
 			renderer.writeMorphed(
 				'x',
@@ -419,6 +458,7 @@
 			view.setFloat32(UNIFORM_OFFSETS.DY, dy, LE);
 			view.setUint32(UNIFORM_OFFSETS.OTHER_COLOR_ON_BAND, otherColorOnBand ? 1 : 0, LE);
 			view.setUint32(UNIFORM_OFFSETS.SPLIT_ALONG_X, splitAlongX ? 1 : 0, LE);
+			view.setUint32(UNIFORM_OFFSETS.ENTRANCE_AXIS, grow === 'x' ? 1 : grow === 'y' ? 2 : 0, LE);
 
 			renderer.writeUniform(BINDINGS.CONSTANTS, new Uint8Array(buffer));
 		}