Fluxion Text DSL

ブラウザで書ける、編集可能なアニメーション DSL

Fluxion は短い宣言的な Text DSL を .fluxion.json に変換し、SVG ランタイムでその場で再生します。 Python や任意コードをブラウザで実行せず、図形の配置・表示タイミング・プロパティアニメーションを安全に試せます。

デモを試す使い方を見る

scene / circle / rect / line / text show と at block animate with easing Generated JSON preview

DSL の使い方

まず scene を宣言し、node を配置し、timeline に show / animate を追加します。左のエディタに貼り付けて Compile または Live compile で確認できます。

1. Scene を設定

scene width=1280 height=720 fps=60 のようにキャンバスサイズと FPS を指定します。省略時は 1280x720 / 60fps です。

2. Node を宣言

circle、rect、line、text に一意な id を付け、at x,y や fill で見た目を指定します。

3. Timeline を書く

show id で表示し、animate id.x from 0 to 100 duration=1s のようにプロパティを動かします。

最小サンプル

このサンプルはタイトルと円を表示し、円の x 座標を 1.5 秒で移動させます。

scene width=1280 height=720 fps=60
text title "Fluxion MVP" at 640,110 size=32 fill="#e2e8f0"
circle c1 r=48 at 220,360 fill="#38bdf8" stroke="#0f172a" strokeWidth=4

at 0s:
  show title
  show c1

animate c1.x from 220 to 640 duration=1.5s easing=easeInOut

ライブデモ

DSL を編集するとブラウザ内で Fluxion IR にコンパイルされ、右側の SVG プレビューと JSON 出力が更新されます。

scene width=1280 height=720 fps=60
camera at 0,0 scale=1

value theta = 3.1416
value pulse = 0

rect backdrop w=1280 h=720 at 640,360 fill="#020617"
path orbit d="M -170 0 C -170 -94 -94 -170 0 -170 C 94 -170 170 -94 170 0 C 170 94 94 170 0 170 C -94 170 -170 94 -170 0" at 640,390 fill="none" stroke="#1e3a8a" strokeWidth=5 opacity=0.5
line axis x1=-460 y1=0 x2=460 y2=0 at 640,390 stroke="#475569" strokeWidth=2 opacity=0.65
text title "Fluxion: editable motion IR" at 640,92 size=42 fill="#e2e8f0"
text subtitle "Text DSL → scene graph → deterministic SVG playback" at 640,146 size=23 fill="#94a3b8"
math equation "x^2+y^2=r^2" at 640,222 size=38 fill="#bae6fd" renderer=katex expandTokens=true
math equation2 "x^2+y^2=R^2" at 640,222 size=38 fill="#fef3c7" renderer=katex expandTokens=true
circle dot r=34 at 470,390 fill="#38bdf8" stroke="#0f172a" strokeWidth=5
circle halo r=56 at 470,390 fill="#38bdf8" stroke="#7dd3fc" strokeWidth=2 opacity=0.18
rect card w=230 h=112 at 1000,390 fill="#f97316" stroke="#fed7aa" strokeWidth=4 opacity=0.9
text cardLabel "morph target" at 1000,390 size=26 fill="#111827"
path spark d="M 0 -52 L 14 -14 L 52 0 L 14 14 L 0 52 L -14 14 L -52 0 L -14 -14 Z" at 640,510 fill="#facc15" stroke="#fef08a" strokeWidth=3
text caption "Trackers drive orbit, halo pulse, camera drift, and token-aware math transforms." at 640,646 size=22 fill="#cbd5e1"

group cardGroup card cardLabel
group hero title subtitle equation
group heroNext title subtitle equation2

at 0s:
  show backdrop
  show axis

play AnimationGroup(FadeIn(orbit), Write(hero), FadeIn(dot), FadeIn(halo), lagRatio=0.18) duration=1.6s easing=easeOut
wait 0.2s
animate theta from 3.1416 to 9.4248 duration=2.8s easing=linear
animate pulse from 0 to 6.283 duration=2.8s easing=linear
set dot.x to expr="640 + 170 * cos(theta)"
set dot.y to expr="390 + 170 * sin(theta)"
set halo.x to expr="640 + 170 * cos(theta)"
set halo.y to expr="390 + 170 * sin(theta)"
set halo.scale to expr="1.0 + 0.22 * sin(pulse)"
animate camera.x from 0 to -28 duration=2.8s easing=easeInOut
animate camera.y from 0 to 18 duration=2.8s easing=easeInOut

wait 3s
play TransformMatchingTex(equation, equation2) duration=1.2s easing=easeInOut
play FadeIn(cardGroup) duration=0.6s easing=easeOut
play Transform(dot, card) duration=1.25s easing=easeInOut
animate halo.opacity from 0.18 to 0 start=7.2s duration=0.8s easing=easeOut

at 8s:
  play FadeIn(spark) duration=0.4s easing=easeOut
  animate spark.rotation from 0 to 180 duration=1s easing=linear
  animate spark.scale from 0.8 to 1.45 duration=1s easing=easeOut
  animate spark.opacity from 1 to 0.35 start=8.4s duration=0.6s easing=easeOut
  play FadeIn(caption) duration=0.8s easing=easeOut

Preview

0.00 / 0.00

Generated .fluxion.json

クイックリファレンス

Text DSL は現在サポートしている小さな構文に絞っています。より詳しい仕様は正本の site/src/content/docs/reference/text-dsl.md を参照してください。

Statements

scene width=<number> height=<number> fps=<number>
circle <id> r=<number> at x,y
rect <id> w=<number> h=<number> at x,y
line <id> x1=<number> y1=<number> x2=<number> y2=<number>
text <id> "label" at x,y size=<number>
math <id> "e^{i\\pi}+1=0" renderer=katex|mathjax size=<number>

Timeline / Properties

at 1.5s: で block 内の開始時刻を指定
show <id> で node を作成
animate <id>.<property> from <value> to <value> duration=1s
Property: x, y, scale, rotation, opacity, fill, stroke, strokeWidth, geometry fields
Easing: linear, smooth, easeInOut, easeIn, easeOut

Tip: GitHub Pages ではこのページだけで DSL の編集、コンパイル、プレビュー、生成 JSON の確認ができます。ローカルでは cd web && npm run build 後に python -m http.server 8000 を実行し、/web/ を開いてください。