Cyberpunk Neon Preloader

Component 84

About

Cyberpunk neon preloader: data rain condenses into a glowing katakana sign while the load counts up, then it flickers on like a neon tube. Any word, any palette; loop it as a splash screen or gate your page. React only.

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

Code

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

Usage.tsx

"use client"

import NeonKatakanaPreloader from "@/components/ui/neon-katakana-preloader"

// Same engine, another sign: ネオン ("neon") in hot magenta over a violet haze.
export default function Demo() {
  return (
    <NeonKatakanaPreloader
      loop
      word="ネオン"
      label="neon"
      caption="online"
      kicker="ネオン / sector 7"
      density={1.4}
      palette={{ glow: "#ff3df2", core: "#ffe1fb", accent: "#3dffb0", haze: "#2a0a5c", background: "#06030a" }}
    />
  )
}