function FloatingDemo({ positionClass, animationClass, initialScale = 0.8, children }) { const [offset, setOffset] = React.useState({ x: 0, y: 0 }); const [scale, setScale] = React.useState(initialScale); const [showPreviewHint, setShowPreviewHint] = React.useState(false); const hintTimer = React.useRef(null); const innerRef = React.useRef(null); const triggerPreviewHint = () => { setShowPreviewHint(true); clearTimeout(hintTimer.current); hintTimer.current = setTimeout(() => setShowPreviewHint(false), 1800); }; React.useEffect(() => () => clearTimeout(hintTimer.current), []); const handleMouseDown = (e) => { if (e.target.closest('button, input, textarea, a, select, [data-no-drag]')) return; const origX = offset.x; const origY = offset.y; const startX = e.clientX; const startY = e.clientY; document.body.style.userSelect = 'none'; document.body.style.cursor = 'grabbing'; const onMove = (ev) => { setOffset({ x: origX + ev.clientX - startX, y: origY + ev.clientY - startY, }); }; const onUp = () => { document.body.style.userSelect = ''; document.body.style.cursor = ''; window.removeEventListener('mousemove', onMove); window.removeEventListener('mouseup', onUp); }; window.addEventListener('mousemove', onMove); window.addEventListener('mouseup', onUp); e.preventDefault(); }; // Corner-specific sign (which mouse direction grows the window) and the // anchor compensation (which translate components must move with the scale). const CORNER_CONFIG = { nw: { sign: [-1, -1], anchor: [1, 1], cursor: 'nwse-resize' }, ne: { sign: [ 1, -1], anchor: [0, 1], cursor: 'nesw-resize' }, sw: { sign: [-1, 1], anchor: [1, 0], cursor: 'nesw-resize' }, se: { sign: [ 1, 1], anchor: [0, 0], cursor: 'nwse-resize' }, }; const handleResizeStart = (corner) => (e) => { e.stopPropagation(); e.preventDefault(); const { sign, anchor, cursor } = CORNER_CONFIG[corner]; const startX = e.clientX; const startY = e.clientY; const startScale = scale; const startOffset = { ...offset }; // Unscaled intrinsic size of the inner wrapper. const rect = innerRef.current.getBoundingClientRect(); const W = rect.width / scale; const H = rect.height / scale; document.body.style.userSelect = 'none'; document.body.style.cursor = cursor; const onMove = (ev) => { const dx = ev.clientX - startX; const dy = ev.clientY - startY; const delta = (sign[0] * dx + sign[1] * dy) / 400; const newScale = Math.max(0.5, Math.min(2, startScale + delta)); const ds = newScale - startScale; setScale(newScale); setOffset({ x: startOffset.x - W * ds * anchor[0], y: startOffset.y - H * ds * anchor[1], }); }; const onUp = () => { document.body.style.userSelect = ''; document.body.style.cursor = ''; window.removeEventListener('mousemove', onMove); window.removeEventListener('mouseup', onUp); }; window.addEventListener('mousemove', onMove); window.addEventListener('mouseup', onUp); }; const handleResizeDoubleClick = (e) => { e.stopPropagation(); setScale(initialScale); }; const cornerPositions = { nw: 'top-0 left-0', ne: 'top-0 right-0', sw: 'bottom-0 left-0', se: 'bottom-0 right-0', }; // Outer wrapper keeps the floating bounce animation running at all times. // Inner wrapper applies the user's drag translate + resize scale on top, so // dragging and the float animation compose instead of conflicting. return ReactDOM.createPortal(
{children}
{/* "Visual preview only" hint */}
Visual preview only
{/* Resize handles — one per corner */} {Object.keys(CORNER_CONFIG).map((corner) => (
))}
, document.body ); } export default function FlowFloatLanding() { const [activeDemos, setActiveDemos] = React.useState([]); const [glowDemos, setGlowDemos] = React.useState([]); const [hiddenSideDemos, setHiddenSideDemos] = React.useState([]); const closeDemo = (demoKey) => setActiveDemos(activeDemos.filter(d => d !== demoKey)); const closeSideDemo = (demoKey) => setHiddenSideDemos((prev) => [...prev, demoKey]); const SIDE_DEMOS = ['flownotes', 'flowtasks']; const handleDemoClick = (demoKey) => { if (SIDE_DEMOS.includes(demoKey)) { if (hiddenSideDemos.includes(demoKey)) { setHiddenSideDemos((prev) => prev.filter(d => d !== demoKey)); } setGlowDemos((prev) => [...prev, demoKey]); setTimeout(() => setGlowDemos((prev) => prev.filter(d => d !== demoKey)), 1600); } else { setActiveDemos((prev) => [...prev, demoKey]); } }; React.useEffect(() => { if (activeDemos.length === 0) return; const onKey = (e) => { if (e.key === 'Escape') setActiveDemos([]); }; window.addEventListener('keydown', onKey); return () => window.removeEventListener('keydown', onKey); }, [activeDemos]); return (
{/* ALWAYS-VISIBLE SIDE FLOATING DEMOS */} {/* FlowNotes — left side */} {!hiddenSideDemos.includes('flownotes') && (
{/* Top gloss */}
{/* Header */}
FlowNotes
{/* Search */}
Search notes...
{/* Notes list */}
{[ {text:"The best interfaces disappear. They don't make you think — they let you think.", time:"2m ago", pinned:true}, {text:"Meeting notes: rebrand kick-off went well. Logo direction = minimal, fluid. Follow up w/ Maya on color palette.", time:"18m ago"}, {text:"\"We are what we repeatedly do. Excellence, then, is not an act, but a habit.\" — Aristotle", time:"1h ago"}, {text:"Random thought — what if the app icon subtly animated when a timer is running? Like a slow pulse or glow.", time:"3h ago", done:true}, ].map((note, i) => (
{note.text}
{note.time}
{[ , , , , ].map((icon, j) => ( ))}
))}
{/* Input area */}