// ============================================================ // HomePage - product-led Ligand-X overview // ============================================================ const CORE_CAPABILITIES = [ { name: "Project workspace", decision: "Keep assets tied to one experiment" }, { name: "Molecule library", decision: "Track ligands, formats, and generated molecules" }, { name: "Ketcher editing", decision: "Draw, edit, import, and export chemical structures" }, { name: "Mol* viewing", decision: "Review proteins, complexes, pockets, and poses" }, { name: "Protein cleaning", decision: "Prepare raw structures for modeling" }, { name: "Pocket finding", decision: "Identify candidate binding sites" }, { name: "Docking", decision: "Screen ligands and compare poses" }, { name: "MD", decision: "Move promising complexes into simulation" }, { name: "MSA/alignment", decision: "Add sequence context around targets" }, ]; const CORE_LABELS = [ "Project workspace", "Molecule library", "Ketcher editing", "Mol* viewing", "Protein cleaning", "Pocket finding", "Docking", "MD", "MSA/alignment", ]; const HOME_PRO_MODULES = [ { name: "QC", decision: "Electronic properties, charges, Fukui indices, and frequencies" }, { name: "ADMET", decision: "Property and liability screening" }, { name: "Boltz-2", decision: "Structure and affinity prediction" }, { name: "ABFE/RBFE", decision: "Binding free-energy prioritization" }, { name: "GenAI", decision: "Generative design and optimization" }, ]; const STORY_STAGES = [ { n: "01", eyebrow: "Create a project", title: "Start with a persistent workspace, not another folder tree.", text: "Import proteins, ligands, structures, and generated assets into one project so the experiment has a durable record from the first file onward.", points: ["Project-scoped proteins, molecules, pockets, jobs, and outputs", "Ketcher editing with SMILES, SDF, and PDB import/export", "Mol* review for proteins, complexes, pockets, and poses"], annotType: "files", annotValue: "project.json · 1M17.pdb · leads.sdf", cli: "lx new && lx import …", }, { n: "02", eyebrow: "Prepare the target", title: "Turn raw structures into modeling-ready systems.", text: "Clean proteins, detect components, handle waters, ions, metals, and ligands, find pockets, and align sequences before the calculation starts.", points: ["PDB, mmCIF, SDF, and SMILES-to-3D handling", "Protein cleanup and component detection", "Pocket finding plus pairwise and multiple-sequence alignment"], annotType: "outputs", annotValue: "cleaned.pdb · pockets[] · alignment", cli: "lx prep --align --pockets", }, { n: "03", eyebrow: "Screen and simulate", title: "Move from docked poses to MD trajectories without leaving the app.", text: "Dock ligands, review ranked poses, inspect interactions, run MD, and track jobs through the same local workspace.", points: ["AutoDock Vina docking with receptor and ligand preparation", "Batch results, affinity scores, interactions, and pose downloads", "OpenMM minimization, equilibration, trajectories, checkpoints, and analytics"], annotType: "outputs", annotValue: "poses[] · scores · trajectory.dcd", cli: "lx dock && lx md", }, { n: "04", eyebrow: "Prioritize with Pro", title: "Add advanced modules when the project needs stronger decisions.", text: "Licensed Pro services extend the same workflow with property risk, binding confidence, design expansion, and mechanistic insight.", points: ["QC and ADMET for property risk", "Boltz-2, ABFE, and RBFE for binding confidence", "GenAI workflows for design expansion"], annotType: "inputs", annotValue: "license key · target.pdb · ligand.sdf", cli: "lx pro boltz · lx pro abfe", pro: true, }, ]; const SERVICES = [ { name: "Jobs survive refreshes", detail: "restart the page without losing the run" }, { name: "Live progress on every run", detail: "watch setup, execution, and outputs update" }, { name: "One project record", detail: "inputs, jobs, and results stay connected" }, { name: "Your own CPU/GPU", detail: "use the hardware you already control" }, { name: "Desktop or server", detail: "same workflow for local and headless installs" }, { name: "No managed cloud", detail: "keep structures and results on your machine" }, ]; const USE_CASES = [ { title: "Academic lab", text: "Run teaching, docking, MD, and local project workflows without managed cloud infrastructure.", }, { title: "Startup discovery team", text: "Keep early target and ligand work private while standardizing project assets and computational jobs.", }, { title: "Computational chemist", text: "Move from cleaned structures to docked poses to MD trajectories without manually stitching tools together.", }, ]; // Hero viewer uses the real Mol* engine (same library + representation // recipe as the Ligand-X app). 1M17 = EGFR kinase with erlotinib (AQ4). const HERO_PDB_URL = 'https://files.rcsb.org/download/1M17.pdb'; const HERO_CARBON = 0x2a9d8f; // brand teal for ligand carbons (element-symbol theme) const HERO_CHAIN = 'A'; const HERO_RESI = [696, 944]; // kinase domain core — crops the floppy terminal tails const HERO_LIGAND = 'AQ4'; // erlotinib // Keep only the folded kinase core (chain A, 696-944) + the ligand, dropping // waters, ions, other chains, and the disordered termini that read as // "unfolded" trailing strands. Mirrors the prior 3Dmol hero crop. function cleanHeroPdb(text) { const [lo, hi] = HERO_RESI; const out = []; for (const line of text.split('\n')) { const rec = line.slice(0, 6); if (rec === 'ATOM ') { const chain = line[21]; const resSeq = parseInt(line.slice(22, 26), 10); if (chain === HERO_CHAIN && resSeq >= lo && resSeq <= hi) out.push(line); } else if (rec === 'HETATM') { if (line.slice(17, 20).trim() === HERO_LIGAND) out.push(line); } else if (rec.startsWith('CRYST') || rec.startsWith('SCALE')) { out.push(line); } } out.push('END'); return out.join('\n'); } const HERO_STRUCTURES = [ { label: 'Protein · EGFR · 1M17', key: 'protein' }, { label: 'Complex · erlotinib · 1M17', key: 'complex' }, { label: 'Ligand · erlotinib', key: 'ligand' }, ]; const HERO_DEFAULT = 1; const MoleculeScene = () => (
pocket A −9.4 kcal/mol trajectory · 5 ns
); const HeroShowcase = () => { const viewerRef = React.useRef(null); // Mol* canvas container const pluginRef = React.useRef(null); // Mol* PluginContext const sceneRef = React.useRef(null); // { molstar, polymer, ligand, *Data } const idleTimer = React.useRef(null); const touched = React.useRef(false); const lastSpinDirection = React.useRef(1); const dragSample = React.useRef(null); const [current, setCurrent] = React.useState(HERO_DEFAULT); const [loading, setLoading] = React.useState(true); const [failed, setFailed] = React.useState(false); const [hintOn, setHintOn] = React.useState(true); const [promptOn, setPromptOn] = React.useState(false); // Show / hide representations + reframe the camera for each switcher state. // Visibility is driven by representation opacity (alpha 0/1), the same // mechanism the app's toggleComponentVisibility uses. const applyState = (index) => { const plugin = pluginRef.current; const scene = sceneRef.current; if (!plugin || !scene) return; const showPolymer = index !== 2; // protein + complex const showLigand = index !== 0; // complex + ligand try { const b = plugin.state.data.build(); let changed = false; const setAlpha = (sel, show) => { if (!sel) return; b.to(sel).update((old) => ({ ...old, type: { ...old.type, params: { ...(old.type && old.type.params), alpha: show ? 1 : 0 } }, })); changed = true; }; setAlpha(scene.polymer, showPolymer); setAlpha(scene.ligand, showLigand); if (changed) b.commit(); } catch (e) { console.warn('[hero] representation toggle failed:', e); } let sphere = scene.structureData && scene.structureData.boundary && scene.structureData.boundary.sphere; if (index === 2 && scene.ligandData && scene.ligandData.boundary) sphere = scene.ligandData.boundary.sphere; else if (index === 0 && scene.polymerData && scene.polymerData.boundary) sphere = scene.polymerData.boundary.sphere; const cam = plugin.managers && plugin.managers.camera; if (sphere && cam && cam.focusSphere) { try { cam.focusSphere(sphere, { durationMs: 420, extraRadius: index === 2 ? 3 : 1 }); return; } catch (e) { /* fall through */ } } if (plugin.canvas3d) plugin.canvas3d.requestCameraReset(); }; const startSpin = () => { const plugin = pluginRef.current; if (!plugin || !plugin.canvas3d) return; const direction = lastSpinDirection.current < 0 ? -1 : 1; plugin.canvas3d.setProps({ trackball: { animate: { name: 'spin', params: { speed: 0.18 * direction } } } }); }; const stopSpin = () => { const plugin = pluginRef.current; if (!plugin || !plugin.canvas3d) return; plugin.canvas3d.setProps({ trackball: { animate: { name: 'off', params: {} } } }); }; // Resume the gentle spin 4s after the last interaction. const scheduleIdleSpin = () => { clearTimeout(idleTimer.current); idleTimer.current = setTimeout(startSpin, 4000); }; React.useEffect(() => { let cancelled = false; const el = viewerRef.current; const init = async () => { const molstar = await loadMolstar(); if (cancelled || !viewerRef.current) return; const viewer = await molstar.Viewer.create(viewerRef.current, { layoutIsExpanded: false, layoutShowControls: false, layoutShowRemoteState: false, layoutShowSequence: false, layoutShowLog: false, layoutShowLeftPanel: false, viewportShowExpand: false, viewportShowControls: false, viewportShowSettings: false, viewportShowSelectionMode: false, viewportShowAnimation: false, viewportShowTrajectoryControls: false, pdbProvider: 'rcsb', emdbProvider: 'rcsb', }); if (cancelled) { try { viewer.plugin.dispose(); } catch (e) {} return; } const plugin = viewer.plugin; pluginRef.current = plugin; // Transparent background, no axis widget. Throw-to-spin inertia: // staticMoving:false keeps the last rotation delta alive after pointer // release; dynamicDampingFactor controls how fast it decays per frame // (lower = longer coast). Default is staticMoving:true / factor:0.2 // which stops dead on release. if (plugin.canvas3d) { plugin.canvas3d.setProps({ transparentBackground: true, camera: { helper: { axes: { name: 'off', params: {} } } }, trackball: { staticMoving: false, dynamicDampingFactor: 0.055 }, }); } // Disable hover highlights. The highlight system is two-layered: the // lociHighlights manager records which atoms are highlighted (data), and // the renderer draws them. Setting renderer.highlightStrength to 0 only // dims the draw — atoms are still marked and outline effects still show. // Patching the manager methods to no-ops stops highlights being recorded. const lh = plugin.managers.interactivity.lociHighlights; lh.highlight = () => {}; lh.highlightOnly = () => {}; lh.highlightOnlyExtend = () => {}; // HiDPI sharpness. pixelScale is a Canvas3DContext prop, NOT a renderer // prop — setting it on canvas3d.renderer is silently ignored. In Mol*'s // default "scaled" mode the drawing buffer renders at CSS-pixel // resolution (pixelScale 1 ignores devicePixelRatio), so on high-DPR // phones the browser upscales it and the hero looks pixelated. Render the // buffer at 2x CSS resolution instead (the param's max; retina-sharp on // dpr<=2, far sharper on dpr 3, capped so phones don't render 9x pixels). if (plugin.canvas3dContext) { plugin.canvas3dContext.setProps({ pixelScale: 2 }); } // Build the structure manually so we keep refs for the switcher // (mirrors the app's MiniMolstarViewer recipe: fetch text + rawData). const pdbText = await fetch(HERO_PDB_URL).then((r) => { if (!r.ok) throw new Error('PDB fetch failed: ' + r.status); return r.text(); }); if (cancelled) { try { plugin.dispose(); } catch (e) {} return; } const data = await plugin.builders.data.rawData({ data: cleanHeroPdb(pdbText), label: '1M17' }); const trajectory = await plugin.builders.structure.parseTrajectory(data, 'pdb'); const model = await plugin.builders.structure.createModel(trajectory); const structure = await plugin.builders.structure.createStructure(model); const polymer = await plugin.builders.structure.tryCreateComponentStatic(structure, 'polymer'); let polymerRepr = null; if (polymer) { polymerRepr = await plugin.builders.structure.representation.addRepresentation(polymer, { type: 'cartoon', color: 'chain-id', }); } const ligand = await plugin.builders.structure.tryCreateComponentStatic(structure, 'ligand'); let ligandRepr = null; if (ligand) { ligandRepr = await plugin.builders.structure.representation.addRepresentation(ligand, { type: 'ball-and-stick', color: 'element-symbol', colorParams: { carbonColor: { name: 'uniform', params: { value: HERO_CARBON } } }, typeParams: { multipleBonds: 'symmetric' }, }); } if (cancelled) { try { plugin.dispose(); } catch (e) {} return; } sceneRef.current = { molstar, polymer: polymerRepr, ligand: ligandRepr, polymerData: polymer && polymer.data, ligandData: ligand && ligand.data, structureData: structure && structure.data, }; applyState(current); // Disable click-to-select and click-to-focus. Both behaviors subscribe // to plugin.behaviors.interaction.click (an RxJS Subject). Patching // next() to a no-op after the structure is loaded (so initial camera // framing is unaffected) silences all click interactions in one place. plugin.behaviors.interaction.click.next = () => {}; setLoading(false); // Gentle invitation: spin briefly, show the drag prompt, until the // visitor takes over. setTimeout(() => { if (cancelled || touched.current) return; setPromptOn(true); startSpin(); scheduleIdleSpin(); }, 1100); }; // Defer the ~5MB load until the browser is idle so it never blocks LCP. const ric = window.requestIdleCallback || ((cb) => setTimeout(cb, 250)); const ricId = ric(() => { init().catch((err) => { if (cancelled) return; console.warn('[hero] Mol* init failed:', err); setFailed(true); setLoading(false); }); }); const rememberThrowDirection = (e) => { const sample = dragSample.current; if (!sample || e.pointerId !== sample.pointerId) return; const dx = e.clientX - sample.x; if (Math.abs(dx) < 4) return; lastSpinDirection.current = dx > 0 ? 1 : -1; dragSample.current = { pointerId: e.pointerId, x: e.clientX }; }; const onGrab = (e) => { touched.current = true; setHintOn(false); setPromptOn(false); stopSpin(); clearTimeout(idleTimer.current); if (typeof e.pointerId === 'number') { dragSample.current = { pointerId: e.pointerId, x: e.clientX }; try { e.currentTarget.setPointerCapture(e.pointerId); } catch (err) {} } else { scheduleIdleSpin(); } }; const onMove = (e) => rememberThrowDirection(e); // Schedule idle spin from release so the throw coast plays out fully // before the gentle spin resumes. const onRelease = (e) => { rememberThrowDirection(e); dragSample.current = null; scheduleIdleSpin(); }; // Prevent Mol*'s scroll-zoom — viewer is rotate-only. Mol* attaches its // wheel handler directly to the canvas element, so a bubbling listener on // the container fires AFTER Mol* already zoomed. A capturing listener fires // first, stopPropagation() prevents the event from ever reaching the canvas. const blockZoom = (e) => e.stopPropagation(); if (el) { el.addEventListener('pointerdown', onGrab); el.addEventListener('pointermove', onMove); el.addEventListener('pointerup', onRelease); el.addEventListener('pointercancel', onRelease); el.addEventListener('wheel', onGrab, { passive: true }); el.addEventListener('wheel', blockZoom, { capture: true, passive: true }); } const hintTimer = setTimeout(() => setHintOn(false), 5500); return () => { cancelled = true; clearTimeout(idleTimer.current); clearTimeout(hintTimer); if (window.cancelIdleCallback && typeof ricId === 'number') { try { window.cancelIdleCallback(ricId); } catch (e) {} } if (el) { el.removeEventListener('pointerdown', onGrab); el.removeEventListener('pointermove', onMove); el.removeEventListener('pointerup', onRelease); el.removeEventListener('pointercancel', onRelease); el.removeEventListener('wheel', onGrab); el.removeEventListener('wheel', blockZoom, { capture: true }); } const p = pluginRef.current; if (p) { try { p.dispose(); } catch (e) {} pluginRef.current = null; } }; }, []); // React to switcher changes once the scene is live. React.useEffect(() => { if (loading || failed) return; applyState(current); }, [current, loading, failed]); const ready = !loading && !failed; return (
The local CADD workbench

Integrated.
Self-hosted.
Reliable.
Ligand-X

A free, self-hosted desktop app for computational drug discovery — docking, MD, and more, running on your own hardware.

{loading && (
)}
{ready && promptOn && !touched.current && ( )} {ready && (
{HERO_STRUCTURES[current].label}
)} {failed && (
{HERO_STRUCTURES[HERO_DEFAULT].label}
)}
{HERO_STRUCTURES.map((s, i) => (
drag to rotate · scroll to zoom
); }; const CredibilityBand = () => (
Built with Open Source tools Runs locally on your hardware Always free for Academics
); const PAIN_ITEMS = [ "Structures live in one folder. Ligands live somewhere else.", "Docking outputs need manual parsing before they're useful.", "MD setup becomes a separate workflow from the docking review.", "Results are hard to connect back to the original experiment.", "Reproducing a calculation means reconstructing the full script chain.", ]; const PainValueSection = () => (
Pain / value

Built for the work between tools.

Ligand-X is for teams that need serious computational chemistry workflows, but do not want their discovery process spread across scripts, folders, cloud tools, and disconnected viewers.

{PAIN_ITEMS.map((item, i) => ( {String(i + 1).padStart(2, "0")} {item} ))}

Ligand-X keeps proteins, molecules, pockets, jobs, poses, trajectories, and generated outputs in one project workspace.

); const WorkflowSection = () => (
Main workflow

From target setup to project decisions.

{STORY_STAGES.map((stage, i) => ( ))}
); const WorkflowRow = ({ stage, first, index = 0 }) => (
{stage.n}
{stage.eyebrow}

{stage.title}

{stage.text}

 ); const LocalValueSection = () => (
Why local matters

Your structures and results stay on your hardware.

Ligand-X is designed for sensitive structures, early ligand ideas, internal targets, and teams that want reproducible workflows without forcing every calculation through a managed cloud app.

{["No required cloud upload for sensitive structures", "Use local CPU/GPU resources", "Works for desktop or server deployment", "Suitable for academic labs, startups, and internal research environments"].map((item, i) => ( {item} ))}
); const OpenCoreProSection = () => (
Open Core vs Pro

Start with the local workbench. Add advanced decision modules when needed.

Each layer is framed by the decisions it supports, from day-to-day project execution to higher-confidence prioritization.

Open Core

Everyday local workflows for project setup, target preparation, screening, simulation, and review.

{CORE_LABELS.map((item) => {item})}

Pro

Licensed services for higher-confidence prioritization once the project needs more evidence.

{HOME_PRO_MODULES.map((item) => (
{item.name} {item.decision}
))}
); const ArchitectureProofSection = () => (
Why it's reliable

Your work persists, reproduces, and stays on your machine.

{SERVICES.map((svc, i) => ( {svc.name} {svc.detail} ))}
); const UseCasesSection = () => (
Use cases

Built for teams that need workflow control.

Ligand-X fits small teams and individual computational chemists who want local execution, project continuity, and a path to advanced methods.

{USE_CASES.map((item, i) => (

{item.title}

{item.text}

 ))}
); const INSTALL_STEPS = [ ["01", "Install Docker", "Docker Desktop or Docker Engine + Compose plugin"], ["02", "Open the Ligand-X launcher", "Download the launcher for your OS — no terminal needed"], ["03", "Select modules and start", "Enable Free modules, or add licensed Pro modules"], ["04", "Open localhost:3000", "Frontend, gateway, and workers all live"], ]; const QuickStartSection = () => (
Installation

Use the launcher for desktops, or Compose for servers.

{INSTALL_STEPS.map(([n, title, sub], i) => ( {n}
{title}
{sub}
 ))}
# Desktop path{"\n"} Install Docker Desktop or Docker Engine{"\n"} Open the Ligand-X launcher{"\n"} Select Free or licensed Pro modules{"\n"} ready at http://localhost:3000 ), }, { label: "server", copy: "curl -L https://github.com/kon-218/ligand-x-launcher/releases/latest/download/ligand-x-runtime.zip -o runtime.zip\nunzip runtime.zip -d ligand-x && cd ligand-x\ncp .env.production.template .env.production # then edit secrets\ndocker compose --env-file .env.production pull\ndocker compose --env-file .env.production up -d", content: ( <> curl -L https://github.com/kon-218/ligand-x-launcher/releases/latest/download/ligand-x-runtime.zip -o runtime.zip{"\n"} unzip runtime.zip -d ligand-x && cd ligand-x{"\n"} cp .env.production.template .env.production # then edit secrets{"\n"} docker compose --env-file .env.production pull{"\n"} docker compose --env-file .env.production up -d ), }, ]} />
); const CTASection = () => (
Open core + licensed Pro

Start local. Add advanced modules when the project needs them.

Run the open-core workbench for projects, structures, docking, and MD. Compare Free and Pro when your team needs property risk, binding confidence, generative design.

); const HomePage = () => (
); Object.assign(window, { HomePage });