diff --git a/src/Dancer.js b/src/Dancer.js
index ccef804..82f75a3 100644
--- a/src/Dancer.js
+++ b/src/Dancer.js
@@ -13,6 +13,7 @@ import swing, { reset as swingReset } from './dances/swing.js'
 import neon, { reset as neonReset } from './dances/neon.js'
 import kern, { reset as kernReset } from './dances/kern.js'
 import fontSize, { reset as fontSizeReset } from './dances/font-size.js'
+import variableFont, { reset as variableFontReset } from './dances/variable-font.js'
 import borderWidth, {
   reset as borderWidthReset,
 } from './dances/border-width.js'
@@ -36,7 +37,11 @@ class Dancer {
     this.registerDance('kern', kern, kernReset)
     this.registerDance('borderWidth', borderWidth, borderWidthReset)
     this.registerDance('fontSize', fontSize, fontSizeReset)
+<<<<<<< HEAD
     this.registerDance('tilt', tilt, tiltReset)
+=======
+    this.registerDance('variableFont', variableFont, variableFontReset)
+>>>>>>> ✨ Add variable font dance
   }
 
   registerDance(type, dance, reset = () => {}) {
diff --git a/src/dances/variable-font.js b/src/dances/variable-font.js
new file mode 100644
index 0000000..ff42094
--- /dev/null
+++ b/src/dances/variable-font.js
@@ -0,0 +1,13 @@
+const generateFontVariationSettings = (value, options) => Object.entries(options).reduce((fontVariationSettings,[key, { min, max }]) => {
+    const computedValue = ((max - min) * value + min)
+    return `${fontVariationSettings ? `${fontVariationSettings},` : ''} '${key}' ${computedValue}`
+}, null)
+
+export default (elem, value, options = {}) => {
+    elem.style.fontVariationSettings = generateFontVariationSettings(value, options)
+}
+  
+export const reset = elem => {
+    elem.style.fontVariationSettings = null
+}
+  
\ No newline at end of file