Claude
61a40437d2
One-Pager mit Vite, React, Tailwind und Motion: WebGL-Seidenhintergrund, Chrom-Wortmarke, Scroll-Laufband, Preisliste mit Direktbuchung pro Leistung (Setmore-Deep-Links), Team-Raster mit Farb-Spotlight, Öffnungszeiten mit Live-Status sowie Impressum und Datenschutz. Logo ist ein Platzhalter. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01KBHsCnWNXAB2Le3gAEsivF
32 lines
856 B
TypeScript
32 lines
856 B
TypeScript
import { useLayoutEffect, useRef } from 'react'
|
|
|
|
/**
|
|
* Skaliert die Schriftgröße eines einzeiligen Elements so, dass es genau die Breite
|
|
* seines Elternelements ausfüllt (randlose Wortmarke).
|
|
*/
|
|
export function useFitText<T extends HTMLElement>(max = 400) {
|
|
const ref = useRef<T>(null)
|
|
|
|
useLayoutEffect(() => {
|
|
const el = ref.current
|
|
const parent = el?.parentElement
|
|
if (!el || !parent) return
|
|
|
|
const fit = () => {
|
|
el.style.fontSize = '100px'
|
|
const natural = el.scrollWidth
|
|
const available = parent.clientWidth
|
|
if (!natural || !available) return
|
|
el.style.fontSize = `${Math.min(max, (100 * available) / natural) * 0.995}px`
|
|
}
|
|
|
|
fit()
|
|
document.fonts?.ready.then(fit)
|
|
const ro = new ResizeObserver(fit)
|
|
ro.observe(parent)
|
|
return () => ro.disconnect()
|
|
}, [max])
|
|
|
|
return ref
|
|
}
|