// chrome.jsx — Kopfleiste, Fußleiste, Ticker, Cursor, Noise-Overlay, Intro-Sektion
function TopBar({ active, onJump, accent }) {
return (
⌬
Senso Digital
verfügbar ab Mai
);
}
function Marquee({ items, speed = 40 }) {
const joined = items.join(' • ');
return (
{joined} •
{joined} •
{joined} •
);
}
function Clock() {
const [t, setT] = React.useState(() => new Date());
React.useEffect(() => {
const i = setInterval(() => setT(new Date()), 1000);
return () => clearInterval(i);
}, []);
const pad = (n) => String(n).padStart(2, '0');
return (
{pad(t.getHours())}:{pad(t.getMinutes())}:{pad(t.getSeconds())}
);
}
function BottomBar({ active, accent }) {
return (
);
}
// Custom cursor (weich nachziehend)
function Cursor({ accent }) {
const dotRef = React.useRef(null);
const ringRef = React.useRef(null);
React.useEffect(() => {
let rx = window.innerWidth / 2, ry = window.innerHeight / 2;
let dx = rx, dy = ry;
let tx = rx, ty = ry;
let raf;
const loop = () => {
dx += (tx - dx) * 0.35;
dy += (ty - dy) * 0.35;
rx += (tx - rx) * 0.12;
ry += (ty - ry) * 0.12;
if (dotRef.current) dotRef.current.style.transform = `translate(${dx}px, ${dy}px) translate(-50%,-50%)`;
if (ringRef.current) ringRef.current.style.transform = `translate(${rx}px, ${ry}px) translate(-50%,-50%)`;
raf = requestAnimationFrame(loop);
};
const move = (e) => { tx = e.clientX; ty = e.clientY; };
const over = (e) => {
const t = e.target;
const hoverable = t.closest && t.closest('button, a, [data-hover]');
document.body.classList.toggle('cursor-hover', !!hoverable);
};
window.addEventListener('pointermove', move);
window.addEventListener('pointerover', over);
raf = requestAnimationFrame(loop);
return () => {
cancelAnimationFrame(raf);
window.removeEventListener('pointermove', move);
window.removeEventListener('pointerover', over);
};
}, []);
return (
<>
);
}
// Intro-Block (oberhalb des Rads) mit animiertem Schriftzug
function Intro({ accent }) {
return (
Portfolio · 2026
Ich
,
und
digital.
Fünf Disziplinen, eine Person. Dreh das Rad, um zu sehen,
was ich für dein Projekt tun kann — oder scroll einfach weiter.
scroll · klick · zieh das rad
);
}
function WordIn({ text, delay = 0, italic = false, accent }) {
return (
);
}
// "gestalte" — Editorial Serif, Letter-Morph (Design)
function GestalteWord() {
const letters = 'gestalte'.split('');
return (
{letters.map((c, i) => (
{c}
))}
);
}
// "animiere" — Sans Italic, Wobble/Bounce (Motion)
function AnimiereWord() {
const letters = 'animiere'.split('');
return (
{letters.map((c, i) => (
{c}
))}
);
}
// "programmiere" — Mono, Typewriter + Caret (Code)
function ProgrammiereWord() {
const text = 'programmiere';
const [shown, setShown] = React.useState(0);
React.useEffect(() => {
const start = setTimeout(() => {
let i = 0;
const id = setInterval(() => {
i++;
setShown(i);
if (i >= text.length) clearInterval(id);
}, 60);
}, 2100);
return () => clearTimeout(start);
}, []);
return (
>
{text.slice(0, shown)}
—
);
}
function HintArrow() {
return (
);
}
Object.assign(window, { TopBar, BottomBar, Cursor, Intro, Marquee });