Hacktoberfest 2026：メンテナが10月に向けて印を付けた、オープンで初心者向けの issue。 Hacktoberfest の issue を見る

`motionContextToDocs`: `y` track copies `opacity` when a node animates both (key lookup has no word boundary)

オープン 初心者向け
  • 何か問題がありますか？
#6,756 コメント 0 件 リアクション 0 件 担当者 0 名 GitHub で見る

メンテナーはふだん 1 日以内に返信

@Muzzy5150 がすでに取り組んでいます。

2026年10月30日 から。

  • #6800 @Muzzy5150 による — オープン
  • #6810 @MoonPointer-Byte による — オープン

評価

難易度
2/5
見積もり時間
1〜3時間
初心者へのやさしさ
78/100
issue の種類
バグ
明瞭さ
明確に書かれている
活発さ
活発
技術スタック
node.js, typescript
領域
backend, testing

調査の方向性

dist/figma/motionContextToDocs.jsから始め、arrayAfterKey、scalarAfterKey、およびissueで説明されているbalancedBlockの検索を調べてください。提供された再現手順をパッケージに対して実行し、出力されたyトラックを確認してください。opacityとyが同時に現れる場合に、その値と時刻が期待される配列と一致すれば完了です。

索引モデルが issue の本文から書いたものです。

説明

Describe the bug

In @hyperframes/core (dist/figma/motionContextToDocs.js), arrayAfterKey, scalarAfterKey and the
balancedBlock(transition, ${prop}: {) lookup search for the key with a plain regex or substring,
with no word boundary. When a Figma node animates opacity and y together, the search for y: [
matches inside opacity: [ (and y: { inside opacity: {), so the y track gets the opacity values
and timing. Letters that should rise 120px move 1px. Any key that ends another key is exposed the same
way.

The verify-motion.mjs check in the /figma skill passes the wrong translation: on our test it
scored the broken output higher than the corrected one (16.28 dB against 15.89 dB worst segment),
because the fade dominates the motion energy it compares.

Minimal reproduction
// repro.mjs — run: node repro.mjs <path to an installed @hyperframes/core>
const core = process.argv[2];
const { motionContextToDocs } = await import(core + "/dist/figma/index.js");
const snippet = '<motion.div initial={{ opacity: 0, y: 120, }} animate={{ opacity: [0, 0, 1, 1], y: [120, 120, 0, 0], }} transition={{ opacity: { duration: 4.5, times: [0, 0.0444, 0.1333, 1], ease: ["linear", "easeOut", "linear"], repeat: Infinity }, y: { duration: 4.5, times: [0, 0.0444, 0.2222, 1], ease: ["linear", "easeOut", "linear"], repeat: Infinity }, }} />';
const response = {
  nodes: [{ nodeId: "1:2", nodeName: "Box", nodeType: "FRAME", codeSnippets: { motionDev: snippet } }],
  timelineCohorts: [{ rootNodeId: "1:1", durationMs: 4500, loopMode: "loop", memberNodeIds: ["1:2"] }],
};
console.log(JSON.stringify(motionContextToDocs(response, { selectorFor: () => "#box" }), null, 1));

The snippet has the same shape as what get_motion_context returns for a layer with a fade and a
rise in Figma Motion.

Steps to reproduce
  1. npm pack @hyperframes/[email protected] && tar xzf hyperframes-core-0.8.217.tgz && (cd package && npm install --omit=dev)
  2. node repro.mjs ./package
  3. Look at the y track.
Expected behavior

y track: values [120, 120, 0, 0], times [0, 0.0444, 0.2222, 1].

Actual behavior

y track: values [0, 0, 1, 1], times [0, 0.0444, 0.1333, 1]: the opacity track, copied.

Environment
✓ Version          CLI 0.8.181 (plugin) · @hyperframes/core 0.8.181 and 0.8.217 both affected
✓ Node.js          v24.22.0 (darwin arm64)
✓ CPU              8 cores · Apple M3
✓ FFmpeg           ffmpeg 6.0
✓ Chrome           chrome-headless-shell mac_arm 152.0.7977.30
Additional context

A fix that keeps the current parsing: anchor the key so it cannot match inside a longer identifier,
for example new RegExp(`(?<![\\w$])${escapeRegExp(key)}\\s*:\\s*\\[`) in arrayAfterKey, the same
in scalarAfterKey, and the same guard in the balancedBlock lookup for ${prop}: {. Our workaround
until then is to reorder the snippet so the y entry comes before opacity, which changes no value.
It would also help if verify-motion.mjs compared the emitted tweens property by property against
the get_motion_context keyframes, since a frame-energy score cannot see a swapped track.

主要言語
TypeScript
スター
54.1k
フォーク
4.9k
平均マージ
8時間 46分
マージ済み PR（30日）
781

環境構築

このプロジェクトには開発コンテナ、Dockerfile、コントリビューションガイドがありません。まず README を読み、一般的な手順ははじめてのコントリビューションガイドを参照してください。

はじめの一歩

  1. issue を最後まで読み、次にプロジェクトのコントリビューションガイドを読みます。
  2. 着手することを issue にコメントします — 二人が同じ作業をするのを防げます。
  3. リポジトリをフォークし、ブランチを切って変更します。
  4. issue 番号を参照したプルリクエストを送ります。

heygen-com/hyperframes のほかの issue

heygen-com/hyperframes の issue をすべて見る

似ている issue

TypeScript の issue をもっと見る

新しい issue をメールで受け取る

初心者向けの GitHub issue を短くまとめたダイジェスト。