@kolkrabbi/kol-foundry 0.1.0 → 0.3.0

package/README.md

@@ -13,6 +13,10 @@ The KOL **type-foundry system** — the type-specimen apparatus, lifted out of `
 | `TypefaceStyleSection` | per-style specimen block |
 | `FontPreviewSection` | size-ladder / preview control |
 | `SpecimenSectionHeader` | shared section header |
+| `TypeSample` | labeled live type-specimen block (props-driven) |
+| `TypeSpecCard` | font-metric data sheet + live sample slot |
+| `TextPressure` | variable-font glyphs deforming toward the pointer |
+| `ColorLoader` | branded loading curtain with a live variable-font wordmark |
 | `glyphSets`, `glyphCategories`, `SPECIMEN_SAMPLE_TEXT` | glyph data |
 
 ```js
@@ -21,4 +25,4 @@ import { TypefaceHero, VariableFontSection } from '@kolkrabbi/kol-foundry'
 
 ## Requirements
 
-Components take flat prop bags — typeface metrics / font files are consumer-supplied. Shared primitives (`Tag`, `Pill`, `Slider`, `Button`, `Divider`, `Dropdown`, `useAxisAnimation`) stay in `@kolkrabbi/kol-component`; this package depends on them. Styling comes from `@kolkrabbi/kol-theme`. Vite + Tailwind v4 consumer (`@source "…/node_modules/@kolkrabbi/kol-foundry/src"`).
+Components take flat prop bags — typeface metrics / font files are consumer-supplied. Shared primitives (`Tag`, `Pill`, `Slider`, `Button`, `Divider`, `Dropdown`, `useAxisAnimation`, `usePrefersReducedMotion`) stay in `@kolkrabbi/kol-component`; this package depends on them. `framer-motion` is a peer (`ColorLoader`). Styling comes from `@kolkrabbi/kol-theme`. Vite + Tailwind v4 consumer (`@source "…/node_modules/@kolkrabbi/kol-foundry/src"` — Tailwind skips `node_modules` when scanning, so without this line the specimen layouts never generate).

package/package.json

@@ -1,8 +1,8 @@
 {
   "name": "@kolkrabbi/kol-foundry",
-  "version": "0.1.0",
+  "version": "0.3.0",
   "private": false,
-  "description": "KOL type-foundry system — the type-specimen apparatus: typeface hero, variable-font axis playground, parsed-metric glyph inspector, character-set browser, and font-preview. Typeface data is consumer-injected. Sits above @kolkrabbi/kol-{theme,icons,component}.",
+  "description": "KOL foundry component set — the type-specimen apparatus: typeface hero, variable-font axis playground, parsed-metric glyph inspector, character-set browser, font-preview, and the typeface-catalog grid. Every component renders, inspects, or manipulates a live font. Typeface data is consumer-injected. Sits above @kolkrabbi/kol-{theme,icons,component}.",
   "license": "MIT",
   "type": "module",
   "main": "./src/index.js",
@@ -11,13 +11,14 @@
     ".": "./src/index.js"
   },
   "dependencies": {
-    "@kolkrabbi/kol-component": "0.7.0",
-    "@kolkrabbi/kol-icons": "0.5.0",
-    "@kolkrabbi/kol-theme": "0.7.1"
+    "@kolkrabbi/kol-component": "0.8.0",
+    "@kolkrabbi/kol-theme": "0.7.3",
+    "@kolkrabbi/kol-icons": "0.5.0"
   },
   "peerDependencies": {
     "react": "^18.3.0 || ^19.0.0",
     "react-dom": "^18.3.0 || ^19.0.0",
+    "framer-motion": "^12.0.0",
     "opentype.js": "^1.3.4"
   },
   "peerDependenciesMeta": {

package/src/ColorLoader.jsx

@@ -0,0 +1,155 @@
+import { motion as Motion, useAnimationControls } from 'framer-motion'
+import { useEffect, useRef, useState } from 'react'
+import { usePrefersReducedMotion } from '@kolkrabbi/kol-component'
+import TextPressure from './TextPressure.jsx'
+
+/**
+ * ColorLoader — a full-height branded intro/loading curtain. Fills its parent
+ * on a solid backdrop, times in a variable-font wordmark (a live TextPressure
+ * effect) after `wordmarkDelay`, then reveals a bouncing down-chevron cue after
+ * `scrollDelay`. With `dismissOnClick`, clicking the curtain slides the whole
+ * thing up out of view and fires `onComplete`; otherwise the parent owns
+ * dismissal (unmount when its work is done). Generalized from the app's
+ * KOLKRABBI loader: the cursor trail, `cursor: none`, and window-scroll/keyboard
+ * gesture hijack are all dropped — exit is a plain click or parent-driven.
+ *
+ * Reduced motion → no timers, no tweens: one static frame (wordmark + cue shown
+ * at rest) and `onComplete` fires immediately on mount, so the curtain never
+ * makes a reduced-motion user wait.
+ *
+ * The wordmark needs a variable font — see TextPressure's font contract. Pass
+ * `fontFamily` / `fontUrl` to point at the KOL variable font (a consumer asset).
+ *
+ * @param {string}    text           wordmark string fed to TextPressure
+ * @param {string}    fontFamily     wordmark font family (→ TextPressure)
+ * @param {string}    [fontUrl]      variable-font URL → TextPressure @font-face
+ * @param {() => void} onComplete    fired after the exit slide-up (or at once, reduced)
+ * @param {boolean}   dismissOnClick click the curtain to slide up + complete
+ * @param {string}    bgColor        backdrop color (KOL token / CSS color)
+ * @param {string}    markColor      wordmark + chevron color (KOL token / CSS color)
+ * @param {number}    wordmarkDelay  ms before the wordmark fades in
+ * @param {number}    scrollDelay    ms before the chevron cue reveals
+ * @param {number}    exitDuration   seconds for the slide-up exit tween
+ */
+export default function ColorLoader({
+  text = 'KOLKRABBI',
+  fontFamily = 'var(--kol-font-family-sans)',
+  fontUrl,
+  onComplete,
+  dismissOnClick = false,
+  bgColor = 'var(--kol-surface-primary)',
+  markColor = 'var(--kol-fg-emphasis)',
+  wordmarkDelay = 1000,
+  scrollDelay = 2000,
+  exitDuration = 1.8,
+}) {
+  const reducedMotion = usePrefersReducedMotion()
+  const [showMark, setShowMark] = useState(reducedMotion)
+  const [showCue, setShowCue] = useState(reducedMotion)
+  const [exiting, setExiting] = useState(false)
+  const controls = useAnimationControls()
+  const firedRef = useRef(false)
+
+  const fireComplete = () => {
+    if (firedRef.current) return
+    firedRef.current = true
+    onComplete?.()
+  }
+
+  useEffect(() => {
+    if (reducedMotion) {
+      // Skip the whole sequence: static frame, signal done at once.
+      setShowMark(true)
+      setShowCue(true)
+      fireComplete()
+      return undefined
+    }
+    const markTimer = setTimeout(() => setShowMark(true), wordmarkDelay)
+    const cueTimer = setTimeout(() => setShowCue(true), scrollDelay)
+    return () => {
+      clearTimeout(markTimer)
+      clearTimeout(cueTimer)
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [reducedMotion, wordmarkDelay, scrollDelay])
+
+  const dismiss = () => {
+    if (exiting) return
+    setExiting(true)
+    if (reducedMotion) {
+      fireComplete()
+      return
+    }
+    controls
+      .start({ y: '-100%', transition: { duration: exitDuration, ease: 'easeInOut' } })
+      .then(fireComplete)
+  }
+
+  return (
+    <Motion.div
+      className={`flex h-full w-full flex-col ${dismissOnClick ? 'cursor-pointer' : ''}`}
+      style={{ backgroundColor: bgColor }}
+      animate={controls}
+      initial={{ y: 0 }}
+      onClick={dismissOnClick ? dismiss : undefined}
+    >
+      {/* Top third — spacer */}
+      <div className="flex flex-1 items-end justify-center self-stretch" />
+
+      {/* Middle third — wordmark + cue */}
+      <div className="flex flex-1 flex-col items-center justify-center gap-12 self-stretch">
+        <Motion.div
+          initial={{ opacity: 0 }}
+          animate={{ opacity: showMark ? 1 : 0 }}
+          transition={{ duration: reducedMotion ? 0 : 0.5 }}
+          className="w-full px-6"
+        >
+          <div className="mx-auto h-20 w-full max-w-[280px] sm:h-24 sm:max-w-[400px] md:h-32 md:max-w-[600px]">
+            <TextPressure
+              text={text}
+              fontFamily={fontFamily}
+              fontUrl={fontUrl}
+              textColor={markColor}
+              flex
+              width
+              weight
+              italic={false}
+              minFontSize={40}
+            />
+          </div>
+        </Motion.div>
+
+        <Motion.div
+          initial={{ opacity: 0, y: 0 }}
+          animate={{
+            opacity: showCue ? 0.6 : 0,
+            y: showCue && !reducedMotion ? [0, 12, 0] : 0,
+          }}
+          transition={{
+            opacity: { duration: reducedMotion ? 0 : 0.5 },
+            y: reducedMotion ? { duration: 0 } : { duration: 1.5, repeat: Infinity, ease: 'easeInOut' },
+          }}
+          className="mt-12"
+          style={{ color: markColor }}
+        >
+          <svg
+            width="32"
+            height="32"
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            strokeWidth="2"
+            strokeLinecap="round"
+            strokeLinejoin="round"
+            aria-hidden="true"
+          >
+            <polyline points="6 9 12 15 18 9" />
+          </svg>
+        </Motion.div>
+      </div>
+
+      {/* Bottom third — spacer */}
+      <div className="flex flex-1 items-end justify-center self-stretch" />
+    </Motion.div>
+  )
+}

package/src/GlyphMetricsSection.jsx

@@ -0,0 +1,107 @@
+import { useState } from 'react'
+import SpecimenSectionHeader from './SpecimenSectionHeader.jsx'
+import GlyphMetricsGrid from './GlyphMetricsGrid.jsx'
+
+/**
+ * GlyphMetricsSection — the "Glyph Metrics" specimen section: a section header
+ * (Roman/Italic or Weight/Width axis dropdowns) over the parsed-metric
+ * GlyphMetricsGrid. Owns the style/axis selection state and feeds the grid the
+ * chosen font URL + `variationSettings`.
+ *
+ * Composes the package's existing canonical leaves — SpecimenSectionHeader
+ * (promoted from the monorepo's `FoundrySection`) and GlyphMetricsGrid (which
+ * already handles font I/O with opentype.js as an optional peer).
+ *
+ * @param {Object} props
+ * @param {string} props.fontFamily - CSS family fallback until the parsed face injects.
+ * @param {string} props.fontUrlRoman - Roman/upright font URL.
+ * @param {string} props.fontUrlItalic - Italic font URL.
+ * @param {'normal'|'italic'} props.fontStyle - Initial style variant.
+ * @param {string} props.badgeText - Section title text.
+ * @param {boolean} props.showDropdown - Show the Roman/Italic style dropdown.
+ * @param {boolean} props.hasWeight - Font has a weight axis.
+ * @param {boolean} props.hasWidth - Font has a width axis.
+ * @param {Array<{label,weight}>} props.weights - Weight axis options.
+ * @param {Array<{label,width}>} props.widths - Width axis options.
+ */
+const GlyphMetricsSection = ({
+  fontFamily = 'TGMalromur',
+  fontUrlRoman,
+  fontUrlItalic,
+  fontStyle = 'normal',
+  badgeText = 'Málrómur',
+  showDropdown = true,
+  // Variable font axis support
+  hasWeight = false,
+  hasWidth = false,
+  weights = [],
+  widths = []
+}) => {
+  const [selectedStyleVariant, setSelectedStyleVariant] = useState(
+    fontStyle === 'italic' ? 'italic' : 'roman'
+  )
+  const [selectedAxis] = useState('weight')
+  const [selectedWeight, setSelectedWeight] = useState(400)
+  const [selectedWidth, setSelectedWidth] = useState(100)
+
+  const isItalic = selectedStyleVariant === 'italic'
+
+  // Select the correct font URL based on the dropdown
+  const currentFontUrl = isItalic ? fontUrlItalic : fontUrlRoman
+
+  // Build axis options for dropdown
+  const axisOptions = []
+  if (hasWeight) axisOptions.push({ label: 'Weight', value: 'weight' })
+  if (hasWidth) axisOptions.push({ label: 'Width', value: 'width' })
+
+  // Build value options based on selected axis
+  const valueOptions = selectedAxis === 'weight'
+    ? weights.map(w => ({ label: w.label, value: w.weight }))
+    : widths.map(w => ({ label: w.label, value: w.width }))
+
+  const selectedValue = selectedAxis === 'weight' ? selectedWeight : selectedWidth
+  const onValueChange = selectedAxis === 'weight' ? setSelectedWeight : setSelectedWidth
+
+  // Show axis dropdown if font has variable axes
+  const showAxisDropdown = axisOptions.length > 0
+
+  // Get variation settings for the glyph display
+  const variationSettings = {}
+  if (hasWeight) variationSettings.wght = selectedWeight
+  if (hasWidth) variationSettings.wdth = selectedWidth
+
+  // Style dropdown: roman/italic when font has italic
+  const italicOptions = [
+    { label: 'Roman', value: 'roman' },
+    { label: 'Italic', value: 'italic' }
+  ]
+
+  return (
+    <section className="w-full py-12 lg:py-16">
+      <div className="max-w-[1400px] mx-auto flex flex-col gap-8">
+        <SpecimenSectionHeader
+          selectedStyle={showDropdown ? selectedStyleVariant : showAxisDropdown ? selectedValue : undefined}
+          onStyleChange={showDropdown ? setSelectedStyleVariant : showAxisDropdown ? onValueChange : undefined}
+          showDropdown={showDropdown || (showAxisDropdown && valueOptions.length > 0)}
+          styleOptions={showDropdown ? italicOptions : valueOptions}
+          badgeText={badgeText}
+          icon="foundation"
+          size="sm"
+          showWeightDropdown={showAxisDropdown && valueOptions.length > 0}
+          weightOptions={valueOptions}
+          selectedWeight={selectedValue}
+          onWeightChange={onValueChange}
+        />
+
+        <GlyphMetricsGrid
+          fontUrl={currentFontUrl}
+          fontFamily={fontFamily}
+          fontStyle="normal"
+          variationSettings={variationSettings}
+        />
+      </div>
+    </section>
+  )
+}
+
+export default GlyphMetricsSection

package/src/TextPressure.jsx

@@ -0,0 +1,331 @@
+import { useEffect, useRef, useState } from 'react'
+import { usePrefersReducedMotion } from '@kolkrabbi/kol-component'
+
+// 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>
+  )
+}