Merge pull request #163 from flo-bit/improve-fluid-text

Improve fluid text

src/lib/cards/social/BigSocialCard/BigSocialCard.svelte

···
 
 	const platform = $derived(item.cardData.platform as string);
 	const platformData = $derived(platformsData[platform]);
+
+	// Color logic:
+	// - base/transparent/undefined: background = brand color, icon = white
+	// - other: background = that color (from BaseCard), icon = white
+	const useBrandBackground = $derived(
+		!item.color || item.color === 'base' || item.color === 'transparent'
+	);
+	const brandColor = $derived(`#${item.cardData.color}`);
 </script>
 
 <div
 	class="flex h-full w-full items-center justify-center p-10"
-	style={`background-color: #${item.cardData.color}`}
+	style={useBrandBackground ? `background-color: ${brandColor}` : ''}
 >
 	<div
 		class="flex aspect-square max-h-full max-w-full items-center justify-center [&_svg]:size-full [&_svg]:max-w-60 [&_svg]:fill-white"

src/lib/cards/social/BigSocialCard/index.ts

···
 		return item;
 	},
 	name: 'Social Icon',
-	allowSetColor: false,
-	defaultColor: 'transparent',
+	allowSetColor: true,
+	defaultColor: 'base',
 	minW: 2,
 	minH: 2,
 	onUrlHandler: (url, item) => {

src/lib/cards/visual/FluidTextCard/FluidTextCard.svelte

···
 <script lang="ts">
-	import { colorToHue, getCSSVar, getHexOfCardColor } from '../../helper';
+	import { colorToHue, getHexCSSVar, getHexOfCardColor } from '../../helper';
 	import type { ContentComponentProps } from '../../types';
 	import { onMount, onDestroy, tick } from 'svelte';
 	let { item }: ContentComponentProps = $props();
···
 	let container: HTMLDivElement;
 	let fluidCanvas: HTMLCanvasElement;
 	let maskCanvas: HTMLCanvasElement;
+	let shadowCanvas: HTMLCanvasElement;
 	let animationId: number;
 	let splatIntervalId: ReturnType<typeof setInterval>;
 	let maskDrawRaf = 0;
 	let maskReady = false;
 	let isInitialized = $state(false);
 	let resizeObserver: ResizeObserver | null = null;
+	let themeObserver: MutationObserver | null = null;
 
 	// Pure hash function for shader keyword caching
 	function hashCode(s: string) {
···
 		if (width === 0 || height === 0) return;
 
 		const dpr = window.devicePixelRatio || 1;
+		const isDark = document.documentElement.classList.contains('dark');
+
+		// Draw shadow behind fluid (light mode only, transparent only)
+		if (shadowCanvas && item.color === 'transparent') {
+			shadowCanvas.width = width * dpr;
+			shadowCanvas.height = height * dpr;
+			const shadowCtx = shadowCanvas.getContext('2d')!;
+			shadowCtx.setTransform(1, 0, 0, 1, 0, 0);
+			shadowCtx.clearRect(0, 0, shadowCanvas.width, shadowCanvas.height);
+			shadowCtx.scale(dpr, dpr);
+
+			const textFontSize = Math.round(width * fontSize);
+			shadowCtx.font = `${fontWeight} ${textFontSize}px ${fontFamily}`;
+			shadowCtx.textAlign = 'center';
+
+			const metrics = shadowCtx.measureText(text);
+			let textY = height / 2;
+			if (
+				metrics.actualBoundingBoxAscent !== undefined &&
+				metrics.actualBoundingBoxDescent !== undefined
+			) {
+				shadowCtx.textBaseline = 'alphabetic';
+				textY =
+					(height + metrics.actualBoundingBoxAscent - metrics.actualBoundingBoxDescent) / 2;
+			} else {
+				shadowCtx.textBaseline = 'middle';
+			}
+
+			// Draw darkened text shape behind fluid
+			shadowCtx.fillStyle = getHexCSSVar(isDark ? '--color-base-950' : '--color-base-200');
+			shadowCtx.fillText(text, width / 2, textY);
+		} else if (shadowCanvas) {
+			// Clear shadow canvas when not transparent
+			shadowCanvas.width = 1;
+			shadowCanvas.height = 1;
+		}
 
 		maskCanvas.width = width * dpr;
 		maskCanvas.height = height * dpr;
···
 		ctx.clearRect(0, 0, maskCanvas.width, maskCanvas.height);
 		ctx.scale(dpr, dpr);
 
-		//const color = getCSSVar('--color-base-900');
-
-		ctx.fillStyle = 'black';
+		const bgColor =
+			item.color === 'transparent'
+				? getHexCSSVar(isDark ? '--color-base-900' : '--color-base-50')
+				: 'black';
+		ctx.fillStyle = bgColor;
 		ctx.fillRect(0, 0, width, height);
 
 		// Font size as percentage of container width
 		const textFontSize = Math.round(width * fontSize);
 		ctx.font = `${fontWeight} ${textFontSize}px ${fontFamily}`;
 
-		ctx.strokeStyle = 'rgba(255, 255, 255, 0.3)';
-		ctx.lineWidth = 2;
+		ctx.lineWidth = 3;
 		ctx.textAlign = 'center';
 
 		const metrics = ctx.measureText(text);
···
 			ctx.textBaseline = 'middle';
 		}
 
-		ctx.strokeText(text, width / 2, textY);
+		if (item.color === 'transparent') {
+			// Partially cut out the stroke area so fluid shows through
+			ctx.globalCompositeOperation = 'destination-out';
+			ctx.globalAlpha = 0.7;
+			ctx.strokeStyle = 'white';
+			ctx.strokeText(text, width / 2, textY);
+			ctx.globalAlpha = 1;
+			ctx.globalCompositeOperation = 'source-over';
+
+			// Add overlay: brighten in dark mode, darken in light mode
+			ctx.strokeStyle = isDark ? 'rgba(255, 255, 255, 0.15)' : 'rgba(0, 0, 0, 0.2)';
+			ctx.strokeText(text, width / 2, textY);
+		} else {
+			ctx.strokeStyle = 'rgba(255, 255, 255, 0.3)';
+			ctx.strokeText(text, width / 2, textY);
+		}
+
 		ctx.globalCompositeOperation = 'destination-out';
 		ctx.fillText(text, width / 2, textY);
 		ctx.globalCompositeOperation = 'source-over';
···
 				if (isInitialized) scheduleMaskDraw();
 			});
 		}
+
+		// Watch for dark mode changes to redraw mask with correct background
+		if (item.color === 'transparent') {
+			themeObserver = new MutationObserver(() => {
+				if (isInitialized) scheduleMaskDraw();
+			});
+			themeObserver.observe(document.documentElement, {
+				attributes: true,
+				attributeFilter: ['class']
+			});
+		}
 	});
 
 	onDestroy(() => {
···
 		if (splatIntervalId) clearInterval(splatIntervalId);
 		if (maskDrawRaf) cancelAnimationFrame(maskDrawRaf);
 		if (resizeObserver) resizeObserver.disconnect();
+		if (themeObserver) themeObserver.disconnect();
 	});
 
 	function initFluidSimulation(startHue: number, endHue: number) {
···
 			COLOR_UPDATE_SPEED: 10,
 			PAUSED: false,
 			BACK_COLOR: { r: 0, g: 0, b: 0 },
-			TRANSPARENT: false,
+			TRANSPARENT: item.color === 'transparent',
 			BLOOM: false,
 			BLOOM_ITERATIONS: 8,
 			BLOOM_RESOLUTION: 256,
···
 	}
 </script>
 
-<div bind:this={container} class="relative h-full w-full overflow-hidden bg-black">
+<div
+	bind:this={container}
+	class="relative h-full w-full overflow-hidden {item.color === 'transparent'
+		? 'bg-base-50 dark:bg-base-900'
+		: 'bg-black'}"
+>
+	<canvas bind:this={shadowCanvas} class="absolute h-full w-full"></canvas>
 	<canvas bind:this={fluidCanvas} class="absolute h-full w-full"></canvas>
 	<canvas bind:this={maskCanvas} class="absolute h-full w-full"></canvas>
 </div>