diff --git a/apps/desktop/src/renderer/src/components/VariationPanel.tsx b/apps/desktop/src/renderer/src/components/VariationPanel.tsx
new file mode 100644
index 00000000..2248fca8
--- /dev/null
+++ b/apps/desktop/src/renderer/src/components/VariationPanel.tsx
@@ -0,0 +1,180 @@
+import { useCallback, useEffect, useRef, useState } from "react";
+import type { Axis, GlyphVariationData, Source } from "@shift/types";
+import { SidebarSection } from "./sidebar-right/SidebarSection";
+import { getEditor } from "@/store/store";
+import { useSignalState } from "@/lib/reactive";
+import { interpolate, normalize } from "@/lib/interpolation/interpolate";
+import { Input } from "@shift/ui";
+
+export const VariationPanel = () => {
+ const editor = getEditor();
+ const font = editor.font;
+ const fontLoaded = useSignalState(font.$loaded);
+
+ const [axes, setAxes] = useState
([]);
+ const [sources, setSources] = useState([]);
+ const [location, setLocation] = useState>({});
+ const variationDataRef = useRef(null);
+ const [isInterpolating, setIsInterpolating] = useState(false);
+ const [editingGlyph, setEditingGlyph] = useState(null);
+
+ useEffect(() => {
+ if (!fontLoaded || !font.isVariable()) {
+ setAxes([]);
+ setSources([]);
+ return;
+ }
+
+ const fontAxes = font.getAxes();
+ setAxes(fontAxes);
+ setSources(font.getSources());
+
+ const defaults: Record = {};
+ for (const axis of fontAxes) {
+ defaults[axis.tag] = axis.default;
+ }
+ setLocation(defaults);
+ }, [fontLoaded, font]);
+
+ useEffect(() => {
+ setEditingGlyph(editor.getActiveGlyphName());
+ });
+
+ // Fetch variation data ONCE per glyph (cached in ref). Slider scrub reads from
+ // the cache and never goes back to Rust. TODO Phase D: invalidate on glyph
+ // commit (needs a commit-version signal on Glyph).
+ useEffect(() => {
+ if (axes.length === 0 || !editingGlyph) {
+ variationDataRef.current = null;
+ return;
+ }
+ variationDataRef.current = font.getGlyphVariationData(editingGlyph);
+ setIsInterpolating(false);
+ }, [axes, editingGlyph, font]);
+
+ // Pure JS math, zero NAPI calls.
+ const applyAt = useCallback(
+ (newLocation: Record) => {
+ const data = variationDataRef.current;
+ if (!data) return;
+
+ const values = interpolate(data, normalize(newLocation, axes));
+ const glyph = editor.glyph.peek();
+ if (glyph) glyph.applyValues(values);
+ font.setVariationLocation({ values: newLocation });
+ },
+ [axes, editor, font],
+ );
+
+ const handleAxisChange = useCallback(
+ (tag: string, value: number) => {
+ const newLocation = { ...location, [tag]: value };
+ setLocation(newLocation);
+ setIsInterpolating(true);
+ applyAt(newLocation);
+ },
+ [location, applyAt],
+ );
+
+ const handleMasterClick = useCallback(
+ (source: Source) => {
+ const newLocation: Record = {};
+ for (const axis of axes) {
+ newLocation[axis.tag] = source.location.values[axis.tag] ?? axis.default;
+ }
+ setLocation(newLocation);
+ setIsInterpolating(true);
+ applyAt(newLocation);
+ },
+ [axes, applyAt],
+ );
+
+ const handleResetToSession = useCallback(() => {
+ if (!isInterpolating) return;
+
+ setIsInterpolating(false);
+ font.setVariationLocation(null);
+ const glyph = editor.glyph.peek();
+ if (glyph) {
+ glyph.restoreSnapshot(glyph.toSnapshot());
+ }
+
+ const defaults: Record = {};
+ for (const axis of axes) {
+ defaults[axis.tag] = axis.default;
+ }
+ setLocation(defaults);
+ }, [isInterpolating, editor, font, axes]);
+
+ if (axes.length === 0) return null;
+
+ return (
+
+
+ {axes.map((axis) => (
+
handleAxisChange(axis.tag, value)}
+ />
+ ))}
+ {sources.length > 0 && (
+
+ {sources.map((s) => (
+
+ ))}
+
+ )}
+ {isInterpolating && (
+
+ )}
+
+
+ {axis.name}
+ {displayValue}
+
+
onChange(Number(e.target.value))}
+ className="w-full h-1.5 bg-[#e0e0e0] rounded-full appearance-none cursor-pointer
+ [&::-webkit-slider-thumb]:appearance-none [&::-webkit-slider-thumb]:w-3.5 [&::-webkit-slider-thumb]:h-3.5
+ [&::-webkit-slider-thumb]:rounded-full [&::-webkit-slider-thumb]:bg-[#333]
+ [&::-webkit-slider-thumb]:cursor-pointer [&::-webkit-slider-thumb]:border-2
+ [&::-webkit-slider-thumb]:border-white [&::-webkit-slider-thumb]:shadow-sm"
+ />
+