@rosetears/aili-pi 0.1.0

package/skills/frontend-dev/references/motion-recipes.md

@@ -0,0 +1,407 @@
+# Motion Recipes
+
+Production-ready animation code snippets. Copy and adapt as needed.
+
+## 1. Scroll-Triggered Reveal (Framer Motion)
+
+Elements fade and slide up when entering viewport.
+
+```tsx
+"use client";
+import { motion } from "framer-motion";
+
+const fadeSlideUp = {
+  hidden: { opacity: 0, y: 40 },
+  visible: {
+    opacity: 1,
+    y: 0,
+    transition: { type: "spring", stiffness: 100, damping: 20 },
+  },
+};
+
+export function RevealSection({ children }: { children: React.ReactNode }) {
+  return (
+    <motion.div
+      variants={fadeSlideUp}
+      initial="hidden"
+      whileInView="visible"
+      viewport={{ once: true, margin: "-80px" }}
+    >
+      {children}
+    </motion.div>
+  );
+}
+```
+
+## 2. Staggered List Orchestration (Framer Motion)
+
+Children animate sequentially with blur effect.
+
+```tsx
+"use client";
+import { motion } from "framer-motion";
+
+const container = {
+  hidden: {},
+  visible: { transition: { staggerChildren: 0.08, delayChildren: 0.1 } },
+};
+
+const item = {
+  hidden: { opacity: 0, y: 24, filter: "blur(4px)" },
+  visible: {
+    opacity: 1,
+    y: 0,
+    filter: "blur(0px)",
+    transition: { type: "spring", stiffness: 120, damping: 20 },
+  },
+};
+
+export function StaggerGrid({ items }: { items: React.ReactNode[] }) {
+  return (
+    <motion.div
+      className="grid gap-6"
+      variants={container}
+      initial="hidden"
+      whileInView="visible"
+      viewport={{ once: true }}
+    >
+      {items.map((child, i) => (
+        <motion.div key={i} variants={item}>
+          {child}
+        </motion.div>
+      ))}
+    </motion.div>
+  );
+}
+```
+
+## 3. GSAP ScrollTrigger Pinned Section
+
+Horizontal scroll panels with pinning.
+
+```tsx
+"use client";
+import { useRef, useEffect } from "react";
+import gsap from "gsap";
+import { ScrollTrigger } from "gsap/ScrollTrigger";
+
+gsap.registerPlugin(ScrollTrigger);
+
+export function PinnedTimeline() {
+  const containerRef = useRef<HTMLDivElement>(null);
+  const panelsRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    const ctx = gsap.context(() => {
+      const panels = gsap.utils.toArray<HTMLElement>(".panel");
+      gsap.to(panels, {
+        xPercent: -100 * (panels.length - 1),
+        ease: "none",
+        scrollTrigger: {
+          trigger: containerRef.current,
+          pin: true,
+          scrub: 1,
+          end: () => "+=" + (panelsRef.current?.scrollWidth ?? 0),
+        },
+      });
+    }, containerRef);
+
+    return () => ctx.revert(); // CRITICAL: full cleanup
+  }, []);
+
+  return (
+    <div ref={containerRef} className="overflow-hidden">
+      <div ref={panelsRef} className="flex">
+        {/* .panel elements */}
+      </div>
+    </div>
+  );
+}
+```
+
+## 4. Parallax Tilt Card (Framer Motion)
+
+Mouse-tracking 3D perspective. Uses `useMotionValue` — never `useState`.
+
+```tsx
+"use client";
+import { motion, useMotionValue, useTransform } from "framer-motion";
+
+export function TiltCard({ children }: { children: React.ReactNode }) {
+  const x = useMotionValue(0.5);
+  const y = useMotionValue(0.5);
+  const rotateX = useTransform(y, [0, 1], [8, -8]);
+  const rotateY = useTransform(x, [0, 1], [-8, 8]);
+
+  return (
+    <motion.div
+      style={{ rotateX, rotateY, transformPerspective: 800 }}
+      onMouseMove={(e) => {
+        const rect = e.currentTarget.getBoundingClientRect();
+        x.set((e.clientX - rect.left) / rect.width);
+        y.set((e.clientY - rect.top) / rect.height);
+      }}
+      onMouseLeave={() => {
+        x.set(0.5);
+        y.set(0.5);
+      }}
+      className="rounded-2xl bg-white shadow-lg"
+    >
+      {children}
+    </motion.div>
+  );
+}
+```
+
+## 5. Magnetic Button (Framer Motion)
+
+Cursor-attracted button. Pure `useMotionValue` — zero re-renders.
+
+```tsx
+"use client";
+import { motion, useMotionValue, useSpring } from "framer-motion";
+import { useRef } from "react";
+
+export function MagneticButton({ children }: { children: React.ReactNode }) {
+  const ref = useRef<HTMLButtonElement>(null);
+  const x = useMotionValue(0);
+  const y = useMotionValue(0);
+  const springX = useSpring(x, { stiffness: 200, damping: 15 });
+  const springY = useSpring(y, { stiffness: 200, damping: 15 });
+
+  return (
+    <motion.button
+      ref={ref}
+      style={{ x: springX, y: springY }}
+      onMouseMove={(e) => {
+        const rect = ref.current!.getBoundingClientRect();
+        const dx = e.clientX - (rect.left + rect.width / 2);
+        const dy = e.clientY - (rect.top + rect.height / 2);
+        x.set(dx * 0.3);
+        y.set(dy * 0.3);
+      }}
+      onMouseLeave={() => {
+        x.set(0);
+        y.set(0);
+      }}
+    >
+      {children}
+    </motion.button>
+  );
+}
+```
+
+## 6. Text Scramble / Decode Effect
+
+Matrix-style character reveal — pure JS, no library needed.
+
+```tsx
+"use client";
+import { useEffect, useRef, useState } from "react";
+
+const chars = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";
+
+export function TextScramble({ text, className }: { text: string; className?: string }) {
+  const [display, setDisplay] = useState(text);
+  const iteration = useRef(0);
+
+  useEffect(() => {
+    iteration.current = 0;
+    const id = setInterval(() => {
+      setDisplay(
+        text
+          .split("")
+          .map((char, i) =>
+            i < iteration.current ? char : chars[Math.floor(Math.random() * chars.length)]
+          )
+          .join("")
+      );
+      iteration.current += 1 / 3;
+      if (iteration.current >= text.length) clearInterval(id);
+    }, 30);
+    return () => clearInterval(id);
+  }, [text]);
+
+  return <span className={className}>{display}</span>;
+}
+```
+
+## 7. SVG Path Draw on Scroll (CSS Scroll-Driven)
+
+Zero-JS scroll-linked path drawing using native CSS.
+
+```css
+@supports (animation-timeline: scroll()) {
+  .draw-path {
+    stroke-dasharray: 1;
+    stroke-dashoffset: 1;
+    animation: draw linear;
+    animation-timeline: scroll();
+    animation-range: entry 0% cover 60%;
+  }
+
+  @keyframes draw {
+    to {
+      stroke-dashoffset: 0;
+    }
+  }
+}
+```
+
+## 8. Horizontal Scroll Hijack (GSAP)
+
+Vertical scroll drives horizontal panning.
+
+```tsx
+"use client";
+import { useRef, useEffect } from "react";
+import gsap from "gsap";
+import { ScrollTrigger } from "gsap/ScrollTrigger";
+
+gsap.registerPlugin(ScrollTrigger);
+
+export function HorizontalScroll({ children }: { children: React.ReactNode }) {
+  const sectionRef = useRef<HTMLDivElement>(null);
+  const trackRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    const ctx = gsap.context(() => {
+      const track = trackRef.current!;
+      const scrollWidth = track.scrollWidth - window.innerWidth;
+      gsap.to(track, {
+        x: -scrollWidth,
+        ease: "none",
+        scrollTrigger: {
+          trigger: sectionRef.current,
+          pin: true,
+          scrub: 0.8,
+          end: () => `+=${scrollWidth}`,
+        },
+      });
+    }, sectionRef);
+    return () => ctx.revert();
+  }, []);
+
+  return (
+    <section ref={sectionRef} className="overflow-hidden">
+      <div ref={trackRef} className="flex gap-8 w-max">
+        {children}
+      </div>
+    </section>
+  );
+}
+```
+
+## 9. Particle Background (React Three Fiber)
+
+Isolated canvas layer. Purely decorative, pointer-events-none.
+
+```tsx
+"use client";
+import { Canvas, useFrame } from "@react-three/fiber";
+import { useRef, useMemo } from "react";
+import * as THREE from "three";
+
+function Particles({ count = 800 }) {
+  const mesh = useRef<THREE.Points>(null);
+  const positions = useMemo(() => {
+    const arr = new Float32Array(count * 3);
+    for (let i = 0; i < count * 3; i++) arr[i] = (Math.random() - 0.5) * 10;
+    return arr;
+  }, [count]);
+
+  useFrame(({ clock }) => {
+    if (mesh.current) mesh.current.rotation.y = clock.getElapsedTime() * 0.05;
+  });
+
+  return (
+    <points ref={mesh}>
+      <bufferGeometry>
+        <bufferAttribute attach="attributes-position" args={[positions, 3]} />
+      </bufferGeometry>
+      <pointsMaterial size={0.015} color="#94a3b8" transparent opacity={0.6} />
+    </points>
+  );
+}
+
+export function ParticleCanvas() {
+  return (
+    <div className="fixed inset-0 -z-10 pointer-events-none">
+      <Canvas camera={{ position: [0, 0, 5], fov: 60 }}>
+        <Particles />
+      </Canvas>
+    </div>
+  );
+}
+```
+
+## 10. Shared Layout Morph (Framer Motion)
+
+Card-to-modal expansion using `layoutId`.
+
+```tsx
+"use client";
+import { motion, AnimatePresence } from "framer-motion";
+import { useState } from "react";
+
+export function MorphCard({ id, preview, detail }: {
+  id: string;
+  preview: React.ReactNode;
+  detail: React.ReactNode;
+}) {
+  const [open, setOpen] = useState(false);
+  return (
+    <>
+      <motion.div layoutId={`card-${id}`} onClick={() => setOpen(true)}
+        className="cursor-pointer rounded-2xl bg-white p-6 shadow-md">
+        {preview}
+      </motion.div>
+
+      <AnimatePresence>
+        {open && (
+          <>
+            <motion.div
+              initial={{ opacity: 0 }} animate={{ opacity: 1 }} exit={{ opacity: 0 }}
+              className="fixed inset-0 bg-black/40 z-40"
+              onClick={() => setOpen(false)}
+            />
+            <motion.div layoutId={`card-${id}`}
+              className="fixed inset-4 md:inset-20 z-50 rounded-2xl bg-white p-8 shadow-2xl overflow-auto">
+              {detail}
+            </motion.div>
+          </>
+        )}
+      </AnimatePresence>
+    </>
+  );
+}
+```
+
+## Scroll Animation Patterns
+
+### Sticky Scroll Stack
+Cards pin to top and stack over each other.
+- Each card: `position: sticky; top: calc(var(--index) * 2rem)`
+- Depth illusion: `scale(calc(1 - var(--index) * 0.03))`
+
+### Split-Screen Parallax
+Two viewport halves scroll at different speeds.
+- Left: `translateY` at 0.5x scroll speed (GSAP `scrub`)
+- Mobile: collapse to single column, disable parallax
+
+### Zoom Parallax
+Hero image scales 1 to 1.5 on scroll.
+```tsx
+scrollTrigger: { trigger: heroRef, start: "top top", end: "bottom top", scrub: true }
+gsap.to(imageRef, { scale: 1.5, ease: "none" });
+```
+
+### Text Mask Reveal
+Large typography as window into video/image background.
+- `background-clip: text` + `color: transparent`
+- Animate `background-position` on scroll
+
+### Curtain Reveal
+Hero splits in half, each side slides away on scroll.
+- Two halves clipped with `clip-path: inset(0 50% 0 0)` and `inset(0 0 0 50%)`
+- GSAP animates `xPercent: -100` and `xPercent: 100`

package/skills/frontend-dev/references/troubleshooting.md

@@ -0,0 +1,85 @@
+# Troubleshooting
+
+## Quick reference
+
+| Error | Cause | Fix |
+|-------|-------|-----|
+| `MINIMAX_API_KEY is not set` | Key not set | `export MINIMAX_API_KEY="key"` |
+| `401 Unauthorized` | Invalid/expired key | Check key validity |
+| `429 Too Many Requests` | Rate limit | Add delays between requests |
+| `TimeoutError` | Network or long text | Use async TTS for long text, check network |
+| `invalid params, method t2a-v2 not have model` | Wrong model name | Use `speech-2.8-hd` (hyphens, not underscores) |
+| `brotli: decoder process called...` | Encoding issue | Already fixed in utils.py (Accept-Encoding header) |
+
+## Environment
+
+### API key not set
+
+```bash
+export MINIMAX_API_KEY="<paste-your-key-here>"
+
+# Verify
+echo $MINIMAX_API_KEY
+```
+
+### FFmpeg not found
+
+```bash
+# macOS
+brew install ffmpeg
+
+# Ubuntu
+sudo apt install ffmpeg
+
+# Verify
+ffmpeg -version
+```
+
+### Missing Python packages
+
+```bash
+pip install requests
+```
+
+## API errors
+
+### Authentication (401)
+
+- Verify API key is correct and not expired
+- Check for extra spaces in key value
+
+### Rate limiting (429)
+
+Add delays between requests:
+```python
+import time
+for text in texts:
+    result = tts(text)
+    time.sleep(1)
+```
+
+### Invalid model name
+
+Valid names (use hyphens, must include -hd or -turbo):
+- `speech-2.8-hd` (recommended)
+- `speech-2.8-turbo`
+- `speech-2.6-hd`
+- `speech-2.6-turbo`
+
+Wrong: `speech_01`, `speech_2.6`, `speech-01`
+
+## Audio issues
+
+### Poor quality
+
+Re-generate with higher settings:
+```bash
+python scripts/minimax_tts.py "text" -o out.mp3 --sample-rate 32000 --model speech-2.8-hd
+```
+
+### Invalid emotion
+
+Valid emotions:
+- All models: happy, sad, angry, fearful, disgusted, surprised, calm
+- speech-2.6 only: + fluent, whisper
+- speech-2.8: auto-matched (leave empty, recommended)

package/skills/frontend-dev/scripts/minimax_image.py

@@ -0,0 +1,137 @@
+#!/usr/bin/env python3
+# SPDX-License-Identifier: MIT
+"""
+MiniMax Text-to-Image — synchronous generation.
+
+Usage:
+  python minimax_image.py "A cat in space" -o cat.png
+  python minimax_image.py "Mountain landscape" -o bg.png --ratio 16:9
+  python minimax_image.py "Product icons" -o icons.png -n 4 --ratio 1:1
+
+Env: MINIMAX_API_KEY (required)
+"""
+
+import os
+import sys
+import json
+import argparse
+import requests
+
+API_KEY = os.getenv("MINIMAX_API_KEY")
+# China Mainland: https://api.minimaxi.com/v1
+# Overseas:       https://api.minimax.io/v1
+API_BASE = os.getenv("MINIMAX_API_BASE")
+if not API_BASE:
+    raise SystemExit("ERROR: MINIMAX_API_BASE is not set.")
+
+ASPECT_RATIOS = ["1:1", "16:9", "4:3", "3:2", "2:3", "3:4", "9:16", "21:9"]
+
+
+def _headers():
+    if not API_KEY:
+        raise SystemExit("ERROR: MINIMAX_API_KEY is not set.\n  export MINIMAX_API_KEY='your-key'")
+    return {
+        "Authorization": f"Bearer {API_KEY}",
+        "Content-Type": "application/json",
+    }
+
+
+def generate_image(
+    prompt: str,
+    model: str = "image-01",
+    aspect_ratio: str = "1:1",
+    n: int = 1,
+    response_format: str = "url",
+    prompt_optimizer: bool = False,
+    seed: int = None,
+) -> dict:
+    """Generate image(s). Returns API response dict."""
+    payload = {
+        "model": model,
+        "prompt": prompt,
+        "aspect_ratio": aspect_ratio,
+        "n": n,
+        "response_format": response_format,
+        "prompt_optimizer": prompt_optimizer,
+    }
+    if seed is not None:
+        payload["seed"] = seed
+
+    resp = requests.post(
+        f"{API_BASE}/image_generation",
+        headers=_headers(),
+        json=payload,
+        timeout=120,
+    )
+    resp.raise_for_status()
+    data = resp.json()
+
+    base_resp = data.get("base_resp", {})
+    if base_resp.get("status_code", 0) != 0:
+        raise SystemExit(f"API Error [{base_resp.get('status_code')}]: {base_resp.get('status_msg')}")
+
+    return data
+
+
+def download_and_save(url: str, output_path: str):
+    """Download image from URL and save."""
+    resp = requests.get(url, timeout=60)
+    resp.raise_for_status()
+    with open(output_path, "wb") as f:
+        f.write(resp.content)
+    return len(resp.content)
+
+
+def main():
+    p = argparse.ArgumentParser(description="MiniMax Text-to-Image")
+    p.add_argument("prompt", help="Image description (max 1500 chars)")
+    p.add_argument("-o", "--output", required=True, help="Output file path (.png/.jpg)")
+    p.add_argument("--model", default="image-01", help="Model (default: image-01)")
+    p.add_argument("--ratio", default="1:1", choices=ASPECT_RATIOS, help="Aspect ratio (default: 1:1)")
+    p.add_argument("-n", "--count", type=int, default=1, choices=range(1, 10), help="Number of images (1-9, default: 1)")
+    p.add_argument("--seed", type=int, default=None, help="Random seed for reproducibility")
+    p.add_argument("--optimize", action="store_true", help="Enable prompt auto-optimization")
+    p.add_argument("--base64", action="store_true", help="Use base64 response instead of URL")
+    args = p.parse_args()
+
+    os.makedirs(os.path.dirname(args.output) or ".", exist_ok=True)
+
+    fmt = "base64" if args.base64 else "url"
+    result = generate_image(
+        prompt=args.prompt,
+        model=args.model,
+        aspect_ratio=args.ratio,
+        n=args.count,
+        response_format=fmt,
+        prompt_optimizer=args.optimize,
+        seed=args.seed,
+    )
+
+    meta = result.get("metadata", {})
+    print(f"Generated: {meta.get('success_count', '?')} success, {meta.get('failed_count', '?')} failed")
+
+    if args.base64:
+        images = result.get("data", {}).get("image_base64", [])
+        import base64
+        for i, b64 in enumerate(images):
+            path = args.output if len(images) == 1 else _numbered_path(args.output, i)
+            raw = base64.b64decode(b64)
+            with open(path, "wb") as f:
+                f.write(raw)
+            print(f"OK: {len(raw)} bytes -> {path}")
+    else:
+        urls = result.get("data", {}).get("image_urls", [])
+        for i, url in enumerate(urls):
+            path = args.output if len(urls) == 1 else _numbered_path(args.output, i)
+            size = download_and_save(url, path)
+            print(f"OK: {size} bytes -> {path}")
+
+
+def _numbered_path(path: str, index: int) -> str:
+    """Insert index before extension: out.png -> out-0.png"""
+    base, ext = os.path.splitext(path)
+    return f"{base}-{index}{ext}"
+
+
+if __name__ == "__main__":
+    main()