← Basalt vault

CodePulse

Code clips worth posting.

Fig. 1 — CodePulse, live capture10 s loop · recorded frame by frame on GPU

Field notes

Paste a snippet and export a glowing, typed-out code clip as MP4 — square for X, vertical for Reels, Shorts, and TikTok. A Remotion composition with VS Code-grade highlighting and a live browser preview.

CodePulse turns any snippet into a 10-second social clip. The code types itself into a floating editor with a glowing cursor, an active-line highlight, and syntax colors from Shiki — the same grammar engine behind VS Code. When the last character lands, a “compiled” toast pops in, then the editor clears and the clip loops without a seam.

Edit the title, filename, handle, and code on the page and the preview updates instantly. pnpm render exports a 1080×1080 MP4 and pnpm render:vertical a 1080×1920 one; the first render downloads a headless Chrome. Clips are silent. Remotion is free for individuals and companies of up to 3 people; larger for-profit companies need a Remotion Company License.

Inside the prompt

Every file below is written out in full, so your agent creates the project exactly — no guessing, no missing pieces.

codepulse/
├─ .gitignore
├─ index.html
├─ package.json
├─ tsconfig.json
├─ vite.config.ts
└─ src/
   ├─ App.tsx
   ├─ index.css
   ├─ main.tsx
   ├─ vite-env.d.ts
   ├─ lib/
   │  └─ loop.ts
   └─ remotion/
      ├─ CodePulse.tsx
      ├─ highlight.ts
      ├─ index.ts
      ├─ Root.tsx
      └─ theme.ts

Recut it

  • Change the default snippet, title, and handlesrc/remotion/Root.tsx → DEFAULT_PROPS
  • Recolor the syntax themesrc/remotion/theme.ts → COLORS
  • Type faster or hold the finished code longersrc/remotion/CodePulse.tsx → TYPE_END
  • Highlight another languagesrc/remotion/highlight.ts → langs
  • Add a new video sizesrc/remotion/Root.tsx → <Composition>

Also in the vault