CodeReel CLAUDE.md

CodeReel CLAUDE.md is an instructions file for coding agents from eddiejaoude/CodeReel. It costs 1,142 tokens per session, scanned A, original, MIT.

Project instructions for CodeReel, a React and TypeScript app that turns source code into animated videos. They describe its WebGL-based rendering, GIF export, important files, and current limits such as MP4 and WebM export not being connected.

In plain words
What is it for?
Use them when modifying CodeReel's renderer, playback, visual effects, or GIF export. They also explain the supported export settings and the project's planned but unfinished video formats.
Why use it?
They give coding agents the project rules needed to change CodeReel without breaking its preview or export behavior. In particular, every visual effect must be determined by the animation progress value so exported frames match the preview.

Instructions file

Install

Getting it into your agent

One page per mod, every tool's command on it. A separate URL per tool would split the same page into five that compete with each other.

agentmods
npx agentmods add instructions/eddiejaoude/codereel/claude-md
Clone the repo
git clone --depth 1 https://github.com/eddiejaoude/CodeReel

Wrote this? Show the measurements

A badge with what this costs and how it scanned, read live from this page, so it follows the numbers instead of freezing them. Markdown for a README, HTML for a documentation site or a project page.

agentmods badge for CodeReel CLAUDE.md

README.md
[![agentmods](https://agentmods.dev/badge/instructions/eddiejaoude/codereel/claude-md.svg)](https://agentmods.dev/instructions/eddiejaoude/codereel/claude-md)
Your own site
<a href="https://agentmods.dev/instructions/eddiejaoude/codereel/claude-md"><img src="https://agentmods.dev/badge/instructions/eddiejaoude/codereel/claude-md.svg" alt="Measured on agentmods" height="20"></a>
Per session 1,142 This file is loaded in full into every session.
When invoked 1,142 The same file — it is already loaded in full.
Security scan A 0 findings. Scan, not verified.
Origin original No closer match found in the catalogue.
Token cost

What it costs to keep this loaded

Counted locally with the o200k_base tokenizer, which is exact for GPT models; Claude uses its own tokenizer and its counts differ. Treat this as one consistent yardstick across the catalogue rather than a bill. Prices are per million input tokens.

ModelPer sessionOnce invoked
Fable 5 $0.01142 $0.01142
Opus 5 $0.00571 $0.00571
Sonnet 5 $0.00228 $0.00228
Haiku 4.5 $0.00114 $0.00114

Measured 4d ago against content hash 1a5ec68c465e, method: parsed. Prices are Anthropic first-party input rates as of 2026-08-30, from the pricing page.

Security

Grade A, and why

CodeReel CLAUDE.md scanned grade A with 0 findings against 26 rules in 11 categories — prompt injection, anti-refusal, data exfiltration, privilege escalation, supply chain, agent snooping, system-prompt leakage, SSRF and excessive agency — measured 4d ago.

A static scan of the body, not an audit. Every finding is printed with the line that produced it so you can judge whether it matters here. A mod is markdown that instructs an agent; that is exactly why what it instructs is worth reading.

Nothing flagged

None of the 26 patterns this scan looks for appear in this file: no shell pipes, no recursive deletes, no credential paths, no hidden text, no instruction-override or anti-refusal phrasing, no agent-config snooping. That is not a guarantee, it is the absence of the things that are checkable.

CLAUDE.md · 80 lines

How it starts

The opening of the file, as written. The whole thing — 80 lines — stays where its author put it; the contents beside it link to each section on GitHub.

CodeReel

Turns code into an animated video. React + TypeScript + Vite + Tailwind v4. GIF export is realExportModal.tsx drives lib/export/gif.ts, which steps progress 0→1, draws each WebGL frame on demand, and encodes with gifenc. The modal has a config step: the user picks resolution (longest edge, up to the canvas's native size — never upscaled) and frame rate, with a live size estimate. (MP4/WebM are not wired up yet; Remotion/headless Chromium stays a future option for those.)

The WebGL renderer (WebGLScene.tsx, React Three Fiber) is the sole renderer. The old DOM/CSS renderer (PreviewCanvas.tsx) has been retired — CSS 3D can't be rasterized in-browser, so it couldn't be exported.

Core architectural rule (important)

The preview renders as a pure function of progress (0→1). WebGLScene takes progress as a prop; usePlayback owns the wall-clock and feeds it in. Export swaps that source: it feeds discrete progress values instead.

Any new visual effect must be a pure function of progress — no wall-clock in anything drawn into a frame (no CSS @keyframes/animation/transition, no requestAnimationFrame/setInterval/Date.now()/performance.now(), no unseeded Math.random()). Derive motion from progress, e.g. x = progress * k.

This is what lets export reuse the exact same rendering code with no rework.

Diff view (steps mode)

Settings.diffMode (top-level, default false; toggle in CodePanel) turns each step into a git-style merged diff against the previous step: removed lines are tinted red with a gutter mark + strikethrough, added lines green with +, unchanged lines plain, and line numbers follow the new-file numbering (skipping removed rows). Step 0 has no predecessor, so it renders plain.

  • diffLines(prev, next) (src/lib/diff.ts) produces the merged same/added/removed sequence. (diffLineStatus — added-only — still powers the hero-line spotlight.)
  • The merged view is rasterized by drawCard/paintCard via an optional per-line diff status array; the transition into a diffed step animates the markers in (removed struck first, added fade+slide in) through the animT param on a dynamic texture (same pattern as the console typewriter) — still a pure function of progress, so export is unaffected.
  • Diff is steps-only (needs a before/after). In sequence mode the toggle is a no-op.

Read the full file on GitHub · 80 lines

Changes

What this file has done since we first saw it

Hashed on every crawl. A supply-chain change to an agent config is a question of when, not whether, so the history is kept rather than the latest state alone.

  1. 4d ago First seen · 80 lines · 1,142 tokens per session scan A 1a5ec68c465e

Subscribe to this mod's changes

CodeReel CLAUDE.md is an instructions file published in the GitHub repository eddiejaoude/CodeReel (48 stars, last pushed 19d ago), licensed MIT. It adds 1,142 tokens to every session, about $0.0057 per session on Opus 5. A static security scan graded it A with 0 findings. No closer match exists in the catalogue, so it is treated as the original; first seen 2026-08-30.

Related

Other instructions, from other repositories

CopilotKit AGENTS.md

AGENTS.md instructions for CopilotKit/CopilotKit, covering general guidelines for working with nx, copilotkit, essentials, private agent instructions and internal skills.

CopilotKit/CopilotKit · 2,077 tokens

CopilotKit CLAUDE.md

Claude Code instructions for CopilotKit/CopilotKit, covering general guidelines for working with nx, copilotkit, essentials and reference (read when relevant to your task).

CopilotKit/CopilotKit · 909 tokens

yournextstore AGENTS.md

AGENTS.md instructions for yournextstore/yournextstore, covering agents.md, commands, key files & directories, platform-managed files — do not modify and project patterns.

yournextstore/yournextstore · 2,835 tokens

ui-beats AGENTS.md

Instructions for nikhils4/ui-beats: This version has breaking changes — APIs, conventions, and file structure may all differ from your training data. Read the relevant guide in nodemodules/next/dist/docs/ (resolved from this file's directory; in monorepos the next package may not be visible from the repo root) before…

nikhils4/ui-beats · 154 tokens

ForgeStart AGENTS.md

Instructions for Onurlulardan/ForgeStart, covering agents.md, project identity, current stack, architecture map and development workflow.

Onurlulardan/ForgeStart · 2,406 tokens

yournextstore CLAUDE.md

Claude Code instructions for yournextstore/yournextstore, a project described as: AI-Native Open-Source Next.js commerce. Powered by Stripe. Ultra fast with typesafe Commerce SDK. Built for AI development (Claude, Codex, Cursor).

yournextstore/yournextstore · 5 tokens