Skip to content
Get packs

Paper Cinder Transition

Adds a burning-paper scene change where fire eats the old page and reveals the next

Source Download skill
Repository
MengTo/Skills
Stars
7,187
Licence
MIT
Files
4 files

What it does

When installed, this gives the agent detailed know-how for building a fire-burn transition between pages or scenes on the web, using WebGL. Instead of a plain fade or slide, the old page is frozen, charred and eaten by a glowing ember line that reveals the new scene behind it. The skill describes the rendering method, colour ramps, char texture, timing and reduced-motion handling so the agent can write this effect rather than guess at it.

Great for

  • Front-end developers building a dramatic chapter or section change for a website or interactive story
  • Designers who want a custom burn or ember transition and need an implementation brief for it

Skip it if

  • Simple sites where a standard fade or slide is enough, since this is a heavy, stylised effect that adds rendering cost
  • Projects without WebGL support or with strict performance budgets on low-end devices, because the skill relies on a full-screen GPU pass

Try asking

  • “Build a paper-burn transition between two sections of my landing page”
  • “Make a cinder wipe that reveals chapter two when the user scrolls past chapter one”
  • “Replace the fade between my slides with an ember dissolve that respects reduced motion”
Step-by-step guide: how to use Paper Cinder TransitionInstall, first run, examples, tips and FAQs

Install in 3 steps

  1. 1

    Download the skill

    The ZIP contains the 4 original files, the MIT licence and an attribution note.

    paper-cinder-transition.zip
  2. 2

    Add it to your agent

    Claude Code (all projects)

    mkdir -p ~/.claude/skills && unzip paper-cinder-transition.zip -d ~/.claude/skills/

    Claude Code / Agent SDK (this project only)

    mkdir -p .claude/skills && unzip paper-cinder-transition.zip -d .claude/skills/

    Claude apps (web/desktop): Settings → Capabilities → Skills → Upload skill, and choose the ZIP.

  3. 3

    Ask for the task

    No special command needed — the agent reads the skill's description and loads it when your request matches. Try one of the prompts above.

Get better results

  • Name the two scenes you want to transition between and say whether the fire should enter from the left, right or bottom, since the skill covers sweep direction
  • Ask the agent to check the result in a real-time clip rather than a still, because the skill notes the motion is what sells the effect
  • Mention that you need reduced-motion and tab-visibility handling so the output is production-ready

What's inside

  • agents/openai.yaml
  • demo.html
  • PROMPT.md
  • SKILL.md

Redistributed unmodified from MengTo/Skills under the MIT licence. The assessment was drafted with AI from the skill's files on 2026-10-29. Skills can instruct your agent to run code — read SKILL.md and any scripts before installing.