@kolkrabbi/kol-component 0.2.0 → 0.4.0

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>
+  )
+}

package/src/atoms/TiltCard.jsx

@@ -0,0 +1,127 @@
+import { useEffect, useState } from 'react'
+import { motion, useSpring, useTransform } from 'framer-motion'
+import useTilt from '../hooks/useTilt.js'
+import usePrefersReducedMotion from '../hooks/usePrefersReducedMotion.js'
+
+/**
+ * True on coarse-pointer (touch) devices. Local to TiltCard; re-evaluates on
+ * device/orientation change via the media-query change event (the monorepo
+ * source froze this in a module-load const — fixed on recreate).
+ */
+function useCoarsePointer() {
+  const [coarse, setCoarse] = useState(
+    () => typeof window !== 'undefined' && window.matchMedia('(pointer: coarse)').matches,
+  )
+
+  useEffect(() => {
+    const mq = window.matchMedia('(pointer: coarse)')
+    const onChange = () => setCoarse(mq.matches)
+    mq.addEventListener('change', onChange)
+    return () => mq.removeEventListener('change', onChange)
+  }, [])
+
+  return coarse
+}
+
+/**
+ * TiltCard — self-contained image card with a spring-based 3D tilt that
+ * follows the pointer (via the shared useTilt hook). On coarse-pointer
+ * devices or when the user prefers reduced motion it renders a plain,
+ * tilt-free card — no springs, no listeners.
+ *
+ * `variant="grounded"` gives a "planted at the bottom" feel: tilt targets
+ * are snapped to 3 zones, rescaled, chased by a slower lazy spring, and the
+ * card only ever tilts back — never forward — pivoting about its bottom edge
+ * (`transform-origin: center bottom`).
+ *
+ * Purely structural — no tokens, no colors. Corner radius, size, and any
+ * surface treatment come from the consumer via `className` (the image
+ * wrapper is `rounded-[inherit]`, so the root's radius clips the image);
+ * overlays (labels, gradients) render above the image via `children`.
+ *
+ * @param {string}    src         image source (rendered `object-cover`)
+ * @param {string}    alt         image alt text
+ * @param {string}    className   classes on the root — supplies size + corner radius
+ * @param {string}    variant     'default' (free tilt) | 'grounded' (zone-snapped, bottom-pinned)
+ * @param {number}    magnitude   max tilt in degrees (±)
+ * @param {number}    perspective CSS transform perspective in px
+ * @param {ReactNode} children    content overlaid above the image
+ */
+export default function TiltCard({
+  src,
+  alt = '',
+  className = '',
+  variant = 'default',
+  magnitude = 4,
+  perspective = 700,
+  children,
+}) {
+  const coarse = useCoarsePointer()
+  const reduced = usePrefersReducedMotion()
+
+  if (coarse || reduced) {
+    return (
+      <div className={`relative ${className}`}>
+        <div className="absolute inset-0 overflow-hidden rounded-[inherit]">
+          <img src={src} alt={alt} className="w-full h-full object-cover" />
+        </div>
+        {children}
+      </div>
+    )
+  }
+
+  return (
+    <TiltCardInner
+      src={src}
+      alt={alt}
+      className={className}
+      variant={variant}
+      magnitude={magnitude}
+      perspective={perspective}
+    >
+      {children}
+    </TiltCardInner>
+  )
+}
+
+function TiltCardInner({ src, alt, className, variant, magnitude, perspective, children }) {
+  const tilt = useTilt({ magnitude, perspective })
+  const grounded = variant === 'grounded'
+
+  /* Zone-based tilt: normalize the spring output back to -1..1, snap it to
+   * 3 zones, rescale to ±2.5°, and let a slower lazy spring catch up so the
+   * card lags and settles into quantized angles. rotateX is clamped to
+   * min(0, …) — grounded cards only ever tilt back. */
+  const zones = 3
+  const snap = (v) => Math.round(v * zones) / zones
+  const lazySpring = { stiffness: 250, damping: 25, mass: 0.6 }
+
+  const targetX = useTransform(tilt.motionValues.rotateX, (v) =>
+    grounded ? Math.min(0, snap(-v / magnitude) * 2.5) : v,
+  )
+  const targetY = useTransform(tilt.motionValues.rotateY, (v) =>
+    grounded ? snap(v / magnitude) * 2.5 : v,
+  )
+
+  const lazyRotateX = useSpring(targetX, lazySpring)
+  const lazyRotateY = useSpring(targetY, lazySpring)
+
+  const style = grounded
+    ? { ...tilt.style, rotateX: lazyRotateX, rotateY: lazyRotateY, transformOrigin: 'center bottom' }
+    : tilt.style
+
+  return (
+    <motion.div
+      ref={tilt.ref}
+      className={`relative ${className}`}
+      style={style}
+      onMouseMove={tilt.onMouseMove}
+      onMouseLeave={tilt.onMouseLeave}
+    >
+      <div className="absolute inset-0 overflow-hidden rounded-[inherit]">
+        <img src={src} alt={alt} className="w-full h-full object-cover" />
+      </div>
+      {children}
+    </motion.div>
+  )
+}

package/src/atoms/TypeSample.jsx

@@ -0,0 +1,50 @@
+/**
+ * TypeSample — a single labeled type-specimen block: an optional mono caption
+ * over one paragraph whose typography is driven entirely by props via inline
+ * style. The atomic unit of the type-specimen kit — stack several to show a
+ * scale, a weight range, or a family; adjacent samples get a hairline
+ * separator (`.kol-type-sample + .kol-type-sample`).
+ *
+ * Presentational — arbitrary px values are the point, so props map to inline
+ * style rather than fixed kol-* size stops. Label and children render
+ * verbatim as authored.
+ *
+ * @param {string}    family     font family name (wrapped as `"family", sans-serif`); defaults to the KOL sans token
+ * @param {number}    weight     font-weight
+ * @param {boolean}   italic     italic sample
+ * @param {number}    size       font-size in px
+ * @param {number}    lineHeight line-height in px; unitless 1.2 when unset
+ * @param {string}    label      mono caption above the sample (omit to hide)
+ * @param {ReactNode} children   the specimen text itself
+ */
+export default function TypeSample({
+  family,
+  weight = 400,
+  italic = false,
+  size = 32,
+  lineHeight,
+  label,
+  children,
+}) {
+  return (
+    <div className="kol-type-sample py-6">
+      {label && (
+        <p className="kol-helper-12 tracking-wider text-meta m-0 mb-3">
+          {label}
+        </p>
+      )}
+      <p
+        className="kol-type-sample-body m-0 text-auto"
+        style={{
+          fontFamily: family ? `"${family}", sans-serif` : 'var(--kol-font-family-sans)',
+          fontWeight: weight,
+          fontStyle: italic ? 'italic' : 'normal',
+          fontSize: `${size}px`,
+          lineHeight: lineHeight ? `${lineHeight}px` : '1.2',
+        }}
+      >
+        {children}
+      </p>
+    </div>
+  )
+}

package/src/atoms/TypeSpecCard.jsx

@@ -0,0 +1,42 @@
+/**
+ * TypeSpecCard — a two-column type-spec row: a left meta panel of key/value
+ * pairs (font metrics) beside a live sample slot on the right, with an
+ * optional corner label. The "data-sheet" member of the type-specimen kit —
+ * pairs the numeric spec of a type style with a rendered example of it
+ * (often a TypeSample passed as children, composed at the call site).
+ *
+ * Single column on mobile; `240px + fluid` two-column at lg. `meta` is
+ * arbitrary tuples — no fixed metric schema. Sample paragraphs get 16px
+ * rhythm via `.kol-type-spec-sample p` (Preflight zeroes <p> margins).
+ *
+ * @param {string}                label    corner caption, absolute top-left (omit to hide)
+ * @param {Array<[string, ReactNode]>} meta key/value rows in the left panel
+ * @param {ReactNode}             children the live type sample on the right
+ */
+export default function TypeSpecCard({ label, meta = [], children }) {
+  return (
+    <div className="kol-type-spec relative py-12 border-t border-fg-08">
+      {label && (
+        <span className="kol-type-spec-label kol-helper-12 tracking-widest text-meta absolute top-4 left-0">
+          {label}
+        </span>
+      )}
+      <div className="kol-type-spec-row grid grid-cols-1 gap-6 lg:grid-cols-[240px_minmax(0,1fr)] lg:gap-12 items-start pt-6">
+        <div className="kol-type-spec-meta flex flex-col">
+          {meta.map(([key, value]) => (
+            <div
+              key={key}
+              className="kol-type-spec-meta-row grid grid-cols-[auto_minmax(0,1fr)] gap-4 items-baseline py-2 border-b border-[var(--kol-fg-04)] last:border-b-0"
+            >
+              <span className="kol-helper-10 text-meta">{key}</span>
+              <span className="kol-helper-10 text-strong text-right [overflow-wrap:anywhere]">{value}</span>
+            </div>
+          ))}
+        </div>
+        <div className="kol-type-spec-sample min-w-0">
+          {children}
+        </div>
+      </div>
+    </div>
+  )
+}

package/src/hooks/cssVar.js

@@ -0,0 +1,53 @@
+/**
+ * CSS-variable + color utilities for token-doc widgets (ColorRamp,
+ * SpectrumGrid, swatch tables). One probe-based resolver instead of the
+ * three inline getComputedStyle forks the monorepo sources carried.
+ * Plain functions, not hooks — they live here because src/hooks is the
+ * taxonomy's only non-component folder.
+ */
+
+/** Read a custom property's raw value off an element (default: :root). */
+export function resolveCssVar(name, el) {
+  if (typeof document === 'undefined') return ''
+  const target = el || document.documentElement
+  const prop = name.startsWith('--') ? name : `--${name}`
+  return getComputedStyle(target).getPropertyValue(prop).trim()
+}
+
+/**
+ * Resolve ANY css color expression (var(), color-mix(), keywords) to the
+ * browser's computed `rgb(...)`/`rgba(...)` form via a detached probe —
+ * getPropertyValue alone can't evaluate color-mix.
+ */
+export function resolveCssColor(value, el) {
+  if (typeof document === 'undefined') return ''
+  const probe = document.createElement('span')
+  probe.style.display = 'none'
+  probe.style.color = value
+  ;(el || document.body).appendChild(probe)
+  const out = getComputedStyle(probe).color
+  probe.remove()
+  return out
+}
+
+/**
+ * Perceptual is-this-color-light test (BT.709 luma) — drives contrast
+ * label flips on swatches. Accepts hex or rgb()/rgba() strings; any other
+ * expression goes through resolveCssColor first.
+ */
+export function isLight(color) {
+  let r, g, b
+  const hex = color.match(/^#([0-9a-f]{3}|[0-9a-f]{6})$/i)
+  if (hex) {
+    let h = hex[1]
+    if (h.length === 3) h = h.split('').map((c) => c + c).join('')
+    r = parseInt(h.slice(0, 2), 16)
+    g = parseInt(h.slice(2, 4), 16)
+    b = parseInt(h.slice(4, 6), 16)
+  } else {
+    const rgb = (color.startsWith('rgb') ? color : resolveCssColor(color)).match(/[\d.]+/g)
+    if (!rgb) return false
+    ;[r, g, b] = rgb.map(Number)
+  }
+  return (0.2126 * r + 0.7152 * g + 0.0722 * b) / 255 > 0.55
+}