Batchwork — Unified Batch API
remocn-demo/batchworkFreeBlock
remocn demo composition "Batchwork — Unified Batch API" — installs the full Remotion composition. Generated with AI from the prompt in demos/batchwork/prompt.md.
Install it
npx shadcn@latest add https://collections.remocn.dev/r/batchwork.jsonSource
1"use client";23import {4 Sequence,5 interpolate,6 useCurrentFrame,7 useVideoConfig,8} from "remotion";910export interface GlassCodeBlockProps {11 code?: string;12 title?: string;13 width?: number;14 height?: number;15 fontSize?: number;16 glassColor?: string;17 staggerFrames?: number;18 showTrafficLights?: boolean;19 /** The soft cyan/purple gradient glow behind the glass. On by default. */20 aura?: boolean;21 /**22 * Reveal the first line as a left-to-right typewriter (with a block cursor)23 * instead of the default fade-up; the remaining lines then stagger in only24 * after the first line finishes typing. Off by default.25 */26 typeFirstLine?: boolean;27 /** Typing speed (characters/second) when `typeFirstLine` is on. */28 firstLineCps?: number;29 speed?: number;30 className?: string;31}3233/** Frames the first-line typewriter takes — exported so a caller can sync a34 * camera move to the moment typing completes. */35export function firstLineTypeFrames(36 firstLine: string,37 firstLineCps: number,38 fps: number,39): number {40 return Math.ceil((firstLine.length / firstLineCps) * fps);41}4243const FONT_MONO =44 "var(--font-geist-mono), ui-monospace, SFMono-Regular, monospace";4546const DEFAULT_CODE = `import { motion } from "remotion";4748// Generate a hero scene49export function Hero() {50 const frame = useCurrentFrame();51 const opacity = frame / 30;52 return <h1 style={{ opacity }}>Hello</h1>;53}`;5455// Minimal regex tokenizer. NOT a real syntax highlighter — just enough to56// give the eye color anchors. Order matters: comments → strings → keywords.57const KEYWORDS = new Set([58 "import",59 "from",60 "export",61 "function",62 "const",63 "let",64 "var",65 "return",66 "if",67 "else",68 "for",69 "while",70 "new",71 "class",72 "extends",73 "default",74 "true",75 "false",76 "null",77 "undefined",78]);7980type Token = {81 text: string;82 kind: "code" | "comment" | "string" | "keyword" | "number";83};8485function tokenizeLine(line: string): Token[] {86 // Whole-line comment.87 const trimmed = line.trimStart();88 if (trimmed.startsWith("//")) {89 return [{ text: line, kind: "comment" }];90 }9192 const tokens: Token[] = [];93 // Split keeping delimiters: words, strings, numbers, everything else.94 const re = /("[^"]*"|'[^']*'|`[^`]*`|\b\d+\b|\b[A-Za-z_$][\w$]*\b|[^\w"']+)/g;95 let match: RegExpExecArray | null;96 while ((match = re.exec(line)) !== null) {97 const t = match[0];98 const first = t[0];99 if (first === '"' || first === "'" || first === "`") {100// … truncated
What it pulls in
npm packages
Other registry items
Files it writes
More from remocn-demo
All 22 items| Component | Registry | Kind | Access | Installs | Command |
|---|---|---|---|---|---|
| Agent Skills — Claude Code makes the videoagent-skills | remocn-demo | Blocks | Free | 5 deps · 8 files | |
| Changelog — Rolling Numberschangelog | remocn-demo | Blocks | Free | 4 deps · 5 files | |
| Changelog — New Chat Componentschat-changelog | remocn-demo | Blocks | Free | 5 deps · 4 files | |
| Fonttrio — Three fonts. One command.fonttrio | remocn-demo | Blocks | Free | 5 deps · 4 files | |
| remocn — Introducing remocn (shaders cut)introducing-remocn | remocn-demo | Blocks | Free | 4 deps · 3 files | |
| shadcn/ui — Introducing shadcn/ui (gift cut)introducing-shadcn | remocn-demo | Blocks | Free | 11 deps · 38 files | |
| Changelog — Eleven New Transitionsnew-transitions | remocn-demo | Blocks | Free | 4 deps · 3 files | |
| remocn ✕ Paper — Introducing shaderspaper-shaders | remocn-demo | Blocks | Free | 4 deps · 2 files |
