📽️ framewright - Every Frame, Pure Code

🎬 What Is framewright?

framewright is a friendly tool that turns plain text code into short videos. You don't need expensive video software or editing skills. If you can type a few lines of simple instructions, framewright handles the rest.

Think of it like baking with a recipe. You give framewright the ingredients (your code) and it bakes a complete video for you. Every single picture in your video is created from scratch using math and logic. No cameras, no actors, no complicated timelines.

The magic is simple: each frame of your video is just a formula. Give it a frame number, a random seed, and a width value, and it produces a perfect image. String thousands of those together, and you have a smooth, beautiful video.

✨ Why Choose framewright?

• One File Only – Everything lives inside a single HTML file. No installations, no folders of dependencies.
• Zero Editing Skills Needed – If you can copy and paste code, you can make videos.
• Works With AI Helpers – Compatible with popular AI coding assistants like Claude Code, Codex, Gemini CLI, and Cursor.
• Fully Customizable – Change colors, shapes, motion, and effects by tweaking simple numbers.
• Lightning Fast – Because it's pure code, videos render quickly without heavy software.
• Endless Creativity – From abstract art to animated logos, the possibilities are unlimited.

🚀 Getting Started (Windows)

Follow these simple steps to create your first video:

Step 1: Download framewright

Visit this link to download the application. It's safe, free, and takes less than a minute.

Step 2: Open the File

Once downloaded, locate the file in your Downloads folder. It's a single HTML file. Double-click it to open it in your web browser (Chrome, Edge, or Firefox all work perfectly).

Step 3: See Your First Video

The instant the file opens, you'll see a video playing right in your browser. That's it! No extra steps. The default design is already fantastic, but you can make it yours.

Step 4: Make It Your Own

Want to change what the video looks like? Scroll down in the file to find the section that says "EDIT THIS PART". You'll see simple code like:

draw = (frame, seed, width) => {
  // your creative code here
}

Don't worry about understanding every line. Try changing numbers like 50 to 200 or swapping colors like 'red' to 'blue'. Refresh the page and see what happens. Experimenting is how you learn!

Step 5: Save Your Video

When you're happy with your creation, you can record it using free screen recording software like OBS Studio. Or, if you're comfortable with a little more tech, use the built-in FFmpeg export feature by following the instructions in the "EXPORT" section of the file.

🤖 Using With AI Assistants

framewright shines when you pair it with AI coding tools. Here's how:

1. Copy the Code – Open the framewright file and select all the code (Ctrl+A, then Ctrl+C).
2. Paste to AI – Paste the code into your favorite AI assistant (Claude Code, Codex, Gemini CLI, or Cursor).
3. Give an Instruction – Type something like "Change the background to a sunset gradient and make the circles pulse faster."
4. Get the New Version – The AI will give you updated code. Replace the old code with the new version and refresh your browser.

That's it! You're now directing your own video studio with just your words.

🛠️ Features at a Glance

Feature	Description
Input System	Simple functions: frame, seed, width
Output Quality	Crisp, high-resolution frames
Rendering Engine	Fast, browser-based canvas technology
Export Options	Convert to MP4 using FFmpeg
Compatibility	Works with Chrome, Edge, Firefox
AI Integration	Seamless with major AI coding tools

🧪 Example Ideas to Try

Here are three beginner-friendly ideas to spark your creativity:

1. Animated Wave – Change the line thickness and add multiple colors for a flowing ocean effect.
2. Geometric Spinner – Make squares rotate by changing the angle calculation.
3. Particle Explosion – Move the random seed values around to create fireworks.

📚 Need Help?

If you get stuck or want to learn more advanced techniques:

• Check the comments inside the HTML file – they explain every section in plain English.
• Join GitHub discussions on the project page (look for the "Discussions" tab).
• Search YouTube for "how to code generative art" – the skills transfer directly.

🔧 Troubleshooting Common Issues

Problem: The video isn't moving. Solution: Make sure your browser is up to date. Refresh the page.

Problem: The colors look black and white. Solution: Check your code for a missing '#' before color hex codes like #ff0000.

Problem: Nothing appears at all. Solution: Clear your browser cache and reload the file. If it persists, copy the entire code again from the original download.

💡 Pro Tips

• Use the seed value to create different variations. Changing just the seed produces a completely new design.
• The width parameter controls resolution. Larger numbers mean sharper videos but slower rendering.
• Combine framewright with text-to-speech tools to narrate your animations.

🏁 Your Journey Starts Now

You don't need to be a programmer. You don't need expensive software. framewright puts professional-grade procedural video creation in your hands, wrapped in a single, friendly HTML file.

Download it now, open it, and watch your first code-generated video come to life. Then start tweaking, experimenting, and sharing your unique creations with the world.

Keywords: agent-skills, agents-md, ai-agents, canvas, claude-code, codex, cursor, ffmpeg, gemini-cli, generative-video, motion-graphics, procedural-video, puppeteer