English · 简体中文
Explore UI motion, adjust it live, and take the settings into your project.
TuneShape is a browser tool for designers and developers to try UI effects and adjust how they look and behave. Browse the catalog, compare your changes with the preset, then export the configuration or copy an implementation prompt. The interface is available in English and Chinese.
Live demo · Browse → Tune → Export
About 15 seconds, recorded from the live website. The example adjusts Glass Folder's color, size, and card spread, then exports its current configuration.
- Browse — Choose an effect by category or search for its Chinese or English name. Try the interaction in its catalog card.
- Tune — Open the effect, change its parameters, and compare the current settings with the preset.
- Reuse — Export the JSON configuration or copy the implementation prompt to continue in your own project.
The overview shows the online editor. The local examples included in this repository are described below.
| Task | Available tools |
|---|---|
| Find an effect | Categories for controls, navigation, containers, text, images, indicators, and backgrounds; Chinese and English search |
| Adjust the result | Effect-specific controls for content, appearance, timing, easing, and motion |
| Compare behavior | Preset and current-setting previews, playback controls, and observation speed |
| Bring it into a project | JSON import/export, motion specifications, implementation prompts, offline HTML, and standalone reproduction projects |
The editor supports pointer, keyboard, and touch interactions, with reduced-motion behavior. Available controls and interactions vary by effect.
Export JSON before refreshing or leaving the page: effect parameters are kept for the current page session. Playback progress and observation speed are tool state rather than saved effect settings.
Try your own settings on TuneShape →
Rendering source for all 46 effects in the visible catalog is public. Each includes a default configuration, runnable page, and English/Chinese documentation. Run the examples · Machine-readable catalog · Effect guides
git clone https://github.com/orocoa/TuneShape.git
cd TuneShape/effects
pnpm install --frozen-lockfile
pnpm devThe effect package uses the same rendering components as the website. The full website editor, deployment configuration, and work records are outside this package. The original three React basic examples and standalone ASCII Shoal module remain available; their setup is preserved below.
Local setup, example configuration, and source guide
| Example | Interaction | Configuration | Prompt |
|---|---|---|---|
| Button press feedback | Press and release with a pointer, Space, or Enter | button.json | button.md |
| Tab transitions | Switch panels with a pointer or arrow keys; Home and End are supported | tabs.json | tabs.md |
| In-page dialog | Open, close, or dismiss with Escape; focus returns to the trigger | modal.json | modal.md |
The dialog demonstrates an entrance and exit inside the preview area. It uses aria-modal="false" and does not trap focus across the application.
examples/ascii-shoal/ is a standalone JavaScript Canvas background with swimming silhouettes, small fish, configurable ASCII sampling density, glyph size, palette, and playback. It has no runtime dependencies and does not require the React examples to be installed.
The implementation uses newly authored shapes and motion paths, applying the grid-and-character approach used by TuneShape's ASCII wave effect. Its source and implementation notes are included in the example. See the example README for local preview, embedding, configuration, and lifecycle controls.
cd examples/ascii-shoal
npm run dev
# Stop the preview server before running the following commands.
node --test test/*.test.mjs
npm run buildThe build writes the standalone demo to examples/ascii-shoal/dist/. The root commands below continue to operate on the three React examples.
- Node.js 22.12 or later. CI runs on Node.js 24.
- pnpm 11.x. Use the exact version declared in
package.jsonunderpackageManager.
git clone https://github.com/orocoa/TuneShape.git
cd TuneShape
pnpm install --frozen-lockfile
pnpm devOpen the local URL printed by Vite. If you downloaded a release ZIP, extract it and run the last two commands from the directory containing package.json.
Package installation requires access to the package registry. Once dependencies are installed, the examples run locally without an account, API key, database, or connection to the TuneShape website.
| Command | Purpose |
|---|---|
pnpm dev |
Start the local development server |
pnpm test |
Run configuration, validation, and interaction-contract tests |
pnpm build |
Run TypeScript checks and create the static production build in dist/ |
pnpm preview |
Preview an existing production build locally |
Build before running pnpm preview. Deploy the contents of dist/ to a static web host.
Select button, tabs, or modal in the demo to load its defaults. To apply an exact configuration:
- Open Edit the exact configuration.
- Paste a complete configuration from
configs/or a schema version 1 export from the online editor. - Select Apply configuration.
The configuration includes the component type, so applying it selects the corresponding example. You can also edit config.json before starting or building to set the initial example. Selecting another example in the navigation loads that example's defaults.
Supported settings include tween and spring transitions, delay, easing, transform values, and physical spring parameters. Invalid or incompatible configurations are rejected with a validation message. The playback control supports pause and resume; the examples respond to live prefers-reduced-motion changes.
Each file in prompts/ contains the interaction rules, exact JSON configuration, and Motion state and transition contract for the corresponding example in configs/.
- Choose the matching configuration and Prompt from the table above.
- Use the Prompt together with this repository's implementation and supporting modules.
- Apply the Prompt's Exact configuration to the demo or save it as
config.json. - Run
pnpm testandpnpm build. - Check pointer and keyboard input, repeated input, animation interruption, pause/resume, and reduced motion in the browser.
The included source and validated configuration define the reference behavior. AI-generated implementations should be checked against that contract; natural-language input alone does not guarantee identical generated code. The examples reproduce the basic interaction and parameters using the simplified styling in this package.
| Path | Responsibility |
|---|---|
src/main.tsx |
Demo navigation, JSON editor, and playback controls |
src/Preview.tsx |
Button, tabs, and dialog rendering and interaction |
src/model.ts |
Configuration validation, state mapping, and Motion specifications |
src/easing.ts |
Easing validation and evaluation |
src/useDetailPlayback.ts |
Playback state and animation-clock control |
src/usePrefersReducedMotion.ts |
Live system motion-preference handling |
src/model.test.ts |
Configuration round trips, boundaries, and interaction contracts |
src/style.css |
System-font demo styling and responsive layout |
configs/ / prompts/ |
Matching configuration snapshots and implementation Prompts |
GitHub release archives include SOURCE_MANIFEST.json, which records the exported files, byte lengths, and SHA-256 hashes. Its own hash is excluded to avoid a circular digest. Each release also provides SHA256SUMS.txt for its ZIP archive.
Download the ZIP and checksum file into the same directory, then verify the archive:
# macOS
shasum -a 256 -c SHA256SUMS.txt# Linux
sha256sum -c SHA256SUMS.txtThe manifest describes the published snapshot. Local edits to a listed file will change its hash.
For a bug or an effect request, open an issue. Include the effect name, browser or device, steps to reproduce, and the result you expected. Issues and pull requests may be written in English or Chinese.
For changes to the included source, see CONTRIBUTING.md. Published versions are listed under Releases. Maintained by orocoa.
The source code and documentation published in this repository are available under the MIT License. Third-party dependencies and materials shown in website previews retain their respective licenses; the website preview does not grant rights to third-party assets.