// Hero — tilted tablet mockup with Inkly app UI + live drawable canvas const Wordmark = () => ( Inkly ); const Nav = () => { const [scrolled, setScrolled] = React.useState(false); React.useEffect(() => { const onScroll = () => setScrolled(window.scrollY > 8); onScroll(); window.addEventListener("scroll", onScroll, { passive: true }); return () => window.removeEventListener("scroll", onScroll); }, []); return (
Sign in Download
); }; // === Live drawable canvas (the paper layer) === const InkSurface = () => { const canvasRef = React.useRef(null); const drawing = React.useRef(false); const last = React.useRef(null); const [hasUserDrawn, setHasUserDrawn] = React.useState(false); React.useEffect(() => { const c = canvasRef.current; if (!c) return; const dpr = window.devicePixelRatio || 1; c.width = (c.offsetWidth || 760) * dpr; c.height = (c.offsetHeight || 380) * dpr; const ctx = c.getContext("2d"); ctx.scale(dpr, dpr); ctx.lineCap = "round"; ctx.lineJoin = "round"; }, []); const pos = (e) => { const c = canvasRef.current; const r = c.getBoundingClientRect(); const t = e.touches ? e.touches[0] : e; return { x: t.clientX - r.left, y: t.clientY - r.top, }; }; const start = (e) => { e.preventDefault(); drawing.current = true; last.current = pos(e); setHasUserDrawn(true); }; const move = (e) => { if (!drawing.current) return; e.preventDefault(); const p = pos(e); const ctx = canvasRef.current.getContext("2d"); ctx.strokeStyle = "#B8941F"; ctx.lineWidth = 2.4; ctx.beginPath(); ctx.moveTo(last.current.x, last.current.y); ctx.lineTo(p.x, p.y); ctx.stroke(); last.current = p; }; const end = () => { drawing.current = false; last.current = null; }; const clear = () => { const c = canvasRef.current; c.getContext("2d").clearRect(0, 0, c.width, c.height); setHasUserDrawn(false); }; return (
{!hasUserDrawn && ( Inkly — draw anywhere on this page )}
); }; // === Inkly App UI inside the tablet === const PenIcon = ({ tip = "fine", color = "currentColor" }) => { // simple stylus glyph variants const tips = { fine: , medium: , brush: , marker: , highlight: , }; return ( {tips[tip] || tips.fine} ); }; const ToolbarBtn = ({ children, active, onClick, className = "", title }) => ( ); const InklyAppUI = () => { const [tool, setTool] = React.useState(1); // 0..4 pens const [color, setColor] = React.useState(0); // 0..5 const [showPalette, setShowPalette] = React.useState(true); const colors = [ "oklch(0.18 0.01 280)", // black "oklch(0.62 0.21 28)", // red "oklch(0.58 0.18 250)", // blue "oklch(0.66 0.16 150)", // green null, // rainbow ]; const tools = ["fine", "medium", "brush", "marker", "highlight"]; return (
{/* === Top app bar === */}
Tytuł notatki…
{/* === Tools row === */}
{/* pen variants */} {tools.map((t, i) => ( setTool(i)}> ))} {/* tape/highlight chunky */}
{/* lasso, eraser pieces */} {/* "Bazgroł" chip */}
{/* color circles */} {[0,1,2,3,4].map((i) => ( ))}
{/* % */} % {/* Fill chip */}
{/* Insert tools */} Tt
{/* === Canvas area === */}
{/* Floating pen palette (left side) */} {showPalette && (
{[ { tip: 'fine', stroke: 'oklch(0.85 0.005 280)' }, { tip: 'medium', stroke: 'oklch(0.70 0.18 60)' }, { tip: 'brush', stroke: 'oklch(0.70 0.16 150)' }, ].map((p, i) => ( ))}
)} {/* status pill */}
120 Hz · {tools[tool]} · stylus + finger
{/* gesture indicator (bottom home pill) */}
); }; // === Tilted tablet frame === const Tablet = ({ children }) => (
{children}
{/* stylus */}
); const Hero = () => { return (
Now available — Android tablets, phones & web

Writing at the
speed of thought.

A handwriting and note-taking app engineered for the way ideas actually arrive — instantly, beautifully, everywhere. Native on Android tablets and phones, full-featured PWA on the desktop.

Android tablet · Android phone · Web (PWA)
{[ ["120 Hz", "High-refresh tuned"], ["<9 ms", "End-to-end latency"], ["∞ paper", "One endless canvas, no page breaks"], ["Offline", "Works on the plane, syncs later"], ].map(([n, l]) => (
{n}
{l}
))}
); }; window.Hero = Hero; window.Nav = Nav;