dsh-hyperframes 0.1.1 → 0.3.0

package/skills/talking-head-recut/references/styles/xhs.html

@@ -0,0 +1,206 @@
+<!--
+  Style: xhs (小红书) — cream + hot pink · chips · #hashtags · ❤️💬 row
+  ─────────────────────────────────────────────────────────────────────
+  Tokens
+    bg     #fff5e9   (warm cream)
+    ink    #1d1418
+    muted  #8a7a78
+    accent #ff2e63   (hot pink — chip + interaction icon)
+    accent2#ff8a4c   (orange — tag)
+    accent3#f0c419   (yellow — pin)
+  Fonts
+    headline & body — Noto Sans SC fallback: ui-sans-serif, system-ui, "PingFang SC", sans-serif
+  Best with
+    layouts: overlay, stack (especially in portrait/9:16)
+    frames:  clean, polaroid
+    content: 社交剪辑 / 生活方式 / 种草 / 短视频高光
+-->
+<!doctype html>
+<html lang="zh-CN">
+  <head>
+    <meta charset="utf-8" />
+    <title>style · xhs (小红书)</title>
+    <style>
+      html,
+      body {
+        margin: 0;
+        padding: 0;
+        background: #0a0c12;
+        font-family: ui-sans-serif, system-ui, sans-serif;
+      }
+      .stage {
+        position: relative;
+        width: 1920px;
+        height: 1080px;
+        transform-origin: top left;
+        transform: scale(0.5);
+        overflow: hidden;
+      }
+      .card-host {
+        position: absolute;
+        left: 0;
+        top: 0;
+        width: 1920px;
+        height: 1080px;
+      }
+    </style>
+  </head>
+  <body>
+    <div class="stage">
+      <div class="card-host">
+        <div class="card" data-card-id="ref-xhs">
+          <style>
+            .card[data-card-id="ref-xhs"] .root {
+              --bg: #fff5e9;
+              --ink: #1d1418;
+              --muted: #8a7a78;
+              --accent: #ff2e63;
+              --accent2: #ff8a4c;
+              --accent3: #f0c419;
+              --font-sans: ui-sans-serif, system-ui, "PingFang SC", "Hiragino Sans GB", sans-serif;
+
+              width: 100%;
+              height: 100%;
+              position: relative;
+              overflow: hidden;
+              background: var(--bg);
+              color: var(--ink);
+              font-family: var(--font-sans);
+              padding: 36px 44px;
+              box-sizing: border-box;
+              display: flex;
+              flex-direction: column;
+              gap: 22px;
+            }
+            .card[data-card-id="ref-xhs"] .user-row {
+              display: flex;
+              align-items: center;
+              gap: 14px;
+            }
+            .card[data-card-id="ref-xhs"] .avatar {
+              width: 56px;
+              height: 56px;
+              border-radius: 50%;
+              background: linear-gradient(135deg, #ff2e63, #ff8a4c);
+              box-shadow:
+                0 0 0 3px #fff,
+                0 0 0 4px rgba(255, 46, 99, 0.3);
+            }
+            .card[data-card-id="ref-xhs"] .user-info {
+              flex: 1;
+            }
+            .card[data-card-id="ref-xhs"] .user-name {
+              font: 700 22px/1.1 var(--font-sans);
+              color: var(--ink);
+            }
+            .card[data-card-id="ref-xhs"] .user-sub {
+              font: 400 16px/1.3 var(--font-sans);
+              color: var(--muted);
+            }
+            .card[data-card-id="ref-xhs"] .follow {
+              padding: 8px 20px;
+              border-radius: 999px;
+              background: var(--accent);
+              color: #fff;
+              font: 700 16px/1 var(--font-sans);
+            }
+            .card[data-card-id="ref-xhs"] .title {
+              margin: 0;
+              font: 800 84px/1.1 var(--font-sans);
+              color: var(--ink);
+              letter-spacing: -0.01em;
+            }
+            .card[data-card-id="ref-xhs"] .title .heart {
+              color: var(--accent);
+            }
+            .card[data-card-id="ref-xhs"] .detail {
+              margin: 0;
+              font: 500 28px/1.5 var(--font-sans);
+              color: var(--ink);
+              max-width: 94%;
+            }
+            .card[data-card-id="ref-xhs"] .tags {
+              display: flex;
+              flex-wrap: wrap;
+              gap: 10px;
+            }
+            .card[data-card-id="ref-xhs"] .tag {
+              padding: 8px 18px;
+              border-radius: 999px;
+              background: rgba(255, 46, 99, 0.12);
+              color: var(--accent);
+              font: 600 18px/1 var(--font-sans);
+            }
+            .card[data-card-id="ref-xhs"] .tag.orange {
+              background: rgba(255, 138, 76, 0.16);
+              color: var(--accent2);
+            }
+            .card[data-card-id="ref-xhs"] .tag.yellow {
+              background: rgba(240, 196, 25, 0.18);
+              color: #a98209;
+            }
+            .card[data-card-id="ref-xhs"] .interactions {
+              display: flex;
+              gap: 28px;
+              margin-top: auto;
+              padding-top: 14px;
+              border-top: 1px solid rgba(0, 0, 0, 0.06);
+              font: 700 22px/1 var(--font-sans);
+              color: var(--ink);
+            }
+            .card[data-card-id="ref-xhs"] .interactions span {
+              display: inline-flex;
+              align-items: center;
+              gap: 8px;
+            }
+            .card[data-card-id="ref-xhs"] .interactions .heart-ic {
+              color: var(--accent);
+              font-size: 26px;
+            }
+          </style>
+
+          <div class="root">
+            <div class="user-row" data-anim="fade-in" data-anim-at="0.05" data-anim-duration="0.4">
+              <div class="avatar"></div>
+              <div class="user-info">
+                <div class="user-name">@小研究员</div>
+                <div class="user-sub">关注我，看我每天拆一段视频 · 18分钟前</div>
+              </div>
+              <div class="follow">+ 关注</div>
+            </div>
+
+            <h2 class="title" data-anim="fade-in" data-anim-at="0.3" data-anim-duration="0.5">
+              亲测有效！<span class="heart">♥</span> 30 秒抓住注意力的小技巧
+            </h2>
+
+            <p class="detail" data-anim="fade-in" data-anim-at="0.7" data-anim-duration="0.45">
+              开头别废话——直接抛结论。听众的大脑在前 3 秒就决定要不要继续，
+              这是平台算法之外，最朴素也最重要的事实。
+            </p>
+
+            <div class="tags" data-anim="fade-in" data-anim-at="1.0" data-anim-duration="0.4">
+              <span class="tag">#内容创作</span>
+              <span class="tag orange">#播客剪辑</span>
+              <span class="tag yellow">#开头技巧</span>
+            </div>
+
+            <div
+              class="interactions"
+              data-anim="fade-in"
+              data-anim-at="1.25"
+              data-anim-duration="0.4"
+            >
+              <span><span class="heart-ic">♥</span> 12.4k</span>
+              <span>💬 386</span>
+              <span>⭐ 891</span>
+              <span
+                style="margin-left: auto; color: var(--muted); font-weight: 400; font-size: 18px"
+                >📤 分享</span
+              >
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </body>
+</html>

package/skills/gsap/SKILL.md

@@ -1,213 +0,0 @@
----
-name: gsap
-description: "GSAP animation reference for HyperFrames. Covers gsap.to(), from(), fromTo(), easing, stagger, defaults, timelines (gsap.timeline(), position parameter, labels, nesting, playback), and performance (transforms, will-change, quickTo). Use when writing GSAP animations in HyperFrames compositions. 中文：在 HyperFrames 合成里写 GSAP 动画时使用。"
-compatibility: Pure reference; GSAP ships inside HyperFrames compositions, no local install needed.
-allowed-tools: Bash
----
-
-# GSAP
-
-## Core Tween Methods
-
-- **gsap.to(targets, vars)** — animate from current state to `vars`. Most common.
-- **gsap.from(targets, vars)** — animate from `vars` to current state (entrances).
-- **gsap.fromTo(targets, fromVars, toVars)** — explicit start and end.
-- **gsap.set(targets, vars)** — apply immediately (duration 0).
-
-Always use **camelCase** property names (e.g. `backgroundColor`, `rotationX`).
-
-## Common vars
-
-- **duration** — seconds (default 0.5).
-- **delay** — seconds before start.
-- **ease** — `"power1.out"` (default), `"power3.inOut"`, `"back.out(1.7)"`, `"elastic.out(1, 0.3)"`, `"none"`.
-- **stagger** — number `0.1` or object: `{ amount: 0.3, from: "center" }`, `{ each: 0.1, from: "random" }`.
-- **overwrite** — `false` (default), `true`, or `"auto"`.
-- **repeat** — number or `-1` for infinite. **yoyo** — alternates direction with repeat.
-- **onComplete**, **onStart**, **onUpdate** — callbacks.
-- **immediateRender** — default `true` for from()/fromTo(). Set `false` on later tweens targeting the same property+element to avoid overwrite.
-
-## Transforms and CSS
-
-Prefer GSAP's **transform aliases** over raw `transform` string:
-
-| GSAP property               | Equivalent          |
-| --------------------------- | ------------------- |
-| `x`, `y`, `z`               | translateX/Y/Z (px) |
-| `xPercent`, `yPercent`      | translateX/Y in %   |
-| `scale`, `scaleX`, `scaleY` | scale               |
-| `rotation`                  | rotate (deg)        |
-| `rotationX`, `rotationY`    | 3D rotate           |
-| `skewX`, `skewY`            | skew                |
-| `transformOrigin`           | transform-origin    |
-
-- **autoAlpha** — prefer over `opacity`. At 0: also sets `visibility: hidden`.
-- **CSS variables** — `"--hue": 180`.
-- **svgOrigin** _(SVG only)_ — global SVG coordinate space origin. Don't combine with `transformOrigin`.
-- **Directional rotation** — `"360_cw"`, `"-170_short"`, `"90_ccw"`.
-- **clearProps** — `"all"` or comma-separated; removes inline styles on complete.
-- **Relative values** — `"+=20"`, `"-=10"`, `"*=2"`.
-
-## Function-Based Values
-
-```javascript
-gsap.to(".item", {
-  x: (i, target, targets) => i * 50,
-  stagger: 0.1,
-});
-```
-
-## Easing
-
-Built-in eases: `power1`–`power4`, `back`, `bounce`, `circ`, `elastic`, `expo`, `sine`. Each has `.in`, `.out`, `.inOut`.
-
-## Defaults
-
-```javascript
-gsap.defaults({ duration: 0.6, ease: "power2.out" });
-```
-
-## Controlling Tweens
-
-```javascript
-const tween = gsap.to(".box", { x: 100 });
-tween.pause();
-tween.play();
-tween.reverse();
-tween.kill();
-tween.progress(0.5);
-tween.time(0.2);
-```
-
-## gsap.matchMedia() (Responsive + Accessibility)
-
-Runs setup only when a media query matches; auto-reverts when it stops matching.
-
-```javascript
-let mm = gsap.matchMedia();
-mm.add(
-  {
-    isDesktop: "(min-width: 800px)",
-    reduceMotion: "(prefers-reduced-motion: reduce)",
-  },
-  (context) => {
-    const { isDesktop, reduceMotion } = context.conditions;
-    gsap.to(".box", {
-      rotation: isDesktop ? 360 : 180,
-      duration: reduceMotion ? 0 : 2,
-    });
-  },
-);
-```
-
----
-
-## Timelines
-
-### Creating a Timeline
-
-```javascript
-const tl = gsap.timeline({ defaults: { duration: 0.5, ease: "power2.out" } });
-tl.to(".a", { x: 100 }).to(".b", { y: 50 }).to(".c", { opacity: 0 });
-```
-
-### Position Parameter
-
-Third argument controls placement:
-
-- **Absolute**: `1` — at 1s
-- **Relative**: `"+=0.5"` — after end; `"-=0.2"` — before end
-- **Label**: `"intro"`, `"intro+=0.3"`
-- **Alignment**: `"<"` — same start as previous; `">"` — after previous ends; `"<0.2"` — 0.2s after previous starts
-
-```javascript
-tl.to(".a", { x: 100 }, 0);
-tl.to(".b", { y: 50 }, "<"); // same start as .a
-tl.to(".c", { opacity: 0 }, "<0.2"); // 0.2s after .b starts
-```
-
-### Labels
-
-```javascript
-tl.addLabel("intro", 0);
-tl.to(".a", { x: 100 }, "intro");
-tl.addLabel("outro", "+=0.5");
-tl.play("outro");
-tl.tweenFromTo("intro", "outro");
-```
-
-### Timeline Options
-
-- **paused: true** — create paused; call `.play()` to start.
-- **repeat**, **yoyo** — apply to whole timeline.
-- **defaults** — vars merged into every child tween.
-
-### Nesting Timelines
-
-```javascript
-const master = gsap.timeline();
-const child = gsap.timeline();
-child.to(".a", { x: 100 }).to(".b", { y: 50 });
-master.add(child, 0);
-```
-
-### Playback Control
-
-`tl.play()`, `tl.pause()`, `tl.reverse()`, `tl.restart()`, `tl.time(2)`, `tl.progress(0.5)`, `tl.kill()`.
-
----
-
-## Performance
-
-### Prefer Transform and Opacity
-
-Animating `x`, `y`, `scale`, `rotation`, `opacity` stays on the compositor. Avoid `width`, `height`, `top`, `left` when transforms achieve the same effect.
-
-### will-change
-
-```css
-will-change: transform;
-```
-
-Only on elements that actually animate.
-
-### gsap.quickTo() for Frequent Updates
-
-```javascript
-let xTo = gsap.quickTo("#id", "x", { duration: 0.4, ease: "power3" }),
-  yTo = gsap.quickTo("#id", "y", { duration: 0.4, ease: "power3" });
-container.addEventListener("mousemove", (e) => {
-  xTo(e.pageX);
-  yTo(e.pageY);
-});
-```
-
-### Stagger > Many Tweens
-
-Use `stagger` instead of separate tweens with manual delays.
-
-### Cleanup
-
-Pause or kill off-screen animations.
-
----
-
-## References (loaded on demand)
-
-- **[references/effects.md](references/effects.md)** — Drop-in effects: typewriter text, audio visualizer. Read when needing ready-made effect patterns for HyperFrames.
-
-## Best Practices
-
-- Use camelCase property names; prefer transform aliases and autoAlpha.
-- Prefer timelines over chaining with delay; use the position parameter.
-- Add labels with `addLabel()` for readable sequencing.
-- Pass defaults into timeline constructor.
-- Store tween/timeline return value when controlling playback.
-
-## Do Not
-
-- Animate layout properties (width/height/top/left) when transforms suffice.
-- Use both svgOrigin and transformOrigin on the same SVG element.
-- Chain animations with delay when a timeline can sequence them.
-- Create tweens before the DOM exists.
-- Skip cleanup — always kill tweens when no longer needed.