// Shared primitives & small helpers
const { useState, useEffect, useRef, useMemo, useCallback } = React;
// Render a title array: strings + { em: "..." } chips
function RichTitle({ parts, className = "", reveal = false }) {
if (reveal) {
return (
{parts.map((p, i) => {
const text = typeof p === "string" ? p : p.em;
const em = typeof p !== "string";
return (
{text.split(" ").map((w, j) => (
{em ? {w} : <>{w} }
))}
);
})}
);
}
return (
{parts.map((p, i) =>
typeof p === "string" ? {p} : {p.em}
)}
);
}
// Bold markdown (** **) within a paragraph
function Rich({ children }) {
if (typeof children !== "string") return children;
const parts = children.split(/(\*\*[^*]+\*\*)/g);
return parts.map((p, i) =>
p.startsWith("**") ? {p.slice(2, -2)} : {p}
);
}
// IntersectionObserver-based reveal
function useReveal(opts = {}) {
const ref = useRef(null);
const [shown, setShown] = useState(false);
useEffect(() => {
const el = ref.current;
if (!el) return;
if (shown) return;
const io = new IntersectionObserver(
(entries) => {
entries.forEach((e) => {
if (e.isIntersecting) {
setShown(true);
io.disconnect();
}
});
},
{ threshold: opts.threshold ?? 0.15, rootMargin: opts.rootMargin ?? "0px 0px -60px 0px" }
);
io.observe(el);
return () => io.disconnect();
}, [shown]);
return [ref, shown];
}
function Reveal({ children, className = "", as = "div", style }) {
const [ref, shown] = useReveal();
const Tag = as;
return (
{children}
);
}
// Reveal headline that animates word-by-word
function RevealWords({ parts, as = "h2", className = "" }) {
const [ref, shown] = useReveal();
const Tag = as;
const words = [];
parts.forEach((p, i) => {
const text = typeof p === "string" ? p : p.em;
const em = typeof p !== "string";
text.split(/(\s+)/).forEach((w, j) => {
if (/^\s+$/.test(w)) {
words.push({w});
} else if (w.length) {
words.push(
em
? {w}
: {w}
);
}
});
});
// Wrap so nested still animates properly by adding stagger via delay
return (
{words.map((w, i) => {
const delay = `${i * 35}ms`;
if (w.type === "em") {
return React.cloneElement(w, { key: i }, React.cloneElement(w.props.children, { style: { transitionDelay: delay } }));
}
return React.cloneElement(w, { key: i, style: { transitionDelay: delay, whiteSpace: w.props.style?.whiteSpace || undefined } });
})}
);
}
// Static waveform canvas (drawn once, seeded)
function StaticWave({ seed = 1, color = "var(--ink)", accent = "var(--accent)", bars = 120, height = 40, active = 0 }) {
const ref = useRef(null);
useEffect(() => {
const c = ref.current;
if (!c) return;
const ctx = c.getContext("2d");
const dpr = window.devicePixelRatio || 1;
const w = c.offsetWidth;
c.width = w * dpr;
c.height = height * dpr;
ctx.scale(dpr, dpr);
ctx.clearRect(0, 0, w, height);
const styles = getComputedStyle(document.documentElement);
const inkColor = color.startsWith("var") ? styles.getPropertyValue("--ink").trim() : color;
const accentColor = accent.startsWith("var") ? styles.getPropertyValue("--accent").trim() : accent;
const barW = (w / bars) * 0.55;
const gap = (w / bars) * 0.45;
let x = 0;
let s = seed;
for (let i = 0; i < bars; i++) {
s = (s * 9301 + 49297) % 233280;
const n = s / 233280;
// shape: central emphasis
const bell = Math.sin((i / bars) * Math.PI);
const h = Math.max(2, (n * 0.6 + bell * 0.6) * height * 0.9);
const y = (height - h) / 2;
ctx.fillStyle = i / bars < active ? accentColor : inkColor;
ctx.globalAlpha = i / bars < active ? 1 : 0.35;
ctx.fillRect(x, y, barW, h);
x += barW + gap;
}
}, [seed, bars, height, active]);
return ;
}
// Animated, pulse-based waveform (no audio; smooth ambient)
function AnimatedWave({ color = "var(--ink)", accent = "var(--accent)", bars = 180, height = 48, running = true }) {
const ref = useRef(null);
const rafRef = useRef();
useEffect(() => {
const c = ref.current;
if (!c) return;
const ctx = c.getContext("2d");
const dpr = window.devicePixelRatio || 1;
function resize() {
const w = c.offsetWidth;
c.width = w * dpr;
c.height = height * dpr;
ctx.setTransform(1, 0, 0, 1, 0, 0);
ctx.scale(dpr, dpr);
}
resize();
window.addEventListener("resize", resize);
const styles = getComputedStyle(document.documentElement);
let t0 = performance.now();
function frame(now) {
const w = c.offsetWidth;
ctx.clearRect(0, 0, w, height);
const inkColor = styles.getPropertyValue("--ink").trim() || "#111";
const accentColor = styles.getPropertyValue("--accent").trim() || "#C8102E";
const t = (now - t0) / 1000;
const barW = (w / bars) * 0.45;
const gap = (w / bars) * 0.55;
let x = 0;
for (let i = 0; i < bars; i++) {
const p = i / bars;
const bell = Math.pow(Math.sin(p * Math.PI), 1.5);
const wave =
Math.sin(p * 24 + t * 1.4) * 0.45 +
Math.sin(p * 9 + t * 2.1) * 0.35 +
Math.sin(p * 3 - t * 0.8) * 0.25;
const h = Math.max(2, (bell * 0.9 + Math.abs(wave) * 0.6) * height * 0.85);
const y = (height - h) / 2;
const useAccent = i % 11 === 3;
ctx.fillStyle = useAccent ? accentColor : inkColor;
ctx.globalAlpha = useAccent ? 0.85 : 0.55;
ctx.fillRect(x, y, barW, h);
x += barW + gap;
}
if (running) rafRef.current = requestAnimationFrame(frame);
}
rafRef.current = requestAnimationFrame(frame);
return () => {
window.removeEventListener("resize", resize);
cancelAnimationFrame(rafRef.current);
};
}, [bars, height, running]);
return ;
}
// Icons
const Icon = {
Arrow: (p) => (
),
Play: (p) => (
),
Pause: (p) => (
),
Sun: (p) => (
),
Moon: (p) => (
),
Phone: (p) => (
),
Mail: (p) => (
),
Plus: (p) => (
),
};
Object.assign(window, { RichTitle, Rich, useReveal, Reveal, RevealWords, StaticWave, AnimatedWave, Icon, Wordmark, BrandLockup, LogoMark });
// ---- Brand ----
function LogoMark({ size = 40 }) {
return (
);
}
function Wordmark({ size = "sm" }) {
const fs = { sm: 20, md: 28, lg: 44, xl: 96 }[size] || 20;
return (
Eric
spricht
);
}
function BrandLockup() {
return (
<>
Werbe- & Synchronsprecher
);
}