WebGL Shader Preloader

Shaders 73

About

WebGL shader preloader with a percentage counter: one streak of amber flame morphs through five passes as the page loads, then ignites into a star-shaped portal and the camera pushes through onto your content. Pass real progress or let it simulate; the pointer stirs the light. React only, no assets.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds WebGL Shader Preloader to your project and fits it to your theme.

Code

How WebGL Shader Preloader is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

"use client"

import PrismCometPreloader from "@/components/ui/prism-comet-preloader"

// Your own words and light: an ember palette, a faster
// flow, and no compositing grid.
export default function DemoEmber() {
  return (
    <PrismCometPreloader
      loop
      word="Solstice"
      caption="Festival of light · Night one"
      palette={{
        background: "#070302",
        blue: "#b3261e",
        violet: "#ff6a1a",
        magenta: "#ffb02e",
        cyan: "#fff1c2",
        gold: "#ffd36b",
      }}
      speed={1.4}
      grid={false}
      durationMs={5200}
    />
  )
}