@kolkrabbi/kol-component 0.2.0 → 0.3.0

package/src/atoms/ProsePreview.jsx

@@ -0,0 +1,53 @@
+/**
+ * ProsePreview — a full rich-text specimen: one `.kol-prose` block exercising
+ * every long-form element — H1–H4 ladder, section lede, body paragraph,
+ * blockquote, indented passage, code block, pullout, and unordered/ordered
+ * lists — so the KOL prose stylesheet can be reviewed end-to-end in one view.
+ * The "long-form" member of the type-specimen kit.
+ *
+ * Fixed structure; only the text slots vary. All element styling comes from
+ * the prose stylesheet (kol-typography.css) plus the kit's
+ * `.kol-prose-indented` / `.kol-prose-pullout` chrome — none lives here.
+ *
+ * @param {string} h1        trailing text of the H1 (rendered as `H1 — {h1}`)
+ * @param {string} paragraph body paragraph text
+ * @param {string} code      contents of the <pre><code> block
+ * @param {string} pullout   trailing text of the pullout (rendered as `Pullout — {pullout}`)
+ * @param {string} quote     blockquote text
+ */
+export default function ProsePreview({ h1, paragraph, code, pullout, quote = 'Above as below — justice is a starfield.' }) {
+  return (
+    <div className="kol-prose">
+      <h1>H1 — {h1}</h1>
+      <h2>H2 — Section title</h2>
+      <h3>H3 — Subsection</h3>
+      <h4>H4 — Block title</h4>
+      <p className="kol-sans-body-01 text-strong mb-6">
+        Section lede — a larger paragraph used to introduce a section and
+        establish tone before the body copy begins.
+      </p>
+      <p>{paragraph}</p>
+      <blockquote><p>{quote}</p></blockquote>
+      <div className="kol-prose-indented">
+        <p>
+          Indented passage. Used for tangential copy, contextual notes, or
+          nested argument that supports the main line.
+        </p>
+      </div>
+      <pre className="bg-fg-04 border border-fg-08"><code>{code}</code></pre>
+      <p className="kol-prose-pullout kol-helper-12 tracking-widest text-body">
+        Pullout — {pullout}
+      </p>
+      <ul>
+        <li>Unordered list — item one</li>
+        <li>Item two</li>
+        <li>Item three</li>
+      </ul>
+      <ol>
+        <li>Ordered list — item one</li>
+        <li>Item two</li>
+        <li>Item three</li>
+      </ol>
+    </div>
+  )
+}

package/src/atoms/RotaryDial.jsx

@@ -0,0 +1,150 @@
+import { useEffect, useRef, useState } from 'react'
+
+/** Clamp to min–max, snapped to the nearest step from min. */
+const snapTo = (v, min, max, step) => {
+  const stepped = min + Math.round((v - min) / step) * step
+  return Math.max(min, Math.min(max, stepped))
+}
+
+/**
+ * RotaryDial — drag-to-set rotary knob numeric input. Vertical pointer drag
+ * rotates the whole dial over a 270° sweep (−135° to +135°) mapped onto
+ * min–max; a full sweep is ~200px of drag, movement measured absolute from
+ * drag start. Controlled (`value`/`onChange`) with a local visual buffer so
+ * rotation stays smooth while parent updates are RAF-throttled; the final
+ * value fires on release. Focus + arrow keys step the value
+ * (role="slider" with aria-valuemin/max/now). The label and `%` readout
+ * rows render only when `label` is set; label text renders as authored.
+ *
+ * @param {string}   label    text under the dial; also gates the label + readout rows
+ * @param {number}   value    controlled value within min–max
+ * @param {Function} onChange (next: number) => void — RAF-throttled while dragging, final on release
+ * @param {number}   min      minimum value (default 0)
+ * @param {number}   max      maximum value (default 100)
+ * @param {number}   step     drag snap / arrow-key increment (default 1)
+ * @param {number}   size     dial px size (default 80); derives ring + disc radii
+ */
+export default function RotaryDial({
+  label,
+  value = 0,
+  onChange,
+  min = 0,
+  max = 100,
+  step = 1,
+  size = 80,
+}) {
+  const [isDragging, setIsDragging] = useState(false)
+  const [localValue, setLocalValue] = useState(value) // visual buffer — updates every move
+  const dragRef = useRef({ startY: 0, startValue: 0 })
+  const rafRef = useRef(null)
+  const onChangeRef = useRef(onChange)
+  onChangeRef.current = onChange
+
+  // External updates land whenever a drag isn't in progress
+  useEffect(() => {
+    if (!isDragging) setLocalValue(value)
+  }, [value, isDragging])
+
+  useEffect(() => {
+    if (!isDragging) return
+    let current = dragRef.current.startValue
+    const handleMove = (e) => {
+      // absolute delta from drag start; full min→max sweep ≈ 200px
+      const deltaY = dragRef.current.startY - e.clientY
+      current = snapTo(dragRef.current.startValue + deltaY * ((max - min) / 200), min, max, step)
+      setLocalValue(current)
+      if (!rafRef.current) {
+        rafRef.current = requestAnimationFrame(() => {
+          onChangeRef.current?.(current)
+          rafRef.current = null
+        })
+      }
+    }
+    const handleUp = () => {
+      setIsDragging(false)
+      if (rafRef.current) {
+        cancelAnimationFrame(rafRef.current)
+        rafRef.current = null
+      }
+      onChangeRef.current?.(current)
+    }
+    window.addEventListener('pointermove', handleMove)
+    window.addEventListener('pointerup', handleUp)
+    window.addEventListener('pointercancel', handleUp)
+    return () => {
+      window.removeEventListener('pointermove', handleMove)
+      window.removeEventListener('pointerup', handleUp)
+      window.removeEventListener('pointercancel', handleUp)
+    }
+  }, [isDragging, min, max, step])
+
+  const handlePointerDown = (e) => {
+    setIsDragging(true)
+    dragRef.current = { startY: e.clientY, startValue: localValue }
+  }
+
+  const handleKeyDown = (e) => {
+    let next = null
+    if (e.key === 'ArrowUp' || e.key === 'ArrowRight') next = snapTo(localValue + step, min, max, step)
+    else if (e.key === 'ArrowDown' || e.key === 'ArrowLeft') next = snapTo(localValue - step, min, max, step)
+    if (next === null) return
+    e.preventDefault()
+    setLocalValue(next)
+    onChange?.(next)
+  }
+
+  const outerRadius = size / 2
+  const innerRadius = (size * 0.7) / 2
+  const strokeWidth = 2
+  const angle = -135 + ((localValue - min) / (max - min || 1)) * 270
+
+  return (
+    <div className="flex flex-col items-center gap-2">
+      <div
+        role="slider"
+        tabIndex={0}
+        aria-label={label}
+        aria-valuemin={min}
+        aria-valuemax={max}
+        aria-valuenow={localValue}
+        className="relative cursor-pointer select-none touch-none"
+        style={{
+          width: size,
+          height: size,
+          transform: `rotate(${angle}deg)`,
+          willChange: isDragging ? 'transform' : 'auto',
+        }}
+        onPointerDown={handlePointerDown}
+        onKeyDown={handleKeyDown}
+      >
+        <svg width={size} height={size} viewBox={`0 0 ${size} ${size}`} style={{ overflow: 'visible' }}>
+          {/* outer dashed tick ring */}
+          <circle
+            cx={outerRadius}
+            cy={outerRadius}
+            r={outerRadius - strokeWidth}
+            fill="none"
+            stroke="currentColor"
+            strokeWidth={strokeWidth}
+            strokeDasharray="4 4"
+            className="text-fg-24"
+          />
+          {/* inner solid disc */}
+          <circle cx={outerRadius} cy={outerRadius} r={innerRadius} fill="currentColor" className="text-fg-96" />
+          {/* pointer notch — reads as a cut into the disc */}
+          <line
+            x1={outerRadius}
+            y1={outerRadius}
+            x2={outerRadius}
+            y2={outerRadius - innerRadius + 4}
+            stroke="var(--kol-surface-primary)"
+            strokeWidth={2}
+            strokeLinecap="round"
+          />
+        </svg>
+      </div>
+      {label && <div className="kol-helper-12 text-fg-64">{label}</div>}
+      {label && <div className="kol-helper-12 text-fg-96">{value}%</div>}
+    </div>
+  )
+}

package/src/atoms/SearchInput.jsx

@@ -0,0 +1,108 @@
+import { Icon } from '@kolkrabbi/kol-loader'
+
+/**
+ * SearchInput — controlled search field on the .kol-control shell. The
+ * search-flavored sibling of Input (same variant/size chrome + inner-input
+ * treatment), standalone because atoms can't nest atoms. Leading search
+ * icon, then two mutually exclusive trailing affordances: a caller-authored
+ * shortcut kbd chip while the value is empty, a clear × while it isn't.
+ *
+ * Always controlled (`value` defaults to ''). Controlled + no onChange =
+ * deliberate display-only → readOnly, same convention as Input. Extra props
+ * (onKeyDown, autoFocus, role, aria-*) spread onto the inner <input> —
+ * ShellSearchOverlay drives its combobox wiring through that seam.
+ *
+ * `type="search"` for semantics (searchbox role, mobile "search" enter key);
+ * the native WebKit cancel button is hidden so the × stays the only clear
+ * affordance.
+ *
+ * @param {string}   value        controlled value
+ * @param {Function} onChange     (event) => void — input change
+ * @param {string}   placeholder  placeholder text
+ * @param {Function} onClear      () => void — trailing × click; × renders only when set and value is non-empty
+ * @param {string}   shortcutHint caller-authored kbd chip (e.g. "⌘K"); shown while the value is empty
+ * @param {Function} onFocus      (event) => void — input focus
+ * @param {string}   size         'sm' | 'md' — kol-control size + matched mono type class
+ * @param {string}   variant      'filled' | 'ghost' | 'outline' — kol-control variant, same chrome as Input (ignored when bare)
+ * @param {boolean}  bare         borderless inline field for overlay panels (full width, no shell chrome; keeps icon/clear/chip slots)
+ * @param {string}   className    extra classes on the shell
+ */
+
+const SIZE_TYPE = { sm: 'kol-mono-12', md: 'kol-mono-14' }
+const ICON_SIZE = { sm: 14, md: 14 }
+
+export default function SearchInput({
+  value = '',
+  onChange,
+  placeholder = 'Search…',
+  onClear,
+  shortcutHint,
+  onFocus,
+  size = 'md',
+  variant = 'filled',
+  bare = false,
+  className = '',
+  ...inputProps
+}) {
+  const shellCls = [
+    bare
+      ? 'flex w-full gap-2.5 px-4 py-3'
+      : `kol-control kol-control--${variant} kol-control-${size} gap-2`,
+    'items-center cursor-text',
+    SIZE_TYPE[size],
+    className,
+  ].filter(Boolean).join(' ')
+
+  /* Same height pin as Input: Chromium sizes an <input> from font metrics,
+   * not CSS line-height, so without this the shell lands ~0.5px tall.
+   * h-4 / h-[18px] match the kol-mono-12 / -14 line-heights. */
+  const heightCls = size === 'sm' ? 'h-4' : 'h-[18px]'
+
+  const inputCls = [
+    'min-w-0 flex-1 bg-transparent border-none outline-none text-auto',
+    'appearance-none [&::-webkit-search-cancel-button]:hidden',
+    heightCls,
+  ].join(' ')
+
+  return (
+    <label className={shellCls}>
+      <span
+        aria-hidden="true"
+        className={`flex items-center shrink-0 ${bare ? 'text-fg-48' : 'text-auto opacity-50'}`}
+      >
+        <Icon name="search" size={ICON_SIZE[size] ?? 14} />
+      </span>
+      <input
+        type="search"
+        value={value ?? ''}
+        onChange={onChange}
+        readOnly={!onChange || undefined}
+        onFocus={onFocus}
+        placeholder={placeholder}
+        spellCheck={false}
+        className={inputCls}
+        {...inputProps}
+      />
+      {onClear && value ? (
+        <button
+          type="button"
+          aria-label="Clear"
+          /* preventDefault on mousedown keeps focus in the input across the clear */
+          onMouseDown={(e) => e.preventDefault()}
+          onClick={onClear}
+          className="inline-flex items-center justify-center shrink-0 cursor-pointer text-fg-48 hover:text-fg-96 transition-colors"
+        >
+          <Icon name="x" size={12} />
+        </button>
+      ) : shortcutHint ? (
+        /* aria-hidden — affordance, not a label (same stance as Input's prefix/suffix) */
+        <kbd
+          aria-hidden="true"
+          className="inline-flex items-center justify-center shrink-0 h-4 min-w-4 px-1 rounded-[3px] bg-fg-08 kol-helper-10 text-fg-48"
+        >
+          {shortcutHint}
+        </kbd>
+      ) : null}
+    </label>
+  )
+}

package/src/atoms/TextPressure.jsx

@@ -0,0 +1,331 @@
+import { useEffect, useRef, useState } from 'react'
+import usePrefersReducedMotion from '../hooks/usePrefersReducedMotion.js'
+
+// Variable-font axis rest values — where every glyph sits with no pointer near.
+const DEFAULTS = { wdth: 100, wght: 400, ital: 0, alpha: 1 }
+const STATIC_VARIATION = "'wght' 400, 'wdth' 100, 'ital' 0.00"
+
+/**
+ * TextPressure — a single line of variable-font text whose glyphs deform
+ * toward the pointer: characters nearest the cursor grow widest / heaviest /
+ * most italic, and the effect falls off linearly with distance. A
+ * requestAnimationFrame loop lerps a smoothed follower toward the raw cursor
+ * (container-scoped listeners) and writes per-glyph `font-variation-settings`
+ * each frame. On mouse-leave the glyphs coast back to their rest axis values
+ * (`returnToDefault`) or freeze in place, then the loop auto-stops until the
+ * pointer returns. Ported from the react-bits / JuanFuentes effect, collapsed
+ * from three source variants into one.
+ *
+ * ── Font contract ──────────────────────────────────────────────────────────
+ * The effect only *moves* if the resolved font is a VARIABLE font exposing the
+ * `wght` / `wdth` / `ital` axes. The KOL variable font is a CONSUMER asset —
+ * the design system does not ship one. Two ways to supply it:
+ *   • `fontUrl` given → an `@font-face` is injected at runtime for `fontFamily`
+ *     (e.g. fontFamily="TG Root-Tune" fontUrl="/fonts/TGRoot-TuneVF.ttf").
+ *   • `fontUrl` omitted → the already-loaded `fontFamily` is used as-is; the
+ *     default `var(--kol-font-family-sans)` animates only if that theme font is
+ *     itself variable — otherwise the text renders correctly but static.
+ *
+ * Reduced motion → no listeners, no rAF; glyphs render static at the rest axis
+ * values (wght 400 / wdth 100 / ital 0). Casing is authored by the caller —
+ * this component never text-transforms.
+ *
+ * @param {string}  text          the line; split into one <span> per character
+ * @param {string}  fontFamily    applied family + injected @font-face family
+ * @param {string}  [fontUrl]     variable-font URL → injects @font-face when set
+ * @param {boolean} width         animate the `wdth` axis (5–150)
+ * @param {boolean} weight        animate the `wght` axis (100–900)
+ * @param {boolean} italic        animate the `ital` axis (0–1)
+ * @param {boolean} alpha         animate per-glyph opacity (0–1)
+ * @param {boolean} flex          distribute glyphs with justify-between
+ * @param {boolean} stroke        add an outlined ghost layer behind each glyph
+ * @param {boolean} scale         vertically scale the line to fill the container
+ * @param {string}  textColor     glyph color (KOL token / CSS color)
+ * @param {string}  strokeColor   stroke color when `stroke` is on
+ * @param {string}  className     extra classes on the <h1>
+ * @param {number}  minFontSize   floor for the responsive font size
+ * @param {number}  [maxFontSize] cap for the responsive font size
+ * @param {boolean} returnToDefault true: coast back to rest on leave; false: freeze
+ */
+export default function TextPressure({
+  text = 'Compressa',
+  fontFamily = 'var(--kol-font-family-sans)',
+  fontUrl,
+
+  width = true,
+  weight = true,
+  italic = true,
+  alpha = false,
+
+  flex = true,
+  stroke = false,
+  scale = false,
+
+  textColor = 'var(--kol-fg-emphasis)',
+  strokeColor = 'var(--kol-accent-primary)',
+  className = '',
+
+  minFontSize = 24,
+  maxFontSize = null,
+  returnToDefault = true,
+}) {
+  const containerRef = useRef(null)
+  const titleRef = useRef(null)
+  const spansRef = useRef([])
+
+  const mouseRef = useRef({ x: 0, y: 0 })
+  const cursorRef = useRef({ x: 0, y: 0 })
+  const currentValuesRef = useRef([])
+  const velocityRef = useRef([])
+
+  const [fontSize, setFontSize] = useState(minFontSize)
+  const [scaleY, setScaleY] = useState(1)
+  const [lineHeight, setLineHeight] = useState(1)
+  const [isHovering, setIsHovering] = useState(false)
+
+  const reducedMotion = usePrefersReducedMotion()
+  const chars = text.split('')
+
+  const dist = (a, b) => {
+    const dx = b.x - a.x
+    const dy = b.y - a.y
+    return Math.sqrt(dx * dx + dy * dy)
+  }
+
+  // Container-scoped pointer tracking (never window). Skipped for reduced motion.
+  useEffect(() => {
+    if (reducedMotion) return undefined
+    const container = containerRef.current
+    if (!container) return undefined
+
+    const handleMouseMove = (e) => {
+      cursorRef.current.x = e.clientX
+      cursorRef.current.y = e.clientY
+    }
+    const handleTouchMove = (e) => {
+      const t = e.touches[0]
+      cursorRef.current.x = t.clientX
+      cursorRef.current.y = t.clientY
+    }
+    const handleMouseEnter = () => setIsHovering(true)
+    const handleMouseLeave = () => setIsHovering(false)
+
+    container.addEventListener('mousemove', handleMouseMove)
+    container.addEventListener('touchmove', handleTouchMove, { passive: false })
+    container.addEventListener('mouseenter', handleMouseEnter)
+    container.addEventListener('mouseleave', handleMouseLeave)
+
+    const { left, top, width: w, height: h } = container.getBoundingClientRect()
+    mouseRef.current.x = left + w / 2
+    mouseRef.current.y = top + h / 2
+    cursorRef.current.x = mouseRef.current.x
+    cursorRef.current.y = mouseRef.current.y
+
+    return () => {
+      container.removeEventListener('mousemove', handleMouseMove)
+      container.removeEventListener('touchmove', handleTouchMove)
+      container.removeEventListener('mouseenter', handleMouseEnter)
+      container.removeEventListener('mouseleave', handleMouseLeave)
+    }
+  }, [reducedMotion])
+
+  // Responsive sizing (layout, not motion — runs regardless of reduced motion).
+  useEffect(() => {
+    const setSize = () => {
+      if (!containerRef.current || !titleRef.current) return
+      const { width: containerW, height: containerH } = containerRef.current.getBoundingClientRect()
+
+      let newFontSize = containerW / (chars.length / 2)
+      newFontSize = Math.max(newFontSize, minFontSize)
+      if (maxFontSize) newFontSize = Math.min(newFontSize, maxFontSize)
+
+      setFontSize(newFontSize)
+      setScaleY(1)
+      setLineHeight(1)
+
+      requestAnimationFrame(() => {
+        if (!titleRef.current) return
+        const textRect = titleRef.current.getBoundingClientRect()
+        if (scale && textRect.height > 0) {
+          const yRatio = containerH / textRect.height
+          setScaleY(yRatio)
+          setLineHeight(yRatio)
+        }
+      })
+    }
+
+    setSize()
+    window.addEventListener('resize', setSize)
+    return () => window.removeEventListener('resize', setSize)
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [scale, text, minFontSize, maxFontSize])
+
+  // The pressure loop. Skipped entirely for reduced motion (glyphs stay static).
+  useEffect(() => {
+    if (reducedMotion) return undefined
+    let rafId
+
+    const animate = () => {
+      if (isHovering) {
+        mouseRef.current.x += (cursorRef.current.x - mouseRef.current.x) / 15
+        mouseRef.current.y += (cursorRef.current.y - mouseRef.current.y) / 15
+
+        if (titleRef.current && containerRef.current) {
+          const containerRect = containerRef.current.getBoundingClientRect()
+          const maxDist = containerRect.width / 2
+
+          spansRef.current.forEach((span, i) => {
+            if (!span) return
+            const rect = span.getBoundingClientRect()
+            const charCenter = { x: rect.x + rect.width / 2, y: rect.y + rect.height / 2 }
+            const d = dist(mouseRef.current, charCenter)
+
+            const getAttr = (distance, minVal, maxVal) => {
+              const val = maxVal - Math.abs((maxVal * distance) / maxDist)
+              return Math.max(minVal, val + minVal)
+            }
+
+            const wdth = width ? Math.floor(getAttr(d, 5, 150)) : 100
+            const wght = weight ? Math.floor(getAttr(d, 100, 900)) : 400
+            const italVal = italic ? getAttr(d, 0, 1) : 0
+            const alphaVal = alpha ? getAttr(d, 0, 1) : 1
+
+            const prev = currentValuesRef.current[i]
+            if (prev && !returnToDefault) {
+              velocityRef.current[i] = {
+                wdth: wdth - prev.wdth,
+                wght: wght - prev.wght,
+                ital: italVal - prev.ital,
+                alpha: alphaVal - prev.alpha,
+              }
+            }
+            currentValuesRef.current[i] = { wdth, wght, ital: italVal, alpha: alphaVal }
+
+            span.style.opacity = alphaVal
+            span.style.fontVariationSettings = `'wght' ${wght}, 'wdth' ${wdth}, 'ital' ${italVal.toFixed(2)}`
+          })
+        }
+      } else {
+        // Coast back to rest (returnToDefault) or settle into a frozen pose.
+        let allSettled = true
+
+        spansRef.current.forEach((span, i) => {
+          if (!span) return
+          const current = currentValuesRef.current[i] || { ...DEFAULTS }
+          if (!velocityRef.current[i]) velocityRef.current[i] = { wdth: 0, wght: 0, ital: 0, alpha: 0 }
+          const velocity = velocityRef.current[i]
+
+          if (returnToDefault) {
+            const springStrength = 0.05
+            const damping = 0.88
+            velocity.wdth += (DEFAULTS.wdth - current.wdth) * springStrength
+            velocity.wght += (DEFAULTS.wght - current.wght) * springStrength
+            velocity.ital += (DEFAULTS.ital - current.ital) * springStrength
+            velocity.alpha += (DEFAULTS.alpha - current.alpha) * springStrength
+            velocity.wdth *= damping
+            velocity.wght *= damping
+            velocity.ital *= damping
+            velocity.alpha *= damping
+
+            const newWdth = current.wdth + velocity.wdth
+            const newWght = current.wght + velocity.wght
+            const newItal = current.ital + velocity.ital
+            const newAlpha = current.alpha + velocity.alpha
+
+            if (
+              Math.abs(newWdth - DEFAULTS.wdth) > 0.5 ||
+              Math.abs(newWght - DEFAULTS.wght) > 0.5 ||
+              Math.abs(velocity.wdth) > 0.1 ||
+              Math.abs(velocity.wght) > 0.1
+            ) {
+              allSettled = false
+            }
+
+            currentValuesRef.current[i] = { wdth: newWdth, wght: newWght, ital: newItal, alpha: newAlpha }
+            span.style.opacity = newAlpha
+            span.style.fontVariationSettings = `'wght' ${Math.round(newWght)}, 'wdth' ${Math.round(newWdth)}, 'ital' ${newItal.toFixed(2)}`
+          } else {
+            const damping = 0.75
+            velocity.wdth *= damping
+            velocity.wght *= damping
+            velocity.ital *= damping
+            velocity.alpha *= damping
+
+            const newWdth = current.wdth + velocity.wdth
+            const newWght = current.wght + velocity.wght
+            const newItal = current.ital + velocity.ital
+            const newAlpha = current.alpha + velocity.alpha
+
+            if (
+              Math.abs(velocity.wdth) > 0.01 ||
+              Math.abs(velocity.wght) > 0.01 ||
+              Math.abs(velocity.ital) > 0.0001 ||
+              Math.abs(velocity.alpha) > 0.0001
+            ) {
+              allSettled = false
+            }
+
+            currentValuesRef.current[i] = { wdth: newWdth, wght: newWght, ital: newItal, alpha: newAlpha }
+            span.style.opacity = newAlpha
+            span.style.fontVariationSettings = `'wght' ${Math.round(newWght)}, 'wdth' ${Math.round(newWdth)}, 'ital' ${newItal.toFixed(2)}`
+          }
+        })
+
+        if (allSettled) {
+          cancelAnimationFrame(rafId)
+          return
+        }
+      }
+
+      rafId = requestAnimationFrame(animate)
+    }
+
+    animate()
+    return () => cancelAnimationFrame(rafId)
+  }, [width, weight, italic, alpha, chars.length, isHovering, returnToDefault, reducedMotion])
+
+  const titleClass = [
+    'kol-text-pressure-title m-0 w-full max-w-full overflow-hidden box-border text-center whitespace-nowrap select-none origin-top font-thin',
+    flex ? 'flex justify-between' : '',
+    stroke ? 'kol-text-pressure--stroke' : '',
+    className,
+  ]
+    .filter(Boolean)
+    .join(' ')
+
+  return (
+    <div
+      ref={containerRef}
+      className="kol-text-pressure relative flex h-full w-full max-w-full items-center justify-center overflow-hidden"
+    >
+      {fontUrl && (
+        <style>{`@font-face { font-family: '${fontFamily}'; src: url('${fontUrl}'); font-style: normal; }`}</style>
+      )}
+
+      <h1
+        ref={titleRef}
+        className={titleClass}
+        style={{
+          fontFamily,
+          fontSize,
+          lineHeight,
+          transform: `scale(1, ${scaleY})`,
+          color: textColor,
+          '--kol-text-pressure-stroke': strokeColor,
+        }}
+      >
+        {chars.map((char, i) => (
+          <span
+            key={i}
+            ref={(el) => (spansRef.current[i] = el)}
+            data-char={char}
+            className="kol-text-pressure-char inline-block"
+            style={{ fontVariationSettings: STATIC_VARIATION }}
+          >
+            {char}
+          </span>
+        ))}
+      </h1>
+    </div>
+  )
+}