loader-pack 1.0.0

package/README.md

@@ -0,0 +1,92 @@
+# loader-pack
+
+A beautiful, cinematic intro/loader screen for React apps. Drop it in and give your portfolio, SPA, or landing page a stunning animated entry.
+
+![npm](https://img.shields.io/npm/v/loader-pack)
+![license](https://img.shields.io/npm/l/loader-pack)
+
+## Features
+
+- Scrolling multilingual marquee (Hello in 12+ languages + code snippets)
+- Animated name reveal with scale + stroke effect
+- Smooth zoom-out transition into your app content
+- Dark & light themes
+- Optional ambient & click sound effects
+- Fully customizable marquee text
+- Zero runtime dependencies (only React as a peer dep)
+
+## Installation
+
+```bash
+npm install loader-pack
+```
+
+## Quick Start
+
+```tsx
+import { LoaderPack } from "loader-pack";
+import "loader-pack/styles";
+
+function App() {
+  return (
+    <LoaderPack name="Your Name" theme="dark">
+      <div>
+        <h1>Welcome to my site!</h1>
+        <p>Your main content goes here.</p>
+      </div>
+    </LoaderPack>
+  );
+}
+```
+
+## Props
+
+| Prop | Type | Default | Description |
+| --- | --- | --- | --- |
+| `name` | `string` | *required* | Large centered display name |
+| `children` | `ReactNode` | *required* | Content shown after clicking Start |
+| `theme` | `"dark" \| "light"` | `"dark"` | Color scheme |
+| `sound` | `boolean` | `false` | Enable ambient & click sounds |
+| `ambientSoundSrc` | `string` | `"/loader-sound.mp3"` | Path to ambient sound file |
+| `clickSoundSrc` | `string` | `"/click.mp3"` | Path to click sound file |
+| `marqueeText` | `string` | multilingual default | Custom scrolling marquee text |
+
+## Examples
+
+### Dark theme (default)
+
+```tsx
+<LoaderPack name="Jane Doe">
+  <YourApp />
+</LoaderPack>
+```
+
+### Light theme with sound
+
+```tsx
+<LoaderPack name="Jane Doe" theme="light" sound>
+  <YourApp />
+</LoaderPack>
+```
+
+### Custom marquee
+
+```tsx
+<LoaderPack
+  name="Studio X"
+  marqueeText="Design • Code • Ship • Repeat • "
+>
+  <YourApp />
+</LoaderPack>
+```
+
+## How It Works
+
+1. The loader screen appears full-screen with a marquee, your name, date/time, and a Start button
+2. User clicks **Start →**
+3. The screen zooms out with a smooth opacity transition
+4. Your `children` content fades in
+
+## License
+
+MIT

package/dist/LoaderPack.d.ts

@@ -0,0 +1,2 @@
+import { LoaderPackProps } from './types';
+export default function LoaderPack({ name, children, theme, sound, ambientSoundSrc, clickSoundSrc, marqueeText, }: LoaderPackProps): import("react/jsx-runtime").JSX.Element;

package/dist/index.d.ts

@@ -0,0 +1,2 @@
+export { default as LoaderPack } from './LoaderPack';
+export type { LoaderPackProps } from './types';

package/dist/loader-pack.css

@@ -0,0 +1 @@
+body{font-family:Geist Sans,system-ui,sans-serif}.lp-dark{--lp-bg: #000;--lp-text: #fff;--lp-muted: rgba(255,255,255,.35)}.lp-light{--lp-bg: #fff;--lp-text: #000;--lp-muted: rgba(0,0,0,.35)}.lp-container{position:fixed;inset:0;background:var(--lp-bg);display:flex;align-items:center;justify-content:center;z-index:9999;transition:transform .8s ease,opacity .8s ease}.lp-container.lp-zoom{transform:scale(1.15);opacity:0}.lp-marquee{position:absolute;top:3%;width:100%;height:40px;overflow:hidden}.lp-track{display:flex;width:max-content;animation:lpScroll 35s linear infinite}.lp-text{font-size:.75rem;letter-spacing:.15em;padding-right:4rem;white-space:nowrap}@keyframes lpScroll{0%{transform:translate(0)}to{transform:translate(-50%)}}.lp-center{position:relative;text-align:center;display:flex;flex-direction:column;align-items:center;justify-content:center}.lp-name{font-size:clamp(2.2rem,10vw,6rem);font-weight:600;letter-spacing:-.02em;line-height:1.1;text-align:center;-webkit-text-stroke:1px rgba(255,255,255,.9);color:transparent;opacity:0;transform:scale(.28);animation:lpName 1.4s ease forwards}@keyframes lpName{to{opacity:1;transform:scale(1)}}.lp-button-wrapper{height:60px;display:flex;align-items:center;justify-content:center}.lp-button{background:none;border:none;font-size:.85rem;letter-spacing:.2em;text-transform:uppercase;cursor:pointer;opacity:0;animation:lpBtn .8s ease forwards}@keyframes lpBtn{to{opacity:1}}.lp-button:hover{opacity:.6;transform:translate(6px)}.lp-arrow{margin-left:6px}.lp-date,.lp-time{position:absolute;bottom:20px;font-size:.75rem;letter-spacing:.15em;opacity:.7}.lp-date{left:24px}.lp-time{right:24px}.lp-main{opacity:0;transform:translateY(20px) scale(.98)}.lp-main.reveal{animation:lpReveal .9s ease forwards}@keyframes lpReveal{to{opacity:1;transform:translateY(0) scale(1)}}.lp-name,.lp-text,.lp-button,.lp-date,.lp-time{color:var(--lp-text)}.lp-text{opacity:.4}

package/dist/loader-pack.js

@@ -0,0 +1,61 @@
+import { jsxs as l, Fragment as y, jsx as t } from "react/jsx-runtime";
+import { useState as o, useEffect as s } from "react";
+const A = 'Hello • नमस्ते • Bonjour • Hola • こんにちは • 안녕하세요 • 你好 • مرحبا • שלום • Ciao • Olá • Привет • Hallo • Selam • Ahoj • Hej • console.log("Hello World"); • printf("Hello World"); • System.out.println("Hello World"); • echo "Hello World"; • fmt.Println("Hello World"); • cout << "Hello World"; • println!("Hello World"); • write("Hello World"); •';
+function D({
+  name: d,
+  children: m,
+  theme: u = "dark",
+  sound: a = !1,
+  ambientSoundSrc: n = "/loader-sound.mp3",
+  clickSoundSrc: p = "/click.mp3",
+  marqueeText: h = A
+}) {
+  const [i, f] = o(!1), [v, H] = o(!1), [N, w] = o(!1), [c, k] = o(/* @__PURE__ */ new Date());
+  s(() => {
+    const e = setTimeout(() => w(!0), 1400), r = setInterval(() => k(/* @__PURE__ */ new Date()), 1e3);
+    return () => {
+      clearTimeout(e), clearInterval(r);
+    };
+  }, []), s(() => {
+    if (!a) return;
+    const e = new Audio(n);
+    e.volume = 0.4, e.play().catch(() => {
+    });
+  }, [a, n]);
+  const T = () => {
+    if (a) {
+      const e = new Audio(p);
+      e.volume = 0.9, e.play().catch(() => {
+      });
+    }
+    H(!0), setTimeout(() => f(!0), 800);
+  }, W = c.toLocaleTimeString(void 0, {
+    hour: "2-digit",
+    minute: "2-digit",
+    second: "2-digit",
+    hour12: !0
+  }), g = c.toLocaleDateString(void 0, {
+    weekday: "short",
+    day: "numeric",
+    month: "short",
+    year: "numeric"
+  });
+  return /* @__PURE__ */ l(y, { children: [
+    !i && /* @__PURE__ */ l("div", { className: `lp-container lp-${u} ${v ? "lp-zoom" : ""}`, children: [
+      /* @__PURE__ */ t("div", { className: "lp-marquee", children: /* @__PURE__ */ t("div", { className: "lp-track", children: Array(2).fill(h).map((e, r) => /* @__PURE__ */ t("span", { className: "lp-text", children: e }, r)) }) }),
+      /* @__PURE__ */ l("div", { className: "lp-center", children: [
+        /* @__PURE__ */ t("h1", { className: "lp-name", children: d }),
+        /* @__PURE__ */ t("div", { className: "lp-button-wrapper", children: N && /* @__PURE__ */ l("button", { className: "lp-button", onClick: T, children: [
+          "Start ",
+          /* @__PURE__ */ t("span", { className: "lp-arrow", children: "→" })
+        ] }) })
+      ] }),
+      /* @__PURE__ */ t("div", { className: "lp-date", children: g }),
+      /* @__PURE__ */ t("div", { className: "lp-time", children: W })
+    ] }),
+    i && /* @__PURE__ */ t("div", { className: "lp-main reveal", children: m })
+  ] });
+}
+export {
+  D as LoaderPack
+};

package/dist/loader-pack.umd.cjs

@@ -0,0 +1 @@
+(function(l,e){typeof exports=="object"&&typeof module<"u"?e(exports,require("react/jsx-runtime"),require("react")):typeof define=="function"&&define.amd?define(["exports","react/jsx-runtime","react"],e):(l=typeof globalThis<"u"?globalThis:l||self,e(l.LoaderPack={},l["react/jsx-runtime"],l.React))})(this,(function(l,e,o){"use strict";const i='Hello • नमस्ते • Bonjour • Hola • こんにちは • 안녕하세요 • 你好 • مرحبا • שלום • Ciao • Olá • Привет • Hallo • Selam • Ahoj • Hej • console.log("Hello World"); • printf("Hello World"); • System.out.println("Hello World"); • echo "Hello World"; • fmt.Println("Hello World"); • cout << "Hello World"; • println!("Hello World"); • write("Hello World"); •';function d({name:u,children:m,theme:p="dark",sound:a=!1,ambientSoundSrc:s="/loader-sound.mp3",clickSoundSrc:f="/click.mp3",marqueeText:h=i}){const[n,v]=o.useState(!1),[H,N]=o.useState(!1),[S,y]=o.useState(!1),[c,T]=o.useState(new Date);o.useEffect(()=>{const t=setTimeout(()=>y(!0),1400),r=setInterval(()=>T(new Date),1e3);return()=>{clearTimeout(t),clearInterval(r)}},[]),o.useEffect(()=>{if(!a)return;const t=new Audio(s);t.volume=.4,t.play().catch(()=>{})},[a,s]);const k=()=>{if(a){const t=new Audio(f);t.volume=.9,t.play().catch(()=>{})}N(!0),setTimeout(()=>v(!0),800)},w=c.toLocaleTimeString(void 0,{hour:"2-digit",minute:"2-digit",second:"2-digit",hour12:!0}),j=c.toLocaleDateString(void 0,{weekday:"short",day:"numeric",month:"short",year:"numeric"});return e.jsxs(e.Fragment,{children:[!n&&e.jsxs("div",{className:`lp-container lp-${p} ${H?"lp-zoom":""}`,children:[e.jsx("div",{className:"lp-marquee",children:e.jsx("div",{className:"lp-track",children:Array(2).fill(h).map((t,r)=>e.jsx("span",{className:"lp-text",children:t},r))})}),e.jsxs("div",{className:"lp-center",children:[e.jsx("h1",{className:"lp-name",children:u}),e.jsx("div",{className:"lp-button-wrapper",children:S&&e.jsxs("button",{className:"lp-button",onClick:k,children:["Start ",e.jsx("span",{className:"lp-arrow",children:"→"})]})})]}),e.jsx("div",{className:"lp-date",children:j}),e.jsx("div",{className:"lp-time",children:w})]}),n&&e.jsx("div",{className:"lp-main reveal",children:m})]})}l.LoaderPack=d,Object.defineProperty(l,Symbol.toStringTag,{value:"Module"})}));

package/dist/types.d.ts

@@ -0,0 +1,16 @@
+export type LoaderPackProps = {
+    /** The name displayed in the center of the intro screen */
+    name: string;
+    /** Your main app content — rendered after the user clicks Start */
+    children: React.ReactNode;
+    /** Color theme: "dark" (black bg) or "light" (white bg). Default: "dark" */
+    theme?: "dark" | "light";
+    /** Play click/ambient sound effects. Default: false */
+    sound?: boolean;
+    /** Path to the ambient sound file played on mount. Default: "/loader-sound.mp3" */
+    ambientSoundSrc?: string;
+    /** Path to the click sound file played on Start. Default: "/click.mp3" */
+    clickSoundSrc?: string;
+    /** Custom marquee text. Has a built-in multilingual default. */
+    marqueeText?: string;
+};

package/package.json

@@ -0,0 +1,49 @@
+{
+  "name": "loader-pack",
+  "version": "1.0.0",
+  "description": "A beautiful animated intro/loader screen for React apps",
+  "type": "module",
+  "main": "dist/loader-pack.umd.cjs",
+  "module": "dist/loader-pack.js",
+  "types": "dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/loader-pack.js",
+      "require": "./dist/loader-pack.umd.cjs"
+    },
+    "./styles": "./dist/loader-pack.css"
+  },
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc && vite build",
+    "prepublishOnly": "npm run build"
+  },
+  "peerDependencies": {
+    "react": ">=18.0.0",
+    "react-dom": ">=18.0.0"
+  },
+  "devDependencies": {
+    "@types/react": "^19.2.7",
+    "@types/react-dom": "^19.2.3",
+    "@vitejs/plugin-react": "^5.1.1",
+    "typescript": "~5.9.3",
+    "vite": "^7.3.1",
+    "vite-plugin-dts": "^5.0.0-beta.6"
+  },
+  "keywords": [
+    "react",
+    "loader",
+    "intro-screen",
+    "animation",
+    "portfolio"
+  ],
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/bhavya-madan/loader-pack"
+  }
+}