@lucky-boy/lottery-helix

EN: DNA-inspired 3D lottery animation featuring spiraling user cards and atmospheric lighting.
CN: DNA 螺旋造型的 3D 抽奖动画，结合用户卡片与灯光效果。

Features · 特性

• EN: Parametric helix controls for radius, height, and turn count. / CN: 提供半径、高度、圈数等参数化控制。
• EN: Supports remote user ingestion with texture caching for performance. / CN: 支持远程用户数据加载并缓存纹理以提升性能。
• EN: Shares control overlays, result modal, and settings drawer with lottery-ui. / CN: 复用 lottery-ui 的控制条、结果弹窗与设置面板。

Installation · 安装

pnpm add @lucky-boy/lottery-helix
# peer deps
pnpm add three react react-dom

Usage · 使用示例

import { LotteryHelix } from "@lucky-boy/lottery-helix";
import type { LotteryHelixConfig, User } from "@lucky-boy/lottery-helix";

const users: User[] = [
  { id: "001", name: "Alice" },
  { id: "002", name: "Bob" }
];

const overrides: Partial<LotteryHelixConfig> = {
  radius: 15,
  height: 40,
  turns: 3
};

export function HelixDemo() {
  return <LotteryHelix users={users} {...overrides} />;
}

Configuration Highlights · 关键配置

| Field | Description | | ----- | ----------- | | radius | EN: Controls how far cards orbit from the center axis. / CN: 控制卡片到中心轴的距离。 | | height | EN: Total vertical distance covered by the helix. / CN: 螺旋覆盖的总高度。 | | turns | EN: Number of helix rotations. / CN: 螺旋旋转圈数。 | | particleSpeedMax | EN: Upper bound for particle drift speed. / CN: 粒子漂移速度上限。 |

Development · 本地开发

pnpm install
pnpm run build

License · 许可

MIT