Explore and Recreate 282 Claude Opus 5.5 AI Videos with Their Original Prompts

What Is Awesome Opus 5.5 Videos?

Awesome Opus 5.5 Videos is a curated collection of viral videos created with Claude Opus 5.5. Each project was made by asking Claude to write the animation as code, using technologies such as HTML, Canvas, SVG, Three.js, GSAP, GLSL, WebGL, Web Audio, and particles.

The repository includes 282 prompts in the prompts/ directory and data/videos.json. The README highlights 100 entries, with one example for each distinct prompt, and links every entry to the creator's original post.

This is not a software library that you install and import. Instead, it is a practical prompt gallery: select an example, copy its prompt, and ask your own AI coding agent to create a similar experience.

Watch all 282 videos side by side with live remakes on Skillry.

Browse the Collection by Creative Category

The featured examples are organized into four main groups. This makes it easier to start with the visual style or interaction type you want to explore.

• Motion graphics: 58 examples based on animated visual compositions.
• Explainers: 16 examples that communicate an idea through animation.
• 3D scenes: 14 examples using browser-based three-dimensional visuals.
• Games and interactive: 12 examples that respond to user input or behave like small playable experiences.

The listed implementations range from lightweight Canvas and SVG experiments to projects involving Three.js, GSAP, GLSL, WebGL, Web Audio, AI-generated images, and particle systems. The technology labels shown beside each entry can help you choose an appropriate starting point.

Set Up the Repository

You do not need to install a package to browse the prompts. A local clone is useful when you want to search, save references, or inspect the structured video data.

1. Clone the GitHub repository to your computer.
2. Open the repository folder in your editor.
3. Browse the prompts/ directory for the individual Markdown prompt files.
4. Open data/videos.json when you want to work with the complete collection as structured data.

git clone <repository-url>
cd <repository-directory>

The README does not specify a required runtime, dependency installation command, or local application server. The collection is primarily intended for reading prompts and following the linked examples. If a generated project uses external libraries or browser APIs, ask Claude to include the necessary setup instructions for that specific project.

How to Use a Prompt

Each featured entry includes a link labeled Prompt. Select an example that matches the kind of animation you want, then open its prompt file in the repository.

1. Choose a category such as motion graphics, explainers, 3D scenes, or interactive projects.
2. Review the technology labels, for example Canvas, SVG, GSAP, or Three.js.
3. Open the linked Markdown file in prompts/.
4. Copy the prompt into Claude Opus 5.5 or your preferred coding agent.
5. Ask the agent to generate the project files and explain how to run them.
6. Open the resulting HTML project in a browser and iterate on the output.

For example, a prompt file associated with a Canvas example can serve as the starting point for a browser animation. Rather than copying only the visual idea, preserve the prompt's important requirements, such as the rendering approach, motion behavior, visual mood, interaction, and technical constraints. Then change the subject or style to make the result your own.

Start with one prompt, copy it accurately, run the generated result, and make changes through short follow-up requests.

Example Iteration Workflow

A practical workflow looks like this:

1. Ask Claude to implement the selected concept as a self-contained HTML file.
2. Run the file in a modern browser and check whether the animation renders correctly.
3. Request one focused change, such as a different color palette, a slower transition, or a new interaction.
4. Test the revised version again before asking for another change.
5. Save successful versions separately so you can compare iterations.

When a project depends on a specific technique, mention it explicitly in your request. For instance, ask for a Canvas implementation when the reference is labeled Canvas, or request Three.js when the reference uses a 3D scene. This keeps the generated result aligned with the original example.

Understand the Technical Labels

Canvas

Canvas examples draw graphics directly in a browser canvas and are often a useful choice for particles, procedural animation, and frame-by-frame motion.

SVG

SVG examples construct visual elements as scalable vector shapes. They are well suited to geometric compositions, diagrams, and animations that need crisp shapes.

GSAP

GSAP appears in examples that use a dedicated animation library for coordinated timelines, transitions, and movement.

Three.js, WebGL, and GLSL

These labels indicate more advanced rendering approaches. Three.js provides a JavaScript framework for 3D scenes, while WebGL and GLSL support lower-level GPU-accelerated graphics and shader effects.

Web Audio and Particles

Web Audio examples connect visuals with browser audio capabilities. Particle examples focus on collections of small moving elements that create effects such as fields, trails, or explosions.

Advanced Tips for Better Results

• Use the repository as a prompt library: Compare several prompts before choosing one, even if you plan to build a different visual.
• Follow the technology label: Start with an example whose implementation style matches your intended project.
• Request a complete runnable result: Ask Claude to provide all required code and clear browser instructions rather than isolated snippets.
• Iterate in small steps: Separate visual changes, interaction changes, and performance improvements into different requests.
• Keep the original prompt for comparison: Save your modified version alongside the source prompt so you can identify which changes affected the result.
• Inspect the source links: Every featured entry links to the creator's original post, providing additional context about the project.
• Use the structured data for discovery: Search data/videos.json when you need to work across the full set of 282 entries rather than only the highlighted examples.
• Test browser permissions: Projects involving audio, user input, or advanced graphics may behave differently depending on browser permissions and hardware.

Credits and Original Work

The collection credits the creators behind the featured videos and links to their original posts. When you reuse an idea or prompt, review the original entry and preserve appropriate attribution. The repository is a discovery and learning resource, while the individual videos belong to their respective creators.

For the complete browsing experience, use the Skillry gallery, or explore the prompt files directly in the repository.

Conclusion

Awesome Opus 5.5 Videos provides a hands-on way to learn prompt-driven creative coding. Browse the categories, select an implementation style, copy a prompt from prompts/, and ask Claude Opus 5.5 to generate a runnable browser experience. With 282 prompts spanning Canvas, SVG, Three.js, GLSL, GSAP, Web Audio, and more, the collection offers many starting points for your own animations and interactive experiments.