Janaki Ram Puli
AboutBlogNotesProjectsResume

24 February 2026

Interactive kitchen sink

by Janaki Ram Puli

This page is a kitchen sink for the interactive note components available on this site.

Use it as a reference while writing new notes: each section shows one component, the expected markup, and the rendered behavior.

Contents

Sidenotes / margin notes

On desktop widths this becomes a margin note 1 1. Margin note on desktop, inline on mobile. Use for asides that shouldn’t break the reading flow. and the paragraph continues.

Tooltips

Define a term inline like shared memory Fast on-chip memory shared by threads in a CUDA thread block.

without breaking the paragraph.

Tabs (code / variants)

#include <iostream>

int main() {
  std::cout << "hello" << std::endl;
  return 0;
}

Code blocks (+ Copy button)

bundle exec jekyll serve

Mermaid diagrams

flowchart LR
  A[Global memory] -->|load| B[Shared memory]
  B -->|reuse| C[Registers]
  C --> D[Compute]

Interactive widgets (Web Components)

Runnable JS

Citations (hover bubble)

You can drop citations inline like [1] Distill.pub popularized explorable explanations with strong typography and interactive components. in the middle of a sentence.

Statements (definition / theorem / proof)

DefinitionSoftmax

Softmax: $\sigma(x)_i = \exp(x_i) / \sum_j \exp(x_j)$.

TheoremCholesky

If $A$ is symmetric positive definite, then it has a Cholesky factorization $A = LL^T$.

Proof

Sketch: apply induction on matrix size and use Schur complements.

Quote block

Premature optimization is the root of all evil.

— Donald Knuth

TODO / checklists

Experiment checklist
  • Verify shapes match
  • Add ablation table
  • Reproduce baseline
  • Freeze random seed for reproducibility

Toggle lists (accordion)

Appendix
Assumptions - i.i.d. data - bounded gradients
Implementation notes Use mixed precision and fuse layernorm where possible.
Nested toggle: micro-optimizations - fuse bias + activation - avoid unnecessary casts

Media + file links

Images: use the existing figure component.

Video:

(Demo placeholder) Use MP4/WebM here; this is just showing the wrapper.

Audio:

(Demo placeholder) Use an audio file here; this just shows the wrapper.

File link: Download PDF

Figures (click to zoom)

placeholder
A local SVG image (click to zoom).

Math ($\\LaTeX$)

Inline: $C_{ij}=\sum_k A_{ik}B_{kj}$.

Block:

\(\mathrm{FLOPs} \approx 2MNK\)

Distill-ish extras

Hover citations

Here is a hover citation [1] Distill.pub popularized explorable explanations with strong typography, diagrams, and interactive components. in the middle of a sentence.

Stepper (discrete interactive steps)

Step 1: Start with a simple recurrence.

\[a_{t} = \alpha a_{t-1} + x_t\]

Scrollytelling (drag-to-scrub sequence)

This section demonstrates a single interaction: drag your mouse over the sequence boxes to scrub through tokens; the diagram (state + output) updates live.

Drag left/right across the top sequence. (Touch works too.)

Tables

Component Type Keyboard Notes
Sidenote layout yes Margin on desktop, inline on mobile
Tooltip inline yes Hover/focus bubble
Mermaid diagram n/a Rendered in browser
Runnable JS widget yes Edit + run code inline
Drag scrolly widget yes Pointer-drag on canvas
Statement block n/a Definition / theorem / proof
Quote block n/a Pull quote w/ attribution
TODO block n/a Checklist container
File link inline yes Download/link helper

References:

  1. Distill.pub - explorable explanations and interactive technical storytelling
tags: interactive, demo