What is CodeReel CLAUDE.md?

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.

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.

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.

How eddiejaoude/CodeReel configures Claude Code

Reuse

Borrowing it

Nothing to install: this file belongs to eddiejaoude/CodeReel. Take a copy, put it at the same path in your own repository, and replace the rules that are about this project with yours.

Copy the file

curl -O https://raw.githubusercontent.com/eddiejaoude/CodeReel/main/CLAUDE.md

Clone the repo

git clone --depth 1 https://github.com/eddiejaoude/CodeReel

Made for: Claude Code.

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.

README.md

[![agentmods](https://agentmods.dev/badge/instructions/eddiejaoude/codereel/claude-md/github.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/github.svg" alt="Measured on agentmods" height="20"></a>

Or the 80×15 button, for a site that already has a row of RSS and ATOM ones. Only the verdict fits; the numbers stay here.

Your own site · 80×15

<a href="https://agentmods.dev/instructions/eddiejaoude/codereel/claude-md"><img src="https://agentmods.dev/badge/instructions/eddiejaoude/codereel/claude-md.svg" alt="Reviewed on agentmods" width="80" 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. A grade says what 26 rules found in the file — not that it is safe.

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.

Model	Per session	Once invoked
Fable 5.1	$0.01142	$0.01142
Opus 5.5	$0.00457	$0.00457
Sonnet 5.5	$0.00228	$0.00228
Haiku 4.5	$0.00114	$0.00114

Measured 2mo ago against content hash 1a5ec68c465e, method: parsed. Prices are Anthropic first-party input rates as of 2026-10-07, 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 2mo 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 real — ExportModal.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.

2mo 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 (51 stars, last pushed 2mo ago), licensed MIT. It adds 1,142 tokens to every session, about $0.0046 per session on Opus 5.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.

nextjs paypal reactjs saas

CodeReel CLAUDE.md next to 6 instructions from other repositories
Mod	Type	Stars	Last push	Licence	Scan	Tokens	Works with
CodeReel CLAUDE.mdeddiejaoude/CodeReel	Instructions file	51	2mo ago	MIT	A	1,142	Claude Code
plan-forge database.instructions.mdsrnichols/plan-forge	Instructions file	6	2d ago	MIT	A	1,890	GitHub Copilot
vscode buildNext.instructions.mdmicrosoft/vscode	Instructions file	195k	yesterday	MIT	A	9,719	GitHub Copilot
next.js AGENTS.mdvercel/next.js	Instructions file	143k	yesterday	MIT	A	7,461	Codex, OpenCode
langchain AGENTS.mdlangchain-ai/langchain	Instructions file	149k	yesterday	MIT	A	4,680	Codex, OpenCode
vscode oss-third-party-notices.instructions.mdmicrosoft/vscode	Instructions file	195k	yesterday	MIT	A	5,516	GitHub Copilot
vscode copilot-instructions.mdmicrosoft/vscode	Instructions file	195k	yesterday	MIT	A	3,093	GitHub Copilot

CodeReel: Instructions file for Claude Code