// Demo file shown on the simulated desktop and inside the Flik shelf.
// Matches what the real product shows for a HEIC photo: a thumbnail-style
// preview, a truncated filename, and inline "Convert to JPG" / "Remove"
// actions under the tile (per the heic_action screenshot).
const SOURCE_NAME = "IMG_4231.HEIC";
const CONVERTED_NAME = "IMG_4231.jpg";
function Hero() {
const demoRef = React.useRef(null);
const fileRef = React.useRef(null);
const [pos, setPos] = React.useState({ x: 0.18, y: 0.55 }); // % of demo
const [held, setHeld] = React.useState(false);
const [shelfOpen, setShelfOpen] = React.useState(false);
const [dropped, setDropped] = React.useState(false);
const [activeAction, setActiveAction] = React.useState(null); // "convert" | "remove" | null
const [converted, setConverted] = React.useState(false);
const [removed, setRemoved] = React.useState(false);
const [autoMode, setAutoMode] = React.useState(true);
const [edgeNear, setEdgeNear] = React.useState(false);
// ---- Auto-loop ----
React.useEffect(() => {
if (!autoMode) return;
let cancelled = false;
let timer;
const seq = async () => {
// reset
setPos({ x: 0.18, y: 0.55 });
setShelfOpen(false);
setDropped(false);
setActiveAction(null);
setConverted(false);
setRemoved(false);
setEdgeNear(false);
await wait(900);
if (cancelled) return;
// glide to right edge
await tween((t) => setPos({ x: 0.18 + (0.78 - 0.18) * t, y: 0.55 - 0.05 * Math.sin(t * Math.PI) }), 1400);
if (cancelled) return;
setEdgeNear(true);
await wait(280);
if (cancelled) return;
setShelfOpen(true);
await wait(600);
if (cancelled) return;
// snap into shelf
await tween((t) => setPos({ x: 0.78 + (0.86 - 0.78) * t, y: 0.55 - 0.05 + (0.28 - 0.50) * t }), 600);
if (cancelled) return;
setDropped(true);
setEdgeNear(false);
await wait(1100);
if (cancelled) return;
// press Convert to JPG
setActiveAction("convert");
await wait(700);
if (cancelled) return;
setConverted(true);
setActiveAction(null);
await wait(2400);
if (cancelled) return;
// close shelf
setShelfOpen(false);
await wait(700);
if (cancelled) return;
timer = setTimeout(seq, 200);
};
seq();
return () => { cancelled = true; if (timer) clearTimeout(timer); };
}, [autoMode]);
// ---- Pointer interaction ----
// Hover anywhere over the demo and the shelf reveals/hides based on the
// cursor's X position — same gesture the real product uses (edge-trigger).
// Threshold uses hysteresis: open at >0.78, close below 0.70, so the shelf
// doesn't flicker right at the boundary.
const onPointerEnter = () => {
// Any cursor interaction takes the demo out of auto-mode. The Reset pill
// in the hint bar puts it back.
if (autoMode) setAutoMode(false);
};
const onPointerDown = (e) => {
if (dropped) return;
e.preventDefault();
setAutoMode(false);
setHeld(true);
setDropped(false);
setConverted(false);
setRemoved(false);
setActiveAction(null);
e.currentTarget.setPointerCapture?.(e.pointerId);
};
const onPointerMove = (e) => {
if (!demoRef.current) return;
const rect = demoRef.current.getBoundingClientRect();
const x = (e.clientX - rect.left) / rect.width;
const y = (e.clientY - rect.top) / rect.height;
const cx = clamp(x, 0.06, 0.96);
const cy = clamp(y, 0.1, 0.92);
// Drag the file token only when held.
if (held) setPos({ x: cx, y: cy });
// Edge-trigger logic — always on, hover or drag.
if (autoMode) setAutoMode(false);
setEdgeNear(cx > 0.70);
if (cx > 0.78) setShelfOpen(true);
else if (cx < 0.70) setShelfOpen(false);
};
const onPointerUp = () => {
if (!held) return;
setHeld(false);
// If the cursor was inside the shelf zone, snap the file into the shelf;
// otherwise just release. Shelf open/close state stays driven by pointer
// position, NOT by whether we just dropped — so moving away still hides
// the shelf even if a file is on it.
if (pos.x > 0.78) {
setPos({ x: 0.86, y: 0.28 });
setDropped(true);
}
setEdgeNear(false);
};
// When the cursor leaves the demo entirely, treat it as "moved away from
// the edge": close the shelf, release any drag in progress.
const onPointerLeave = () => {
if (held) {
setHeld(false);
}
setEdgeNear(false);
setShelfOpen(false);
};
const handleConvert = () => {
if (converted || removed) return;
setActiveAction("convert");
setTimeout(() => {
setConverted(true);
setActiveAction(null);
}, 450);
};
const handleRemove = () => {
if (removed) return;
setActiveAction("remove");
setTimeout(() => setRemoved(true), 200);
};
const reset = () => {
setHeld(false);
setDropped(false);
setConverted(false);
setRemoved(false);
setActiveAction(null);
setEdgeNear(false);
setShelfOpen(false);
setPos({ x: 0.18, y: 0.55 });
setAutoMode(true);
};
const currentName = converted ? CONVERTED_NAME : SOURCE_NAME;
return (
Coming soon · macOS 14+ · Apple Silicon & Intel
Your downloads, one cursor away.
A live, ephemeral shelf for everything you download. Push your cursor
to the side of your screen — the shelf slides out, your file is
already on it. Tidy by default. For Mac.
{autoMode
? "Auto-demo · move your cursor near the right edge"
: (dropped
? (removed
? "Removed — reset to try again"
: (converted ? "Converted" : "Try Convert to JPG"))
: (shelfOpen
? "Drag the file in →"
: "Move your cursor to the right edge"))}
{!autoMode && (
)}
);
}
// ----- Visual building blocks -----
// Stylized photo preview — sky gradient + faint hill + tree silhouette.
// Used both on the simulated desktop tile and in the Flik shelf tile, so the
// tile in the shelf is recognizably "the same image" the user dragged.
function PhotoPreview() {
return (
);
}
// "Convert" icon — two opposing arrows in a swap pattern.
function ConvertIcon() {
return (
);
}
function TrayIcon() {
return (
);
}
function DemoMenubar() {
const [time, setTime] = React.useState(formatTime(new Date()));
React.useEffect(() => {
const t = setInterval(() => setTime(formatTime(new Date())), 30_000);
return () => clearInterval(t);
}, []);
return (
FinderFileEditViewGoWindowHelp{time}
);
}
function formatTime(d) {
const h = d.getHours();
const m = d.getMinutes();
const ampm = h >= 12 ? "PM" : "AM";
const hh = ((h + 11) % 12) + 1;
return `${hh}:${m.toString().padStart(2, "0")} ${ampm}`;
}
function clamp(n, lo, hi) { return Math.min(hi, Math.max(lo, n)); }
function wait(ms) { return new Promise(r => setTimeout(r, ms)); }
function tween(fn, dur) {
return new Promise(resolve => {
const start = performance.now();
function frame(t) {
const p = Math.min(1, (t - start) / dur);
const eased = p < 0.5 ? 2 * p * p : 1 - Math.pow(-2 * p + 2, 2) / 2;
fn(eased);
if (p < 1) requestAnimationFrame(frame); else resolve();
}
requestAnimationFrame(frame);
});
}
window.Hero = Hero;
{time}