Guide · Agent skill
How to use the Fire-Paper Loader agent skill
Updated · written with AI from the project's own documentation and checked against our catalogue data
The fire-paper-loader skill is a set of written instructions that teaches an AI agent how to build a web page loading screen shaped like a ring of burning paper that opens on black. The flame is drawn in a background thread, so the animation keeps moving even while heavy page scripts block the main thread. This guide explains what the skill makes the agent do, how to install it, how to ask for it in plain language, and what to check before you ship the result.
Fire-Paper LoaderMengTo/Skills · MIT Download the skill Quick start
- 1Download the ZIP. Download the ZIP for the fire-paper-loader skill from the item page. The download contains agents/openai.yaml, PROMPT.md and SKILL.md.
- 2Unzip into a skills folder. Unzip the skill into ~/.claude/skills/ for personal use, 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 loader you want. Ask for a burning-paper loading screen and name the heavy work it must survive, such as a large JavaScript bundle or three.js.
- 5Test the page in target browsers. Open the page in the browsers your visitors use and confirm the ring keeps moving while the page builds.
- 6Check the hand-off and reduced motion. Watch the fade into the page and confirm the reduced-motion and hidden-tab behaviour work as the skill describes.
What the skill makes the agent build
The skill is a detailed recipe for a burning-paper ring loader. The flame is written in GLSL and drawn by a Worker on an OffscreenCanvas. That Worker is started from the page head, so the ring keeps burning while the main thread is busy building the page.
The recipe also covers the pacing of the ring's growth, a clean fade into the real page, a progress count, and behaviour for reduced-motion settings and hidden tabs. It is written in vanilla JavaScript and CSS, with no Three.js needed for the loader itself.
- Ring of burning paper with an ember thread, ember gradient and porous char
- Worker start-up from the head, with a fallback to main-thread drawing where needed
- Parallel shader compile and a warm-up draw before the first visible frame
- Hand-off to the page without a stall, then a fade with CSS opacity
- Reduced-motion and hidden-tab handling
Install the fire-paper-loader skill
Download the ZIP for agent-skills/web-design/fire-paper-loader from the item page. The skill is MIT licensed. Unzip it so the skill folder sits in one of these locations:
For all of your projects, put it in ~/.claude/skills/. For one project only, put it in that project's .claude/skills/ folder.
You can also upload the skill in the Claude apps. Go to Settings, then Capabilities, then Skills, and upload it there.
- Personal: ~/.claude/skills/fire-paper-loader
- Single project: .claude/skills/fire-paper-loader inside the project folder
- Claude apps: Settings → Capabilities → Skills
Trigger the skill with a natural request
You do not need a special command. Describe the loader you want and mention what it needs to survive, such as a heavy script or a three.js build. The skill's description lists the phrases it responds to, including loading screen, preloader, splash, kindling, burn loader, ember ring, and fire loader.
The skill's own prompt file names it directly with $fire-paper-loader. Use that form when you want to be sure the skill is applied.
- Add a burning-paper loading screen to my site. It must keep moving while the main JavaScript bundle loads.
- Use $fire-paper-loader to add a burning-paper ring loader that starts from the head and hands off to the page without a stall.
- Build a fire loader for a three.js scene. The ring should keep burning while the shaders compile.
Check the result against the skill's requirements
The skill depends on a modern browser with WebGL, Web Workers and OffscreenCanvas support. Before you rely on the loader, check that your target browsers have these features. The skill says it falls back to main-thread drawing only in some cases, so test the loader on the browsers your visitors use.
The skill's recipe asks the agent to keep the loader's script and the boot script in one source, so the worker and the page run the same code. Review the generated file to confirm this is the case.
- Required: WebGL, Web Worker and OffscreenCanvas in the browser
- Language: vanilla JavaScript and CSS, no Three.js needed for the loader
- Scripts: the skill does not run scripts on your machine
- Network: the skill does not use the network
Know when a simpler option is better
The skill is elaborate. If you only need a status indicator, a basic CSS spinner is much less work. For orb-style AI status indicators, the separate thinking-orbs skill covers that case.
For general page speed problems, the skill itself points to web-design-performance. Use this skill when the specific problem is a loader that must stay animated while the page is blocked.
- Simple spinner or status indicator: use a CSS spinner or the thinking-orbs skill
- General page speed: use web-design-performance
- Loader that must keep moving during heavy builds: use fire-paper-loader
What people use it for
- A splash screen for a marketing site that loads a heavy JavaScript bundle and needs the loader to keep moving during the build
- A preloader for a three.js product viewer, where shader compilation holds the main thread for a noticeable time
- A designer's handoff: a technical spec for a bespoke fire-style loading screen that a developer can build from
- A game or interactive landing page that opens on black and needs a branded ring loader before the first scene appears
Frequently asked questions
Is the fire-paper-loader skill free to use?
The skill is published under the MIT licence, as stated on its item page. Check the licence file in the download for the full terms before you use it in a commercial project.
What do I need to run the loader?
The skill needs a modern web browser with WebGL, Web Worker and OffscreenCanvas support. The loader itself uses vanilla JavaScript and CSS, and does not need Three.js.
Where do I install the fire-paper-loader skill?
Unzip the downloaded ZIP into ~/.claude/skills/ for personal use, or into a project's .claude/skills/ folder for one project. You can also upload it in the Claude apps under Settings, then Capabilities, then Skills.
Does the skill run scripts or use the network?
The item page states that the skill does not run scripts and does not use the network. The skill generates code for your page, so you still review and test that code before you deploy it.
Why does my loader freeze even with this skill?
The skill's design depends on the worker starting from the head and on browser support for OffscreenCanvas. If the browser lacks these features, the skill only falls back to main-thread drawing in some cases, and the ring can stall during heavy work. Test in the browsers your visitors use.
Should I use this skill or a simple CSS spinner?
Use a CSS spinner if you only need to show that something is loading. Use fire-paper-loader when you want a bespoke burning-paper ring that keeps moving while heavy JavaScript, three.js or shader builds hold the main thread.
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
Choose fire-paper-loader if you are a front-end developer or designer building a bespoke splash screen for a site with heavy JavaScript, three.js or shaders, and you need the animation to keep moving during slow builds. Pick a basic CSS spinner or the thinking-orbs skill if you only need a simple status indicator, or web-design-performance if your real problem is general page speed.
Download the skill