Fluxion の概要

Fluxion は、アニメーションを“あとから編集できる状態”で作るためのソフトウェアです。

Fluxion は Python DSL / Text DSL から Scene Graph と Timeline を IR として生成し、ブラウザで再生・検証できます。作って終わりではなく、内容や演出を継続的に改善しやすいことが最大のメリットです。

Playground を開く Docs を読む 
scene width=1280 height=720 fps=60
camera at 0,0 scale=1
value theta = 0

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="#38bdf8" strokeWidth=4 opacity=0.55
text title "Fluxion Motion Lab" at 640,118 size=42 fill="#e2e8f0"
math equation "x^2+y^2=r^2" at 640,200 size=38 fill="#bae6fd" renderer=katex
circle dot r=38 at 470,390 fill="#38bdf8" stroke="#0f172a" strokeWidth=5
rect target w=190 h=104 at 960,390 fill="#f97316" stroke="#fed7aa" strokeWidth=4

at 0s:
  hide target
  play AnimationGroup(Write(title), FadeIn(equation), FadeIn(orbit), FadeIn(dot), lagRatio=0.16) duration=1.4s easing=easeOut

animate theta from 0 to 6.283 duration=2.4s easing=linear
set dot.x to expr="640 + 170 * cos(theta)"
set dot.y to expr="390 + 170 * sin(theta)"
animate camera.x from 0 to -24 duration=2.4s easing=easeInOut
play Transform(dot, target) duration=1s easing=easeInOut

Text DSL commands

GitHub Pages 上で体験できる Fluxion

Text DSL は 1 行 1 命令で Scene Graph と Timeline を組み立てます。短い命令列を動かしながら、Fluxion がどのように“編集可能な成果物”を作るかをその場で確認できます。

scene

キャンバスのサイズと FPS を変えます。

scene width=960 height=540 fps=30
text label "960x540 / 30fps" at 480,270 size=42 fill="#e2e8f0"
Playground で開く
theme

以降の node / helper の既定色をまとめて切り替えます。

scene width=640 height=360 fps=60
theme light accent="#2563eb"
text label "Light theme" at 320,130 size=40
circle dot r=52 at 320,230
Playground で開く
circle

半径と色を指定して円を描きます。

scene width=640 height=360 fps=60
circle dot r=58 at 320,180 fill="#38bdf8" stroke="#0f172a" strokeWidth=6
Playground で開く
rect

幅・高さ・不透明度を指定して矩形を描きます。

scene width=640 height=360 fps=60
rect card w=220 h=120 at 320,180 fill="#f97316" opacity=0.85
Playground で開く
triangle

幅と高さを指定して三角形を描きます。

scene width=640 height=360 fps=60
triangle tri w=220 h=190 at 320,180 fill="#ef4444" stroke="#7f1d1d" strokeWidth=6
Playground で開く
line

始点・終点を持つ線分を描きます。

scene width=640 height=360 fps=60
line axis x1=-220 y1=0 x2=220 y2=0 at 320,180 stroke="#e2e8f0" strokeWidth=8
Playground で開く
path

SVG path data で曲線や任意形状を描きます。

scene width=640 height=360 fps=60
path curve d="M 80 220 C 180 60 460 60 560 220" fill="none" stroke="#38bdf8" strokeWidth=8
Playground で開く
text

文字列を配置し、サイズと色を指定します。

scene width=640 height=360 fps=60
text title "Hello Text DSL" at 320,180 size=42 fill="#e2e8f0"
Playground で開く
math

LaTeX 文字列を数式 node として配置します。

scene width=640 height=360 fps=60
math formula "e^{i\pi}+1=0" at 320,180 size=44 fill="#bae6fd" renderer=katex
Playground で開く
group

複数 node をまとめて表示・アニメーションします。

scene width=640 height=360 fps=60
text label "Grouped" at 320,130 size=34 fill="#e2e8f0"
circle dot r=36 at 320,220 fill="#38bdf8"
group badge label dot
play FadeIn(badge) duration=1s
Playground で開く
surroundingRect

対象 node の周囲に枠用の矩形を作ります。

scene width=640 height=360 fps=60
math equation "f(x)g(x)" at 320,180 size=44 w=220 h=80 fill="#e2e8f0"
surroundingRect frame target=equation buff=12 stroke="#fbbf24" strokeWidth=5
Playground で開く
axes

座標軸ガイドをまとめて生成します。

scene width=960 height=540 fps=60
axes ax at 480,270 width=700 height=300 xRange=-4,4 yRange=-2,2 stroke="#94a3b8" strokeWidth=3 xTicks=-4,-2,0,2,4 yTicks=-2,-1,0,1,2
Playground で開く
numberPlane

Manim NumberPlane 風の背景グリッドを生成します。

scene width=960 height=540 fps=60
numberPlane plane at 480,270 xRange=-7,7 yRange=-4,4 unit=60
Playground で開く
axisLabels

Axes helper の軸端に Manim 風の数式ラベルを生成します。

scene width=960 height=540 fps=60
axes ax at 480,270 width=700 height=300 xRange=-4,4 yRange=-2,2 stroke="#94a3b8" strokeWidth=3
axisLabels labels axes=ax x="x" y="f(x)" size=28 fill="#e2e8f0"
Playground で開く
plot

関数式から path をサンプリングして描画します。

scene width=960 height=540 fps=60
plot curve fn=sin(t) range=-3.14,3.14 scaleX=90 scaleY=70 at 480,270 stroke="#38bdf8" strokeWidth=5 fill="none"
Playground で開く
graphLabel

Plot helper の曲線上の点から Manim 風の数式ラベルを配置します。

scene width=960 height=540 fps=60
plot curve fn=sin(t) range=-3.14,3.14 scaleX=90 scaleY=70 at 480,270 stroke="#38bdf8" strokeWidth=5 fill="none"
graphLabel label plot=curve label="\sin(x)" xVal=1.57 direction=up fill="#38bdf8"
Playground で開く
dataPolygon

axes のデータ座標から polygon path を生成します。

scene width=960 height=540 fps=60
axes ax at 480,270 width=700 height=300 xRange=-4,4 yRange=-2,2 stroke="#94a3b8" strokeWidth=3
dataPolygon poly axes=ax points=-2,-0.5;0,1;2,0.5 fill="#22d3ee" opacity=0.25 stroke="#22d3ee" strokeWidth=4
Playground で開く
dataRect

axes のデータ座標から更新可能な矩形を生成します。

scene width=960 height=540 fps=60
value t = 5
axes ax at 480,270 width=480 height=360 xRange=0,10 yRange=0,10 stroke="#94a3b8" strokeWidth=3
dataRect area axes=ax from=0,0 to=t,25/t fill="#58C4DD" fillOpacity=0.5 stroke="#F7D45A"
animate t from 5 to 8 duration=1s
Playground で開く
dataDot

axes のデータ座標から更新可能な dot を生成します。

scene width=960 height=540 fps=60
value t = 5
axes ax at 480,270 width=480 height=360 xRange=0,10 yRange=0,10 stroke="#94a3b8" strokeWidth=3
dataDot dot axes=ax point=t,25/t r=10 fill="#ffffff"
animate t from 5 to 8 duration=1s
Playground で開く
dataLine

axes のデータ座標から線分を生成します。

scene width=960 height=540 fps=60
axes ax at 480,270 width=500 height=330 xRange=0,5 yRange=0,6 stroke="#94a3b8" strokeWidth=3
dataLine marker axes=ax from=2,0 to=2,4 stroke="#FFFF00" strokeWidth=5
Playground で開く
dynamicLine

式に追従する line endpoint を生成します。

scene width=640 height=360 fps=60
value x = 0
value y = 0
dynamicLine connector x1=80+60*x y1=180 x2=360 y2=180-60*y stroke="#FC6255" strokeWidth=5
circle d1 r=10 at 80,180 fill="#58C4DD"
circle d2 r=10 at 360,180 fill="#83C167"
always d1.x = expr=80+60*x
always d2.y = expr=180-60*y
animate x from 0 to 2 duration=1s easing=smooth
animate y from 0 to 2 duration=1s easing=smooth
Playground で開く
dataArea

2つの関数の間の領域を axes 座標で生成します。

scene width=960 height=540 fps=60
axes ax at 480,270 width=500 height=330 xRange=0,5 yRange=0,6 stroke="#94a3b8" strokeWidth=3
dataArea area axes=ax lower=t upper=2*t range=1,2 samples=32 fill="#888888" fillOpacity=0.5
Playground で開く
dataRiemannRects

関数のリーマン矩形を axes 座標で生成します。

scene width=960 height=540 fps=60
axes ax at 480,270 width=500 height=330 xRange=0,5 yRange=0,6 stroke="#94a3b8" strokeWidth=3
dataRiemannRects bars axes=ax fn=4*t-t*t range=0.3,0.6 dx=0.03 fill="#0000FF" fillOpacity=0.5
Playground で開く
gaussianSurface

Gaussian Surface を投影済み checkerboard mesh として生成します。

scene width=960 height=540 fps=60
gaussianSurface surface at 480,270 range=-2,2 resolution=12 scale=2 sigma=0.4 fillA="#FF862F" fillB="#58C4DD" stroke="#83C167" fillOpacity=0.5
Playground で開く
sphereSurface

球面 Surface を投影済み checkerboard mesh として生成します。

scene width=640 height=360 fps=60
sphereSurface sphere at 320,180 radius=104 resolution=15,32 fillA="#E65A4C" fillB="#CF5044" light=0,-0.35,1
circle rim r=104 at 320,180 fill="none" stroke="#4D0E0F" strokeWidth=2
Playground で開く
threeDAxes

ThreeDAxes を投影済み line/tick/tip 群として生成します。

scene width=640 height=360 fps=60
threeDAxes axes at 320,190 xRange=-6,6,1 yRange=-5,5,1 zRange=-4,4,1 includeTips=true stroke="#ffffff"
Playground で開く
projectedCircle

XY 平面の円を投影済み cubic path として生成します。

scene width=640 height=360 fps=60
projectedCircle circle at 320,180 radius=1 xBasis=-56.75,25.5 yBasis=87.75,13.25 fill="none" stroke="#ffffff" strokeWidth=4
Playground で開く
arrow

shaft と tip を持つ矢印を生成します。

scene width=640 height=360 fps=60
arrow vec x1=120 y1=220 x2=500 y2=120 stroke="#22d3ee" fill="#22d3ee" strokeWidth=8 tipLength=32 tipWidth=30
Playground で開く
rotatingLine

基準線を指定点まわりに回転させる line helper です。

scene width=640 height=360 fps=60
value theta = 0
line base x1=200 y1=180 x2=440 y2=180 stroke="#64748b" strokeWidth=4
rotatingLine arm x1=200 y1=180 x2=440 y2=180 about=200,180 angle=-theta stroke="#f59e0b" strokeWidth=6
animate theta from 0 to 2.4 duration=1.5s easing=easeInOut
Playground で開く
rotateUpdater

dt ベースの回転 updater を累積 rotation animation に展開します。

scene width=640 height=360 fps=60
line arm x1=320 y1=180 x2=140 y2=180 stroke="#FFFF00" strokeWidth=8
rotateUpdater arm rate=1 duration=2s
rotateUpdater arm rate=-1 duration=2s
Playground で開く
angle

value tracker に追従する角度の円弧を生成します。

scene width=640 height=360 fps=60
value theta = 0
angle arc radius=72 from=0 to=theta samples=72 at 320,180 stroke="#f59e0b" strokeWidth=6
animate theta from 0 to 2.4 duration=1.5s easing=easeInOut
Playground で開く
tracedPath

パラメトリックな移動軌跡を path として生成します。

scene width=640 height=360 fps=60
value theta = 0
tracedPath trace x=96*cos(t) y=96*sin(t) from=0 to=theta samples=96 at 320,180 stroke="#22d3ee" strokeWidth=5
circle dot r=16 at 416,180 fill="#38bdf8"
set dot.x to expr="320 + 96 * cos(theta)"
set dot.y to expr="180 + 96 * sin(theta)"
animate theta from 0 to 6.283 duration=2s easing=linear
Playground で開く
arrange

group の子要素を等間隔で自動配置します。

scene width=640 height=360 fps=60
circle d1 r=22 at 0,0 fill="#38bdf8"
circle d2 r=22 at 0,0 fill="#f97316"
circle d3 r=22 at 0,0 fill="#22c55e"
group dots d1 d2 d3
arrange dots direction=horizontal gap=40
set dots.x to 320
set dots.y to 180
Playground で開く
nextTo

指定した対象の近くに node を相対配置します。

scene width=640 height=360 fps=60
circle dot r=28 at 280,180 fill="#38bdf8"
text label "nextTo" at 0,0 size=30 fill="#e2e8f0"
nextTo label dot direction=right buff=24
Playground で開く
cameraFrame

カメラフレームの初期位置とズームを設定します。

scene width=640 height=360 fps=60
cameraFrame at 0,0 scale=1
circle dot r=42 at 0,0 fill="#38bdf8"
Playground で開く
at

ブロック内の命令を指定時刻から開始します。

scene width=640 height=360 fps=60
circle early r=36 at 240,180 fill="#38bdf8"
circle late r=36 at 400,180 fill="#f97316" opacity=0
at 1s:
  set late.opacity to 1
Playground で開く
show / hide

timeline 上で node を出現・削除します。

scene width=640 height=360 fps=60
circle blink r=54 at 320,180 fill="#22c55e"
at 0s:
  show blink
at 1s:
  hide blink
Playground で開く
value

scalar tracker を宣言し、式や animation から参照します。

scene width=640 height=360 fps=60
value theta = 0
circle dot r=36 at 320,180 fill="#38bdf8"
animate theta from 0 to 6.28 duration=2s easing=linear
set dot.x to expr="320 + 100 * cos(theta)"
Playground で開く
set

指定 property に即時値を適用します。

scene width=640 height=360 fps=60
circle dot r=54 at 320,180 fill="#38bdf8"
at 1s:
  set dot.fill to "#22c55e"
Playground で開く
animate

property を from / to / duration で補間します。

scene width=640 height=360 fps=60
circle dot r=42 at 160,180 fill="#38bdf8"
animate dot.x from 160 to 480 duration=1.5s easing=easeInOut
Playground で開く
animateFrame

カメラフレームを移動・ズームします。

scene width=640 height=360 fps=60
cameraFrame at 0,0 scale=1
circle dot r=42 at 120,40 fill="#38bdf8"
animateFrame to 120,40 scale=1.4 duration=1s easing=easeInOut
Playground で開く
followCamera

カメラターゲットを動く node に追従させます。

scene width=640 height=360 fps=60
camera mode=target target=0,0 scale=1
circle dot r=30 at -180,0 fill="#ff862f"
line path x1=-180 y1=0 x2=180 y2=0 stroke="#94a3b8"
animate dot.x from -180 to 180 start=1s duration=2s easing=linear
followCamera dot start=1s duration=2s
animate camera.scale from 1 to 1.5 start=1s duration=0.8s easing=easeInOut
Playground で開く
play

FadeIn や Transform などの primitive を再生します。

scene width=640 height=360 fps=60
circle dot r=42 at 180,180 fill="#38bdf8"
rect target w=110 h=90 at 460,180 fill="#f97316"
at 0s:
  hide target
play FadeIn(dot) duration=0.7s
play Transform(dot, target) duration=1s easing=easeOut
Playground で開く
wait

current time を進め、次の animation 開始を遅らせます。

scene width=640 height=360 fps=60
circle dot r=42 at 160,180 fill="#38bdf8"
play FadeIn(dot) duration=0.7s
wait 0.8s
animate dot.x from 160 to 480 duration=1s easing=easeInOut
Playground で開く
インラインプレビュー コマンドサンプルを選ぶとここで実行します。 
scene width=1280 height=720 fps=60
camera at 0,0 scale=1

value theta = 0
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 command demo" at 640,92 size=42 fill="#e2e8f0"
text subtitle "Text DSL → scene graph → timeline 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 "Values, expressions, camera moves, groups, and math-token transforms in one scene." 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 0 to 6.283 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 0.2s
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=5.8s duration=0.8s easing=easeOut

at 6.2s:
  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=6.6s duration=0.6s easing=easeOut
  play FadeIn(caption) duration=0.8s easing=easeOut

デモの流れ

  1. scene と node 宣言で、再生領域・文字・数式・図形を定義します。
  2. at ブロックで開始時刻を固定し、show と play を順番に実行します。
  3. set と animate で円の色と座標を変え、Transform で矩形へ morph します。

Playground でデモを試す / 詳しい Text DSL reference

Pipeline: Python DSL / Text DSL Scene Graph IR Timeline IR Browser SVG Runtime

編集し続けられる成果物

動画を書き出して終わりではなく、Scene Graph / Timeline IR を残すので、あとから要素やタイミングを再編集できます。

非エンジニアとも共有しやすい

Text DSL は 1 行 1 命令で読みやすく、Playground でそのまま動作確認できるため、仕様レビューや合意形成が速くなります。

導入が軽く、安全に試せる

ブラウザ上で任意の Python を実行せずに `.fluxion.json` を生成し、SVG Runtime ですぐ preview できるため、初期検証の負荷を抑えられます。

Next step

まずは概要をつかみ、メリットを体験する。

Playground で Text DSL を数行編集するだけで、再編集可能な IR と SVG preview を確認できます。Fluxion の価値を最短で理解したい人に最適です。

Playground を開く Text DSL reference