BlockDex

Components

Registries

Free blocks

Method

BlockDex

Components

Registries

Free blocks

Method

Open API

BlockDex

Components

Registries

Free blocks

Method

Open API

Components/remocn-demo/batchwork

Batchwork — Unified Batch API

remocn-demo/batchwork
FreeBlock

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.json

Source

src/components/remocn/glass-code-block.tsxcollections.remocn.dev/r/batchwork.json · first 6 KB
1"use client";
2
3import {
4 Sequence,
5 interpolate,
6 useCurrentFrame,
7 useVideoConfig,
8} from "remotion";
9
10export 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 only
24 * 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}
32
33/** Frames the first-line typewriter takes — exported so a caller can sync a
34 * 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}
42
43const FONT_MONO =
44 "var(--font-geist-mono), ui-monospace, SFMono-Regular, monospace";
45
46const DEFAULT_CODE = `import { motion } from "remotion";
47
48// Generate a hero scene
49export function Hero() {
50 const frame = useCurrentFrame();
51 const opacity = frame / 30;
52 return <h1 style={{ opacity }}>Hello</h1>;
53}`;
54
55// Minimal regex tokenizer. NOT a real syntax highlighter — just enough to
56// 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]);
79
80type Token = {
81 text: string;
82 kind: "code" | "comment" | "string" | "keyword" | "number";
83};
84
85function tokenizeLine(line: string): Token[] {
86 // Whole-line comment.
87 const trimmed = line.trimStart();
88 if (trimmed.startsWith("//")) {
89 return [{ text: line, kind: "comment" }];
90 }
91
92 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

  • @remotion/google-fonts
  • @remotion/transitions
  • culori
  • remotion

Other registry items

  • https://remocn.dev/r/backdrop.json
  • https://remocn.dev/r/blur-in.json
  • https://remocn.dev/r/marker-highlight.json
  • https://remocn.dev/r/remocn-ui.json

Files it writes

  • src/components/remocn/glass-code-block.tsx
  • src/demos/batchwork/index.tsx
  • src/lib/demo-assets.ts
  • src/demos/batchwork/prompt.md

Facts

Registry
remocn-demo
Type
registry:block
Access
Free
Files written
4
Licence
the repository states none
First indexed
2026-08-01
Last confirmed
2 days ago

Go to the source

collections.remocn.dev Remocn/remocn-collections on GitHub Raw registry item This item as JSON

More from remocn-demo

All 22 items
Same registry, same kind — the ones you would have found next
ComponentRegistryKindAccessInstallsCommand
Agent Skills — Claude Code makes the videoagent-skillsremocn-demoBlocksFree5 deps · 8 files
Changelog — Rolling Numberschangelogremocn-demoBlocksFree4 deps · 5 files
Changelog — New Chat Componentschat-changelogremocn-demoBlocksFree5 deps · 4 files
Fonttrio — Three fonts. One command.fonttrioremocn-demoBlocksFree5 deps · 4 files
remocn — Introducing remocn (shaders cut)introducing-remocnremocn-demoBlocksFree4 deps · 3 files
shadcn/ui — Introducing shadcn/ui (gift cut)introducing-shadcnremocn-demoBlocksFree11 deps · 38 files
Changelog — Eleven New Transitionsnew-transitionsremocn-demoBlocksFree4 deps · 3 files
remocn ✕ Paper — Introducing shaderspaper-shadersremocn-demoBlocksFree4 deps · 2 files
BlockDex

Built by

Kynth Studio

Index

Components
Registries
Method
Open API

Guides

shadcn component libraries
Best shadcn registries
Free shadcn blocks

Reference

Corpus counts
Crawl health
hello@kynth.studio
Privacy
Terms

BlockDex

BlockDex

Built by

Kynth Studio

Index

Components
Registries
Method
Open API

Guides

shadcn component libraries
Best shadcn registries
Free shadcn blocks

Reference

Corpus counts
Crawl health
hello@kynth.studio
Privacy
Terms

BlockDex

BlockDex

Built by

Kynth Studio

Index

Components
Registries
Method
Open API

Guides

shadcn component libraries
Best shadcn registries
Free shadcn blocks

Reference

Corpus counts
Crawl health
hello@kynth.studio
Privacy
Terms

BlockDex