")`,
}}/>
);
}
// TR logo mark rendered in SVG so we can animate stroke
function LogoMark({ size = 120, progress = 1 }) {
const dash = 2 * Math.PI * 90;
const drawn = dash * clamp(progress, 0, 1);
return (
);
}
// Tiny label chip
function Chip({ children, color = TR.green, x, y }) {
const { localTime } = useSprite();
const t = Easing.easeOutBack(clamp(localTime / 0.5, 0, 1));
return (
{children}
);
}
// Scan line that sweeps across the phone during inspection
function ScanLine({ x, y, width, height, delay = 0, duration = 1.4, color = TR.green }) {
const { localTime } = useSprite();
const t = clamp((localTime - delay) / duration, 0, 1);
if (t <= 0 || t >= 1) return null;
const eased = Easing.easeInOutCubic(t);
const opacity = Math.sin(t * Math.PI);
return (
);
}
// Tiny hotspot marker that pops onto the phone
function Hotspot({ x, y, delay = 0, label, color = TR.amber }) {
const { localTime } = useSprite();
const t = clamp((localTime - delay) / 0.5, 0, 1);
if (t <= 0) return null;
const s = Easing.easeOutBack(t);
const pulse = 1 + Math.sin((localTime - delay) * 3) * 0.1;
return (
);
}
// Staggered text reveal (word by word)
function WordReveal({ text, x, y, size = 72, color = TR.ink, weight = 700, delay = 0, stagger = 0.08, font = TR.sans, letterSpacing = '-0.03em', lineHeight = 1.02 }) {
const { localTime } = useSprite();
const words = text.split(' ');
return (
{words.map((w, i) => {
const t = clamp((localTime - delay - i * stagger) / 0.5, 0, 1);
const e = Easing.easeOutCubic(t);
return (
{w}
);
})}
);
}
// A checklist item that ticks in
function CheckItem({ x, y, label, delay = 0, color = TR.green, neg = false, idx = 0 }) {
const { localTime } = useSprite();
const t = clamp((localTime - delay - idx * 0.15) / 0.5, 0, 1);
const e = Easing.easeOutCubic(t);
const drawT = clamp((localTime - delay - idx * 0.15 - 0.15) / 0.35, 0, 1);
return (
);
}
// Animated counter
function Counter({ x, y, from = 0, to = 100, suffix = '', size = 140, delay = 0, duration = 1.2, color = TR.ink }) {
const { localTime } = useSprite();
const t = clamp((localTime - delay) / duration, 0, 1);
const v = from + (to - from) * Easing.easeOutCubic(t);
return (
{Math.round(v)}{suffix}
);
}
// Big gradient "A", "A/B", "B/C" grade mark rendered large
function GradeMark({ x, y, label, size = 340, delay = 0 }) {
const { localTime } = useSprite();
const t = clamp((localTime - delay) / 0.7, 0, 1);
const e = Easing.easeOutBack(t);
return (
{label}
);
}
// Small caps meta label (eyebrow)
function Eyebrow({ x, y, text, color = TR.inkDim, delay = 0 }) {
const { localTime } = useSprite();
const t = clamp((localTime - delay) / 0.5, 0, 1);
const e = Easing.easeOutCubic(t);
return (
{text}
);
}
// Price chip with animated percentage discount
function PriceBlock({ x, y, newPrice, oldPrice, savePct, delay = 0 }) {
const { localTime } = useSprite();
const t1 = clamp((localTime - delay) / 0.5, 0, 1);
const t2 = clamp((localTime - delay - 0.3) / 0.6, 0, 1);
const e1 = Easing.easeOutCubic(t1);
const e2 = Easing.easeOutCubic(t2);
return (
Ab Preis
−{savePct}% GESPART
);
}
Object.assign(window, {
TR, HaloRing, GridBG, NoiseBG, LogoMark, Chip, ScanLine, Hotspot,
WordReveal, CheckItem, Counter, GradeMark, Eyebrow, PriceBlock,
});