A zero-interaction, zero-overlap typographic quote cloud generator. Quote Cloud arranges a deck of quotes into an organic, print-ready composition on virtual paper, then lets you preview and print it at real paper sizes.

Built with Vite + React 19 + TypeScript.

• Auto-fit typography — quotes are packed with an AABB-intersection + Archimedean spiral algorithm, and the base font size is fit to the selected paper bounds via binary search.
• Zero overlap, zero interaction — the layout settles into a clean composition with no hover, focus, glow, or animation noise.
• Multiple paper sizes & orientation — pick a paper size and portrait/landscape; the preview scales to your viewport while layout stays at fixed virtual-paper pixels.
• Print-ready output — high-contrast print rules are injected per paper/orientation so what you see prints faithfully.
• Editable, persistent deck — add or remove quotes; the deck and the "show author" toggle are saved to localStorage.
• "I Feel Lucky" — swap in a curated set of famous quotes and reshuffle instantly.
• Accurate text measurement — waits for document.fonts.ready and measures multiline text with @chenglou/pretext so layout uses final glyph widths.

• Vite 8 — dev server and build
• React 19 + React DOM
• TypeScript 5 (strict)
• Tailwind CSS 4 (via @tailwindcss/vite)
• d3-cloud and @chenglou/pretext for measurement/packing

• Node.js 18+ (Node 20+ recommended)

npm install

npm run dev

Then open the URL printed by Vite (typically http://localhost:5173).

npm run build

npm run preview

npm test

Tests compile with tsconfig.test.json and run via the Node test runner.

1. Choose a paper size and orientation in the control panel.
2. Toggle show author to display attribution under each quote.
3. Open manage quotes to add or remove quotes, or hit I Feel Lucky for a famous-quote deck.
4. Click print to send the high-contrast layout to your printer.

Your deck and preferences persist across reloads via localStorage.

src/
  App.tsx                 App shell + state (deck, paper, persistence)
  components/
    PaperCanvas.tsx       Virtual paper + scaled preview
    ControlPanel.tsx      Paper size, orientation, print controls
    QuoteManager.tsx      Add/remove quotes, "I Feel Lucky"
    AutoFitQuote.tsx      Auto-fit quote rendering
  scatter.ts              Scatter assignment + deck shuffle
  layoutCore.ts           Packing / auto-fit core math
  config.ts               Paper size definitions
  seed.ts                 Seed + famous quote datasets
  print.ts                Print rule injection
  types.ts                Shared types
tests/                    layoutCore tests

Released under the MIT License.

一个零交互、零重叠的文字排版语录云生成器。Quote Cloud 将一组语录排布成自然、可直接打印的版面，置于虚拟纸张之上，让你能够按真实纸张尺寸预览并打印。

基于 Vite + React 19 + TypeScript 构建。

• 自动适配排版 —— 使用 AABB 相交检测 + 阿基米德螺线算法对语录进行紧密排布，并通过二分查找将基础字号适配到所选纸张边界。
• 零重叠、零交互 —— 版面会自动收敛为整洁的构图，没有悬停、聚焦、发光或动画等干扰。
• 多种纸张尺寸与方向 —— 选择纸张尺寸与纵向/横向；预览随视口缩放，而版面保持固定的虚拟纸张像素。
• 可直接打印 —— 按纸张/方向注入高对比度打印规则，所见即所得地打印。
• 可编辑、可持久化的语录集 —— 添加或删除语录；语录集与"显示作者"开关会保存到 localStorage。
• "手气不错" —— 一键替换为精选的名人语录并即时重新排布。
• 精确的文本测量 —— 等待 document.fonts.ready，并使用 @chenglou/pretext 测量多行文本，使版面使用最终的字形宽度。

• Vite 8 —— 开发服务器与构建
• React 19 + React DOM
• TypeScript 5（严格模式）
• Tailwind CSS 4（通过 @tailwindcss/vite）
• d3-cloud 与 @chenglou/pretext 用于测量/排布

• Node.js 18+（推荐 Node 20+）

npm install

npm run dev

然后打开 Vite 打印的地址（通常为 http://localhost:5173）。

npm run build

npm run preview

npm test

测试使用 tsconfig.test.json 编译，并通过 Node 测试运行器执行。

1. 在控制面板中选择纸张尺寸与方向。
2. 切换显示作者以在每条语录下方显示署名。
3. 打开管理语录以添加或删除语录，或点击手气不错获取名人语录集。
4. 点击打印将高对比度版面发送到打印机。

你的语录集与偏好设置会通过 localStorage 在刷新后保留。

基于 MIT 许可证 发布。