CodePulse

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.

• Video export
• Developer tool
• Dark theme

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.

How it's built

• Colors never flicker while typing: Shiki highlights the full snippet once, then each frame walks the tokens and shows only the first N characters. Highlighting a half-typed string would let tokens change color as they fill in.
• No async in the render path: Shiki runs through createHighlighterCoreSync with the JavaScript regex engine instead of WASM, so the highlighter is ready before the first frame. Capture also waits for JetBrains Mono to load, so frame 0 never renders in a fallback font.
• Type that fits itself: font size is min(width × 0.028, editor width ÷ (0.6 × longest line + 5)), since JetBrains Mono advances about 0.6em per character. Every other measurement scales from that size, so one component fills both the square and vertical compositions.
• Seamless loop: the clip opens and closes on the same empty editor, the 3D tilt makes one full swing per loop, and the glow breathes exactly twice, so the last frame flows straight back into the first.

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>