import { Text, textGlyphDimensions } from '@three-blocks/core';
import { positionLocal, sin, time, mix, color, Fn } from 'three/tsl';

const text = new Text();
text.text = 'WIDE LETTERS\ni vs W';

// Animate based on glyph width
text.material.positionNode = Fn(() => {
  const pos = positionLocal.toVar();
  const width = textGlyphDimensions.x;
  pos.y.addAssign(sin(time.add(width.mul(10))).mul(width.mul(0.2)));
  return pos;
})();

// Color based on glyph size
text.material.colorNode = Fn(() => {
  const size = textGlyphDimensions.x.add(textGlyphDimensions.y);
  return mix(
    color(0x0066ff), // Small glyphs
    color(0xff0066), // Large glyphs
    size.div(6.0).clamp(0, 1)
  );
})();