Strand

A graphite lab-operations interface with a three.js DNA cluster viewer, plate and sample tracking, a synthetic genome browser and a workflow DAG.

• Best forDevelopers building research laboratory and sequencing workflow interfaces.

• Sequencing

  Select a run and lane to inspect the synthetic DNA cluster, read alignment, per-lane quality metrics and run events.

• Samples

  Browse a 96-well plate, sample and intake tables, QC profiles, generated tube labels and chain-of-custody details.

• Variants

  Pan and zoom a synthetic genome browser, filter variant calls, inspect read pileups and flag a call for review.

• Pipeline

  Follow a simulated workflow DAG, growing step logs, compute usage, queued runs and failed-job retry controls.

• Scientific 3D viewer

  A point-cloud double helix follows the selected run and lane. A travelling read head fills an alignment strip, with rotation, pause and reset controls.

• Sample and genome workflows

  Plate selection, sample intake, a draggable genome window, variant filters and the pipeline queue update local demonstration state.

• Editable lab model

  Runs, samples, chromosomes, variant calls and pipeline stages live in the data module; geometry and synthetic reads are separated in lib/helix.ts.

• Responsive and reduced motion

  Four views include keyboard navigation and a layout for smaller screens. The hydration-safe reduced-motion hook shows composed still states; three.js scenes include lighter software-rendering tiers and a fallback when WebGL is unavailable.

Responsive layouts, keyboard-accessible navigation and reduced-motion support.

Research-use interface only, not for clinical or diagnostic use. Instruments, samples, DNA reads, variants and pipeline jobs are fictional browser simulations. No sequencer, LIMS, scheduler or backend is connected; exports show local confirmations.

• IncludedFictional demonstration data and local interactions, ready to edit. The included README identifies the data files and model.
• Not includedBackend, database, authentication, payments or AI services. Features that look connected are simulated; connect your own services when you adapt the code.

• Complete Next.js project
• 4 animated views
• Source files and project assets
• README with setup and customization
• LICENSE.md

Stack and requirements

• StackNext.js 16, React 19, TypeScript, Tailwind CSS v4, Framer Motion, Three.js, Lucide icons
• FontsIBM Plex Sans, IBM Plex Mono
• RequiresNode.js 20.9 or later, npm, and working knowledge of React and Next.js

Run it locally

Extract the ZIP, open a terminal in the project folder, then run:

npm install
npm run dev

Open localhost:3000. The README covers the data, colors, fonts and animations.

• Price$9 USD, one-time payment. No subscription or renewal.
• TaxesApplicable VAT and sales tax are included in the price. The total is shown before you pay.
• LicenseUnlimited personal and client projects. No resale or redistribution of the source. Read the license
• DeliveryAfter payment, Polar emails your receipt and a download link for the ZIP.
• RefundsIf the files don’t install or run as described and can’t be fixed within 7 days, you get a full refund. Refund policy
• Supporthello@buildindex.dev for the template as delivered.

Secure checkout by Polar. More answers in the questions.