+3 -1

src/lib/cards/FluidTextCard/EditingFluidTextCard.svelte

··· 36 36 : ''}" 37 37 onclick={handleClick} 38 38 > 39 39 - <FluidTextCard {item} /> 39 39 + {#key item.color} 40 40 + <FluidTextCard {item} /> 41 41 + {/key} 40 42 41 43 {#if isEditing} 42 44 <!-- svelte-ignore a11y_autofocus -->

+20 -5

src/lib/cards/FluidTextCard/FluidTextCard.svelte

··· 1 1 <script lang="ts"> 2 2 + import { colorToHue, getCSSVar } from '../helper'; 2 3 import type { ContentComponentProps } from '../types'; 3 4 import { onMount, onDestroy, tick } from 'svelte'; 4 5 let { item }: ContentComponentProps = $props(); ··· 131 132 ctx.clearRect(0, 0, maskCanvas.width, maskCanvas.height); 132 133 ctx.scale(dpr, dpr); 133 134 135 135 + //const color = getCSSVar('--color-base-900'); 136 136 + 134 137 ctx.fillStyle = 'black'; 135 138 ctx.fillRect(0, 0, width, height); 136 139 ··· 195 198 onMount(async () => { 196 199 // Wait for layout to settle 197 200 await tick(); 201 201 + 202 202 + let color = 203 203 + !item.color || item.color === 'transparent' || item.color === 'base' 204 204 + ? 'accent' 205 205 + : item.color; 206 206 + 207 207 + const computedColor = getCSSVar(`--color-${color}-500`); 208 208 + const hue = colorToHue(computedColor) / 360; 209 209 + console.log(computedColor, hue); 210 210 + 198 211 // Wait for a frame to ensure dimensions are set 199 212 requestAnimationFrame(() => { 200 200 - initFluidSimulation(); 213 213 + initFluidSimulation(hue, hue - 0.3); 201 214 }); 202 215 203 216 if (document.fonts?.ready) { ··· 214 227 if (resizeObserver) resizeObserver.disconnect(); 215 228 }); 216 229 217 217 - function initFluidSimulation() { 230 230 + function initFluidSimulation(startHue: number, endHue: number) { 218 231 if (!fluidCanvas || !maskCanvas || !container) return; 219 232 220 233 maskReady = false; ··· 247 260 SUNRAYS: true, 248 261 SUNRAYS_RESOLUTION: 196, 249 262 SUNRAYS_WEIGHT: 1.0, 250 250 - START_HUE: 0.5, 251 251 - END_HUE: 1.0, 263 263 + START_HUE: startHue, 264 264 + END_HUE: endHue, 252 265 RENDER_SPEED: 0.4 253 266 }; 254 267 ··· 1510 1523 function calcDeltaTime() { 1511 1524 const now = Date.now(); 1512 1525 let dt = (now - lastUpdateTime) / 1000; 1513 1513 - dt = Math.min(dt, 0.016666); 1526 1526 + // Allow up to ~30fps worth of time to pass per frame to handle browser throttling 1527 1527 + // This prevents the simulation from appearing to slow down when RAF is throttled 1528 1528 + dt = Math.min(dt, 0.033); 1514 1529 lastUpdateTime = now; 1515 1530 return dt; 1516 1531 }

+1 -1

src/lib/cards/FluidTextCard/index.ts

··· 22 22 settingsComponent: FluidTextCardSettings, 23 23 sidebarButtonText: 'Fluid Text', 24 24 defaultColor: 'transparent', 25 25 - allowSetColor: false, 25 25 + allowSetColor: true, 26 26 minW: 2 27 27 } as CardDefinition & { type: 'fluid-text' };

+14

src/lib/cards/helper.ts

··· 1 1 + import { convertCSSToHex, hex_to_okhsv } from '@foxui/colors'; 2 2 + 3 3 + export function getCSSVar(variable: string) { 4 4 + return getComputedStyle(document.body).getPropertyValue(variable).trim(); 5 5 + } 6 6 + 7 7 + /** 8 8 + * Converts a CSS color string to a hue value in the 0-1 range 9 9 + */ 10 10 + export function colorToHue(color: string): number { 11 11 + const hex = convertCSSToHex(color); 12 12 + const okhsv = hex_to_okhsv(hex); 13 13 + return okhsv.h; 14 14 + }