Clapper: Coding Agent Skill for Generating Presentational Videos with React

X postKun ChenTool

Kun Chen highlights Clapper, an open-source tool built by Calvin Grunewald. The skill allows coding agents to generate animated presentational videos by writing React code, complete with automated music composition and narration.

Key points

  1. Clapper is an MIT-licensed skill designed for AI coding agents.
  2. Coding agents generate React code to render animated presentational videos for demos or learning materials.
  3. The tool supports both automated narration and music composition.
  4. Kun Chen and creator Calvin Grunewald specifically highlighted the unexpected quality of the generated musical scores.

Why it matters

Code-to-video workflows powered by React and LLM agents allow developers to automate the creation of product demos and educational content without relying on manual video editing software or heavy rendering pipelines.

Analysis

Clapper illustrates an effective pattern for agentic media creation: rather than relying solely on black-box video diffusion models, the agent generates declarative React code. This ensures precise control over layout, UI components, and animations, while generative models handle voice narration and soundtrack composition.

Original post

Kun Chen

@kunchenguid · 15 September 2026

oooh this looks nice - a handy little skill to generate animated presentational videos t.co/Kcn8UPnt1t

116 likes4 replies235 bookmarks19.7k views

View on X
More posts in the thread (2)
  1. @CalvinGrunewald @myfirstmate really impressed by the music as well! it still amazes me how much information existed in training data that would allow LLMs to figure this out...
  2. @willyzimmm not really sure! tbh i haven't done much with video editing 😅 my videos are pretty much just straight from recording
Selected replies (5)
  • @willyzimmm @kunchenguid @kunchenguid is there a git repo or a skill that basically takes B role from all popular videos to then uses inspiration for your own b roll?
  • @CalvinGrunewald @kunchenguid For @myfirstmate , made with Clapper :) I'm most impressed by the musical score codex came up with. t.co/75RfrfNmm1
  • @OMID_0909 @kunchenguid Agents need a new layer — a layer of organized, reliable, and traceable knowledge. Because smarter models alone don’t guarantee better decisions. t.co/lV7HUOLSip
  • @hamzadotsh @kunchenguid I tried this kind of videos not this skill but it seems to be not working. Dont think anyone wants to see these
  • @willyzimmm @kunchenguid Well Hormozi and others have proven it’s doesn’t matter anymore…so you’re in good shape! No need to over do graphics and animation…I just thought it would be cool to do it w minimalism and sleekness…

Mentioned links

Links and tools from this entry

Summary generated by AI (Gemini 3.8 Flash, 27 September 2026). It may contain errors – the original source is authoritative.

Related entries

Similar in content, found by the AI search.

  • Link:clapper.archastro.tryintern.dev

    Clapper: Deterministic Video and Audio Production via React and TypeScript

    Clapper is a programmatic video generation framework where every video frame and soundtrack cue is expressed purely in code. By eliminating reliance on wall clock time and unseeded randomness, video outputs are byte-identical across renders.

    Web development· Tool

  • Repository:bradautomates/claude-video

    claude-video: Multimodal Video Analysis for Claude Code and AI Agents

    The open-source tool claude-video provides the /watch command for Claude Code, Cursor, Copilot, and other agent hosts. It downloads videos from URLs or local files, extracts keyframes and transcripts, and feeds visual and audio context directly into the language model.

    16.8kstarsPython

    AI & LLMs· Tool

  • Repository:calesthio/OpenMontage

    OpenMontage: Open-Source Agentic Video Production System

    OpenMontage is an open-source video production framework designed to turn AI coding assistants such as Cursor or Claude into automated video production studios. Built with Python, it provides 12 production pipelines, over 100 tools, and 700+ skill and knowledge files connecting speech, image, and video generation services with programmatic editing engines.

    56.2kstarsPython

    AI & LLMs· Tool

  • Repository:humanlayer/skills

    HumanLayer Skills: Modular Extensions for Claude Code

    HumanLayer's 'skills' repository delivers a curated set of modular extensions for Claude Code, focusing on configuration tuning, React type refinements, and automated agent loops.

    1.4kstarsTypeScript

    AI & LLMs· Tool

Back to the knowledge base

Let's talk about your project

Get in touch

Locations

  • Mattersburg
    Johann Nepomuk Bergerstraße 7/2/14
    7210 Mattersburg, Austria
  • Vienna
    Ungargasse 64-66/3/404
    1030 Wien, Austria

Parts of this content were created with the assistance of AI.