Wuthering Waves Rotation Planner

A visual rotation planner for Wuthering Waves — drag to build your rotation, zero learning curve, no install or sign-up.

繁體中文 | 简体中文 | English | 日本語 | 한국어

Live Demo · Highlights · Showcase · Features · Shortcuts · Tech Stack

---

Live Demo

wuthering-waves-rotation-planner.vercel.app

Feature Overview

wuwa_demo.mp4

Hotkey Input Mode

_Demo.mp4

Highlights

• Fully visual, drag-based editing
• Fast hotkey input
• No installation required
• Multi-language support
• Built-in interactive tutorial
• Auto-updated character data
• Local saves and image export

Showcase

Features

Rotation

• Drag & drop: blocks move freely, and following blocks automatically align and fill the gap
• Block editing: add, delete, copy, paste, cut, and edit text inline
• Multi-select: Ctrl+click, marquee selection, or select an entire character track
• Hotkey input mode: customize hotkeys and their mapped blocks to insert them rapidly via hotkeys; supports tap/hold and mouse input
• Undo/redo: a snapshot of every action is stored in the history

Persistence

• Template library: save frequently used skill combos for each character
• Team saves: store rotations locally, with load, rename, pin, and overwrite
• Multiple rotation tabs: create several rotation tabs for the same team

Export

• Image export: merge into a single image or bundle multiple images into a ZIP; supports multi-scale PNG and SVG

Keyboard Shortcuts

Key	Action
A / D (or ← / →)	Select the previous / next block
W / S (or ↑ / ↓)	Select the previous / next character track
Space	Add a block
Enter	Edit the selected block
Delete / Backspace	Delete selected blocks
Ctrl+A	Select all blocks
Ctrl+C / Ctrl+X / Ctrl+V / Ctrl+D	Copy / cut / paste / duplicate to the right
Ctrl+Z	Undo
Ctrl+Shift+Z / Ctrl+Y	Redo
Ctrl+S / Ctrl+Shift+S	Save changes / Save as
Escape	Clear all selection
Tab	Toggle the sidebar
Shift+Wheel	Scroll the rotation horizontally

Hotkey Input Mode

Key	Action
F	Enter hotkey input mode
1 / 2 / 3 (or wheel)	Switch character track
Delete / Backspace	Delete the block at the very end of the timeline
Escape	Exit hotkey input mode

Supported Languages

Switch languages from the gear icon in the top-right corner.

• 繁體中文
• 简体中文
• English (default)
• 日本語
• 한국어

Tech Stack

• Framework: Vue 3 + TypeScript + Vite + Pinia + TailwindCSS
• Drag & drop: VueDraggablePlus
• Export: html-to-image + JSZip
• i18n: vue-i18n
• Onboarding tour: driver.js
• Persistence: LocalStorage

API Usage

Character and attribute data source: encore.moe

Local Development

npm install      # install dependencies
npm run dev      # start the dev server
npm run build    # type-check + build

License

This project is licensed under the MIT License.

Notes

1. Some translations may contain errors; feedback is welcome.
2. When exporting images from the VS Code built-in browser, the save dialog appears twice — the first produces a broken file, and the second is the correct one.