Guide · Agent skill
How to use the Paper Cinder Transition agent skill
Updated · written with AI from the project's own documentation and checked against our catalogue data
Paper Cinder Transition is an agent skill, a packaged set of instructions that an AI coding agent loads so it knows how to do one specific job well. This one teaches the agent to build a paper-burn transition: a ragged ember line sweeps across the screen, charring the old page ahead of it and revealing the next scene behind it. After this guide you will know what the skill changes about the agent's output, how to install it, how to ask for it in plain words, and what to check before you use the result.
Paper Cinder TransitionMengTo/Skills · MIT Download the skill Quick start
- 1Download the ZIP. Download the paper-cinder-transition ZIP from this page.
- 2Unzip into a skills folder. Unzip it into ~/.claude/skills/ for all projects, or into a project's .claude/skills/ folder for one project.
- 3Or upload it in the Claude apps. In the Claude apps, open Settings, go to Capabilities, then Skills, and upload the skill.
- 4Describe the change. Ask for a burn, ember or paper-burn change between your scenes, and say which side the incoming text sits on.
- 5Check the result. Run the output in a WebGL-capable browser and watch it in real time, with reduced motion turned on as well.
What the skill makes the agent do
Without the skill, a request for a page or chapter change usually gets a fade or a slide. This skill gives the agent a detailed method for a fire-burn change instead. The effect is written as one WebGL composite pass. The old scene is frozen as a still image, and the new scene keeps running live behind the flame.
The skill covers the parts that make the effect read as fire rather than a wipe: the shape of the burning front, a luminous ember gradient with a beading gold thread, a torn and porous charcoal band that is alpha-masked, a baked noise texture, the sweep direction, timing, reduced-motion handling and pausing when the page is not visible.
- Frozen old frame ahead of the line, live new scene behind it
- Ember gradient that goes from yellow at the front to deep red at the lip
- Charcoal band with pores and a torn far edge, not a solid black strip
- Sweep direction chosen from the side where the incoming text sits
- Reduced-motion still and visibility pausing
Install the skill: download, unzip, or upload
Download the paper-cinder-transition ZIP from this page. Unzip it into your user skills folder, ~/.claude/skills/, so it is available in all your projects. To limit it to one project, unzip it into that project's .claude/skills/ folder instead.
If you use the Claude apps rather than a local setup, you can upload the skill instead. Open Settings, go to Capabilities, then Skills, and add the skill there.
- User-wide: ~/.claude/skills/
- Single project: the project's .claude/skills/ folder
- Claude apps: Settings → Capabilities → Skills
Ask for the transition in natural language
You do not need to name files or functions. Describe the change you want and mention a fire or burn effect. The skill is meant to be triggered by requests such as a burn transition, paper burn, cinder wipe, chapter change by fire, charring page reveal, burn-away section change or ember dissolve. You can also use it when a fade, slide or generic dissolve between scenes would look cheap.
The source includes a minimal prompt you can adapt. It names the skill with a dollar sign and describes the result you want, as in the example below.
- Good: a burn-away change between my three chapters, with the old one charring and the next one revealed behind the flame
- Good: make the section change an ember dissolve, not a fade
- Weaker: make the transition look cool (no mention of burn, fire or the change you need)
Use $paper-cinder-transition to change between these chapters with a paper-burn line: a ragged ember edge sweeps across, the old chapter frozen and charring ahead of it, the next one live behind it. Not a fade, not a slide.Use the included demo as a reference
The package includes demo.html, a single page showing the effect, and PROMPT.md, which has demo prompts. The PROMPT.md file includes a longer prompt that asks the agent to recreate the demo as one standalone HTML document. It describes three timber-workshop chapters, a burn that runs on load and then repeats, and the expectation that demo.html serves as the reference for visuals, motion, responsiveness, accessibility and performance.
Open demo.html in a WebGL-capable browser to see what the agent is aiming for before you ask for your own version.
Check the requirements and safety notes
The skill needs a browser or framework that supports WebGL to run the generated code, and web development tooling for the project the agent edits. It does not run scripts and does not use the network, according to the skill's listing.
The effect is a full-screen GPU pass. Treat it as a heavy, stylised effect. Check the result on low-end devices if your project has tight performance budgets, and test it with reduced motion enabled.
- Runs scripts: no
- Uses network: no
- Needs WebGL in the target browser
- Adds rendering cost on every frame of the transition
Tips for better results
Describe your two scenes clearly, since the skill handles the transition and you still decide what the scenes contain, their palette, typography and copy. Say which side your incoming text sits on, because the skill sweeps from that side so the new title is not burned in last.
Judge the burn in a real-time clip rather than a still image. The skill's own guidance is that the ember needs to keep moving, so static screenshots hide most of the effect.
- Name the two chapters or scenes and where their text sits
- State whether the transition goes forward or backward
- Ask for the reduced-motion version explicitly if you need it
What people use it for
- A chapter change on an interactive story where the old chapter burns away to reveal the next
- A section change on a marketing site that needs a dramatic, non-fade transition
- A cinematic scene break in a web-based narrative or portfolio page
- A loading-to-content change styled as a fire burn, where the effect is a scene change rather than a ring
Frequently asked questions
How do I install the paper-cinder-transition skill?
Download the ZIP from this page and unzip it into ~/.claude/skills/ for all your projects, or into a project's .claude/skills/ folder for one project. In the Claude apps you can instead upload it under Settings, Capabilities, Skills.
Is the paper-cinder-transition skill free?
The skill is published under the MIT licence, as stated on this page. Check the licence file in the package for the full terms before you use it in a commercial project.
What does the paper cinder transition need to run?
The generated code needs a browser or framework that supports WebGL. The project being edited needs web development tooling. The skill does not run scripts and does not use the network.
Why does my transition look like a fade or a slide?
The agent may not have loaded the skill, or the request did not mention a burn or fire. Ask again using words like paper burn, ember dissolve or burn-away change, and confirm the skill is in the right skills folder.
Can I use this instead of a simple CSS fade?
Only if the heavier effect suits the site. The skill describes a full-screen GPU pass, so a standard fade or slide is the better choice for simple sites or low-end devices. Related skills in the same collection cover a burning ring on a loading screen, a mask-based text reveal and scroll-scrubbed sequences without a burn.
Does the skill handle reduced motion and performance?
Yes. The skill covers a reduced-motion still and pausing when the page is not visible. It also describes baking the noise texture and rendering the live scene at a smaller scale during the burn to keep the cost down.
New agent skills, repos and AI tools — every week
The best new skills and open-source projects, the fastest-growing repos, and one free prompt. Five minutes to read. Unsubscribe anytime.
Our verdict
Use this skill if you are a front-end developer or designer who wants a custom fire-burn change between pages or scenes and needs a detailed brief for the agent to write it. Pick a standard fade, slide or CSS transition instead if your site is simple, or if you need the transition to run smoothly on low-end devices or without WebGL.
Download the skill