Block Crispr Studio
Live Demos HubBlock Crispr Studio
Interactive Shadcn-quality hypermedia component for Hyperstack.
Interactive Preview
✂️
CRISPR-Cas Precision Studio
SpCas9 (NGG)
Target Gene: HBB (Exon 1) • HbS E6V Sickle Mutation (chr11:5,227,002)
Disease Target
Enzyme:
SpCas9 (20 nt + NGG)
Nickase:
Wild-Type DSB
Dual-Strand Target Cleavage Architecture
Position: -3 bp Cleavage Site
20 nt Synthetic Single Guide RNA (sgRNA Protospacer)
5'—
A
T
G
—3'
G
A
C
T
C
C
T
G
A
G
G
A
G
A
A
G
T
C
T
G
T
G
G
C
C
✂️ DSB Blunt Cut (-3 bp)
3'—
T
A
C
—5'
C
T
G
A
G
G
A
C
T
C
C
T
C
T
T
C
A
G
A
C
A
C
C
G
G
HDR Repair ssODN Donor Template (Corrects HbS A>T)
Wild-Type Glu6 Recovered
5'-...CCTGAGGAGAAGTCTGCCGTTACTGCC...-3'
Cutting & Specificity Metrics
CFD / Doench 2016
On-Target Activity Score
EXCELLENT
88 / 100
Rule Set 2
Off-Target Specificity Score
MINIMAL RISK
94 / 100
MIT / CFD Score
Genome-Wide Off-Target Loci
0 Mismatches (On-target):
1 locus (chr11)
1 Mismatch:
0 loci
2 Mismatches:
2 loci (Intronic)
3 Mismatches:
14 loci (Non-coding)
Oligo: 5'-CACCGAGTCCTGAGGAGAAGTCTG-3'
•
GC: 55.0%
•
Tm: 58.2°C
Cas9 Thermodynamics: Validated
ΔG: -1.8 kcal/mol
@diag: CAS9_CALC_OK
HTML Source
<!-- =========================================================================
RESEARCH DESIGN BLOCK: CRISPR GENE EDITING STUDIO
gRNA Design, On/Off-Target Cleavage Risk Scoring & HDR/NHEJ Repair Modeling
========================================================================= -->
<div class="block-crispr-studio rounded-3xl bg-slate-950 border border-slate-800/80 shadow-2xl overflow-hidden flex flex-col select-none"
hx-state='{ "targetGene": "HBB", "targetLocus": "chr11:5,227,002", "editMode": "hdr", "onTargetScore": 88, "offTargetScore": 94, "gcContent": 55.0, "activePam": "TGG" }'>
<!-- ZONE 1: BLOCK HEADER -->
<div class="px-5 py-3.5 bg-slate-900/90 border-b border-slate-800 flex flex-wrap items-center justify-between gap-3">
<div class="flex items-center gap-3">
<div class="w-8 h-8 rounded-xl bg-purple-600/20 border border-purple-500/40 flex items-center justify-center text-purple-400 font-black text-sm">
✂️
</div>
<div>
<div class="flex items-center gap-2">
<span class="text-xs font-black uppercase tracking-wider text-purple-400">CRISPR-Cas Precision Studio</span>
<span class="px-1.5 py-0.5 rounded text-[9px] font-extrabold bg-purple-500/10 text-purple-400 border border-purple-500/20">SpCas9 (NGG)</span>
</div>
<h2 class="text-sm font-bold text-white flex items-center gap-2">
<span hx-text="'Target Gene: ' + targetGene + ' (Exon 1)'">Target Gene: HBB (Exon 1)</span>
<span class="text-slate-500">•</span>
<span class="text-xs text-slate-300 font-normal">HbS E6V Sickle Mutation (<span class="font-mono text-purple-300" hx-text="targetLocus">chr11:5,227,002</span>)</span>
</h2>
</div>
</div>
<!-- Editing Modality Switcher -->
<div class="flex items-center gap-1 bg-slate-950 p-1 rounded-2xl border border-slate-800 text-xs font-black">
<button class="px-2.5 py-1 rounded-xl transition-all"
hx-class='{ "bg-purple-600 text-white shadow-md shadow-purple-600/30": editMode === "nhej", "text-slate-400 hover:text-white": editMode !== "nhej" }'
hx-action="editMode = 'nhej'; $appz.haptic('selection')">NHEJ Knockout</button>
<button class="px-2.5 py-1 rounded-xl transition-all"
hx-class='{ "bg-purple-600 text-white shadow-md shadow-purple-600/30": editMode === "hdr", "text-slate-400 hover:text-white": editMode !== "hdr" }'
hx-action="editMode = 'hdr'; $appz.haptic('selection')">HDR Template</button>
<button class="px-2.5 py-1 rounded-xl transition-all"
hx-class='{ "bg-purple-600 text-white shadow-md shadow-purple-600/30": editMode === "base", "text-slate-400 hover:text-white": editMode !== "base" }'
hx-action="editMode = 'base'; $appz.haptic('selection')">Base Editor (ABE)</button>
<button class="px-2.5 py-1 rounded-xl transition-all"
hx-class='{ "bg-purple-600 text-white shadow-md shadow-purple-600/30": editMode === "prime", "text-slate-400 hover:text-white": editMode !== "prime" }'
hx-action="editMode = 'prime'; $appz.haptic('selection')">Prime pegRNA</button>
</div>
</div>
<!-- ZONE 2: CALIBRATION & TOOLBAR -->
<div class="px-5 py-2.5 bg-slate-900/40 border-b border-slate-800/80 flex flex-wrap items-center justify-between gap-3 text-xs">
<!-- Quick Target Gene Presets -->
<div class="flex items-center gap-1.5">
<span class="text-[10px] font-black uppercase tracking-wider text-slate-500 mr-1">Disease Target</span>
<button class="px-2.5 py-1 rounded-xl font-bold font-mono transition-all"
hx-class='{ "bg-purple-600 text-white": targetGene === "HBB", "bg-slate-900 text-slate-400": targetGene !== "HBB" }'
hx-action="targetGene = 'HBB'; targetLocus = 'chr11:5,227,002'; onTargetScore = 88; offTargetScore = 94; $appz.haptic('selection')">
HBB (Sickle Cell)
</button>
<button class="px-2.5 py-1 rounded-xl font-bold font-mono transition-all"
hx-class='{ "bg-purple-600 text-white": targetGene === "CCR5", "bg-slate-900 text-slate-400": targetGene !== "CCR5" }'
hx-action="targetGene = 'CCR5'; targetLocus = 'chr3:46,373,450'; onTargetScore = 92; offTargetScore = 89; $appz.haptic('selection')">
CCR5 (Δ32 HIV)
</button>
<button class="px-2.5 py-1 rounded-xl font-bold font-mono transition-all"
hx-class='{ "bg-purple-600 text-white": targetGene === "CFTR", "bg-slate-900 text-slate-400": targetGene !== "CFTR" }'
hx-action="targetGene = 'CFTR'; targetLocus = 'chr7:117,559,590'; onTargetScore = 81; offTargetScore = 96; $appz.haptic('selection')">
CFTR (F508del)
</button>
<button class="px-2.5 py-1 rounded-xl font-bold font-mono transition-all"
hx-class='{ "bg-purple-600 text-white": targetGene === "DMD", "bg-slate-900 text-slate-400": targetGene !== "DMD" }'
hx-action="targetGene = 'DMD'; targetLocus = 'chrX:31,180,200'; onTargetScore = 85; offTargetScore = 91; $appz.haptic('selection')">
DMD (Exon 51)
</button>
</div>
<!-- Protocol Parameter Badges -->
<div class="flex items-center gap-3">
<span class="text-[10px] font-bold text-slate-400 uppercase">Enzyme:</span>
<span class="px-2 py-0.5 rounded-lg bg-slate-900 border border-slate-800 font-mono font-bold text-purple-400 text-xs">SpCas9 (20 nt + NGG)</span>
<span class="text-[10px] font-bold text-slate-400 uppercase">Nickase:</span>
<span class="text-xs font-bold text-slate-400">Wild-Type DSB</span>
</div>
</div>
<!-- ZONE 3 & 4: DNA CLEAVAGE CANVAS & QUANTITATIVE INSPECTOR -->
<div class="grid grid-cols-1 lg:grid-cols-12 gap-0 min-h-[380px]">
<!-- ZONE 3: DUAL-STRAND DNA CLEAVAGE RIBBON (Cols 1..8) -->
<div class="lg:col-span-8 relative bg-slate-950 p-6 flex flex-col justify-between overflow-x-auto border-b lg:border-b-0 lg:border-r border-slate-800/80">
<div>
<div class="flex items-center justify-between pb-2 border-b border-slate-800/80 text-xs">
<span class="text-[10px] font-black uppercase tracking-widest text-purple-400">Dual-Strand Target Cleavage Architecture</span>
<span class="text-[10px] font-mono text-slate-400">Position: -3 bp Cleavage Site</span>
</div>
<!-- Cleavage Ribbon Visualizer -->
<div class="mt-6 space-y-4">
<!-- Guide RNA Overlay Banner -->
<div class="ml-16 mr-20 bg-purple-950/40 border border-purple-500/40 rounded-xl p-2 text-center relative">
<span class="text-[10px] font-extrabold uppercase tracking-widest text-purple-300">20 nt Synthetic Single Guide RNA (sgRNA Protospacer)</span>
<div class="absolute -bottom-2 left-1/2 -translate-x-1/2 w-0 h-0 border-l-4 border-r-4 border-t-4 border-l-transparent border-r-transparent border-t-purple-500"></div>
</div>
<!-- Sense Strand 5' -> 3' -->
<div class="flex items-center gap-1 font-mono font-black text-sm">
<span class="w-12 text-[10px] font-bold text-slate-500 text-right mr-1">5'—</span>
<div class="flex items-center gap-1 bg-slate-900/90 p-2 rounded-2xl border border-slate-800 shadow-inner">
<!-- Non-target prefix -->
<span class="px-1.5 py-1 rounded bg-slate-950 text-slate-400">A</span>
<span class="px-1.5 py-1 rounded bg-slate-950 text-slate-400">T</span>
<span class="px-1.5 py-1 rounded bg-slate-950 text-slate-400">G</span>
<!-- 20 nt Protospacer Region (Cyan Highlight) -->
<div class="flex items-center gap-1 px-1.5 py-1 rounded-xl bg-cyan-950/40 border border-cyan-500/50">
<span class="px-1 py-0.5 rounded bg-cyan-500/20 text-cyan-300">G</span>
<span class="px-1 py-0.5 rounded bg-cyan-500/20 text-cyan-300">A</span>
<span class="px-1 py-0.5 rounded bg-cyan-500/20 text-cyan-300">C</span>
<span class="px-1 py-0.5 rounded bg-cyan-500/20 text-cyan-300">T</span>
<span class="px-1 py-0.5 rounded bg-cyan-500/20 text-cyan-300">C</span>
<span class="px-1 py-0.5 rounded bg-cyan-500/20 text-cyan-300">C</span>
<span class="px-1 py-0.5 rounded bg-cyan-500/20 text-cyan-300">T</span>
<span class="px-1 py-0.5 rounded bg-cyan-500/20 text-cyan-300">G</span>
<span class="px-1 py-0.5 rounded bg-cyan-500/20 text-cyan-300">A</span>
<span class="px-1 py-0.5 rounded bg-cyan-500/20 text-cyan-300">G</span>
<span class="px-1 py-0.5 rounded bg-cyan-500/20 text-cyan-300">G</span>
<span class="px-1 py-0.5 rounded bg-cyan-500/20 text-cyan-300">A</span>
<span class="px-1 py-0.5 rounded bg-cyan-500/20 text-cyan-300">G</span>
<span class="px-1 py-0.5 rounded bg-cyan-500/20 text-cyan-300">A</span>
<span class="px-1 py-0.5 rounded bg-cyan-500/20 text-cyan-300">A</span>
<span class="px-1 py-0.5 rounded bg-cyan-500/20 text-cyan-300">G</span>
<span class="px-1 py-0.5 rounded bg-cyan-500/20 text-cyan-300">T</span>
<!-- Cut position scissor marker between these bases -->
<span class="px-1 py-0.5 rounded bg-cyan-500/20 text-cyan-300 border-r-2 border-rose-500">C</span>
<span class="px-1 py-0.5 rounded bg-cyan-500/20 text-cyan-300">T</span>
<span class="px-1 py-0.5 rounded bg-cyan-500/20 text-cyan-300">G</span>
</div>
<!-- PAM Motif (Amber Box: TGG) -->
<div class="flex items-center gap-1 px-1.5 py-1 rounded-xl bg-amber-950/50 border border-amber-500 shadow-lg">
<span class="px-1 py-0.5 rounded bg-amber-500/30 text-amber-300 font-black">T</span>
<span class="px-1 py-0.5 rounded bg-amber-500/30 text-amber-300 font-black">G</span>
<span class="px-1 py-0.5 rounded bg-amber-500/30 text-amber-300 font-black">G</span>
</div>
<!-- Downstream Suffix -->
<span class="px-1.5 py-1 rounded bg-slate-950 text-slate-400">C</span>
<span class="px-1.5 py-1 rounded bg-slate-950 text-slate-400">C</span>
</div>
<span class="text-[10px] font-bold text-slate-500 ml-1">—3'</span>
</div>
<!-- Cut Indicator Line -->
<div class="flex items-center ml-16 text-rose-500 text-xs font-black">
<span class="ml-[342px] flex items-center gap-1 bg-rose-950/80 px-2 py-0.5 rounded-md border border-rose-500/50">
✂️ DSB Blunt Cut (-3 bp)
</span>
</div>
<!-- Antisense Strand 3' -> 5' -->
<div class="flex items-center gap-1 font-mono font-black text-sm">
<span class="w-12 text-[10px] font-bold text-slate-500 text-right mr-1">3'—</span>
<div class="flex items-center gap-1 bg-slate-900/90 p-2 rounded-2xl border border-slate-800 shadow-inner">
<span class="px-1.5 py-1 rounded bg-slate-950 text-slate-500">T</span>
<span class="px-1.5 py-1 rounded bg-slate-950 text-slate-500">A</span>
<span class="px-1.5 py-1 rounded bg-slate-950 text-slate-500">C</span>
<!-- Complementary Protospacer -->
<div class="flex items-center gap-1 px-1.5 py-1 rounded-xl bg-slate-950/40 border border-slate-800">
<span class="px-1 py-0.5 rounded text-slate-400">C</span>
<span class="px-1 py-0.5 rounded text-slate-400">T</span>
<span class="px-1 py-0.5 rounded text-slate-400">G</span>
<span class="px-1 py-0.5 rounded text-slate-400">A</span>
<span class="px-1 py-0.5 rounded text-slate-400">G</span>
<span class="px-1 py-0.5 rounded text-slate-400">G</span>
<span class="px-1 py-0.5 rounded text-slate-400">A</span>
<span class="px-1 py-0.5 rounded text-slate-400">C</span>
<span class="px-1 py-0.5 rounded text-slate-400">T</span>
<span class="px-1 py-0.5 rounded text-slate-400">C</span>
<span class="px-1 py-0.5 rounded text-slate-400">C</span>
<span class="px-1 py-0.5 rounded text-slate-400">T</span>
<span class="px-1 py-0.5 rounded text-slate-400">C</span>
<span class="px-1 py-0.5 rounded text-slate-400">T</span>
<span class="px-1 py-0.5 rounded text-slate-400">T</span>
<span class="px-1 py-0.5 rounded text-slate-400">C</span>
<span class="px-1 py-0.5 rounded text-slate-400">A</span>
<span class="px-1 py-0.5 rounded text-slate-400 border-r-2 border-rose-500">G</span>
<span class="px-1 py-0.5 rounded text-slate-400">A</span>
<span class="px-1 py-0.5 rounded text-slate-400">C</span>
</div>
<!-- Complementary PAM -->
<div class="flex items-center gap-1 px-1.5 py-1 rounded-xl bg-slate-950/80 border border-slate-800">
<span class="px-1 py-0.5 rounded text-slate-500">A</span>
<span class="px-1 py-0.5 rounded text-slate-500">C</span>
<span class="px-1 py-0.5 rounded text-slate-500">C</span>
</div>
<span class="px-1.5 py-1 rounded bg-slate-950 text-slate-500">G</span>
<span class="px-1.5 py-1 rounded bg-slate-950 text-slate-500">G</span>
</div>
<span class="text-[10px] font-bold text-slate-500 ml-1">—5'</span>
</div>
</div>
</div>
<!-- HDR Single-Stranded Oligo Donor Template (ssODN) -->
<div class="mt-6 p-3 rounded-2xl bg-purple-950/30 border border-purple-500/30">
<div class="flex items-center justify-between text-xs">
<span class="text-[10px] font-extrabold uppercase text-purple-300">HDR Repair ssODN Donor Template (Corrects HbS A>T)</span>
<span class="text-[10px] font-mono text-emerald-400">Wild-Type Glu6 Recovered</span>
</div>
<p class="font-mono text-xs text-purple-200 mt-1 break-all">
5'-...CCTGAGGAGAAG<span class="text-emerald-400 font-black underline">T</span>CTGCCGTTACTGCC...-3'
</p>
</div>
</div>
<!-- ZONE 4: QUANTITATIVE CRISPR INSPECTOR (Cols 9..12) -->
<div class="lg:col-span-4 bg-slate-900/50 p-5 flex flex-col justify-between space-y-4">
<div>
<div class="flex items-center justify-between pb-2 border-b border-slate-800/80">
<span class="text-[10px] font-black uppercase tracking-widest text-purple-400">Cutting & Specificity Metrics</span>
<span class="text-[10px] font-bold text-slate-400">CFD / Doench 2016</span>
</div>
<div class="mt-4 space-y-3">
<!-- Score 1: On-Target Efficiency -->
<div class="p-3.5 rounded-2xl bg-slate-950/70 border border-slate-800">
<div class="flex items-center justify-between">
<span class="text-xs font-bold text-slate-300">On-Target Activity Score</span>
<span class="text-xs font-black text-emerald-400">EXCELLENT</span>
</div>
<div class="flex items-baseline gap-2 mt-1">
<span class="text-3xl font-black text-white" hx-text="onTargetScore + ' / 100'">88 / 100</span>
<span class="text-[10px] text-slate-400">Rule Set 2</span>
</div>
<div class="w-full h-1.5 rounded-full bg-slate-800 mt-2">
<div class="h-full bg-emerald-500 rounded-full" style="width: 88%;"></div>
</div>
</div>
<!-- Score 2: Off-Target Specificity -->
<div class="p-3.5 rounded-2xl bg-slate-950/70 border border-slate-800">
<div class="flex items-center justify-between">
<span class="text-xs font-bold text-slate-300">Off-Target Specificity Score</span>
<span class="text-xs font-black text-purple-400">MINIMAL RISK</span>
</div>
<div class="flex items-baseline gap-2 mt-1">
<span class="text-3xl font-black text-white" hx-text="offTargetScore + ' / 100'">94 / 100</span>
<span class="text-[10px] text-slate-400">MIT / CFD Score</span>
</div>
<div class="w-full h-1.5 rounded-full bg-slate-800 mt-2">
<div class="h-full bg-purple-500 rounded-full" style="width: 94%;"></div>
</div>
</div>
<!-- Genome-Wide Mismatch Table -->
<div class="p-3 rounded-2xl bg-slate-950/70 border border-slate-800 text-[10px]">
<span class="text-slate-400 font-extrabold uppercase block mb-1.5">Genome-Wide Off-Target Loci</span>
<div class="space-y-1 font-mono">
<div class="flex justify-between text-slate-300">
<span>0 Mismatches (On-target):</span>
<span class="font-bold text-emerald-400">1 locus (chr11)</span>
</div>
<div class="flex justify-between text-slate-300">
<span>1 Mismatch:</span>
<span class="font-bold text-emerald-400">0 loci</span>
</div>
<div class="flex justify-between text-slate-300">
<span>2 Mismatches:</span>
<span class="font-bold text-amber-400">2 loci (Intronic)</span>
</div>
<div class="flex justify-between text-slate-300">
<span>3 Mismatches:</span>
<span class="font-bold text-slate-400">14 loci (Non-coding)</span>
</div>
</div>
</div>
</div>
</div>
<!-- Export Protocol Button -->
<div class="pt-3 border-t border-slate-800/80">
<button class="w-full py-2.5 rounded-xl bg-purple-600 hover:bg-purple-500 text-white font-black text-xs active:scale-95 transition-all shadow-lg shadow-purple-600/20"
hx-action="$appz.haptic('success')">
Order IDT / GenScript Synthetic Oligos
</button>
</div>
</div>
</div>
<!-- ZONE 5: AUDIT & @DIAG STATUS FOOTER -->
<div class="px-5 py-2.5 bg-slate-900/90 border-t border-slate-800 flex flex-wrap items-center justify-between gap-3 text-xs text-slate-400">
<div class="flex items-center gap-3">
<span class="text-[10px] font-mono text-purple-400">Oligo: 5'-CACCGAGTCCTGAGGAGAAGTCTG-3'</span>
<span class="text-slate-600">•</span>
<span class="text-[10px] font-mono">GC: <span class="font-bold text-white" hx-text="gcContent + '%'">55.0%</span></span>
<span class="text-slate-600">•</span>
<span class="text-[10px] font-mono">Tm: 58.2°C</span>
</div>
<!-- Diagnostic Telemetry -->
<div class="flex items-center gap-4 text-[10px] font-bold">
<span class="text-emerald-400 flex items-center gap-1">
<span class="w-1.5 h-1.5 rounded-full bg-emerald-400 animate-pulse"></span>
Cas9 Thermodynamics: Validated
</span>
<span class="text-slate-500">ΔG: -1.8 kcal/mol</span>
<span class="text-purple-400 font-mono">@diag: CAS9_CALC_OK</span>
</div>
</div>
</div>