Skip to content
Get packs

Fire-Paper Loader

Builds a burning-paper ring loading screen whose flame keeps animating while the page is busy.

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

What it does

It gives an AI agent a detailed recipe for building a web page loading screen shaped like a ring of burning paper that opens on black. The fire is drawn in a background thread (a Worker using OffscreenCanvas), started early from the page head, so the animation keeps moving even while heavy JavaScript is blocking the main page. It also covers the pacing of the ring's growth, a smooth fade-out into the real page, and reduced-motion and hidden-tab behaviour.

Great for

  • Front-end developers building a splash or preloader for a site that loads heavy JavaScript, three.js or shaders
  • Designers who want a bespoke fire-style loading screen and a technical spec to hand to a developer
  • Teams who want a loader that does not look frozen during slow page builds

Skip it if

  • Simple spinners or status indicators: the skill is elaborate and a basic CSS spinner is far less work (use the separate thinking-orbs skill for orbs).
  • Projects that cannot use WebGL or Web Workers, since the skill depends on both and falls back to main-thread drawing only in some cases.
  • Ordinary page speed work: the skill itself points to web-design-performance for general speed concerns.

Try asking

  • “Build a burning paper ring loader for my landing page that keeps animating while three.js loads.”
  • “Create a fire loader preloader with a progress count and a smooth fade into the page.”
  • “Add a kindling-style splash screen that respects reduced motion and pauses in hidden tabs.”
Step-by-step guide: how to use Fire-Paper LoaderInstall, first run, examples, tips and FAQs

Install in 3 steps

  1. 1

    Download the skill

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

    fire-paper-loader.zip
  2. 2

    Add it to your agent

    Claude Code (all projects)

    mkdir -p ~/.claude/skills && unzip fire-paper-loader.zip -d ~/.claude/skills/

    Claude Code / Agent SDK (this project only)

    mkdir -p .claude/skills && unzip fire-paper-loader.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 page's heavy build step (for example three.js or a shader compile) so the agent wires the loader's progress calls to real stations.
  • Ask for the fallback path too, so the loader still works where Workers or OffscreenCanvas are unavailable.
  • Test the loader with the page's main thread deliberately blocked, since that is the scenario the skill is designed for.

What's inside

  • agents/openai.yaml
  • 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.