railway-login-component 1.0.0

package/.history/.npmrc_20260205164412

@@ -0,0 +1 @@
+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

package/.history/.npmrc_20260205164419

@@ -0,0 +1 @@
+//registry.npmjs.org/:_authToken=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

package/.history/.npmrc_20260205164426

@@ -0,0 +1 @@
+//registry.npmjs.org/:_authToken=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

package/.history/.npmrc_20260205164700

@@ -0,0 +1 @@
+//registry.npmjs.org/:_authToken=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

package/.history/.npmrc_20260205164753

@@ -0,0 +1 @@
+//registry.npmjs.org/:_authToken=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

package/README.md

@@ -0,0 +1,5 @@
+# Vue 3 + TypeScript + Vite
+
+This template should help get you started developing with Vue 3 and TypeScript in Vite. The template uses Vue 3 `<script setup>` SFCs, check out the [script setup docs](https://v3.vuejs.org/api/sfc-script-setup.html#sfc-script-setup) to learn more.
+
+Learn more about the recommended Project Setup and IDE Support in the [Vue Docs TypeScript Guide](https://vuejs.org/guide/typescript/overview.html#project-setup).

package/package.json

@@ -0,0 +1,61 @@
+{
+  "name": "railway-login-component",
+  "private": false,
+  "version": "1.0.0",
+  "type": "module",
+  "description": "A modern railway-themed login component for Vue 3",
+  "main": "./dist/railway-login-component.umd.js",
+  "module": "./dist/railway-login-component.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "import": "./dist/railway-login-component.js",
+      "require": "./dist/railway-login-component.umd.js",
+      "types": "./dist/index.d.ts"
+    }
+  },
+  "scripts": {
+    "dev": "vite",
+    "build": "vue-tsc -b && vite build",
+    "build:lib": "vue-tsc -b && vite build --mode lib",
+    "preview": "vite preview",
+    "prepare": "npm run build:lib"
+  },
+  "dependencies": {
+    "@vueuse/core": "^14.2.0",
+    "motion-v": "^1.10.2",
+    "sass": "^1.97.3",
+    "tw-animate-css": "^1.4.0",
+    "vue": "^3.5.24"
+  },
+  "peerDependencies": {
+    "vue": "^3.0.0"
+  },
+  "devDependencies": {
+    "@inspira-ui/plugins": "^0.0.1",
+    "@types/node": "^24.10.1",
+    "@vitejs/plugin-vue": "^6.0.1",
+    "@vue/tsconfig": "^0.8.1",
+    "autoprefixer": "^10.4.24",
+    "class-variance-authority": "^0.7.1",
+    "clsx": "^2.1.1",
+    "postcss": "^8.5.6",
+    "tailwind-merge": "^3.4.0",
+    "tailwindcss": "^3.4.0",
+    "tailwindcss-animate": "^1.0.7",
+    "typescript": "~5.9.3",
+    "vite": "^7.2.4",
+    "vue-router": "^5.0.2",
+    "vue-tsc": "^3.1.4"
+  },
+  "keywords": [
+    "vue",
+    "login",
+    "railway",
+    "component",
+    "vue3",
+    "tailwindcss"
+  ],
+  "author": "",
+  "license": "MIT"
+}

package/postcss.config.js

@@ -0,0 +1,7 @@
+// postcss.config.js
+export default {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+};

package/src/components/FallingStarsBg.vue

@@ -0,0 +1,185 @@
+<script setup lang="ts">
+import { onBeforeUnmount, onMounted, ref, watch } from "vue";
+
+interface Star {
+  x: number;
+  y: number;
+  z: number;
+  speed: number;
+}
+
+const props = withDefaults(
+  defineProps<{
+    color?: string;
+    count?: number;
+    class?: string;
+  }>(),
+  {
+    color: "#FFF",
+    count: 200,
+  },
+);
+
+const starsCanvas = ref<HTMLCanvasElement | null>(null);
+let perspective: number = 0;
+let stars: Star[] = [];
+let ctx: CanvasRenderingContext2D | null = null;
+let dpr = typeof window !== "undefined" ? window.devicePixelRatio || 1 : 1;
+let rafId = 0 as number;
+
+// Cache RGB for color — update only when prop changes
+let cachedRgb = hexToRgb(props.color || "#FFF");
+
+function hexToRgb(hex: string) {
+  let h = (hex || "#000").replace(/^#/, "");
+  if (h.length === 3) {
+    h = h
+      .split("")
+      .map((c) => c + c)
+      .join("");
+  }
+  const bigint = Number.parseInt(h, 16) || 0;
+  const r = (bigint >> 16) & 255;
+  const g = (bigint >> 8) & 255;
+  const b = bigint & 255;
+  return { r, g, b };
+}
+
+watch(
+  () => props.color,
+  (v) => {
+    cachedRgb = hexToRgb(v || "#FFF");
+  },
+);
+
+// Resize handler uses DPR to set backing store size once
+function resizeCanvas() {
+  const canvas = starsCanvas.value;
+  if (!canvas) return;
+
+  dpr = window.devicePixelRatio || 1;
+  const width = Math.max(1, Math.floor(canvas.clientWidth));
+  const height = Math.max(1, Math.floor(canvas.clientHeight));
+
+  canvas.width = Math.floor(width * dpr);
+  canvas.height = Math.floor(height * dpr);
+  canvas.style.width = `${width}px`;
+  canvas.style.height = `${height}px`;
+
+  // Get and set transform so drawing coordinates use CSS pixels
+  ctx = canvas.getContext("2d");
+  if (ctx) {
+    ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
+  }
+
+  // perspective should be in CSS pixels
+  perspective = canvas.width / dpr / 2;
+}
+
+onMounted(() => {
+  const canvas = starsCanvas.value;
+  if (!canvas) return;
+
+  window.addEventListener("resize", resizeCanvas, { passive: true });
+  resizeCanvas();
+
+  // Initialize stars using CSS pixel coordinates for x/y and z in CSS pixels
+  stars = [];
+  const cssWidth = canvas.clientWidth;
+  const cssHeight = canvas.clientHeight;
+  for (let i = 0; i < props.count!; i++) {
+    stars.push({
+      x: (Math.random() - 0.5) * 2 * cssWidth,
+      y: (Math.random() - 0.5) * 2 * cssHeight,
+      z: Math.random() * (cssWidth || 1),
+      speed: Math.random() * 5 + 2,
+    });
+  }
+
+  // Start loop
+  rafId = requestAnimationFrame(loop);
+});
+
+onBeforeUnmount(() => {
+  window.removeEventListener("resize", resizeCanvas);
+  if (rafId) cancelAnimationFrame(rafId);
+});
+
+// Draw star using layered strokes to simulate blur (avoids ctx.shadowBlur)
+function drawStar(star: Star, width: number, height: number) {
+  if (!ctx) return;
+
+  const scale = perspective / (perspective + star.z);
+  const x2d = width / 2 + star.x * scale;
+  const y2d = height / 2 + star.y * scale;
+  const size = Math.max(scale * 3, 0.5);
+
+  const prevScale = perspective / (perspective + star.z + star.speed * 15);
+  const xPrev = width / 2 + star.x * prevScale;
+  const yPrev = height / 2 + star.y * prevScale;
+
+  const rgb = cachedRgb;
+
+  // Layered strokes from wide+faint to narrow+slightly brighter to fake blur
+  const layerAlphas = [0.08, 0.14, 0.22];
+  for (let i = 0; i < layerAlphas.length; i++) {
+    ctx.beginPath();
+    ctx.strokeStyle = `rgba(${rgb.r}, ${rgb.g}, ${rgb.b}, ${layerAlphas[i]})`;
+    ctx.lineWidth = size * (1.4 + i * 1.2);
+    ctx.moveTo(x2d, y2d);
+    ctx.lineTo(xPrev, yPrev);
+    ctx.stroke();
+  }
+
+  // Sharp center line
+  ctx.beginPath();
+  ctx.strokeStyle = `rgba(${rgb.r}, ${rgb.g}, ${rgb.b}, 0.6)`;
+  ctx.lineWidth = Math.max(1, size);
+  ctx.moveTo(x2d, y2d);
+  ctx.lineTo(xPrev, yPrev);
+  ctx.stroke();
+
+  // Dot
+  ctx.beginPath();
+  ctx.fillStyle = `rgba(${rgb.r}, ${rgb.g}, ${rgb.b}, 1)`;
+  ctx.arc(x2d, y2d, Math.max(0.5, size / 4), 0, Math.PI * 2);
+  ctx.fill();
+}
+
+function loop() {
+  const canvas = starsCanvas.value;
+  if (!canvas) return;
+  if (!ctx) ctx = canvas.getContext("2d");
+  if (!ctx) return;
+
+  const width = canvas.clientWidth;
+  const height = canvas.clientHeight;
+
+  // Clear using CSS pixel dimensions (context is scaled to DPR)
+  ctx.clearRect(0, 0, width, height);
+
+  for (let i = 0; i < stars.length; i++) {
+    const star = stars[i] as Star;
+    drawStar(star, width, height);
+
+    star.z -= star.speed;
+
+    if (star.z <= 0) {
+      star.z = width || 1;
+      star.x = (Math.random() - 0.5) * 2 * width;
+      star.y = (Math.random() - 0.5) * 2 * height;
+    }
+  }
+
+  rafId = requestAnimationFrame(loop);
+}
+</script>
+
+<template>
+  <canvas
+    ref="starsCanvas"
+    class="absolute inset-0 h-full w-full"
+    :class="[$props.class]"
+  />
+</template>
+

package/src/components/RailwayLogin.vue

@@ -0,0 +1,305 @@
+<script setup lang="ts">
+import { ref, computed } from "vue";
+import FallingStarsBg from "./FallingStarsBg.vue";
+import Sparkles from "./Sparkles.vue";
+
+// 定义组件属性
+const props = defineProps({
+  // 标题
+  title: {
+    type: String,
+    default: "铁道系统登录"
+  },
+  // 副标题
+  subtitle: {
+    type: String,
+    default: "请输入您的账号和密码"
+  },
+  // 背景图片URL
+  backgroundImage: {
+    type: String,
+    default: ""
+  },
+  // 图标（可以是SVG字符串或图片URL）
+  icon: {
+    type: String,
+    default: ""
+  },
+  // 记住密码默认值
+  defaultRememberMe: {
+    type: Boolean,
+    default: false
+  },
+  // 登录按钮文本
+  loginButtonText: {
+    type: String,
+    default: "登录"
+  },
+  // 注册按钮文本
+  registerButtonText: {
+    type: String,
+    default: "立即注册"
+  },
+  // 忘记密码按钮文本
+  forgotPasswordText: {
+    type: String,
+    default: "忘记密码?"
+  }
+});
+
+// 定义组件事件
+const emit = defineEmits([
+  'login',        // 登录事件
+  'register',     // 注册事件
+  'forgot-password' // 忘记密码事件
+]);
+
+// 表单数据
+const username = ref("");
+const password = ref("");
+const rememberMe = ref(props.defaultRememberMe);
+const isLoading = ref(false);
+const errorMessage = ref("");
+
+// 表单验证
+const isFormValid = computed(() => {
+  return username.value.trim() !== "" && password.value.trim() !== "";
+});
+
+// 处理登录
+const handleLogin = () => {
+  // 验证表单
+  if (!isFormValid.value) {
+    errorMessage.value = "请输入用户名和密码";
+    return;
+  }
+
+  errorMessage.value = "";
+  isLoading.value = true;
+
+  // 触发登录事件
+  emit('login', {
+    username: username.value,
+    password: password.value,
+    rememberMe: rememberMe.value
+  });
+
+  // 模拟登录请求（实际使用时，父组件会处理登录逻辑）
+  setTimeout(() => {
+    isLoading.value = false;
+  }, 1500);
+};
+
+// 处理忘记密码
+const handleForgotPassword = () => {
+  emit('forgot-password');
+};
+
+// 处理注册
+const handleRegister = () => {
+  emit('register');
+};
+
+// 初始化：检查本地存储中的记住密码
+const initForm = () => {
+  const savedUsername = localStorage.getItem('username');
+  const savedRememberMe = localStorage.getItem('rememberMe');
+  
+  if (savedRememberMe === 'true' && savedUsername) {
+    username.value = savedUsername;
+    rememberMe.value = true;
+  }
+};
+
+// 初始化表单
+initForm();
+</script>
+
+<template>
+  <div class="min-h-screen w-full flex items-center justify-center p-4 overflow-hidden relative">
+    <!-- Railway Theme Background Image -->
+    <div 
+      class="absolute inset-0 bg-cover bg-center z-0"
+      :style="{ backgroundImage: backgroundImage ? `url('${backgroundImage}')` : `url('https://trae-api-cn.mchost.guru/api/ide/v1/text_to_image?prompt=modern%20railway%20station%20interior%20with%20blue%20lighting%20and%20futuristic%20design%2C%20blurred%20background%20for%20login%20page&image_size=landscape_16_9')` }"
+    ></div>
+    
+    <!-- 本地背景图片使用示例：
+    <RailwayLogin 
+      backgroundImage="/src/assets/background.jpg" 
+      @login="handleLogin" 
+    />
+    
+    或者使用import引入：
+    <script setup>
+    import backgroundImage from '@/assets/background.jpg';
+    </script>
+    
+    <template>
+      <RailwayLogin :backgroundImage="backgroundImage" @login="handleLogin" />
+    </template>
+    -->
+
+    <div class="relative w-full max-w-md">
+      <!-- Login Card -->
+      <div
+        class="relative bg-gradient-to-br from-gray-900/90 to-gray-800/90 backdrop-blur-md rounded-2xl border border-red-500/30 shadow-xl shadow-red-500/10 p-8">
+        <!-- Falling Stars Background for Input Window -->
+        <div class="absolute inset-0 rounded-2xl overflow-hidden -z-10">
+          <FallingStarsBg class="bg-transparent" :color="'#a5b4fc'" :count="25" />
+        </div>
+        <!-- Logo and Title -->
+        <div class="text-center mb-3">
+          <div class="w-20 h-20 mx-auto mb-4 rounded-lg bg-gradient-to-br from-red-600 to-red-800 flex items-center justify-center">
+            <!-- Custom Icon -->
+            <div v-if="icon" class="w-10 h-10 flex items-center justify-center">
+              <!-- If icon is an SVG string -->
+              <div v-if="icon.startsWith('<svg')" class="w-full h-full" v-html="icon"></div>
+              <!-- If icon is an image URL -->
+              <img v-else class="w-full h-full object-contain" :src="icon" :alt="title + ' icon'" />
+            </div>
+            <!-- Default Icon -->
+            <svg v-else class="w-10 h-10 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 12"
+                xmlns="http://www.w3.org/2000/svg">
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"
+                    d="M2 6h20M4 4h16M4 8h16M2 6l2-2M20 6l2-2M2 6l2 2M20 6l2 2M8 4v4M16 4v4M10 2h4v8h-4V2z">
+                </path>
+            </svg>
+          </div>
+          <div class="flex w-full flex-col items-center justify-center overflow-hidden rounded-md my-4">
+            <div class="relative h-14 w-full max-w-md">
+              <div
+                class="absolute inset-x-20 top-0 h-[2px] w-3/4 bg-gradient-to-r from-transparent via-indigo-500 to-transparent blur-sm" />
+              <div
+                class="absolute inset-x-20 top-0 h-px w-3/4 bg-gradient-to-r from-transparent via-indigo-500 to-transparent" />
+              <div
+                class="absolute inset-x-40 top-0 h-[5px] w-1/4 bg-gradient-to-r from-transparent via-sky-500 to-transparent blur-sm" />
+              <div
+                class="absolute inset-x-40 top-0 h-px w-1/4 bg-gradient-to-r from-transparent via-sky-500 to-transparent" />
+
+              <Sparkles background="transparent" :min-size="0.3" :max-size="1.2" :particle-density="800"
+                  class="size-full" :particle-color="'#a5b4fc'" />
+
+              <div
+                class="absolute inset-0 size-full  [mask-image:radial-gradient(250px_150px_at_top,transparent_20%,white)]" />
+              <!-- Title -->
+              <h1
+                class="absolute top-2 left-0 right-0 z-20 text-center text-2xl md:text-3xl lg:text-4xl font-bold text-white mb-4">
+                {{ title }}
+              </h1>
+            </div>
+            <p class="text-center text-gray-400 z-20 px-4 text-sm">
+              {{ subtitle }}
+            </p>
+          </div>
+        </div>
+
+        <!-- Error Message -->
+        <div v-if="errorMessage" class="mb-4 p-3 bg-red-900/30 border border-red-500/50 rounded-lg text-red-400 text-sm">
+          {{ errorMessage }}
+        </div>
+        
+        <!-- Login Form -->
+        <form @submit.prevent="handleLogin" class="space-y-6">
+          <!-- Username Input -->
+          <div class="space-y-2">
+            <label for="username" class="block text-sm font-medium text-gray-300">用户名</label>
+            <div class="relative">
+              <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
+                <svg class="w-5 h-5 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"
+                    xmlns="http://www.w3.org/2000/svg">
+                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+                        d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"></path>
+                </svg>
+              </div>
+              <input id="username" v-model="username" type="text"
+                  class="block w-full pl-10 pr-3 py-3 bg-gray-800/50 border border-gray-700 rounded-lg focus:ring-2 focus:ring-red-500 focus:border-red-500 text-white placeholder-gray-500 transition-all"
+                  placeholder="请输入用户名"
+                  autocomplete="username" />
+            </div>
+          </div>
+          
+          <!-- Password Input -->
+          <div class="space-y-2">
+            <div class="flex items-center justify-between">
+              <label for="password" class="block text-sm font-medium text-gray-300">密码</label>
+              <a href="#" @click.prevent="handleForgotPassword" class="text-sm text-red-400 hover:text-red-300 transition-colors">{{ forgotPasswordText }}</a>
+            </div>
+            <div class="relative">
+              <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
+                <svg class="w-5 h-5 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"
+                    xmlns="http://www.w3.org/2000/svg">
+                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+                        d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z">
+                    </path>
+                </svg>
+              </div>
+              <input id="password" v-model="password" type="password"
+                  class="block w-full pl-10 pr-3 py-3 bg-gray-800/50 border border-gray-700 rounded-lg focus:ring-2 focus:ring-red-500 focus:border-red-500 text-white placeholder-gray-500 transition-all"
+                  placeholder="请输入密码"
+                  autocomplete="current-password" />
+            </div>
+          </div>
+          
+          <!-- Remember Me -->
+          <div class="flex items-center">
+            <input id="remember-me" v-model="rememberMe" type="checkbox"
+                class="h-4 w-4 text-red-600 focus:ring-red-500 border-gray-600 rounded" />
+            <label for="remember-me" class="ml-2 block text-sm text-gray-300">记住我</label>
+          </div>
+          
+          <!-- Login Button -->
+          <button type="submit" :disabled="isLoading || !isFormValid"
+              class="w-full flex justify-center py-3 px-4 border border-transparent rounded-lg shadow-sm text-sm font-medium text-white bg-gradient-to-r from-red-600 to-red-800 hover:from-red-700 hover:to-red-900 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500 disabled:opacity-60 disabled:cursor-not-allowed transition-all">
+              <span v-if="isLoading" class="flex items-center">
+                <svg class="animate-spin -ml-1 mr-2 h-4 w-4 text-white" xmlns="http://www.w3.org/2000/svg"
+                    fill="none" viewBox="0 0 24 24">
+                    <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor"
+                        stroke-width="4"></circle>
+                    <path class="opacity-75" fill="currentColor"
+                        d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z">
+                    </path>
+                </svg>
+                登录中...
+              </span>
+              <span v-else>{{ loginButtonText }}</span>
+          </button>
+          
+          <!-- Sign Up Link -->
+          <div class="text-center mt-6">
+            <p class="text-sm text-gray-400">
+              还没有账号? 
+              <a href="#" @click.prevent="handleRegister" class="font-medium text-red-400 hover:text-red-300 transition-colors">{{ registerButtonText }}</a>
+            </p>
+          </div>
+        </form>
+      </div>
+
+      <!-- Railway Decoration -->
+      <div
+        class="absolute bottom-0 left-0 right-0 h-1 bg-gradient-to-r from-transparent via-red-500 to-transparent">
+      </div>
+      <div class="absolute bottom-1 left-0 right-0 flex justify-between px-4">
+        <div class="w-2 h-2 bg-red-500 rounded-full"></div>
+        <div class="w-2 h-2 bg-red-500 rounded-full"></div>
+        <div class="w-2 h-2 bg-red-500 rounded-full"></div>
+        <div class="w-2 h-2 bg-red-500 rounded-full"></div>
+        <div class="w-2 h-2 bg-red-500 rounded-full"></div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+/* Additional custom styles can be added here */
+
+/* Override browser autofill styles */
+:deep(input:-webkit-autofill),
+:deep(input:-webkit-autofill:hover),
+:deep(input:-webkit-autofill:focus),
+:deep(input:-webkit-autofill:active) {
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: white;
+  background-color: rgba(31, 41, 55, 0.5) !important;
+  transition: background-color 5000s ease-in-out 0s;
+}
+</style>

package/src/components/Sparkles.vue

@@ -0,0 +1,152 @@
+<script setup lang="ts">
+import { useRafFn } from "@vueuse/core";
+import { onBeforeUnmount, onMounted, ref, useTemplateRef } from "vue";
+
+interface Props {
+    background?: string;
+    particleColor?: string;
+    minSize?: number;
+    maxSize?: number;
+    speed?: number;
+    particleDensity?: number;
+}
+
+interface Particle {
+    x: number;
+    y: number;
+    size: number;
+    opacity: number;
+    vx: number;
+    vy: number;
+    phase: number;
+    phaseSpeed: number;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+    background: "#0d47a1",
+    particleColor: "#ffffff",
+    minSize: 1,
+    maxSize: 3,
+    speed: 4,
+    particleDensity: 120,
+});
+
+const containerRef = useTemplateRef("containerRef");
+const canvasRef = useTemplateRef("canvasRef");
+const particles = ref<Particle[]>([]);
+const ctx = ref<CanvasRenderingContext2D | null>(null);
+
+// Adjust canvas size on mount and resize
+function resizeCanvas() {
+    if (!canvasRef.value || !containerRef.value) return;
+
+    const dpr = window.devicePixelRatio || 1;
+    const rect = containerRef.value.getBoundingClientRect();
+
+    canvasRef.value.width = rect.width * dpr;
+    canvasRef.value.height = rect.height * dpr;
+
+    if (ctx.value) {
+        ctx.value.scale(dpr, dpr);
+    }
+}
+
+function generateParticles(): void {
+    const newParticles: Particle[] = [];
+    const count = props.particleDensity;
+
+    for (let i = 0; i < count; i++) {
+        const baseSpeed = 0.05;
+        const speedVariance = Math.random() * 0.3 + 0.7;
+
+        newParticles.push({
+            x: Math.random() * 100,
+            y: Math.random() * 100,
+            size: Math.random() * (props.maxSize - props.minSize) + props.minSize,
+            opacity: Math.random() * 0.5 + 0.3,
+            vx: (Math.random() - 0.5) * baseSpeed * speedVariance * props.speed,
+            vy: ((Math.random() - 0.5) * baseSpeed - baseSpeed * 0.3) * speedVariance * props.speed,
+            phase: Math.random() * Math.PI * 2,
+            phaseSpeed: 0.015,
+        });
+    }
+
+    particles.value = newParticles;
+}
+
+function updateAndDrawParticles() {
+    if (!ctx.value || !canvasRef.value) return;
+
+    const canvas = canvasRef.value;
+    ctx.value.clearRect(0, 0, canvas.width, canvas.height);
+
+    particles.value = particles.value.map((particle) => {
+        let newX = particle.x + particle.vx;
+        let newY = particle.y + particle.vy;
+
+        if (newX < -2) newX = 102;
+        if (newX > 102) newX = -2;
+        if (newY < -2) newY = 102;
+        if (newY > 102) newY = -2;
+
+        const newPhase = (particle.phase + particle.phaseSpeed) % (Math.PI * 2);
+        const opacity = 0.3 + (Math.sin(newPhase) * 0.3 + 0.3);
+
+        // Draw particle
+        ctx.value!.beginPath();
+        ctx.value!.arc(
+            (newX * canvas.width) / 100,
+            (newY * canvas.height) / 100,
+            particle.size,
+            0,
+            Math.PI * 2,
+        );
+        ctx.value!.fillStyle = `${props.particleColor}${Math.floor(opacity * 255)
+            .toString(16)
+            .padStart(2, "0")}`;
+        ctx.value!.fill();
+
+        return {
+            ...particle,
+            x: newX,
+            y: newY,
+            phase: newPhase,
+            opacity,
+        };
+    });
+}
+
+const { pause, resume } = useRafFn(updateAndDrawParticles, { immediate: false });
+
+// Handle window resize
+let resizeObserver: ResizeObserver | undefined;
+
+onMounted(() => {
+    if (!canvasRef.value) return;
+
+    ctx.value = canvasRef.value.getContext("2d");
+    resizeCanvas();
+    generateParticles();
+
+    // Set up resize observer
+    resizeObserver = new ResizeObserver(resizeCanvas);
+    if (containerRef.value) {
+        resizeObserver.observe(containerRef.value);
+    }
+
+    resume();
+});
+
+onBeforeUnmount(() => {
+    pause();
+    if (resizeObserver && containerRef.value) {
+        resizeObserver.unobserve(containerRef.value);
+    }
+});
+</script>
+
+<template>
+    <div ref="containerRef" class="relative size-full overflow-hidden will-change-transform" :style="{ background }">
+        <canvas ref="canvasRef" class="absolute inset-0 size-full" />
+    </div>
+</template>

package/src/index.ts

@@ -0,0 +1,11 @@
+import RailwayLogin from './components/RailwayLogin.vue';
+import FallingStarsBg from './components/FallingStarsBg.vue';
+import Sparkles from './components/Sparkles.vue';
+
+export {
+  RailwayLogin,
+  FallingStarsBg,
+  Sparkles
+};
+
+export default RailwayLogin;

package/tailwind.config.js

@@ -0,0 +1,59 @@
+// tailwind.config.js
+/** @type {import('tailwindcss').Config} */
+import { setupInspiraUI } from "@inspira-ui/plugins";
+
+export default {
+    darkMode: "selector",
+    content: [
+        "./index.html",
+        "./src/**/*.{vue,js,ts,jsx,tsx}",
+    ],
+    theme: {
+        extend: {
+            colors: {
+                border: "hsl(var(--border))",
+                input: "hsl(var(--input))",
+                ring: "hsl(var(--ring))",
+                background: "hsl(var(--background))",
+                foreground: "hsl(var(--foreground))",
+                primary: {
+                    DEFAULT: "hsl(var(--primary))",
+                    foreground: "hsl(var(--primary-foreground))",
+                },
+                secondary: {
+                    DEFAULT: "hsl(var(--secondary))",
+                    foreground: "hsl(var(--secondary-foreground))",
+                },
+                destructive: {
+                    DEFAULT: "hsl(var(--destructive))",
+                    foreground: "hsl(var(--destructive-foreground))",
+                },
+                muted: {
+                    DEFAULT: "hsl(var(--muted))",
+                    foreground: "hsl(var(--muted-foreground))",
+                },
+                accent: {
+                    DEFAULT: "hsl(var(--accent))",
+                    foreground: "hsl(var(--accent-foreground))",
+                },
+                popover: {
+                    DEFAULT: "hsl(var(--popover))",
+                    foreground: "hsl(var(--popover-foreground))",
+                },
+                card: {
+                    DEFAULT: "hsl(var(--card))",
+                    foreground: "hsl(var(--card-foreground))",
+                },
+            },
+            borderRadius: {
+                lg: "var(--radius)",
+                md: "calc(var(--radius) - 2px)",
+                sm: "calc(var(--radius) - 4px)",
+            },
+        },
+    },
+    plugins: [
+        require("tailwindcss-animate"),
+        setupInspiraUI,
+    ],
+};

package/tsconfig.app.json

@@ -0,0 +1,27 @@
+{
+  "extends": "@vue/tsconfig/tsconfig.dom.json",
+  "compilerOptions": {
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
+    "types": [
+      "vite/client"
+    ],
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "erasableSyntaxOnly": true,
+    "noFallthroughCasesInSwitch": true,
+    "noUncheckedSideEffectImports": true,
+     "baseUrl": ".",
+    "paths": {
+      "@/*": [
+        "src/*"
+      ]
+    }
+  },
+  "include": [
+    "src/**/*.ts",
+    "src/**/*.tsx",
+    "src/**/*.vue"
+  ]
+}

package/tsconfig.json

@@ -0,0 +1,7 @@
+{
+  "files": [],
+  "references": [
+    { "path": "./tsconfig.app.json" },
+    { "path": "./tsconfig.node.json" }
+  ]
+}

package/tsconfig.node.json

@@ -0,0 +1,30 @@
+{
+  "compilerOptions": {
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
+    "target": "ES2023",
+    "lib": ["ES2023"],
+    "module": "ESNext",
+    "types": ["node"],
+    "skipLibCheck": true,
+
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "verbatimModuleSyntax": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "erasableSyntaxOnly": true,
+    "noFallthroughCasesInSwitch": true,
+    "noUncheckedSideEffectImports": true,
+    "baseUrl": ".",
+    "paths": {
+      "@/*": ["src/*"]
+    }
+  },
+  "include": ["vite.config.ts"]
+}

package/vite.config.ts

@@ -0,0 +1,35 @@
+import { defineConfig } from 'vite'
+import vue from '@vitejs/plugin-vue'
+import { resolve } from 'path'
+
+export default defineConfig(({ mode }) => {
+  if (mode === 'lib') {
+    return {
+      plugins: [vue()],
+      build: {
+        lib: {
+          entry: resolve(__dirname, 'src/index.ts'),
+          name: 'RailwayLogin',
+          fileName: (format) => `railway-login-component.${format}.js`,
+        },
+        rollupOptions: {
+          external: ['vue'],
+          output: {
+            globals: {
+              vue: 'Vue',
+            },
+          },
+        },
+      },
+    }
+  }
+  
+  return {
+    plugins: [vue()],
+    resolve: {
+      alias: {
+        '@': resolve(__dirname, 'src'),
+      },
+    },
+  }
+})