|
| 1 | +# TechScript AI Animation Guide (v1.1) |
| 2 | + |
| 3 | +This guide is designed for AI models (LLMs) to understand, generate, and improve TechScript (`.txs`) animation code using the `anime` module. |
| 4 | + |
| 5 | +## 1. Core Syntax Overview |
| 6 | + |
| 7 | +TechScript uses the `use` keyword for modules and `make` for variables. Multi-line strings should use triple quotes `"""`. |
| 8 | + |
| 9 | +```techscript |
| 10 | +use anime |
| 11 | +
|
| 12 | +# Step 1: Create a workspace |
| 13 | +make anim = anime.create() |
| 14 | +
|
| 15 | +# Step 2: Add styles (Optional but Recommended) |
| 16 | +anim["styles"].append(""" |
| 17 | + .star { width: 50px; height: 50px; background: cyan; clip-path: polygon(...); } |
| 18 | +""") |
| 19 | +
|
| 20 | +# Step 3: Add elements |
| 21 | +anim["elements"].append("<div class='star'></div>") |
| 22 | +
|
| 23 | +# Step 4: Define Animation Logic |
| 24 | +# anime.animate(selector, config_map) |
| 25 | +make config = { |
| 26 | + "scale": 1.5, |
| 27 | + "duration": 1000, |
| 28 | + "loop": true, |
| 29 | + "direction": "alternate", |
| 30 | + "easing": "easeInOutSine" |
| 31 | +} |
| 32 | +anim["animations"].append(anime.animate(".star", config)) |
| 33 | +
|
| 34 | +# Step 5: Render |
| 35 | +anime.render(anim) |
| 36 | +``` |
| 37 | + |
| 38 | +## 2. API Reference (`anime` module) |
| 39 | + |
| 40 | +| Function | Description | |
| 41 | +| :--- | :--- | |
| 42 | +| `anime.create()` | Initializes a workspace map with `elements`, `animations`, `styles`, and `scripts`. | |
| 43 | +| `anime.target(tag, text, class)` | Returns a string of HTML (e.g., `<div class='...'>...</div>`). | |
| 44 | +| `anime.animate(selector, map)` | Generates a JavaScript string for the animation configuration. | |
| 45 | +| `anime.stagger(ms)` | Creates a staggered delay for multiple elements. | |
| 46 | +| `anime.render(workspace)` | Generates the HTML file and launches the local viewer. | |
| 47 | + |
| 48 | +## 3. Supported Animation Properties |
| 49 | + |
| 50 | +Pass these in the configuration map to `anime.animate`: |
| 51 | + |
| 52 | +- **Transform**: `translateX`, `translateY`, `rotate`, `rotateX`, `rotateY`, `scale`, `scaleX`, `scaleY`, `skew`. |
| 53 | +- **Style**: `opacity`, `backgroundColor`, `borderRadius`, `filter` (e.g., `"blur(5px)"`), `boxShadow`. |
| 54 | +- **Control**: `duration` (ms), `delay` (ms), `easing`, `loop` (bool/int), `direction` (`"alternate"`, `"reverse"`). |
| 55 | + |
| 56 | +**Easings**: `linear`, `easeInOutSine`, `easeOutExpo`, `easeOutElastic(1, .5)`, `easeInOutBack`. |
| 57 | + |
| 58 | +## 4. Advanced: The Studio Pattern |
| 59 | + |
| 60 | +To make interactive interfaces, append raw JavaScript to `anim["scripts"]`: |
| 61 | + |
| 62 | +```techscript |
| 63 | +anim["scripts"].append(""" |
| 64 | + function customBehavior() { |
| 65 | + // Standard JS here, techscript will bundle it |
| 66 | + console.log("Animation Interactivity Active"); |
| 67 | + } |
| 68 | + customBehavior(); |
| 69 | +""") |
| 70 | +``` |
| 71 | + |
| 72 | +--- |
| 73 | + |
| 74 | +## 5. 🚀 AI Prompt Template (Copy & Paste) |
| 75 | + |
| 76 | +**Use the following prompt when asking an AI to improve your TechScript code:** |
| 77 | + |
| 78 | +> "I am working with TechScript (a Rust-based VM for web animations). Below is my current `.txs` file. Please improve it by: |
| 79 | +> 1. Adding premium CSS (Glassmorphism, Neon Glows, or Modern Gradients). |
| 80 | +> 2. Using more complex `anime.js` properties like staggered delays, elastic easings, or multi-property transitions. |
| 81 | +> 3. Ensuring the UI looks high-fidelity and 'premium'. |
| 82 | +> 4. output ONLY the full TechScript code. |
| 83 | +> |
| 84 | +> My Code: |
| 85 | +> [PASTE YOUR CODE HERE]" |
| 86 | +
|
| 87 | +--- |
| 88 | + |
| 89 | +## 6. Pro-Tips for AI |
| 90 | +- **Quoting**: Don't quote `anime.stagger()` in the config map; the TechScript runtime handles unquoting for `anime.` prefixed calls. |
| 91 | +- **Triple Quotes**: ALWAYS use `"""` for multi-line CSS or scripts to avoid lexing errors. |
| 92 | +- **None**: Use `none` instead of `null`. |
0 commit comments