);
}
// A floating observation. Serif italic is the reflective register, so the insight
// itself is set in it — the one thing on the card that is VELOUR speaking.
function HeroInsightCard({ p, out, delay }) {
const fade = {
opacity: out ? 0 : 1,
transform: out ? "translateY(6px)" : "none",
transition: `opacity .42s cubic-bezier(.16,1,.3,1) ${delay}, transform .42s cubic-bezier(.16,1,.3,1) ${delay}`,
};
return (
Velour insight
{p.insight}
);
}
// Layered dashboard sneak-peek that answers the cursor: the whole stack tilts in
// perspective, the floating observations drift at their own depths, and the four
// tiles are live — hover one and it summons that pillar's insight, click it and the
// page glides to that pillar working for real. Left alone, the pair cycles by itself,
// so the composition is already moving when someone first lands.
function HeroAppPreview() {
const ref = React.useRef(null);
const swap = React.useRef(null);
const reduced = vlrReduced();
const [i, setI] = React.useState(0);
const [out, setOut] = React.useState(false);
const [lit, setLit] = React.useState(null);
React.useEffect(() => () => { if (swap.current) clearTimeout(swap.current); }, []);
// At rest the pair advances on its own; a held tile pins it until release.
React.useEffect(() => {
if (reduced || lit !== null) return;
const iv = setInterval(() => {
setOut(true);
swap.current = setTimeout(() => { setI((x) => (x + 1) % PREVIEW_PILLARS.length); setOut(false); }, 420);
}, 5200);
return () => clearInterval(iv);
}, [reduced, lit]);
const swapTo = (next) => {
if (swap.current) clearTimeout(swap.current);
if (reduced) { setI(next); setOut(false); return; }
setOut(true);
swap.current = setTimeout(() => { setI(next); setOut(false); }, 300);
};
const hold = (idx) => {
setLit(idx);
document.documentElement.style.setProperty("--vlr-accent", PREVIEW_PILLARS[idx].color);
if (idx !== i) swapTo(idx);
};
const release = () => setLit(null);
const open = (target) => {
const t = document.getElementById(target);
if (t) t.scrollIntoView({ behavior: reduced ? "auto" : "smooth" });
};
const onMove = (e) => {
const el = ref.current;
if (!el || reduced) return;
const r = el.getBoundingClientRect();
const x = (e.clientX - r.left) / r.width - 0.5;
const y = (e.clientY - r.top) / r.height - 0.5;
el.style.transform = `perspective(1100px) rotateX(${(-y * 6.5).toFixed(2)}deg) rotateY(${(x * 8.5).toFixed(2)}deg)`;
el.querySelectorAll("[data-depth]").forEach((f) => {
const d = +f.dataset.depth;
f.style.transform = `translate3d(${(x * d).toFixed(1)}px, ${(y * d).toFixed(1)}px, 0)`;
});
};
const onLeave = () => {
const el = ref.current;
if (!el) return;
el.style.transform = "perspective(1100px)";
el.querySelectorAll("[data-depth]").forEach((f) => { f.style.transform = "none"; });
release();
};
const focus = PREVIEW_PILLARS[i];
const second = PREVIEW_PILLARS[(i + 2) % PREVIEW_PILLARS.length];
return (
{/* Floating observation — bottom-left, nearer layer, half a beat behind. It clears
the tile row deliberately: the tiles are hoverable now, so a card resting over
one would eat the interaction it is meant to advertise. */}
);
}
function Hero() {
const scrollToPillars = () => {
const t = document.getElementById("pillars");
if (t) t.scrollIntoView({ behavior: vlrReduced() ? "auto" : "smooth" });
};
return (
{/* Was "4.9 on the App Store". VELOUR has never shipped to the App Store,
and there is no rating to average. Anything standing here has to be a
claim about the product itself, not about an audience it does not have. */}
Nothing to keep up withFree to start, and free to stay.